diff --git a/packages/nc-gui/components/apiOverlay.vue b/packages/nc-gui/components/ApiOverlay.vue
similarity index 100%
rename from packages/nc-gui/components/apiOverlay.vue
rename to packages/nc-gui/components/ApiOverlay.vue
diff --git a/packages/nc-gui/components/authTab.vue b/packages/nc-gui/components/AuthTab.vue
similarity index 93%
rename from packages/nc-gui/components/authTab.vue
rename to packages/nc-gui/components/AuthTab.vue
index de92f93ac7..64a707254f 100644
--- a/packages/nc-gui/components/authTab.vue
+++ b/packages/nc-gui/components/AuthTab.vue
@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import UserManagement from '@/components/auth/userManagement'
-import Roles from '@/components/auth/roles'
-import ApiTokens from '@/components/auth/apiTokens'
+import UserManagement from '~/components/auth/UserManagement'
+import Roles from '~/components/auth/Roles'
+import ApiTokens from '~/components/auth/ApiTokens'
 
 export default {
   name: 'AuthTab',
diff --git a/packages/nc-gui/components/changeEnv.vue b/packages/nc-gui/components/ChangeEnv.vue
similarity index 97%
rename from packages/nc-gui/components/changeEnv.vue
rename to packages/nc-gui/components/ChangeEnv.vue
index 52c5ed5bf7..f4aea229f9 100644
--- a/packages/nc-gui/components/changeEnv.vue
+++ b/packages/nc-gui/components/ChangeEnv.vue
@@ -28,7 +28,7 @@
             <!-- Close -->
             {{ $t('general.close') }}
           </v-btn>
-          <v-btn color="primary" small :disabled="progressbar" @click="changeEnv">
+          <v-btn color="primary" small :disabled="progressbar" @click="ChangeEnv">
             Change
           </v-btn>
         </v-card-actions>
@@ -93,7 +93,7 @@ export default {
       await this.$store.dispatch('users/ActSignOut')
 
       await this.$store.dispatch('project/ActLoadProjectInfo')
-      if (this.$store.state.project.projectInfo.projectHasAdmin === false) {
+      if (this.$store.state.project.appInfo.projectHasAdmin === false) {
         return this.$router.push('/start')
       }
       location.reload()
diff --git a/packages/nc-gui/components/createOrEditProject.vue b/packages/nc-gui/components/CreateOrEditProject.vue
similarity index 99%
rename from packages/nc-gui/components/createOrEditProject.vue
rename to packages/nc-gui/components/CreateOrEditProject.vue
index eb63c96da6..831b4fa489 100644
--- a/packages/nc-gui/components/createOrEditProject.vue
+++ b/packages/nc-gui/components/CreateOrEditProject.vue
@@ -860,13 +860,13 @@ import Vue from 'vue'
 
 import { v4 as uuidv4 } from 'uuid'
 
-import XBtn from './global/xBtn'
-import dlgOk from './utils/dlgOk.vue'
-import textDlgSubmitCancel from './utils/dlgTextSubmitCancel'
+import XBtn from './global/XBtn'
+import dlgOk from './utils/DlgOk.vue'
+import textDlgSubmitCancel from './utils/DlgTextSubmitCancel'
 import MonacoJsonObjectEditor from '@/components/monaco/MonacoJsonObjectEditor'
-import ApiOverlay from '@/components/apiOverlay'
+import ApiOverlay from '~/components/ApiOverlay'
 import colors from '@/mixins/colors'
-import DlgOkNew from '@/components/utils/dlgOkNew'
+import DlgOkNew from '~/components/utils/DlgOkNew'
 import readFile from '@/helpers/fileReader'
 
 const {
@@ -1428,8 +1428,8 @@ export default {
           break
       }
 
-      xcConfig.type = this.$store.state.project.projectInfo
-        ? this.$store.state.project.projectInfo.type
+      xcConfig.type = this.$store.state.project.appInfo
+        ? this.$store.state.project.appInfo.type
         : 'docker'
 
       if (
diff --git a/packages/nc-gui/components/createProjectComingSoon.vue b/packages/nc-gui/components/CreateProjectComingSoon.vue
similarity index 100%
rename from packages/nc-gui/components/createProjectComingSoon.vue
rename to packages/nc-gui/components/CreateProjectComingSoon.vue
diff --git a/packages/nc-gui/components/discord.vue b/packages/nc-gui/components/Discord.vue
similarity index 100%
rename from packages/nc-gui/components/discord.vue
rename to packages/nc-gui/components/Discord.vue
diff --git a/packages/nc-gui/components/dynamicStyle.js b/packages/nc-gui/components/DynamicStyle.js
similarity index 100%
rename from packages/nc-gui/components/dynamicStyle.js
rename to packages/nc-gui/components/DynamicStyle.js
diff --git a/packages/nc-gui/components/environment.vue b/packages/nc-gui/components/Environment.vue
similarity index 100%
rename from packages/nc-gui/components/environment.vue
rename to packages/nc-gui/components/Environment.vue
diff --git a/packages/nc-gui/components/feedbackForm.vue b/packages/nc-gui/components/FeedbackForm.vue
similarity index 87%
rename from packages/nc-gui/components/feedbackForm.vue
rename to packages/nc-gui/components/FeedbackForm.vue
index d154984028..ff6de84891 100644
--- a/packages/nc-gui/components/feedbackForm.vue
+++ b/packages/nc-gui/components/FeedbackForm.vue
@@ -23,10 +23,10 @@ export default {
   computed: {
     feedbackFormHidden: {
       get() {
-        return this.$store.state.windows.feedbackFormHidden
+        return this.$store.state.settings.feedbackFormHidden
       },
       set(val) {
-        this.$store.commit('windows/MutFeedbackFormHidden', val)
+        this.$store.commit('settings/MutFeedbackFormHidden', val)
       }
     }
   }
diff --git a/packages/nc-gui/components/githubStarBtn.vue b/packages/nc-gui/components/GithubStarBtn.vue
similarity index 100%
rename from packages/nc-gui/components/githubStarBtn.vue
rename to packages/nc-gui/components/GithubStarBtn.vue
diff --git a/packages/nc-gui/components/globalAcl.vue b/packages/nc-gui/components/GlobalAcl.vue
similarity index 99%
rename from packages/nc-gui/components/globalAcl.vue
rename to packages/nc-gui/components/GlobalAcl.vue
index 56c69549b8..5e274a6a64 100644
--- a/packages/nc-gui/components/globalAcl.vue
+++ b/packages/nc-gui/components/GlobalAcl.vue
@@ -231,7 +231,7 @@
 <script>
 /* eslint-disable */
 
-import AclTsFileDbChild from '@/components/project/tableTabs/aclTsFileDbChild'
+import AclTsFileDbChild from '~/components/project/tableTabs/AclTsFileDbChild'
 
 export default {
   name: 'GlobalAcl',
diff --git a/packages/nc-gui/components/importantAnnouncement.vue b/packages/nc-gui/components/ImportantAnnouncement.vue
similarity index 100%
rename from packages/nc-gui/components/importantAnnouncement.vue
rename to packages/nc-gui/components/ImportantAnnouncement.vue
diff --git a/packages/nc-gui/components/loader.vue b/packages/nc-gui/components/Loader.vue
similarity index 100%
rename from packages/nc-gui/components/loader.vue
rename to packages/nc-gui/components/Loader.vue
diff --git a/packages/nc-gui/components/notification.vue b/packages/nc-gui/components/Notification.vue
similarity index 100%
rename from packages/nc-gui/components/notification.vue
rename to packages/nc-gui/components/Notification.vue
diff --git a/packages/nc-gui/components/previewAs.vue b/packages/nc-gui/components/PreviewAs.vue
similarity index 72%
rename from packages/nc-gui/components/previewAs.vue
rename to packages/nc-gui/components/PreviewAs.vue
index 97f6e0f599..d31c64207f 100644
--- a/packages/nc-gui/components/previewAs.vue
+++ b/packages/nc-gui/components/PreviewAs.vue
@@ -10,9 +10,13 @@
           class="white--text nc-btn-preview"
           v-on="on"
         >
-          <v-icon small class="mr-1"> mdi-play-circle </v-icon>
+          <v-icon small class="mr-1">
+            mdi-play-circle
+          </v-icon>
           Preview
-          <v-icon small> mdi-menu-down </v-icon>
+          <v-icon small>
+            mdi-menu-down
+          </v-icon>
         </v-btn>
       </template>
       <v-list dense>
@@ -33,8 +37,7 @@
               <span
                 class="caption text-capitalize"
                 :class="{ 'x-active--text': role.title === previewAs }"
-                >{{ role.title }}</span
-              >
+              >{{ role.title }}</span>
             </v-list-item-title>
           </v-list-item>
         </template>
@@ -42,7 +45,9 @@
         <template v-if="previewAs">
           <!--                <v-divider></v-divider>-->
           <v-list-item @click="setPreviewUser(null)">
-            <v-icon small class="mr-1"> mdi-close </v-icon>
+            <v-icon small class="mr-1">
+              mdi-close
+            </v-icon>
             <!-- Reset Preview -->
             <span class="caption nc-preview-reset">{{
               $t("activity.resetReview")
@@ -97,8 +102,7 @@
           </v-radio-group>
           <v-divider vertical class="mr-2" />
           <span class="pointer" @click="setPreviewUser(null)">
-            <v-icon small color="white">mdi-exit-to-app</v-icon> Exit</span
-          >
+            <v-icon small color="white">mdi-exit-to-app</v-icon> Exit</span>
         </div>
       </div>
     </v-menu>
@@ -107,69 +111,69 @@
 
 <script>
 export default {
-  name: "PreviewAs",
+  name: 'PreviewAs',
   data: () => ({
     roleIcon: {
-      owner: "mdi-account-star",
-      creator: "mdi-account-hard-hat",
-      editor: "mdi-account-edit",
-      viewer: "mdi-eye-outline",
-      commenter: "mdi-comment-account-outline",
+      owner: 'mdi-account-star',
+      creator: 'mdi-account-hard-hat',
+      editor: 'mdi-account-edit',
+      viewer: 'mdi-eye-outline',
+      commenter: 'mdi-comment-account-outline'
     },
     rolesList: [
-      { title: "editor" },
-      { title: "commenter" },
-      { title: "viewer" },
+      { title: 'editor' },
+      { title: 'commenter' },
+      { title: 'viewer' }
     ],
     position: {
       x: 9999,
-      y: 9999,
-    },
+      y: 9999
+    }
   }),
   computed: {
     previewAs: {
       get() {
-        return this.$store.state.users.previewAs;
+        return this.$store.state.users.previewAs
       },
       set(previewAs) {
-        this.$store.commit("users/MutPreviewAs", previewAs);
-      },
-    },
+        this.$store.commit('users/MutPreviewAs', previewAs)
+      }
+    }
   },
   mounted() {
     this.position = {
       y: window.innerHeight - 100,
-      x: window.innerWidth / 2 - 250,
-    };
+      x: window.innerWidth / 2 - 250
+    }
 
-    window.addEventListener("mouseup", this.mouseUp, false);
+    window.addEventListener('mouseup', this.mouseUp, false)
   },
   beforeDestroy() {
-    window.removeEventListener("mousemove", this.divMove, true);
-    window.removeEventListener("mouseup", this.mouseUp, false);
+    window.removeEventListener('mousemove', this.divMove, true)
+    window.removeEventListener('mouseup', this.mouseUp, false)
   },
   methods: {
     setPreviewUser(previewAs) {
-      this.$e("a:navdraw:preview", { role: previewAs });
+      this.$e('a:navdraw:preview', { role: previewAs })
       if (!process.env.EE) {
-        this.$toast.info("Available in Enterprise edition").goAway(3000);
+        this.$toast.info('Available in Enterprise edition').goAway(3000)
       } else {
-        this.previewAs = previewAs;
-        window.location.reload();
+        this.previewAs = previewAs
+        window.location.reload()
       }
     },
     mouseUp() {
-      window.removeEventListener("mousemove", this.divMove, true);
+      window.removeEventListener('mousemove', this.divMove, true)
     },
     mouseDown(e) {
-      window.addEventListener("mousemove", this.divMove, true);
+      window.addEventListener('mousemove', this.divMove, true)
     },
 
     divMove(e) {
-      this.position = { y: e.clientY - 10, x: e.clientX - 18 };
-    },
-  },
-};
+      this.position = { y: e.clientY - 10, x: e.clientX - 18 }
+    }
+  }
+}
 </script>
 
 <style scoped></style>
diff --git a/packages/nc-gui/components/projectLogs.vue b/packages/nc-gui/components/ProjectLogs.vue
similarity index 100%
rename from packages/nc-gui/components/projectLogs.vue
rename to packages/nc-gui/components/ProjectLogs.vue
diff --git a/packages/nc-gui/components/projectOutput.vue b/packages/nc-gui/components/ProjectOutput.vue
similarity index 100%
rename from packages/nc-gui/components/projectOutput.vue
rename to packages/nc-gui/components/ProjectOutput.vue
diff --git a/packages/nc-gui/components/projectTabs.vue b/packages/nc-gui/components/ProjectTabs.vue
similarity index 61%
rename from packages/nc-gui/components/projectTabs.vue
rename to packages/nc-gui/components/ProjectTabs.vue
index 2ce35f7b6e..bd9a422170 100644
--- a/packages/nc-gui/components/projectTabs.vue
+++ b/packages/nc-gui/components/ProjectTabs.vue
@@ -15,7 +15,7 @@
       next-icon="mdi-arrow-right-bold-box-outline"
       prev-icon="mdi-arrow-left-bold-box-outline"
       show-arrows
-      :class="{ 'dark-them': $store.state.windows.darkTheme }"
+      :class="{ 'dark-them': $store.state.settings.darkTheme }"
     >
       <v-tabs-slider color="" />
 
@@ -42,14 +42,12 @@
             max-width: 140px;
             text-overflow: ellipsis;
           "
-          >{{ tab.name }}</span
-        >
+        >{{ tab.name }}</span>
         <v-icon icon :small="true" @click="removeTab(index)">
           mdi-close
         </v-icon>
       </v-tab>
 
-      <!--      <v-tabs-items v-model="activeTab">-->
       <v-tabs-items :value="activeTab">
         <v-tab-item
           v-for="(tab, index) in tabs"
@@ -65,14 +63,13 @@
           :reverse-transition="false"
         >
           <div v-if="tab._nodes.type === 'table'" style="height: 100%">
-            <!--          <sqlLogAndOutput :hide="hideLogWindows">-->
             <TableView
               :ref="'tabs' + index"
               :is-active="
                 activeTab ===
-                `${(tab._nodes && tab._nodes).type || ''}||${
-                  (tab._nodes && tab._nodes.dbAlias) || ''
-                }||${tab.name}`
+                  `${(tab._nodes && tab._nodes).type || ''}||${
+                    (tab._nodes && tab._nodes.dbAlias) || ''
+                  }||${tab.name}`
               "
               :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
                 (tab._nodes && tab._nodes.dbAlias) || ''
@@ -80,18 +77,15 @@
               :hide-log-windows.sync="hideLogWindows"
               :nodes="tab._nodes"
             />
-            <!--          </sqlLogAndOutput>-->
           </div>
           <div v-else-if="tab._nodes.type === 'view'" style="height: 100%">
-            <!--            <sqlLogAndOutput>-->
-            <!--            <ViewTab :ref="'tabs'+index" :nodes="tab._nodes" />-->
             <TableView
               :ref="'tabs' + index"
               :is-active="
                 activeTab ===
-                `${(tab._nodes && tab._nodes).type || ''}||${
-                  (tab._nodes && tab._nodes.dbAlias) || ''
-                }||${tab.name}`
+                  `${(tab._nodes && tab._nodes).type || ''}||${
+                    (tab._nodes && tab._nodes.dbAlias) || ''
+                  }||${tab.name}`
               "
               :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
                 (tab._nodes && tab._nodes.dbAlias) || ''
@@ -247,22 +241,118 @@
             <h1>{{ tab._nodes }}</h1>
           </div>
         </v-tab-item>
-        <!--      </v-tabs-items>-->
       </v-tabs-items>
 
-      <!-- tooltip: Add new table -->
-      <x-icon
-        v-if="_isUIAllowed('addTable')"
-        :tooltip="$t('tooltip.addTable')"
-        icon-class="add-btn"
-        :color="['white', 'grey lighten-2']"
-        @click="dialogCreateTableShowMethod"
-      >
-        mdi-plus-box
-      </x-icon>
-      <v-spacer />
-    </v-tabs>
+      <!-- Add / Import -->
+      <v-menu v-if="_isUIAllowed('addOrImport')" offset-y>
+        <template #activator="{ on }">
+          <v-btn
+            color="primary"
+            style="height: 100%; padding: 5px;"
+            v-on="on"
+          >
+            <x-icon
+              icon-class="add-btn"
+              :color="['white', 'grey lighten-2']"
+            >
+              mdi-plus-box
+            </x-icon>
+            <span class="flex-grow-1 caption font-weight-bold text-capitalize mx-2">
+              <!-- TODO: i18n -->
+              Add / Import
+            </span>
+            <v-spacer />
+          </v-btn>
+        </template>
+        <v-list class="addOrImport">
+          <v-list-item
+            v-if="_isUIAllowed('addTable')"
+            v-t="['a:table:import-from-excel']"
+            @click="dialogCreateTableShowMethod"
+          >
+            <v-list-item-title>
+              <v-icon small>
+                mdi-table
+              </v-icon>
+              <span class="caption">
+                <!-- Add new table -->
+                {{ $t('tooltip.addTable') }}
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+          <v-divider class="my-1" />
+          <v-subheader class="caption" style="height:35px">
+            QUICK IMPORT FROM
+          </v-subheader>
 
+          <v-list-item
+            v-if="_isUIAllowed('airtableImport')"
+            v-t="['a:actions:import-airtable']"
+            @click="airtableImportModal = true"
+          >
+            <v-list-item-title>
+              <v-icon small>
+                mdi-table-large
+              </v-icon>
+              <span class="caption">
+                <!-- TODO: i18n -->
+                Airtable
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            v-if="_isUIAllowed('csvQuickImport')"
+            v-t="['a:actions:import-csv']"
+            @click="onImportFromExcelOrCSV('csv')"
+          >
+            <v-list-item-title>
+              <v-icon small>
+                mdi-file-document-outline
+              </v-icon>
+              <span class="caption">
+                <!-- TODO: i18n -->
+                CSV file
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            v-if="_isUIAllowed('excelQuickImport')"
+            v-t="['a:actions:import-excel']"
+            @click="onImportFromExcelOrCSV('excel')"
+          >
+            <v-list-item-title>
+              <v-icon small>
+                mdi-file-excel
+              </v-icon>
+              <span class="caption">
+                <!-- TODO: i18n -->
+                Microsoft Excel
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+
+          <v-divider class="my-1" />
+
+          <v-list-item
+            v-if="_isUIAllowed('importRequest')"
+            v-t="['e:datasource:import-request']"
+            href="https://github.com/nocodb/nocodb/issues/2052"
+            target="_blank"
+          >
+            <v-list-item-title>
+              <v-icon small>
+                mdi-open-in-new
+              </v-icon>
+              <span class="caption">
+                <!-- TODO: i18n -->
+                Request a data source you need ?
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-tabs>
+    <!-- Create Empty Table -->
     <dlg-table-create
       v-if="dialogCreateTableShow"
       v-model="dialogCreateTableShow"
@@ -271,42 +361,53 @@
         dialogCreateTableShow = false;
       "
     />
+    <!-- Import From Excel / CSV -->
+    <quick-import
+      ref="quickImport"
+      v-model="quickImportModal"
+      :quick-import-type="quickImportType"
+      hide-label
+      @closeModal="quickImportModal = false"
+    />
 
-    <!--    <screensaver v-if="showScreensaver && !($store.state.project.projectInfo && $store.state.project.projectInfo.ncMin)" class="screensaver" />-->
+    <import-from-airtable v-if="airtableImportModal" v-model="airtableImportModal" />
   </v-container>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from "vuex";
-import treeViewIcons from "../helpers/treeViewIcons";
-import TableView from "./project/table";
-import FunctionTab from "./project/function";
-import ProcedureTab from "./project/procedure";
-import SequenceTab from "./project/sequence";
-import SeedTab from "./project/seed";
-import SqlClientTab from "./project/sqlClient";
-import ApisTab from "./project/apis";
-import ApiClientTab from "./project/apiClientOld";
-import sqlLogAndOutput from "./project/sqlLogAndOutput";
-import graphqlClient from "./project/graphqlClient";
-import xTerm from "./xTerm";
-
-import ApiClientSwaggerTab from "./project/apiClientSwagger";
-import XcMeta from "./project/settings/xcMeta";
-import XcInfo from "./project/xcInfo";
-import SwaggerClient from "@/components/project/swaggerClient";
-import DlgTableCreate from "@/components/utils/dlgTableCreate";
-import AppStore from "@/components/project/appStore";
-import AuthTab from "@/components/authTab";
-import CronJobs from "@/components/project/cronJobs";
-import DisableOrEnableModels from "@/components/project/projectMetadata/disableOrEnableModels";
-import ProjectSettings from "@/components/project/projectSettings";
-import GrpcClient from "@/components/project/grpcClient";
-import GlobalAcl from "@/components/globalAcl";
-import AuditTab from "~/components/project/auditTab";
+import { mapGetters, mapMutations } from 'vuex'
+import treeViewIcons from '../helpers/treeViewIcons'
+import TableView from './project/Table'
+import FunctionTab from './project/Function'
+import ProcedureTab from './project/Procedure'
+import SequenceTab from './project/Sequence'
+import SeedTab from './project/Seed'
+import SqlClientTab from './project/SqlClient'
+import ApisTab from './project/Apis'
+import ApiClientTab from './project/ApiClientOld'
+import sqlLogAndOutput from './project/SqlLogAndOutput'
+import graphqlClient from './project/GraphqlClient'
+import xTerm from './XTerm'
+
+import ApiClientSwaggerTab from './project/ApiClientSwagger'
+import XcMeta from './project/settings/XcMeta'
+import XcInfo from './project/XcInfo'
+import SwaggerClient from '~/components/project/SwaggerClient'
+import DlgTableCreate from '~/components/utils/DlgTableCreate'
+import AppStore from '~/components/project/AppStore'
+import AuthTab from '~/components/AuthTab'
+import CronJobs from '~/components/project/CronJobs'
+import DisableOrEnableModels from '~/components/project/projectMetadata/DisableOrEnableModels'
+import ProjectSettings from '~/components/project/ProjectSettings'
+import GrpcClient from '~/components/project/GrpcClient'
+import GlobalAcl from '~/components/GlobalAcl'
+import AuditTab from '~/components/project/AuditTab'
+import QuickImport from '~/components/import/QuickImport'
+import ImportFromAirtable from '~/components/import/ImportFromAirtable'
 
 export default {
   components: {
+    ImportFromAirtable,
     SwaggerClient,
     // Screensaver,
     DlgTableCreate,
@@ -334,147 +435,163 @@ export default {
     sqlLogAndOutput,
     xTerm,
     graphqlClient,
+    QuickImport
   },
   data() {
     return {
+      dragOver: false,
       dialogCreateTableShow: false,
-      test: "",
+      test: '',
       treeViewIcons,
       hideLogWindows: false,
       showScreensaver: false,
-    };
+      quickImportModal: false,
+      quickImportType: '',
+      airtableImportModal: false
+    }
   },
   methods: {
     dialogCreateTableShowMethod() {
-      this.dialogCreateTableShow = true;
-      this.$e("c:table:create:navbar");
+      this.dialogCreateTableShow = true
+      this.$e('c:table:create:navbar')
     },
     checkInactiveState() {
-      let position = 0;
-      let idleTime = 0;
+      let position = 0
+      let idleTime = 0
       // Increment the idle time counter every minute.
-      let idleInterval = setInterval(timerIncrement, 1000);
+      let idleInterval = setInterval(timerIncrement, 1000)
 
-      const self = this;
+      const self = this
       // Zero the idle timer on mouse movement.
-      document.addEventListener("mousemove", (e) => {
-        self.showScreensaver = false;
-        idleTime = 0;
-        clearInterval(idleInterval);
-        idleInterval = setInterval(timerIncrement, 1000);
-      });
-      document.addEventListener("keypress", (e) => {
-        self.showScreensaver = false;
-        idleTime = 0;
-        clearInterval(idleInterval);
-        idleInterval = setInterval(timerIncrement, 1000);
-      });
+      document.addEventListener('mousemove', (e) => {
+        self.showScreensaver = false
+        idleTime = 0
+        clearInterval(idleInterval)
+        idleInterval = setInterval(timerIncrement, 1000)
+      })
+      document.addEventListener('keypress', (e) => {
+        self.showScreensaver = false
+        idleTime = 0
+        clearInterval(idleInterval)
+        idleInterval = setInterval(timerIncrement, 1000)
+      })
 
       function timerIncrement() {
-        idleTime = idleTime + 1;
+        idleTime = idleTime + 1
         if (idleTime > 120) {
-          const title = document.title;
+          const title = document.title
 
           function scrolltitle() {
-            document.title = title + Array(position).fill(" .").join("");
-            position = ++position % 3;
+            document.title = title + Array(position).fill(' .').join('')
+            position = ++position % 3
             if (self.showScreensaver) {
-              window.setTimeout(scrolltitle, 400);
+              window.setTimeout(scrolltitle, 400)
             } else {
-              document.title = title;
+              document.title = title
             }
           }
 
-          self.showScreensaver = self.$store.state.windows.screensaver;
-          scrolltitle();
-          clearInterval(idleInterval);
+          self.showScreensaver = self.$store.state.settings.screensaver
+          scrolltitle()
+          clearInterval(idleInterval)
         }
       }
     },
     async handleKeyDown(event) {
-      const activeTabEleKey = `tabs${this.activeTab}`;
-      let isHandled = false;
+      const activeTabEleKey = `tabs${this.activeTab}`
+      let isHandled = false
 
       if (
         this.$refs[activeTabEleKey] &&
         this.$refs[activeTabEleKey][0] &&
         this.$refs[activeTabEleKey][0].handleKeyDown
       ) {
-        isHandled = await this.$refs[activeTabEleKey][0].handleKeyDown(event);
+        isHandled = await this.$refs[activeTabEleKey][0].handleKeyDown(event)
       }
       if (!isHandled) {
         switch (
-          [this._isMac ? event.metaKey : event.ctrlKey, event.key].join("_")
+          [this._isMac ? event.metaKey : event.ctrlKey, event.key].join('_')
         ) {
-          case "true_w":
-            this.removeTab(this.activeTab);
-            event.preventDefault();
-            event.stopPropagation();
-            break;
+          case 'true_w':
+            this.removeTab(this.activeTab)
+            event.preventDefault()
+            event.stopPropagation()
+            break
         }
       }
     },
     ...mapMutations({
-      setActiveTab: "tabs/active",
-      removeTab: "tabs/remove",
-      updateActiveTabx: "tabs/activeTabCtx",
+      setActiveTab: 'tabs/active',
+      removeTab: 'tabs/remove',
+      updateActiveTabx: 'tabs/activeTabCtx'
     }),
     tabActivated(tab) {},
+    onImportFromExcelOrCSV(quickImportType) {
+      this.quickImportModal = true
+      this.quickImportType = quickImportType
+    },
+    onAirtableImport() {
+      this.airtableImportModal = true
+    }
   },
   computed: {
-    ...mapGetters({ tabs: "tabs/list", activeTabCtx: "tabs/activeTabCtx" }),
+    ...mapGetters({ tabs: 'tabs/list', activeTabCtx: 'tabs/activeTabCtx' }),
     pid() {
-      return this.$route.params.project_id;
+      return this.$route.params.project_id
     },
     activeTab: {
       set(tab) {
         if (!tab) {
           return this.$router.push({
-            query: {},
-          });
+            query: {}
+          })
         }
-        const [type, dbalias, name] = tab.split("||");
+        const [type, dbalias, name] = tab.split('||')
         this.$router.push({
           query: {
             ...this.$route.query,
             type,
             dbalias,
-            name,
-          },
-        });
+            name
+          }
+        })
       },
       get() {
         return [
           this.$route.query.type,
           this.$route.query.dbalias,
-          this.$route.query.name,
-        ].join("||");
-      },
-    },
+          this.$route.query.name
+        ].join('||')
+      }
+    }
   },
 
   beforeCreated() {},
   watch: {},
   created() {
-    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener('keydown', this.handleKeyDown)
     /**
      * Listening for tab change so that we can hide/show projectlogs based on tab
      */
   },
-  mounted() {},
+  mounted() {
+    if (this.$route && this.$route.query && this.$route.query.excelUrl) {
+      this.quickImportModal = true
+    }
+  },
   beforeDestroy() {},
   destroyed() {
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener('keydown', this.handleKeyDown)
   },
   directives: {},
   validate({ params }) {
-    return true;
+    return true
   },
   head() {
-    return {};
+    return {}
   },
-  props: {},
-};
+  props: {}
+}
 </script>
 
 <style scoped>
@@ -544,6 +661,14 @@ export default {
   font-weight: bold;
 }
 
+.addOrImport {
+  min-width: 200px;
+}
+
+.addOrImport .v-list-item {
+  min-height: 35px;
+}
+
 /deep/ .add-btn {
   margin-left: 5px;
 }
@@ -562,6 +687,7 @@ export default {
  *
  * @author Naveen MR <oof1lab@gmail.com>
  * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index 7da30e6573..07ac95aa73 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@@ -17,7 +17,7 @@
       >
         {{ $store.getters["project/GtrProjectName"] }}
       </h3>
-      <github-star-btn v-else/>
+      <github-star-btn v-else />
     </div>
     <v-navigation-drawer
       ref="drawer"
@@ -186,17 +186,17 @@
                             {{
                               $t("objects.tables")
                             }}<template
-                            v-if="item.children && item.children.length"
-                          >
+                              v-if="item.children && item.children.length"
+                            >
                               ({{
-                              item.children.filter(
-                                (child) =>
-                                  !search ||
-                                  child.name
-                                  .toLowerCase()
-                                  .includes(search.toLowerCase())
-                              ).length
-                            }})</template></span>
+                                item.children.filter(
+                                  (child) =>
+                                    !search ||
+                                    child.name
+                                      .toLowerCase()
+                                      .includes(search.toLowerCase())
+                                ).length
+                              }})</template></span>
                           <span
                             v-else
                             class="body-2 font-weight-medium"
@@ -214,23 +214,23 @@
                           {{
                             $t("objects.tables")
                           }}<template
-                          v-if="item.children && item.children.length"
-                        >
+                            v-if="item.children && item.children.length"
+                          >
                             ({{
-                            item.children.filter(
-                              (child) =>
-                                !search ||
-                                child.name
-                                .toLowerCase()
-                                .includes(search.toLowerCase())
-                            ).length
-                          }})</template></span>
+                              item.children.filter(
+                                (child) =>
+                                  !search ||
+                                  child.name
+                                    .toLowerCase()
+                                    .includes(search.toLowerCase())
+                              ).length
+                            }})</template></span>
                         <span v-else class="caption font-weight-regular">
                           {{ item.name }}</span>
                       </template>
                     </v-list-item-title>
 
-                    <v-spacer/>
+                    <v-spacer />
 
                     <v-tooltip bottom>
                       <template #activator="{ on }">
@@ -253,8 +253,8 @@
                         class="caption"
                       >Add new
                         <span class="text-capitalize">{{
-                            item.type.slice(0, -3)
-                          }}</span></span>
+                          item.type.slice(0, -3)
+                        }}</span></span>
                     </v-tooltip>
                   </template>
 
@@ -342,13 +342,13 @@
                                 </span>
                               </template>
                               <span class="caption">{{
-                                  child.creator_tooltip
-                                }}</span>
+                                child.creator_tooltip
+                              }}</span>
                             </v-tooltip>
                             <span v-else class="caption">{{ child.name }}</span>
                           </v-list-item-title>
                           <template v-if="child.type === 'table'">
-                            <v-spacer/>
+                            <v-spacer />
                             <div class="action d-flex" @click.stop>
                               <v-menu>
                                 <template #activator="{ on }">
@@ -483,7 +483,7 @@
           />
         </div>
         <div class="pr-3 advance-menu d-none" :class="{ 'pl-3': !mini }">
-          <v-divider v-if="_isUIAllowed('treeViewProjectSettings')"/>
+          <v-divider v-if="_isUIAllowed('treeViewProjectSettings')" />
 
           <v-list
             v-if="_isUIAllowed('treeViewProjectSettings')"
@@ -494,8 +494,8 @@
               <v-list-item-title>
                 <!-- Settings -->
                 <span class="body-2 font-weight-medium">{{
-                    $t("activity.settings")
-                  }}</span>
+                  $t("activity.settings")
+                }}</span>
                 <v-tooltip top>
                   <template #activator="{ on }">
                     <x-icon
@@ -534,8 +534,8 @@
                     <!-- App Store -->
                     <v-list-item-title>
                       <span class="font-weight-regular caption">{{
-                          $t("title.appStore")
-                        }}</span>
+                        $t("title.appStore")
+                      }}</span>
                     </v-list-item-title>
                   </v-list-item>
                 </template>
@@ -560,8 +560,8 @@
                     <!-- Team & Auth -->
                     <v-list-item-title>
                       <span class="font-weight-regular caption">{{
-                          $t("title.teamAndAuth")
-                        }}</span>
+                        $t("title.teamAndAuth")
+                      }}</span>
                     </v-list-item-title>
                   </v-list-item>
                 </template>
@@ -585,8 +585,8 @@
                     <!-- Project Metadata -->
                     <v-list-item-title>
                       <span class="font-weight-regular caption">{{
-                          $t("title.projMeta")
-                        }}</span>
+                        $t("title.projMeta")
+                      }}</span>
                     </v-list-item-title>
                   </v-list-item>
                 </template>
@@ -611,8 +611,8 @@
                     <!-- Project Metadata -->
                     <v-list-item-title>
                       <span class="font-weight-regular caption">{{
-                          $t("title.audit")
-                        }}</span>
+                        $t("title.audit")
+                      }}</span>
                     </v-list-item-title>
                   </v-list-item>
                 </template>
@@ -621,14 +621,14 @@
               </v-tooltip>
             </template>
           </v-list>
-          <v-divider/>
+          <v-divider />
 
           <v-list v-if="_isUIAllowed('previewAs') || previewAs" dense>
             <v-list-item>
               <!-- Preview as -->
               <span class="body-2 font-weight-medium">{{
-                  $t("activity.previewAs")
-                }}</span>
+                $t("activity.previewAs")
+              }}</span>
               <v-icon small class="ml-1">
                 mdi-drama-masks
               </v-icon>
@@ -670,17 +670,15 @@
                   </v-icon>
                   <!-- Reset Preview -->
                   <span class="caption nc-preview-reset">{{
-                      $t("activity.resetReview")
-                    }}</span>
+                    $t("activity.resetReview")
+                  }}</span>
                 </v-list-item>
               </template>
             </v-list>
           </v-list>
         </div>
 
-
-
-        <v-divider/>
+        <v-divider />
         <div
           v-t="['e:api-docs']"
           class="caption pointer nc-docs pb-2 pl-5 pr-3 pt-2 d-flex align-center"
@@ -692,7 +690,6 @@
           {{ $t('title.apiDocs') }}
         </div>
 
-
         <template v-if="_isUIAllowed('settings')">
           <div class="pl-5 pr-3 d-flex align-center pb-2">
             <settings-modal>
@@ -712,9 +709,8 @@
           </div>
         </template>
 
-
         <!--        <v-divider/>-->
-<!--        <extras class="pl-1"/>-->
+        <!--        <extras class="pl-1"/>-->
       </div>
     </v-navigation-drawer>
 
@@ -769,12 +765,12 @@
       :heading="selectedNodeForDelete.heading"
       type="error"
     />
-    <excel-import
-      ref="excelImport"
-      v-model="excelImportDialog"
+    <quick-import
+      ref="quickImport"
+      v-model="quickImportDialog"
       hide-label
       import-to-project
-      @success="onExcelImport"
+      @success="onQuickImport"
     />
   </div>
 </template>
@@ -788,20 +784,20 @@ import rightClickOptions from "../helpers/rightClickOptions";
 import rightClickOptionsSub from "../helpers/rightClickOptionsSub";
 import icons from "../helpers/treeViewIcons";
 
-import textDlgSubmitCancel from "./utils/dlgTextSubmitCancel";
-import dlgLabelSubmitCancel from "./utils/dlgLabelSubmitCancel";
+import textDlgSubmitCancel from "./utils/DlgTextSubmitCancel";
+import dlgLabelSubmitCancel from "./utils/DlgLabelSubmitCancel";
 import {copyTextToClipboard} from "../helpers/xutils";
-import DlgTableCreate from "@/components/utils/dlgTableCreate";
-import DlgViewCreate from "@/components/utils/dlgViewCreate";
-import SponsorMini from "@/components/sponsorMini";
+import DlgTableCreate from "~/components/utils/DlgTableCreate";
+import DlgViewCreate from "~/components/utils/DlgViewCreate";
+import SponsorMini from "~/components/SponsorMini";
 import {validateTableName} from "~/helpers";
-import ExcelImport from "~/components/import/excelImport";
+import QuickImport from "~/components/import/QuickImport";
 
 import draggable from "vuedraggable";
-import GithubStarBtn from "~/components/githubStarBtn";
-import SettingsModal from "~/components/settings/settingsModal";
-import Language from "~/components/utils/language";
-import Extras from "~/components/project/spreadsheet/components/extras";
+import GithubStarBtn from "~/components/GithubStarBtn";
+import SettingsModal from "~/components/settings/SettingsModal";
+import Language from "~/components/utils/Language";
+import Extras from "~/components/project/spreadsheet/components/Extras";
 
 export default {
   components: {
@@ -810,7 +806,7 @@ export default {
     SettingsModal,
     GithubStarBtn,
     draggable,
-    ExcelImport,
+    QuickImport,
     SponsorMini,
     DlgViewCreate,
     DlgTableCreate,
@@ -864,7 +860,7 @@ export default {
     open: [],
     search: null,
     menuVisible: false,
-    excelImportDialog: false,
+    quickImportDialog: false,
     x: 0,
     y: 0,
     menuItem: null,
@@ -913,7 +909,7 @@ export default {
   }),
   computed: {
     apiLink() {
-      return new URL(`/api/v1/db/meta/projects/${this.projectId}/swagger`, this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.ncSiteUrl)
+      return new URL(`/api/v1/db/meta/projects/${this.projectId}/swagger`, this.$store.state.project.appInfo && this.$store.state.project.appInfo.ncSiteUrl)
     },
     previewAs: {
       get() {
@@ -1067,8 +1063,8 @@ export default {
     },
     changeTheme() {
       this.$store.dispatch(
-        "windows/ActToggleDarkMode",
-        !this.$store.state.windows.darkTheme
+        "settings/ActToggleDarkMode",
+        !this.$store.state.settings.darkTheme
       );
     },
     openLink(link) {
@@ -1162,7 +1158,7 @@ export default {
         this.miniExpanded = false;
       }
     },
-    onExcelImport() {
+    onQuickImport() {
       if (!this.menuItem || this.menuItem.type !== "tableDir") {
         this.menuItem = this.listViewArr.find((n) => n.type === "tableDir");
       }
@@ -1257,7 +1253,7 @@ export default {
             if (item._nodes.type === "table") {
               let tableIndex = +item._nodes.key.split(".").pop();
               if (
-                !(await this.$store.dispatch("windows/ActCheckMaxTable", {
+                !(await this.$store.dispatch("settings/ActCheckMaxTable", {
                   tableIndex,
                 }))
               ) {
@@ -1437,7 +1433,7 @@ export default {
             await this.loadViews(this.menuItem);
             this.$toast.success("Views refreshed").goAway(1000);
           } else if (action === "IMPORT_EXCEL") {
-            this.excelImportDialog = true;
+            this.quickImportDialog = true;
           } else if (action === "ENV_DB_FUNCTIONS_REFRESH") {
             await this.loadFunctions(this.menuItem);
             this.$toast.success("Functions refreshed").goAway(1000);
diff --git a/packages/nc-gui/components/README.md b/packages/nc-gui/components/README.md
deleted file mode 100644
index d7768ddb5f..0000000000
--- a/packages/nc-gui/components/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# COMPONENTS
-
-The components directory contains your Vue.js Components.
-Nuxt.js doesn't supercharge these components.
-
-**This directory is not required, you can delete it if you don't want to use it.**
diff --git a/packages/nc-gui/components/releaseInfo.vue b/packages/nc-gui/components/ReleaseInfo.vue
similarity index 100%
rename from packages/nc-gui/components/releaseInfo.vue
rename to packages/nc-gui/components/ReleaseInfo.vue
diff --git a/packages/nc-gui/components/screensaver.vue b/packages/nc-gui/components/Screensaver.vue
similarity index 100%
rename from packages/nc-gui/components/screensaver.vue
rename to packages/nc-gui/components/Screensaver.vue
diff --git a/packages/nc-gui/components/settings.vue b/packages/nc-gui/components/Settings.vue
similarity index 90%
rename from packages/nc-gui/components/settings.vue
rename to packages/nc-gui/components/Settings.vue
index 9cccea6c5e..56996abcba 100644
--- a/packages/nc-gui/components/settings.vue
+++ b/packages/nc-gui/components/Settings.vue
@@ -161,7 +161,7 @@
                         Version
                       </td>
                       <td>
-                        <span @contextmenu="rightClick">{{ $store.state.windows.version }}</span>
+                        <span @contextmenu="rightClick">{{ $store.state.settings.version }}</span>
                       </td>
                     </tr>
                     <tr @dblclick="enableAppRefresh = true">
@@ -226,7 +226,7 @@
 <script>
 
 import themes from '../helpers/themes'
-import dlgLabelSubmitCancel from './utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from './utils/DlgLabelSubmitCancel'
 
 export default {
   components: { dlgLabelSubmitCancel },
@@ -275,42 +275,42 @@ export default {
   computed: {
     checkForUpdate: {
       get() {
-        return this.$store.state.windows.checkForUpdate
+        return this.$store.state.settings.checkForUpdate
       },
       set(value) {
-        this.$store.commit('windows/MutCheckForUpdate', value)
+        this.$store.commit('settings/MutCheckForUpdate', value)
       }
     },
     autoUpdate: {
       get() {
-        return this.$store.state.windows.downloadAndUpdateRelease
+        return this.$store.state.settings.downloadAndUpdateRelease
       },
       set(value) {
-        this.$store.commit('windows/MutDownloadAndUpdateRelease', value)
+        this.$store.commit('settings/MutDownloadAndUpdateRelease', value)
       }
     },
     isGaEnabled: {
       get() {
-        return this.$store.state.windows.isGaEnabled
+        return this.$store.state.settings.isGaEnabled
       },
       set(value) {
-        this.$store.commit('windows/MutToggleGaEnabled', value)
+        this.$store.commit('settings/MutToggleGaEnabled', value)
       }
     },
     isErrorReportingEnabled: {
       get() {
-        return this.$store.state.windows.isErrorReportingEnabled
+        return this.$store.state.settings.isErrorReportingEnabled
       },
       set(value) {
-        this.$store.commit('windows/MutToggleErrorReportingEnabled', value)
+        this.$store.commit('settings/MutToggleErrorReportingEnabled', value)
       }
     },
     isTelemetryEnabled: {
       get() {
-        return this.$store.state.windows.isErrorReportingEnabled
+        return this.$store.state.settings.isErrorReportingEnabled
       },
       set(value) {
-        this.$store.commit('windows/MutToggleTelemetryEnabled', value)
+        this.$store.commit('settings/MutToggleTelemetryEnabled', value)
       }
     },
     dialogShow: {
@@ -323,24 +323,24 @@ export default {
     },
     language: {
       get() {
-        return this.$store.state.windows.language
+        return this.$store.state.settings.language
       },
       set(val) {
-        this.$store.commit('windows/MutSetLanguage', val)
+        this.$store.commit('settings/MutSetLanguage', val)
       }
     }
   },
   watch: {},
   created() {
-    this.customTheme = { ...this.customTheme, ...this.$store.state.windows.customTheme }
-    this.item = this.$store.state.windows.themeName
+    this.customTheme = { ...this.customTheme, ...this.$store.state.settings.customTheme }
+    this.item = this.$store.state.settings.themeName
     this.$store.watch(
-      state => state.windows.customTheme,
+      state => state.settings.customTheme,
       (theme) => {
         this.customTheme = { ...this.customTheme, ...theme }
       })
 
-    this.$store.watch(state => state.windows.themeName,
+    this.$store.watch(state => state.settings.themeName,
       (theme) => {
         this.$nextTick(() => {
           if (this.item !== theme) { this.item = theme }
@@ -396,11 +396,11 @@ export default {
     },
     async changeTheme(t, theme = 'Custom') {
       this.item = theme
-      if (theme === 'Custom') { await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, custom: true }) }
-      await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, themeName: theme })
+      if (theme === 'Custom') { await this.$store.dispatch('settings/ActSetTheme', { theme: { ...t }, custom: true }) }
+      await this.$store.dispatch('settings/ActSetTheme', { theme: { ...t }, themeName: theme })
     },
     toggleDarkTheme() {
-      this.$store.commit('windows/MutToggleDarkMode')
+      this.$store.commit('settings/MutToggleDarkMode')
     }
   },
   beforeCreated() {
diff --git a/packages/nc-gui/components/share-icons.vue b/packages/nc-gui/components/ShareIcons.vue
similarity index 100%
rename from packages/nc-gui/components/share-icons.vue
rename to packages/nc-gui/components/ShareIcons.vue
diff --git a/packages/nc-gui/components/snackbar.vue b/packages/nc-gui/components/Snackbar.vue
similarity index 100%
rename from packages/nc-gui/components/snackbar.vue
rename to packages/nc-gui/components/Snackbar.vue
diff --git a/packages/nc-gui/components/sponsorMini.vue b/packages/nc-gui/components/SponsorMini.vue
similarity index 100%
rename from packages/nc-gui/components/sponsorMini.vue
rename to packages/nc-gui/components/SponsorMini.vue
diff --git a/packages/nc-gui/components/sponsorOverlay.vue b/packages/nc-gui/components/SponsorOverlay.vue
similarity index 100%
rename from packages/nc-gui/components/sponsorOverlay.vue
rename to packages/nc-gui/components/SponsorOverlay.vue
diff --git a/packages/nc-gui/components/xTerm.vue b/packages/nc-gui/components/XTerm.vue
similarity index 99%
rename from packages/nc-gui/components/xTerm.vue
rename to packages/nc-gui/components/XTerm.vue
index 653aa7459f..87edfd1e1a 100644
--- a/packages/nc-gui/components/xTerm.vue
+++ b/packages/nc-gui/components/XTerm.vue
@@ -178,7 +178,7 @@ import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import { WebLinksAddon } from 'xterm-addon-web-links'
 import { mapGetters } from 'vuex'
-import XIcon from './global/xIcon'
+import XIcon from './global/XIcon'
 
 export default {
   name: 'XTerm',
diff --git a/packages/nc-gui/components/xcDiff.vue b/packages/nc-gui/components/XcDiff.vue
similarity index 100%
rename from packages/nc-gui/components/xcDiff.vue
rename to packages/nc-gui/components/XcDiff.vue
diff --git a/packages/nc-gui/components/apiClient/headers.vue b/packages/nc-gui/components/apiClient/Headers.vue
similarity index 100%
rename from packages/nc-gui/components/apiClient/headers.vue
rename to packages/nc-gui/components/apiClient/Headers.vue
diff --git a/packages/nc-gui/components/apiClient/params.vue b/packages/nc-gui/components/apiClient/Params.vue
similarity index 100%
rename from packages/nc-gui/components/apiClient/params.vue
rename to packages/nc-gui/components/apiClient/Params.vue
diff --git a/packages/nc-gui/components/apiClient/perfTest.vue b/packages/nc-gui/components/apiClient/PerfTest.vue
similarity index 100%
rename from packages/nc-gui/components/apiClient/perfTest.vue
rename to packages/nc-gui/components/apiClient/PerfTest.vue
diff --git a/packages/nc-gui/components/auth.routes.js b/packages/nc-gui/components/auth.routes.js
deleted file mode 100644
index 7903c31514..0000000000
--- a/packages/nc-gui/components/auth.routes.js
+++ /dev/null
@@ -1,86 +0,0 @@
-const authorizedRoutes = {}
-
-authorizedRoutes['/user/settings'] = true
-authorizedRoutes['/user/settings/accounts'] = true
-authorizedRoutes['/user/settings/password'] = true
-authorizedRoutes['/referral'] = true
-
-authorizedRoutes['/realestate/profits'] = true
-authorizedRoutes['/realestate/bygeo'] = true
-authorizedRoutes['/payment/buy'] = true
-
-authorizedRoutes['/pricing'] = false
-authorizedRoutes['/user'] = true
-
-authorizedRoutes['/user/authentication'] = true
-authorizedRoutes['/user/password'] = true
-
-authorizedRoutes['/error/400'] = false
-authorizedRoutes['/realestate/capitalgains'] = true
-authorizedRoutes['/payment/train'] = true
-authorizedRoutes['/user/settings'] = true
-
-authorizedRoutes['/info/contact'] = false
-authorizedRoutes['/profits'] = false
-authorizedRoutes['/user/admin'] = true
-authorizedRoutes['/error/403'] = false
-authorizedRoutes['/error/404'] = false
-
-authorizedRoutes['/info/hiring'] = false
-authorizedRoutes['/user/settings/accounts'] = true
-authorizedRoutes['/user/password/reset'] = false
-authorizedRoutes['/user/settings/profile'] = true
-authorizedRoutes['/user/settings/picture'] = true
-authorizedRoutes['/user/password/forgot'] = false
-authorizedRoutes['/user/authentication/signup'] = false
-authorizedRoutes['/user/settings/password'] = true
-authorizedRoutes['/user/admin/user-edit'] = true
-authorizedRoutes['/user/authentication/signin'] = false
-authorizedRoutes['/user/password/reset/success'] = true
-authorizedRoutes['/user/password/reset/invalid'] = true
-authorizedRoutes['/user/password/reset/form'] = true
-// // authorizedRoutes['/user/admin/user/_userId'] = true;
-// // authorizedRoutes['/'] = false;
-
-// authorizedRoutes['/realestate/profits'] = true;
-
-// let freeRoutes = {};
-// freeRoutes['/'] = true;
-// freeRoutes['/pricing'] = true;
-// freeRoutes['user/authentication/signin'] = true;
-// freeRoutes['user/authentication/signup'] = true;
-
-exports.allowed = function(store, path) {
-  // console.log('store.getters.GtrUser',store.getters.GtrUser);
-  // console.log('path',path);
-
-  // && authorizedRoutes[path]
-
-  if (store.getters.GtrUser === null && path in authorizedRoutes && authorizedRoutes[path]) {
-    return false
-  } else {
-    return true
-  }
-}
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.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/nc-gui/components/auth/apiTokens.vue b/packages/nc-gui/components/auth/ApiTokens.vue
similarity index 100%
rename from packages/nc-gui/components/auth/apiTokens.vue
rename to packages/nc-gui/components/auth/ApiTokens.vue
diff --git a/packages/nc-gui/components/auth/authHooks.vue b/packages/nc-gui/components/auth/AuthHooks.vue
similarity index 100%
rename from packages/nc-gui/components/auth/authHooks.vue
rename to packages/nc-gui/components/auth/AuthHooks.vue
diff --git a/packages/nc-gui/components/auth/roles.vue b/packages/nc-gui/components/auth/Roles.vue
similarity index 99%
rename from packages/nc-gui/components/auth/roles.vue
rename to packages/nc-gui/components/auth/Roles.vue
index bca5690f47..1c647256a4 100644
--- a/packages/nc-gui/components/auth/roles.vue
+++ b/packages/nc-gui/components/auth/Roles.vue
@@ -184,7 +184,7 @@
 </template>
 
 <script>
-import DlgLabelSubmitCancel from '@/components/utils/dlgLabelSubmitCancel'
+import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
 import colors from '@/mixins/colors'
 
 export default {
diff --git a/packages/nc-gui/components/auth/shareOrInviteModal.vue b/packages/nc-gui/components/auth/ShareOrInviteModal.vue
similarity index 75%
rename from packages/nc-gui/components/auth/shareOrInviteModal.vue
rename to packages/nc-gui/components/auth/ShareOrInviteModal.vue
index 65e1277854..19cafd6f84 100644
--- a/packages/nc-gui/components/auth/shareOrInviteModal.vue
+++ b/packages/nc-gui/components/auth/ShareOrInviteModal.vue
@@ -14,9 +14,15 @@
 
       <v-card-text>
         <div>
-          <v-icon small> mdi-account-outline </v-icon>
-          <template v-if="invite_token"> Copy Invite Token </template>
-          <template v-else-if="selectedUser.id"> Edit User </template>
+          <v-icon small>
+            mdi-account-outline
+          </v-icon>
+          <template v-if="invite_token">
+            Copy Invite Token
+          </template>
+          <template v-else-if="selectedUser.id">
+            Edit User
+          </template>
           <template v-else>
             <!-- Invite Team -->
             {{ $t("activity.inviteTeam") }}
@@ -35,7 +41,9 @@
               "
             >
               <template #append>
-                <v-icon color="green" class="ml-2"> mdi-content-copy </v-icon>
+                <v-icon color="green" class="ml-2">
+                  mdi-content-copy
+                </v-icon>
               </template>
               <div class="ellipsis d-100">
                 {{ inviteUrl }}
@@ -151,99 +159,99 @@
 </template>
 
 <script>
-import { isEmail } from "~/helpers";
-import { enumColor } from "~/components/project/spreadsheet/helpers/colors";
-import ShareBase from "~/components/base/shareBase";
+import { isEmail } from '~/helpers'
+import { enumColor } from '~/components/project/spreadsheet/helpers/colors'
+import ShareBase from '~/components/base/ShareBase'
 
 export default {
-  name: "ShareOrInviteModal",
+  name: 'ShareOrInviteModal',
   components: { ShareBase },
   props: {
-    value: Boolean,
+    value: Boolean
   },
   data: () => ({
-    roles: ["creator", "editor", "commenter", "viewer"],
+    roles: ['creator', 'editor', 'commenter', 'viewer'],
     selectedUser: {},
     invite_token: null,
     valid: null,
     emailRules: [
-      (v) => !!v || "E-mail is required",
+      v => !!v || 'E-mail is required',
       (v) => {
-        const invalidEmails = (v || "")
+        const invalidEmails = (v || '')
           .split(/\s*,\s*/)
-          .filter((e) => !isEmail(e));
+          .filter(e => !isEmail(e))
         return (
           !invalidEmails.length ||
-          `"${invalidEmails.join(", ")}" - invalid email`
-        );
-      },
+          `"${invalidEmails.join(', ')}" - invalid email`
+        )
+      }
     ],
     roleRules: [
-      (v) => !!v || "User Role is required",
-      (v) =>
-        ["creator", "editor", "commenter", "viewer"].includes(v) ||
-        "invalid user role",
+      v => !!v || 'User Role is required',
+      v =>
+        ['creator', 'editor', 'commenter', 'viewer'].includes(v) ||
+        'invalid user role'
     ],
     userList: [],
     roleDescriptions: {},
-    deleteUserType: "",
+    deleteUserType: ''
   }),
   computed: {
     userEditDialog: {
       get() {
-        return this.value;
+        return this.value
       },
       set(v) {
-        this.$emit("input", v);
-      },
+        this.$emit('input', v)
+      }
     },
     inviteUrl() {
       return this.invite_token
         ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}`
-        : null;
+        : null
     },
     rolesColors() {
-      const colors = this.$store.state.windows.darkTheme
+      const colors = this.$store.state.settings.darkTheme
         ? enumColor.dark
-        : enumColor.light;
+        : enumColor.light
       return ['owner'].concat(this.roles).reduce((o, r, i) => {
-        o[r] = colors[i % colors.length];
-        return o;
-      }, {});
+        o[r] = colors[i % colors.length]
+        return o
+      }, {})
     },
 
     selectedRoles: {
       get() {
         return (
           this.selectedUser && this.selectedUser.roles
-            ? this.selectedUser.roles.split(",")
+            ? this.selectedUser.roles.split(',')
             : []
         ).sort(
           (a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
-        )[0];
+        )[0]
       },
       set(roles) {
         if (this.selectedUser) {
-          this.selectedUser.roles = roles; // .filter(Boolean).join(',')
+          this.selectedUser.roles = roles // .filter(Boolean).join(',')
         }
-      },
-    },
+      }
+    }
   },
   methods: {
     async saveUser() {
-      this.validate = true;
-      await this.$nextTick();
+      this.validate = true
+      await this.$nextTick()
       if (this.loading || !this.$refs.form.validate() || !this.selectedUser) {
-        return;
+        return
       }
-      this.$e("a:user:invite", { role: this.selectedUser.roles });
+      this.$e('a:user:invite', { role: this.selectedUser.roles })
 
       if (!this.edited) {
-        this.userEditDialog = false;
+        this.userEditDialog = false
       }
 
       try {
-        let data;
+        let data
         if (this.selectedUser.id) {
           await this.$api.auth.projectUserUpdate(
             this.$route.params.project_id,
@@ -252,56 +260,56 @@ export default {
               roles: this.selectedUser.roles,
               email: this.selectedUser.email,
               project_id: this.$route.params.project_id,
-              projectName: this.$store.getters["project/GtrProjectName"],
+              projectName: this.$store.getters['project/GtrProjectName']
             }
-          );
+          )
         } else {
           data = await this.$api.auth.projectUserAdd(
             this.$route.params.project_id,
             {
               ...this.selectedUser,
               project_id: this.$route.params.project_id,
-              projectName: this.$store.getters["project/GtrProjectName"],
+              projectName: this.$store.getters['project/GtrProjectName']
             }
-          );
+          )
         }
         this.$toast
-          .success("Successfully updated the user details")
-          .goAway(3000);
-        this.$emit("saved");
+          .success('Successfully updated the user details')
+          .goAway(3000)
+        this.$emit('saved')
         if (data && data.invite_token) {
-          this.invite_token = data;
+          this.invite_token = data
           // todo: bring anim
           // this.simpleAnim()
-          return;
+          return
         }
       } catch (e) {
         this.$toast
           .error(await this._extractSdkResponseErrorMsg(e))
-          .goAway(3000);
+          .goAway(3000)
       }
 
-      this.userEditDialog = false;
+      this.userEditDialog = false
     },
 
     clickInviteMore() {
-      this.$e("c:user:invite-more");
-      this.invite_token = null;
-      this.selectedUser = { roles: "editor" };
+      this.$e('c:user:invite-more')
+      this.invite_token = null
+      this.selectedUser = { roles: 'editor' }
     },
     clipboard(str) {
-      const el = document.createElement("textarea");
-      el.addEventListener("focusin", (e) => e.stopPropagation());
-      el.value = str;
-      document.body.appendChild(el);
-      el.select();
-      document.execCommand("copy");
-      document.body.removeChild(el);
+      const el = document.createElement('textarea')
+      el.addEventListener('focusin', e => e.stopPropagation())
+      el.value = str
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
 
-      this.$e("c:user:copy-url");
-    },
-  },
-};
+      this.$e('c:user:copy-url')
+    }
+  }
+}
 </script>
 
 <style scoped></style>
diff --git a/packages/nc-gui/components/auth/userManagement.vue b/packages/nc-gui/components/auth/UserManagement.vue
similarity index 78%
rename from packages/nc-gui/components/auth/userManagement.vue
rename to packages/nc-gui/components/auth/UserManagement.vue
index 4a7b861ad3..86bbbcc5aa 100644
--- a/packages/nc-gui/components/auth/userManagement.vue
+++ b/packages/nc-gui/components/auth/UserManagement.vue
@@ -13,7 +13,9 @@
         @keypress.enter="loadUsers"
       >
         <template #prepend-inner>
-          <v-icon small class="mt-1"> search </v-icon>
+          <v-icon small class="mt-1">
+            search
+          </v-icon>
         </template>
       </v-text-field>
       <v-spacer />
@@ -29,7 +31,9 @@
         @click="clickReload"
         @click.prevent
       >
-        <v-icon small left> refresh </v-icon>
+        <v-icon small left>
+          refresh
+        </v-icon>
         <!-- Reload -->
         {{ $t("general.reload") }}
       </x-btn>
@@ -45,7 +49,9 @@
         :disabled="loading"
         @click="addUser"
       >
-        <v-icon small left> mdi-plus </v-icon>
+        <v-icon small left>
+          mdi-plus
+        </v-icon>
         <!-- New User -->
         {{ $t("activity.newUser") }}
       </x-btn>
@@ -79,12 +85,16 @@
                         <tr class="text-left">
                           <!--                        <th>#</th>-->
                           <th class="font-weight-regular caption">
-                            <v-icon small> mdi-email-outline </v-icon>
+                            <v-icon small>
+                              mdi-email-outline
+                            </v-icon>
                             <!-- Email -->
                             {{ $t("labels.email") }}
                           </th>
                           <th class="font-weight-regular caption">
-                            <v-icon small> mdi-drama-masks </v-icon>
+                            <v-icon small>
+                              mdi-drama-masks
+                            </v-icon>
                             <!-- Roles -->
                             {{ $t("objects.roles") }}
                           </th>
@@ -223,7 +233,9 @@
           <tbody>
             <tr v-for="user in users" :key="user.email">
               <td>
-                <v-icon x-large> mdi-account-outline </v-icon>
+                <v-icon x-large>
+                  mdi-account-outline
+                </v-icon>
               </td>
               <td class="px-1 py-1" align="top">
                 <v-text-field
@@ -239,13 +251,19 @@
                 <set-list-checkbox-cell v-model="user.roles" :values="roles" />
               </td>
               <td align="middle">
-                <v-icon large> mdi-close </v-icon>
-                <v-icon large> mdi-save </v-icon>
+                <v-icon large>
+                  mdi-close
+                </v-icon>
+                <v-icon large>
+                  mdi-save
+                </v-icon>
               </td>
             </tr>
             <tr>
               <td>
-                <v-icon x-large> mdi-account-outline </v-icon>
+                <v-icon x-large>
+                  mdi-account-outline
+                </v-icon>
               </td>
               <td class="px-1 py-1" align="top">
                 <v-text-field solo class="elevation-0" hide-details dense />
@@ -254,7 +272,9 @@
                 <set-list-checkbox-cell :values="roles" />
               </td>
               <td align="middle">
-                <v-icon large> mdi-account-plus </v-icon>
+                <v-icon large>
+                  mdi-account-plus
+                </v-icon>
               </td>
             </tr>
           </tbody>
@@ -285,9 +305,15 @@
 
         <v-card-text>
           <div>
-            <v-icon small> mdi-account-outline </v-icon>
-            <template v-if="invite_token"> Copy Invite Token </template>
-            <template v-else-if="selectedUser.id"> Edit User </template>
+            <v-icon small>
+              mdi-account-outline
+            </v-icon>
+            <template v-if="invite_token">
+              Copy Invite Token
+            </template>
+            <template v-else-if="selectedUser.id">
+              Edit User
+            </template>
             <template v-else>
               <!-- Invite Team -->
               {{ $t("activity.inviteTeam") }}
@@ -306,7 +332,9 @@
                 "
               >
                 <template #append>
-                  <v-icon color="green" class="ml-2"> mdi-content-copy </v-icon>
+                  <v-icon color="green" class="ml-2">
+                    mdi-content-copy
+                  </v-icon>
                 </template>
                 <div class="ellipsis d-100">
                   {{ inviteUrl }}
@@ -314,10 +342,8 @@
               </v-alert>
 
               <p class="caption grey--text mt-3">
-
                 <!-- Looks like you have not configured mailer yet! <br> Please copy above invite link and send it to -->
                 <pre>{{ $t('msg.info.userInviteNoSMTP') }} {{ invite_token && (invite_token.email || invite_token.emails && invite_token.emails.join(', ')) }}.</pre>
-
               </p>
 
               <div class="text-right">
@@ -425,22 +451,22 @@
 </template>
 
 <script>
-import FeedbackForm from "@/components/feedbackForm";
-import SetListCheckboxCell from "@/components/project/spreadsheet/components/editableCell/setListCheckboxCell";
-import { enumColor } from "@/components/project/spreadsheet/helpers/colors";
-import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
-import { isEmail } from "@/helpers";
-import ShareBase from "~/components/base/shareBase";
-import XBtn from "~/components/global/xBtn";
+import FeedbackForm from '~/components/FeedbackForm'
+import SetListCheckboxCell from '~/components/project/spreadsheet/components/editableCell/SetListCheckboxCell'
+import { enumColor } from '@/components/project/spreadsheet/helpers/colors'
+import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
+import { isEmail } from '@/helpers'
+import ShareBase from '~/components/base/ShareBase'
+import XBtn from '~/components/global/XBtn'
 
 export default {
-  name: "UserManagement",
+  name: 'UserManagement',
   components: {
     XBtn,
     ShareBase,
     FeedbackForm,
     DlgLabelSubmitCancel,
-    SetListCheckboxCell,
+    SetListCheckboxCell
   },
   data: () => ({
     validate: false,
@@ -455,206 +481,204 @@ export default {
     loading: false,
     selectedUser: null,
     roles: [],
-    query: "",
+    query: '',
     deleteId: null,
     edited: false,
     valid: null,
     emailRules: [
-      (v) => !!v || "E-mail is required",
+      v => !!v || 'E-mail is required',
       (v) => {
-        const invalidEmails = (v || "")
+        const invalidEmails = (v || '')
           .split(/\s*,\s*/)
-          .filter((e) => !isEmail(e));
+          .filter(e => !isEmail(e))
         return (
           !invalidEmails.length ||
-          `"${invalidEmails.join(", ")}" - invalid email`
-        );
-      },
+          `"${invalidEmails.join(', ')}" - invalid email`
+        )
+      }
     ],
     roleRules: [
-      (v) => !!v || "User Role is required",
-      (v) =>
-        ["creator", "editor", "commenter", "viewer"].includes(v) ||
-        "invalid user role",
+      v => !!v || 'User Role is required',
+      v =>
+        ['creator', 'editor', 'commenter', 'viewer'].includes(v) ||
+        'invalid user role'
     ],
     userList: [],
     roleDescriptions: {},
-    deleteUserType: "", // [DELETE_FROM_PROJECT, DELETE_FROM_NOCODB]
+    deleteUserType: '' // [DELETE_FROM_PROJECT, DELETE_FROM_NOCODB]
   }),
   computed: {
     roleNames() {
-      return this.roles.map((r) => r.title);
+      return this.roles.map(r => r.title)
     },
     inviteUrl() {
       return this.invite_token
         ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}`
-        : null;
+        : null
     },
     rolesColors() {
-      const colors = this.$store.state.windows.darkTheme
+      const colors = this.$store.state.settings.darkTheme
         ? enumColor.dark
-        : enumColor.light;
+        : enumColor.light
       return ['owner'].concat(this.roles).reduce((o, r, i) => {
-        o[r] = colors[i % colors.length];
-        return o;
-      }, {});
+        o[r] = colors[i % colors.length]
+        return o
+      }, {})
     },
     selectedRoles: {
       get() {
         return (
           this.selectedUser && this.selectedUser.roles
-            ? this.selectedUser.roles.split(",")
+            ? this.selectedUser.roles.split(',')
             : []
         ).sort(
           (a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
-        )[0];
+        )[0]
       },
       set(roles) {
         if (this.selectedUser) {
-          this.selectedUser.roles = roles; // .filter(Boolean).join(',')
+          this.selectedUser.roles = roles // .filter(Boolean).join(',')
         }
-      },
+      }
     },
     selectedUserIndex: {
       get() {
         return this.users
-          ? this.users.findIndex((u) => u.email === this.selectedUser.email)
-          : -1;
+          ? this.users.findIndex(u => u.email === this.selectedUser.email)
+          : -1
       },
       set(i) {
-        this.selectedUser = this.users[i];
-      },
+        this.selectedUser = this.users[i]
+      }
     },
     dialogMessage() {
-      let msg = "Do you want to remove the user";
-      if (this.deleteUserType === "DELETE_FROM_PROJECT") {
-        msg += " from Project";
-      } else if (this.deleteUserType === "DELETE_FROM_NOCODB") {
-        msg += " from NocoDB";
+      let msg = 'Do you want to remove the user'
+      if (this.deleteUserType === 'DELETE_FROM_PROJECT') {
+        msg += ' from Project'
+      } else if (this.deleteUserType === 'DELETE_FROM_NOCODB') {
+        msg += ' from NocoDB'
       }
-      msg += "?";
-      return msg;
-    },
+      msg += '?'
+      return msg
+    }
   },
   watch: {
     options: {
       async handler() {
-        await this.loadUsers();
+        await this.loadUsers()
       },
-      deep: true,
+      deep: true
     },
     userEditDialog(v) {
       // if (!v) { this.validate = false }
       if (v && this.selectedUser && !this.selectedUser.id) {
         this.$nextTick(() => {
           setTimeout(() => {
-            this.$refs.email.$el.querySelector("input").focus();
-          }, 100);
-        });
+            this.$refs.email.$el.querySelector('input').focus()
+          }, 100)
+        })
       }
-    },
+    }
   },
   async created() {
-    this.$eventBus.$on("show-add-user", this.addUser);
-    await this.loadUsers();
-    await this.loadRoles();
+    this.$eventBus.$on('show-add-user', this.addUser)
+    await this.loadUsers()
+    await this.loadRoles()
   },
   beforeDestroy() {
-    this.$eventBus.$off("show-add-user", this.addUser);
+    this.$eventBus.$off('show-add-user', this.addUser)
   },
   methods: {
     clickReload() {
-      this.loadUsers();
-      this.$e("a:user:reload");
+      this.loadUsers()
+      this.$e('a:user:reload')
     },
     clickDeleteUser(id) {
-      this.$e("c:user:delete");
-      this.deleteId = id;
-      this.deleteItem = id;
-      this.showConfirmDlg = true;
-      this.deleteUserType = "DELETE_FROM_PROJECT";
+      this.$e('c:user:delete')
+      this.deleteId = id
+      this.deleteItem = id
+      this.showConfirmDlg = true
+      this.deleteUserType = 'DELETE_FROM_PROJECT'
     },
     clickInviteMore() {
-      this.$e("c:user:invite-more");
-      this.invite_token = null;
-      this.selectedUser = { roles: "editor" };
+      this.$e('c:user:invite-more')
+      this.invite_token = null
+      this.selectedUser = { roles: 'editor' }
     },
     getRole(roles) {
-      return (roles ? roles.split(",") : []).sort(
+      return (roles ? roles.split(',') : []).sort(
         (a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
-      )[0];
+      )[0]
     },
     simpleAnim() {
-      const count = 30;
+      const count = 30
       const defaults = {
         origin: { y: 0.7 },
-        zIndex: 9999999,
-      };
+        zIndex: 9999999
+      }
 
       function fire(particleRatio, opts) {
         window.confetti(
           Object.assign({}, defaults, opts, {
-            particleCount: Math.floor(count * particleRatio),
+            particleCount: Math.floor(count * particleRatio)
           })
-        );
+        )
       }
 
       fire(0.25, {
         spread: 26,
-        startVelocity: 55,
-      });
+        startVelocity: 55
+      })
       fire(0.2, {
-        spread: 60,
-      });
+        spread: 60
+      })
       fire(0.35, {
         spread: 100,
         decay: 0.91,
-        scalar: 0.8,
-      });
+        scalar: 0.8
+      })
       fire(0.1, {
         spread: 120,
         startVelocity: 25,
         decay: 0.92,
-        scalar: 1.2,
-      });
+        scalar: 1.2
+      })
       fire(0.1, {
         spread: 120,
-        startVelocity: 45,
-      });
+        startVelocity: 45
+      })
     },
     getInviteUrl(token) {
       return token
         ? `${location.origin}${location.pathname}#/user/authentication/signup/${token}`
-        : null;
+        : null
     },
 
     clipboard(str) {
-      const el = document.createElement("textarea");
-      el.addEventListener("focusin", (e) => e.stopPropagation());
-      el.value = str;
-      document.body.appendChild(el);
-      el.select();
-      document.execCommand("copy");
-      document.body.removeChild(el);
-
-      this.$e("c:user:copy-url");
+      const el = document.createElement('textarea')
+      el.addEventListener('focusin', e => e.stopPropagation())
+      el.value = str
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
+
+      this.$e('c:user:copy-url')
     },
     async resendInvite(id) {
       try {
-
         await this.$api.auth.projectUserResendInvite(this.$route.params.project_id, id)
         this.$toast.success('Invite email sent successfully').goAway(3000)
         await this.loadUsers()
-
       } catch (e) {
-        this.$toast.error(e.response.data.msg).goAway(3000);
+        this.$toast.error(e.response.data.msg).goAway(3000)
       }
 
-      this.$e("a:user:resend-invite");
+      this.$e('a:user:resend-invite')
     },
     async loadUsers() {
       try {
-        const { page = 1, itemsPerPage = 20 } = this.options;
+        const { page = 1, itemsPerPage = 20 } = this.options
         // const data = (await this.$axios.get('/admin', {
         //   headers: {
         //     'xc-auth': this.$store.state.users.token
@@ -673,23 +697,23 @@ export default {
             query: {
               limit: itemsPerPage,
               offset: (page - 1) * itemsPerPage,
-              query: this.query,
-            },
+              query: this.query
+            }
           }
-        );
+        )
 
-        this.count = userData.users.pageInfo.totalRows;
-        this.users = userData.users.list;
+        this.count = userData.users.pageInfo.totalRows
+        this.users = userData.users.list
         if (!this.selectedUser && this.users && this.users[0]) {
-          this.selectedUserIndex = 0;
+          this.selectedUserIndex = 0
         }
       } catch (e) {
-        console.log(e);
+        console.log(e)
       }
     },
     async loadRoles() {
       try {
-        this.roles = ["creator", "editor", "commenter", "viewer"];
+        this.roles = ['creator', 'editor', 'commenter', 'viewer']
 
         // todo:
         //   (await this.$axios.get('/admin/roles', {
@@ -704,7 +728,7 @@ export default {
         //   return role.title
         // }).filter(role => role !== 'guest')
       } catch (e) {
-        console.log(e);
+        console.log(e)
       }
     },
     async deleteUser(id, type) {
@@ -712,66 +736,66 @@ export default {
         await this.$api.auth.projectUserRemove(
           this.$route.params.project_id,
           id
-        );
+        )
         this.$toast
           .success(
             `Successfully removed the user from ${
-              type === "DELETE_FROM_PROJECT" ? "project" : "NocoDB"
+              type === 'DELETE_FROM_PROJECT' ? 'project' : 'NocoDB'
             }`
           )
-          .goAway(3000);
-        await this.loadUsers();
+          .goAway(3000)
+        await this.loadUsers()
       } catch (e) {
-        this.$toast.error(e.response.data.msg).goAway(3000);
+        this.$toast.error(e.response.data.msg).goAway(3000)
       }
     },
     async confirmDelete(hideDialog) {
       if (hideDialog) {
-        this.showConfirmDlg = false;
-        return;
+        this.showConfirmDlg = false
+        return
       }
-      await this.deleteUser(this.deleteId, this.deleteUserType);
-      this.showConfirmDlg = false;
+      await this.deleteUser(this.deleteId, this.deleteUserType)
+      this.showConfirmDlg = false
 
-      this.$e("a:user:delete");
+      this.$e('a:user:delete')
     },
     addUser() {
-      this.invite_token = null;
+      this.invite_token = null
       this.selectedUser = {
-        roles: "editor",
-      };
-      this.userEditDialog = true;
+        roles: 'editor'
+      }
+      this.userEditDialog = true
 
-      this.$e("c:user:add");
+      this.$e('c:user:add')
     },
     async inviteUser(item) {
       try {
         await this.$api.auth.projectUserAdd(
           this.$route.params.project_id,
           item
-        );
-        this.$toast.success("Successfully added user to project").goAway(3000);
-        await this.loadUsers();
+        )
+        this.$toast.success('Successfully added user to project').goAway(3000)
+        await this.loadUsers()
       } catch (e) {
-        this.$toast.error(e.response.data.msg).goAway(3000);
+        this.$toast.error(e.response.data.msg).goAway(3000)
       }
 
-      this.$e("a:user:add");
+      this.$e('a:user:add')
     },
     async saveUser() {
-      this.validate = true;
-      await this.$nextTick();
+      this.validate = true
+      await this.$nextTick()
       if (this.loading || !this.$refs.form.validate() || !this.selectedUser) {
-        return;
+        return
       }
-      this.$e("a:user:invite", { role: this.selectedUser.roles });
+      this.$e('a:user:invite', { role: this.selectedUser.roles })
 
       if (!this.edited) {
-        this.userEditDialog = false;
+        this.userEditDialog = false
       }
 
       try {
-        let data;
+        let data
         if (this.selectedUser.id) {
           await this.$api.auth.projectUserUpdate(
             this.$route.params.project_id,
@@ -780,36 +804,36 @@ export default {
               roles: this.selectedUser.roles,
               email: this.selectedUser.email,
               project_id: this.$route.params.project_id,
-              projectName: this.$store.getters["project/GtrProjectName"],
+              projectName: this.$store.getters['project/GtrProjectName']
             }
-          );
+          )
         } else {
           data = await this.$api.auth.projectUserAdd(
             this.$route.params.project_id,
             {
               ...this.selectedUser,
               project_id: this.$route.params.project_id,
-              projectName: this.$store.getters["project/GtrProjectName"],
+              projectName: this.$store.getters['project/GtrProjectName']
             }
-          );
+          )
         }
         this.$toast
-          .success("Successfully updated the user details")
-          .goAway(3000);
-        await this.loadUsers();
+          .success('Successfully updated the user details')
+          .goAway(3000)
+        await this.loadUsers()
         if (data && data.invite_token) {
-          this.invite_token = data;
-          this.simpleAnim();
-          return;
+          this.invite_token = data
+          this.simpleAnim()
+          return
         }
       } catch (e) {
-        this.$toast.error(e.response.data.msg).goAway(3000);
+        this.$toast.error(e.response.data.msg).goAway(3000)
       }
 
-      await this.loadUsers();
-    },
-  },
-};
+      await this.loadUsers()
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/base/shareBase.vue b/packages/nc-gui/components/base/ShareBase.vue
similarity index 100%
rename from packages/nc-gui/components/base/shareBase.vue
rename to packages/nc-gui/components/base/ShareBase.vue
diff --git a/packages/nc-gui/components/global/NcSlider.vue b/packages/nc-gui/components/global/NcSlider.vue
new file mode 100644
index 0000000000..7ed346e952
--- /dev/null
+++ b/packages/nc-gui/components/global/NcSlider.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="nc-container" :class="{active:modal}" @click="modal=false">
+    <div class="nc-content elevation-3 pa-4" @click.stop>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'NcSlider',
+  props: {
+    value: Boolean
+  },
+  computed: {
+    modal: {
+      get() {
+        return this.value
+      },
+      set(v) {
+        this.$emit('input', v)
+      }
+    }
+  },
+  mounted() {
+    (document.querySelector('[data-app]') || this.$root.$el).append(this.$el)
+  },
+
+  destroyed() {
+    this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.nc-container {
+  position: fixed;
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  right: 0;
+  top: 0;
+
+  .nc-content {
+    background-color: var(--v-backgroundColorDefault-base);
+    height: 100%;
+    width: max(50%, 700px);
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    right: min(-50%, -700px);
+    transition: .3s right;
+
+  }
+
+  &.active {
+    pointer-events: all;
+
+    & > .nc-content {
+      right: 0
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/global/recursiveMenu.vue b/packages/nc-gui/components/global/RecursiveMenu.vue
similarity index 100%
rename from packages/nc-gui/components/global/recursiveMenu.vue
rename to packages/nc-gui/components/global/RecursiveMenu.vue
diff --git a/packages/nc-gui/components/global/xAutoComplete.vue b/packages/nc-gui/components/global/XAutoComplete.vue
similarity index 100%
rename from packages/nc-gui/components/global/xAutoComplete.vue
rename to packages/nc-gui/components/global/XAutoComplete.vue
diff --git a/packages/nc-gui/components/global/xBtn.vue b/packages/nc-gui/components/global/XBtn.vue
similarity index 100%
rename from packages/nc-gui/components/global/xBtn.vue
rename to packages/nc-gui/components/global/XBtn.vue
diff --git a/packages/nc-gui/components/global/xIcon.vue b/packages/nc-gui/components/global/XIcon.vue
similarity index 100%
rename from packages/nc-gui/components/global/xIcon.vue
rename to packages/nc-gui/components/global/XIcon.vue
diff --git a/packages/nc-gui/components/import/dropOrSelectFile.vue b/packages/nc-gui/components/import/DropOrSelectFile.vue
similarity index 100%
rename from packages/nc-gui/components/import/dropOrSelectFile.vue
rename to packages/nc-gui/components/import/DropOrSelectFile.vue
diff --git a/packages/nc-gui/components/import/dropOrSelectFileModal.vue b/packages/nc-gui/components/import/DropOrSelectFileModal.vue
similarity index 97%
rename from packages/nc-gui/components/import/dropOrSelectFileModal.vue
rename to packages/nc-gui/components/import/DropOrSelectFileModal.vue
index a6519e677d..624d6cb4c4 100644
--- a/packages/nc-gui/components/import/dropOrSelectFileModal.vue
+++ b/packages/nc-gui/components/import/DropOrSelectFileModal.vue
@@ -45,7 +45,7 @@
 
 <script>
 
-import DropOrSelectFile from '~/components/import/dropOrSelectFile'
+import DropOrSelectFile from '~/components/import/DropOrSelectFile'
 
 export default {
   name: 'DropOrSelectFileModal',
diff --git a/packages/nc-gui/components/import/ImportFromAirtable.vue b/packages/nc-gui/components/import/ImportFromAirtable.vue
new file mode 100644
index 0000000000..00003e9cea
--- /dev/null
+++ b/packages/nc-gui/components/import/ImportFromAirtable.vue
@@ -0,0 +1,304 @@
+<template>
+  <v-dialog v-model="airtableModal" max-width="min(600px, 90%)">
+    <v-card class="nc-import-card h-100">
+      <v-toolbar class="elevation-0 align-center" height="68">
+        <h3 class="mt-2">
+          {{ $t('title.importFromAirtable') }}
+        </h3>
+        <div v-t="['c:airtable-import:turbo-mode']" class="ml-2 mt-3 title pointer" @click="enableTurbo">
+          🚀
+        </div>
+        <v-spacer />
+      </v-toolbar>
+
+      <v-divider />
+      <div class="h-100" style="width: 100%">
+        <div>
+          <v-card v-if="step === 1" class="py-6 elevation-0" height="500">
+            <div class="d-flex flex-column justify-center align-center pt-2 pb-6">
+              <span class="subtitle-1 font-weight-medium" @dblclick="$set(syncSource.details,'syncViews',true)">
+                Credentials
+              </span>
+
+              <a href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free" class="caption grey--text" target="_blank">Where to find this?</a>
+            </div>
+
+            <v-form v-model="valid">
+              <div v-if="syncSource" class="px-10 mt-1 mx-auto" style="max-width: 400px">
+                <v-text-field
+                  v-model="syncSource.details.apiKey"
+                  outlined
+                  dense
+                  label="Api Key"
+                  class="caption"
+                  :type="isPasswordVisible ? 'text':'password'"
+                  :rules="[v=> !!v || 'Api Key is required']"
+                >
+                  <template #append="">
+                    <v-icon class="mt-1" small @click="isPasswordVisible = !isPasswordVisible">
+                      {{ isPasswordVisible ? 'visibility_off' : 'visibility' }}
+                    </v-icon>
+                  </template>
+                </v-text-field>
+                <v-text-field
+                  v-model="syncSourceUrlOrId"
+                  outlined
+                  dense
+                  label="Shared Base ID / URL"
+                  class="caption"
+                  :rules="[(v) => !!v || 'Shared Base ID / URL is required']"
+                />
+              </div>
+            </v-form>   <v-card-actions class="justify-center pb-6">
+              <v-btn
+                v-t="['c:sync-airtable:save-and-sync']"
+                :disabled="!valid"
+                large
+                color="primary"
+                @click="saveAndSync"
+              >
+                Import
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+
+          <v-card
+            v-if="step === 2"
+            class="pb-4 mt-4 elevation-0"
+          >
+            <v-card-title class=" justify-center">
+              <span class="subtitle-1 font-weight-medium">Logs</span>
+            </v-card-title>
+
+            <v-card
+              ref="log"
+              dark
+              class="mt-2 mx-4 pa-4 elevation-0 green--text"
+              height="500"
+              style="overflow-y: auto"
+            >
+              <div v-for="({msg , status}, i) in progress" :key="i">
+                <v-icon v-if="status==='FAILED'" color="red" size="15">
+                  mdi-close-circle-outline
+                </v-icon>
+                <v-icon v-else color="green" size="15">
+                  mdi-currency-usd
+                </v-icon>
+                <span class="caption nc-text">{{ msg }}</span>
+              </div>
+              <div
+                v-if="!progress || !progress.length || progress[progress.length-1].status !== 'COMPLETED' && progress[progress.length-1].status !== 'FAILED'"
+                class=""
+              >
+                <v-icon color="green" size="15">
+                  mdi-loading mdi-spin
+                </v-icon>
+                <span class="caption nc-text">Syncing
+                </span>
+                <!--                  <div class="nc-progress" />-->
+              </div>
+            </v-card>
+
+            <div
+              v-if="progress && progress.length && progress[progress.length-1].status === 'COMPLETED'"
+              class="pa-4 pt-8 text-center"
+            >
+              <v-btn large color="primary" @click="airtableModal=false">
+                Go to dashboard
+              </v-btn>
+            </div>
+          </v-card>
+        </div>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import io from 'socket.io-client'
+
+export default {
+  name: 'ImportFromAirtable',
+  props: {
+    value: Boolean
+  },
+  data: () => ({
+    isPasswordVisible: false,
+    valid: false,
+    socket: null,
+    step: 1,
+    progress: [],
+    syncSource: null,
+    syncSourceUrlOrId: ''
+  }),
+  computed: {
+    airtableModal: {
+      set(v) {
+        this.$emit('input', v)
+      },
+      get() {
+        return this.value
+      }
+    }
+  },
+  watch: {
+    syncSourceUrlOrId(v) {
+      if (this.syncSource && this.syncSource.details) {
+        const m = v && v.match(/(exp|shr).{14}/g)
+        this.syncSource.details.shareId = m ? m[0] : null
+      }
+    }
+  },
+  created() {
+    this.socket = io(new URL(this.$axios.defaults.baseURL, window.location.href.split(/[?#]/)[0]).href, {
+      extraHeaders: { 'xc-auth': this.$store.state.users.token }
+    })
+    this.socket.on('connect_error', () => {
+      this.socket.disconnect()
+      this.socket = null
+    })
+
+    const socket = this.socket
+    socket.on('connect', function(data) {
+      console.log(socket.id)
+      console.log('socket connected', data)
+    })
+
+    socket.on('progress', (d) => {
+      this.progress.push(d)
+
+      this.$nextTick(() => {
+        if (this.$refs.log) {
+          const el = this.$refs.log.$el
+          el.scrollTop = el.scrollHeight
+        }
+      })
+
+      if (d.status === 'COMPLETED') {
+        this.$store.dispatch('project/_loadTables', {
+          dbKey: '0.projectJson.envs._noco.db.0',
+          key: '0.projectJson.envs._noco.db.0.tables',
+          _nodes: {
+            dbAlias: 'db',
+            env: '_noco',
+            type: 'tableDir'
+          }
+        }).then(() => this.$store.dispatch('tabs/loadFirstTableTab'))
+      }
+    })
+    this.loadSyncSrc()
+  },
+  beforeDestroy() {
+    if (this.socket) {
+      this.socket.disconnect()
+    }
+  },
+  methods: {
+    async saveAndSync() {
+      await this.createOrUpdate()
+      this.sync()
+    },
+    sync() {
+      this.step = 2
+      this.$axios.post(`/api/v1/db/meta/syncs/${this.syncSource.id}/trigger`, this.payload, {
+        params: {
+          id: this.socket.id
+        }
+      })
+    },
+    async loadSyncSrc() {
+      const { data: { list: srcs } } = await this.$axios.get(`/api/v1/db/meta/projects/${this.projectId}/syncs`)
+      if (srcs && srcs[0]) {
+        srcs[0].details = srcs[0].details || {}
+        this.syncSource = srcs[0]
+        this.syncSourceUrlOrId = srcs[0].details.shareId
+      } else {
+        this.syncSource = {
+          type: 'Airtable',
+          details: {
+            syncInterval: '15mins',
+            syncDirection: 'Airtable to NocoDB',
+            syncRetryCount: 1,
+
+            syncViews: false,
+
+            apiKey: '',
+            shareId: ''
+          }
+        }
+      }
+    },
+    async createOrUpdate() {
+      try {
+        const { id, ...payload } = this.syncSource
+        if (id) {
+          await this.$axios.patch(`/api/v1/db/meta/syncs/${id}`, payload)
+        } else {
+          this.syncSource = (await this.$axios.post(`/api/v1/db/meta/projects/${this.projectId}/syncs`, payload)).data
+        }
+      } catch (e) {
+        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+      }
+    },
+    enableTurbo() {
+      this.$set(this.syncSource.details, 'syncViews', true)
+      this.$toast.success('🚀🚀 Ludicrous mode activated! Let\'s go! 🚀🚀').goAway(3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.nc-progress {
+  margin-left: 12px;
+  position: relative;
+  width: 5px;
+  height: 5px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFlashing 1s infinite linear alternate;
+  animation-delay: .5s;
+}
+
+.nc-progress::before, .nc-progress::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.nc-progress::before {
+  left: -7.5px;
+  width: 5px;
+  height: 5px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFlashing 1s infinite alternate;
+  animation-delay: 0s;
+}
+
+.nc-progress::after {
+  left: 7.5px;
+  width: 5px;
+  height: 5px;
+  border-radius: 5px;
+  background-color: var(--v-primary-base);
+  color: var(--v-primary-base);
+  animation: dotFlashing 1s infinite alternate;
+  animation-delay: 1s;
+}
+
+@keyframes dotFlashing {
+  0% {
+    background-color: var(--v-primary-base);
+  }
+  50%,
+  100% {
+    background-color: var(--v-backgroundColor-base);
+  }
+}
+
+</style>
diff --git a/packages/nc-gui/components/import/excelImport.vue b/packages/nc-gui/components/import/QuickImport.vue
similarity index 83%
rename from packages/nc-gui/components/import/excelImport.vue
rename to packages/nc-gui/components/import/QuickImport.vue
index c9f172bb26..3ac14f1a68 100644
--- a/packages/nc-gui/components/import/excelImport.vue
+++ b/packages/nc-gui/components/import/QuickImport.vue
@@ -43,8 +43,8 @@
                   {{ $t('msg.info.upload_sub') }}
                 </p>
 
-                <p class="caption grey--text">
-                  <!-- Supported: .xls, .xlsx, .xlsm, .ods, .ots-->
+                <p v-if="quickImportType == 'excel'" class="caption grey--text">
+                  <!-- Supported: .xls, .xlsx, .xlsm, .ods, .ots -->
                   {{ $t('msg.info.excelSupport') }}
                 </p>
               </div>
@@ -60,7 +60,7 @@
                       v-model="url"
                       hide-details="auto"
                       type="url"
-                      :label="$t('msg.info.excelURL')"
+                      :label="quickImportType == 'excel' ? $t('msg.info.excelURL') : $t('msg.info.csvURL') "
                       class="caption"
                       outlined
                       dense
@@ -106,6 +106,7 @@
     <v-tooltip bottom>
       <template #activator="{on}">
         <input
+          v-if="quickImportType == 'excel'"
           ref="file"
           class="nc-excel-import-input"
           type="file"
@@ -113,6 +114,15 @@
           accept=".xlsx, .xls, .xlsm, .ods, .ots"
           @change="_change($event)"
         >
+        <input
+          v-if="quickImportType == 'csv'"
+          ref="file"
+          class="nc-excel-import-input"
+          type="file"
+          style="display: none"
+          accept=".csv"
+          @change="_change($event)"
+        >
         <v-btn
 
           v-if="!hideLabel"
@@ -133,14 +143,19 @@
 
     <v-dialog v-if="templateData" v-model="templateEditorModal" max-width="1000">
       <v-card class="pa-6" min-width="500">
-        <template-editor :project-template.sync="templateData" excel-import>
+        <template-editor :project-template.sync="templateData" excel-import :quick-import-type="quickImportType">
           <template #toolbar="{valid}">
-            <!--Importing-->
             <h3 class="mt-2 grey--text">
-              {{ $t('activity.importExcel') }} : {{ filename }}
+              <!--Import Excel-->
+              <span v-if="quickImportType === 'excel'">
+                {{ $t('activity.importExcel') }}
+              </span>
+              <!--Import CSV-->
+              <span v-if="quickImportType === 'csv'">
+                {{ $t('activity.importCSV') }}
+              </span>
+              : {{ filename }}
             </h3>
-            <!--            <span class="grey&#45;&#45;text">Importing 2 sheets</span>-->
-
             <v-spacer />
             <v-spacer />
             <create-project-from-template-btn
@@ -151,10 +166,16 @@
               :valid="valid"
               create-gql-text="Import as GQL Project"
               create-rest-text="Import as REST Project"
-              @success="$emit('success'),templateEditorModal = false"
+              @closeModal="$emit('closeModal'),templateEditorModal = false"
             >
               <!--Import Excel-->
-              {{ $t('activity.importExcel') }}
+              <span v-if="quickImportType === 'excel'">
+                {{ $t('activity.importExcel') }}
+              </span>
+              <!--Import CSV-->
+              <span v-if="quickImportType === 'csv'">
+                {{ $t('activity.importCSV') }}
+              </span>
             </create-project-from-template-btn>
           </template>
         </template-editor>
@@ -166,18 +187,19 @@
 <script>
 
 // import XLSX from 'xlsx'
-import TemplateEditor from '~/components/templates/editor'
-import CreateProjectFromTemplateBtn from '~/components/templates/createProjectFromTemplateBtn'
+import TemplateEditor from '~/components/templates/Editor'
+import CreateProjectFromTemplateBtn from '~/components/templates/CreateProjectFromTemplateBtn'
 import ExcelUrlTemplateAdapter from '~/components/import/templateParsers/ExcelUrlTemplateAdapter'
 import ExcelTemplateAdapter from '~/components/import/templateParsers/ExcelTemplateAdapter'
 
 export default {
-  name: 'ExcelImport',
+  name: 'QuickImport',
   components: { CreateProjectFromTemplateBtn, TemplateEditor },
   props: {
     hideLabel: Boolean,
     value: Boolean,
-    importToProject: Boolean
+    importToProject: Boolean,
+    quickImportType: String
   },
   data() {
     return {
@@ -276,7 +298,9 @@ export default {
         this.templateEditorModal = true
       } catch (e) {
         console.log(e)
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000)
       }
     },
 
@@ -296,8 +320,14 @@ export default {
         return
       }
 
-      if ((!/\.xls[xm]?$/.test(file.name)) && (!/\.o[dt]s?$/.test(file.name))) {
-        return this.$toast.error('Dropped file is not an accepted file type. The accepted file types are .xlsx,.xls,.xlsm!').goAway(3000)
+      if (this.quickImportType === 'excel') {
+        if (!/.*\.(xls|xlsx|xlsm|ods|ots)/.test(file.name)) {
+          return this.$toast.error('Dropped file is not an accepted file type. The accepted file types are .xls, .xlsx, .xlsm, .ods, .ots!').goAway(3000)
+        }
+      } else if (this.quickImportType === 'csv') {
+        if (!/.*\.(csv)/.test(file.name)) {
+          return this.$toast.error('Dropped file is not an accepted file type. The accepted file type is .csv!').goAway(3000)
+        }
       }
       this._file(file)
     },
diff --git a/packages/nc-gui/components/project/apiClientOld.vue b/packages/nc-gui/components/project/ApiClientOld.vue
similarity index 99%
rename from packages/nc-gui/components/project/apiClientOld.vue
rename to packages/nc-gui/components/project/ApiClientOld.vue
index fcb2a01903..7500181327 100644
--- a/packages/nc-gui/components/project/apiClientOld.vue
+++ b/packages/nc-gui/components/project/ApiClientOld.vue
@@ -368,13 +368,13 @@ import Vue from 'vue'
 
 import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
 import { Splitpanes, Pane } from 'splitpanes'
-import params from '../apiClient/params'
-import headers from '../apiClient/headers'
+import params from '../apiClient/Params'
+import headers from '../apiClient/Headers'
 
 import { MonacoJsonEditor } from '../monaco/index'
 
-import environment from '../environment'
-import PerfTest from '../apiClient/perfTest'
+import environment from '../Environment'
+import PerfTest from '../apiClient/PerfTest'
 
 // const {app, dialog, path, fs, shell, FileCollection} = require("electron").remote.require(
 //   "./libs"
diff --git a/packages/nc-gui/components/project/apiClientSwagger.vue b/packages/nc-gui/components/project/ApiClientSwagger.vue
similarity index 99%
rename from packages/nc-gui/components/project/apiClientSwagger.vue
rename to packages/nc-gui/components/project/ApiClientSwagger.vue
index dd77a216d5..2726cd7f33 100644
--- a/packages/nc-gui/components/project/apiClientSwagger.vue
+++ b/packages/nc-gui/components/project/ApiClientSwagger.vue
@@ -620,13 +620,13 @@ import Vue from 'vue'
 
 import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
 import { Splitpanes, Pane } from 'splitpanes'
-import params from '../apiClient/params'
-import headers from '../apiClient/headers'
+import params from '../apiClient/Params'
+import headers from '../apiClient/Headers'
 
 import { MonacoJsonEditor } from '../monaco/index'
 
-import environment from '../environment'
-import PerfTest from '../apiClient/perfTest'
+import environment from '../Environment'
+import PerfTest from '../apiClient/PerfTest'
 
 // const {app, dialog, path, fs, shell, XcApis} = require("electron").remote.require(
 //   "./libs"
diff --git a/packages/nc-gui/components/project/apis.vue b/packages/nc-gui/components/project/Apis.vue
similarity index 100%
rename from packages/nc-gui/components/project/apis.vue
rename to packages/nc-gui/components/project/Apis.vue
diff --git a/packages/nc-gui/components/project/appStore.vue b/packages/nc-gui/components/project/AppStore.vue
similarity index 97%
rename from packages/nc-gui/components/project/appStore.vue
rename to packages/nc-gui/components/project/AppStore.vue
index 775b5b4a90..e358156029 100644
--- a/packages/nc-gui/components/project/appStore.vue
+++ b/packages/nc-gui/components/project/AppStore.vue
@@ -13,8 +13,8 @@
       >
         <v-card
           v-if="installPlugin && pluginInstallOverlay"
-          :dark="$store.state.windows.darkTheme"
-          :light="!$store.state.windows.darkTheme"
+          :dark="$store.state.settings.darkTheme"
+          :light="!$store.state.settings.darkTheme"
         >
           <app-install
             :id="installPlugin.id"
@@ -38,8 +38,8 @@
       <v-dialog min-width="400px" max-width="700px" min-height="300">
         <v-card
           v-if="resetPluginRef"
-          :dark="$store.state.windows.darkTheme"
-          :light="!$store.state.windows.darkTheme"
+          :dark="$store.state.settings.darkTheme"
+          :light="!$store.state.settings.darkTheme"
         >
           <v-card-text>
             Please confirm to reset {{ resetPluginRef.title }}
@@ -191,8 +191,8 @@
 </template>
 
 <script>
-import AppInstall from '@/components/project/appStore/appInstall'
-import DlgOkNew from '@/components/utils/dlgOkNew'
+import AppInstall from '~/components/project/appStore/AppInstall'
+import DlgOkNew from '~/components/utils/DlgOkNew'
 
 export default {
   name: 'AppStore',
diff --git a/packages/nc-gui/components/project/auditTab.vue b/packages/nc-gui/components/project/AuditTab.vue
similarity index 79%
rename from packages/nc-gui/components/project/auditTab.vue
rename to packages/nc-gui/components/project/AuditTab.vue
index 2e536fb43a..cfd5504467 100644
--- a/packages/nc-gui/components/project/auditTab.vue
+++ b/packages/nc-gui/components/project/AuditTab.vue
@@ -25,10 +25,10 @@
 </template>
 
 <script>
-import Db from '@/components/project/auditTab/db'
-import SqlLogAndOutput from '~/components/project/sqlLogAndOutput'
-import Audit from '~/components/project/auditTab/audit'
-import AuditCE from '~/components/project/auditTab/auditCE'
+import Db from '~/components/project/auditTab/Db'
+import SqlLogAndOutput from '~/components/project/SqlLogAndOutput'
+import Audit from '~/components/project/auditTab/Audit'
+import AuditCE from '~/components/project/auditTab/AuditCE'
 
 export default {
   name: 'AuditTab',
diff --git a/packages/nc-gui/components/project/cronJobs.vue b/packages/nc-gui/components/project/CronJobs.vue
similarity index 99%
rename from packages/nc-gui/components/project/cronJobs.vue
rename to packages/nc-gui/components/project/CronJobs.vue
index 643dd293ad..a34b424f09 100644
--- a/packages/nc-gui/components/project/cronJobs.vue
+++ b/packages/nc-gui/components/project/CronJobs.vue
@@ -37,7 +37,7 @@
                       <h4
                         class="text-center"
                         :class="{
-                          'grey--text text--darken-2' : !$store.state.windows.darkTheme
+                          'grey--text text--darken-2' : !$store.state.settings.darkTheme
                         }"
                       >
                         Cron Job List
@@ -139,7 +139,7 @@
                         <h4
                           class="text-center text-capitalize mt-2 d-100"
                           :class="{
-                            'grey--text text--darken-2' : !$store.state.windows.darkTheme
+                            'grey--text text--darken-2' : !$store.state.settings.darkTheme
                           }"
                         >
                           {{ selectedItem.title }}
diff --git a/packages/nc-gui/components/project/function.vue b/packages/nc-gui/components/project/Function.vue
similarity index 92%
rename from packages/nc-gui/components/project/function.vue
rename to packages/nc-gui/components/project/Function.vue
index 524d394491..de58c2f0c4 100644
--- a/packages/nc-gui/components/project/function.vue
+++ b/packages/nc-gui/components/project/Function.vue
@@ -17,8 +17,8 @@
 
 <script>
 
-import FunctionQuery from './functionTab/functionQuery'
-import FunctionAcl from './functionTab/functionAcl'
+import FunctionQuery from './functionTab/FunctionQuery'
+import FunctionAcl from './functionTab/FunctionAcl'
 
 export default {
   components: { FunctionAcl, FunctionQuery },
diff --git a/packages/nc-gui/components/project/gqlHandlerCodeEditor.vue b/packages/nc-gui/components/project/GqlHandlerCodeEditor.vue
similarity index 100%
rename from packages/nc-gui/components/project/gqlHandlerCodeEditor.vue
rename to packages/nc-gui/components/project/GqlHandlerCodeEditor.vue
diff --git a/packages/nc-gui/components/project/graphqlClient.vue b/packages/nc-gui/components/project/GraphqlClient.vue
similarity index 100%
rename from packages/nc-gui/components/project/graphqlClient.vue
rename to packages/nc-gui/components/project/GraphqlClient.vue
diff --git a/packages/nc-gui/components/project/grpcClient.vue b/packages/nc-gui/components/project/GrpcClient.vue
similarity index 100%
rename from packages/nc-gui/components/project/grpcClient.vue
rename to packages/nc-gui/components/project/GrpcClient.vue
diff --git a/packages/nc-gui/components/project/grpcHandlerCodeEditor.vue b/packages/nc-gui/components/project/GrpcHandlerCodeEditor.vue
similarity index 100%
rename from packages/nc-gui/components/project/grpcHandlerCodeEditor.vue
rename to packages/nc-gui/components/project/GrpcHandlerCodeEditor.vue
diff --git a/packages/nc-gui/components/project/procedure.vue b/packages/nc-gui/components/project/Procedure.vue
similarity index 92%
rename from packages/nc-gui/components/project/procedure.vue
rename to packages/nc-gui/components/project/Procedure.vue
index d7f5238fea..0aba5568a3 100644
--- a/packages/nc-gui/components/project/procedure.vue
+++ b/packages/nc-gui/components/project/Procedure.vue
@@ -18,8 +18,8 @@
 
 <script>
 
-import ProcedureQuery from './procedureTab/procedureQuery'
-import ProcedureAcl from './procedureTab/procedureAcl'
+import ProcedureQuery from './procedureTab/ProcedureQuery'
+import ProcedureAcl from './procedureTab/ProcedureAcl'
 
 export default {
   components: { ProcedureAcl, ProcedureQuery },
diff --git a/packages/nc-gui/components/project/projectSettings.vue b/packages/nc-gui/components/project/ProjectSettings.vue
similarity index 96%
rename from packages/nc-gui/components/project/projectSettings.vue
rename to packages/nc-gui/components/project/ProjectSettings.vue
index e9ef9e8b84..604ebcb548 100644
--- a/packages/nc-gui/components/project/projectSettings.vue
+++ b/packages/nc-gui/components/project/ProjectSettings.vue
@@ -75,8 +75,8 @@
 </template>
 
 <script>
-import Appearance from '@/components/project/settings/appearance'
-import CreateOrEditProject from '@/components/createOrEditProject'
+import Appearance from '~/components/project/settings/Appearance'
+import CreateOrEditProject from '~/components/CreateOrEditProject'
 
 export default {
   name: 'ProjectSettings',
diff --git a/packages/nc-gui/components/project/restHandlerCodeEditor.vue b/packages/nc-gui/components/project/RestHandlerCodeEditor.vue
similarity index 100%
rename from packages/nc-gui/components/project/restHandlerCodeEditor.vue
rename to packages/nc-gui/components/project/RestHandlerCodeEditor.vue
diff --git a/packages/nc-gui/components/project/seed.vue b/packages/nc-gui/components/project/Seed.vue
similarity index 99%
rename from packages/nc-gui/components/project/seed.vue
rename to packages/nc-gui/components/project/Seed.vue
index 79ec75b016..f930e06522 100644
--- a/packages/nc-gui/components/project/seed.vue
+++ b/packages/nc-gui/components/project/Seed.vue
@@ -88,7 +88,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import dlgLabelSubmitCancel from '../utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from '../utils/DlgLabelSubmitCancel'
 
 export default {
   components: {
diff --git a/packages/nc-gui/components/project/sequence.vue b/packages/nc-gui/components/project/Sequence.vue
similarity index 99%
rename from packages/nc-gui/components/project/sequence.vue
rename to packages/nc-gui/components/project/Sequence.vue
index 1c39e70619..bcc290a0fe 100644
--- a/packages/nc-gui/components/project/sequence.vue
+++ b/packages/nc-gui/components/project/Sequence.vue
@@ -148,7 +148,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 
-import dlgLabelSubmitCancel from '../utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from '../utils/DlgLabelSubmitCancel'
 
 export default {
   components: { dlgLabelSubmitCancel },
diff --git a/packages/nc-gui/components/project/sqlClient.vue b/packages/nc-gui/components/project/SqlClient.vue
similarity index 99%
rename from packages/nc-gui/components/project/sqlClient.vue
rename to packages/nc-gui/components/project/SqlClient.vue
index 08566c103c..c7c2c09476 100644
--- a/packages/nc-gui/components/project/sqlClient.vue
+++ b/packages/nc-gui/components/project/SqlClient.vue
@@ -324,7 +324,7 @@ import { mapGetters } from 'vuex'
 import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
 import { Splitpanes, Pane } from 'splitpanes'
 import sqlRightClickOptions from '../../helpers/sqlRightClickOptions'
-import dlgLabelSubmitCancel from '../utils/dlgLabelSubmitCancel.vue'
+import dlgLabelSubmitCancel from '../utils/DlgLabelSubmitCancel.vue'
 
 import Utils from '../../helpers/Utils'
 
diff --git a/packages/nc-gui/components/project/sqlLogAndOutput.vue b/packages/nc-gui/components/project/SqlLogAndOutput.vue
similarity index 76%
rename from packages/nc-gui/components/project/sqlLogAndOutput.vue
rename to packages/nc-gui/components/project/SqlLogAndOutput.vue
index 511ae0afd4..d142628a21 100644
--- a/packages/nc-gui/components/project/sqlLogAndOutput.vue
+++ b/packages/nc-gui/components/project/SqlLogAndOutput.vue
@@ -4,14 +4,14 @@
       <slot />
     </pane>
 
-    <pane v-if="$store.state.windows.outputWindow && !hide" :size="50" min-size="10" style="overflow: auto">
+    <pane v-if="$store.state.settings.outputWindow && !hide" :size="50" min-size="10" style="overflow: auto">
       <ProjectOutput />
     </pane>
-    <!--    <pane v-if="$store.state.windows.logWindow && !$store.state.windows.outputWindow && !hide" :size="10" min-size="10"-->
+    <!--    <pane v-if="$store.state.settings.logWindow && !$store.state.settings.outputWindow && !hide" :size="10" min-size="10"-->
     <!--          style="overflow: auto">-->
     <!--      <ProjectLogs/>-->
     <!--    </pane>-->
-    <!--    <pane v-if="$store.state.windows.logWindow && $store.state.windows.outputWindow && !hide" :size="10" min-size="10"-->
+    <!--    <pane v-if="$store.state.settings.logWindow && $store.state.settings.outputWindow && !hide" :size="10" min-size="10"-->
     <!--          style="overflow: auto">-->
     <!--      <ProjectLogs/>-->
     <!--    </pane>-->
@@ -23,7 +23,7 @@
 import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 // import ProjectLogs from '~/components/projectLogs'
-import ProjectOutput from '~/components/projectOutput'
+import ProjectOutput from '~/components/ProjectOutput'
 
 export default {
   name: 'SqlLogAndOutput',
@@ -42,13 +42,13 @@ export default {
     }
   },
   created() {
-    if (!this.$store.state.windows.outputWindow && !this.$store.state.windows.logWindow) {
+    if (!this.$store.state.settings.outputWindow && !this.$store.state.settings.logWindow) {
       this.$nextTick(() => {
         this.mainPanelSize = 100
       })
     }
     this.$store.watch(
-      state => !state.windows.outputWindow && !state.windows.logWindow,
+      state => !state.settings.outputWindow && !state.settings.logWindow,
       (newState) => {
         if (newState) {
           this.$nextTick(() => {
diff --git a/packages/nc-gui/components/project/swaggerClient.vue b/packages/nc-gui/components/project/SwaggerClient.vue
similarity index 100%
rename from packages/nc-gui/components/project/swaggerClient.vue
rename to packages/nc-gui/components/project/SwaggerClient.vue
diff --git a/packages/nc-gui/components/project/table.vue b/packages/nc-gui/components/project/Table.vue
similarity index 98%
rename from packages/nc-gui/components/project/table.vue
rename to packages/nc-gui/components/project/Table.vue
index 54cdd5ab40..62b7f88e22 100644
--- a/packages/nc-gui/components/project/table.vue
+++ b/packages/nc-gui/components/project/Table.vue
@@ -52,9 +52,9 @@
 <script>
 import { mapActions } from 'vuex'
 import { UITypes } from 'nocodb-sdk'
-import dlgLabelSubmitCancel from '../utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from '../utils/DlgLabelSubmitCancel'
 import { isMetaTable } from '@/helpers/xutils'
-import RowsXcDataTable from '@/components/project/spreadsheet/rowsXcDataTable'
+import RowsXcDataTable from '~/components/project/spreadsheet/RowsXcDataTable'
 
 export default {
   components: {
diff --git a/packages/nc-gui/components/project/xcInfo.vue b/packages/nc-gui/components/project/XcInfo.vue
similarity index 100%
rename from packages/nc-gui/components/project/xcInfo.vue
rename to packages/nc-gui/components/project/XcInfo.vue
diff --git a/packages/nc-gui/components/project/appStore/appInstall.vue b/packages/nc-gui/components/project/appStore/AppInstall.vue
similarity index 100%
rename from packages/nc-gui/components/project/appStore/appInstall.vue
rename to packages/nc-gui/components/project/appStore/AppInstall.vue
diff --git a/packages/nc-gui/components/project/appStore/FormInput.vue b/packages/nc-gui/components/project/appStore/FormInput.vue
index be7cdf2216..32d9ab77ec 100644
--- a/packages/nc-gui/components/project/appStore/FormInput.vue
+++ b/packages/nc-gui/components/project/appStore/FormInput.vue
@@ -23,11 +23,11 @@
 </template>
 
 <script>
-import TextField from '@/components/project/appStore/inputs/textField'
-import Attachment from '@/components/project/appStore/inputs/attachment'
-import PasswordField from '@/components/project/appStore/inputs/passwordField'
-import TextAreaCell from '@/components/project/spreadsheet/components/editableCell/textAreaCell'
-import CheckboxField from '@/components/project/appStore/inputs/checkboxField'
+import TextField from '~/components/project/appStore/inputs/TextField'
+import Attachment from '~/components/project/appStore/inputs/Attachment'
+import PasswordField from '~/components/project/appStore/inputs/PasswordField'
+import TextAreaCell from '~/components/project/spreadsheet/components/editableCell/TextAreaCell'
+import CheckboxField from '~/components/project/appStore/inputs/CheckboxField'
 
 export default {
   name: 'FormInput',
diff --git a/packages/nc-gui/components/project/appStore/inputs/attachment.vue b/packages/nc-gui/components/project/appStore/inputs/Attachment.vue
similarity index 100%
rename from packages/nc-gui/components/project/appStore/inputs/attachment.vue
rename to packages/nc-gui/components/project/appStore/inputs/Attachment.vue
diff --git a/packages/nc-gui/components/project/appStore/inputs/checkboxField.vue b/packages/nc-gui/components/project/appStore/inputs/CheckboxField.vue
similarity index 100%
rename from packages/nc-gui/components/project/appStore/inputs/checkboxField.vue
rename to packages/nc-gui/components/project/appStore/inputs/CheckboxField.vue
diff --git a/packages/nc-gui/components/project/appStore/inputs/longTextField.vue b/packages/nc-gui/components/project/appStore/inputs/LongTextField.vue
similarity index 100%
rename from packages/nc-gui/components/project/appStore/inputs/longTextField.vue
rename to packages/nc-gui/components/project/appStore/inputs/LongTextField.vue
diff --git a/packages/nc-gui/components/project/appStore/inputs/passwordField.vue b/packages/nc-gui/components/project/appStore/inputs/PasswordField.vue
similarity index 100%
rename from packages/nc-gui/components/project/appStore/inputs/passwordField.vue
rename to packages/nc-gui/components/project/appStore/inputs/PasswordField.vue
diff --git a/packages/nc-gui/components/project/appStore/inputs/textField.vue b/packages/nc-gui/components/project/appStore/inputs/TextField.vue
similarity index 100%
rename from packages/nc-gui/components/project/appStore/inputs/textField.vue
rename to packages/nc-gui/components/project/appStore/inputs/TextField.vue
diff --git a/packages/nc-gui/components/project/appStoreOld.vue b/packages/nc-gui/components/project/appStoreOld.vue
deleted file mode 100644
index 0f94a8e8ed..0000000000
--- a/packages/nc-gui/components/project/appStoreOld.vue
+++ /dev/null
@@ -1,404 +0,0 @@
-<template>
-  <div class="d-flex h-100">
-    <v-navigation-drawer width="300" class="pa-1">
-      <v-text-field
-        v-model="query"
-        outlined
-        dense
-        hide-details
-        placeholder="Search apps"
-        append-icon="mdi-magnify"
-      />
-
-      <v-list dense>
-        <v-list-item v-for="filter of filters" :key="filter">
-          <v-checkbox
-            v-model="selectedTags"
-            class="pt-0 mt-0"
-            :value="filter"
-            hide-details
-            dense
-            :label="filter"
-          />
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-container class="h-100 app-container">
-      <v-row>
-        <v-col v-for="(app,i) in filteredApps" :key="i" cols="6">
-          <v-card
-            class="elevation-0 app-item-card"
-          >
-            <v-btn x-small outlined class="install-btn caption text-capitalize" @click="installApp">
-              <v-icon x-small class="mr-1">
-                mdi-plus
-              </v-icon>
-              Install
-            </v-btn>
-
-            <div class="d-flex flex-no-wrap">
-              <v-avatar
-                class="ma-3"
-                size="100"
-                tile
-              >
-                <v-img v-if="app.img" :src="app.img" contain />
-                <v-img v-else src="https://cdn.vuetifyjs.com/images/cards/foster.jpg" contain />
-              </v-avatar>
-              <div class="flex-grow-1">
-                <v-card-title
-                  class="title "
-                  v-text="app.name"
-                />
-
-                <v-card-subtitle class="pb-1" v-text="app.description" />
-                <v-card-actions>
-                  <div class="d-flex justify-space-between d-100 align-center">
-                    <v-rating
-                      full-icon="mdi-star"
-                      readonly
-                      length="5"
-                      size="15"
-                      value="5"
-                    />
-
-                    <span v-if="app.price && app.price !== 'Free'" class="subtitles">${{ app.price }} / mo</span>
-                    <span v-else class="subtitles">Free</span>
-                  </div>
-                </v-card-actions>
-
-                <!--                <v-card-actions>-->
-                <!--                  <v-btn-->
-                <!--                    outlined-->
-                <!--                    rounded-->
-                <!--                    small-->
-                <!--                  >-->
-                <!--                    Download-->
-                <!--                  </v-btn>-->
-                <!--                </v-card-actions>-->
-              </div>
-            </div>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AppStore',
-  data: () => ({
-    query: '',
-    selectedTags: [],
-    apps: [
-      //   {
-      //   name: 'Graph',
-      //   description: 'Visualize your records on a bar, line, pie, or scatter chart',
-      //   price: '29',
-      //   tags: []
-      // }, {
-      //   name: 'Import / Export',
-      //   description: 'Visualize your records on a bar, line, pie, or scatter chart',
-      //   price: '39'
-      // }, {
-      //   name: 'Chart',
-      //   description: 'Visualize your records on a bar, line, pie, or scatter chart',
-      //   price: '19'
-      // },
-      {
-        name: 'Freshworks',
-        img: require('~/assets/img/abcd/freshworks.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      },
-      {
-        name: 'RazorPay',
-        img: require('~/assets/img/abcd/razorpay.svg'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      },
-      {
-        name: 'Google Ads',
-        img: require('~/assets/img/abcd/adsense.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      },
-      {
-        name: 'Facebook Ads',
-        img: require('~/assets/img/abcd/fbads.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      },
-      {
-        name: 'Stripe',
-        img: require('~/assets/img/abcd/320.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      }, {
-        name: 'Twilio',
-        img: require('~/assets/img/abcd/twilio.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      }, {
-        name: 'SendGrid',
-        img: require('~/assets/img/abcd/sendgrid.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      }, {
-        name: 'Basecamp',
-        img: require('~/assets/img/abcd/basecamp.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      }, {
-        name: 'Github',
-        img: require('~/assets/img/abcd/github.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19',
-        tags: ['SaaS']
-      }, {
-        name: 'Shopify',
-        img: require('~/assets/img/abcd/shopify.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '19'
-      }, {
-        name: 'SAP',
-        img: require('~/assets/img/abcd/sap.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '49',
-        tags: ['ERP']
-      }, {
-        name: 'SalesForce',
-        img: require('~/assets/img/abcd/salesforce.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99',
-        tags: ['ERP']
-      }, {
-        name: 'NetSuite',
-        img: require('~/assets/img/abcd/netsuit.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99'
-      }, {
-        name: 'Zoho CRM',
-        img: require('~/assets/img/abcd/zohocrm.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99',
-        tags: ['ERP']
-      }, {
-        name: 'MySQL',
-        img: require('~/assets/img/abcd/mysql.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'Databases']
-      }, {
-        name: 'PostgreSQL',
-        img: require('~/assets/img/abcd/pg.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'Databases']
-      }, {
-        name: 'SQL Server',
-        img: require('~/assets/img/abcd/mssql.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'Databases']
-      }, {
-        name: 'MariaDB',
-        img: require('~/assets/img/abcd/mariaDB.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'Databases']
-      }, {
-        name: 'SQLite',
-        img: require('~/assets/img/temp/db/sqlite.svg'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'Databases']
-      }, {
-        name: 'Oracle DB',
-        img: require('~/assets/img/temp/db/oracle.png.jpg'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'Databases']
-      }, {
-        name: 'CrateDB',
-        img: require('~/assets/img/abcd/cratedb.jpg'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99',
-        tags: ['Databases']
-      }, {
-        name: 'Cassandra',
-        img: require('~/assets/img/abcd/cassandra.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99',
-        tags: ['Databases']
-      }, {
-        name: 'CouchDB',
-        img: require('~/assets/img/abcd/couchdb.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99',
-        tags: ['Databases']
-      }, {
-        name: 'ElasticSearch',
-        img: require('~/assets/img/abcd/elasticsearch.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99',
-        tags: ['Databases']
-      }, {
-        name: 'Snowflake',
-        img: require('~/assets/img/abcd/snowflake.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99',
-        tags: ['Databases']
-      }, {
-        name: 'MongoDB',
-        img: require('~/assets/img/abcd/mongodb.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99'
-      }, {
-        name: 'BigQuery',
-        img: require('~/assets/img/abcd/bigquery.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: '99'
-      },
-
-      {
-        name: 'REST API',
-        img: require('~/assets/img/abcd/rest.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'API']
-      }, {
-        name: 'GRAPHQL API',
-        img: require('~/assets/img/abcd/graphql.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'API']
-      }, {
-        name: 'gRPC API',
-        img: require('~/assets/img/abcd/grpc.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'API']
-      },
-
-      {
-        name: 'Swagger',
-        img: require('~/assets/img/abcd/swagger.png'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['Free', 'API Specification']
-      },
-      {
-        name: 'Postman',
-        img: require('~/assets/img/abcd/postman.jpg'),
-        description: 'Visualize your records on a bar, line, pie, or scatter chart',
-        price: 'Free',
-        tags: ['API Specification']
-      }
-
-    ]
-  }),
-  computed: {
-    filters() {
-      return this.apps.reduce((arr, app) => arr.concat(app.tags || []), []).filter((f, i, arr) => i === arr.indexOf(f)).sort()
-    },
-    filteredApps() {
-      return this.apps.filter(app => (!this.query.trim() || app.name.toLowerCase().includes(this.query.trim().toLowerCase())) &&
-        (!this.selectedTags.length || this.selectedTags.some(t => app.tags && app.tags.includes(t)))
-      )
-    }
-  },
-  methods: {
-    installApp() {
-      this.$toast.info('Coming soon after seed funding.').goAway(5000)
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.title {
-  color: var(--v-textColor-ligten2) !important;
-}
-
-.app-item-card {
-  transition: .4s background-color;
-  position: relative;
-  overflow-x: hidden;
-
-  .install-btn {
-    position: absolute;
-    opacity: 0;
-    right: -100%;
-    top: 10px;
-    transition: .4s opacity, .4s right;
-  }
-
-  &:hover .install-btn {
-    right: 10px;
-    opacity: 1;
-  }
-}
-
-.app-item-card {
-  transition: .4s background-color, .4s transform;
-  &:hover {
-    background: rgba(123, 126, 136, 0.1) !important;
-    transform: scale(1.01);
-  }
-}
-  ::v-deep {
-    .v-rating {
-      margin-left:6px;
-      .v-icon {
-        padding-right: 2px;
-        padding-left: 2px;
-      }
-    }
-    .v-input__control .v-input__slot .v-input--selection-controls__input {
-      transform: scale(.75);
-    }
-
-    .v-input--selection-controls .v-input__slot > .v-label{
-      font-size: .8rem;
-    }
-  }
-  .app-container {
-    height: 100%;
-    overflow-y: auto;
-  }
-
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.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/nc-gui/components/project/auditTab/audit.vue b/packages/nc-gui/components/project/auditTab/Audit.vue
similarity index 91%
rename from packages/nc-gui/components/project/auditTab/audit.vue
rename to packages/nc-gui/components/project/auditTab/Audit.vue
index f7bc5736a0..339e099dc3 100644
--- a/packages/nc-gui/components/project/auditTab/audit.vue
+++ b/packages/nc-gui/components/project/auditTab/Audit.vue
@@ -54,7 +54,7 @@
               {{ audit.description }}
             </td>
             <td class="caption">
-              {{ audit.user == null?'Shared base':audit.user }}
+              {{ audit.user == null ? 'Shared base' : audit.user }}
             </td>
             <!--          <td class="caption">-->
             <!--            {{ audit.ip }}-->
@@ -81,12 +81,7 @@
 </template>
 
 <script>
-import dayjs from 'dayjs'
-
-const relativeTime = require('dayjs/plugin/relativeTime')
-const utc = require('dayjs/plugin/utc')
-dayjs.extend(utc)
-dayjs.extend(relativeTime)
+import { calculateDiff } from '~/helpers'
 
 export default {
   name: 'Audit',
@@ -116,9 +111,7 @@ export default {
       this.audits = list
       this.count = pageInfo.totalRows
     },
-    calculateDiff(date) {
-      return dayjs.utc(date).fromNow()
-    }
+    calculateDiff
   }
 }
 </script>
diff --git a/packages/nc-gui/components/project/auditTab/auditCE.vue b/packages/nc-gui/components/project/auditTab/AuditCE.vue
similarity index 100%
rename from packages/nc-gui/components/project/auditTab/auditCE.vue
rename to packages/nc-gui/components/project/auditTab/AuditCE.vue
diff --git a/packages/nc-gui/components/project/auditTab/db.vue b/packages/nc-gui/components/project/auditTab/Db.vue
similarity index 100%
rename from packages/nc-gui/components/project/auditTab/db.vue
rename to packages/nc-gui/components/project/auditTab/Db.vue
diff --git a/packages/nc-gui/components/project/dlgs/dlgAddRelation.vue b/packages/nc-gui/components/project/dlgs/DlgAddRelation.vue
similarity index 100%
rename from packages/nc-gui/components/project/dlgs/dlgAddRelation.vue
rename to packages/nc-gui/components/project/dlgs/DlgAddRelation.vue
diff --git a/packages/nc-gui/components/project/dlgs/dlgTriggerAddEdit.vue b/packages/nc-gui/components/project/dlgs/DlgTriggerAddEdit.vue
similarity index 100%
rename from packages/nc-gui/components/project/dlgs/dlgTriggerAddEdit.vue
rename to packages/nc-gui/components/project/dlgs/DlgTriggerAddEdit.vue
diff --git a/packages/nc-gui/components/project/functionTab/functionAcl.vue b/packages/nc-gui/components/project/functionTab/FunctionAcl.vue
similarity index 100%
rename from packages/nc-gui/components/project/functionTab/functionAcl.vue
rename to packages/nc-gui/components/project/functionTab/FunctionAcl.vue
diff --git a/packages/nc-gui/components/project/functionTab/functionQuery.vue b/packages/nc-gui/components/project/functionTab/FunctionQuery.vue
similarity index 99%
rename from packages/nc-gui/components/project/functionTab/functionQuery.vue
rename to packages/nc-gui/components/project/functionTab/FunctionQuery.vue
index 3a43b6e286..84538e528b 100644
--- a/packages/nc-gui/components/project/functionTab/functionQuery.vue
+++ b/packages/nc-gui/components/project/functionTab/FunctionQuery.vue
@@ -75,7 +75,7 @@ import { mapGetters, mapActions } from 'vuex'
 
 import { SqlUiFactory } from 'nocodb-sdk'
 import MonacoEditor from '../../monaco/Monaco'
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel'
 
 export default {
   components: { MonacoEditor, dlgLabelSubmitCancel },
diff --git a/packages/nc-gui/components/project/procedureTab/procedureAcl.vue b/packages/nc-gui/components/project/procedureTab/ProcedureAcl.vue
similarity index 100%
rename from packages/nc-gui/components/project/procedureTab/procedureAcl.vue
rename to packages/nc-gui/components/project/procedureTab/ProcedureAcl.vue
diff --git a/packages/nc-gui/components/project/procedureTab/procedureQuery.vue b/packages/nc-gui/components/project/procedureTab/ProcedureQuery.vue
similarity index 99%
rename from packages/nc-gui/components/project/procedureTab/procedureQuery.vue
rename to packages/nc-gui/components/project/procedureTab/ProcedureQuery.vue
index f8b3a819ab..967d12550c 100644
--- a/packages/nc-gui/components/project/procedureTab/procedureQuery.vue
+++ b/packages/nc-gui/components/project/procedureTab/ProcedureQuery.vue
@@ -71,7 +71,7 @@
 import { mapGetters, mapActions } from 'vuex'
 
 import MonacoEditor from '../../monaco/Monaco'
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel'
 
 export default {
   components: { MonacoEditor, dlgLabelSubmitCancel },
diff --git a/packages/nc-gui/components/project/projectMetadata/disableOrEnableModels.vue b/packages/nc-gui/components/project/projectMetadata/DisableOrEnableModels.vue
similarity index 88%
rename from packages/nc-gui/components/project/projectMetadata/disableOrEnableModels.vue
rename to packages/nc-gui/components/project/projectMetadata/DisableOrEnableModels.vue
index 400e6e3159..1ffa987346 100644
--- a/packages/nc-gui/components/project/projectMetadata/disableOrEnableModels.vue
+++ b/packages/nc-gui/components/project/projectMetadata/DisableOrEnableModels.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <v-tabs v-model="dbsTab" color="x-active" height="30">
-<!--      <v-tab href="#xc-project-meta">-->
-<!--        <v-icon icon x-small class="mr-2">-->
-<!--          mdi-file-table-box-multiple-outline-->
-<!--        </v-icon>-->
-<!--        <span class="caption text-capitalize nc-exp-imp-metadata">-->
-<!--          &lt;!&ndash; Export/Import Metadata &ndash;&gt;-->
-<!--          {{ $t('title.exportImportMeta') }}-->
-<!--        </span>-->
-<!--      </v-tab>-->
+      <!--      <v-tab href="#xc-project-meta">-->
+      <!--        <v-icon icon x-small class="mr-2">-->
+      <!--          mdi-file-table-box-multiple-outline-->
+      <!--        </v-icon>-->
+      <!--        <span class="caption text-capitalize nc-exp-imp-metadata">-->
+      <!--          &lt;!&ndash; Export/Import Metadata &ndash;&gt;-->
+      <!--          {{ $t('title.exportImportMeta') }}-->
+      <!--        </span>-->
+      <!--      </v-tab>-->
       <v-tab-item value="xc-project-meta">
         <div class="d-flex justify-center d-100">
           <xc-meta />
@@ -57,10 +57,10 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import XcMeta from '../settings/xcMeta'
+import XcMeta from '../settings/XcMeta'
 import { isMetaTable } from '@/helpers/xutils'
-import metaDiffSync from '~/components/project/projectMetadata/sync/metaDiffSync'
-import ToggleTableUiAcl from '@/components/project/projectMetadata/uiAcl/toggleTableUIAcl'
+import metaDiffSync from '~/components/project/projectMetadata/sync/MetaDiffSync'
+import ToggleTableUiAcl from '~/components/project/projectMetadata/uiAcl/ToggleTableUIAcl'
 
 export default {
   name: 'DisableOrEnableModels',
diff --git a/packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableFunctions.vue b/packages/nc-gui/components/project/projectMetadata/sync/DisableOrEnableFunctions.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableFunctions.vue
rename to packages/nc-gui/components/project/projectMetadata/sync/DisableOrEnableFunctions.vue
diff --git a/packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableProcedures.vue b/packages/nc-gui/components/project/projectMetadata/sync/DisableOrEnableProcedures.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableProcedures.vue
rename to packages/nc-gui/components/project/projectMetadata/sync/DisableOrEnableProcedures.vue
diff --git a/packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableRelations.vue b/packages/nc-gui/components/project/projectMetadata/sync/DisableOrEnableRelations.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableRelations.vue
rename to packages/nc-gui/components/project/projectMetadata/sync/DisableOrEnableRelations.vue
diff --git a/packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableViews.vue b/packages/nc-gui/components/project/projectMetadata/sync/DisableOrEnableViews.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableViews.vue
rename to packages/nc-gui/components/project/projectMetadata/sync/DisableOrEnableViews.vue
diff --git a/packages/nc-gui/components/project/projectMetadata/sync/metaDiffSync.vue b/packages/nc-gui/components/project/projectMetadata/sync/MetaDiffSync.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/sync/metaDiffSync.vue
rename to packages/nc-gui/components/project/projectMetadata/sync/MetaDiffSync.vue
diff --git a/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleFunctionUIAcl.vue b/packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleFunctionUIAcl.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/uiAcl/toggleFunctionUIAcl.vue
rename to packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleFunctionUIAcl.vue
diff --git a/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleProcedureUIAcl.vue b/packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleProcedureUIAcl.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/uiAcl/toggleProcedureUIAcl.vue
rename to packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleProcedureUIAcl.vue
diff --git a/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleRelationsUIAcl.vue b/packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleRelationsUIAcl.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/uiAcl/toggleRelationsUIAcl.vue
rename to packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleRelationsUIAcl.vue
diff --git a/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue b/packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleTableUIAcl.vue
similarity index 82%
rename from packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue
rename to packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleTableUIAcl.vue
index 6283565108..59cc680ea2 100644
--- a/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue
+++ b/packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleTableUIAcl.vue
@@ -14,7 +14,9 @@
             outlined
           >
             <template #prepend-inner>
-              <v-icon small> search </v-icon>
+              <v-icon small>
+                search
+              </v-icon>
             </template>
           </v-text-field>
           <v-spacer />
@@ -83,8 +85,8 @@
                           table.ptype === "table"
                             ? table._ptn
                             : table.ptype === "view"
-                            ? table._ptn
-                            : table._ptn
+                              ? table._ptn
+                              : table._ptn
                         }}</span>
                       </template>
                       <span class="caption">{{ table.ptn || table._ptn }}</span>
@@ -127,16 +129,12 @@
                         </div>
                       </template>
 
-                      <span v-if="table.disabled[role]"
-                        >Click to make '{{ table.table_name }}' visible for
-                        Role:{{ role }} in UI dashboard</span
-                      >
-                      <span v-else
-                        >Click to hide '{{ table.table_name }}' for Role:{{
-                          role
-                        }}
-                        in UI dashboard</span
-                      >
+                      <span v-if="table.disabled[role]">Click to make '{{ table.table_name }}' visible for
+                        Role:{{ role }} in UI dashboard</span>
+                      <span v-else>Click to hide '{{ table.table_name }}' for Role:{{
+                        role
+                      }}
+                        in UI dashboard</span>
                     </v-tooltip>
                   </td>
                 </tr>
@@ -151,32 +149,32 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import viewIcons from "~/helpers/viewIcons";
+import { mapGetters } from 'vuex'
+import viewIcons from '~/helpers/viewIcons'
 
 export default {
-  name: "ToggleTableUiAcl",
+  name: 'ToggleTableUiAcl',
   components: {},
-  props: ["nodes", "db"],
+  props: ['nodes', 'db'],
   data: () => ({
     viewIcons,
     models: null,
     updating: false,
     dbsTab: 0,
-    filter: "",
-    tables: null,
+    filter: '',
+    tables: null
   }),
   async mounted() {
-    await this.loadTableList();
+    await this.loadTableList()
   },
   methods: {
     async loadTableList() {
       this.tables = await this.$api.project.modelVisibilityList(
         this.db.project_id,
         {
-          includeM2M: this.$store.state.windows.includeM2M || "",
+          includeM2M: this.$store.state.settings.includeM2M || ''
         }
-      );
+      )
       // this.tables = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
       //   dbAlias: this.db.meta.dbAlias,
       //   env: this.$store.getters['project/GtrEnv']
@@ -188,32 +186,32 @@ export default {
       try {
         await this.$api.project.modelVisibilitySet(
           this.db.project_id,
-          this.tables.filter((t) => t.edited)
-        );
+          this.tables.filter(t => t.edited)
+        )
         this.$toast
-          .success("Updated UI ACL for tables successfully")
-          .goAway(3000);
+          .success('Updated UI ACL for tables successfully')
+          .goAway(3000)
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000);
+        this.$toast.error(e.message).goAway(3000)
       }
 
-      this.$e("a:proj-meta:ui-acl");
-    },
+      this.$e('a:proj-meta:ui-acl')
+    }
   },
   computed: {
     ...mapGetters({
-      dbAliasList: "project/GtrDbAliasList",
+      dbAliasList: 'project/GtrDbAliasList'
     }),
     edited() {
       return (
-        this.tables && this.tables.length && this.tables.some((t) => t.edited)
-      );
+        this.tables && this.tables.length && this.tables.some(t => t.edited)
+      )
     },
     roles() {
-      return ["editor", "commenter", "viewer"]; // this.tables && this.tables.length ? Object.keys(this.tables[0].disabled) : []
-    },
-  },
-};
+      return ['editor', 'commenter', 'viewer'] // this.tables && this.tables.length ? Object.keys(this.tables[0].disabled) : []
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleViewUIAcl.vue b/packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleViewUIAcl.vue
similarity index 100%
rename from packages/nc-gui/components/project/projectMetadata/uiAcl/toggleViewUIAcl.vue
rename to packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleViewUIAcl.vue
diff --git a/packages/nc-gui/components/project/settings/appearance.vue b/packages/nc-gui/components/project/settings/Appearance.vue
similarity index 90%
rename from packages/nc-gui/components/project/settings/appearance.vue
rename to packages/nc-gui/components/project/settings/Appearance.vue
index 7608f319ad..ae2cb195c0 100644
--- a/packages/nc-gui/components/project/settings/appearance.vue
+++ b/packages/nc-gui/components/project/settings/Appearance.vue
@@ -146,8 +146,6 @@
               </v-tooltip>
             </td>
           </tr>
-
-
         </tbody>
       </template>
     </v-simple-table>
@@ -208,47 +206,47 @@ export default {
   computed: {
     language: {
       get() {
-        return this.$store.state.windows.language
+        return this.$store.state.settings.language
       },
       set(val) {
-        this.$store.commit('windows/MutLanguage', val)
+        this.$store.commit('settings/MutLanguage', val)
       }
     },
     showMetatable: {
       get() {
-        return this.$store.state.windows.metatables
+        return this.$store.state.settings.metatables
       },
       set(show) {
-        this.$store.commit('windows/MutMetatables', show)
+        this.$store.commit('settings/MutMetatables', show)
       }
     },
     showScreensaver: {
       get() {
-        return this.$store.state.windows.screensaver
+        return this.$store.state.settings.screensaver
       },
       set(show) {
-        this.$store.commit('windows/MutScreensaver', show)
+        this.$store.commit('settings/MutScreensaver', show)
       }
     },
     includeM2M: {
       get() {
-        return this.$store.state.windows.includeM2M
+        return this.$store.state.settings.includeM2M
       },
       set(show) {
-        this.$store.commit('windows/MutIncludeM2M', show)
+        this.$store.commit('settings/MutIncludeM2M', show)
       }
     }
   },
   created() {
-    this.customTheme = { ...this.customTheme, ...this.$store.state.windows.customTheme }
-    this.item = this.$store.state.windows.themeName
+    this.customTheme = { ...this.customTheme, ...this.$store.state.settings.customTheme }
+    this.item = this.$store.state.settings.themeName
     this.$store.watch(
-      state => state.windows.customTheme,
+      state => state.settings.customTheme,
       (theme) => {
         this.customTheme = { ...this.customTheme, ...theme }
       })
 
-    this.$store.watch(state => state.windows.themeName,
+    this.$store.watch(state => state.settings.themeName,
       (theme) => {
         this.$nextTick(() => {
           if (this.item !== theme) { this.item = theme }
@@ -265,12 +263,12 @@ export default {
     },
     async changeTheme(t, theme = 'Custom') {
       this.item = theme
-      if (theme === 'Custom') { await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, custom: true }) }
-      await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, themeName: theme })
+      if (theme === 'Custom') { await this.$store.dispatch('settings/ActSetTheme', { theme: { ...t }, custom: true }) }
+      await this.$store.dispatch('settings/ActSetTheme', { theme: { ...t }, themeName: theme })
       this.$e('c:themes:change', { mode: theme })
     },
     toggleDarkTheme(mode) {
-      this.$store.commit('windows/MutToggleDarkMode')
+      this.$store.commit('settings/MutToggleDarkMode')
       this.$e('c:themes:dark-mode', { dark: mode })
     }
   },
diff --git a/packages/nc-gui/components/project/settings/env.vue b/packages/nc-gui/components/project/settings/Env.vue
similarity index 97%
rename from packages/nc-gui/components/project/settings/env.vue
rename to packages/nc-gui/components/project/settings/Env.vue
index b983ae02ec..d0179f670d 100644
--- a/packages/nc-gui/components/project/settings/env.vue
+++ b/packages/nc-gui/components/project/settings/Env.vue
@@ -81,7 +81,7 @@ export default {
       await this.$store.dispatch('users/ActSignOut')
 
       await this.$store.dispatch('project/ActLoadProjectInfo')
-      if (this.$store.state.project.projectInfo.projectHasAdmin === false) {
+      if (this.$store.state.project.appInfo.projectHasAdmin === false) {
         return this.$router.push('/start')
       }
       location.reload()
diff --git a/packages/nc-gui/components/project/settings/importTemplate.vue b/packages/nc-gui/components/project/settings/ImportTemplate.vue
similarity index 95%
rename from packages/nc-gui/components/project/settings/importTemplate.vue
rename to packages/nc-gui/components/project/settings/ImportTemplate.vue
index 46f8f9fd05..0a4b2ea68e 100644
--- a/packages/nc-gui/components/project/settings/importTemplate.vue
+++ b/packages/nc-gui/components/project/settings/ImportTemplate.vue
@@ -3,7 +3,7 @@
   <v-card>
     <v-textarea v-model="template" />
 
-    <v-btn @click="importTemplate">
+    <v-btn @click="ImportTemplate">
       import
     </v-btn>
   </v-card>
diff --git a/packages/nc-gui/components/project/settings/logs.vue b/packages/nc-gui/components/project/settings/Logs.vue
similarity index 100%
rename from packages/nc-gui/components/project/settings/logs.vue
rename to packages/nc-gui/components/project/settings/Logs.vue
diff --git a/packages/nc-gui/components/project/settings/versionAndUpdate.vue b/packages/nc-gui/components/project/settings/VersionAndUpdate.vue
similarity index 85%
rename from packages/nc-gui/components/project/settings/versionAndUpdate.vue
rename to packages/nc-gui/components/project/settings/VersionAndUpdate.vue
index 49517883fd..f37630153d 100644
--- a/packages/nc-gui/components/project/settings/versionAndUpdate.vue
+++ b/packages/nc-gui/components/project/settings/VersionAndUpdate.vue
@@ -12,7 +12,7 @@
               Version
             </td>
             <td>
-              <span @contextmenu="rightClick">{{ $store.state.windows.version }}</span>
+              <span @contextmenu="rightClick">{{ $store.state.settings.version }}</span>
             </td>
           </tr>
           <!--                <tr>-->
@@ -72,7 +72,7 @@
 </template>
 <script>
 
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel'
 
 export default {
   components: { dlgLabelSubmitCancel },
@@ -95,42 +95,42 @@ export default {
   computed: {
     checkForUpdate: {
       get() {
-        return this.$store.state.windows.checkForUpdate
+        return this.$store.state.settings.checkForUpdate
       },
       set(value) {
-        this.$store.commit('windows/MutCheckForUpdate', value)
+        this.$store.commit('settings/MutCheckForUpdate', value)
       }
     },
     autoUpdate: {
       get() {
-        return this.$store.state.windows.downloadAndUpdateRelease
+        return this.$store.state.settings.downloadAndUpdateRelease
       },
       set(value) {
-        this.$store.commit('windows/MutDownloadAndUpdateRelease', value)
+        this.$store.commit('settings/MutDownloadAndUpdateRelease', value)
       }
     },
     isGaEnabled: {
       get() {
-        return this.$store.state.windows.isGaEnabled
+        return this.$store.state.settings.isGaEnabled
       },
       set(value) {
-        this.$store.commit('windows/MutToggleGaEnabled', value)
+        this.$store.commit('settings/MutToggleGaEnabled', value)
       }
     },
     isErrorReportingEnabled: {
       get() {
-        return this.$store.state.windows.isErrorReportingEnabled
+        return this.$store.state.settings.isErrorReportingEnabled
       },
       set(value) {
-        this.$store.commit('windows/MutToggleErrorReportingEnabled', value)
+        this.$store.commit('settings/MutToggleErrorReportingEnabled', value)
       }
     },
     isTelemetryEnabled: {
       get() {
-        return this.$store.state.windows.isErrorReportingEnabled
+        return this.$store.state.settings.isErrorReportingEnabled
       },
       set(value) {
-        this.$store.commit('windows/MutToggleTelemetryEnabled', value)
+        this.$store.commit('settings/MutToggleTelemetryEnabled', value)
       }
     },
     dialogShow: {
@@ -143,10 +143,10 @@ export default {
     },
     language: {
       get() {
-        return this.$store.state.windows.language
+        return this.$store.state.settings.language
       },
       set(val) {
-        this.$store.commit('windows/MutSetLanguage', val)
+        this.$store.commit('settings/MutSetLanguage', val)
       }
     }
   },
diff --git a/packages/nc-gui/components/project/settings/xcMeta.vue b/packages/nc-gui/components/project/settings/XcMeta.vue
similarity index 61%
rename from packages/nc-gui/components/project/settings/xcMeta.vue
rename to packages/nc-gui/components/project/settings/XcMeta.vue
index afe6211c40..b8c4bbb54e 100644
--- a/packages/nc-gui/components/project/settings/xcMeta.vue
+++ b/packages/nc-gui/components/project/settings/XcMeta.vue
@@ -22,7 +22,9 @@
               :loading="loading === 'export-zip'"
               @click="exportMetaZip()"
             >
-              <v-icon small> mdi-export </v-icon>&nbsp;
+              <v-icon small>
+                mdi-export
+              </v-icon>&nbsp;
               <!-- Export zip -->
               {{ $t("activity.exportZip") }}
             </v-btn>
@@ -43,7 +45,9 @@
               outlined
               @click="$refs.importFile.click()"
             >
-              <v-icon small> mdi-import </v-icon>&nbsp;
+              <v-icon small>
+                mdi-import
+              </v-icon>&nbsp;
 
               <!-- Import Zip -->
               {{ $t("activity.importZip") }}
@@ -55,7 +59,7 @@
               type="file"
               accept=".zip"
               @change="importMetaZip"
-            />
+            >
           </td>
         </tr>
         <!--        <tr>-->
@@ -98,154 +102,154 @@
 </template>
 
 <script>
-import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
+import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
 // import ImportTemplate from '~/components/project/settings/importTemplate'
 
 export default {
-  name: "XcMeta",
+  name: 'XcMeta',
   components: {
     // ImportTemplate,
-    DlgLabelSubmitCancel,
+    DlgLabelSubmitCancel
   },
   data: () => ({
     loading: null,
     dialogShow: false,
     confirmAction: null,
-    confirmMessage: "",
+    confirmMessage: ''
   }),
   methods: {
     async exportMeta() {
-      this.dialogShow = true;
+      this.dialogShow = true
       // this.confirmMessage = 'Do you want to export metadata from meta tables?'
-      this.confirmMessage = `${this.$t("msg.info.exportMetadata")}`;
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.confirmMessage = `${this.$t('msg.info.exportMetadata')}`
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.loading = "export-file";
+          this.loading = 'export-file'
           try {
             // todo: set env based on `nodes` prop
-            await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            await this.$store.dispatch('sqlMgr/ActSqlOp', [
               {
                 // dbAlias: 'db',
-                env: "_noco",
+                env: '_noco'
               },
-              "xcMetaTablesExportDbToLocalFs",
-            ]);
+              'xcMetaTablesExportDbToLocalFs'
+            ])
             // this.$toast.success('Successfully exported metadata').goAway(3000)
             this.$toast
-              .success(`${this.$t("msg.toast.exportMetadata")}`)
-              .goAway(3000);
+              .success(`${this.$t('msg.toast.exportMetadata')}`)
+              .goAway(3000)
           } catch (e) {
-            this.$toast.error(e.message).goAway(3000);
+            this.$toast.error(e.message).goAway(3000)
           }
-          this.dialogShow = false;
-          this.loading = null;
+          this.dialogShow = false
+          this.loading = null
         }
-      };
+      }
     },
     async exportMetaZip() {
-      this.dialogShow = true;
+      this.dialogShow = true
       // this.confirmMessage = 'Do you want to export metadata from meta tables?'
-      this.confirmMessage = `${this.$t("msg.info.exportMetadata")}`;
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.confirmMessage = `${this.$t('msg.info.exportMetadata')}`
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.loading = "export-zip";
-          let data;
+          this.loading = 'export-zip'
+          let data
           try {
-            data = await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            data = await this.$store.dispatch('sqlMgr/ActSqlOp', [
               {
                 // dbAlias: 'db',
-                env: "_noco",
+                env: '_noco'
               },
-              "xcMetaTablesExportDbToZip",
+              'xcMetaTablesExportDbToZip',
               null,
               null,
               {
-                responseType: "blob",
-              },
-            ]);
+                responseType: 'blob'
+              }
+            ])
             const url = window.URL.createObjectURL(
-              new Blob([data], { type: "application/zip" })
-            );
-            const link = document.createElement("a");
-            link.href = url;
-            link.setAttribute("download", "meta.zip"); // or any other extension
-            document.body.appendChild(link);
-            link.click();
+              new Blob([data], { type: 'application/zip' })
+            )
+            const link = document.createElement('a')
+            link.href = url
+            link.setAttribute('download', 'meta.zip') // or any other extension
+            document.body.appendChild(link)
+            link.click()
             // this.$toast.success('Successfully exported metadata').goAway(3000)
             this.$toast
-              .success(`${this.$t("msg.toast.exportMetadata")}`)
-              .goAway(3000);
+              .success(`${this.$t('msg.toast.exportMetadata')}`)
+              .goAway(3000)
           } catch (e) {
-            this.$toast.error(e.message).goAway(3000);
+            this.$toast.error(e.message).goAway(3000)
           }
-          this.dialogShow = false;
-          this.loading = null;
-          this.$e("a:proj-meta:export");
+          this.dialogShow = false
+          this.loading = null
+          this.$e('a:proj-meta:export')
         }
-      };
+      }
     },
     async resetMeta() {
-      this.dialogShow = true;
+      this.dialogShow = true
       // this.confirmMessage = 'Do you want to clear metadata from meta tables?'
-      this.confirmMessage = `${this.$t("msg.info.clearMetadata")}`;
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.confirmMessage = `${this.$t('msg.info.clearMetadata')}`
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.loading = "reset-metadata";
+          this.loading = 'reset-metadata'
           try {
-            await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            await this.$store.dispatch('sqlMgr/ActSqlOp', [
               {
                 // dbAlias: 'db',
-                env: "_noco",
+                env: '_noco'
               },
-              "xcMetaTablesReset",
-            ]);
+              'xcMetaTablesReset'
+            ])
             // this.$toast.success('Metadata cleared successfully').goAway(3000)
             this.$toast
-              .success(`${this.$t("msg.toast.clearMetadata")}`)
-              .goAway(3000);
+              .success(`${this.$t('msg.toast.clearMetadata')}`)
+              .goAway(3000)
           } catch (e) {
-            this.$toast.error(e.message).goAway(3000);
+            this.$toast.error(e.message).goAway(3000)
           }
-          this.dialogShow = false;
-          this.loading = null;
+          this.dialogShow = false
+          this.loading = null
         }
-      };
+      }
     },
 
     async importMeta() {
-      this.dialogShow = true;
+      this.dialogShow = true
       // this.confirmMessage = 'Do you want to import metadata from meta directory?'
-      this.confirmMessage = `${this.$t("msg.info.importMetadata")}`;
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.confirmMessage = `${this.$t('msg.info.importMetadata')}`
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.loading = "import-file";
+          this.loading = 'import-file'
           try {
-            await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            await this.$store.dispatch('sqlMgr/ActSqlOp', [
               {
-                env: "_noco",
+                env: '_noco'
               },
-              "xcMetaTablesImportLocalFsToDb",
-            ]);
+              'xcMetaTablesImportLocalFsToDb'
+            ])
 
             // this.$toast.success('Metadata imported successfully').goAway(3000)
             this.$toast
-              .success(`${this.$t("msg.toast.importMetadata")}`)
-              .goAway(3000);
+              .success(`${this.$t('msg.toast.importMetadata')}`)
+              .goAway(3000)
           } catch (e) {
-            this.$toast.error(e.message).goAway(3000);
+            this.$toast.error(e.message).goAway(3000)
           }
-          this.dialogShow = false;
-          this.loading = null;
+          this.dialogShow = false
+          this.loading = null
         }
-      };
+      }
     },
     async importMetaZip() {
       if (
@@ -253,33 +257,33 @@ export default {
         this.$refs.importFile.files &&
         this.$refs.importFile.files[0]
       ) {
-        const zipFile = this.$refs.importFile.files[0];
-        this.loading = "import-zip";
+        const zipFile = this.$refs.importFile.files[0]
+        this.loading = 'import-zip'
         try {
-          this.$refs.importFile.value = "";
-          await this.$store.dispatch("sqlMgr/ActUploadOld", [
+          this.$refs.importFile.value = ''
+          await this.$store.dispatch('sqlMgr/ActUploadOld', [
             {
-              env: "_noco",
+              env: '_noco'
             },
-            "xcMetaTablesImportZipToLocalFsAndDb",
+            'xcMetaTablesImportZipToLocalFsAndDb',
             {
-              importsToCurrentProject: true,
+              importsToCurrentProject: true
             },
-            zipFile,
-          ]);
+            zipFile
+          ])
           // this.$toast.success('Successfully imported metadata').goAway(3000)
           this.$toast
-            .success(`${this.$t("msg.toast.importMetadata")}`)
-            .goAway(3000);
+            .success(`${this.$t('msg.toast.importMetadata')}`)
+            .goAway(3000)
         } catch (e) {
-          this.$toast.error(e.message).goAway(3000);
+          this.$toast.error(e.message).goAway(3000)
         }
-        this.dialogShow = false;
-        this.loading = null;
+        this.dialogShow = false
+        this.loading = null
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
similarity index 98%
rename from packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
rename to packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
index 5faae3cfa2..4dcd1ac69b 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
@@ -728,24 +728,24 @@ import { mapActions } from 'vuex'
 import debounce from 'debounce'
 import { SqlUiFactory, ViewTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
-import FormView from './views/formView'
-import XcGridView from './views/xcGridView'
+import FormView from './views/FormView'
+import XcGridView from './views/GridView'
 import spreadsheet from './mixins/spreadsheet'
-import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
-
-import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
-import GalleryView from '@/components/project/spreadsheet/views/galleryView'
-import CalendarView from '@/components/project/spreadsheet/views/calendarView'
-import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
-import SortList from '@/components/project/spreadsheet/components/sortListMenu'
-import Fields from '@/components/project/spreadsheet/components/fieldsMenu'
-import SpreadsheetNavDrawer from '@/components/project/spreadsheet/components/spreadsheetNavDrawer'
-import LockMenu from '@/components/project/spreadsheet/components/lockMenu'
-import ExpandedForm from '@/components/project/spreadsheet/components/expandedForm'
-import Pagination from '@/components/project/spreadsheet/components/pagination'
-import ColumnFilter from '~/components/project/spreadsheet/components/columnFilterMenu'
-import MoreActions from '~/components/project/spreadsheet/components/moreActions'
-import ShareViewMenu from '~/components/project/spreadsheet/components/shareViewMenu'
+import DebugMetas from '~/components/project/spreadsheet/components/DebugMetas'
+
+import AdditionalFeatures from '~/components/project/spreadsheet/overlay/AdditinalFeatures'
+import GalleryView from '~/components/project/spreadsheet/views/GalleryView'
+import CalendarView from '~/components/project/spreadsheet/views/CalendarView'
+import KanbanView from '~/components/project/spreadsheet/views/KanbanView'
+import SortList from '~/components/project/spreadsheet/components/SortListMenu'
+import Fields from '~/components/project/spreadsheet/components/FieldsMenu'
+import SpreadsheetNavDrawer from '~/components/project/spreadsheet/components/SpreadsheetNavDrawer'
+import LockMenu from '~/components/project/spreadsheet/components/LockMenu'
+import ExpandedForm from '~/components/project/spreadsheet/components/ExpandedForm'
+import Pagination from '~/components/project/spreadsheet/components/Pagination'
+import ColumnFilter from '~/components/project/spreadsheet/components/ColumnFilterMenu'
+import MoreActions from '~/components/project/spreadsheet/components/MoreActions'
+import ShareViewMenu from '~/components/project/spreadsheet/components/ShareViewMenu'
 
 export default {
   name: 'RowsXcDataTable',
@@ -1735,8 +1735,8 @@ export default {
     },
     size() {
       return (
-        (this.$store.state.project.projectInfo &&
-          this.$store.state.project.projectInfo.defaultLimit) ||
+        (this.$store.state.project.appInfo &&
+          this.$store.state.project.appInfo.defaultLimit) ||
         25
       )
     },
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell.vue b/packages/nc-gui/components/project/spreadsheet/components/Cell.vue
similarity index 63%
rename from packages/nc-gui/components/project/spreadsheet/components/cell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/Cell.vue
index 18fc8a16cc..260e721fc4 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/Cell.vue
@@ -11,31 +11,36 @@
   <!--  <enum-list-editable-cell @click.stop="$emit('enableedit')" v-else-if="isEnum && selected" :value="value" :column="column"></enum-list-editable-cell>-->
   <enum-cell v-else-if="isEnum" :value="value" :column="column" @click.stop="$emit('enableedit')" />
   <url-cell v-else-if="isURL" :value="value" />
+  <email-cell v-else-if="isEmail" :value="value" />
   <json-cell v-else-if="isJSON" :value="value" />
   <date-cell v-else-if="isDate" :value="value" />
   <date-time-cell v-else-if="isDateTime" :value="value" />
   <time-cell v-else-if="isTime" :value="value" />
-  <boolean-cell v-else-if="isBoolean" :value="value" />
+  <boolean-cell v-else-if="isBoolean" :value="value" read-only />
+  <rating-cell v-else-if="isRating" :value="value" read-only />
+
   <span v-else :class="{'long-text-cell' : isTextArea}" :title="title">{{ value }}</span>
 </template>
 
 <script>
-import DateCell from './cell/dateCell'
-import DateTimeCell from './cell/dateTimeCell'
-import TimeCell from './cell/timeCell'
-import JsonCell from '@/components/project/spreadsheet/components/cell/jsonCell'
-import UrlCell from '@/components/project/spreadsheet/components/cell/urlCell'
+import DateCell from './cell/DateCell'
+import DateTimeCell from './cell/DateTimeCell'
+import TimeCell from './cell/TimeCell'
+import JsonCell from '~/components/project/spreadsheet/components/cell/JsonCell'
+import UrlCell from '~/components/project/spreadsheet/components/cell/UrlCell'
 import cell from '@/components/project/spreadsheet/mixins/cell'
-import SetListCell from '@/components/project/spreadsheet/components/cell/setListCell'
-import EnumCell from '@/components/project/spreadsheet/components/cell/enumCell'
-import EditableAttachmentCell from '@/components/project/spreadsheet/components/editableCell/editableAttachmentCell'
-import BooleanCell from '@/components/project/spreadsheet/components/cell/booleanCell'
+import SetListCell from '~/components/project/spreadsheet/components/cell/SetListCell'
+import EnumCell from '~/components/project/spreadsheet/components/cell/EnumCell'
+import EditableAttachmentCell from '~/components/project/spreadsheet/components/editableCell/EditableAttachmentCell'
+import BooleanCell from '~/components/project/spreadsheet/components/cell/BooleanCell'
+import EmailCell from '~/components/project/spreadsheet/components/cell/EmailCell'
+import RatingCell from '~/components/project/spreadsheet/components/editableCell/RatingCell'
 
 export default {
   name: 'TableCell',
-  components: { TimeCell, DateTimeCell, DateCell, JsonCell, UrlCell, EditableAttachmentCell, EnumCell, SetListCell, BooleanCell },
+  components: { RatingCell, EmailCell, TimeCell, DateTimeCell, DateCell, JsonCell, UrlCell, EditableAttachmentCell, EnumCell, SetListCell, BooleanCell },
   mixins: [cell],
-  props: ['value', 'dbAlias', 'isLocked', 'selected'],
+  props: ['value', 'dbAlias', 'isLocked', 'selected', 'column'],
   computed: {
     title() {
       if (typeof this.value === 'string') { return this.value }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue b/packages/nc-gui/components/project/spreadsheet/components/CodeSnippet.vue
similarity index 97%
rename from packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue
rename to packages/nc-gui/components/project/spreadsheet/components/CodeSnippet.vue
index 8ae7e7b358..1db10fad7c 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/CodeSnippet.vue
@@ -63,7 +63,7 @@
           </div>
           <custom-monaco-editor
             hide-line-num
-            :theme="$store.state.windows.darkTheme ? 'vs-dark' : 'vs-light'"
+            :theme="$store.state.settings.darkTheme ? 'vs-dark' : 'vs-light'"
             style="min-height:500px;max-width: 100%"
             :value="code"
             read-only
@@ -140,7 +140,7 @@ export default {
       }
     },
     apiUrl() {
-      return new URL(`/api/v1/db/data/noco/${this.projectId}/${this.meta.title}/views/${this.view.title}`, (this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.ncSiteUrl) || '/').href
+      return new URL(`/api/v1/db/data/noco/${this.projectId}/${this.meta.title}/views/${this.view.title}`, (this.$store.state.project.appInfo && this.$store.state.project.appInfo.ncSiteUrl) || '/').href
     },
     snippet() {
       return new HTTPSnippet({
diff --git a/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
similarity index 71%
rename from packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
rename to packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
index be2ed4beb3..3e67ebf40e 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
@@ -3,7 +3,6 @@
 
     class="backgroundColor pa-2 menu-filter-dropdown"
     :style="{width:nested ? '100%' : '530px'}"
-
   >
     <div class="grid" @click.stop>
       <template v-for="(filter, i) in filters" dense>
@@ -72,8 +71,7 @@
               v-if="!i"
               :key="i + '_2'"
               class="caption d-flex align-center"
-              >{{ $t("labels.where") }}</span
-            >
+            >{{ $t("labels.where") }}</span>
 
             <v-select
               v-else
@@ -173,7 +171,9 @@
     </div>
 
     <v-btn small class="elevation-0 grey--text my-3" @click.stop="addFilter">
-      <v-icon small color="grey"> mdi-plus </v-icon>
+      <v-icon small color="grey">
+        mdi-plus
+      </v-icon>
       <!-- Add Filter -->
       {{ $t("activity.addFilter") }}
     </v-btn>
@@ -182,10 +182,10 @@
 </template>
 
 <script>
-import { UITypes } from "~/components/project/spreadsheet/helpers/uiTypes";
+import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
-  name: "ColumnFilter",
+  name: 'ColumnFilter',
   props: {
     fieldList: [Array],
     meta: Object,
@@ -194,131 +194,131 @@ export default {
     viewId: String,
     shared: Boolean,
     webHook: Boolean,
-    hookId: String,
+    hookId: String
   },
   data: () => ({
     filters: [],
     opList: [
-      "is equal",
-      "is not equal",
-      "is like",
-      "is not like",
+      'is equal',
+      'is not equal',
+      'is like',
+      'is not like',
       // 'is empty', 'is not empty',
-      "is null",
-      "is not null",
-      ">",
-      "<",
-      ">=",
-      "<=",
+      'is null',
+      'is not null',
+      '>',
+      '<',
+      '>=',
+      '<='
     ],
     comparisonOp: [
       {
-        text: "is equal",
-        value: "eq",
+        text: 'is equal',
+        value: 'eq'
       },
       {
-        text: "is not equal",
-        value: "neq",
+        text: 'is not equal',
+        value: 'neq'
       },
       {
-        text: "is like",
-        value: "like",
+        text: 'is like',
+        value: 'like'
       },
       {
-        text: "is not like",
-        value: "nlike",
+        text: 'is not like',
+        value: 'nlike'
       },
       {
-        text: "is empty",
-        value: "empty",
-        ignoreVal: true,
+        text: 'is empty',
+        value: 'empty',
+        ignoreVal: true
       },
       {
-        text: "is not empty",
-        value: "notempty",
-        ignoreVal: true,
+        text: 'is not empty',
+        value: 'notempty',
+        ignoreVal: true
       },
       {
-        text: "is null",
-        value: "null",
-        ignoreVal: true,
+        text: 'is null',
+        value: 'null',
+        ignoreVal: true
       },
       {
-        text: "is not null",
-        value: "notnull",
-        ignoreVal: true,
+        text: 'is not null',
+        value: 'notnull',
+        ignoreVal: true
       },
       {
-        text: ">",
-        value: "gt",
+        text: '>',
+        value: 'gt'
       },
       {
-        text: "<",
-        value: "lt",
+        text: '<',
+        value: 'lt'
       },
       {
-        text: ">=",
-        value: "gte",
+        text: '>=',
+        value: 'gte'
       },
       {
-        text: "<=",
-        value: "lte",
-      },
-    ],
+        text: '<=',
+        value: 'lte'
+      }
+    ]
   }),
   computed: {
     columnsById() {
-      return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {});
+      return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {})
     },
     autoApply() {
-      return this.$store.state.windows.autoApplyFilter && !this.webHook;
+      return this.$store.state.settings.autoApplyFilter && !this.webHook
     },
     columns() {
       return (
         this.meta &&
-        this.meta.columns.filter((c) => c && (!c.colOptions || !c.system))
-      );
+        this.meta.columns.filter(c => c && (!c.colOptions || !c.system))
+      )
     },
     types() {
       if (!this.meta || !this.meta.columns || !this.meta.columns.length) {
-        return {};
+        return {}
       }
 
       return this.meta.columns.reduce((obj, col) => {
         switch (col.uidt) {
           case UITypes.Number:
           case UITypes.Decimal:
-            obj[col.title] = obj[col.column_name] = "number";
-            break;
+            obj[col.title] = obj[col.column_name] = 'number'
+            break
           case UITypes.Checkbox:
-            obj[col.title] = obj[col.column_name] = "boolean";
-            break;
+            obj[col.title] = obj[col.column_name] = 'boolean'
+            break
           default:
-            break;
+            break
         }
-        return obj;
-      }, {});
-    },
+        return obj
+      }, {})
+    }
   },
   watch: {
     async viewId(v) {
       if (v) {
-        await this.loadFilter();
+        await this.loadFilter()
       }
     },
     filters: {
       handler(v) {
         this.$emit(
-          "input",
+          'input',
           v &&
-            v.filter((f) => (f.fk_column_id && f.comparison_op) || f.is_group)
-        );
+            v.filter(f => (f.fk_column_id && f.comparison_op) || f.is_group)
+        )
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   created() {
-    this.loadFilter();
+    this.loadFilter()
   },
   methods: {
     filterComparisonOp(f) {
@@ -331,31 +331,31 @@ export default {
             UITypes.LinkToAnotherRecord &&
           this.columnsById[f.fk_column_id].uidt === UITypes.Lookup
         ) {
-          return !["notempty", "empty", "notnull", "null"].includes(op.value);
+          return !['notempty', 'empty', 'notnull', 'null'].includes(op.value)
         }
-        return true;
-      });
+        return true
+      })
     },
     async applyChanges(nested = false, { hookId } = {}) {
       for (const [i, filter] of Object.entries(this.filters)) {
-        if (filter.status === "delete") {
+        if (filter.status === 'delete') {
           if (this.hookId || hookId) {
-            await this.$api.dbTableFilter.delete(filter.id);
+            await this.$api.dbTableFilter.delete(filter.id)
           } else {
-            await this.$api.dbTableFilter.delete(filter.id);
+            await this.$api.dbTableFilter.delete(filter.id)
           }
-        } else if (filter.status === "update") {
+        } else if (filter.status === 'update') {
           if (filter.id) {
             if (this.hookId || hookId) {
               await this.$api.dbTableFilter.update(filter.id, {
                 ...filter,
-                fk_parent_id: this.parentId,
-              });
+                fk_parent_id: this.parentId
+              })
             } else {
               await this.$api.dbTableFilter.update(filter.id, {
                 ...filter,
-                fk_parent_id: this.parentId,
-              });
+                fk_parent_id: this.parentId
+              })
             }
           } else if (this.hookId || hookId) {
             this.$set(
@@ -365,121 +365,121 @@ export default {
                 this.hookId || hookId,
                 {
                   ...filter,
-                  fk_parent_id: this.parentId,
+                  fk_parent_id: this.parentId
                 }
               )
-            );
+            )
           } else {
             this.$set(
               this.filters,
               i,
               await this.$api.dbTableFilter.create(this.viewId, {
                 ...filter,
-                fk_parent_id: this.parentId,
+                fk_parent_id: this.parentId
               })
-            );
+            )
           }
         }
       }
       if (this.$refs.nestedFilter) {
         for (const nestedFilter of this.$refs.nestedFilter) {
-          await nestedFilter.applyChanges(true);
+          await nestedFilter.applyChanges(true)
         }
       }
-      this.loadFilter();
+      this.loadFilter()
       if (!nested) {
-        this.$emit("updated");
+        this.$emit('updated')
       }
     },
     async loadFilter() {
-      let filters = [];
-      if (this.viewId && this._isUIAllowed("filterSync")) {
+      let filters = []
+      if (this.viewId && this._isUIAllowed('filterSync')) {
         filters = this.parentId
           ? await this.$api.dbTableFilter.childrenRead(this.parentId)
-          : await this.$api.dbTableFilter.read(this.viewId);
+          : await this.$api.dbTableFilter.read(this.viewId)
       }
-      if (this.hookId && this._isUIAllowed("filterSync")) {
+      if (this.hookId && this._isUIAllowed('filterSync')) {
         filters = this.parentId
           ? await this.$api.dbTableFilter.childrenRead(this.parentId)
-          : await this.$api.dbTableWebhookFilter.read(this.hookId);
+          : await this.$api.dbTableWebhookFilter.read(this.hookId)
       }
 
-      this.filters = filters;
+      this.filters = filters
     },
     addFilter() {
       this.filters.push({
         fk_column_id: null,
-        comparison_op: "eq",
-        value: "",
-        status: "update",
-        logical_op: "and",
-      });
-      this.filters = this.filters.slice();
-      this.$e("a:filter:add", { length: this.filters.length });
+        comparison_op: 'eq',
+        value: '',
+        status: 'update',
+        logical_op: 'and'
+      })
+      this.filters = this.filters.slice()
+      this.$e('a:filter:add', { length: this.filters.length })
     },
     addFilterGroup() {
       this.filters.push({
         parentId: this.parentId,
         is_group: true,
-        status: "update",
-      });
-      this.filters = this.filters.slice();
-      const index = this.filters.length - 1;
-      this.saveOrUpdate(this.filters[index], index);
+        status: 'update'
+      })
+      this.filters = this.filters.slice()
+      const index = this.filters.length - 1
+      this.saveOrUpdate(this.filters[index], index)
     },
     filterUpdateCondition(filter, i) {
-      this.saveOrUpdate(filter, i);
-      this.$e("a:filter:update", {
+      this.saveOrUpdate(filter, i)
+      this.$e('a:filter:update', {
         logical: filter.logical_op,
-        comparison: filter.comparison_op,
-      });
+        comparison: filter.comparison_op
+      })
     },
     async saveOrUpdate(filter, i) {
-      if (this.shared || !this._isUIAllowed("filterSync")) {
+      if (this.shared || !this._isUIAllowed('filterSync')) {
         // this.$emit('input', this.filters.filter(f => f.fk_column_id && f.comparison_op))
-        this.$emit("updated");
+        this.$emit('updated')
       } else if (!this.autoApply) {
-        filter.status = "update";
+        filter.status = 'update'
       } else if (filter.id) {
         await this.$api.dbTableFilter.update(filter.id, {
           ...filter,
-          fk_parent_id: this.parentId,
-        });
+          fk_parent_id: this.parentId
+        })
 
-        this.$emit("updated");
+        this.$emit('updated')
       } else {
         this.$set(
           this.filters,
           i,
           await this.$api.dbTableFilter.create(this.viewId, {
             ...filter,
-            fk_parent_id: this.parentId,
+            fk_parent_id: this.parentId
           })
-        );
+        )
 
-        this.$emit("updated");
+        this.$emit('updated')
       }
     },
     async deleteFilter(filter, i) {
-      if (this.shared || !this._isUIAllowed("filterSync")) {
-        this.filters.splice(i, 1);
-        this.$emit("updated");
+      if (this.shared || !this._isUIAllowed('filterSync')) {
+        this.filters.splice(i, 1)
+        this.$emit('updated')
       } else if (filter.id) {
         if (!this.autoApply) {
-          this.$set(filter, "status", "delete");
+          this.$set(filter, 'status', 'delete')
         } else {
-          await this.$api.dbTableFilter.delete(filter.id);
-          await this.loadFilter();
-          this.$emit("updated");
+          await this.$api.dbTableFilter.delete(filter.id)
+          await this.loadFilter()
+          this.$emit('updated')
         }
       } else {
-        this.filters.splice(i, 1);
-        this.$emit("updated");
+        this.filters.splice(i, 1)
+        this.$emit('updated')
       }
-      this.$e("a:filter:delete");
-    },
-  },
-};
+      this.$e('a:filter:delete')
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilterMenu.vue
similarity index 75%
rename from packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
rename to packages/nc-gui/components/project/spreadsheet/components/ColumnFilterMenu.vue
index 5ceb80800f..daa07c6839 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilterMenu.vue
@@ -19,7 +19,9 @@
           </v-icon>
           <!-- Filter -->
           {{ $t("activity.filter") }}
-          <v-icon small color="#777"> mdi-menu-down </v-icon>
+          <v-icon small color="#777">
+            mdi-menu-down
+          </v-icon>
         </v-btn>
       </v-badge>
     </template>
@@ -66,61 +68,61 @@
 </template>
 
 <script>
-import ColumnFilter from "@/components/project/spreadsheet/components/columnFilter";
+import ColumnFilter from '~/components/project/spreadsheet/components/ColumnFilter'
 
 export default {
-  name: "ColumnFilterMenu",
+  name: 'ColumnFilterMenu',
   components: { ColumnFilter },
-  props: ["fieldList", "isLocked", "value", "meta", "viewId", "shared"],
+  props: ['fieldList', 'isLocked', 'value', 'meta', 'viewId', 'shared'],
   data: () => ({
-    filters: [],
+    filters: []
   }),
   computed: {
     autosave: {
       set(v) {
-        this.$store.commit("windows/MutAutoApplyFilter", v);
-        this.$e("a:filter:auto-apply", { flag: v });
+        this.$store.commit('settings/MutAutoApplyFilter', v)
+        this.$e('a:filter:auto-apply', { flag: v })
       },
       get() {
-        return this.$store.state.windows.autoApplyFilter;
-      },
-    },
+        return this.$store.state.settings.autoApplyFilter
+      }
+    }
   },
   watch: {
     filters: {
       handler(v) {
         if (this.autosave) {
-          this.$emit("input", v);
+          this.$emit('input', v)
         }
       },
-      deep: true,
+      deep: true
     },
     autosave(v) {
       if (!v) {
-        this.filters = JSON.parse(JSON.stringify(this.value || []));
+        this.filters = JSON.parse(JSON.stringify(this.value || []))
       }
     },
     value(v) {
       this.filters = this.autosave
         ? v || []
-        : JSON.parse(JSON.stringify(v || []));
-    },
+        : JSON.parse(JSON.stringify(v || []))
+    }
   },
   created() {
     this.filters = this.autosave
       ? this.value || []
-      : JSON.parse(JSON.stringify(this.value || []));
+      : JSON.parse(JSON.stringify(this.value || []))
   },
   methods: {
     applyChanges() {
-      this.$emit("input", this.filters);
+      this.$emit('input', this.filters)
       if (this.$refs.filter) {
-        this.$refs.filter.applyChanges();
+        this.$refs.filter.applyChanges()
       }
-      this.$e("a:filter:apply");
-    },
-  },
-};
+      this.$e('a:filter:apply')
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/debugMetas.vue b/packages/nc-gui/components/project/spreadsheet/components/DebugMetas.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/debugMetas.vue
rename to packages/nc-gui/components/project/spreadsheet/components/DebugMetas.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
similarity index 78%
rename from packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
rename to packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
index 7f99d1913f..c426556905 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
@@ -24,11 +24,11 @@
                     (c) =>
                       (column &&
                         (c.column_name || '').toLowerCase() ===
-                          (column.column_name || '').toLowerCase()) ||
+                        (column.column_name || '').toLowerCase()) ||
                       ((v || '').toLowerCase() !==
                         (c.column_name || '').toLowerCase() &&
                         (v || '').toLowerCase() !==
-                          (c.title || '').toLowerCase())
+                        (c.title || '').toLowerCase())
                   ) ||
                   'Duplicate column name', // && meta.v.every(c => v !== c.title ) || 'Duplicate column name',
                 validateColumnName,
@@ -50,12 +50,15 @@
             <v-row>
               <v-col v-if="relation" cols="12">
                 <div class="caption">
-                  <p class="mb-1">Foreign Key</p>
+                  <p class="mb-1">
+                    Foreign Key
+                  </p>
 
-                  <v-icon small class="mt-n1"> mdi-table </v-icon>
+                  <v-icon small class="mt-n1">
+                    mdi-table
+                  </v-icon>
                   <span class="text-capitalize font-weight-bold body-1">
-                    {{ relation._rtn }}</span
-                  >
+                    {{ relation._rtn }}</span>
                   <v-icon
                     v-ge="['columns', 'fk-delete']"
                     small
@@ -65,9 +68,10 @@
                   >
                     mdi-delete-forever
                   </v-icon>
-                  <span v-if="relation.type === 'virtual'" class="caption"
-                    >(v)</span
-                  >
+                  <span
+                    v-if="relation.type === 'virtual'"
+                    class="caption"
+                  >(v)</span>
                 </div>
               </v-col>
               <template v-else>
@@ -92,8 +96,7 @@
                           {{ item.icon }}
                         </v-icon>
                         <span class="caption grey--text text--darken-4">
-                          {{ item.name }}</span
-                        >
+                          {{ item.name }}</span>
                       </div>
                     </template>
 
@@ -110,8 +113,8 @@
                   <v-alert
                     v-if="
                       column &&
-                      newColumn.uidt === 'SingleSelect' &&
-                      column.uidt === 'MultiSelect'
+                        newColumn.uidt === 'SingleSelect' &&
+                        column.uidt === 'MultiSelect'
                     "
                     dense
                     type="warning"
@@ -134,6 +137,21 @@
                     @input="newColumn.altered = newColumn.altered || 2"
                   />
                 </v-col>
+                <v-col v-else-if="isRating" cols="12">
+                  <rating-options
+                    v-model="newColumn.meta"
+                    :column="newColumn"
+                    :meta="meta"
+                  />
+                </v-col>
+                <v-col v-else-if="isCheckbox" cols="12">
+                  <checkbox-options
+                    v-model="newColumn.meta"
+                    :column="newColumn"
+                    :meta="meta"
+                  />
+                </v-col>
+
                 <v-col
                   v-if="accordion"
                   cols="12"
@@ -157,6 +175,10 @@
 
                 <v-col v-show="advanceOptions || !accordion" cols="12">
                   <v-row>
+                    <v-col v-if="newColumn.meta && columnToValidate.includes(newColumn.uidt)" cols="12" class="pt-0 pb-0">
+                      <v-checkbox v-model="newColumn.meta.validate" dense hide-details :label="`Accept only valid ${newColumn.uidt}`" class="mt-0" />
+                    </v-col>
+
                     <template v-if="newColumn.uidt !== 'Formula'">
                       <v-col v-if="isLookup" cols="12">
                         <lookup-options
@@ -225,7 +247,7 @@
                                           v-model="newColumn.rqd"
                                           :disabled="
                                             newColumn.pk ||
-                                            !sqlUi.columnEditable(newColumn)
+                                              !sqlUi.columnEditable(newColumn)
                                           "
                                           class="mr-2 mt-0"
                                           dense
@@ -239,8 +261,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >NN</span
-                                            >
+                                            >NN</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -267,8 +288,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >PK</span
-                                            >
+                                            >PK</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -285,7 +305,7 @@
                                             sqlUi.colPropUNDisabled(
                                               newColumn
                                             ) ||
-                                            !sqlUi.columnEditable(newColumn)
+                                              !sqlUi.columnEditable(newColumn)
                                           "
                                           class="mr-2 mt-0"
                                           dense
@@ -299,8 +319,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >AI</span
-                                            >
+                                            >AI</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -321,7 +340,7 @@
                                             sqlUi.colPropUNDisabled(
                                               newColumn
                                             ) ||
-                                            !sqlUi.columnEditable(newColumn)
+                                              !sqlUi.columnEditable(newColumn)
                                           "
                                           @change="
                                             newColumn.altered =
@@ -331,8 +350,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >UN</span
-                                            >
+                                            >UN</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -353,7 +371,7 @@
                                             sqlUi.colPropAuDisabled(
                                               newColumn
                                             ) ||
-                                            !sqlUi.columnEditable(newColumn)
+                                              !sqlUi.columnEditable(newColumn)
                                           "
                                           @change="
                                             newColumn.altered =
@@ -363,8 +381,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >AU</span
-                                            >
+                                            >AU</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -483,13 +500,12 @@
                   class="caption mx-2"
                   outlined
                 >
-                  This spreadsheet is connected to an SQLite DB.<br />
+                  This spreadsheet is connected to an SQLite DB.<br>
                   For production please see
                   <a
                     href="https://github.com/nocodb/nocodb#production-setup"
                     target="_blank"
-                    >here</a
-                  >.
+                  >here</a>.
                 </v-alert>
               </div>
             </v-row>
@@ -519,27 +535,32 @@
 </template>
 
 <script>
-import { MssqlUi, SqliteUi } from "nocodb-sdk";
-import { UITypes, uiTypes } from "../helpers/uiTypes";
-import RollupOptions from "./editColumn/rollupOptions";
-import FormulaOptions from "@/components/project/spreadsheet/components/editColumn/formulaOptions";
-import LookupOptions from "@/components/project/spreadsheet/components/editColumn/lookupOptions";
-import CustomSelectOptions from "@/components/project/spreadsheet/components/editColumn/customSelectOptions";
-import RelationOptions from "@/components/project/spreadsheet/components/editColumn/relationOptions";
-import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
-import LinkedToAnotherOptions from "@/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions";
-import { validateColumnName } from "~/helpers";
+import { MssqlUi, SqliteUi } from 'nocodb-sdk'
+import { UITypes, uiTypes } from '../helpers/uiTypes'
+import RollupOptions from './editColumn/RollupOptions'
+import FormulaOptions from '~/components/project/spreadsheet/components/editColumn/FormulaOptions'
+import LookupOptions from '~/components/project/spreadsheet/components/editColumn/LookupOptions'
+import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions'
+import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions'
+import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
+import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions'
+import { validateColumnName } from '~/helpers'
+import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions'
+import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/checkboxOptions'
+const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 export default {
-  name: "EditColumn",
+  name: 'EditColumn',
   components: {
+    CheckboxOptions,
+    RatingOptions,
     RollupOptions,
     FormulaOptions,
     LookupOptions,
     LinkedToAnotherOptions,
     DlgLabelSubmitCancel,
     RelationOptions,
-    CustomSelectOptions,
+    CustomSelectOptions
   },
   props: {
     nodes: Object,
@@ -548,13 +569,14 @@ export default {
     editColumn: Boolean,
     column: Object,
     columnIndex: Number,
-    value: Boolean,
+    value: Boolean
   },
   data: () => ({
+    columnToValidate,
     valid: false,
     relationDeleteDlg: false,
     newColumn: {},
-    advanceOptions: false,
+    advanceOptions: false
   }),
   computed: {
     accordion() {
@@ -563,42 +585,48 @@ export default {
         UITypes.Lookup,
         UITypes.Rollup,
         UITypes.SpecificDBType,
-        UITypes.Formula,
-      ].includes(this.newColumn && this.newColumn.uidt);
+        UITypes.Formula
+      ].includes(this.newColumn && this.newColumn.uidt)
     },
     uiTypes() {
-      return uiTypes.filter((t) => !this.editColumn || !t.virtual);
+      return uiTypes.filter(t => !this.editColumn || !t.virtual)
     },
     isEditDisabled() {
-      return this.editColumn && this.sqlUi === SqliteUi;
+      return this.editColumn && this.sqlUi === SqliteUi
     },
     isSQLite() {
-      return this.sqlUi === SqliteUi;
+      return this.sqlUi === SqliteUi
     },
     isMSSQL() {
-      return this.sqlUi === MssqlUi;
+      return this.sqlUi === MssqlUi
     },
     dataTypes() {
-      return this.sqlUi.getDataTypeListForUiType(this.newColumn);
+      return this.sqlUi.getDataTypeListForUiType(this.newColumn)
     },
     isSelect() {
       return (
         this.newColumn &&
-        (this.newColumn.uidt === "MultiSelect" ||
-          this.newColumn.uidt === "SingleSelect")
-      );
+        (this.newColumn.uidt === 'MultiSelect' ||
+          this.newColumn.uidt === 'SingleSelect')
+      )
     },
     isRelation() {
-      return this.newColumn && this.newColumn.uidt === "ForeignKey";
+      return this.newColumn && this.newColumn.uidt === 'ForeignKey'
     },
     isLinkToAnotherRecord() {
-      return this.newColumn && this.newColumn.uidt === "LinkToAnotherRecord";
+      return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord'
     },
     isLookup() {
-      return this.newColumn && this.newColumn.uidt === "Lookup";
+      return this.newColumn && this.newColumn.uidt === 'Lookup'
+    },
+    isRating() {
+      return this.newColumn && this.newColumn.uidt === UITypes.Rating
+    },
+    isCheckbox() {
+      return this.newColumn && this.newColumn.uidt === UITypes.Checkbox
     },
     isRollup() {
-      return this.newColumn && this.newColumn.uidt === "Rollup";
+      return this.newColumn && this.newColumn.uidt === 'Rollup'
     },
     relation() {
       return (
@@ -606,210 +634,217 @@ export default {
         this.column &&
         this.meta.belongsTo &&
         this.meta.belongsTo.find(
-          (bt) => bt.column_name === this.column.column_name
+          bt => bt.column_name === this.column.column_name
         )
-      );
+      )
     },
     isVirtual() {
-      return this.isLinkToAnotherRecord || this.isLookup || this.isRollup;
-    },
+      return this.isLinkToAnotherRecord || this.isLookup || this.isRollup
+    }
   },
   watch: {
     column() {
-      this.genColumnData();
-    },
+      this.genColumnData()
+    }
   },
   async created() {
-    this.genColumnData();
+    this.genColumnData()
   },
   mounted() {
-    this.focusInput();
+    this.focusInput()
   },
   methods: {
     validateColumnName(v) {
       return validateColumnName(
         v,
-        this.$store.getters["project/GtrProjectIsGraphql"]
-      );
+        this.$store.getters['project/GtrProjectIsGraphql']
+      )
     },
     onRelColumnSelect(colMeta) {
       Object.assign(this.newColumn, {
         dt: colMeta.dt,
         dtxp: colMeta.dtxp,
         dtxs: colMeta.dtxs,
-        un: colMeta.un,
-      });
+        un: colMeta.un
+      })
     },
     genColumnData() {
       this.newColumn = this.column
         ? { ...this.column }
         : this.sqlUi.getNewColumn(
-            [...this.meta.columns, ...(this.meta.v || [])].length + 1
-          );
-      this.newColumn.cno = this.newColumn.column_name;
+          [...this.meta.columns, ...(this.meta.v || [])].length + 1
+        )
+      this.newColumn.cno = this.newColumn.column_name
     },
     close() {
-      this.$emit("close");
-      this.newColumn = {};
+      this.$emit('close')
+      this.newColumn = {}
     },
     async save() {
       if (!this.$refs.form.validate()) {
-        return;
+        return
       }
       try {
-        if (this.newColumn.uidt === "Formula") {
-          await this.$refs.formula.save();
-          return this.$emit("saved");
+        if (this.newColumn.uidt === 'Formula') {
+          await this.$refs.formula.save()
+          return this.$emit('saved')
           // return this.$toast.info('Coming Soon...').goAway(3000)
         }
 
         if (this.isLinkToAnotherRecord && this.$refs.relation) {
-          await this.$refs.relation.saveRelation();
-          return this.$emit("saved");
+          await this.$refs.relation.saveRelation()
+          return this.$emit('saved')
         }
         if (this.isLookup && this.$refs.lookup) {
-          return await this.$refs.lookup.save();
+          return await this.$refs.lookup.save()
         }
         if (this.isRollup && this.$refs.rollup) {
-          return await this.$refs.rollup.save();
+          return await this.$refs.rollup.save()
         }
-        if (this.newColumn.uidt === "Formula" && this.$refs.formula) {
-          return await this.$refs.formula.save();
+        if (this.newColumn.uidt === 'Formula' && this.$refs.formula) {
+          return await this.$refs.formula.save()
         }
 
-        this.newColumn.table_name = this.nodes.table_name;
-        this.newColumn.title = this.newColumn.column_name;
+        this.newColumn.table_name = this.nodes.table_name
+        this.newColumn.title = this.newColumn.column_name
 
         if (this.editColumn) {
-          await this.$api.dbTableColumn.update(this.column.id, this.newColumn);
+          await this.$api.dbTableColumn.update(this.column.id, this.newColumn)
         } else {
-          await this.$api.dbTableColumn.create(this.meta.id, this.newColumn);
+          await this.$api.dbTableColumn.create(this.meta.id, this.newColumn)
         }
 
         this.$emit(
-          "saved",
+          'saved',
           this.newColumn.title,
           this.editColumn ? this.meta.columns[this.columnIndex].title : null
-        );
+        )
       } catch (e) {
-        console.log(e);
+        console.log(e)
         this.$toast
-          .error("Failed to save column: " + e)
-          .goAway(3000);
-        throw e;
+          .error('Failed to save column: ' + e)
+          .goAway(3000)
+        throw e
       }
 
-      this.$emit("close");
+      this.$emit('close')
 
-      this.$e("a:column:add", { datatype: this.newColumn.uidt });
+      this.$e('a:column:add', { datatype: this.newColumn.uidt })
     },
     onDataTypeChange() {
-      this.newColumn.rqd = false;
+      this.newColumn.rqd = false
       if (this.newColumn.uidt !== UITypes.ID) {
-        this.newColumn.primaryKey = false;
+        this.newColumn.primaryKey = false
       }
-      this.newColumn.ai = false;
-      this.newColumn.cdf = null;
-      this.newColumn.un = false;
+      this.newColumn.ai = false
+      this.newColumn.cdf = null
+      this.newColumn.un = false
       this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(
         this.newColumn.dt
-      );
+      )
       this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(
         this.newColumn.dt
-      );
+      )
 
-      this.newColumn.dtx = "specificType";
+      this.newColumn.dtx = 'specificType'
 
-      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect];
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
       if (
         this.column &&
         selectTypes.includes(this.newColumn.uidt) &&
         selectTypes.includes(this.column.uidt)
       ) {
-        this.newColumn.dtxp = this.column.dtxp;
+        this.newColumn.dtxp = this.column.dtxp
       }
 
       // this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn));
 
-      this.newColumn.altered = this.newColumn.altered || 2;
+      this.newColumn.altered = this.newColumn.altered || 2
     },
     onUiTypeChange() {
-      const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn);
+      const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn)
       this.newColumn = {
         ...this.newColumn,
+        meta: null,
         rqd: false,
         pk: false,
         ai: false,
         cdf: null,
         un: false,
-        dtx: "specificType",
-        ...colProp,
-      };
+        dtx: 'specificType',
+        ...colProp
+      }
 
       this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(
         this.newColumn.dt
-      );
+      )
       this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(
         this.newColumn.dt
-      );
+      )
 
-      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect];
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
       if (
         this.column &&
         selectTypes.includes(this.newColumn.uidt) &&
         selectTypes.includes(this.column.uidt)
       ) {
-        this.newColumn.dtxp = this.column.dtxp;
+        this.newColumn.dtxp = this.column.dtxp
       }
 
-      this.newColumn.altered = this.newColumn.altered || 2;
+      if (columnToValidate.includes(this.newColumn.uidt)) {
+        this.newColumn.meta = {
+          validate: this.newColumn.meta && this.newColumn.meta.validate
+        }
+      }
+
+      this.newColumn.altered = this.newColumn.altered || 2
     },
     focusInput() {
       setTimeout(() => {
         if (this.$refs.column && this.$refs.column.$el) {
-          const el = this.$refs.column.$el.querySelector("input");
-          el.focus();
-          el.select();
+          const el = this.$refs.column.$el.querySelector('input')
+          el.focus()
+          el.select()
         }
-      }, 100);
+      }, 100)
     },
-    async deleteRelation(action = "", column) {
+    async deleteRelation(action = '', column) {
       try {
-        if (action === "showDialog") {
-          this.relationDeleteDlg = true;
-        } else if (action === "hideDialog") {
-          this.relationDeleteDlg = false;
+        if (action === 'showDialog') {
+          this.relationDeleteDlg = true
+        } else if (action === 'hideDialog') {
+          this.relationDeleteDlg = false
         } else {
-          const result = await this.$store.dispatch("sqlMgr/ActSqlOpPlus", [
+          const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: this.nodes.env,
-              dbAlias: this.nodes.dbAlias,
+              dbAlias: this.nodes.dbAlias
             },
-            this.relation.type === "virtual"
-              ? "xcVirtualRelationDelete"
-              : "relationDelete",
+            this.relation.type === 'virtual'
+              ? 'xcVirtualRelationDelete'
+              : 'relationDelete',
             {
               childColumn: this.relation.column_name,
               childTable: this.nodes.table_name,
               parentTable: this.relation.rtn,
-              parentColumn: this.relation.rcn,
-            },
-          ]);
-          this.relationDeleteDlg = false;
-          this.relation = null;
-          this.$toast.success("Foreign Key deleted successfully").goAway(3000);
-          this.$emit("onRelationDelete");
+              parentColumn: this.relation.rcn
+            }
+          ])
+          this.relationDeleteDlg = false
+          this.relation = null
+          this.$toast.success('Foreign Key deleted successfully').goAway(3000)
+          this.$emit('onRelationDelete')
         }
       } catch (e) {
-        console.log(e);
+        console.log(e)
         this.$toast
-          .error("Foreign key relation delete failed" + e)
-          .goAway(3000);
-        throw e;
+          .error('Foreign key relation delete failed' + e)
+          .goAway(3000)
+        throw e
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/EditVirtualColumn.vue
similarity index 97%
rename from packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
rename to packages/nc-gui/components/project/spreadsheet/components/EditVirtualColumn.vue
index 583e039632..e224f269d5 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditVirtualColumn.vue
@@ -67,7 +67,7 @@
 
 <script>
 import { UITypes, substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
-import FormulaOptions from '@/components/project/spreadsheet/components/editColumn/formulaOptions'
+import FormulaOptions from '~/components/project/spreadsheet/components/editColumn/FormulaOptions'
 import { validateColumnName } from '~/helpers'
 
 export default {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editable.vue b/packages/nc-gui/components/project/spreadsheet/components/Editable.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editable.vue
rename to packages/nc-gui/components/project/spreadsheet/components/Editable.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
similarity index 74%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
index 21430fea29..5a69d867ef 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
@@ -23,9 +23,22 @@
       v-on="$listeners"
     />
 
+    <rating-cell
+      v-if="isRating"
+      v-model="localState"
+      :active="active"
+      :is-form="isForm"
+      :column="column"
+      :is-public-grid="isPublic && !isForm"
+      :is-public-form="isPublic && isForm"
+      :is-locked="isLocked"
+      v-on="$listeners"
+    />
+
     <boolean-cell
       v-else-if="isBoolean"
       v-model="localState"
+      :column="column"
       :is-form="isForm"
       v-on="parentListeners"
     />
@@ -116,26 +129,28 @@
 
 <script>
 import debounce from 'debounce'
-import DatePickerCell from '@/components/project/spreadsheet/components/editableCell/datePickerCell'
-import EditableUrlCell from '@/components/project/spreadsheet/components/editableCell/editableUrlCell'
-import JsonEditableCell from '@/components/project/spreadsheet/components/editableCell/jsonEditableCell'
-import TextCell from '@/components/project/spreadsheet/components/editableCell/textCell'
-import DateTimePickerCell from '@/components/project/spreadsheet/components/editableCell/dateTimePickerCell'
-import TextAreaCell from '@/components/project/spreadsheet/components/editableCell/textAreaCell'
-import EnumListCell from '@/components/project/spreadsheet/components/editableCell/enumListEditableCell'
-import IntegerCell from '@/components/project/spreadsheet/components/editableCell/integerCell'
-import FloatCell from '@/components/project/spreadsheet/components/editableCell/floatCell'
-import TimePickerCell from '@/components/project/spreadsheet/components/editableCell/timePickerCell'
-import BooleanCell from '@/components/project/spreadsheet/components/editableCell/booleanCell'
+import DatePickerCell from '~/components/project/spreadsheet/components/editableCell/DatePickerCell'
+import EditableUrlCell from '~/components/project/spreadsheet/components/editableCell/EditableUrlCell'
+import JsonEditableCell from '~/components/project/spreadsheet/components/editableCell/JsonEditableCell'
+import TextCell from '~/components/project/spreadsheet/components/editableCell/TextCell'
+import DateTimePickerCell from '~/components/project/spreadsheet/components/editableCell/DateTimePickerCell'
+import TextAreaCell from '~/components/project/spreadsheet/components/editableCell/TextAreaCell'
+import EnumListCell from '~/components/project/spreadsheet/components/editableCell/EnumListEditableCell'
+import IntegerCell from '~/components/project/spreadsheet/components/editableCell/IntegerCell'
+import FloatCell from '~/components/project/spreadsheet/components/editableCell/FloatCell'
+import TimePickerCell from '~/components/project/spreadsheet/components/editableCell/TimePickerCell'
+import BooleanCell from '~/components/project/spreadsheet/components/editableCell/BooleanCell'
 import cell from '@/components/project/spreadsheet/mixins/cell'
-import EditableAttachmentCell from '@/components/project/spreadsheet/components/editableCell/editableAttachmentCell'
-import EnumCell from '@/components/project/spreadsheet/components/cell/enumCell'
-import SetListEditableCell from '@/components/project/spreadsheet/components/editableCell/setListEditableCell'
-import SetListCell from '@/components/project/spreadsheet/components/cell/setListCell'
+import EditableAttachmentCell from '~/components/project/spreadsheet/components/editableCell/EditableAttachmentCell'
+import EnumCell from '~/components/project/spreadsheet/components/cell/EnumCell'
+import SetListEditableCell from '~/components/project/spreadsheet/components/editableCell/SetListEditableCell'
+import SetListCell from '~/components/project/spreadsheet/components/cell/SetListCell'
+import RatingCell from '~/components/project/spreadsheet/components/editableCell/RatingCell'
 
 export default {
   name: 'EditableCell',
   components: {
+    RatingCell,
     JsonEditableCell,
     EditableUrlCell,
     SetListCell,
@@ -182,7 +197,7 @@ export default {
         if (val !== this.value) {
           this.changed = true
           this.$emit('input', val)
-          if (this.isAttachment || this.isEnum || this.isBoolean || this.isSet || this.isTime || this.isDateTime || this.isDate) {
+          if (this.isAttachment || this.isEnum || this.isBoolean || this.isRating || this.isSet || this.isTime || this.isDateTime || this.isDate) {
             this.syncData()
           } else if (!this.isCurrency) {
             this.syncDataDebounce(this)
@@ -213,7 +228,7 @@ export default {
     // this.$refs.input.focus();
   },
   beforeDestroy() {
-    if (this.changed && !(this.isAttachment || this.isEnum || this.isBoolean || this.isSet || this.isTime || this.isDateTime)) {
+    if (this.changed && !(this.isAttachment || this.isEnum || this.isBoolean || this.isRating || this.isSet || this.isTime || this.isDateTime)) {
       this.changed = false
       this.$emit('change')
     }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
similarity index 80%
rename from packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
rename to packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
index 394ad33cf3..ca48af8f01 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
@@ -3,7 +3,9 @@
     <v-toolbar height="55" class="elevation-1">
       <div class="d-100 d-flex">
         <h5 class="title text-center">
-          <v-icon :color="iconColor"> mdi-table-arrow-right </v-icon>
+          <v-icon :color="iconColor">
+            mdi-table-arrow-right
+          </v-icon>
 
           <template v-if="meta">
             {{ meta.title }}
@@ -15,7 +17,9 @@
         </h5>
         <v-spacer />
         <v-btn small text @click="reload">
-          <v-icon small> mdi-reload </v-icon>
+          <v-icon small>
+            mdi-reload
+          </v-icon>
         </v-btn>
 
         <x-icon
@@ -136,8 +140,8 @@
                     <div
                       v-else-if="
                         col.ai ||
-                        (col.pk && !isNew) ||
-                        disabledColumns[col.title]
+                          (col.pk && !isNew) ||
+                          disabledColumns[col.title]
                       "
                       style="height: 100%; width: 100%"
                       class="caption xc-input"
@@ -153,7 +157,7 @@
                         readonly
                         disabled
                         :value="localState[col.title]"
-                      />
+                      >
                     </div>
 
                     <editable-cell
@@ -217,15 +221,15 @@
                           isYou(log.user)
                             ? "You"
                             : log.user == null
-                            ? "Shared base"
-                            : log.user
+                              ? "Shared base"
+                              : log.user
                         }}
                         {{
                           log.op_type === "COMMENT"
                             ? "commented"
                             : log.op_sub_type === "INSERT"
-                            ? "created"
-                            : "edited"
+                              ? "created"
+                              : "edited"
                         }}
                       </p>
                       <p
@@ -312,44 +316,44 @@
 </template>
 
 <script>
-import dayjs from "dayjs";
+import dayjs from 'dayjs'
 import {
   AuditOperationSubTypes,
   AuditOperationTypes,
   isVirtualCol,
-  UITypes,
-} from "nocodb-sdk";
-import form from "../mixins/form";
-import HeaderCell from "@/components/project/spreadsheet/components/headerCell";
-import EditableCell from "@/components/project/spreadsheet/components/editableCell";
-import colors from "@/mixins/colors";
-import VirtualCell from "@/components/project/spreadsheet/components/virtualCell";
-import VirtualHeaderCell from "@/components/project/spreadsheet/components/virtualHeaderCell";
-
-const relativeTime = require("dayjs/plugin/relativeTime");
-const utc = require("dayjs/plugin/utc");
-dayjs.extend(utc);
-dayjs.extend(relativeTime);
+  UITypes
+} from 'nocodb-sdk'
+import form from '../mixins/form'
+import HeaderCell from '~/components/project/spreadsheet/components/HeaderCell'
+import EditableCell from '~/components/project/spreadsheet/components/EditableCell'
+import colors from '@/mixins/colors'
+import VirtualCell from '~/components/project/spreadsheet/components/VirtualCell'
+import VirtualHeaderCell from '~/components/project/spreadsheet/components/VirtualHeaderCell'
+
+const relativeTime = require('dayjs/plugin/relativeTime')
+const utc = require('dayjs/plugin/utc')
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
 export default {
-  name: "ExpandedForm",
+  name: 'ExpandedForm',
   components: {
     VirtualHeaderCell,
     VirtualCell,
     EditableCell,
-    HeaderCell,
+    HeaderCell
   },
   mixins: [colors, form],
   props: {
     showFields: Object,
     showNextPrev: {
       type: Boolean,
-      default: false,
+      default: false
     },
     breadcrumbs: {
       type: Array,
       default() {
-        return [];
-      },
+        return []
+      }
     },
     dbAlias: String,
     value: Object,
@@ -361,13 +365,13 @@ export default {
     oldRow: Object,
     iconColor: {
       type: String,
-      default: "primary",
+      default: 'primary'
     },
     availableColumns: [Object, Array],
     queryParams: Object,
     meta: Object,
     presetValues: Object,
-    isLocked: Boolean,
+    isLocked: Boolean
   },
   data: () => ({
     isVirtualCol,
@@ -376,113 +380,113 @@ export default {
     loadingLogs: true,
     toggleDrawer: false,
     logs: null,
-    active: "",
+    active: '',
     localState: {},
     changedColumns: {},
     comment: null,
     showSystemFields: false,
-    commentsOnly: false,
+    commentsOnly: false
   }),
   computed: {
     primaryKey() {
       return this.isNew
-        ? ""
+        ? ''
         : this.meta.columns
-            .filter((c) => c.pk)
-            .map((c) => this.localState[c.title])
-            .join("___");
+          .filter(c => c.pk)
+          .map(c => this.localState[c.title])
+          .join('___')
     },
     edited() {
-      return !!Object.keys(this.changedColumns).length;
+      return !!Object.keys(this.changedColumns).length
     },
     fields() {
       if (this.availableColumns) {
-        return this.availableColumns;
+        return this.availableColumns
       }
 
-      const hideCols = ["created_at", "updated_at"];
+      const hideCols = ['created_at', 'updated_at']
 
       if (this.showSystemFields) {
-        return this.meta.columns || [];
+        return this.meta.columns || []
       } else {
         return (
           this.meta.columns.filter(
-            (c) =>
+            c =>
               !(c.pk && c.ai) &&
               !hideCols.includes(c.column_name) &&
               !(this.meta.v || []).some(
-                (v) => v.bt && v.bt.column_name === c.column_name
+                v => v.bt && v.bt.column_name === c.column_name
               )
           ) || []
-        );
+        )
       }
     },
     isChanged() {
-      return Object.values(this.changedColumns).some(Boolean);
+      return Object.values(this.changedColumns).some(Boolean)
     },
     localBreadcrumbs() {
       return [
         ...this.breadcrumbs,
         `${this.meta ? this.meta.title : this.table} ${
-          this.primaryValue() ? `(${this.primaryValue()})` : ""
-        }`,
-      ];
-    },
+          this.primaryValue() ? `(${this.primaryValue()})` : ''
+        }`
+      ]
+    }
   },
   watch: {
     value(obj) {
-      this.localState = { ...obj };
+      this.localState = { ...obj }
       if (!this.isNew && this.toggleDrawer) {
-        this.getAuditsAndComments();
+        this.getAuditsAndComments()
       }
     },
     isNew(n) {
       if (!n && this.toggleDrawer) {
-        this.getAuditsAndComments();
+        this.getAuditsAndComments()
       }
     },
     meta() {
       if (!this.isNew && this.toggleDrawer) {
-        this.getAuditsAndComments();
+        this.getAuditsAndComments()
       }
     },
     toggleDrawer(td) {
       if (td) {
-        this.getAuditsAndComments();
+        this.getAuditsAndComments()
       }
-    },
+    }
   },
   created() {
-    this.localState = { ...this.value };
+    this.localState = { ...this.value }
     if (!this.isNew && this.toggleDrawer) {
-      this.getAuditsAndComments();
+      this.getAuditsAndComments()
     }
   },
   methods: {
     updateCol(_row, _cn, pid) {
-      this.$set(this.localState, _cn, pid);
-      this.$set(this.changedColumns, _cn, true);
+      this.$set(this.localState, _cn, pid)
+      this.$set(this.changedColumns, _cn, true)
     },
     isYou(email) {
       return (
         this.$store.state.users.user &&
         this.$store.state.users.user.email === email
-      );
+      )
     },
     async getAuditsAndComments() {
-      this.loadingLogs = true;
+      this.loadingLogs = true
 
       const data = await this.$api.utils.commentList({
         row_id: this.meta.columns
-          .filter((c) => c.pk)
-          .map((c) => this.localState[c.title])
-          .join("___"),
+          .filter(c => c.pk)
+          .map(c => this.localState[c.title])
+          .join('___'),
         fk_model_id: this.meta.id,
-        comments_only: this.commentsOnly,
-      });
+        comments_only: this.commentsOnly
+      })
 
-      this.logs = data.reverse();
-      this.loadingLogs = false;
+      this.logs = data.reverse()
+      this.loadingLogs = false
 
       this.$nextTick(() => {
         if (
@@ -491,66 +495,66 @@ export default {
           this.$refs.commentsList.$el.firstElementChild
         ) {
           this.$refs.commentsList.$el.scrollTop =
-            this.$refs.commentsList.$el.firstElementChild.offsetHeight;
+            this.$refs.commentsList.$el.firstElementChild.offsetHeight
         }
-      });
+      })
     },
     async save() {
       try {
         const id = this.meta.columns
-          .filter((c) => c.pk)
-          .map((c) => this.localState[c.title])
-          .join("___");
+          .filter(c => c.pk)
+          .map(c => this.localState[c.title])
+          .join('___')
 
         if (this.presetValues) {
           // cater presetValues
           for (const k in this.presetValues) {
-            this.$set(this.changedColumns, k, true);
+            this.$set(this.changedColumns, k, true)
           }
         }
 
         const updatedObj = Object.keys(this.changedColumns).reduce(
           (obj, col) => {
-            obj[col] = this.localState[col];
-            return obj;
+            obj[col] = this.localState[col]
+            return obj
           },
           {}
-        );
+        )
 
         if (this.isNew) {
           const data = await this.$api.dbTableRow.create(
-            "noco",
+            'noco',
             this.projectName,
             this.meta.title,
             updatedObj
-          );
-          this.localState = { ...this.localState, ...data };
+          )
+          this.localState = { ...this.localState, ...data }
 
           // save hasmany and manytomany relations from local state
           if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
             for (const vcell of this.$refs.virtual) {
               if (vcell.save) {
-                await vcell.save(this.localState);
+                await vcell.save(this.localState)
               }
             }
           }
 
-          await this.reload();
+          await this.reload()
         } else if (Object.keys(updatedObj).length) {
           if (!id) {
             return this.$toast
               .info(
                 "Update not allowed for table which doesn't have primary Key"
               )
-              .goAway(3000);
+              .goAway(3000)
           }
           await this.$api.dbTableRow.update(
-            "noco",
+            'noco',
             this.projectName,
             this.meta.title,
             id,
             updatedObj
-          );
+          )
           for (const key of Object.keys(updatedObj)) {
             // audit
             this.$api.utils
@@ -559,103 +563,103 @@ export default {
                 column_name: key,
                 row_id: id,
                 value: updatedObj[key],
-                prev_value: this.oldRow[key],
+                prev_value: this.oldRow[key]
               })
-              .then(() => {});
+              .then(() => {})
           }
         } else {
-          return this.$toast.info("No columns to update").goAway(3000);
+          return this.$toast.info('No columns to update').goAway(3000)
         }
 
-        this.$emit("update:oldRow", { ...this.localState });
-        this.changedColumns = {};
-        this.$emit("input", this.localState);
-        this.$emit("update:isNew", false);
+        this.$emit('update:oldRow', { ...this.localState })
+        this.changedColumns = {}
+        this.$emit('input', this.localState)
+        this.$emit('update:isNew', false)
 
         this.$toast
-          .success(`${this.primaryValue() || "Row"} updated successfully.`, {
-            position: "bottom-right",
+          .success(`${this.primaryValue() || 'Row'} updated successfully.`, {
+            position: 'bottom-right'
           })
-          .goAway(3000);
+          .goAway(3000)
       } catch (e) {
-        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000);
+        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
       }
-      this.$e("a:row-expand:add");
+      this.$e('a:row-expand:add')
     },
     async reload() {
       const id = this.meta.columns
-        .filter((c) => c.pk)
-        .map((c) => this.localState[c.title])
-        .join("___");
-      this.$set(this, "changedColumns", {});
+        .filter(c => c.pk)
+        .map(c => this.localState[c.title])
+        .join('___')
+      this.$set(this, 'changedColumns', {})
       this.localState = await this.$api.dbTableRow.read(
-        "noco",
+        'noco',
         this.projectName,
         this.meta.title,
         id,
         { query: this.queryParams || {} }
-      );
+      )
     },
     calculateDiff(date) {
-      return dayjs.utc(date).fromNow();
+      return dayjs.utc(date).fromNow()
     },
     async saveComment() {
       try {
         await this.$api.utils.commentRow({
           fk_model_id: this.meta.id,
           row_id: this.meta.columns
-            .filter((c) => c.pk)
-            .map((c) => this.localState[c.title])
-            .join("___"),
-          description: this.comment,
-        });
-
-        this.comment = "";
-        this.$toast.success("Comment added successfully").goAway(3000);
-        this.$emit("commented");
-        await this.getAuditsAndComments();
+            .filter(c => c.pk)
+            .map(c => this.localState[c.title])
+            .join('___'),
+          description: this.comment
+        })
+
+        this.comment = ''
+        this.$toast.success('Comment added successfully').goAway(3000)
+        this.$emit('commented')
+        await this.getAuditsAndComments()
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000);
+        this.$toast.error(e.message).goAway(3000)
       }
 
-      this.$e("a:row-expand:comment");
+      this.$e('a:row-expand:comment')
     },
     primaryValue() {
       if (this.localState) {
-        const value = this.localState[this.primaryValueColumn];
+        const value = this.localState[this.primaryValueColumn]
         const col = this.meta.columns.find(
-          (c) => c.title == this.primaryValueColumn
-        );
+          c => c.title == this.primaryValueColumn
+        )
         if (!col) {
-          return;
+          return
         }
-        const uidt = col.uidt;
+        const uidt = col.uidt
         if (uidt == UITypes.Date) {
           return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format(
-            "YYYY-MM-DD"
-          );
+            'YYYY-MM-DD'
+          )
         } else if (uidt == UITypes.DateTime) {
           return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format(
-            "YYYY-MM-DD HH:mm"
-          );
+            'YYYY-MM-DD HH:mm'
+          )
         } else if (uidt == UITypes.Time) {
-          let dateTime = dayjs(value);
+          let dateTime = dayjs(value)
           if (!dateTime.isValid()) {
-            dateTime = dayjs(value, "HH:mm:ss");
+            dateTime = dayjs(value, 'HH:mm:ss')
           }
           if (!dateTime.isValid()) {
-            dateTime = dayjs(`1999-01-01 ${value}`);
+            dateTime = dayjs(`1999-01-01 ${value}`)
           }
           if (!dateTime.isValid()) {
-            return value;
+            return value
           }
-          return dateTime.format("HH:mm:ss");
+          return dateTime.format('HH:mm:ss')
         }
-        return value;
+        return value
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/project/spreadsheet/components/extras.vue b/packages/nc-gui/components/project/spreadsheet/components/Extras.vue
similarity index 89%
rename from packages/nc-gui/components/project/spreadsheet/components/extras.vue
rename to packages/nc-gui/components/project/spreadsheet/components/Extras.vue
index 3b2a187f03..a56df41482 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/extras.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/Extras.vue
@@ -32,19 +32,19 @@
         >
           <v-list-item>
             <div class="justify-space-between d-100 pr-2">
-              <v-icon v-t="['e:community:discord']"  size="22" :color="textColors[0]" @click="open('https://discord.gg/5RgZmkW')">
+              <v-icon v-t="['e:community:discord']" size="22" :color="textColors[0]" @click="open('https://discord.gg/5RgZmkW')">
                 mdi-discord
               </v-icon>
               <v-icon v-t="['e:community:discourse']" class=" discourse" size="22" :color="textColors[0]" @click="open('https://community.nocodb.com/')">
                 mdi-discourse
               </v-icon>
-              <v-icon v-t="['e:community:reddit']"  size="22" color="#ff4600" @click="open('https://www.reddit.com/r/NocoDB/')">
+              <v-icon v-t="['e:community:reddit']" size="22" color="#ff4600" @click="open('https://www.reddit.com/r/NocoDB/')">
                 mdi-reddit
               </v-icon>
-              <v-icon v-t="['e:community:twitter']"  size="22" :color="textColors[1]" @click="open('https://twitter.com/NocoDB')">
+              <v-icon v-t="['e:community:twitter']" size="22" :color="textColors[1]" @click="open('https://twitter.com/NocoDB')">
                 mdi-twitter
               </v-icon>
-              <v-icon v-t="['e:community:book-demo']"  size="22" :color="textColors[3]" @click="open('https://calendly.com/nocodb-meeting')">
+              <v-icon v-t="['e:community:book-demo']" size="22" :color="textColors[3]" @click="open('https://calendly.com/nocodb-meeting')">
                 mdi-calendar-month
               </v-icon>
             </div>
@@ -117,7 +117,7 @@
 </template>
 
 <script>
-import ShareIcons from '../../../share-icons'
+import ShareIcons from '../../../ShareIcons'
 import colors from '~/mixins/colors'
 
 export default {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
rename to packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/fieldsMenuItem.vue b/packages/nc-gui/components/project/spreadsheet/components/FieldsMenuItem.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/fieldsMenuItem.vue
rename to packages/nc-gui/components/project/spreadsheet/components/FieldsMenuItem.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/HeaderCell.vue
similarity index 98%
rename from packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/HeaderCell.vue
index c952bcde51..e90f058d97 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/HeaderCell.vue
@@ -165,7 +165,7 @@
 
 <script>
 import cell from '@/components/project/spreadsheet/mixins/cell'
-import EditColumn from '@/components/project/spreadsheet/components/editColumn'
+import EditColumn from '~/components/project/spreadsheet/components/EditColumn'
 
 export default {
   name: 'HeaderCell',
diff --git a/packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/LockMenu.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue
rename to packages/nc-gui/components/project/spreadsheet/components/LockMenu.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue b/packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue
similarity index 96%
rename from packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue
index 075daa9710..4a087c0bc5 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue
@@ -104,7 +104,8 @@
       :parsed-csv="parsedCsv"
       @import="importData"
     />
-    <webhook-modal v-if="webhookModal" v-model="webhookModal" :meta="meta" />
+    <!--    <webhook-modal v-if="webhookModal" v-model="webhookModal" :meta="meta" />-->
+    <webhook-slider v-model="webhookModal" :meta="meta" />
   </div>
 </template>
 
@@ -112,15 +113,17 @@
 
 import FileSaver from 'file-saver'
 import { ExportTypes } from 'nocodb-sdk'
-import DropOrSelectFileModal from '~/components/import/dropOrSelectFileModal'
-import ColumnMappingModal from '~/components/project/spreadsheet/components/importExport/columnMappingModal'
+import DropOrSelectFileModal from '~/components/import/DropOrSelectFileModal'
+import ColumnMappingModal from '~/components/project/spreadsheet/components/importExport/ColumnMappingModal'
 import CSVTemplateAdapter from '~/components/import/templateParsers/CSVTemplateAdapter'
 import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
-import WebhookModal from '~/components/project/tableTabs/webhook/webhookModal'
+import WebhookModal from '~/components/project/tableTabs/webhook/WebhookModal'
+import WebhookSlider from '~/components/project/tableTabs/webhook/WebhookSlider'
 
 export default {
   name: 'ExportImport',
   components: {
+    WebhookSlider,
     WebhookModal,
     ColumnMappingModal,
     DropOrSelectFileModal
diff --git a/packages/nc-gui/components/project/spreadsheet/components/pagination.vue b/packages/nc-gui/components/project/spreadsheet/components/Pagination.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/pagination.vue
rename to packages/nc-gui/components/project/spreadsheet/components/Pagination.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/ShareViewMenu.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue
rename to packages/nc-gui/components/project/spreadsheet/components/ShareViewMenu.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/sharedViewsList.vue b/packages/nc-gui/components/project/spreadsheet/components/SharedViewsList.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/sharedViewsList.vue
rename to packages/nc-gui/components/project/spreadsheet/components/SharedViewsList.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
rename to packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
similarity index 97%
rename from packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
rename to packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
index 033f6bf2b8..ece4f7f95c 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
@@ -286,9 +286,23 @@
           </v-btn>
           <code-snippet v-model="codeSnippetModal" :query-params="queryParams" :meta="meta" :view="selectedView" />
         </div>
+        <div>
+          <v-btn
+            v-t="['c:actions:webhook']"
+            color="primary"
+            outlined
+            class="caption d-100 mt-2"
+            @click="webhookSliderModal=true"
+          >
+            <v-icon small class="mr-2">
+              mdi-hook
+            </v-icon> Webhooks
+          </v-btn>
+          <webhook-slider v-model="webhookSliderModal" :meta="meta" />
+        </div>
 
         <div
-          v-if="time - $store.state.windows.miniSponsorCard > 15 * 60 * 1000"
+          v-if="time - $store.state.settings.miniSponsorCard > 15 * 60 * 1000"
           class="pa-2 sponsor-wrapper"
         >
           <v-icon small class="close-icon" @click="hideMiniSponsorCard">
@@ -518,16 +532,17 @@
 <script>
 import draggable from 'vuedraggable'
 import { ViewTypes } from 'nocodb-sdk'
-import CreateViewDialog from '@/components/project/spreadsheet/dialog/createViewDialog'
-import Extras from '~/components/project/spreadsheet/components/extras'
+import CreateViewDialog from '~/components/project/spreadsheet/dialog/CreateViewDialog'
+import Extras from '~/components/project/spreadsheet/components/Extras'
 import viewIcons from '~/helpers/viewIcons'
 import { copyTextToClipboard } from '~/helpers/xutils'
-import SponsorMini from '~/components/sponsorMini'
-import CodeSnippet from '~/components/project/spreadsheet/components/codeSnippet'
+import SponsorMini from '~/components/SponsorMini'
+import CodeSnippet from '~/components/project/spreadsheet/components/CodeSnippet'
+import WebhookSlider from '~/components/project/tableTabs/webhook/WebhookSlider'
 
 export default {
   name: 'SpreadsheetNavDrawer',
-  components: { CodeSnippet, SponsorMini, Extras, CreateViewDialog, draggable },
+  components: { WebhookSlider, CodeSnippet, SponsorMini, Extras, CreateViewDialog, draggable },
   props: {
     extraViewParams: Object,
     showAdvanceOptions: Boolean,
@@ -563,6 +578,7 @@ export default {
     queryParams: Object
   },
   data: () => ({
+    webhookSliderModal: false,
     codeSnippetModal: false,
     drag: false,
     dragOptions: {
@@ -726,7 +742,7 @@ export default {
       this.$emit('loadTableData')
     },
     hideMiniSponsorCard() {
-      this.$store.commit('windows/MutMiniSponsorCard', Date.now())
+      this.$store.commit('settings/MutMiniSponsorCard', Date.now())
     },
     openCreateViewDlg(type) {
       const mainView = this.viewsList.find(
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell.vue b/packages/nc-gui/components/project/spreadsheet/components/VirtualCell.vue
similarity index 94%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/VirtualCell.vue
index 7f9ad805d0..94f2cef68b 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/VirtualCell.vue
@@ -100,12 +100,12 @@
 
 <script>
 import { UITypes } from 'nocodb-sdk'
-import RollupCell from './virtualCell/rollupCell'
-import FormulaCell from './virtualCell/formulaCell'
-import hasManyCell from './virtualCell/hasManyCell'
-import LookupCell from './virtualCell/lookupCell'
-import manyToManyCell from './virtualCell/manyToManyCell'
-import belongsToCell from './virtualCell/belongsToCell'
+import RollupCell from './virtualCell/RollupCell'
+import FormulaCell from './virtualCell/FormulaCell'
+import hasManyCell from './virtualCell/HasManyCell'
+import LookupCell from './virtualCell/LookupCell'
+import manyToManyCell from './virtualCell/ManyToManyCell'
+import belongsToCell from './virtualCell/BelongsToCell'
 
 // todo: optimize parent/child meta extraction
 
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue b/packages/nc-gui/components/project/spreadsheet/components/VirtualHeaderCell.vue
similarity index 98%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/VirtualHeaderCell.vue
index ba4bc46d68..21559a6f03 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/VirtualHeaderCell.vue
@@ -137,7 +137,7 @@
 <script>
 import { UITypes } from 'nocodb-sdk'
 import { getUIDTIcon } from '../helpers/uiTypes'
-import EditVirtualColumn from '@/components/project/spreadsheet/components/editVirtualColumn'
+import EditVirtualColumn from '~/components/project/spreadsheet/components/EditVirtualColumn'
 
 export default {
   name: 'VirtualHeaderCell',
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/attachmentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/AttachmentCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/attachmentCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/AttachmentCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/booleanCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/BooleanCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/booleanCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/BooleanCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/dateCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/DateCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/dateCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/DateCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/dateTimeCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/DateTimeCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/dateTimeCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/DateTimeCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/EmailCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/EmailCell.vue
new file mode 100644
index 0000000000..819bb144d2
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/EmailCell.vue
@@ -0,0 +1,22 @@
+<template>
+  <a v-if="isEmail" :href="`mailto:${value}`" target="_blank">{{ value }}</a>
+  <span v-else>{{ value }}</span>
+</template>
+
+<script>
+import { isEmail } from '~/helpers'
+
+export default {
+  name: 'EmailCell',
+  props: ['value'],
+  computed: {
+    isEmail() {
+      return isEmail(this.value || '')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
similarity index 95%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
index 5d2b7311b3..8855cae448 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
@@ -19,7 +19,7 @@ export default {
   props: ['value', 'column'],
   computed: {
     colors() {
-      const col = this.$store.state.windows.darkTheme ? colors.dark : colors.light
+      const col = this.$store.state.settings.darkTheme ? colors.dark : colors.light
       if (this.column && this.column.dtxp) {
         return this.column.dtxp.split(',').map(v => v.replace(/\\'/g, '\'').replace(/^'|'$/g, '')).reduce((obj, v, i) => ({
           ...obj,
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/jsonCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/JsonCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/jsonCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/JsonCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/setListCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/setListCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/timeCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/TimeCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/timeCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/TimeCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/UrlCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/UrlCell.vue
new file mode 100644
index 0000000000..a13e700d17
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/UrlCell.vue
@@ -0,0 +1,23 @@
+<template>
+  <a v-if="isValid" :href="value" target="_blank">{{ value }}</a>
+  <span v-else>{{ value }}</span>
+</template>
+
+<script>
+
+import { isValidURL } from '~/helpers'
+
+export default {
+  name: 'UrlCell',
+  props: ['value'],
+  computed: {
+    isValid() {
+      return this.value && isValidURL(this.value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/urlCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/urlCell.vue
deleted file mode 100644
index 73570d9fe3..0000000000
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/urlCell.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <a v-if="value" :href="value" target="_blank">{{ value }}</a>
-  <span v-else />
-</template>
-
-<script>
-export default {
-  name: 'UrlCell',
-  props: ['value']
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
similarity index 96%
rename from packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
index 5d0a756e87..25824a0521 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
@@ -9,12 +9,12 @@
         mdi-arrow-down-drop-circle
       </v-icon>
       <v-text-field
-        :autofocus="true"
         v-model="localState[i]"
-        @input="listenForComma(i, $event)"
+        :autofocus="true"
         class="caption"
         dense
         outlined
+        @input="listenForComma(i, $event)"
       />
       <v-icon class="ml-2" color="error lighten-2" size="13" @click="localState.splice(i,1)">
         mdi-close
@@ -47,7 +47,7 @@ export default {
   }),
   computed: {
     colors() {
-      return this.$store.state.windows.darkTheme ? colors.dark : colors.light
+      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
     }
   },
   watch: {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/formulaOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/FormulaOptions.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editColumn/formulaOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/FormulaOptions.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/lookupOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/LookupOptions.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editColumn/lookupOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/LookupOptions.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue
new file mode 100644
index 0000000000..62814823ca
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="nc-rating-wrapper ui-type">
+      <v-select
+        v-model="colMeta.icon"
+        label="Icon"
+        :items="icons"
+        dense
+        outlined
+        class="caption"
+        :item-value="v=>v"
+        :value-comparator="(a,b) => a && b && a.full === b.full && a.empty === b.empty"
+      >
+        <template #item="{ item }">
+          <v-icon small :color="colMeta.color">
+            {{ item.full }}
+          </v-icon>
+          <v-icon class="ml-2" small :color="colMeta.color">
+            {{ item.empty }}
+          </v-icon>
+        </template>
+        <template #selection="{ item }">
+          <v-icon small :color="colMeta.color">
+            {{ item.full }}
+          </v-icon>
+          <v-icon class="ml-2" small :color="colMeta.color">
+            {{ item.empty }}
+          </v-icon>
+        </template>
+      </v-select>
+      <v-select
+        v-model="colMeta.max"
+        label="Max"
+        :items="[1,2,3,4,5,6,7,8,9,10]"
+        dense
+        outlined
+        class="caption"
+      />
+    </div>
+    <v-color-picker
+      v-model="colMeta.color"
+      class="mx-auto"
+      hide-inputs
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'RatingOptions',
+  props: ['column', 'meta', 'value'],
+  data: () => ({
+    colMeta: {
+      icon: {
+        full: 'mdi-star',
+        empty: 'mdi-star-outline'
+      },
+      color: '#fcb401',
+      max: 5
+    },
+    icons: [{
+      full: 'mdi-star',
+      empty: 'mdi-star-outline'
+    }, {
+      full: 'mdi-heart',
+      empty: 'mdi-heart-outline'
+    }, {
+      full: 'mdi-moon-full',
+      empty: 'mdi-moon-new'
+    }, {
+      full: 'mdi-thumb-up',
+      empty: 'mdi-thumb-up-outline'
+    }, {
+      full: 'mdi-flag',
+      empty: 'mdi-flag-outline'
+    }]
+  }),
+  watch: {
+    value() {
+      this.colMeta = this.value || {}
+    },
+    colMeta(v) {
+      this.$emit('input', v)
+    }
+  },
+  created() {
+    this.colMeta = this.value || { ...this.colMeta }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.nc-rating-wrapper {
+  display: flex;
+  gap: 16px
+}
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/relationOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/RelationOptions.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editColumn/relationOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/RelationOptions.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/rollupOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/RollupOptions.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editColumn/rollupOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/RollupOptions.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/checkboxOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/checkboxOptions.vue
new file mode 100644
index 0000000000..c0f1d30dd5
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/checkboxOptions.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div class="nc-rating-wrapper ui-type">
+      <v-select
+        v-model="colMeta.icon"
+        label="Icon"
+        :items="icons"
+        dense
+        outlined
+        class="caption"
+        :item-value="v=>v"
+        :value-comparator="(a,b) => a && b && a.checked === b.checked && a.unchecked === b.unchecked"
+      >
+        <template #item="{ item }">
+          <v-icon small :color="colMeta.color">
+            {{ item.checked }}
+          </v-icon>
+          <v-icon class="ml-2" small :color="colMeta.color">
+            {{ item.unchecked }}
+          </v-icon>
+        </template>
+        <template #selection="{ item }">
+          <v-icon small :color="colMeta.color">
+            {{ item.checked }}
+          </v-icon>
+          <v-icon class="ml-2" small :color="colMeta.color">
+            {{ item.unchecked }}
+          </v-icon>
+        </template>
+      </v-select>
+    </div>
+    <v-color-picker
+      v-model="colMeta.color"
+      class="mx-auto"
+      hide-inputs
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'CheckboxOptions',
+  props: ['column', 'meta', 'value'],
+  data: () => ({
+    colMeta: {
+      icon: {
+        checked: 'mdi-check-bold',
+        unchecked: 'mdi-crop-square'
+      },
+      color: '#777'
+    },
+    icons: [{
+      checked: 'mdi-check-bold',
+      unchecked: 'mdi-crop-square'
+    }, {
+      checked: 'mdi-check-circle-outline',
+      unchecked: 'mdi-checkbox-blank-circle-outline'
+    }, {
+      checked: 'mdi-star',
+      unchecked: 'mdi-star-outline'
+    }, {
+      checked: 'mdi-heart',
+      unchecked: 'mdi-heart-outline'
+    }, {
+      checked: 'mdi-moon-full',
+      unchecked: 'mdi-moon-new'
+    }, {
+      checked: 'mdi-thumb-up',
+      unchecked: 'mdi-thumb-up-outline'
+    }, {
+      checked: 'mdi-flag',
+      unchecked: 'mdi-flag-outline'
+    }]
+  }),
+  watch: {
+    value() {
+      this.colMeta = this.value || {}
+    },
+    colMeta(v) {
+      this.$emit('input', v)
+    }
+  },
+  created() {
+    this.colMeta = this.value || { ...this.colMeta }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.nc-rating-wrapper {
+  display: flex;
+  gap: 16px
+}
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/booleanCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/BooleanCell.vue
similarity index 60%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/booleanCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/BooleanCell.vue
index 1bc356bc88..5d4dca75b8 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/booleanCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/BooleanCell.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="d-flex align-center " :class="{'justify-center':!isForm}">
-    <input v-model="localState" type="checkbox" v-on="parentListeners">
+  <div class="d-flex align-center " :class="{'justify-center':!isForm,'nc-cell-hover-show': !localState}">
+    <v-icon small :color="checkboxMeta.color" @click="toggle">
+      {{ localState ? checkedIcon :uncheckedIcon }}
+    </v-icon>
   </div>
 </template>
 
@@ -8,10 +10,19 @@
 export default {
   name: 'BooleanCell',
   props: {
+    column: Object,
     value: [String, Number, Boolean],
-    isForm: Boolean
+    isForm: Boolean,
+    readOnly: Boolean
   },
   computed: {
+
+    checkedIcon() {
+      return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.checked) || 'mdi-check-bold'
+    },
+    uncheckedIcon() {
+      return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.unchecked) || 'mdi-crop-square'
+    },
     localState: {
       get() {
         return this.value
@@ -20,14 +31,27 @@ export default {
         this.$emit('input', val)
       }
     },
-
     parentListeners() {
       const $listeners = {}
       return $listeners
+    },
+    checkboxMeta() {
+      return {
+        icon: {
+          checked: 'mdi-check-circle-outline',
+          unchecked: 'mdi-checkbox-blank-circle-outline'
+        },
+        color: 'primary',
+        ...(this.column && this.column.meta
+          ? this.column.meta
+          : {})
+      }
     }
   },
-  mounted() {
-    this.$el.focus()
+  methods: {
+    toggle() {
+      this.localState = !this.localState
+    }
   }
 }
 </script>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/datePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/DatePickerCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/datePickerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/DatePickerCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/dateTimePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/dateTimePickerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EditableAttachmentCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/EditableAttachmentCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableUrlCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EditableUrlCell.vue
similarity index 89%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/editableUrlCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/EditableUrlCell.vue
index c6bbfc18ae..78d1670b88 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableUrlCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EditableUrlCell.vue
@@ -8,7 +8,8 @@ import { isValidURL } from '@/helpers'
 export default {
   name: 'EditableUrlCell',
   props: {
-    value: String
+    value: String,
+    column: Object
   },
   computed: {
     localState: {
@@ -16,7 +17,11 @@ export default {
         return this.value
       },
       set(val) {
-        if (isValidURL(val)) { this.$emit('input', val) }
+        if (!(
+          this.column &&
+          this.column.meta &&
+          this.column.meta.validate
+        ) || isValidURL(val)) { this.$emit('input', val) }
       }
     },
     parentListeners() {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/enumListEditableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumRadioEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumRadioEditableCell.vue
similarity index 96%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/enumRadioEditableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumRadioEditableCell.vue
index 48339f2bd0..65c4b6f035 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumRadioEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumRadioEditableCell.vue
@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     colors() {
-      return this.$store.state.windows.darkTheme ? colors.dark : colors.light
+      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
     },
     localState: {
       get() {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/floatCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/FloatCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/floatCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/FloatCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/integerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/IntegerCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/integerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/IntegerCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/JsonEditableCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/JsonEditableCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/RatingCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/RatingCell.vue
new file mode 100644
index 0000000000..003c172d0d
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/RatingCell.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="d-100 h-100" :class="{'nc-cell-hover-show': localState == 0 || !localState}">
+    <v-rating
+      v-model="localState"
+      :length="ratingMeta.max"
+      dense
+      x-small
+      :disabled="readOnly"
+      clearable
+    >
+      <template #item="{isFilled, click}">
+        <v-icon v-if="isFilled" :size="15" :color="ratingMeta.color" @click="click">
+          {{ fullIcon }}
+        </v-icon>
+        <v-icon
+          v-else
+          :color="ratingMeta.color"
+          :size="15"
+          class="nc-cell-hover-show"
+          @click="click"
+        >
+          {{ emptyIcon }}
+        </v-icon>
+      </template>
+    </v-rating>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RatingCell',
+  props: {
+    column: Object,
+    value: [String, Number],
+    readOnly: Boolean
+  },
+  computed: {
+    fullIcon() {
+      return (this.ratingMeta && this.ratingMeta.icon && this.ratingMeta.icon.full) || 'mdi-star'
+    },
+    emptyIcon() {
+      return (this.ratingMeta && this.ratingMeta.icon && this.ratingMeta.icon.empty) || 'mdi-star-outline'
+    },
+    localState: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    ratingMeta() {
+      return {
+        icon: {
+          full: 'mdi-star',
+          empty: 'mdi-star-outline'
+        },
+        color: '#fcb401',
+        max: 5,
+        ...(this.column && this.column.meta
+          ? this.column.meta
+          : {})
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListCheckboxCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListCheckboxCell.vue
similarity index 96%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/setListCheckboxCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListCheckboxCell.vue
index 887391cbc6..7409c842e4 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListCheckboxCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListCheckboxCell.vue
@@ -29,7 +29,7 @@ export default {
   },
   computed: {
     colors() {
-      return this.$store.state.windows.darkTheme ? colors.dark : colors.light
+      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
     },
     localState: {
       get() {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/setListEditableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/textAreaCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/TextAreaCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/textAreaCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/TextAreaCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/textAreaCellOld.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/TextAreaCellOld.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/textAreaCellOld.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/TextAreaCellOld.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/textCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/TextCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/textCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/TextCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/timePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/TimePickerCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/timePickerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/TimePickerCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/importExport/columnMappingModal.vue b/packages/nc-gui/components/project/spreadsheet/components/importExport/ColumnMappingModal.vue
similarity index 95%
rename from packages/nc-gui/components/project/spreadsheet/components/importExport/columnMappingModal.vue
rename to packages/nc-gui/components/project/spreadsheet/components/importExport/ColumnMappingModal.vue
index a2ff286336..c65faf4ed8 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/importExport/columnMappingModal.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/importExport/ColumnMappingModal.vue
@@ -1,6 +1,7 @@
 <template>
   <v-dialog v-model="visible" max-width="800px">
-    <v-card>
+    <!-- Import CSV to existing Table -->
+    <v-card v-if="meta">
       <v-card-actions>
         <v-card-title>
           Table : {{ meta.title }}
@@ -99,12 +100,12 @@ export default {
     meta: Object,
     importDataColumns: Array,
     value: Boolean,
-    parsedCsv: Object
+    parsedCsv: Object,
   },
   data() {
     return {
       mappings: [],
-      valid: false
+      valid: false,
     }
   },
   computed: {
@@ -194,9 +195,11 @@ export default {
       this.mappings = []
       for (const col of this.importDataColumns) {
         const o = { sourceCn: col, enabled: true }
-        const tableColumn = this.meta.columns.find(c => c.title === col)
-        if (tableColumn) {
-          o.destCn = tableColumn.title
+        if (this.meta) {
+          const tableColumn = this.meta.columns.find(c => c.title === col)
+          if (tableColumn) {
+            o.destCn = tableColumn.title
+          }
         }
         this.mappings.push(o)
       }
@@ -204,7 +207,7 @@ export default {
     },
     getIcon(uidt) {
       return getUIDTIcon(uidt) || 'mdi-alpha-v-circle-outline'
-    }
+    },
   }
 }
 </script>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/belongsToCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/BelongsToCell.vue
similarity index 97%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/belongsToCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/BelongsToCell.vue
index 1f4c7fcd74..f23161552f 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/belongsToCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/BelongsToCell.vue
@@ -110,9 +110,9 @@
 <script>
 // import ApiFactory from '@/components/project/spreadsheet/apis/apiFactory'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
-import ListItems from '@/components/project/spreadsheet/components/virtualCell/components/listItems'
-import ListChildItems from '@/components/project/spreadsheet/components/virtualCell/components/listChildItems'
-import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/itemChip'
+import ListItems from '~/components/project/spreadsheet/components/virtualCell/components/ListItems'
+import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
+import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/ItemChip'
 import { parseIfInteger } from '@/helpers'
 
 export default {
@@ -210,7 +210,7 @@ export default {
     },
     // todo:
     form() {
-      return this.selectedParent && !this.isPublic ? () => import('@/components/project/spreadsheet/components/expandedForm') : 'span'
+      return this.selectedParent && !this.isPublic ? () => import('~/components/project/spreadsheet/components/ExpandedForm') : 'span'
     },
     cellValue() {
       if (this.value || this.localState) {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/formulaCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/FormulaCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/formulaCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/FormulaCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/hasManyCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/HasManyCell.vue
similarity index 96%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/hasManyCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/HasManyCell.vue
index 287ce0e566..d4ba5954ec 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/hasManyCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/HasManyCell.vue
@@ -146,14 +146,14 @@
 <script>
 // import ApiFactory from '@/components/project/spreadsheet/apis/apiFactory'
 import { isSystemColumn, RelationTypes, UITypes } from 'nocodb-sdk'
-import DlgLabelSubmitCancel from '@/components/utils/dlgLabelSubmitCancel'
-import Pagination from '@/components/project/spreadsheet/components/pagination'
-import ListItems from '@/components/project/spreadsheet/components/virtualCell/components/listItems'
-import ListChildItems from '@/components/project/spreadsheet/components/virtualCell/components/listChildItems'
+import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
+import Pagination from '~/components/project/spreadsheet/components/Pagination'
+import ListItems from '~/components/project/spreadsheet/components/virtualCell/components/ListItems'
+import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
 import listChildItemsModal
-from '@/components/project/spreadsheet/components/virtualCell/components/listChildItemsModal'
+from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItemsModal'
 import { parseIfInteger } from '@/helpers'
-import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/itemChip'
+import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/ItemChip'
 
 // todo: handling add new record for new row
 
@@ -246,7 +246,7 @@ export default {
     },
     // todo:
     form() {
-      return this.selectedChild && !this.isPublic ? () => import('@/components/project/spreadsheet/components/expandedForm') : 'span'
+      return this.selectedChild && !this.isPublic ? () => import('~/components/project/spreadsheet/components/ExpandedForm') : 'span'
     },
     childAvailableColumns() {
       // const hideCols = ['created_at', 'updated_at']
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/lookupCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/LookupCell.vue
similarity index 95%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/lookupCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/LookupCell.vue
index f802ce3349..bbf21860cf 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/lookupCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/LookupCell.vue
@@ -63,8 +63,8 @@
 
 <script>
 import { isVirtualCol, RelationTypes, UITypes } from 'nocodb-sdk'
-import TableCell from '../cell'
-import ItemChip from '@/components/project/spreadsheet/components/virtualCell/components/itemChip'
+import TableCell from '../Cell'
+import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/ItemChip'
 export default {
   name: 'LookupCell',
   components: {
@@ -95,7 +95,7 @@ export default {
   }),
   computed: {
     virtualCell() {
-      return this.lookupColumnMeta && isVirtualCol(this.lookupColumnMeta) ? () => import('@/components/project/spreadsheet/components/virtualCell') : 'div'
+      return this.lookupColumnMeta && isVirtualCol(this.lookupColumnMeta) ? () => import('~/components/project/spreadsheet/components/VirtualCell') : 'div'
     },
     // todo : optimize
     lookupApi() {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/manyToManyCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/ManyToManyCell.vue
similarity index 97%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/manyToManyCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/ManyToManyCell.vue
index 9ada97bc6a..3f3f923861 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/manyToManyCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/ManyToManyCell.vue
@@ -127,13 +127,13 @@
 
 <script>
 import { RelationTypes, UITypes } from 'nocodb-sdk'
-import DlgLabelSubmitCancel from '@/components/utils/dlgLabelSubmitCancel'
-import ListItems from '@/components/project/spreadsheet/components/virtualCell/components/listItems'
-import ListChildItems from '@/components/project/spreadsheet/components/virtualCell/components/listChildItems'
+import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
+import ListItems from '~/components/project/spreadsheet/components/virtualCell/components/ListItems'
+import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
 import listChildItemsModal
-from '@/components/project/spreadsheet/components/virtualCell/components/listChildItemsModal'
+from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItemsModal'
 import { parseIfInteger } from '@/helpers'
-import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/itemChip'
+import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/ItemChip'
 
 export default {
   name: 'ManyToManyCell',
@@ -272,7 +272,7 @@ export default {
     },
     // todo:
     form() {
-      return this.selectedChild && !this.isPublic ? () => import('@/components/project/spreadsheet/components/expandedForm') : 'span'
+      return this.selectedChild && !this.isPublic ? () => import('~/components/project/spreadsheet/components/ExpandedForm') : 'span'
     }
   },
   watch: {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/rollupCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/RollupCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/rollupCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/RollupCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/itemChip.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ItemChip.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/itemChip.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ItemChip.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listChildItems.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListChildItems.vue
similarity index 98%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listChildItems.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListChildItems.vue
index 3a9d8fb7b9..fdec1d9949 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listChildItems.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListChildItems.vue
@@ -115,7 +115,7 @@
 
 <script>
 import { RelationTypes } from 'nocodb-sdk'
-import Pagination from '@/components/project/spreadsheet/components/pagination'
+import Pagination from '~/components/project/spreadsheet/components/Pagination'
 
 export default {
   name: 'ListChildItems',
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listChildItemsModal.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListChildItemsModal.vue
similarity index 96%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listChildItemsModal.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListChildItemsModal.vue
index 7c4ad8fb96..a7fa454c05 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listChildItemsModal.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListChildItemsModal.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import ListChildItems from '@/components/project/spreadsheet/components/virtualCell/components/listChildItems'
+import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
 
 export default {
   name: 'ListChildItemsModal',
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listItems.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListItems.vue
similarity index 98%
rename from packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listItems.vue
rename to packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListItems.vue
index d29d828550..3eb772a24d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/listItems.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/components/ListItems.vue
@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import Pagination from '@/components/project/spreadsheet/components/pagination'
+import Pagination from '~/components/project/spreadsheet/components/Pagination'
 
 export default {
   name: 'ListItems',
diff --git a/packages/nc-gui/components/project/spreadsheet/dialog/createViewDialog.vue b/packages/nc-gui/components/project/spreadsheet/dialog/CreateViewDialog.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/dialog/createViewDialog.vue
rename to packages/nc-gui/components/project/spreadsheet/dialog/CreateViewDialog.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/cell.js b/packages/nc-gui/components/project/spreadsheet/mixins/cell.js
index c6fbccca6e..57880fd019 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/cell.js
+++ b/packages/nc-gui/components/project/spreadsheet/mixins/cell.js
@@ -56,9 +56,15 @@ export default {
     isURL() {
       return this.uiDatatype === 'URL'
     },
+    isEmail() {
+      return this.uiDatatype === UITypes.Email
+    },
     isAttachment() {
       return this.uiDatatype === 'Attachment'
     },
+    isRating() {
+      return this.uiDatatype === UITypes.Rating
+    },
     isCurrency() {
       return this.column.uidt == 'Currency'
     }
diff --git a/packages/nc-gui/components/project/spreadsheet/overlay/additinalFeatures.vue b/packages/nc-gui/components/project/spreadsheet/overlay/AdditinalFeatures.vue
similarity index 76%
rename from packages/nc-gui/components/project/spreadsheet/overlay/additinalFeatures.vue
rename to packages/nc-gui/components/project/spreadsheet/overlay/AdditinalFeatures.vue
index e079599a10..91720d042b 100644
--- a/packages/nc-gui/components/project/spreadsheet/overlay/additinalFeatures.vue
+++ b/packages/nc-gui/components/project/spreadsheet/overlay/AdditinalFeatures.vue
@@ -8,9 +8,9 @@
     z-index="9"
     width="max(90%,600px)"
   >
-    <!--    :color="$store.state.windows.darkTheme ? 'white' : 'black'"-->
-    <!--    :dark="$store.state.windows.darkTheme"-->
-    <!--    :light="!$store.state.windows.darkTheme"-->
+    <!--    :color="$store.state.settings.darkTheme ? 'white' : 'black'"-->
+    <!--    :dark="$store.state.settings.darkTheme"-->
+    <!--    :light="!$store.state.settings.darkTheme"-->
 
     <div class="feat-container backgroundColorDefault" style="position: relative; min-height: 500px">
       <!--    <v-card max-height="100%" min-width="95%" max-width="100%" style="overflow: auto">-->
@@ -72,14 +72,14 @@
 </template>
 
 <script>
-import TableAcl from '@/components/project/tableTabs/tableAcl'
-import Columns from '@/components/project/tableTabs/columns'
-import Indexes from '@/components/project/tableTabs/indexes'
-import Triggers from '@/components/project/tableTabs/triggers'
-import Webhooks from '@/components/project/tableTabs/webhooks'
-import Validation from '@/components/project/tableTabs/validation'
-import ViewColumns from '@/components/project/viewTabs/viewColumns'
-import SharedViewsList from '@/components/project/spreadsheet/components/sharedViewsList'
+import TableAcl from '~/components/project/tableTabs/TableAcl'
+import Columns from '~/components/project/tableTabs/Columns'
+import Indexes from '~/components/project/tableTabs/Indexes'
+import Triggers from '~/components/project/tableTabs/Triggers'
+import Webhooks from '~/components/project/tableTabs/Webhooks'
+import Validation from '~/components/project/tableTabs/Validation'
+import ViewColumns from '~/components/project/viewTabs/ViewColumns'
+import SharedViewsList from '~/components/project/spreadsheet/components/SharedViewsList'
 
 export default {
   name: 'AdditionalFeatures',
diff --git a/packages/nc-gui/components/project/spreadsheet/public/xcForm.vue b/packages/nc-gui/components/project/spreadsheet/public/XcForm.vue
similarity index 98%
rename from packages/nc-gui/components/project/spreadsheet/public/xcForm.vue
rename to packages/nc-gui/components/project/spreadsheet/public/XcForm.vue
index bada0f2b1a..8f7772fdcc 100644
--- a/packages/nc-gui/components/project/spreadsheet/public/xcForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/public/XcForm.vue
@@ -231,10 +231,10 @@ import { validationMixin } from 'vuelidate'
 import { required, minLength } from 'vuelidate/lib/validators'
 import { ErrorMessages, isVirtualCol, RelationTypes, UITypes, SqlUiFactory } from 'nocodb-sdk'
 import form from '../mixins/form'
-import VirtualHeaderCell from '../components/virtualHeaderCell'
-import HeaderCell from '../components/headerCell'
-import VirtualCell from '../components/virtualCell'
-import EditableCell from '../components/editableCell'
+import VirtualHeaderCell from '../components/VirtualHeaderCell'
+import HeaderCell from '../components/HeaderCell'
+import VirtualCell from '../components/VirtualCell'
+import EditableCell from '../components/EditableCell'
 
 export default {
   name: 'XcForm',
diff --git a/packages/nc-gui/components/project/spreadsheet/public/xcKanban.vue b/packages/nc-gui/components/project/spreadsheet/public/XcKanban.vue
similarity index 97%
rename from packages/nc-gui/components/project/spreadsheet/public/xcKanban.vue
rename to packages/nc-gui/components/project/spreadsheet/public/XcKanban.vue
index dad14f9ab0..295e55b900 100644
--- a/packages/nc-gui/components/project/spreadsheet/public/xcKanban.vue
+++ b/packages/nc-gui/components/project/spreadsheet/public/XcKanban.vue
@@ -62,11 +62,11 @@
 <script>
 /* eslint-disable camelcase */
 import spreadsheet from '../mixins/spreadsheet'
-import FieldsMenu from '../components/fieldsMenu'
-import SortListMenu from '../components/sortListMenu'
-import ColumnFilterMenu from '../components/columnFilterMenu'
-import CsvExportImport from '~/components/project/spreadsheet/components/moreActions'
-import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
+import FieldsMenu from '../components/FieldsMenu'
+import SortListMenu from '../components/SortListMenu'
+import ColumnFilterMenu from '../components/ColumnFilterMenu'
+import CsvExportImport from '~/components/project/spreadsheet/components/MoreActions'
+import KanbanView from '~/components/project/spreadsheet/views/KanbanView'
 export default {
   name: 'XcKanban',
   components: { CsvExportImport, ColumnFilterMenu, SortListMenu, FieldsMenu, KanbanView },
@@ -102,6 +102,7 @@ export default {
     selectedExpandRowIndex: null,
     selectedExpandRowMeta: null,
     meta: null,
+
     navDrawer: true,
     selected: {
       row: null,
diff --git a/packages/nc-gui/components/project/spreadsheet/public/xcTable.vue b/packages/nc-gui/components/project/spreadsheet/public/XcTable.vue
similarity index 98%
rename from packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
rename to packages/nc-gui/components/project/spreadsheet/public/XcTable.vue
index 96c6958cdf..7c7fa560d7 100644
--- a/packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/public/XcTable.vue
@@ -128,11 +128,11 @@
 import { ErrorMessages, SqlUiFactory } from 'nocodb-sdk'
 import spreadsheet from '../mixins/spreadsheet'
 import ApiFactory from '../apis/apiFactory'
-import FieldsMenu from '../components/fieldsMenu'
-import SortListMenu from '../components/sortListMenu'
-import ColumnFilterMenu from '../components/columnFilterMenu'
-import XcGridView from '../views/xcGridView'
-import CsvExportImport from '~/components/project/spreadsheet/components/moreActions'
+import FieldsMenu from '../components/FieldsMenu'
+import SortListMenu from '../components/SortListMenu'
+import ColumnFilterMenu from '../components/ColumnFilterMenu'
+import XcGridView from '../views/GridView'
+import CsvExportImport from '~/components/project/spreadsheet/components/MoreActions'
 
 export default {
   name: 'XcTable',
diff --git a/packages/nc-gui/components/project/spreadsheet/views/calendarView.vue b/packages/nc-gui/components/project/spreadsheet/views/CalendarView.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/views/calendarView.vue
rename to packages/nc-gui/components/project/spreadsheet/views/CalendarView.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/views/formView.vue b/packages/nc-gui/components/project/spreadsheet/views/FormView.vue
similarity index 82%
rename from packages/nc-gui/components/project/spreadsheet/views/formView.vue
rename to packages/nc-gui/components/project/spreadsheet/views/FormView.vue
index 5619f200c2..e3c8639b56 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/formView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/FormView.vue
@@ -91,7 +91,9 @@
                       :sql-ui="sqlUi"
                     />
                   </label>
-                  <v-icon color="grey"> mdi-drag </v-icon>
+                  <v-icon color="grey">
+                    mdi-drag
+                  </v-icon>
                 </div>
               </v-card>
               <div
@@ -110,7 +112,9 @@
             >
               <template #activator="{ on }">
                 <div class="grey--text caption text-center mt-4" v-on="on">
-                  <v-icon size="20" color="grey"> mdi-plus </v-icon>
+                  <v-icon size="20" color="grey">
+                    mdi-plus
+                  </v-icon>
                   <!--Add new field to this table-->
                   {{ $t("activity.addField") }}
                 </div>
@@ -225,13 +229,15 @@
                         :class="{ 'nc-show': isActiveRow(col) }"
                       >
                         <div class="d-flex align-center pb-2 mt-2">
-                          <v-icon small color="grey"> mdi-drag </v-icon>
+                          <v-icon small color="grey">
+                            mdi-drag
+                          </v-icon>
 
                           <label
                             class="grey--text caption ml-2"
                             @click="
                               (col.required = !col.required),
-                                updateColMeta(col, i)
+                              updateColMeta(col, i)
                             "
                           >
                             <!--Required-->
@@ -326,10 +332,10 @@
                         <div
                           v-if="
                             $v.virtual &&
-                            $v.virtual.$dirty &&
-                            $v.virtual[col.title] &&
-                            (!$v.virtual[col.title].required ||
-                              !$v.virtual[col.alias].minLength)
+                              $v.virtual.$dirty &&
+                              $v.virtual[col.title] &&
+                              (!$v.virtual[col.title].required ||
+                                !$v.virtual[col.alias].minLength)
                           "
                           class="error--text caption"
                         >
@@ -340,13 +346,13 @@
                         <template
                           v-if="
                             col.bt &&
-                            $v.localState &&
-                            $v.localState.$dirty &&
-                            $v.localState[
-                              meta.columns.find(
-                                (c) => c.column_name === col.bt.column_name
-                              ).title
-                            ]
+                              $v.localState &&
+                              $v.localState.$dirty &&
+                              $v.localState[
+                                meta.columns.find(
+                                  (c) => c.column_name === col.bt.column_name
+                                ).title
+                              ]
                           "
                         >
                           <div
@@ -367,8 +373,8 @@
                         <div
                           v-if="
                             col.ai ||
-                            (col.pk && !isNew) ||
-                            disabledColumns[col.title]
+                              (col.pk && !isNew) ||
+                              disabledColumns[col.title]
                           "
                           style="height: 100%; width: 100%"
                           class="caption xc-input"
@@ -385,7 +391,7 @@
                             readonly
                             disabled
                             :value="localState[col.title]"
-                          />
+                          >
                         </div>
 
                         <div v-else @click.stop>
@@ -406,8 +412,8 @@
                         <template
                           v-if="
                             $v.localState &&
-                            $v.localState.$dirty &&
-                            $v.localState[col.title]
+                              $v.localState.$dirty &&
+                              $v.localState[col.title]
                           "
                         >
                           <div
@@ -533,28 +539,28 @@
 </template>
 
 <script>
-import draggable from "vuedraggable";
-import { validationMixin } from "vuelidate";
-import { required, minLength } from "vuelidate/lib/validators";
+import draggable from 'vuedraggable'
+import { validationMixin } from 'vuelidate'
+import { required, minLength } from 'vuelidate/lib/validators'
 import {
   UITypes,
   isVirtualCol,
   RelationTypes,
-  getSystemColumns,
-} from "nocodb-sdk";
-import VirtualHeaderCell from "../components/virtualHeaderCell";
-import HeaderCell from "../components/headerCell";
-import VirtualCell from "../components/virtualCell";
-import EditableCell from "../components/editableCell";
-import Editable from "../components/editable";
-import EditColumn from "../components/editColumn";
-import form from "../mixins/form";
+  getSystemColumns
+} from 'nocodb-sdk'
+import VirtualHeaderCell from '../components/VirtualHeaderCell'
+import HeaderCell from '../components/HeaderCell'
+import VirtualCell from '../components/VirtualCell'
+import EditableCell from '../components/EditableCell'
+import Editable from '../components/Editable'
+import EditColumn from '../components/EditColumn'
+import form from '../mixins/form'
 
 // todo: generate hideCols based on default values
-const hiddenCols = ["created_at", "updated_at"];
+const hiddenCols = ['created_at', 'updated_at']
 
 export default {
-  name: "FormView",
+  name: 'FormView',
   components: {
     EditColumn,
     Editable,
@@ -562,23 +568,23 @@ export default {
     VirtualCell,
     HeaderCell,
     VirtualHeaderCell,
-    draggable,
+    draggable
   },
   mixins: [form, validationMixin],
   props: [
-    "meta",
-    "availableColumns",
-    "nodes",
-    "sqlUi",
-    "formParams",
-    "showFields",
-    "fieldsOrder",
-    "allColumns",
-    "dbAlias",
-    "api",
-    "id",
-    "viewId",
-    "viewTitle",
+    'meta',
+    'availableColumns',
+    'nodes',
+    'sqlUi',
+    'formParams',
+    'showFields',
+    'fieldsOrder',
+    'allColumns',
+    'dbAlias',
+    'api',
+    'id',
+    'viewId',
+    'viewTitle'
   ],
   data: () => ({
     isVirtualCol,
@@ -595,21 +601,21 @@ export default {
     virtual: {},
     formColumns: [],
     fields: [],
-    view: {},
+    view: {}
     // hiddenColumns: []
   }),
   validations() {
     const obj = {
       localState: {},
-      virtual: {},
-    };
+      virtual: {}
+    }
     for (const column of this.columns) {
       if (
         !this.localParams ||
         !this.localParams.fields ||
         !this.localParams.fields[column.title]
       ) {
-        continue;
+        continue
       }
       if (
         !column.virtual &&
@@ -617,16 +623,16 @@ export default {
           (column.pk && !(column.ai || column.default)) ||
           this.localParams.fields[column.title].required)
       ) {
-        obj.localState[column.title] = { required };
+        obj.localState[column.title] = { required }
       } else if (column.bt) {
         const col = this.meta.columns.find(
-          (c) => c.column_name === column.bt.column_name
-        );
+          c => c.column_name === column.bt.column_name
+        )
         if (
           (col.rqd && !col.default) ||
           this.localParams.fields[column.title].required
         ) {
-          obj.localState[col.title] = { required };
+          obj.localState[col.title] = { required }
         }
       } else if (
         column.virtual &&
@@ -635,249 +641,249 @@ export default {
       ) {
         obj.virtual[column.title] = {
           minLength: minLength(1),
-          required,
-        };
+          required
+        }
       }
     }
 
-    return obj;
+    return obj
   },
   computed: {
     systemFieldsIds() {
-      return getSystemColumns(this.fields).map((c) => c.fk_column_id);
+      return getSystemColumns(this.fields).map(c => c.fk_column_id)
     },
     emailMe: {
       get() {
         try {
-          const data = JSON.parse(this.view.email);
-          return data[this.$store.state.users.user.email];
+          const data = JSON.parse(this.view.email)
+          return data[this.$store.state.users.user.email]
         } catch (e) {}
-        return false;
+        return false
       },
       set(v) {
-        let data = {};
+        let data = {}
         try {
-          data = JSON.parse(this.view.email) || {};
+          data = JSON.parse(this.view.email) || {}
         } catch (e) {}
-        data[this.$store.state.users.user.email] = v;
-        this.view.email = JSON.stringify(data);
-        this.updateView();
-        this.checkSMTPStatus();
-      },
+        data[this.$store.state.users.user.email] = v
+        this.view.email = JSON.stringify(data)
+        this.updateView()
+        this.checkSMTPStatus()
+      }
     },
     allColumnsLoc() {
-      return this.fields; // this.mets.columns.filter(c => !hiddenCols.includes(c.column_name) && !(c.pk && c.ai) && this.meta.belongsTo.every(bt => c.column_name !== bt.column_name))
+      return this.fields // this.mets.columns.filter(c => !hiddenCols.includes(c.column_name) && !(c.pk && c.ai) && this.meta.belongsTo.every(bt => c.column_name !== bt.column_name))
     },
     isEditable() {
-      return this._isUIAllowed("editFormView");
+      return this._isUIAllowed('editFormView')
     },
     localParams: {
       get() {
-        return this.formParams || {};
+        return this.formParams || {}
       },
       set(params) {
-        this.$emit("update:formParams", params);
-      },
+        this.$emit('update:formParams', params)
+      }
     },
     hiddenColumns: {
       get() {
         return this.fields.filter(
-          (f) => !f.show && !this.systemFieldsIds.includes(f.fk_column_id)
-        );
+          f => !f.show && !this.systemFieldsIds.includes(f.fk_column_id)
+        )
       },
-      set(v) {},
+      set(v) {}
     },
     columns: {
       get() {
         return this.fields.filter(f => f.show && f.uidt != UITypes.Rollup && f.uidt != UITypes.Lookup).sort((a, b) => a.order - b.order)
       },
-      set(v) {},
-    },
+      set(v) {}
+    }
   },
   watch: {
-    "meta.columns"() {
+    'meta.columns'() {
       this.meta.columns.forEach((c) => {
         this.localParams.fields[c.title] =
-          this.localParams.fields[c.title] || {};
-      });
+          this.localParams.fields[c.title] || {}
+      })
     },
     submitted(val) {
       if (val && this.view.show_blank_form) {
-        this.secondsRemain = 5;
+        this.secondsRemain = 5
         const intvl = setInterval(() => {
           if (--this.secondsRemain < 0) {
-            this.submitted = false;
-            clearInterval(intvl);
+            this.submitted = false
+            clearInterval(intvl)
           }
-        }, 1000);
+        }, 1000)
       }
-    },
+    }
   },
   created() {
-    this.loadView();
+    this.loadView()
   },
   mounted() {
     const localParams = Object.assign(
       {
         name: this.meta.title,
-        description: "Form view description",
+        description: 'Form view description',
         submit: {},
         emailMe: {},
-        fields: {},
+        fields: {}
       },
       this.localParams
-    );
+    )
     this.availableColumns.forEach((c) => {
-      localParams.fields[c.title] = localParams.fields[c.title] || {};
-    });
-    this.localParams = localParams;
+      localParams.fields[c.title] = localParams.fields[c.title] || {}
+    })
+    this.localParams = localParams
     // this.columns = [...this.availableColumns]
     // this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.column_name === c1.column_name && c.title === c1.title))
   },
   methods: {
     onMove(event) {
       const { newIndex, element, oldIndex } =
-        event.added || event.moved || event.removed;
+        event.added || event.moved || event.removed
 
       if (event.added) {
-        this.$set(element, "show", true);
+        this.$set(element, 'show', true)
       }
 
       if (event.removed) {
-        this.$set(element, "show", false);
-        this.saveOrUpdateOrderOrVisibility(element, oldIndex);
+        this.$set(element, 'show', false)
+        this.saveOrUpdateOrderOrVisibility(element, oldIndex)
       } else {
         if (!this.columns.length || this.columns.length === 1) {
-          this.$set(element, "order", 1);
+          this.$set(element, 'order', 1)
         } else if (this.columns.length - 1 === newIndex) {
-          this.$set(element, "order", this.columns[newIndex - 1].order + 1);
+          this.$set(element, 'order', this.columns[newIndex - 1].order + 1)
         } else if (newIndex === 0) {
-          this.$set(element, "order", this.columns[1].order / 2);
+          this.$set(element, 'order', this.columns[1].order / 2)
         } else {
           this.$set(
             element,
-            "order",
+            'order',
             (this.columns[newIndex - 1].order +
               this.columns[newIndex + 1].order) /
               2
-          );
+          )
         }
-        this.saveOrUpdateOrderOrVisibility(element, newIndex);
+        this.saveOrUpdateOrderOrVisibility(element, newIndex)
       }
 
-      this.$e("a:form-view:reorder");
+      this.$e('a:form-view:reorder')
     },
 
     async saveOrUpdateOrderOrVisibility(field, i) {
-      const { fk_view_id, fk_column_id, order, show, id } = field;
+      const { fk_view_id, fk_column_id, order, show, id } = field
 
       if (id) {
         await this.$api.dbViewColumn.update(this.viewId, field.id, {
           fk_view_id,
           fk_column_id,
           order,
-          show,
-        });
+          show
+        })
       } else {
         field.id = (
           await this.$api.dbViewColumn.create(this.viewId, {
             fk_view_id,
             fk_column_id,
             order,
-            show,
+            show
           })
-        ).id;
+        ).id
       }
       this.$emit(
-        "update:fieldsOrder",
-        this.fields.map((c) => c.title)
-      );
+        'update:fieldsOrder',
+        this.fields.map(c => c.title)
+      )
     },
     async updateColMeta(col, i) {
       // todo: introduce debounce to avoid consecutive api call
       if (col.id) {
-        await this.$api.dbView.formColumnUpdate(col.id, col);
+        await this.$api.dbView.formColumnUpdate(col.id, col)
       }
     },
     async updateView() {
       if (this.view.subheading?.length > 255) {
-        this.$toast.error("Data too long for Form Description").goAway(3000);
-        return;
+        this.$toast.error('Data too long for Form Description').goAway(3000)
+        return
       }
-      await this.$api.dbView.formUpdate(this.viewId, this.view);
+      await this.$api.dbView.formUpdate(this.viewId, this.view)
     },
     async loadView() {
-      const { columns, ...view } = await this.$api.dbView.formRead(this.viewId);
-      this.view = view;
-      this.formColumns = columns;
-      let order = 1;
+      const { columns, ...view } = await this.$api.dbView.formRead(this.viewId)
+      this.view = view
+      this.formColumns = columns
+      let order = 1
       const fieldById = this.formColumns.reduce(
         (o, f) => ({
           ...o,
-          [f.fk_column_id]: f,
+          [f.fk_column_id]: f
         }),
         {}
-      );
+      )
 
-      const meta = this.$store.state.meta.metas[this.meta.id];
+      const meta = this.$store.state.meta.metas[this.meta.id]
       this.fields = meta.columns
-        .map((c) => ({
+        .map(c => ({
           ...c,
           fk_column_id: c.id,
           fk_view_id: this.viewId,
           ...(fieldById[c.id] ? fieldById[c.id] : {}),
           order: (fieldById[c.id] && fieldById[c.id].order) || order++,
-          id: fieldById[c.id] && fieldById[c.id].id,
+          id: fieldById[c.id] && fieldById[c.id].id
         }))
-        .sort((a, b) => a.order - b.order);
+        .sort((a, b) => a.order - b.order)
     },
     hideColumn(i) {
       if (this.isDbRequired(this.columns[i])) {
-        this.$toast.info("Required field can't be removed").goAway(3000);
-        return;
+        this.$toast.info("Required field can't be removed").goAway(3000)
+        return
       }
 
       this.saveOrUpdateOrderOrVisibility(
         {
           ...this.columns[i],
-          show: false,
+          show: false
         },
         i
-      );
-      this.$set(this.columns[i], "show", false);
+      )
+      this.$set(this.columns[i], 'show', false)
 
-      this.$e("a:form-view:hide-columns");
+      this.$e('a:form-view:hide-columns')
       // this.columns = this.columns.filter((_, j) => i !== j)
     },
     async addAllColumns() {
       for (const col of this.fields) {
         if (!this.systemFieldsIds.includes(col.fk_column_id)) {
-          this.$set(col, "show", true);
+          this.$set(col, 'show', true)
         }
       }
       await this.$api.dbView.showAllColumn(this.viewId, {
-        ignoreIds: this.systemFieldsIds,
-      });
+        ignoreIds: this.systemFieldsIds
+      })
       // this.columns = [...this.allColumnsLoc]
-      this.$e("a:form-view:add-all");
+      this.$e('a:form-view:add-all')
     },
     async removeAllColumns() {
       for (const col of this.fields) {
         if (this.isDbRequired(col)) {
-          continue;
+          continue
         }
-        this.$set(col, "show", false);
+        this.$set(col, 'show', false)
       }
       await this.$api.dbView.hideAllColumn(this.viewId, {
         ignoreIds: this.fields
           .filter(this.isDbRequired)
-          .map((f) => f.fk_column_id),
-      });
-      this.$e("a:form-view:remove-all");
+          .map(f => f.fk_column_id)
+      })
+      this.$e('a:form-view:remove-all')
     },
     isDbRequired(column) {
       if (hiddenCols.includes(column.fk_column_id)) {
-        return false;
+        return false
       }
 
       let isRequired =
@@ -889,128 +895,128 @@ export default {
           !column.cdf &&
           // confirm it's not foreign key
           !this.meta.columns.some(
-            (c) =>
+            c =>
               c.uidt === UITypes.LinkToAnotherRecord &&
               c.colOptions.type === RelationTypes.BELONGS_TO &&
               column.fk_column_id === c.colOptions.fk_child_column_id
           )) ||
         // primary column
-        (column.pk && !column.ai && !column.cdf);
+        (column.pk && !column.ai && !column.cdf)
       if (
         column.uidt === UITypes.LinkToAnotherRecord &&
         column.colOptions.type === RelationTypes.BELONGS_TO
       ) {
         const col = this.meta.columns.find(
-          (c) => c.id === column.colOptions.fk_child_column_id
-        );
+          c => c.id === column.colOptions.fk_child_column_id
+        )
         if (
           (col.rqd && !col.default) ||
           this.localParams.fields[column.title].required
         ) {
-          isRequired = true;
+          isRequired = true
         }
       }
 
-      return isRequired;
+      return isRequired
     },
     async checkSMTPStatus() {
       if (this.emailMe) {
-        const emailPluginActive = await this.$api.plugin.status("SMTP");
+        const emailPluginActive = await this.$api.plugin.status('SMTP')
         if (!emailPluginActive) {
-          this.emailMe = false;
+          this.emailMe = false
           this.$toast
             .info(
-              "Please activate SMTP plugin in App store for enabling email notification"
+              'Please activate SMTP plugin in App store for enabling email notification'
             )
-            .goAway(5000);
+            .goAway(5000)
         }
       }
     },
     updateCol(_, column, id) {
-      this.$set(this.localState, column, id);
+      this.$set(this.localState, column, id)
     },
     isActiveRow(col) {
-      return this.activeRow === col.title;
+      return this.activeRow === col.title
     },
     onClickOutside(col) {
-      this.activeRow = this.activeRow === col.title ? null : this.activeRow;
+      this.activeRow = this.activeRow === col.title ? null : this.activeRow
     },
     handleMouseUp(col) {
       if (!this.moved) {
-        const index = this.columns.length;
+        const index = this.columns.length
         // this.columns = [...this.columns, col]
-        col.order = (index ? this.columns[index - 1].order : 0) + 1;
-        this.$set(col, "show", true);
+        col.order = (index ? this.columns[index - 1].order : 0) + 1
+        this.$set(col, 'show', true)
         this.$nextTick(() => {
-          this.saveOrUpdateOrderOrVisibility(col, index);
-        });
+          this.saveOrUpdateOrderOrVisibility(col, index)
+        })
       }
     },
     async onNewColCreation(col) {
-      this.addNewColMenu = false;
-      this.addNewColModal = false;
-      this.$emit("onNewColCreation", col);
-      await this.$store.dispatch("meta/ActLoadMeta", {
+      this.addNewColMenu = false
+      this.addNewColModal = false
+      this.$emit('onNewColCreation', col)
+      await this.$store.dispatch('meta/ActLoadMeta', {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
         id: this.meta.id,
-        force: true,
-      });
+        force: true
+      })
 
-      await this.loadView();
+      await this.loadView()
 
-      this.$e("a:form-view:add-new-field");
+      this.$e('a:form-view:add-new-field')
     },
     async save() {
       try {
-        this.$v.$touch();
+        this.$v.$touch()
         if (this.$v.localState.$invalid) {
           this.$toast
-            .error("Provide values of all required field")
-            .goAway(3000);
+            .error('Provide values of all required field')
+            .goAway(3000)
 
-          return;
+          return
         }
 
-        this.loading = true;
+        this.loading = true
 
         let data = await this.$api.dbViewRow.create(
-          "noco",
+          'noco',
           this.projectName,
           this.meta.title,
           this.viewTitle,
           this.localState
-        );
+        )
 
-        data = { ...this.localState, ...data };
+        data = { ...this.localState, ...data }
 
         // save hasmany and manytomany relations from local state
         if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
           for (const vcell of this.$refs.virtual) {
             if (vcell.save) {
-              await vcell.save(data);
+              await vcell.save(data)
             }
           }
         }
 
-        this.virtual = {};
-        this.localState = {};
+        this.virtual = {}
+        this.localState = {}
 
-        this.submitted = true;
+        this.submitted = true
 
         this.$toast
-          .success(this.localParams.submit.message || "Saved successfully.", {
-            position: "bottom-right",
+          .success(this.localParams.submit.message || 'Saved successfully.', {
+            position: 'bottom-right'
           })
-          .goAway(3000);
+          .goAway(3000)
       } catch (e) {
-        console.log(e);
-        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000);
+        console.log(e)
+        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
       }
-      this.loading = false;
-    },
-  },
-};
+      this.loading = false
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue b/packages/nc-gui/components/project/spreadsheet/views/GalleryView.vue
similarity index 96%
rename from packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
rename to packages/nc-gui/components/project/spreadsheet/views/GalleryView.vue
index ae1075569e..3c59fa2c78 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/GalleryView.vue
@@ -94,10 +94,10 @@
 
 <script>
 import { isVirtualCol } from 'nocodb-sdk'
-import VirtualHeaderCell from '../components/virtualHeaderCell'
-import HeaderCell from '../components/headerCell'
-import VirtualCell from '../components/virtualCell'
-import TableCell from '../components/cell'
+import VirtualHeaderCell from '../components/VirtualHeaderCell'
+import HeaderCell from '../components/HeaderCell'
+import VirtualCell from '../components/VirtualCell'
+import TableCell from '../components/Cell'
 export default {
   name: 'GalleryView',
   components: {
diff --git a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue b/packages/nc-gui/components/project/spreadsheet/views/GridView.vue
similarity index 79%
rename from packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
rename to packages/nc-gui/components/project/spreadsheet/views/GridView.vue
index e5faaf2893..54987b88a5 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/GridView.vue
@@ -17,7 +17,7 @@
           <th
             class="grey-border caption"
             :class="
-              $store.state.windows.darkTheme
+              $store.state.settings.darkTheme
                 ? 'grey darken-3 grey--text text--lighten-1'
                 : 'grey lighten-4 grey--text text--darken-2'
             "
@@ -43,7 +43,7 @@
             v-xc-ver-resize
             class="grey-border caption font-wight-regular nc-grid-header-cell"
             :class="
-              $store.state.windows.darkTheme
+              $store.state.settings.darkTheme
                 ? 'grey darken-3 grey--text text--lighten-1'
                 : 'grey lighten-4  grey--text text--darken-2'
             "
@@ -87,20 +87,22 @@
           <th
             v-if="
               !isLocked &&
-              !isVirtual &&
-              !isPublicView &&
-              _isUIAllowed('add-column')
+                !isVirtual &&
+                !isPublicView &&
+                _isUIAllowed('add-column')
             "
             v-t="['c:column:add']"
             :class="
-              $store.state.windows.darkTheme
+              $store.state.settings.darkTheme
                 ? 'grey darken-3 grey--text text--lighten-1'
                 : 'grey lighten-4  grey--text text--darken-2'
             "
             class="grey-border new-column-header pointer nc-grid-header-cell"
             @click="addNewColMenu = true"
           >
-            <v-icon small @click="addNewColMenu = true"> mdi-plus </v-icon>
+            <v-icon small @click="addNewColMenu = true">
+              mdi-plus
+            </v-icon>
             <v-menu v-model="addNewColMenu" offset-y content-class="" left>
               <template #activator="{ on }">
                 <span v-on="on" />
@@ -137,8 +139,7 @@
                 v-show="!rowMeta || !rowMeta.selected"
                 class="ml-2 grey--text"
                 :class="{ 'row-no': !isPublicView }"
-                >{{ row + 1 }}</span
-              >
+                >{{ row + 1 }}</span>
 
               <template v-if="!isPublicView">
                 <v-checkbox
@@ -170,7 +171,9 @@
 
               <template v-if="saving">
                 <v-spacer />
-                <v-icon small> mdi-spin mdi-loading </v-icon>
+                <v-icon small>
+                  mdi-spin mdi-loading
+                </v-icon>
               </template>
             </div>
           </td>
@@ -234,7 +237,7 @@
                   !isPublicView &&
                   editEnabled.col === col &&
                   editEnabled.row === row) ||
-                enableEditable(columnObj)
+                  enableEditable(columnObj)
               "
               v-model="rowObj[columnObj.title]"
               :column="columnObj"
@@ -276,10 +279,10 @@
         <tr
           v-if="
             !isView &&
-            !isLocked &&
-            !isPublicView &&
-            isEditable &&
-            relationType !== 'bt'
+              !isLocked &&
+              !isPublicView &&
+              isEditable &&
+              relationType !== 'bt'
           "
         >
           <td
@@ -290,7 +293,9 @@
           >
             <v-tooltip top>
               <template #activator="{ on }">
-                <v-icon small color="pink" v-on="on"> mdi-plus </v-icon>
+                <v-icon small color="pink" v-on="on">
+                  mdi-plus
+                </v-icon>
                 <span class="ml-1 caption grey--text">
                   {{ $t("activity.addRow") }}
                 </span>
@@ -315,21 +320,21 @@
 </template>
 
 <script>
-import { isVirtualCol } from "nocodb-sdk";
-import HeaderCell from "../components/headerCell";
-import EditableCell from "../components/editableCell";
-import EditColumn from "../components/editColumn";
+import { isVirtualCol } from 'nocodb-sdk'
+import HeaderCell from '../components/HeaderCell'
+import EditableCell from '../components/EditableCell'
+import EditColumn from '../components/EditColumn'
 // import columnStyling from '../helpers/columnStyling'
-import VirtualCell from "../components/virtualCell";
-import VirtualHeaderCell from "../components/virtualHeaderCell";
-import colors from "@/mixins/colors";
-import TableCell from "@/components/project/spreadsheet/components/cell";
-import DynamicStyle from "@/components/dynamicStyle";
-import { UITypes } from "~/components/project/spreadsheet/helpers/uiTypes";
-import { copyTextToClipboard } from "~/helpers/xutils";
+import VirtualCell from '../components/VirtualCell'
+import VirtualHeaderCell from '../components/VirtualHeaderCell'
+import colors from '@/mixins/colors'
+import TableCell from '~/components/project/spreadsheet/components/Cell'
+import DynamicStyle from '~/components/DynamicStyle'
+import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
+import { copyTextToClipboard } from '~/helpers/xutils'
 
 export default {
-  name: "XcGridView",
+  name: 'XcGridView',
   components: {
     DynamicStyle,
     VirtualHeaderCell,
@@ -337,7 +342,7 @@ export default {
     TableCell,
     EditColumn,
     EditableCell,
-    HeaderCell,
+    HeaderCell
   },
   mixins: [colors],
   props: {
@@ -365,7 +370,7 @@ export default {
     // columnsWidth: { type: Object },
     isPkAvail: Boolean,
     password: String,
-    viewId: String,
+    viewId: String
   },
   data: () => ({
     resizingCol: null,
@@ -376,30 +381,30 @@ export default {
     addNewColMenu: false,
     selected: {
       row: null,
-      col: null,
+      col: null
     },
     editEnabled: {
       row: null,
-      col: null,
+      col: null
     },
     aggCount: [],
     dragOver: false,
     gridViewCols: {},
-    unsaved: false,
+    unsaved: false
   }),
   computed: {
     selectAll: {
       get() {
         return !!(
           this.data.length &&
-          this.data.every((d) => d.rowMeta && d.rowMeta.selected)
-        );
+          this.data.every(d => d.rowMeta && d.rowMeta.selected)
+        )
       },
       set(v) {
         for (const d of this.data) {
-          this.$set(d.rowMeta, "selected", v);
+          this.$set(d.rowMeta, 'selected', v)
         }
-      },
+      }
     },
     ids() {
       return (
@@ -408,122 +413,122 @@ export default {
           this.data &&
           this.data.map(({ oldRow }) =>
             this.meta.columns
-              .filter((c) => c.pk)
-              .map((c) => oldRow[c.title])
-              .join("___")
+              .filter(c => c.pk)
+              .map(c => oldRow[c.title])
+              .join('___')
           )) ||
         []
-      );
+      )
     },
     haveHasManyrelation() {
-      return !!Object.keys(this.hasMany).length;
+      return !!Object.keys(this.hasMany).length
     },
     colLength() {
-      return (this.availableColumns && this.availableColumns.length) || 0;
+      return (this.availableColumns && this.availableColumns.length) || 0
     },
     rowLength() {
-      return (this.data && this.data.length) || 0;
+      return (this.data && this.data.length) || 0
     },
     availColNames() {
       return (
-        (this.availableColumns && this.availableColumns.map((c) => c.title)) ||
+        (this.availableColumns && this.availableColumns.map(c => c.title)) ||
         []
-      );
+      )
     },
     groupedAggCount() {
       // eslint-disable-next-line camelcase
       return this.aggCount
         ? this.aggCount.reduce(
-            (o, { row_id, count }) => ({
-              ...o,
-              [row_id]: count,
-            }),
-            {}
-          )
-        : {};
+          (o, { row_id, count }) => ({
+            ...o,
+            [row_id]: count
+          }),
+          {}
+        )
+        : {}
     },
     style() {
-      let style = "";
+      let style = ''
       for (const c of this.availableColumns) {
         const val =
           (this.gridViewCols &&
             this.gridViewCols[c.id] &&
             this.gridViewCols[c.id].width) ||
-          "200px";
+          '200px'
 
         if (val && c.key !== this.resizingCol) {
-          style += `[data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`;
+          style += `[data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`
         }
       }
 
-      return style;
-    },
+      return style
+    }
     // resizeColStyle() {
     //   return this.resizingCol ? ` [data-col="${this.resizingCol}"]{min-width:${this.resizingColWidth};max-width:${this.resizingColWidth};width:${this.resizingColWidth};}` : ''
     // }
   },
   watch: {
     data() {
-      this.xcAuditModelCommentsCount();
+      this.xcAuditModelCommentsCount()
     },
     viewId(v, o) {
       if (v !== o) {
-        this.loadGridViewCols();
+        this.loadGridViewCols()
       }
-    },
+    }
   },
   mounted() {
     // this.calculateColumnWidth()
   },
   created() {
-    document.addEventListener("keydown", this.onKeyDown);
-    this.loadGridViewCols();
-    this.xcAuditModelCommentsCount();
-    const self = this;
-    window.addEventListener("beforeunload", function () {
+    document.addEventListener('keydown', this.onKeyDown)
+    this.loadGridViewCols()
+    this.xcAuditModelCommentsCount()
+    const self = this
+    window.addEventListener('beforeunload', function() {
       if (self.unsaved) {
         if (self.editEnabled.row != null && self.editEnabled.row != null) {
-          const columnObj = self.availableColumns[self.editEnabled.col];
+          const columnObj = self.availableColumns[self.editEnabled.col]
           self.onCellValueChange(
             self.editEnabled.col,
             self.editEnabled.row,
             columnObj,
             true
-          );
+          )
         }
       }
-    });
+    })
   },
   beforeDestroy() {
-    document.removeEventListener("keydown", this.onKeyDown);
+    document.removeEventListener('keydown', this.onKeyDown)
   },
   methods: {
     async loadGridViewCols() {
       if (!this.viewId) {
-        return;
+        return
       }
-      const colsData = await this.$api.dbView.gridColumnsList(this.viewId);
+      const colsData = await this.$api.dbView.gridColumnsList(this.viewId)
       this.gridViewCols = colsData.reduce(
         (o, col) => ({
           ...o,
-          [col.fk_column_id]: col,
+          [col.fk_column_id]: col
         }),
         {}
-      );
+      )
     },
     onFileDrop(event) {
-      this.$emit("drop", event);
+      this.$emit('drop', event)
     },
     isRequired(_columnObj, rowObj, ignoreCurrentValue = false) {
       if (this.isPublicView || this.loading) {
-        return false;
+        return false
       }
 
-      let columnObj = _columnObj;
+      let columnObj = _columnObj
       if (columnObj.bt) {
         columnObj = this.meta.columns.find(
-          (c) => c.column_name === columnObj.bt.column_name
-        );
+          c => c.column_name === columnObj.bt.column_name
+        )
       }
 
       return (
@@ -533,11 +538,11 @@ export default {
           rowObj[columnObj.title] === undefined ||
           rowObj[columnObj.title] === null) &&
         !columnObj.default
-      );
+      )
     },
     updateCol(row, column, value, columnObj, colIndex, rowIndex) {
-      this.$set(row, column, value);
-      this.onCellValueChange(colIndex, rowIndex, columnObj, true);
+      this.$set(row, column, value)
+      this.onCellValueChange(colIndex, rowIndex, columnObj, true)
     },
     calculateColumnWidth() {
       // setTimeout(() => {
@@ -557,21 +562,21 @@ export default {
     },
     isCentrallyAligned(col) {
       return ![
-        "SingleLineText",
-        "LongText",
-        "Attachment",
-        "Date",
-        "Time",
-        "Email",
-        "URL",
-        "DateTime",
-        "CreateTime",
-        "LastModifiedTime",
-      ].includes(col.uidt);
+        'SingleLineText',
+        'LongText',
+        'Attachment',
+        'Date',
+        'Time',
+        'Email',
+        'URL',
+        'DateTime',
+        'CreateTime',
+        'LastModifiedTime'
+      ].includes(col.uidt)
     },
     async xcAuditModelCommentsCount() {
       if (this.isPublicView || !this.data || !this.data.length) {
-        return;
+        return
       }
       // const aggCount = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
       //   dbAlias: this.nodes.dbAlias
@@ -586,12 +591,12 @@ export default {
       this.aggCount = await this.$api.utils.commentCount({
         ids: this.data.map(({ row: r }) => {
           return this.meta.columns
-            .filter((c) => c.pk)
-            .map((c) => r[c.title])
-            .join("___");
+            .filter(c => c.pk)
+            .map(c => r[c.title])
+            .join('___')
         }),
-        fk_model_id: this.meta.id,
-      });
+        fk_model_id: this.meta.id
+      })
     },
 
     async onKeyDown(e) {
@@ -600,101 +605,100 @@ export default {
         this.selected.row === null ||
         this.isLocked
       ) {
-        return;
+        return
       }
 
       switch (e.keyCode) {
         // tab
         case 9:
-          e.preventDefault();
+          e.preventDefault()
           this.editEnabled = {
             col: null,
-            row: null,
-          };
+            row: null
+          }
           if (e.shiftKey) {
             if (this.selected.col > 0) {
-              this.selected.col--;
+              this.selected.col--
             } else if (this.selected.row > 0) {
-              this.selected.row--;
-              this.selected.col = this.colLength - 1;
+              this.selected.row--
+              this.selected.col = this.colLength - 1
             }
           } else if (this.selected.col < this.colLength - 1) {
-            this.selected.col++;
+            this.selected.col++
           } else if (this.selected.row < this.rowLength - 1) {
-            this.selected.row++;
-            this.selected.col = 0;
+            this.selected.row++
+            this.selected.col = 0
           }
 
-          break;
+          break
         // delete
-        case 46:
-          {
-            if (this.editEnabled.col != null && this.editEnabled.row != null) {
-              return;
-            }
+        case 46: {
+          if (this.editEnabled.col != null && this.editEnabled.row != null) {
+            return
+          }
 
-            const rowObj = this.data[this.selected.row].row;
-            const columnObj = this.availableColumns[this.selected.col];
+          const rowObj = this.data[this.selected.row].row
+          const columnObj = this.availableColumns[this.selected.col]
 
-            if (
-              // this.isRequired(columnObj, rowObj, true) ||
-              columnObj.virtual
-            ) {
-              return;
-            }
-
-            this.$set(rowObj, columnObj.title, null);
-            // update/save cell value
-            this.onCellValueChange(
-              this.selected.col,
-              this.selected.row,
-              columnObj,
-              true
-            );
+          if (
+            // this.isRequired(columnObj, rowObj, true) ||
+            columnObj.virtual
+          ) {
+            return
           }
-          break;
+
+          this.$set(rowObj, columnObj.title, null)
+          // update/save cell value
+          this.onCellValueChange(
+            this.selected.col,
+            this.selected.row,
+            columnObj,
+            true
+          )
+        }
+          break
         // left
         case 37:
           if (this.selected.col > 0) {
-            this.selected.col--;
+            this.selected.col--
           }
-          break;
+          break
         // right
         case 39:
           if (this.selected.col < this.colLength - 1) {
-            this.selected.col++;
+            this.selected.col++
           }
-          break;
+          break
         // up
         case 38:
           if (this.selected.row > 0) {
-            this.selected.row--;
+            this.selected.row--
           }
-          break;
+          break
         // down
         case 40:
           if (this.selected.row < this.rowLength - 1) {
-            this.selected.row++;
+            this.selected.row++
           }
-          break;
+          break
         // enter
         case 13:
-          this.makeEditable(this.selected.col, this.selected.row);
-          break;
+          this.makeEditable(this.selected.col, this.selected.row)
+          break
         default: {
           if (this.editEnabled.col != null && this.editEnabled.row != null) {
-            return;
+            return
           }
 
-          const rowObj = this.data[this.selected.row].row;
-          const columnObj = this.availableColumns[this.selected.col];
+          const rowObj = this.data[this.selected.row].row
+          const columnObj = this.availableColumns[this.selected.col]
 
           if (e.metaKey || e.ctrlKey) {
             switch (e.keyCode) {
               // copy - ctrl/cmd +c
               case 67:
-                copyTextToClipboard(rowObj[columnObj.title] || "");
-                break;
+                copyTextToClipboard(rowObj[columnObj.title] || '')
+                break
               // // paste ctrl/cmd + v
               // case 86: {
               //   const text = await navigator.clipboard.readText()
@@ -705,7 +709,7 @@ export default {
           }
 
           if (e.ctrlKey || e.altKey || e.metaKey) {
-            return;
+            return
           }
 
           if (e.key && e.key.length === 1) {
@@ -714,15 +718,15 @@ export default {
                 .info(
                   "Update not allowed for table which doesn't have primary Key"
                 )
-                .goAway(3000);
+                .goAway(3000)
             }
 
             this.$set(
               this.data[this.selected.row].row,
               this.availableColumns[this.selected.col].title,
-              ""
-            );
-            this.editEnabled = { ...this.selected };
+              ''
+            )
+            this.editEnabled = { ...this.selected }
           }
         }
       }
@@ -730,81 +734,81 @@ export default {
     onClickOutside() {
       if (
         (this.meta.columns &&
-        this.meta.columns[this.selected.col] &&
-        this.meta.columns[this.selected.col].virtual) ||
+          this.meta.columns[this.selected.col] &&
+          this.meta.columns[this.selected.col].virtual) ||
         (this.availableColumns &&
-        this.availableColumns[this.editEnabled.col] &&
-        this.availableColumns[this.editEnabled.col].uidt === "JSON")
+          this.availableColumns[this.editEnabled.col] &&
+          this.availableColumns[this.editEnabled.col].uidt === 'JSON')
       ) {
-        return;
+        return
       }
-      this.selected.col = null;
-      this.selected.row = null;
-      this.editEnabled.col = null;
-      this.editEnabled.row = null;
+      this.selected.col = null
+      this.selected.row = null
+      this.editEnabled.col = null
+      this.editEnabled.row = null
     },
     onNewColCreation(col, oldCol) {
-      this.addNewColMenu = false;
-      this.addNewColModal = false;
-      this.$emit("onNewColCreation", col, oldCol);
+      this.addNewColMenu = false
+      this.addNewColModal = false
+      this.$emit('onNewColCreation', col, oldCol)
     },
     expandRow(...args) {
-      this.$emit("expandRow", ...args);
-      this.$e("c:row-expand");
+      this.$emit('expandRow', ...args)
+      this.$e('c:row-expand')
     },
     showRowContextMenu($event, rowObj, rowMeta, row, ...rest) {
-      this.$emit("showRowContextMenu", $event, rowObj, rowMeta, row, ...rest);
+      this.$emit('showRowContextMenu', $event, rowObj, rowMeta, row, ...rest)
     },
     onCellValueChange(col, row, column, saved) {
-      this.$emit("onCellValueChange", col, row, column, saved);
+      this.$emit('onCellValueChange', col, row, column, saved)
       if (saved) {
-        this.unsaved = false;
+        this.unsaved = false
       }
     },
     navigateToNext() {
       if (this.selected.row < this.rowLength - 1) {
-        this.selected.row++;
+        this.selected.row++
       }
     },
     navigateToPrev() {
       if (this.selected.row > 0) {
-        this.selected.row--;
+        this.selected.row--
       }
     },
     makeSelected(col, row) {
       if (this.selected.col !== col || this.selected.row !== row) {
         this.selected = {
           col,
-          row,
-        };
-        this.editEnabled = {};
+          row
+        }
+        this.editEnabled = {}
       }
     },
     makeEditable(col, row, _, rowMeta) {
       if (this.isPublicView || !this.isEditable || this.isView) {
-        return;
+        return
       }
 
       if (!this.isPkAvail && !rowMeta.new) {
         return this.$toast
           .info("Update not allowed for table which doesn't have primary Key")
-          .goAway(3000);
+          .goAway(3000)
       }
       if (this.availableColumns[col].ai) {
         return this.$toast
-          .info("Auto Increment field is not editable")
-          .goAway(3000);
+          .info('Auto Increment field is not editable')
+          .goAway(3000)
       }
       if (this.availableColumns[col].pk && !this.data[row].rowMeta.new) {
         return this.$toast
-          .info("Editing primary key not supported")
-          .goAway(3000);
+          .info('Editing primary key not supported')
+          .goAway(3000)
       }
       if (this.editEnabled.col !== col || this.editEnabled.row !== row) {
         this.editEnabled = {
           col,
-          row,
-        };
+          row
+        }
       }
     },
     enableEditable(column) {
@@ -815,39 +819,40 @@ export default {
         (column && column.uidt === UITypes.DateTime) ||
         (column && column.uidt === UITypes.Date) ||
         (column && column.uidt === UITypes.Time) ||
+        (column && column.uidt === UITypes.Rating) ||
         (this.sqlUi &&
           column.dt &&
-          this.sqlUi.getAbstractType(column) === "boolean")
-      );
+          this.sqlUi.getAbstractType(column) === 'boolean')
+      )
     },
     insertNewRow(atEnd = false, expand = false) {
-      this.$emit("insertNewRow", atEnd, expand);
+      this.$emit('insertNewRow', atEnd, expand)
     },
     async onresize(colId, size) {
       const gridColId =
         this.gridViewCols &&
         this.gridViewCols[colId] &&
-        this.gridViewCols[colId].id;
+        this.gridViewCols[colId].id
       if (!gridColId) {
-        return;
+        return
       }
-      this.$set(this.gridViewCols[colId], "width", size);
-      if (this._isUIAllowed("gridColUpdate")) {
+      this.$set(this.gridViewCols[colId], 'width', size)
+      if (this._isUIAllowed('gridColUpdate')) {
         await this.$api.dbView.gridColumnUpdate(gridColId, {
-          width: size,
-        });
+          width: size
+        })
       }
       // this.$emit('update:columnsWidth', { ...this.columnsWidth, [col]: size })
     },
     onXcResizing(_cn, width) {
-      this.resizingCol = _cn;
-      this.resizingColWidth = width;
+      this.resizingCol = _cn
+      this.resizingColWidth = width
     },
     log(e, s) {
-      console.log(e.target, s);
-    },
-  },
-};
+      console.log(e.target, s)
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -925,7 +930,7 @@ export default {
   }
 
   .search-field.v-text-field.v-text-field--solo.v-input--dense
-    > .v-input__control {
+  > .v-input__control {
     min-height: auto;
   }
 
@@ -1158,4 +1163,18 @@ td:first-child {
 .has-many-icon {
   transform: rotate(90deg);
 }
+
+::v-deep {
+  tr {
+    .nc-cell-hover-show {
+      opacity: 0;
+      transition: .3s opacity;
+    }
+
+    &:hover .nc-cell-hover-show {
+      opacity: .7;
+    }
+  }
+}
+
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue b/packages/nc-gui/components/project/spreadsheet/views/KanbanView.vue
similarity index 97%
rename from packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue
rename to packages/nc-gui/components/project/spreadsheet/views/KanbanView.vue
index e427a8ee65..f517254556 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/KanbanView.vue
@@ -102,11 +102,11 @@
 </template>
 
 <script>
-import VirtualHeaderCell from '../components/virtualHeaderCell'
-import HeaderCell from '../components/headerCell'
-import VirtualCell from '../components/virtualCell'
-import TableCell from '../components/cell'
-import EnumCell from '../components/cell/enumCell'
+import VirtualHeaderCell from '../components/VirtualHeaderCell'
+import HeaderCell from '../components/HeaderCell'
+import VirtualCell from '../components/VirtualCell'
+import TableCell from '../components/Cell'
+import EnumCell from '../components/cell/EnumCell'
 export default {
   name: 'KanbanView',
   components: { TableCell, VirtualCell, HeaderCell, VirtualHeaderCell, EnumCell },
diff --git a/packages/nc-gui/components/project/tableTabs/aclGql.vue b/packages/nc-gui/components/project/tableTabs/AclGql.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/aclGql.vue
rename to packages/nc-gui/components/project/tableTabs/AclGql.vue
diff --git a/packages/nc-gui/components/project/tableTabs/aclGrpcDb.vue b/packages/nc-gui/components/project/tableTabs/AclGrpcDb.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/aclGrpcDb.vue
rename to packages/nc-gui/components/project/tableTabs/AclGrpcDb.vue
diff --git a/packages/nc-gui/components/project/tableTabs/aclJs.vue b/packages/nc-gui/components/project/tableTabs/AclJs.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/aclJs.vue
rename to packages/nc-gui/components/project/tableTabs/AclJs.vue
diff --git a/packages/nc-gui/components/project/tableTabs/aclTsFile.vue b/packages/nc-gui/components/project/tableTabs/AclTsFile.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/aclTsFile.vue
rename to packages/nc-gui/components/project/tableTabs/AclTsFile.vue
index c34afecd57..591fad9ac7 100644
--- a/packages/nc-gui/components/project/tableTabs/aclTsFile.vue
+++ b/packages/nc-gui/components/project/tableTabs/AclTsFile.vue
@@ -103,7 +103,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import aclTsFileChild from './aclTsFileChild'
+import aclTsFileChild from './AclTsFileChild'
 
 // const {shell, path} = require("electron").remote.require('./libs');
 
diff --git a/packages/nc-gui/components/project/tableTabs/aclTsFileChild.vue b/packages/nc-gui/components/project/tableTabs/AclTsFileChild.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/aclTsFileChild.vue
rename to packages/nc-gui/components/project/tableTabs/AclTsFileChild.vue
diff --git a/packages/nc-gui/components/project/tableTabs/aclTsFileDb.vue b/packages/nc-gui/components/project/tableTabs/AclTsFileDb.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/aclTsFileDb.vue
rename to packages/nc-gui/components/project/tableTabs/AclTsFileDb.vue
index 1f348fc25a..b537b86b60 100644
--- a/packages/nc-gui/components/project/tableTabs/aclTsFileDb.vue
+++ b/packages/nc-gui/components/project/tableTabs/AclTsFileDb.vue
@@ -109,7 +109,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import AclTypeormDbChild from './aclTsFileDbChild'
+import AclTypeormDbChild from './AclTsFileDbChild'
 
 // const {shell, path} = require("electron").remote.require('./libs');
 
diff --git a/packages/nc-gui/components/project/tableTabs/aclTsFileDbChild.vue b/packages/nc-gui/components/project/tableTabs/AclTsFileDbChild.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/aclTsFileDbChild.vue
rename to packages/nc-gui/components/project/tableTabs/AclTsFileDbChild.vue
index 3a477f9b17..4fbabadda3 100644
--- a/packages/nc-gui/components/project/tableTabs/aclTsFileDbChild.vue
+++ b/packages/nc-gui/components/project/tableTabs/AclTsFileDbChild.vue
@@ -215,7 +215,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import HandlerCodeEditor from '../restHandlerCodeEditor'
+import HandlerCodeEditor from '../RestHandlerCodeEditor'
 
 // const {fs, importFresh, shell, path} = require("electron").remote.require('./libs');
 
diff --git a/packages/nc-gui/components/project/tableTabs/aclTsFileDbGql.vue b/packages/nc-gui/components/project/tableTabs/AclTsFileDbGql.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/aclTsFileDbGql.vue
rename to packages/nc-gui/components/project/tableTabs/AclTsFileDbGql.vue
diff --git a/packages/nc-gui/components/project/tableTabs/aclTsFileGql.vue b/packages/nc-gui/components/project/tableTabs/AclTsFileGql.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/aclTsFileGql.vue
rename to packages/nc-gui/components/project/tableTabs/AclTsFileGql.vue
diff --git a/packages/nc-gui/components/project/tableTabs/columns.vue b/packages/nc-gui/components/project/tableTabs/Columns.vue
similarity index 97%
rename from packages/nc-gui/components/project/tableTabs/columns.vue
rename to packages/nc-gui/components/project/tableTabs/Columns.vue
index 034699fd2b..c6c91a26e8 100644
--- a/packages/nc-gui/components/project/tableTabs/columns.vue
+++ b/packages/nc-gui/components/project/tableTabs/Columns.vue
@@ -63,7 +63,7 @@
         </x-btn>
 
         <x-btn
-          v-if="$store.state.windows.scaffoldOnSave && projectIsGraphql && !isNoApis"
+          v-if="$store.state.settings.scaffoldOnSave && projectIsGraphql && !isNoApis"
           v-ge="['columns','save-and-scaffold']"
           tooltip="Save & Scaffold Changes"
           outlined
@@ -79,7 +79,7 @@
         </x-btn>
 
         <x-btn
-          v-else-if="$store.state.windows.scaffoldOnSave && !isNoApis"
+          v-else-if="$store.state.settings.scaffoldOnSave && !isNoApis"
           v-ge="['columns','save-and-scaffold']"
           tooltip="Save & Scaffold Changes"
           outlined
@@ -710,10 +710,10 @@
 import { mapGetters, mapActions } from 'vuex'
 import JSON5 from 'json5'
 import { SqlUiFactory } from 'nocodb-sdk'
-import addRelationDlg from '../dlgs/dlgAddRelation.vue'
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel.vue'
+import addRelationDlg from '../dlgs/DlgAddRelation.vue'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel.vue'
 
-import jsonToColumn from './columnActions/jsonToColumn'
+import jsonToColumn from './columnActions/JsonToColumn'
 import uiTypes from '@/components/project/spreadsheet/helpers/uiTypes'
 
 // const {path} = require("electron").remote.require(
@@ -849,12 +849,12 @@ export default {
     loadJsonColumn(jsonString) {
       try {
         const columns = this.sqlUi.getColumnsFromJson(JSON5.parse(jsonString), this.nodes.table_name)
-        const dup = columns.find(col => this.columns.some(exCol => exCol.column_name === col.column_name))
+        const dup = Columns.find(col => this.columns.some(exCol => exCol.column_name === col.column_name))
         if (!dup) {
-          this.columns = [...this.columns, ...columns]
+          this.columns = [...this.columns, ...Columns]
           this.showJsonToColumDlg = false
           this.edited = true
-          this.$toast.info(`${columns.length} column${columns.length > 1 ? 's' : ''} added`).goAway(3000)
+          this.$toast.info(`${Columns.length} column${Columns.length > 1 ? 's' : ''} added`).goAway(3000)
         } else {
           this.$toast.error(`Duplicate column found : ${dup.column_name}`).goAway(3000)
         }
@@ -970,17 +970,17 @@ export default {
 
         for (let i = 0; i < relations.length; i++) {
           const relation = relations[i]
-          for (let i = 0; i < columns.length; i++) {
-            const column = columns[i]
+          for (let i = 0; i < Columns.length; i++) {
+            const column = Columns[i]
 
             if (column.column_name === relation.column_name) {
-              columns[i] = { ...column, ...relation }
+              Columns[i] = { ...column, ...relation }
             }
           }
         }
 
-        this.columns = JSON.parse(JSON.stringify(columns))
-        this.originalColumns = [...columns]
+        this.columns = JSON.parse(JSON.stringify(Columns))
+        this.originalColumns = [...Columns]
       } catch (e) {
         console.log(e)
         this.$toast.error('Error loading columns :' + e).goAway(4000)
@@ -1061,7 +1061,7 @@ export default {
     closeScale() {
     },
     removeUnsigned(columns) {
-      this.sqlUi.removeUnsigned(columns)
+      this.sqlUi.removeUnsigned(Columns)
     },
     async reload() {
       await this.loadColumnList()
@@ -1084,14 +1084,14 @@ export default {
             this.columns.splice(this.selectedColForDelete.index, 1)
           } else {
             const columns = JSON.parse(JSON.stringify(this.columns))
-            columns[this.selectedColForDelete.index].altered = 4
+            Columns[this.selectedColForDelete.index].altered = 4
             await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [{
               env: this.nodes.env,
               dbAlias: this.nodes.dbAlias
             }, 'tableUpdate', {
               tn: this.nodes.table_name,
               originalColumns: this.originalColumns,
-              columns
+              Columns
             }])
             this.columns.splice(this.selectedColForDelete.index, 1)
             this.$toast.success('Column deleted successfully').goAway(3000)
diff --git a/packages/nc-gui/components/project/tableTabs/columnsMock.vue b/packages/nc-gui/components/project/tableTabs/ColumnsMock.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/columnsMock.vue
rename to packages/nc-gui/components/project/tableTabs/ColumnsMock.vue
index 148584adc5..1d4da19e90 100644
--- a/packages/nc-gui/components/project/tableTabs/columnsMock.vue
+++ b/packages/nc-gui/components/project/tableTabs/ColumnsMock.vue
@@ -354,8 +354,8 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import addRelationDlg from '../dlgs/dlgAddRelation.vue'
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel.vue'
+import addRelationDlg from '../dlgs/DlgAddRelation.vue'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel.vue'
 
 export default {
   components: { addRelationDlg, dlgLabelSubmitCancel },
diff --git a/packages/nc-gui/components/project/tableTabs/constraints.vue b/packages/nc-gui/components/project/tableTabs/Constraints.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/constraints.vue
rename to packages/nc-gui/components/project/tableTabs/Constraints.vue
diff --git a/packages/nc-gui/components/project/tableTabs/customAcl.vue b/packages/nc-gui/components/project/tableTabs/CustomAcl.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/customAcl.vue
rename to packages/nc-gui/components/project/tableTabs/CustomAcl.vue
diff --git a/packages/nc-gui/components/project/tableTabs/indexes.vue b/packages/nc-gui/components/project/tableTabs/Indexes.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/indexes.vue
rename to packages/nc-gui/components/project/tableTabs/Indexes.vue
index 6925bd712e..0280fb8bae 100644
--- a/packages/nc-gui/components/project/tableTabs/indexes.vue
+++ b/packages/nc-gui/components/project/tableTabs/Indexes.vue
@@ -229,7 +229,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { Splitpanes, Pane } from 'splitpanes'
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel'
 
 export default {
   components: { dlgLabelSubmitCancel, Splitpanes, Pane },
@@ -663,8 +663,8 @@ export default {
     },
 
     createAggregatedIndexesList(indexes) {
-      for (let i = 0; i < indexes.length; i++) {
-        const index = { ...indexes[i] }
+      for (let i = 0; i < Indexes.length; i++) {
+        const index = { ...Indexes[i] }
         let found = 0
         for (let j = 0; j < this.aggregatedIndexes.length; j++) {
           const aggregatedIndex = this.aggregatedIndexes[j]
diff --git a/packages/nc-gui/components/project/tableTabs/logicGql.vue b/packages/nc-gui/components/project/tableTabs/LogicGql.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/logicGql.vue
rename to packages/nc-gui/components/project/tableTabs/LogicGql.vue
index d50f639a3b..1407a1f089 100644
--- a/packages/nc-gui/components/project/tableTabs/logicGql.vue
+++ b/packages/nc-gui/components/project/tableTabs/LogicGql.vue
@@ -231,9 +231,9 @@
 </template>
 
 <script>
-import GqlHandlerCodeEditor from '@/components/project/gqlHandlerCodeEditor'
+import GqlHandlerCodeEditor from '~/components/project/GqlHandlerCodeEditor'
 import MonacoEditor from '@/components/monaco/MonacoEditor'
-import XcDiff from '@/components/xcDiff'
+import XcDiff from '~/components/XcDiff'
 
 export default {
   name: 'LogicGql',
diff --git a/packages/nc-gui/components/project/tableTabs/logicGrpc.vue b/packages/nc-gui/components/project/tableTabs/LogicGrpc.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/logicGrpc.vue
rename to packages/nc-gui/components/project/tableTabs/LogicGrpc.vue
index 17d412b966..7c5a92a4d0 100644
--- a/packages/nc-gui/components/project/tableTabs/logicGrpc.vue
+++ b/packages/nc-gui/components/project/tableTabs/LogicGrpc.vue
@@ -203,7 +203,7 @@
 
 <script>
 
-import GrpcHandlerCodeEditor from '@/components/project/grpcHandlerCodeEditor'
+import GrpcHandlerCodeEditor from '~/components/project/GrpcHandlerCodeEditor'
 import MonacoEditor from '~/components/monaco/MonacoEditor'
 
 export default {
diff --git a/packages/nc-gui/components/project/tableTabs/logicRest.vue b/packages/nc-gui/components/project/tableTabs/LogicRest.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/logicRest.vue
rename to packages/nc-gui/components/project/tableTabs/LogicRest.vue
index f275ede095..cf68932fa7 100644
--- a/packages/nc-gui/components/project/tableTabs/logicRest.vue
+++ b/packages/nc-gui/components/project/tableTabs/LogicRest.vue
@@ -244,7 +244,7 @@
 </template>
 
 <script>
-import HandlerCodeEditor from '@/components/project/restHandlerCodeEditor'
+import HandlerCodeEditor from '~/components/project/RestHandlerCodeEditor'
 import MonacoJsonEditor from '@/components/monaco/MonacoJsonEditor'
 
 export default {
diff --git a/packages/nc-gui/components/project/tableTabs/mocks.vue b/packages/nc-gui/components/project/tableTabs/Mocks.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/mocks.vue
rename to packages/nc-gui/components/project/tableTabs/Mocks.vue
diff --git a/packages/nc-gui/components/project/tableTabs/relations.vue b/packages/nc-gui/components/project/tableTabs/Relations.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/relations.vue
rename to packages/nc-gui/components/project/tableTabs/Relations.vue
diff --git a/packages/nc-gui/components/project/tableTabs/rows.vue b/packages/nc-gui/components/project/tableTabs/Rows.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/rows.vue
rename to packages/nc-gui/components/project/tableTabs/Rows.vue
index 37ec550105..7050cc7e19 100644
--- a/packages/nc-gui/components/project/tableTabs/rows.vue
+++ b/packages/nc-gui/components/project/tableTabs/Rows.vue
@@ -180,7 +180,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel.vue'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel.vue'
 import findDataTypeMapping from '../../../helpers/findDataTypeMapping.js'
 
 export default {
diff --git a/packages/nc-gui/components/project/tableTabs/tableAcl.vue b/packages/nc-gui/components/project/tableTabs/TableAcl.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/tableAcl.vue
rename to packages/nc-gui/components/project/tableTabs/TableAcl.vue
index 99de7f2ea4..759fe02ac7 100644
--- a/packages/nc-gui/components/project/tableTabs/tableAcl.vue
+++ b/packages/nc-gui/components/project/tableTabs/TableAcl.vue
@@ -73,7 +73,7 @@
         <v-overlay v-model="showCustomAcl" absolute>
           <template #default>
             <v-card
-              :light="!$store.state.windows.darkTheme"
+              :light="!$store.state.settings.darkTheme"
               class="ma-2"
               style="max-height: 100%; overflow: auto; min-height:70vh"
             >
@@ -272,7 +272,7 @@
 // import debounce from "@/helpers/debounce";
 // import CustomAcl from "./customAcl";
 
-import CustomAcl from './customAcl'
+import CustomAcl from './CustomAcl'
 
 export default {
   name: 'TableAcl',
diff --git a/packages/nc-gui/components/project/tableTabs/triggers.vue b/packages/nc-gui/components/project/tableTabs/Triggers.vue
similarity index 98%
rename from packages/nc-gui/components/project/tableTabs/triggers.vue
rename to packages/nc-gui/components/project/tableTabs/Triggers.vue
index 4e0c5e61d8..28fc76f54d 100644
--- a/packages/nc-gui/components/project/tableTabs/triggers.vue
+++ b/packages/nc-gui/components/project/tableTabs/Triggers.vue
@@ -137,8 +137,8 @@
 <script>
 import { mapGetters } from 'vuex'
 
-import triggerAddEditDlg from '../dlgs/dlgTriggerAddEdit'
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel'
+import triggerAddEditDlg from '../dlgs/DlgTriggerAddEdit'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel'
 
 export default {
   components: { triggerAddEditDlg, dlgLabelSubmitCancel },
diff --git a/packages/nc-gui/components/project/tableTabs/validation.vue b/packages/nc-gui/components/project/tableTabs/Validation.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/validation.vue
rename to packages/nc-gui/components/project/tableTabs/Validation.vue
diff --git a/packages/nc-gui/components/project/tableTabs/webhooks.vue b/packages/nc-gui/components/project/tableTabs/Webhooks.vue
similarity index 99%
rename from packages/nc-gui/components/project/tableTabs/webhooks.vue
rename to packages/nc-gui/components/project/tableTabs/Webhooks.vue
index 855e1f200a..92d6b1bc75 100644
--- a/packages/nc-gui/components/project/tableTabs/webhooks.vue
+++ b/packages/nc-gui/components/project/tableTabs/Webhooks.vue
@@ -371,7 +371,7 @@
                   </v-tooltip>
                   <br>
                   <a
-                    href="https://docs.nocodb.com/developer-resources/webhooks/"
+                    href="https://docs.nocodb.com/developer-resources/webhooks/Webhooks.vue"
                   >
                     <!--Document Reference-->
                     {{ $t("labels.docReference") }}
@@ -399,11 +399,11 @@
 </template>
 
 <script>
-import HttpWebhook from './webhook/httpWebhook'
-import ColumnFilter from '~/components/project/spreadsheet/components/columnFilter'
+import HttpWebhook from './webhook/HttpWebhook'
+import ColumnFilter from '~/components/project/spreadsheet/components/ColumnFilter'
 // import FormInput from '~/components/project/appStore/FormInput'
-import WebhookEvent from '~/components/project/tableTabs/webhook/webhookEvent'
-import WebhooksTest from '~/components/project/tableTabs/webhook/webhooksTest'
+import WebhookEvent from '~/components/project/tableTabs/webhook/WebhookEvent'
+import WebhooksTest from '~/components/project/tableTabs/webhook/WebhooksTest'
 
 export default {
   name: 'Webhooks',
diff --git a/packages/nc-gui/components/project/tableTabs/columnActions/jsonToColumn.vue b/packages/nc-gui/components/project/tableTabs/columnActions/JsonToColumn.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/columnActions/jsonToColumn.vue
rename to packages/nc-gui/components/project/tableTabs/columnActions/JsonToColumn.vue
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue b/packages/nc-gui/components/project/tableTabs/webhook/HttpWebhook.vue
similarity index 97%
rename from packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue
rename to packages/nc-gui/components/project/tableTabs/webhook/HttpWebhook.vue
index 995a3b9c08..acbb408bff 100644
--- a/packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/HttpWebhook.vue
@@ -81,8 +81,8 @@
 </template>
 
 <script>
-import params from '../../../apiClient/params'
-import headers from '../../../apiClient/headers'
+import params from '../../../apiClient/Params'
+import headers from '../../../apiClient/Headers'
 
 import { MonacoHandlebarEditor } from '../../../monaco/index'
 
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/webhookEditor.vue b/packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue
similarity index 87%
rename from packages/nc-gui/components/project/tableTabs/webhook/webhookEditor.vue
rename to packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue
index 7cfe8969b8..e850c7de67 100644
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhookEditor.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue
@@ -1,43 +1,41 @@
 <template>
   <v-form v-if="hook" ref="form" v-model="valid" class="mx-4" lazy-validation>
-    <v-card-title>
-      <a class="pointer mr-1" @click="$emit('backToList')">
-        <v-icon>mdi-arrow-left-bold</v-icon>
+    <div>
+      <a class="pointer mx-4" @click="$emit('backToList')">
+        <v-icon class="ml-n1">mdi-arrow-left-bold</v-icon>
       </a>
-
-      <v-spacer />
+    </div>
+    <v-card-title>
       {{ meta.title }} : {{ hook.title || 'Webhook' }}
       <v-spacer />
-      <div style="width: 24px;height: 24px" />
-    </v-card-title>
-
-    <div class="mx-4 d-flex m-2">
-      <v-spacer />
-      <v-btn
-        outlined
-        tooltip="Save"
-        small
-        :disabled="loading || !valid || !hook.event"
-        @click.prevent="$refs.webhookTest.testWebhook()"
-      >
-        Test webhook
-      </v-btn>
-      <v-btn
-        outlined
-        tooltip="Save"
-        color="primary"
-        small
-        :disabled="loading || !valid || !hook.event"
-        @click.prevent="saveHooks"
-      >
-        <v-icon small left>
-          save
-        </v-icon>
-        <!-- Save -->
-        {{ $t("general.save") }}
-      </v-btn>
-    </div>
 
+      <div class="d-flex ">
+        <v-spacer />
+        <v-btn
+          outlined
+          tooltip="Save"
+          small
+          :disabled="loading || !valid || !hook.event"
+          @click.prevent="$refs.webhookTest.testWebhook()"
+        >
+          Test webhook
+        </v-btn>
+        <v-btn
+          tooltip="Save"
+          color="primary"
+          small
+          :disabled="loading || !valid || !hook.event"
+          @click.prevent="saveHooks"
+        >
+          <v-icon small left>
+            save
+          </v-icon>
+          <!-- Save -->
+          {{ $t("general.save") }}
+        </v-btn>
+      </div>
+    </v-card-title>
+    <v-divider class="my-4" />
     <v-card-text>
       <v-text-field
         v-model="hook.title"
@@ -48,61 +46,38 @@
         required
         :rules="[(v) => !!v || `${$t('general.required')}`]"
       />
-
-      <webhook-event
-        :event.sync="hook.event"
-        :operation.sync="hook.operation"
-      />
-
-      <v-card class="mb-8 nc-filter-wrapper">
-        <v-card-text>
-          <v-checkbox
-            v-model="hook.condition"
-            dense
-            hide-details
-            class="mt-1"
-            label="On Condition"
+      <v-row>
+        <v-col>
+          <webhook-event
+            :event.sync="hook.event"
+            :operation.sync="hook.operation"
           />
-
-          <column-filter
-            v-if="hook.condition"
-            :key="key"
-            ref="filter"
-            v-model="filters"
-            :meta="meta"
-            :field-list="fieldList"
+        </v-col><v-col>
+          <v-select
+            v-model="hook.notification.type"
+            outlined
             dense
-            style="max-width: 100%"
-            :hook-id="hook.id"
-            web-hook
-          />
-        </v-card-text>
-      </v-card>
-
-      <v-select
-        v-model="hook.notification.type"
-        outlined
-        dense
-        :label="$t('general.notification')"
-        required
-        :items="notificationList"
-        :rules="[(v) => !!v || `${$t('general.required')}`]"
-        class="caption"
-        :prepend-inner-icon="notificationIcon[hook.notification.type]"
-        @change="onNotTypeChange"
-      >
-        <template #item="{ item }">
-          <v-list-item-icon>
-            <v-icon small>
-              {{ notificationIcon[item] }}
-            </v-icon>
-          </v-list-item-icon>
-          <v-list-item-title>
-            {{ item }}
-          </v-list-item-title>
-        </template>
-      </v-select>
-
+            :label="$t('general.notification')"
+            required
+            :items="notificationList"
+            :rules="[(v) => !!v || `${$t('general.required')}`]"
+            class="caption"
+            :prepend-inner-icon="notificationIcon[hook.notification.type]"
+            @change="onNotTypeChange"
+          >
+            <template #item="{ item }">
+              <v-list-item-icon>
+                <v-icon small>
+                  {{ notificationIcon[item] }}
+                </v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>
+                {{ item }}
+              </v-list-item-title>
+            </template>
+          </v-select>
+        </v-col>
+      </v-row>
       <template v-if="hook.notification.type === 'URL'">
         <http-webhook v-model="notification" />
       </template>
@@ -196,6 +171,32 @@
       </template>
     </v-card-text>
 
+    <v-card-text>
+      <v-card class=" nc-filter-wrapper ">
+        <v-card-text>
+          <v-checkbox
+            v-model="hook.condition"
+            dense
+            hide-details
+            class="mt-1"
+            label="On Condition"
+          />
+
+          <column-filter
+            v-if="hook.condition"
+            :key="key"
+            ref="filter"
+            v-model="filters"
+            :meta="meta"
+            :field-list="fieldList"
+            dense
+            style="max-width: 100%"
+            :hook-id="hook.id"
+            web-hook
+          />
+        </v-card-text>
+      </v-card>
+    </v-card-text>
     <v-card-text>
       <span class="caption grey--text">
         <em>Available context variables are
@@ -243,10 +244,10 @@
 </template>
 
 <script>
-import WebhooksTest from '~/components/project/tableTabs/webhook/webhooksTest'
-import WebhookEvent from '~/components/project/tableTabs/webhook/webhookEvent'
-import HttpWebhook from '~/components/project/tableTabs/webhook/httpWebhook'
-import ColumnFilter from '~/components/project/spreadsheet/components/columnFilter'
+import WebhooksTest from '~/components/project/tableTabs/webhook/WebhooksTest'
+import WebhookEvent from '~/components/project/tableTabs/webhook/WebhookEvent'
+import HttpWebhook from '~/components/project/tableTabs/webhook/HttpWebhook'
+import ColumnFilter from '~/components/project/spreadsheet/components/ColumnFilter'
 export default {
   name: 'WebhookEditor',
   components: { ColumnFilter, HttpWebhook, WebhookEvent, WebhooksTest },
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/webhookEvent.vue b/packages/nc-gui/components/project/tableTabs/webhook/WebhookEvent.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/webhook/webhookEvent.vue
rename to packages/nc-gui/components/project/tableTabs/webhook/WebhookEvent.vue
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/WebhookList.vue b/packages/nc-gui/components/project/tableTabs/webhook/WebhookList.vue
new file mode 100644
index 0000000000..14223cbd10
--- /dev/null
+++ b/packages/nc-gui/components/project/tableTabs/webhook/WebhookList.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <v-card-title>
+      <span class="text-capitalize mr-1">{{ meta.title }}</span> : Webhooks
+      <v-spacer />
+      <v-btn
+        tooltip="Save"
+        class="primary"
+        @click.prevent="$emit('add')"
+      >
+        Create Webhook
+      </v-btn>
+    </v-card-title>
+
+    <v-divider />
+
+    <div v-if="hooks " class="pa-6">
+      <template v-if=" hooks.length">
+        <v-card v-for="(hook,i) in hooks" :key="hook.id" max-width="500px" class="mx-auto elevation-0 backgroundColor nc-hook mb-4" @click="$emit('edit', hook)">
+          <div class="d-flex">
+            <v-icon class="ml-4">
+              mdi-hook
+            </v-icon>
+            <div class="pa-4 flex-grow-1">
+              <div class="d-flex">
+                <h4 class="nc-text mb-2">
+                  {{ hook.title }}
+                </h4>
+
+                <v-spacer />
+                <!--Notify Via-->
+                <span class="caption textColor1--text mt-1">{{
+                  $t("labels.notifyVia")
+                }} : {{ hook.notification && hook.notification.type }}
+                </span>
+              </div>
+              <div class="d-flex">
+                <!--Title-->
+                <span class="caption textColor1--text text-uppercase"> {{ hook.event }} {{
+                  hook.operation
+                }}</span>
+              </div>
+            </div>
+            <v-icon class="nc-hook-delete-icon" small @click.stop="deleteHook(hook,i)">
+              mdi-delete-outline
+            </v-icon>
+          </div>
+        </v-card>
+      </template>
+      <div v-else class="pa-4 backgroundColor caption textColor--text text--lighten-3">
+        Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { calculateDiff } from '~/helpers'
+
+export default {
+  name: 'WebhookList',
+  props: { meta: Object },
+  data: () => ({
+    hooks: null, loading: false
+  }),
+  mounted() {
+    this.loadHooksList()
+  },
+  methods: {
+    calculateDiff,
+    async loadHooksList() {
+      this.key++
+      this.loading = true
+
+      const hooks = await this.$api.dbTableWebhook.list(this.meta.id)
+
+      this.hooks = hooks.list.map((h) => {
+        h.notification = h.notification && JSON.parse(h.notification)
+        return h
+      })
+      this.loading = false
+    },
+    async deleteHook(item, i) {
+      try {
+        if (item.id) {
+          await this.$api.dbTableWebhook.delete(item.id)
+          this.hooks.splice(i, 1)
+        } else {
+          this.hooks.splice(i, 1)
+        }
+        this.$toast.success('Hook deleted successfully').goAway(3000)
+        if (!this.hooks.length) {
+          this.hook = null
+        }
+      } catch (e) {
+        this.$toast.error(e.message).goAway(3000)
+      }
+
+      this.$e('a:webhook:delete')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.nc-hook {
+  position: relative;
+
+  .nc-hook-delete-icon {
+    position: absolute;
+    opacity: 0;
+    transition: .3s opacity;
+    right: 16px;
+    bottom: 16px
+  }
+
+  &:hover .nc-hook-delete-icon {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/webhookModal.vue b/packages/nc-gui/components/project/tableTabs/webhook/WebhookModal.vue
similarity index 97%
rename from packages/nc-gui/components/project/tableTabs/webhook/webhookModal.vue
rename to packages/nc-gui/components/project/tableTabs/webhook/WebhookModal.vue
index c3750d2d03..33bfab8782 100644
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhookModal.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/WebhookModal.vue
@@ -14,8 +14,8 @@
 
 <script>
 
-import WebhookList from '~/components/project/tableTabs/webhook/webhookList'
-import WebhookEditor from '~/components/project/tableTabs/webhook/webhookEditor'
+import WebhookList from '~/components/project/tableTabs/webhook/WebhookList'
+import WebhookEditor from '~/components/project/tableTabs/webhook/WebhookEditor'
 export default {
   name: 'WebhookModal',
   components: { WebhookEditor, WebhookList },
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/WebhookSlider.vue b/packages/nc-gui/components/project/tableTabs/webhook/WebhookSlider.vue
new file mode 100644
index 0000000000..3c861e185b
--- /dev/null
+++ b/packages/nc-gui/components/project/tableTabs/webhook/WebhookSlider.vue
@@ -0,0 +1,64 @@
+<template>
+  <nc-slider v-model="webhookSlider">
+    <v-card
+      v-if="webhookSlider"
+      width="100%"
+      min-height="350px"
+      class="pa-4 elevation-0"
+    >
+      <webhook-editor v-if="editOrAdd" ref="editor" :meta="meta" @backToList="editOrAdd = false" />
+      <webhook-list v-else :meta="meta" @edit="editHook" @add="editOrAdd = true" />
+    </v-card>
+  </nc-slider>
+</template>
+
+<script>
+
+import WebhookList from '~/components/project/tableTabs/webhook/WebhookList'
+import WebhookEditor from '~/components/project/tableTabs/webhook/WebhookEditor'
+import NcSlider from '~/components/global/NcSlider'
+export default {
+  name: 'WebhookSlider',
+  components: { NcSlider, WebhookEditor, WebhookList },
+  props: {
+    meta: Object,
+    value: Boolean
+  },
+  data: () => ({
+    editOrAdd: false,
+    activePage: 'role'
+  }),
+  computed: {
+    webhookSlider: {
+      get() {
+        return this.value
+      },
+      set(v) {
+        this.$emit('input', v)
+      }
+    }
+  },
+  mounted() {
+    (document.querySelector('[data-app]') || this.$root.$el).append(this.$el)
+  },
+
+  destroyed() {
+    this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
+  },
+  methods: {
+    editHook(hook) {
+      this.editOrAdd = true
+      this.$nextTick(() => {
+        this.$refs.editor.hook = { ...hook }
+        this.$refs.editor.onEventChange()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep{
+  .nc-content{max-width: 600px !important}
+}
+</style>
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/webhooksTest.vue b/packages/nc-gui/components/project/tableTabs/webhook/WebhooksTest.vue
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/webhook/webhooksTest.vue
rename to packages/nc-gui/components/project/tableTabs/webhook/WebhooksTest.vue
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/webhookList.vue b/packages/nc-gui/components/project/tableTabs/webhook/webhookList.vue
deleted file mode 100644
index 9ca9634419..0000000000
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhookList.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div>
-    <v-card-title>
-      Webhooks
-      <v-spacer />
-      <v-btn
-        outlined
-        tooltip="Save"
-        small
-        @click.prevent="$emit('add')"
-      >
-        Create webhook
-      </v-btn>
-    </v-card-title>
-
-    <div v-if="hooks " class="pa-4">
-      <template v-if=" hooks.length">
-        <v-card v-for="(hook,i) in hooks" :key="hook.id" class="elevation-0 backgroundColor nc-hook" @click="$emit('edit', hook)">
-          <div class="pa-4 ">
-            <h4 class="nc-text">
-              {{ hook.title }}
-            </h4>
-            <div class="d-flex">
-              <!--Title-->
-              <span class="caption textColor1--text">{{ $t("general.event") }} : {{ hook.event }} {{
-                hook.operation
-              }}</span>
-              <v-spacer />
-              <!--Notify Via-->
-              <span class="caption textColor1--text">{{
-                $t("labels.notifyVia")
-              }} : {{ hook.notification && hook.notification.type }}
-              </span>
-            </div>
-          </div>
-
-          <v-icon class="nc-hook-delete-icon" small @click.stop="deleteHook(hook,i)">
-            mdi-delete-outline
-          </v-icon>
-        </v-card>
-      </template>
-      <div v-else class="pa-4 backgroundColor caption textColor--text text--lighten-3">
-        Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
-      </div>
-    </div>
-
-    <!--    <v-simple-table dense>
-      <template #default>
-        <thead>
-          <tr>
-            <th>
-              &lt;!&ndash;Title&ndash;&gt;
-              {{ $t("general.title") }}
-            </th>
-            <th>
-              &lt;!&ndash;Event&ndash;&gt;
-              {{ $t("general.event") }}
-            </th>
-            <th>
-              &lt;!&ndash;Condition&ndash;&gt;
-              {{ $t("general.condition") }}
-            </th>
-            <th>
-              &lt;!&ndash;Notify Via&ndash;&gt;
-              {{ $t("labels.notifyVia") }}
-            </th>
-            <th>
-              &lt;!&ndash;Action&ndash;&gt;
-              {{ $t("labels.action") }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <template v-if="hooks && hooks.length">
-            <tr v-for="(item, i) in hooks" :key="i">
-              <td>{{ item.title }}</td>
-              <td>{{ item.event }} {{ item.operation }}</td>
-              <td>
-                <v-icon v-if="item.condition" color="success" small>
-                  mdi-check-bold
-                </v-icon>
-              </td>
-              <td>
-                {{ item.notification && item.notification.type }}
-              </td>
-              <td>
-                <x-icon
-                  small
-                  color="error"
-                  @click.stop="deleteHook(item, i)"
-                >
-                  mdi-delete
-                </x-icon>
-              &lt;!&ndash;              <x-icon small :color="loading || !valid || !hook.event ?  'grey' : 'primary'"
-                                  @click.stop="(!loading && valid && hook.event) && saveHooks()">save
-                          </x-icon>&ndash;&gt;
-              </td>
-            </tr>
-          </template>
-          <tr>
-            <td colspan="6" class="text-center py-5">
-              &lt;!&ndash;:tooltip="$t('tooltip.saveChanges')"&ndash;&gt;
-              <x-btn
-                v-ge="['hooks', 'add new']"
-                outlined
-                color="primary"
-                small
-                @click.prevent="$emit('add')"
-              >
-                <v-icon small left>
-                  mdi-plus
-                </v-icon>
-                &lt;!&ndash;Add New Webhook&ndash;&gt;
-                {{ $t("activity.addWebhook") }}
-              </x-btn>
-            </td>
-          </tr>
-        </tbody>
-      </template>
-    </v-simple-table>-->
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'WebhookList',
-  props: { meta: Object },
-  data: () => ({
-    hooks: null, loading: false
-  }),
-  mounted() {
-    this.loadHooksList()
-  },
-  methods: {
-    async loadHooksList() {
-      this.key++
-      this.loading = true
-
-      const hooks = await this.$api.dbTableWebhook.list(this.meta.id)
-
-      this.hooks = hooks.list.map((h) => {
-        h.notification = h.notification && JSON.parse(h.notification)
-        return h
-      })
-      this.loading = false
-    },
-    async deleteHook(item, i) {
-      try {
-        if (item.id) {
-          await this.$api.dbTableWebhook.delete(item.id)
-          this.hooks.splice(i, 1)
-        } else {
-          this.hooks.splice(i, 1)
-        }
-        this.$toast.success('Hook deleted successfully').goAway(3000)
-        if (!this.hooks.length) {
-          this.hook = null
-        }
-      } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
-      }
-
-      this.$e('a:webhook:delete')
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.nc-hook {
-  position: relative;
-
-  .nc-hook-delete-icon {
-    position: absolute;
-    opacity: 0;
-    transition: .3s opacity;
-    right: 16px;
-    top: 16px
-  }
-
-  &:hover .nc-hook-delete-icon {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/packages/nc-gui/components/project/tableTabs/webhooks-old.vue b/packages/nc-gui/components/project/tableTabs/webhooks-old.vue
deleted file mode 100644
index 7e0c2abe8b..0000000000
--- a/packages/nc-gui/components/project/tableTabs/webhooks-old.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-  <div>
-    <v-toolbar flat height="42" class="toolbar-border-bottom">
-      <v-toolbar-title>
-        <v-breadcrumbs
-          :items="[{
-                     text: nodes.env,
-                     disabled: true,
-                     href: '#'
-                   },{
-                     text: nodes.dbAlias,
-                     disabled: true,
-                     href: '#'
-                   },
-                   {
-                     text: nodes.table_name + ' (Webhooks)',
-                     disabled: true,
-                     href: '#'
-                   }]"
-          divider=">"
-          small
-        >
-          <template #divider>
-            <v-icon small color="grey lighten-2">
-              forward
-            </v-icon>
-          </template>
-        </v-breadcrumbs>
-      </v-toolbar-title>
-      <v-spacer />
-
-      <x-btn
-        v-ge="['rows','save']"
-        outlined
-        :tooltip="$t('tooltip.saveChanges')"
-        color="primary"
-        small
-
-        :disabled="loading || !valid || !hook.event"
-        @click.prevent="saveHooks"
-      >
-        <v-icon small left>
-          save
-        </v-icon>
-        <!-- Save -->
-        {{ $t('general.save') }}
-      </x-btn>
-    </v-toolbar>
-
-    <v-form
-      ref="form"
-      v-model="valid"
-      class="mx-auto"
-      lazy-validation
-    >
-      <v-card>
-        <v-container fluid>
-          <v-row>
-            <v-col cols="6">
-              <v-radio-group v-model="hook.event" @change="onEventChange">
-                <template #default>
-                  <v-simple-table dense>
-                    <template #default>
-                      <thead>
-                        <tr>
-                          <th />
-                          <th>Operation</th>
-                          <th>Event</th>
-                        </tr>
-                      </thead>
-
-                      <tbody>
-                        <tr
-                          v-for="(e,i) in eventList"
-                          :key="i"
-                          :class="{'primary lighten-4 black--text': e.value === hook.event}"
-                        >
-                          <td>
-                            <v-radio :value="e.value" />
-                          </td>
-                          <td>
-                            {{ e.text[1] }}
-                          </td>
-                          <td>
-                            {{ e.text[0] }}
-                          </td>
-                        </tr>
-                      </tbody>
-                    </template>
-                  </v-simple-table>
-                </template>
-              </v-radio-group>
-
-              <!--      <v-radio-group v-model="hook.event" @change="onEventChage">-->
-              <!--        <v-radio v-for="(e,i) in eventList" :key="i" :label="e.text" :value="e.v"></v-radio>-->
-              <!--      </v-radio-group>-->
-
-              <!--      <v-select-->
-              <!--        v-model="hook.event"-->
-              <!--        :items="['Before','After']"-->
-              <!--        label="Event"-->
-              <!--        required-->
-              <!--      ></v-select>-->
-
-              <!--      <v-select-->
-              <!--        v-model="hook.operation"-->
-              <!--        :items="['Insert','Update','Delete']"-->
-              <!--        label="Operation"-->
-              <!--        required-->
-              <!--      ></v-select>-->
-            </v-col>
-            <v-col cols="6">
-              <v-card class="">
-                <v-card-title>Webhook</v-card-title>
-                <v-card-text>
-                  <v-text-field
-                    v-model="hook.title"
-                    :disabled="!hook.event"
-                    label="Title"
-                    required
-                    :rules="[v => !!v || 'Title Required']"
-                  />
-                  <v-text-field
-                    v-model="hook.url"
-                    :disabled="!hook.event"
-                    label="URL"
-                    required
-                    type="url"
-                    :rules="urlRules"
-                  />
-
-                  <!--      <v-textarea-->
-                  <!--        v-model="hook.header"-->
-                  <!--        label="Headers"-->
-                  <!--        required-->
-                  <!--      ></v-textarea>-->
-                </v-card-text>
-              </v-card>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card>
-    </v-form>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Webhooks',
-  props: ['nodes'],
-  data: () => ({
-    valid: false,
-    loading: false,
-    eventList: [
-      { text: ['Before', 'Insert'], value: ['before', 'insert'] },
-      { text: ['After', 'Insert'], value: ['after', 'insert'] },
-      { text: ['Before', 'Update'], value: ['before', 'update'] },
-      { text: ['After', 'Update'], value: ['after', 'update'] },
-      { text: ['Before', 'Delete'], value: ['before', 'delete'] },
-      { text: ['After', 'Delete'], value: ['after', 'delete'] }
-    ],
-    hook: {},
-    urlRules: [
-      v => !v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || 'Not a valid URL'
-    ]
-
-  }),
-  methods: {
-    async onEventChange() {
-      this.loading = true
-      this.hook = {
-        ...this.hook,
-        url: '',
-        title: this.hook.event.join('.')
-      }
-
-      const result = (await this.$store.dispatch('sqlMgr/ActSqlOp', [
-        {
-          env: this.nodes.env,
-          dbAlias: this.nodes.dbAlias
-        }, 'tableXcHooksGet', {
-          table_name: this.nodes.table_name,
-          data: {
-            event: this.hook.event[0],
-            operation: this.hook.event[1]
-          }
-        }
-      ]))
-      const hooksDetails = result && result.data.list && result.data.list[0]
-
-      if (hooksDetails) {
-        this.hook = {
-          ...this.hook,
-          url: hooksDetails.url,
-          title: hooksDetails.title
-        }
-      }
-      this.loading = false
-    },
-    async saveHooks() {
-      if (!this.valid || !this.hook.event) {
-        return
-      }
-      this.loading = true
-      await this.$store.dispatch('sqlMgr/ActSqlOp', [
-        {
-          env: this.nodes.env,
-          dbAlias: this.nodes.dbAlias
-        }, 'tableXcHooksSet', {
-          table_name: this.nodes.table_name,
-          data: {
-            ...this.hook,
-            event: this.hook.event[0],
-            operation: this.hook.event[1]
-          }
-        }
-      ])
-      this.$toast.success('Webhook details updated successfully').goAway(3000)
-      this.loading = false
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*tr.selected{*/
-/*  background: #8ceaf6;*/
-/*}*/
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.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/nc-gui/components/project/viewTabs/viewColumns.vue b/packages/nc-gui/components/project/viewTabs/ViewColumns.vue
similarity index 100%
rename from packages/nc-gui/components/project/viewTabs/viewColumns.vue
rename to packages/nc-gui/components/project/viewTabs/ViewColumns.vue
diff --git a/packages/nc-gui/components/project/viewTabs/viewQuery.vue b/packages/nc-gui/components/project/viewTabs/ViewQuery.vue
similarity index 99%
rename from packages/nc-gui/components/project/viewTabs/viewQuery.vue
rename to packages/nc-gui/components/project/viewTabs/ViewQuery.vue
index 0ffe5473fe..a77a465774 100644
--- a/packages/nc-gui/components/project/viewTabs/viewQuery.vue
+++ b/packages/nc-gui/components/project/viewTabs/ViewQuery.vue
@@ -84,7 +84,7 @@
 import { mapActions } from 'vuex'
 
 import MonacoEditor from '../../monaco/Monaco'
-import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel'
+import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel'
 
 export default {
   components: { MonacoEditor, dlgLabelSubmitCancel },
diff --git a/packages/nc-gui/components/project/viewTabs/viewSpreadsheet.vue b/packages/nc-gui/components/project/viewTabs/ViewSpreadsheet.vue
similarity index 94%
rename from packages/nc-gui/components/project/viewTabs/viewSpreadsheet.vue
rename to packages/nc-gui/components/project/viewTabs/ViewSpreadsheet.vue
index bdcbfcc64f..1afa17054d 100644
--- a/packages/nc-gui/components/project/viewTabs/viewSpreadsheet.vue
+++ b/packages/nc-gui/components/project/viewTabs/ViewSpreadsheet.vue
@@ -247,19 +247,19 @@
 
 import debounce from 'debounce'
 import { SqlUI } from '@/helpers/sqlUi/SqlUiFactory'
-import FieldsMenu from '@/components/project/spreadsheet/components/fieldsMenu'
-import SortListMenu from '@/components/project/spreadsheet/components/sortListMenu'
-import ColumnFilterMenu from '@/components/project/spreadsheet/components/columnFilterMenu'
-import XcGridView from '@/components/project/spreadsheet/views/xcGridView'
-import SpreadsheetNavDrawer from '@/components/project/spreadsheet/components/spreadsheetNavDrawer'
-import GalleryView from '@/components/project/spreadsheet/views/galleryView'
-import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
-import CalendarView from '@/components/project/spreadsheet/views/calendarView'
-import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
+import FieldsMenu from '~/components/project/spreadsheet/components/FieldsMenu'
+import SortListMenu from '~/components/project/spreadsheet/components/SortListMenu'
+import ColumnFilterMenu from '~/components/project/spreadsheet/components/ColumnFilterMenu'
+import XcGridView from '~/components/project/spreadsheet/views/GridView'
+import SpreadsheetNavDrawer from '~/components/project/spreadsheet/components/SpreadsheetNavDrawer'
+import GalleryView from '~/components/project/spreadsheet/views/GalleryView'
+import KanbanView from '~/components/project/spreadsheet/views/KanbanView'
+import CalendarView from '~/components/project/spreadsheet/views/CalendarView'
+import AdditionalFeatures from '~/components/project/spreadsheet/overlay/AdditinalFeatures'
 import spreadsheet from '@/components/project/spreadsheet/mixins/spreadsheet'
-import MoreActions from '@/components/project/spreadsheet/components/moreActions'
-import ShareViewMenu from '@/components/project/spreadsheet/components/shareViewMenu'
-import LockMenu from '@/components/project/spreadsheet/components/lockMenu'
+import MoreActions from '~/components/project/spreadsheet/components/MoreActions'
+import ShareViewMenu from '~/components/project/spreadsheet/components/ShareViewMenu'
+import LockMenu from '~/components/project/spreadsheet/components/LockMenu'
 
 export default {
   name: 'Spreadsheet',
diff --git a/packages/nc-gui/components/projectList/createNewProjectBtn.vue b/packages/nc-gui/components/projectList/CreateNewProjectBtn.vue
similarity index 80%
rename from packages/nc-gui/components/projectList/createNewProjectBtn.vue
rename to packages/nc-gui/components/projectList/CreateNewProjectBtn.vue
index 1bc3f26184..b9ec8f5816 100644
--- a/packages/nc-gui/components/projectList/createNewProjectBtn.vue
+++ b/packages/nc-gui/components/projectList/CreateNewProjectBtn.vue
@@ -15,11 +15,15 @@
             class="nc-new-project-menu elevation-3"
             v-on="on"
           >
-            <v-icon class="mr-2"> mdi-plus </v-icon>
+            <v-icon class="mr-2">
+              mdi-plus
+            </v-icon>
 
             <!-- New Project -->
             {{ $t("title.newProj") }}
-            <v-icon class="mr-1" small> mdi-menu-down </v-icon>
+            <v-icon class="mr-1" small>
+              mdi-menu-down
+            </v-icon>
           </v-btn>
         </div>
       </slot>
@@ -30,7 +34,9 @@
         @click="onCreateProject('xcdb')"
       >
         <v-list-item-icon class="mr-2">
-          <v-icon small color="blue"> mdi-plus </v-icon>
+          <v-icon small color="blue">
+            mdi-plus
+          </v-icon>
         </v-list-item-icon>
         <v-list-item-title>
           <!-- Create -->
@@ -53,7 +59,9 @@
         @click="onCreateProject()"
       >
         <v-list-item-icon class="mr-2">
-          <v-icon small color="green"> mdi-database-outline </v-icon>
+          <v-icon small color="green">
+            mdi-database-outline
+          </v-icon>
         </v-list-item-icon>
         <v-list-item-title>
           <!-- Create By Connecting <br>To An External Database -->
@@ -91,28 +99,28 @@
 
 <script>
 export default {
-  name: "CreateNewProjectBtn",
+  name: 'CreateNewProjectBtn',
   computed: {
     connectToExternalDB() {
       return (
         this.$store.state.project &&
-        this.$store.state.project.projectInfo &&
-        this.$store.state.project.projectInfo.connectToExternalDB
-      );
-    },
+        this.$store.state.project.appInfo &&
+        this.$store.state.project.appInfo.connectToExternalDB
+      )
+    }
   },
   methods: {
     onCreateProject(xcdb) {
-      if (xcdb === "xcdb") {
-        this.$router.push("/project/xcdb");
-        this.$e("c:project:create:xcdb");
+      if (xcdb === 'xcdb') {
+        this.$router.push('/project/xcdb')
+        this.$e('c:project:create:xcdb')
       } else {
-        this.$router.push("/project/0");
-        this.$e("c:project:create:extdb");
+        this.$router.push('/project/0')
+        this.$e('c:project:create:extdb')
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped></style>
diff --git a/packages/nc-gui/components/settings/settingsModal.vue b/packages/nc-gui/components/settings/SettingsModal.vue
similarity index 93%
rename from packages/nc-gui/components/settings/settingsModal.vue
rename to packages/nc-gui/components/settings/SettingsModal.vue
index e66179a0bc..fa84ae6f75 100644
--- a/packages/nc-gui/components/settings/settingsModal.vue
+++ b/packages/nc-gui/components/settings/SettingsModal.vue
@@ -172,18 +172,20 @@
 </template>
 
 <script>
-import AppStore from '~/components/project/appStore'
-import DisableOrEnableModels from '~/components/project/projectMetadata/disableOrEnableModels'
-import AuthTab from '~/components/authTab'
-import XcMeta from '~/components/project/settings/xcMeta'
-import AuditTab from '~/components/project/auditTab'
+import AppStore from '~/components/project/AppStore'
+import DisableOrEnableModels from '~/components/project/projectMetadata/DisableOrEnableModels'
+import AuthTab from '~/components/AuthTab'
+import XcMeta from '~/components/project/settings/XcMeta'
+import AuditTab from '~/components/project/AuditTab'
+import ImportFromAirtable from '~/components/import/ImportFromAirtable'
 
 export default {
   name: 'SettingsModal',
-  components: { AuditTab, XcMeta, AuthTab, DisableOrEnableModels, AppStore },
+  components: { ImportFromAirtable, AuditTab, XcMeta, AuthTab, DisableOrEnableModels, AppStore },
   data: () => ({
     settingsModal: false,
-    activePage: 'role'
+    activePage: 'role',
+    improtFromAirtableModal: false
   })
 }
 </script>
diff --git a/packages/nc-gui/components/templates/categories.vue b/packages/nc-gui/components/templates/Categories.vue
similarity index 100%
rename from packages/nc-gui/components/templates/categories.vue
rename to packages/nc-gui/components/templates/Categories.vue
diff --git a/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue b/packages/nc-gui/components/templates/CreateProjectFromTemplateBtn.vue
similarity index 64%
rename from packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
rename to packages/nc-gui/components/templates/CreateProjectFromTemplateBtn.vue
index df70a0c05e..b5d31fa484 100644
--- a/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
+++ b/packages/nc-gui/components/templates/CreateProjectFromTemplateBtn.vue
@@ -20,7 +20,7 @@ export default {
   name: 'CreateProjectFromTemplateBtn',
   mixins: [colors],
   props: {
-    excelImport: Boolean,
+    quickImport: Boolean,
     loading: Boolean,
     importToProject: Boolean,
     templateData: [Array, Object],
@@ -99,7 +99,8 @@ export default {
           this.$store.commit('loader/MutMessage', this.loaderMessages[this.loaderMessagesIndex])
         }, 1000)
 
-        let project
+        const projectId = this.$store.state.project.project.id
+        let firstTable = null
 
         // Not available now
         if (this.importToProject) {
@@ -122,45 +123,46 @@ export default {
           // projectId = this.$route.params.project_id
           // prefix = this.$store.getters['project/GtrProjectPrefix']
         } else {
-          // Create an empty project
-          try {
-            this.$e("a:project:create:excel");
-
-            project = await this.$api.project.create({
-              title: this.templateData.title,
-              external: false
-            })
-            this.projectCreation = true
-          } catch (e) {
-            this.projectCreation = false
-            this.$toast
-              .error(await this._extractSdkResponseErrorMsg(e))
-              .goAway(3000)
-          } finally {
-            clearInterval(interv)
-          }
-
-          if (!this.projectCreation) {
-            // failed to create project
-            return
-          }
-
           // Create tables
           try {
             for (const t of this.localTemplateData.tables) {
               // enrich system fields if not provided
               // e.g. id, created_at, updated_at
               const systemColumns = SqlUiFactory
-                .create({ client: 'sqlite3' })
+                .create({ client: this.$store.state.project.project.bases[0].type })
                 .getNewTableColumns()
-                .filter(c => c.column_name != 'title')
+                .filter(c => c.column_name !== 'title')
 
-              const table = await this.$api.dbTable.create(project.id, {
+              for (const systemColumn of systemColumns) {
+                if (!t.columns.some(c => c.column_name.toLowerCase() === systemColumn.column_name.toLowerCase())) {
+                  t.columns.push(systemColumn)
+                }
+              }
+
+              // set pk & rqd if ID is provided
+              for (const column of t.columns) {
+                if (column.column_name.toLowerCase() === 'id' && !('pk' in column)) {
+                  column.pk = true
+                  column.rqd = true
+                  break
+                }
+              }
+
+              // create table
+              const table = await this.$api.dbTable.create(projectId, {
                 table_name: t.table_name,
                 title: '',
-                columns: [...t.columns, ...systemColumns]
+                columns: t.columns
               })
               t.table_title = table.title
+
+              // open the first table after import
+              if (firstTable === null) {
+                firstTable = table
+              }
+
+              // set primary value
+              await this.$api.dbTableColumn.primaryColumnSet(table.columns[0].id)
             }
             this.tableCreation = true
           } catch (e) {
@@ -181,30 +183,55 @@ export default {
         // Bulk import data
         if (this.importData) {
           this.$store.commit('loader/MutMessage', 'Importing excel data to project')
-          await this.importDataToProject(this.templateData.title)
+          await this.importDataToProject()
         }
 
-        this.$router.push({
-          path: `/nc/${project.id}`,
-          query: {
-            new: 1
+        // reload table list
+        this.$store.dispatch('project/_loadTables', {
+          dbKey: '0.projectJson.envs._noco.db.0',
+          key: '0.projectJson.envs._noco.db.0.tables',
+          _nodes: {
+            dbAlias: 'db',
+            env: '_noco',
+            type: 'tableDir'
           }
+        }).then(() => {
+          // add tab - choose the first one if multiple tables are created
+          this.$store.dispatch('tabs/loadFirstCreatedTableTab', {
+            title: firstTable.title
+          }).then((item) => {
+            // set active tab - choose the first one if multiple tables are created
+            this.$nextTick(() => {
+              this.$router.push({
+                query: {
+                  name: item.name || '',
+                  dbalias: (item._nodes && item._nodes.dbAlias) || '',
+                  type: (item._nodes && item._nodes.type) || 'table'
+                }
+              })
+            })
+          })
         })
 
-        this.$emit('success')
+        // confetti effect
+        this.simpleAnim()
       } catch (e) {
         console.log(e)
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000)
       } finally {
         clearInterval(interv)
         this.$store.commit('loader/MutMessage', null)
         this.projectCreation = false
         this.tableCreation = false
+        this.$emit('closeModal')
       }
     },
-    async importDataToProject(projectName) {
+    async importDataToProject() {
       let total = 0
       let progress = 0
+      const projectName = this.$store.state.project.project.title
       await Promise.all(this.localTemplateData.tables.map(v => (async(tableMeta) => {
         const tableName = tableMeta.table_title
         const data = this.importData[tableMeta.ref_table_name]
@@ -227,12 +254,46 @@ export default {
     remapColNames(batchData, columns) {
       return batchData.map(data => (columns || []).reduce((aggObj, col) => ({
         ...aggObj,
-        [col.column_name]: data[col.ref_column_name]
+        [col.column_name]: data[col.ref_column_name || col.column_name]
       }), {})
       )
+    },
+    simpleAnim() {
+      const count = 200
+      const defaults = {
+        origin: { y: 0.7 }
+      }
+
+      function fire(particleRatio, opts) {
+        window.confetti(Object.assign({}, defaults, opts, {
+          particleCount: Math.floor(count * particleRatio)
+        }))
+      }
+
+      fire(0.25, {
+        spread: 26,
+        startVelocity: 55
+      })
+      fire(0.2, {
+        spread: 60
+      })
+      fire(0.35, {
+        spread: 100,
+        decay: 0.91,
+        scalar: 0.8
+      })
+      fire(0.1, {
+        spread: 120,
+        startVelocity: 25,
+        decay: 0.92,
+        scalar: 1.2
+      })
+      fire(0.1, {
+        spread: 120,
+        startVelocity: 45
+      })
     }
   }
-
 }
 </script>
 
diff --git a/packages/nc-gui/components/templates/detailed.vue b/packages/nc-gui/components/templates/Detailed.vue
similarity index 97%
rename from packages/nc-gui/components/templates/detailed.vue
rename to packages/nc-gui/components/templates/Detailed.vue
index 6b4a75af4a..b5dffcd755 100644
--- a/packages/nc-gui/components/templates/detailed.vue
+++ b/packages/nc-gui/components/templates/Detailed.vue
@@ -91,8 +91,8 @@
 </template>
 
 <script>
-import TemplatEditor from '~/components/templates/editor'
-import Categories from '~/components/templates/categories'
+import TemplatEditor from '~/components/templates/Editor'
+import Categories from '~/components/templates/Categories'
 import colors from '~/mixins/colors'
 
 export default {
diff --git a/packages/nc-gui/components/templates/editor.vue b/packages/nc-gui/components/templates/Editor.vue
similarity index 97%
rename from packages/nc-gui/components/templates/editor.vue
rename to packages/nc-gui/components/templates/Editor.vue
index f07ef947d4..b293460bfc 100644
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/packages/nc-gui/components/templates/Editor.vue
@@ -60,25 +60,7 @@
           <v-col cols="12">
             <v-card class="elevation-0">
               <v-card-text>
-                <div v-if="!viewMode" class="mx-auto" style="max-width: 400px">
-                  <div class="mt-1">
-                    <v-text-field
-                      ref="project"
-                      v-model="project.title"
-                      class="title"
-                      outlined
-                      hide-details
-                      denses
-                      :rules="[(v) => !!v || 'Project name required']"
-                    >
-                      <template #label>
-                        <span class="caption">Project Name</span>
-                      </template>
-                    </v-text-field>
-                  </div>
-                </div>
-
-                <p v-if="project.tables" class="caption grey--text mt-4">
+                <p v-if="project.tables && quickImportType === 'excel'" class="caption grey--text mt-4">
                   {{ project.tables.length }} sheet{{
                     project.tables.length > 1 ? "s" : ""
                   }}
@@ -127,7 +109,7 @@
                       <v-tooltip bottom>
                         <template #activator="{ on }">
                           <v-icon
-                            v-if="!viewMode"
+                            v-if="!viewMode && project.tables.length > 1"
                             class="flex-grow-0 mr-2"
                             small
                             color="grey"
@@ -283,7 +265,7 @@
                                     :ref="`uidt_${table.table_name}_${j}`"
                                     style="max-width: 200px"
                                     :value="col.uidt"
-                                    placeholder="Column Datatype"
+                                    placeholder="Column Data Type"
                                     outlined
                                     dense
                                     class="caption"
@@ -498,11 +480,26 @@
                                       : 3
                                   "
                                 />
-                                <td style="max-width: 50px; width: 50px">
-                                  <v-tooltip bottom>
+                                <td
+                                  style="max-width: 50px; width: 50px"
+                                >
+                                  <v-tooltip v-if="!viewMode && j == 0" bottom>
+                                    <template #activator="{ on }">
+                                      <x-icon
+                                        small
+                                        class="mr-1"
+                                        color="primary"
+                                        v-on="on"
+                                      >
+                                        mdi-key-star
+                                      </x-icon>
+                                    </template>
+                                    <!-- TODO: i18n -->
+                                    <span>Primary Value</span>
+                                  </v-tooltip>
+                                  <v-tooltip v-else bottom>
                                     <template #activator="{ on }">
                                       <v-icon
-                                        v-if="!viewMode"
                                         class="flex-grow-0"
                                         small
                                         color="grey"
@@ -630,8 +627,9 @@
                     </v-expansion-panel-content>
                   </v-expansion-panel>
                 </v-expansion-panels>
-                <div v-if="!viewMode" class="mx-auto" style="max-width: 600px">
-                  <template v-if="!excelImport">
+                <!-- Disable Gradient Generator at time being -->
+                <!-- <div v-if="!viewMode" class="mx-auto" style="max-width: 600px">
+                  <template v-if="!quickImport">
                     <gradient-generator
                       v-model="project.image_url"
                       class="d-100 mt-4"
@@ -669,7 +667,7 @@
                       />
                     </div>
                   </template>
-                </div>
+                </div> -->
               </v-card-text>
             </v-card>
           </v-col>
@@ -761,13 +759,16 @@
 </template>
 
 <script>
+import {
+  isVirtualCol
+} from 'nocodb-sdk'
 import {
   uiTypes,
   getUIDTIcon,
   UITypes
 } from '~/components/project/spreadsheet/helpers/uiTypes'
-import GradientGenerator from '~/components/templates/gradientGenerator'
-import Help from '~/components/templates/help'
+import GradientGenerator from '~/components/templates/GradientGenerator'
+import Help from '~/components/templates/Help'
 
 const LinkToAnotherRecord = 'LinkToAnotherRecord'
 const Lookup = 'Lookup'
@@ -781,7 +782,8 @@ export default {
     id: [Number, String],
     viewMode: Boolean,
     projectTemplate: Object,
-    excelImport: Boolean
+    quickImport: Boolean,
+    quickImportType: String
   },
   data: () => ({
     loading: false,
@@ -802,7 +804,7 @@ export default {
     createTableColumnsDialog: false,
     selectedTable: null,
     uiTypes: uiTypes.filter(
-      t => ![UITypes.Formula, UITypes.SpecificDBType].includes(t.name)
+      t => !isVirtualCol(t.name)
     ),
     rollupFnList: [
       { text: 'count', value: 'count' },
diff --git a/packages/nc-gui/components/templates/gradientGenerator.vue b/packages/nc-gui/components/templates/GradientGenerator.vue
similarity index 100%
rename from packages/nc-gui/components/templates/gradientGenerator.vue
rename to packages/nc-gui/components/templates/GradientGenerator.vue
diff --git a/packages/nc-gui/components/templates/help.vue b/packages/nc-gui/components/templates/Help.vue
similarity index 100%
rename from packages/nc-gui/components/templates/help.vue
rename to packages/nc-gui/components/templates/Help.vue
diff --git a/packages/nc-gui/components/templates/list.vue b/packages/nc-gui/components/templates/List.vue
similarity index 95%
rename from packages/nc-gui/components/templates/list.vue
rename to packages/nc-gui/components/templates/List.vue
index f0758e8a36..66138d4564 100644
--- a/packages/nc-gui/components/templates/list.vue
+++ b/packages/nc-gui/components/templates/List.vue
@@ -90,9 +90,9 @@
 <script>
 
 // import templateList from './templates.list'
-import ProjectTemplateDetailed from '~/components/templates/detailed'
-import Categories from '~/components/templates/categories'
-import TemplateEditor from '~/components/templates/editor'
+import ProjectTemplateDetailed from '~/components/templates/Detailed'
+import Categories from '~/components/templates/Categories'
+import TemplateEditor from '~/components/templates/Editor'
 
 export default {
   name: 'ProjectTemplates',
diff --git a/packages/nc-gui/components/templates/templatesModal.vue b/packages/nc-gui/components/templates/TemplatesModal.vue
similarity index 95%
rename from packages/nc-gui/components/templates/templatesModal.vue
rename to packages/nc-gui/components/templates/TemplatesModal.vue
index d15cf2abd4..0d9090c3c2 100644
--- a/packages/nc-gui/components/templates/templatesModal.vue
+++ b/packages/nc-gui/components/templates/TemplatesModal.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import ProjectTemplates from '~/components/templates/list'
+import ProjectTemplates from '~/components/templates/List'
 
 export default {
   name: 'TemplatesModal',
@@ -98,7 +98,7 @@ export default {
 
           this.projectReloading = false
 
-          if (this.$store.state.project.projectInfo.firstUser || this.$store.state.project.projectInfo.authType === 'masterKey') {
+          if (this.$store.state.project.appInfo.firstUser || this.$store.state.project.appInfo.authType === 'masterKey') {
             return this.$router.push({
               path: '/user/authentication/signup'
             })
diff --git a/packages/nc-gui/components/utils/betterUX.vue b/packages/nc-gui/components/utils/BetterUX.vue
similarity index 100%
rename from packages/nc-gui/components/utils/betterUX.vue
rename to packages/nc-gui/components/utils/BetterUX.vue
diff --git a/packages/nc-gui/components/utils/dlgLabelSubmitCancel.vue b/packages/nc-gui/components/utils/DlgLabelSubmitCancel.vue
similarity index 100%
rename from packages/nc-gui/components/utils/dlgLabelSubmitCancel.vue
rename to packages/nc-gui/components/utils/DlgLabelSubmitCancel.vue
diff --git a/packages/nc-gui/components/utils/dlgOk.vue b/packages/nc-gui/components/utils/DlgOk.vue
similarity index 100%
rename from packages/nc-gui/components/utils/dlgOk.vue
rename to packages/nc-gui/components/utils/DlgOk.vue
diff --git a/packages/nc-gui/components/utils/dlgOkNew.vue b/packages/nc-gui/components/utils/DlgOkNew.vue
similarity index 100%
rename from packages/nc-gui/components/utils/dlgOkNew.vue
rename to packages/nc-gui/components/utils/DlgOkNew.vue
diff --git a/packages/nc-gui/components/utils/dlgProjectCreate.vue b/packages/nc-gui/components/utils/DlgProjectCreate.vue
similarity index 96%
rename from packages/nc-gui/components/utils/dlgProjectCreate.vue
rename to packages/nc-gui/components/utils/DlgProjectCreate.vue
index 7580003840..04a76a824f 100644
--- a/packages/nc-gui/components/utils/dlgProjectCreate.vue
+++ b/packages/nc-gui/components/utils/DlgProjectCreate.vue
@@ -97,7 +97,7 @@ export default {
 
           this.projectReloading = false
 
-          if (this.$store.state.project.projectInfo.firstUser || this.$store.state.project.projectInfo.authType === 'masterKey') {
+          if (this.$store.state.project.appInfo.firstUser || this.$store.state.project.appInfo.authType === 'masterKey') {
             return this.$router.push({
               path: '/user/authentication/signup'
             })
diff --git a/packages/nc-gui/components/utils/dlgTableCreate.vue b/packages/nc-gui/components/utils/DlgTableCreate.vue
similarity index 100%
rename from packages/nc-gui/components/utils/dlgTableCreate.vue
rename to packages/nc-gui/components/utils/DlgTableCreate.vue
diff --git a/packages/nc-gui/components/utils/dlgTextSubmitCancel.vue b/packages/nc-gui/components/utils/DlgTextSubmitCancel.vue
similarity index 100%
rename from packages/nc-gui/components/utils/dlgTextSubmitCancel.vue
rename to packages/nc-gui/components/utils/DlgTextSubmitCancel.vue
diff --git a/packages/nc-gui/components/utils/dlgUnexpectedError.vue b/packages/nc-gui/components/utils/DlgUnexpectedError.vue
similarity index 100%
rename from packages/nc-gui/components/utils/dlgUnexpectedError.vue
rename to packages/nc-gui/components/utils/DlgUnexpectedError.vue
diff --git a/packages/nc-gui/components/utils/dlgViewCreate.vue b/packages/nc-gui/components/utils/DlgViewCreate.vue
similarity index 100%
rename from packages/nc-gui/components/utils/dlgViewCreate.vue
rename to packages/nc-gui/components/utils/DlgViewCreate.vue
diff --git a/packages/nc-gui/components/utils/language.vue b/packages/nc-gui/components/utils/Language.vue
similarity index 60%
rename from packages/nc-gui/components/utils/language.vue
rename to packages/nc-gui/components/utils/Language.vue
index 4664a93bbc..c064f845da 100644
--- a/packages/nc-gui/components/utils/language.vue
+++ b/packages/nc-gui/components/utils/Language.vue
@@ -39,54 +39,54 @@
 
 <script>
 export default {
-  name: "Language",
+  name: 'Language',
   data: () => ({
     labels: {
-      de: "Deutsch",
-      en: "English",
-      es: "Español",
-      fa: "فارسی",
-      fr: "Français",
-      id: "Bahasa Indonesia",
-      ja: "日本語",
-      it_IT: "Italiano",
-      ko: "한국인",
-      lv: "Latviešu",
-      nl: "Nederlandse",
-      ru: "Pусский",
-      zh_CN: "大陆简体",
-      zh_HK: "香港繁體",
-      zh_TW: "臺灣正體",
-      sv: "Svenska",
-      tr: "Turkish",
-      da: "Dansk",
-      vi: "Tiếng Việt",
-      no: "Norsk",
-      iw: "עִברִית",
-      fi: "Suomalainen",
-      uk: "Українська",
-      hr: "Hrvatski",
-      th: "ไทย",
-      sl: "Slovenščina",
-      pt_BR: "Português (Brasil)",
-    },
+      de: 'Deutsch',
+      en: 'English',
+      es: 'Español',
+      fa: 'فارسی',
+      fr: 'Français',
+      id: 'Bahasa Indonesia',
+      ja: '日本語',
+      it_IT: 'Italiano',
+      ko: '한국인',
+      lv: 'Latviešu',
+      nl: 'Nederlandse',
+      ru: 'Pусский',
+      zh_CN: '大陆简体',
+      zh_HK: '香港繁體',
+      zh_TW: '臺灣正體',
+      sv: 'Svenska',
+      tr: 'Turkish',
+      da: 'Dansk',
+      vi: 'Tiếng Việt',
+      no: 'Norsk',
+      iw: 'עִברִית',
+      fi: 'Suomalainen',
+      uk: 'Українська',
+      hr: 'Hrvatski',
+      th: 'ไทย',
+      sl: 'Slovenščina',
+      pt_BR: 'Português (Brasil)'
+    }
   }),
   computed: {
     languages() {
-      return ((this.$i18n && this.$i18n.availableLocales) || ["en"]).sort();
+      return ((this.$i18n && this.$i18n.availableLocales) || ['en']).sort()
     },
     language: {
       get() {
-        return this.$store.state.windows.language;
+        return this.$store.state.settings.language
       },
       set(val) {
-        this.$store.commit("windows/MutLanguage", val);
-        this.applyDirection();
-      },
-    },
+        this.$store.commit('settings/MutLanguage', val)
+        this.applyDirection()
+      }
+    }
   },
   mounted() {
-    this.applyDirection();
+    this.applyDirection()
   },
   methods: {
     applyDirection() {
@@ -94,49 +94,49 @@ export default {
       document.body.style.direction = this.isRtlLang() ? "rtl" : "ltr";
     },
     isRtlLang() {
-      return ["fa"].includes(this.language);
+      return ['fa'].includes(this.language)
     },
     changeLan(lan) {
-      this.language = lan;
-      const count = 200;
+      this.language = lan
+      const count = 200
       const defaults = {
-        origin: { y: 0.7 },
-      };
+        origin: { y: 0.7 }
+      }
 
       function fire(particleRatio, opts) {
         window.confetti(
           Object.assign({}, defaults, opts, {
-            particleCount: Math.floor(count * particleRatio),
+            particleCount: Math.floor(count * particleRatio)
           })
-        );
+        )
       }
 
       fire(0.25, {
         spread: 26,
-        startVelocity: 55,
-      });
+        startVelocity: 55
+      })
       fire(0.2, {
-        spread: 60,
-      });
+        spread: 60
+      })
       fire(0.35, {
         spread: 100,
         decay: 0.91,
-        scalar: 0.8,
-      });
+        scalar: 0.8
+      })
       fire(0.1, {
         spread: 120,
         startVelocity: 25,
         decay: 0.92,
-        scalar: 1.2,
-      });
+        scalar: 1.2
+      })
       fire(0.1, {
         spread: 120,
-        startVelocity: 45,
-      });
-      this.$e("c:navbar:lang", { lang: lan });
-    },
-  },
-};
+        startVelocity: 45
+      })
+      this.$e('c:navbar:lang', { lang: lan })
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/config/vuetify.options.js b/packages/nc-gui/config/vuetify.options.js
index 275e538250..ebc3ca008c 100644
--- a/packages/nc-gui/config/vuetify.options.js
+++ b/packages/nc-gui/config/vuetify.options.js
@@ -10,7 +10,7 @@ export default function({ app }) {
       options: {
         customProperties: true
       },
-      dark: app.store.state.windows.darkTheme,
+      dark: app.store.state.settings.darkTheme,
       themes: {
 
         dark: {
diff --git a/packages/nc-gui/helpers/index.js b/packages/nc-gui/helpers/index.js
index a711136d50..9907847208 100644
--- a/packages/nc-gui/helpers/index.js
+++ b/packages/nc-gui/helpers/index.js
@@ -1,3 +1,14 @@
+import dayjs from 'dayjs'
+
+const relativeTime = require('dayjs/plugin/relativeTime')
+const utc = require('dayjs/plugin/utc')
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+
+export function calculateDiff(date) {
+  return dayjs.utc(date).fromNow()
+}
+
 export const isEmail = v => /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i.test(v)
 
 // ref : https://stackoverflow.com/a/5717133
diff --git a/packages/nc-gui/lang/da.json b/packages/nc-gui/lang/da.json
index ba6ec53aaf..ac48c94ae5 100644
--- a/packages/nc-gui/lang/da.json
+++ b/packages/nc-gui/lang/da.json
@@ -171,7 +171,8 @@
     "headLogin": "Log ind | Nocodb.",
     "resetPassword": "Nulstil din adgangskode",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Bemærk Via.",
@@ -306,6 +307,7 @@
     "deleteRow": "DELETE ROW.",
     "deleteSelectedRow": "Slet de valgte rækker",
     "importExcel": "Import Excel.",
+    "importCSV": "Import CSV.",
     "downloadCSV": "Download som CSV.",
     "uploadCSV": "Upload CSV.",
     "import": "Importere",
@@ -397,6 +399,7 @@
       "upload_sub": "eller træk og slip filen",
       "excelSupport": "Støttet: .xls, .xlsx, .xlsm, .ods, .Oer",
       "excelURL": "Indtast Excel-fil-URL",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# af rækker til at analysere for at udlede datatype",
       "excelImport": "ark (r) er tilgængelige for import",
       "exportMetadata": "Ønsker du at eksportere metadata fra metaborde?",
diff --git a/packages/nc-gui/lang/de.json b/packages/nc-gui/lang/de.json
index e18084beac..3a0d47aad7 100644
--- a/packages/nc-gui/lang/de.json
+++ b/packages/nc-gui/lang/de.json
@@ -171,7 +171,8 @@
     "headLogin": "Anmelden | NocoDB",
     "resetPassword": "Passwort zurücksetzen",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Benachrichtigen mit",
@@ -306,6 +307,7 @@
     "deleteRow": "Zeile löschen",
     "deleteSelectedRow": "Ausgewählte Zeilen löschen",
     "importExcel": "Import Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Download als CSV",
     "uploadCSV": "Hochladen CSV",
     "import": "Importieren",
@@ -397,6 +399,7 @@
       "upload_sub": "oder Drag & Drop Datei",
       "excelSupport": "Unterstützt: .xls ,.xlsx ,.xlsm, .ods, .ots",
       "excelURL": "Excel-Datei-URL eingeben",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "Anzahl der Zeilen, um den Datentyp analysieren zu können",
       "excelImport": "Blatt/Blätter stehen für den Import zur Verfügung",
       "exportMetadata": "Möchten Sie Metadaten von Meta-Tabellen exportieren?",
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index a8f3073817..363d371b3a 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -171,7 +171,8 @@
     "headLogin": "Log In | NocoDB",
     "resetPassword": "Reset your password",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Notify Via",
@@ -306,6 +307,7 @@
     "deleteRow": "Delete Row",
     "deleteSelectedRow": "Delete Selected Rows",
     "importExcel": "Import Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Download as CSV",
     "uploadCSV": "Upload CSV",
     "import": "Import",
@@ -397,6 +399,7 @@
       "upload_sub": "or drag and drop file",
       "excelSupport": "Supported: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Enter excel file URL",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# of rows to parse to infer datatype",
       "excelImport": "sheet(s) are available for import",
       "exportMetadata": "Do you want to export metadata from meta tables?",
diff --git a/packages/nc-gui/lang/es.json b/packages/nc-gui/lang/es.json
index 88faae315a..22a6e992ab 100644
--- a/packages/nc-gui/lang/es.json
+++ b/packages/nc-gui/lang/es.json
@@ -171,7 +171,8 @@
     "headLogin": "Acceder | NocoDB",
     "resetPassword": "Cambiar contraseña",
     "teamAndSettings": "Equipo y configuración",
-    "apiDocs": "Documentación de la API"
+    "apiDocs": "Documentación de la API",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Notificar a través de",
@@ -306,6 +307,7 @@
     "deleteRow": "Borrar fila",
     "deleteSelectedRow": "Eliminar filas seleccionadas",
     "importExcel": "Importar Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Descargar como CSV",
     "uploadCSV": "Subir CSV",
     "import": "Importar",
@@ -397,6 +399,7 @@
       "upload_sub": "o arrastra y suelta el archivo",
       "excelSupport": "Compatible: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Ingrese la URL del fichero Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# de filas para analizar para inferir el tipo de datos",
       "excelImport": "hoja(s) están disponibles para importación",
       "exportMetadata": "¿Quieres exportar metadatos de Meta Tables?",
diff --git a/packages/nc-gui/lang/fa.json b/packages/nc-gui/lang/fa.json
index 5d1a197e75..d1b24faf17 100644
--- a/packages/nc-gui/lang/fa.json
+++ b/packages/nc-gui/lang/fa.json
@@ -171,7 +171,8 @@
     "headLogin": "ورود | NocoDB",
     "resetPassword": "بازنشانی کلمه عبور شما",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "اعلان از طریق",
@@ -306,6 +307,7 @@
     "deleteRow": "حذف ردیف جدید",
     "deleteSelectedRow": "حذف ردیف‌های انتخاب شده",
     "importExcel": "وارد کردن فایل Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "دانلود به‌عنوان CSV",
     "uploadCSV": "بارگذاری CSV",
     "import": "وارد کردن",
@@ -397,6 +399,7 @@
       "upload_sub": "یا فایل را بکشید و رها کنید",
       "excelSupport": "فرمت‌های پشتیبانی شده: xls - xlsx - xlsm - ods - ots",
       "excelURL": "URL فایل Excel را انتخاب کنید",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "تعداد ردیف‌ها برای parse جهت یافتن نوع داده",
       "excelImport": "صفحه(های) آماده برای ورود",
       "exportMetadata": "آیا می‌خواهید فراداده را از فراجدول‌ها خارج کنید؟",
diff --git a/packages/nc-gui/lang/fi.json b/packages/nc-gui/lang/fi.json
index b12b7e6731..035045e498 100644
--- a/packages/nc-gui/lang/fi.json
+++ b/packages/nc-gui/lang/fi.json
@@ -171,7 +171,8 @@
     "headLogin": "Kirjaudu sisään | Nokodb",
     "resetPassword": "Nollaa salasana",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Ilmoittaa kautta",
@@ -306,6 +307,7 @@
     "deleteRow": "Poista rivi",
     "deleteSelectedRow": "Poista valitut rivit",
     "importExcel": "Tuonti excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Lataa CSV",
     "uploadCSV": "Lataa CSV",
     "import": "Tuonti",
@@ -397,6 +399,7 @@
       "upload_sub": "tai vedä ja pudota tiedosto",
       "excelSupport": "Tuetut: .xls, .xlsx, .xlsm, .odit,.",
       "excelURL": "Anna Excel-tiedoston URL-osoite",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# rivien jäsentää tietotekniikkaa",
       "excelImport": "arkki (t) on saatavilla tuonti",
       "exportMetadata": "Haluatko viedä metatietoja metapöydistä?",
diff --git a/packages/nc-gui/lang/fr.json b/packages/nc-gui/lang/fr.json
index e2063cb51d..8c26789723 100644
--- a/packages/nc-gui/lang/fr.json
+++ b/packages/nc-gui/lang/fr.json
@@ -171,7 +171,8 @@
     "headLogin": "Connexion | Nocodb",
     "resetPassword": "Réinitialiser le mot de passe",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Notifier via",
@@ -306,6 +307,7 @@
     "deleteRow": "Supprimer la ligne",
     "deleteSelectedRow": "Supprimer les lignes sélectionnées",
     "importExcel": "Importer depuis Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Télécharger comme CSV",
     "uploadCSV": "Téléverser un CSV",
     "import": "Importer",
@@ -395,8 +397,9 @@
       "footerInfo": "Lignes par page",
       "upload": "Sélectionnez un fichier à téléverser",
       "upload_sub": "ou glisser-déposer un fichier",
-      "excelSupport": "Pris en charge: .xls, .xlsx, .xlsm, .Ods, .ots",
+      "excelSupport": "Pris en charge: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Entrez l'URL du fichier Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "Nombre de lignes à analyser pour déduire le type de données",
       "excelImport": "Les feuilles sont disponibles pour l'importation",
       "exportMetadata": "Voulez-vous exporter des métadonnées des méta-tables?",
diff --git a/packages/nc-gui/lang/hr.json b/packages/nc-gui/lang/hr.json
index 94473a66f9..5be380f930 100644
--- a/packages/nc-gui/lang/hr.json
+++ b/packages/nc-gui/lang/hr.json
@@ -171,7 +171,8 @@
     "headLogin": "Prijavite se | Nocodb",
     "resetPassword": "Vraćanje izvorne lozinke",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Obavijestiti putem",
@@ -306,6 +307,7 @@
     "deleteRow": "Brisanje retka",
     "deleteSelectedRow": "Izbrišite odabrane retke",
     "importExcel": "Uvoz Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Preuzmite kao CSV",
     "uploadCSV": "Prenesite CSV",
     "import": "Uvoz",
@@ -397,6 +399,7 @@
       "upload_sub": "ili povucite i ispustite datoteku",
       "excelSupport": "Podržani: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Unesite URL Excel datoteka",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# redaka za analizu da biste zaključili datatype",
       "excelImport": "limovi (i) dostupni su za uvoz",
       "exportMetadata": "Želite li izvesti metapodatke iz meta stolova?",
diff --git a/packages/nc-gui/lang/id.json b/packages/nc-gui/lang/id.json
index d6c04ec950..4704e039ca 100644
--- a/packages/nc-gui/lang/id.json
+++ b/packages/nc-gui/lang/id.json
@@ -171,7 +171,8 @@
     "headLogin": "Masuk | Nocodb.",
     "resetPassword": "Mereset password Anda",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Beri tahu VIA.",
@@ -306,6 +307,7 @@
     "deleteRow": "Hapus Baris",
     "deleteSelectedRow": "Hapus baris yang dipilih",
     "importExcel": "Impor Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "Unduh sebagai CSV.",
     "uploadCSV": "Unggah CSV.",
     "import": "Impor",
@@ -397,6 +399,7 @@
       "upload_sub": "atau seret dan jatuhkan file",
       "excelSupport": "Didukung: .xls, .xlsx, .xlsm, .ots, .ots",
       "excelURL": "Masukkan URL File Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# dari baris untuk menguraikan untuk menyimpulkan datatype",
       "excelImport": "Lembar tersedia untuk impor",
       "exportMetadata": "Apakah Anda ingin mengekspor metadata dari Meta Tables?",
diff --git a/packages/nc-gui/lang/it_IT.json b/packages/nc-gui/lang/it_IT.json
index 583240168f..0f3bedce8d 100644
--- a/packages/nc-gui/lang/it_IT.json
+++ b/packages/nc-gui/lang/it_IT.json
@@ -171,7 +171,8 @@
     "headLogin": "Accedi | NocoDB",
     "resetPassword": "Reimposta la tua password",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Notifica via.",
@@ -306,6 +307,7 @@
     "deleteRow": "Elimina riga.",
     "deleteSelectedRow": "Elimina righe selezionate",
     "importExcel": "Importa Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "Scarica come csv.",
     "uploadCSV": "Carica csv.",
     "import": "Importa",
@@ -397,6 +399,7 @@
       "upload_sub": "o trascinare e rilasciare il file",
       "excelSupport": "Supportato: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Inserisci l'URL del file Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# di righe per analizzare per dedurre il tipo di dati",
       "excelImport": "foglio (i) sono disponibili per l'importazione",
       "exportMetadata": "Vuoi esportare i metadati da Meta Tables?",
diff --git a/packages/nc-gui/lang/iw.json b/packages/nc-gui/lang/iw.json
index 1d9fcb3576..45e373e57d 100644
--- a/packages/nc-gui/lang/iw.json
+++ b/packages/nc-gui/lang/iw.json
@@ -171,7 +171,8 @@
     "headLogin": "התחבר | נוקודב",
     "resetPassword": "לאפס את הסיסמה שלך",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "תודיע דרך",
@@ -306,6 +307,7 @@
     "deleteRow": "מחק שורה",
     "deleteSelectedRow": "מחק את השורות שנבחרו",
     "importExcel": "ייבוא ​​Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "הורד כמו CSV.",
     "uploadCSV": "העלה CSV.",
     "import": "יְבוּא",
@@ -397,6 +399,7 @@
       "upload_sub": "או גרור ושחרר קובץ",
       "excelSupport": "נתמך: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "הזן את כתובת האתר של קובץ Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# של שורות לנתח כדי להסיק datatype",
       "excelImport": "גיליון (ים) זמינים לייבוא",
       "exportMetadata": "האם אתה רוצה לייצא מטא נתונים מ מטא שולחנות?",
diff --git a/packages/nc-gui/lang/ja.json b/packages/nc-gui/lang/ja.json
index a1ec199abe..40e5792eb1 100644
--- a/packages/nc-gui/lang/ja.json
+++ b/packages/nc-gui/lang/ja.json
@@ -171,7 +171,8 @@
     "headLogin": "ログイン | NocoDB",
     "resetPassword": "パスワードをリセットする",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "次で通知する",
@@ -306,6 +307,7 @@
     "deleteRow": "行を削除",
     "deleteSelectedRow": "選択行を削除",
     "importExcel": "エクセルファイルをインポート",
+    "importCSV": "Import CSV",
     "downloadCSV": "CSVをダウンロード",
     "uploadCSV": "CSVをアップロード",
     "import": "インポート",
@@ -397,6 +399,7 @@
       "upload_sub": "またはファイルをドラッグ & ドロップ",
       "excelSupport": "サポートしているファイル形式：.xls、.xlsx、.xlsm、.ods、.ots",
       "excelURL": "ExcelファイルのURLを入力してください",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# データ型を推測するために解析する行数",
       "excelImport": "シートはインポート可能です",
       "exportMetadata": "メタテーブルからメタデータをエクスポートしますか？",
diff --git a/packages/nc-gui/lang/ko.json b/packages/nc-gui/lang/ko.json
index b6c05ea421..a0b3876ad9 100644
--- a/packages/nc-gui/lang/ko.json
+++ b/packages/nc-gui/lang/ko.json
@@ -171,7 +171,8 @@
     "headLogin": "로그인 | NocoDB.",
     "resetPassword": "비밀번호를 재설정",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "통지를 통지합니다",
@@ -306,6 +307,7 @@
     "deleteRow": "행 삭제",
     "deleteSelectedRow": "선택한 행을 삭제합니다",
     "importExcel": "수입 Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "CSV로 다운로드하십시오",
     "uploadCSV": "CSV 업로드",
     "import": "가져오기",
@@ -397,6 +399,7 @@
       "upload_sub": "또는 끌어서 놓기 파일",
       "excelSupport": "지원 : .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Excel 파일 URL을 입력하십시오",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "파싱 ​​할 행의 # DataType을 추론합니다",
       "excelImport": "시트는 수입 가능합니다",
       "exportMetadata": "메타 테이블에서 메타 데이터를 내보내려면 원하십니까?",
diff --git a/packages/nc-gui/lang/lv.json b/packages/nc-gui/lang/lv.json
index 9207d3b073..f2163b25e8 100644
--- a/packages/nc-gui/lang/lv.json
+++ b/packages/nc-gui/lang/lv.json
@@ -171,7 +171,8 @@
     "headLogin": "Pieslēgties | NocoDB",
     "resetPassword": "Atjaunot paroli",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Paziņot izmantojot",
@@ -306,6 +307,7 @@
     "deleteRow": "Dzēst ierakstu",
     "deleteSelectedRow": "Dzēst izvēlētos ierakstus",
     "importExcel": "Importēt Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Lejupielādēt kā CSV",
     "uploadCSV": "Augšupielādēt CSV",
     "import": "Importēt",
@@ -397,6 +399,7 @@
       "upload_sub": "vai vilkt un nomest datni",
       "excelSupport": "Atbalsta: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Ievadīt Excel datnes saiti",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# ierakstu analizēšanai lai secinātu datu tipus",
       "excelImport": "lapa(s) ir pieejamas importēšanai",
       "exportMetadata": "Vai tu vēlies eksportēt metadatus no tabulām?",
diff --git a/packages/nc-gui/lang/nl.json b/packages/nc-gui/lang/nl.json
index 60b16c0a2a..1e643d36b8 100644
--- a/packages/nc-gui/lang/nl.json
+++ b/packages/nc-gui/lang/nl.json
@@ -171,7 +171,8 @@
     "headLogin": "Log in | Nocodb",
     "resetPassword": "Stel je wachtwoord opnieuw in",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Melding via",
@@ -306,6 +307,7 @@
     "deleteRow": "Verwijder rij",
     "deleteSelectedRow": "Verwijder geselecteerde rijen",
     "importExcel": "Excel importeren",
+    "importCSV": "Import CSV",
     "downloadCSV": "Download als CSV",
     "uploadCSV": "Upload CSV",
     "import": "Importeren",
@@ -397,6 +399,7 @@
       "upload_sub": "of sleep het bestand naar hier",
       "excelSupport": "Ondersteunt: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Voer Excel-bestandslink in",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# rijen om te parseren om datatype af te leiden",
       "excelImport": "blad(en) zijn beschikbaar om te importeren",
       "exportMetadata": "Wilt u metadata uit metatabellen exporteren?",
diff --git a/packages/nc-gui/lang/no.json b/packages/nc-gui/lang/no.json
index fff84f5f1e..3714b6dddf 100644
--- a/packages/nc-gui/lang/no.json
+++ b/packages/nc-gui/lang/no.json
@@ -171,7 +171,8 @@
     "headLogin": "Logg inn | NocoDB.",
     "resetPassword": "Tilbakestill passordet ditt",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Varsle Via.",
@@ -306,6 +307,7 @@
     "deleteRow": "Slett rad",
     "deleteSelectedRow": "Slett utvalgte rader",
     "importExcel": "Importer Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "Last ned som CSV.",
     "uploadCSV": "Last opp CSV.",
     "import": "Importer",
@@ -397,6 +399,7 @@
       "upload_sub": "eller dra og slipp filen",
       "excelSupport": "Støttet: .xls, .xlsx, .xlsm ,.ods ,.ots",
       "excelURL": "Skriv inn Excel File URL",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# av rader for å analysere å utlede datatype",
       "excelImport": "Ark (er) er tilgjengelige for import",
       "exportMetadata": "Ønsker du å eksportere metadata fra Meta-bord?",
diff --git a/packages/nc-gui/lang/pl.json b/packages/nc-gui/lang/pl.json
index f7ea3da89a..051d85875e 100644
--- a/packages/nc-gui/lang/pl.json
+++ b/packages/nc-gui/lang/pl.json
@@ -171,7 +171,8 @@
     "headLogin": "Zaloguj się | NOCODB.",
     "resetPassword": "Zresetuj swoje hasło",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Powiadomić VIA.",
@@ -306,6 +307,7 @@
     "deleteRow": "Usuń rząd",
     "deleteSelectedRow": "Usuń wybrane wiersze",
     "importExcel": "Importuj Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "Pobierz jako CSV.",
     "uploadCSV": "Prześlij CSV.",
     "import": "Import",
@@ -397,6 +399,7 @@
       "upload_sub": "lub przeciągnij i upuść plik",
       "excelSupport": "Obsługiwane: .xls, .xlsx, .xlsm, .ods, .oty",
       "excelURL": "Wpisz adres URL pliku Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# wierszy do analizy do infera DataType",
       "excelImport": "Arkusze są dostępne dla importu",
       "exportMetadata": "Czy chcesz wyeksportować metadane z stołów meta?",
diff --git a/packages/nc-gui/lang/pt.json b/packages/nc-gui/lang/pt.json
index 59ff4edd80..8961d7bdd6 100644
--- a/packages/nc-gui/lang/pt.json
+++ b/packages/nc-gui/lang/pt.json
@@ -171,7 +171,8 @@
     "headLogin": "Autentique-se | Noco",
     "resetPassword": "Redefina a sua palavra-passe",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Notificar via.",
@@ -306,6 +307,7 @@
     "deleteRow": "Excluir linha",
     "deleteSelectedRow": "Excluir linhas selecionadas",
     "importExcel": "Importar Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "Baixe como CSV.",
     "uploadCSV": "Carregar CSV.",
     "import": "Importar",
@@ -397,6 +399,7 @@
       "upload_sub": "ou arrastar e soltar arquivo",
       "excelSupport": "Suportado: .xls, .xlsx, .xlsm, .ods,.",
       "excelURL": "Digite o URL do arquivo do Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# de linhas para analisar para inferir datatype",
       "excelImport": "Sheet (s) estão disponíveis para importação",
       "exportMetadata": "Você quer exportar metadados de meta tabelas?",
diff --git a/packages/nc-gui/lang/pt_BR.json b/packages/nc-gui/lang/pt_BR.json
index 13ec927952..cb24beebc0 100644
--- a/packages/nc-gui/lang/pt_BR.json
+++ b/packages/nc-gui/lang/pt_BR.json
@@ -171,7 +171,8 @@
     "headLogin": "Autentique-se | NocoDB",
     "resetPassword": "Redefina a sua senha",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Notificar via.",
@@ -306,6 +307,7 @@
     "deleteRow": "Excluir linha",
     "deleteSelectedRow": "Excluir linhas selecionadas",
     "importExcel": "Importar Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "Baixe como CSV.",
     "uploadCSV": "Carregar CSV.",
     "import": "Importar",
@@ -397,6 +399,7 @@
       "upload_sub": "ou arrastar e soltar arquivo",
       "excelSupport": "Suportado: .xls, .xlsx, .xlsm, .ods,.",
       "excelURL": "Digite o URL do arquivo do Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# de linhas para analisar para inferir datatype",
       "excelImport": "Sheet (s) estão disponíveis para importação",
       "exportMetadata": "Você quer exportar metadados de meta tabelas?",
diff --git a/packages/nc-gui/lang/ru.json b/packages/nc-gui/lang/ru.json
index f507f3eafd..5ab0ef2225 100644
--- a/packages/nc-gui/lang/ru.json
+++ b/packages/nc-gui/lang/ru.json
@@ -171,7 +171,8 @@
     "headLogin": "Войти |. NOCODB",
     "resetPassword": "Сбросить пароль",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Уведомлять через",
@@ -305,6 +306,7 @@
     "deleteRow": "Удалить строку",
     "deleteSelectedRow": "Удалить выбранные строки",
     "importExcel": "Импорт из Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Скачать как CSV.",
     "uploadCSV": "Загрузить CSV.",
     "import": "Импортировать",
@@ -396,6 +398,7 @@
       "upload_sub": "или перетащите файл",
       "excelSupport": "Поддерживаются: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Введите URL-адрес файла Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "Количество рядов на анализ вывода данных",
       "excelImport": "Листы доступны для импорта",
       "exportMetadata": "Вы хотите экспортировать метаданные из металоги?",
diff --git a/packages/nc-gui/lang/sl.json b/packages/nc-gui/lang/sl.json
index 95c0dcb682..9f56795611 100644
--- a/packages/nc-gui/lang/sl.json
+++ b/packages/nc-gui/lang/sl.json
@@ -171,7 +171,8 @@
     "headLogin": "Prijava | Nocodb.",
     "resetPassword": "Ponastavi geslo",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Obvestite VIO.",
@@ -306,6 +307,7 @@
     "deleteRow": "Izbriši vrstico",
     "deleteSelectedRow": "Izbrišite izbrane vrstice",
     "importExcel": "Uvoz Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "Prenesite kot CSV.",
     "uploadCSV": "Upload CSV.",
     "import": "Uvozi",
@@ -397,6 +399,7 @@
       "upload_sub": "ali datoteko povlecite in spustite",
       "excelSupport": "Podprto: .xls, .xlsx, .xlsm, .ods, .h",
       "excelURL": "Vnesite URL EXCEL datoteke",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# vrstic za razčlenjevanje data podatkov",
       "excelImport": "List (-e) so na voljo za uvoz",
       "exportMetadata": "Želite izvoz metapodatkov iz meta tabele?",
diff --git a/packages/nc-gui/lang/sv.json b/packages/nc-gui/lang/sv.json
index 39c3290005..de5eede18e 100644
--- a/packages/nc-gui/lang/sv.json
+++ b/packages/nc-gui/lang/sv.json
@@ -171,7 +171,8 @@
     "headLogin": "Logga in | Nocodb",
     "resetPassword": "Återställ ditt lösenord",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Meddela via",
@@ -306,6 +307,7 @@
     "deleteRow": "Radera raden",
     "deleteSelectedRow": "Ta bort valda rader",
     "importExcel": "Import excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Hämta som CSV",
     "uploadCSV": "Ladda upp CSV",
     "import": "Importera",
@@ -397,6 +399,7 @@
       "upload_sub": "eller dra och släpp filen",
       "excelSupport": "Stöds: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Ange Excel-filadressen",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# av rader att analysera att avleda datatyp",
       "excelImport": "ark (er) är tillgängliga för import",
       "exportMetadata": "Vill du exportera metadata från meta bord?",
diff --git a/packages/nc-gui/lang/th.json b/packages/nc-gui/lang/th.json
index bebd061fdf..0a8cf296bb 100644
--- a/packages/nc-gui/lang/th.json
+++ b/packages/nc-gui/lang/th.json
@@ -171,7 +171,8 @@
     "headLogin": "เข้าสู่ระบบ nocodb",
     "resetPassword": "รีเซ็ตรหัสผ่านของคุณ",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "แจ้งเตือนผ่าน",
@@ -306,6 +307,7 @@
     "deleteRow": "ลบแถว",
     "deleteSelectedRow": "ลบแถวที่เลือก",
     "importExcel": "นำเข้า Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "ดาวน์โหลดเป็น CSV",
     "uploadCSV": "อัปโหลด CSV",
     "import": "นำเข้า",
@@ -397,6 +399,7 @@
       "upload_sub": "หรือลากและวางไฟล์",
       "excelSupport": "รองรับ:. xls, .xlsx,. xlsm, .ods, .ots",
       "excelURL": "ป้อน URL ไฟล์ Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# ของแถวที่จะแยกวิเคราะห์กับ DataType",
       "excelImport": "มีแผ่นงานสำหรับนำเข้า",
       "exportMetadata": "คุณต้องการส่งออกข้อมูลเมตาจากตาราง Meta หรือไม่?",
diff --git a/packages/nc-gui/lang/tr.json b/packages/nc-gui/lang/tr.json
index 675cb1f3a8..79bbbe78d9 100644
--- a/packages/nc-gui/lang/tr.json
+++ b/packages/nc-gui/lang/tr.json
@@ -171,7 +171,8 @@
     "headLogin": "Giriş | Nocodb",
     "resetPassword": "Şifrenizi sıfırlayın",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Aracılığıyla Bildir",
@@ -306,6 +307,7 @@
     "deleteRow": "Satırı Sil",
     "deleteSelectedRow": "Seçilen Satırları Sil",
     "importExcel": "Excel'i içe aktar",
+    "importCSV": "Import CSV",
     "downloadCSV": "CSV olarak indir",
     "uploadCSV": "CSV yükle",
     "import": "İçe aktar",
@@ -397,6 +399,7 @@
       "upload_sub": "veya dosyayı sürükleyip bırakın",
       "excelSupport": "Desteklenen: .xls, .xlsx, .xlsm, .ods, .ots",
       "excelURL": "Excel dosyası linkini girin",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "Veri türünü bulmak için ayrıştırılacak satır sayısı #",
       "excelImport": "sayfa(lar) içe aktarılabilir",
       "exportMetadata": "Meta verileri meta tablolarından dışa aktarmak ister misiniz?",
diff --git a/packages/nc-gui/lang/uk.json b/packages/nc-gui/lang/uk.json
index 7d6819ff38..1446b367d0 100644
--- a/packages/nc-gui/lang/uk.json
+++ b/packages/nc-gui/lang/uk.json
@@ -171,7 +171,8 @@
     "headLogin": "Вхід | Нокодб",
     "resetPassword": "Скинути пароль",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Повідомити через",
@@ -306,6 +307,7 @@
     "deleteRow": "Видалити рядок",
     "deleteSelectedRow": "Видалити вибрані рядки",
     "importExcel": "Імпорт Excel",
+    "importCSV": "Import CSV",
     "downloadCSV": "Завантажити як CSV",
     "uploadCSV": "Завантажити CSV",
     "import": "Імпортувати",
@@ -397,6 +399,7 @@
       "upload_sub": "або перетягніть файл",
       "excelSupport": "Підтримується: .xls, .xlsx, .xlsm, .ods, .ot",
       "excelURL": "Введіть URL-адресу Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# рядків, щоб розібрати для виведення даних",
       "excelImport": "Лист (и) доступні для імпорту",
       "exportMetadata": "Ви хочете експортувати метадані з мета-таблиць?",
diff --git a/packages/nc-gui/lang/vi.json b/packages/nc-gui/lang/vi.json
index 567a78412f..cfe69a98b9 100644
--- a/packages/nc-gui/lang/vi.json
+++ b/packages/nc-gui/lang/vi.json
@@ -171,7 +171,8 @@
     "headLogin": "Đăng nhập |. NOCODB.",
     "resetPassword": "Đặt lại mật khẩu của bạn",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "Thông báo qua",
@@ -306,6 +307,7 @@
     "deleteRow": "Xóa hàng",
     "deleteSelectedRow": "Xóa các hàng đã chọn",
     "importExcel": "Nhập Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "Tải về dưới dạng CSV.",
     "uploadCSV": "Tải lên CSV.",
     "import": "Nhập khẩu",
@@ -397,6 +399,7 @@
       "upload_sub": "hoặc kéo và thả tập tin",
       "excelSupport": "Được hỗ trợ: .xls, .xlsx, .xlsm, .ods,.",
       "excelURL": "Nhập URL tệp Excel",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "# các hàng để phân tích để suy ra kiểu dữ liệu",
       "excelImport": "(các) tấm có sẵn để nhập khẩu",
       "exportMetadata": "Bạn có muốn xuất siêu dữ liệu từ bảng meta?",
diff --git a/packages/nc-gui/lang/zh_CN.json b/packages/nc-gui/lang/zh_CN.json
index 09db698edf..38990ec059 100644
--- a/packages/nc-gui/lang/zh_CN.json
+++ b/packages/nc-gui/lang/zh_CN.json
@@ -38,7 +38,7 @@
     "signIn": "登录",
     "signOut": "登出",
     "required": "必填项",
-    "preferred": "Preferred",
+    "preferred": "首选",
     "mandatory": "强制的",
     "loading": "加载中...",
     "title": "标题",
@@ -59,7 +59,7 @@
   "objects": {
     "project": "项目",
     "projects": "项目",
-    "table": "表格",
+    "table": "网格",
     "tables": "表格",
     "field": "字段",
     "fields": "字段",
@@ -74,7 +74,7 @@
     "view": "视图",
     "views": "视图",
     "viewType": {
-      "grid": "网格",
+      "grid": "表格",
       "gallery": "画廊",
       "form": "表单",
       "kanban": "看板",
@@ -154,7 +154,7 @@
     "teamAndAuth": "团队和认证",
     "rolesUserMgmt": "角色和用户管理",
     "userMgmt": "用户账号管理",
-    "apiTokenMgmt": "API 令牌管理",
+    "apiTokenMgmt": "API Tokens 管理",
     "rolesMgmt": "角色管理",
     "projMeta": "项目基础信息",
     "metaMgmt": "项目基础信息管理",
@@ -170,11 +170,12 @@
     "headCreateProject": "新建项目 | NocoDB",
     "headLogin": "登录 | NocoDB",
     "resetPassword": "重置密码",
-    "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "teamAndSettings": "团队和设置",
+    "apiDocs": "API 文档",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
-    "notifyVia": "通知Via",
+    "notifyVia": "通知通过",
     "projName": "项目名",
     "tableName": "表名称",
     "viewName": "查看名称",
@@ -191,7 +192,7 @@
     "port": "端口号",
     "username": "用户名",
     "password": "密码",
-    "schemaName": "Schema name",
+    "schemaName": "架构名称",
     "action": "行动",
     "actions": "行动",
     "operation": "操作",
@@ -200,7 +201,7 @@
     "description": "描述",
     "authentication": "验证",
     "token": "令牌",
-    "where": "where",
+    "where": "在哪里",
     "cache": "缓存",
     "chat": "聊天",
     "email": "电子邮件",
@@ -224,15 +225,15 @@
     },
     "community": {
       "starUs1": "点赞",
-      "starUs2": "我们在 Github",
+      "starUs2": "我们的 Github",
       "bookDemo": "查看免费演示",
       "getAnswered": "通过这里让你的问题得到解答",
       "joinDiscord": "加入 Discord",
-      "joinCommunity": "Join NocoDB Community",
-      "joinReddit": "加入/r/NocoDB",
+      "joinCommunity": "加入 NocoDB 社区",
+      "joinReddit": "加入 /r/NocoDB",
       "followNocodb": "关注 NocoDB"
     },
-    "docReference": "文件参考文献",
+    "docReference": "参考文档",
     "selectUserRole": "选择用户角色",
     "childTable": "子表",
     "childColumn": "子列",
@@ -255,7 +256,7 @@
       "excel": "从Excel创建项目",
       "template": "从模板创建项目"
     },
-    "OkSaveProject": "好的和保存项目",
+    "OkSaveProject": "确认并保存项目",
     "upgrade": {
       "available": "升级可用",
       "releaseNote": "发行说明",
@@ -264,7 +265,7 @@
     "translate": "帮助翻译",
     "account": {
       "authToken": "复制auth令牌",
-      "swagger": "Swagger Apis Doc.",
+      "swagger": "Swagger Apis 文档",
       "projInfo": "复制项目信息",
       "themes": "主题"
     },
@@ -286,7 +287,7 @@
     "editUser": "编辑用户",
     "deleteUser": "从项目中删除用户",
     "resendInvite": "重新发送邀请电子邮件",
-    "copyInviteURL": "复制邀请URL.",
+    "copyInviteURL": "复制邀请链接",
     "newRole": "新角色",
     "reloadRoles": "重新加载角色",
     "nextPage": "下一页",
@@ -305,9 +306,10 @@
     "insertRow": "插入新行",
     "deleteRow": "删除行",
     "deleteSelectedRow": "删除所选行",
-    "importExcel": "导入Excel.",
-    "downloadCSV": "下载为CSV.",
-    "uploadCSV": "上传CSV.",
+    "importExcel": "导入Excel",
+    "importCSV": "Import CSV",
+    "downloadCSV": "下载为CSV",
+    "uploadCSV": "上传CSV",
     "import": "导入",
     "importMetadata": "导入元数据",
     "exportMetadata": "导出元数据",
@@ -324,16 +326,16 @@
     "createGrid": "创建网格视图",
     "createGallery": "创建画廊视图",
     "createCalendar": "创建日历视图",
-    "createKanban": "创建寻呼视图",
+    "createKanban": "创建看板视图",
     "createForm": "创建表单视图",
     "showSystemFields": "显示系统字段",
-    "copyUrl": "复制URL.",
+    "copyUrl": "复制链接",
     "openTab": "打开新标签",
-    "iFrame": "复制嵌入式HTML代码",
+    "iFrame": "复制嵌入HTML代码",
     "addWebhook": "添加新的webhook.",
-    "newToken": "添加新令牌",
+    "newToken": "添加新 Token",
     "exportZip": "导出为zip格式",
-    "importZip": "zip格式导入",
+    "importZip": "导入zip格式",
     "metaSync": "立即同步",
     "settings": "设置",
     "previewAs": "预览",
@@ -346,7 +348,7 @@
   },
   "tooltip": {
     "saveChanges": "保存更改",
-    "xcDB": "新建一个项目",
+    "xcDB": "新建项目",
     "extDB": "支持 MySQL、PostgreSQL、SQL Server 和 SQLite",
     "apiRest": "通过 REST APIs 访问",
     "apiGQL": "通过 GraphQL APIs 访问",
@@ -363,7 +365,7 @@
     "reloadList": "重新加载列表",
     "metaSync": "同步元数据",
     "sqlMigration": "重新加载迁移",
-    "updateRestart": "更新 & 重启",
+    "updateRestart": "更新并重启",
     "cancelReturn": "取消并返回",
     "exportMetadata": "从元数据表格导出所有元数据到元数据目录",
     "importMetadata": "从元数据目录导入所有的元数据到元数据表格",
@@ -397,8 +399,9 @@
       "upload_sub": "或拖放文件",
       "excelSupport": "支持：.xls，.xlsx，.xlsm，.ods，.ots",
       "excelURL": "输入Excel文件URL",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "要解析为推断数据类型的行数",
-      "excelImport": "板材可用于进口",
+      "excelImport": "可用于导入的表格",
       "exportMetadata": "您想从元表导出元数据吗？",
       "importMetadata": "您想从元表导入元数据吗？",
       "clearMetadata": "你想清除元表中的元数据吗？",
@@ -407,7 +410,7 @@
       "startProject": "你想启动这个项目吗？",
       "restartProject": "你想重新启动项目吗？",
       "deleteProject": "你想删除这个项目吗？",
-      "shareBasePrivate": "产生公开可享的Readonly Base",
+      "shareBasePrivate": "产生公开共享的只读基础",
       "shareBasePublic": "互联网上的任何人都可以查看",
       "userInviteNoSMTP": "看起来你还没有配置邮件！请复制上面的邀请链接并将其发送给",
       "dragDropHide": "在此处拖放字段以隐藏",
@@ -482,7 +485,7 @@
       "tableNameInDb": "数据库中保存的表名"
     },
     "error": {
-      "searchProject": "你的搜索： {search} 没有发现匹配的结果",
+      "searchProject": "搜索： {search} 没有发现匹配的结果",
       "invalidChar": "文件夹路径中的字符无效。",
       "invalidDbCredentials": "无效的数据库凭据。",
       "unableToConnectToDb": "无法连接到数据库，请检查您的数据库是否已启动。",
@@ -500,14 +503,14 @@
       "exportMetadata": "项目元数据成功导出",
       "importMetadata": "项目元数据成功导入",
       "clearMetadata": "项目元数据已成功清除",
-      "stopProject": "项目成功停止了",
+      "stopProject": "项目成功停止",
       "startProject": "项目成功开始",
       "restartProject": "项目成功重新启动",
       "deleteProject": "项目已成功删除",
       "authToken": "验证令牌复制到剪贴板",
       "projInfo": "将项目信息复制到剪贴板",
-      "inviteUrlCopy": "复制邀请URL到剪贴板",
-      "createView": "查看成功创建",
+      "inviteUrlCopy": "复制邀请链接到剪贴板",
+      "createView": "视图创建成功",
       "formEmailSMTP": "请激活App Store中的SMTP插件以启用电子邮件通知",
       "collabView": "成功转换为协作视图",
       "lockedView": "成功转换为锁定视图",
diff --git a/packages/nc-gui/lang/zh_HK.json b/packages/nc-gui/lang/zh_HK.json
index baa846cfce..614c1babeb 100644
--- a/packages/nc-gui/lang/zh_HK.json
+++ b/packages/nc-gui/lang/zh_HK.json
@@ -171,7 +171,8 @@
     "headLogin": "登入 | NocoDB",
     "resetPassword": "reset你嗰密碼",
     "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
     "notifyVia": "通知Via",
@@ -306,6 +307,7 @@
     "deleteRow": "刪除行",
     "deleteSelectedRow": "刪除所選行",
     "importExcel": "導入Excel.",
+    "importCSV": "Import CSV",
     "downloadCSV": "下載為CSV.",
     "uploadCSV": "上傳CSV.",
     "import": "導出去file",
@@ -397,6 +399,7 @@
       "upload_sub": "或拖放文件",
       "excelSupport": "支持：.xls，.xlsx，.xlsm，.ods，.ots",
       "excelURL": "輸入Excel文件URL",
+      "csvURL": "Enter CSV file URL",
       "footMsg": "要解析為推斷數據類型的行數",
       "excelImport": "板材可用於進口",
       "exportMetadata": "您想從元表導出元數據嗎？",
diff --git a/packages/nc-gui/lang/zh_TW.json b/packages/nc-gui/lang/zh_TW.json
index 161d84c2a6..9003a2d005 100644
--- a/packages/nc-gui/lang/zh_TW.json
+++ b/packages/nc-gui/lang/zh_TW.json
@@ -1,57 +1,57 @@
 {
   "general": {
     "home": "首頁",
-    "load": "加載",
-    "open": "打開",
+    "load": "載入",
+    "open": "開啟",
     "close": "關閉",
-    "yes": "是的",
+    "yes": "是",
     "no": "否",
-    "ok": "行",
+    "ok": "OK",
     "and": "和",
-    "or": "或者",
-    "add": "添加",
+    "or": "或",
+    "add": "新增",
     "edit": "編輯",
-    "remove": "消除",
-    "save": "保存",
+    "remove": "移除",
+    "save": "儲存",
     "cancel": "取消",
     "submit": "提交",
     "create": "建立",
     "insert": "插入",
     "delete": "刪除",
     "update": "更新",
-    "rename": "改名",
-    "reload": "重新加載",
+    "rename": "重新命名",
+    "reload": "重新載入",
     "reset": "重設",
     "install": "安裝",
-    "show": "展示",
+    "show": "顯示",
     "hide": "隱藏",
     "showAll": "顯示所有",
-    "hideAll": "全部藏起來",
+    "hideAll": "全部隱藏",
     "showMore": "顯示更多",
     "showOptions": "顯示選項",
     "hideOptions": "隱藏選項",
-    "showMenu": "顯示菜單",
-    "hideMenu": "隱藏菜單",
-    "addAll": "全部添加",
-    "removeAll": "移除所有",
+    "showMenu": "顯示選單",
+    "hideMenu": "隱藏選單",
+    "addAll": "全部新增",
+    "removeAll": "全部移除",
     "signUp": "註冊",
     "signIn": "登入",
     "signOut": "登出",
     "required": "必填",
     "preferred": "首選",
     "mandatory": "強制的",
-    "loading": "loading ...",
+    "loading": "載入中...",
     "title": "標題",
     "upload": "上傳",
     "download": "下載",
-    "default": "默認",
-    "more": "更多的",
-    "less": "較少的",
+    "default": "預設",
+    "more": "更多",
+    "less": "較少",
     "event": "事件",
-    "condition": "健康）狀況",
+    "condition": "條件",
     "after": "後",
     "before": "前",
-    "search": "搜索",
+    "search": "搜尋",
     "notification": "通知",
     "reference": "參考",
     "function": "功能"
@@ -66,12 +66,12 @@
     "column": "列",
     "columns": "列",
     "page": "頁",
-    "pages": "頁面",
+    "pages": "頁",
     "record": "記錄",
     "records": "記錄",
-    "webhook": "Webhook.",
-    "webhooks": "Webhooks.",
-    "view": "看法",
+    "webhook": "Webhook",
+    "webhooks": "Webhook",
+    "view": "檢視表",
     "views": "檢視表",
     "viewType": {
       "grid": "網格",
@@ -80,8 +80,8 @@
       "kanban": "看板",
       "calendar": "日曆"
     },
-    "user": "用戶",
-    "users": "用戶",
+    "user": "使用者",
+    "users": "使用者",
     "role": "角色",
     "roles": "角色",
     "roleType": {
@@ -89,7 +89,7 @@
       "creator": "創造者",
       "editor": "編輯",
       "commenter": "評論者",
-      "viewer": "觀眾"
+      "viewer": "檢視者"
     }
   },
   "datatype": {
@@ -98,16 +98,16 @@
     "SingleLineText": "單行文本",
     "LongText": "長篇文章",
     "Attachment": "附件",
-    "Checkbox": "複選框",
+    "Checkbox": "核取方塊",
     "MultiSelect": "多選",
-    "SingleSelect": "單個選擇",
+    "SingleSelect": "單選",
     "Collaborator": "合作者",
     "Date": "日期",
     "Year": "年",
     "Time": "時間",
     "PhoneNumber": "電話號碼",
     "Email": "電子郵件",
-    "URL": "URL.",
+    "URL": "網址",
     "Number": "數字",
     "Decimal": "十進制",
     "Currency": "貨幣",
@@ -129,7 +129,7 @@
       "noAction": "沒有任何行動",
       "cascade": "級聯",
       "restrict": "嚴格",
-      "setNull": "設置null.",
+      "setNull": "設置 null",
       "setDefault": "默認設置"
     }
   },
@@ -158,23 +158,24 @@
     "rolesMgmt": "角色管理",
     "projMeta": "專案中繼資料",
     "metaMgmt": "中繼資料管理",
-    "metadata": "元數據",
-    "exportImportMeta": "導出/導入元數據",
-    "uiACL": "UI訪問控制",
+    "metadata": "中繼資料",
+    "exportImportMeta": "匯出/匯入中繼資料",
+    "uiACL": "UI 存取控制",
     "metaOperations": "中繼資料操作",
     "audit": "稽核",
     "auditLogs": "稽核記錄",
-    "sqlMigrations": "SQL遷移",
+    "sqlMigrations": "SQL 遷移",
     "dbCredentials": "資料庫憑證",
     "advancedParameters": "SSL 及進階參數",
     "headCreateProject": "建立新專案｜NocoDB",
     "headLogin": "登入｜NocoDB",
     "resetPassword": "重設密碼",
-    "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs"
+    "teamAndSettings": "團隊 & 設定",
+    "apiDocs": "API 說明文件",
+    "importFromAirtable": "Import From Airtable"
   },
   "labels": {
-    "notifyVia": "通知Via",
+    "notifyVia": "透過...通知",
     "projName": "項目名",
     "tableName": "表名稱",
     "viewName": "查看名稱",
@@ -199,7 +200,7 @@
     "operationSubType": "操作子類型",
     "description": "描述",
     "authentication": "驗證",
-    "token": "令牌",
+    "token": "權杖",
     "where": "在哪裡",
     "cache": "緩存",
     "chat": "聊天",
@@ -208,9 +209,9 @@
     "uiAcl": "UI-ACL",
     "models": "楷模",
     "syncState": "同步狀態",
-    "created": "創造了",
-    "sqlOutput": "SQL輸出",
-    "addOption": "添加選項",
+    "created": "已建立",
+    "sqlOutput": "SQL 輸出",
+    "addOption": "新增選項",
     "aggregateFunction": "匯總功能",
     "dbCreateIfNotExists": "資料庫：不存在則建立",
     "clientKey": "用戶端金鑰",
@@ -220,7 +221,7 @@
     "requriedIdentity": "必填 - IDENTITY",
     "inflection": {
       "tableName": "屈折 - 表格名稱",
-      "columnName": "屈折 - 直行名稱"
+      "columnName": "屈折 - 欄位名稱"
     },
     "community": {
       "starUs1": "在 Github 上",
@@ -228,20 +229,20 @@
       "bookDemo": "預訂免費 Demo",
       "getAnswered": "解惑您的問題",
       "joinDiscord": "加入 Discord",
-      "joinCommunity": "Join NocoDB Community",
+      "joinCommunity": "加入 NocoDB 社群",
       "joinReddit": "加入 /r/NocoDB",
       "followNocodb": "追蹤 NocoDB"
     },
     "docReference": "文件參考文獻",
-    "selectUserRole": "選擇用戶角色",
-    "childTable": "兒童表",
-    "childColumn": "兒童專欄",
+    "selectUserRole": "選擇使用者角色",
+    "childTable": "子表格",
+    "childColumn": "子欄",
     "onUpdate": "更新",
     "onDelete": "在刪除"
   },
   "activity": {
     "createProject": "建立專案",
-    "importProject": "進口項目",
+    "importProject": "匯入專案",
     "searchProject": "搜尋專案",
     "editProject": "編輯專案",
     "stopProject": "停止專案",
@@ -255,7 +256,7 @@
       "excel": "從 Excel 建立專案",
       "template": "從模板建立專案"
     },
-    "OkSaveProject": "好的和保存項目",
+    "OkSaveProject": "確認並儲存專案",
     "upgrade": {
       "available": "升級可用",
       "releaseNote": "發行說明",
@@ -263,9 +264,9 @@
     },
     "translate": "幫助翻譯",
     "account": {
-      "authToken": "複製auth令牌",
-      "swagger": "Swagger Apis Doc.",
-      "projInfo": "複製項目信息",
+      "authToken": "複製驗證權杖",
+      "swagger": "Swagger Api 說明文件",
+      "projInfo": "複製專案資訊",
       "themes": "主題"
     },
     "sort": "種類",
@@ -275,20 +276,20 @@
     "share": "分享",
     "shareBase": {
       "disable": "禁用共享基礎",
-      "enable": "任何有鏈接的人",
+      "enable": "任何有連結的人",
       "link": "共享基本鏈接"
     },
     "invite": "邀請",
     "inviteMore": "邀請更多",
     "inviteTeam": "邀請團隊",
-    "inviteToken": "邀請令牌",
-    "newUser": "新用戶",
-    "editUser": "編輯用戶",
-    "deleteUser": "從項目中刪除用戶",
+    "inviteToken": "邀請權杖",
+    "newUser": "新使用者",
+    "editUser": "編輯使用者",
+    "deleteUser": "從專案中刪除使用者",
     "resendInvite": "重新發送邀請電子郵件",
-    "copyInviteURL": "複製邀請URL.",
+    "copyInviteURL": "複製邀請連結",
     "newRole": "新角色",
-    "reloadRoles": "重新加載角色",
+    "reloadRoles": "重新載入角色",
     "nextPage": "下一頁",
     "prevPage": "上一頁",
     "nextRecord": "下一步記錄",
@@ -300,14 +301,15 @@
     "deleteTable": "表刪除",
     "addField": "將新字段添加到此表",
     "setPrimary": "設置為主要值",
-    "addRow": "添加新行",
-    "saveRow": "保存行",
+    "addRow": "新增行",
+    "saveRow": "儲存行",
     "insertRow": "插入新行",
     "deleteRow": "刪除行",
     "deleteSelectedRow": "刪除所選行",
-    "importExcel": "導入Excel.",
-    "downloadCSV": "下載為CSV.",
-    "uploadCSV": "上傳CSV.",
+    "importExcel": "匯入 Excel",
+    "importCSV": "匯入 CSV",
+    "downloadCSV": "下載為 CSV",
+    "uploadCSV": "上傳 CSV",
     "import": "匯入",
     "importMetadata": "匯入中繼資料",
     "exportMetadata": "匯出中繼資料",
@@ -327,12 +329,12 @@
     "createKanban": "創建尋呼視圖",
     "createForm": "創建表單視圖",
     "showSystemFields": "顯示系統字段",
-    "copyUrl": "複製URL.",
-    "openTab": "打開新標籤",
-    "iFrame": "複製嵌入式HTML代碼",
-    "addWebhook": "添加新的webhook.",
-    "newToken": "添加新令牌",
-    "exportZip": "輸出 ZIP",
+    "copyUrl": "複製網址",
+    "openTab": "開啟新分頁",
+    "iFrame": "複製嵌入式 HTML 程式碼",
+    "addWebhook": "新增 webhook",
+    "newToken": "新增權杖",
+    "exportZip": "匯出 ZIP",
     "importZip": "匯入 ZIP",
     "metaSync": "立即同步",
     "settings": "設定",
@@ -345,23 +347,23 @@
     "sendEmail": "傳送電子郵件"
   },
   "tooltip": {
-    "saveChanges": "保存更改",
+    "saveChanges": "儲存更動",
     "xcDB": "建立新專案",
     "extDB": "支援 MySQL、PostgreSQL、SQL Server 和 SQLite",
     "apiRest": "可透過 REST API 存取",
     "apiGQL": "可透過 GraphQL API 存取",
     "theme": {
       "dark": "它確實有黑色（^⇧b）",
-      "light": "它是黑色嗎？ （^⇧b）"
+      "light": "它是黑色嗎？（^⇧b）"
     },
     "addTable": "添加新表",
     "inviteMore": "邀請更多用戶",
     "toggleNavDraw": "切換導航抽屜",
-    "reloadApiToken": "重新加載API令牌",
-    "generateNewApiToken": "生成新的API令牌",
+    "reloadApiToken": "重新載入 API 權杖",
+    "generateNewApiToken": "產生新 API 權杖",
     "addRole": "添加新角色",
     "reloadList": "重新加載列表",
-    "metaSync": "同步元數據",
+    "metaSync": "同步中繼資料",
     "sqlMigration": "重新加載遷移",
     "updateRestart": "更新並重新啟動",
     "cancelReturn": "取消並返回",
@@ -387,28 +389,29 @@
     "searchApps": "搜索應用程序",
     "searchModels": "搜索模型",
     "noItemsFound": "未找到任何項目",
-    "defaultValue": "默認值",
+    "defaultValue": "預設值",
     "filterByEmail": "通過電子郵件過濾"
   },
   "msg": {
     "info": {
       "footerInfo": "每頁行駛",
-      "upload": "選擇文件以上傳",
-      "upload_sub": "或拖放文件",
+      "upload": "選擇檔案以上傳",
+      "upload_sub": "或拖放檔案",
       "excelSupport": "支持：.xls，.xlsx，.xlsm，.ods，.ots",
-      "excelURL": "輸入Excel文件URL",
+      "excelURL": "輸入 Excel 檔案 URL",
+      "csvURL": "輸入 CSV 檔案 URL",
       "footMsg": "要解析為推斷數據類型的行數",
       "excelImport": "板材可用於進口",
-      "exportMetadata": "您想從元表導出元數據嗎？",
-      "importMetadata": "您想從元表導入元數據嗎？",
-      "clearMetadata": "你想清除元表中的元數據嗎？",
+      "exportMetadata": "您想從中繼表格中匯出中繼資料嗎？",
+      "importMetadata": "您想從中繼表格中匯入中繼資料嗎？",
+      "clearMetadata": "你想清除中繼表格中的中繼資料嗎？",
       "projectEmptyMessage": "從建立新專案開始",
-      "stopProject": "你想停止這個項目嗎？",
-      "startProject": "你想啟動這個項目嗎？",
-      "restartProject": "你想重新啟動項目嗎？",
-      "deleteProject": "你想刪除這個項目嗎？",
-      "shareBasePrivate": "產生公開可享的Readonly Base",
-      "shareBasePublic": "互聯網上的任何人都可以查看",
+      "stopProject": "你想停止這個專案嗎？",
+      "startProject": "你想啟動這個專案嗎？",
+      "restartProject": "你想重新啟動專案嗎？",
+      "deleteProject": "你想刪除這個專案嗎？",
+      "shareBasePrivate": "產生公開可享的 Readonly Base",
+      "shareBasePublic": "網路上的任何人都可以查看",
       "userInviteNoSMTP": "看起來你還沒有配置郵件！請複制上面的邀請鏈接並將其發送給",
       "dragDropHide": "在此處拖放字段以隱藏",
       "formInput": "輸入表單輸入標籤",
@@ -422,7 +425,7 @@
       "afterFormSubmitted": "表格提交後",
       "apiOptions": "存取專案方式",
       "submitAnotherForm": "顯示“提交另一個表格”按鈕",
-      "showBlankForm": "5秒後顯示空白表格",
+      "showBlankForm": "5 秒後顯示空白表格",
       "emailForm": "發電子郵件給我",
       "showSysFields": "顯示系統字段",
       "filterAutoApply": "自動申請",
@@ -437,7 +440,7 @@
       "editorDesc": "可以編輯記錄但無法更改數據庫/字段的結構。",
       "commenterDesc": "可以查看和評論記錄，但無法編輯任何內容",
       "viewerDesc": "可以查看記錄但無法編輯任何內容",
-      "addUser": "添加新用戶",
+      "addUser": "新增使用者",
       "staticRoleInfo": "無法編輯系統定義的角色",
       "exportZip": "將專案中繼資料匯出為 ZIP 檔案並下載。",
       "importZip": "匯入專案中繼資料 ZIP 檔案並重新啟動。",
@@ -456,7 +459,7 @@
       },
       "loginMsg": "登入 NocoDB",
       "passwordRecovery": {
-        "message_1": "請填入您註冊時使用的電子信箱位址。",
+        "message_1": "請填入您註冊時使用的電子信箱地址。",
         "message_2": "我們將傳給您一封電子郵件，其中包含重設密碼的連結。",
         "success": "請確認您的電子郵件以重設密碼"
       },
@@ -487,7 +490,7 @@
       "invalidDbCredentials": "資料庫憑證無效。",
       "unableToConnectToDb": "無法連線至資料庫。請檢查您的資料庫是否已經上線。",
       "userDoesntHaveSufficientPermission": "使用者不存在，或者是無權建立結構。",
-      "dbConnectionStatus": "數據庫參數無效",
+      "dbConnectionStatus": "資料庫參數無效",
       "dbConnectionFailed": "連線失敗：",
       "signUpRules": {
         "emailReqd": "電子信箱地址為必填",
@@ -497,21 +500,21 @@
       }
     },
     "toast": {
-      "exportMetadata": "項目元數據成功導出",
-      "importMetadata": "項目元數據成功導入",
-      "clearMetadata": "項目元數據已成功清除",
-      "stopProject": "項目成功停止了",
-      "startProject": "項目成功開始",
-      "restartProject": "項目成功重新啟動",
-      "deleteProject": "項目已成功刪除",
-      "authToken": "驗證令牌複製到剪貼板",
-      "projInfo": "將項目信息複製到剪貼板",
-      "inviteUrlCopy": "複製邀請URL到剪貼板",
-      "createView": "查看成功創建",
-      "formEmailSMTP": "請激活App Store中的SMTP插件以啟用電子郵件通知",
+      "exportMetadata": "專案中繼資料已成功匯出",
+      "importMetadata": "專案中繼資料已成功匯入",
+      "clearMetadata": "專案中繼資料已成功清除",
+      "stopProject": "專案成功停止",
+      "startProject": "專案成功啟動",
+      "restartProject": "專案成功重新啟動",
+      "deleteProject": "專案已成功刪除",
+      "authToken": "驗證權杖已複製到剪貼簿",
+      "projInfo": "已將專案資訊複製到剪貼簿",
+      "inviteUrlCopy": "已將邀請連結複製到剪貼簿",
+      "createView": "成功建立檢視表",
+      "formEmailSMTP": "請啟用 App Store 中的 SMTP 外掛程式以啟用電子郵件通知",
       "collabView": "成功轉換為協作視圖",
       "lockedView": "成功轉換為鎖定視圖",
       "futureRelease": "即將推出！"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/nc-gui/layouts/default.vue b/packages/nc-gui/layouts/default.vue
index f2222e2f5b..c44da16941 100644
--- a/packages/nc-gui/layouts/default.vue
+++ b/packages/nc-gui/layouts/default.vue
@@ -1,6 +1,5 @@
 <template>
   <v-app v-if="isProjectInfoLoaded">
-    <snackbar />
     <v-app-bar
       class="elevation-0"
       color="primary"
@@ -29,8 +28,8 @@
             <span
               class="caption font-weight-light pointer"
             >(v{{
-              $store.state.project.projectInfo &&
-                $store.state.project.projectInfo.version
+              $store.state.project.appInfo &&
+                $store.state.project.appInfo.version
             }})</span>
           </v-tooltip>
 
@@ -85,7 +84,7 @@
               @shortkey="$router.push('/')"
             />
             <x-btn
-              v-if="!$store.state.windows.nc"
+              v-if="!$store.state.settings.nc"
               text
               btn.class="caption font-weight-bold px-2 text-capitalize"
               tooltip="Enable/Disable Models"
@@ -332,18 +331,17 @@
 <script>
 
 import { mapGetters, mapActions, mapMutations } from 'vuex'
-import ReleaseInfo from '@/components/releaseInfo'
+import ReleaseInfo from '~/components/ReleaseInfo'
 import 'splitpanes/dist/splitpanes.css'
-import XBtn from '../components/global/xBtn'
-import dlgUnexpectedError from '../components/utils/dlgUnexpectedError'
-import settings from '../components/settings'
+import XBtn from '../components/global/XBtn'
+import dlgUnexpectedError from '../components/utils/DlgUnexpectedError'
+import settings from '../components/Settings'
 import { copyTextToClipboard } from '@/helpers/xutils'
-import Snackbar from '~/components/snackbar'
-import Language from '~/components/utils/language'
-import Loader from '~/components/loader'
-import PreviewAs from '~/components/previewAs'
-import ShareOrInviteModal from '~/components/auth/shareOrInviteModal'
-import ImportantAnnouncement from '../components/importantAnnouncement.vue'
+import Language from '~/components/utils/Language'
+import Loader from '~/components/Loader'
+import PreviewAs from '~/components/PreviewAs'
+import ShareOrInviteModal from '~/components/auth/ShareOrInviteModal'
+import ImportantAnnouncement from '../components/ImportantAnnouncement.vue'
 
 export default {
   components: {
@@ -353,7 +351,6 @@ export default {
     ReleaseInfo,
     Language,
     XBtn,
-    Snackbar,
     dlgUnexpectedError,
     settings,
     ImportantAnnouncement
@@ -394,10 +391,10 @@ export default {
   computed: {
 
     swaggerLink() {
-      return new URL(`/api/v1/db/meta/projects/${this.projectId}/swagger`, this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.ncSiteUrl)
+      return new URL(`/api/v1/db/meta/projects/${this.projectId}/swagger`, this.$store.state.project.appInfo && this.$store.state.project.appInfo.ncSiteUrl)
     },
     redocLink() {
-      return new URL(`/api/v1/db/meta/projects/${this.projectId}/redoc`, this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.ncSiteUrl)
+      return new URL(`/api/v1/db/meta/projects/${this.projectId}/redoc`, this.$store.state.project.appInfo && this.$store.state.project.appInfo.ncSiteUrl)
     },
     ...mapGetters({
       logo: 'plugins/brandLogo',
@@ -454,9 +451,9 @@ export default {
   methods: {
     ...mapActions({ changeActiveTab: 'tabs/changeActiveTab' }),
     ...mapMutations({
-      toggleLogWindow: 'windows/MutToggleLogWindow',
-      toggleOutputWindow: 'windows/MutToggleOutputWindow',
-      toggleTreeviewWindow: 'windows/MutToggleTreeviewWindow'
+      toggleLogWindow: 'settings/MutToggleLogWindow',
+      toggleOutputWindow: 'settings/MutToggleOutputWindow',
+      toggleTreeviewWindow: 'settings/MutToggleTreeviewWindow'
     }),
     async loadProjectInfo() {
       // if (this.$route.params.project_id) {
@@ -482,7 +479,7 @@ export default {
     },
 
     isProjectInfoLoaded() {
-      return this.$store.state.project.projectInfo !== null
+      return this.$store.state.project.appInfo !== null
     },
     githubClickHandler(e) {
       //   e.preventDefault();
@@ -728,8 +725,8 @@ export default {
     },
     changeTheme() {
       this.$store.dispatch(
-        'windows/ActToggleDarkMode',
-        !this.$store.state.windows.darkTheme
+        'settings/ActToggleDarkMode',
+        !this.$store.state.settings.darkTheme
       )
       this.$e('c:navbar:theme')
     },
diff --git a/packages/nc-gui/mixins/colors.js b/packages/nc-gui/mixins/colors.js
index e15010f642..3a7bedcb79 100644
--- a/packages/nc-gui/mixins/colors.js
+++ b/packages/nc-gui/mixins/colors.js
@@ -3,10 +3,10 @@ import { enumColor as colors } from '@/components/project/spreadsheet/helpers/co
 export default {
   computed: {
     colors() {
-      return this.$store.state.windows.darkTheme ? colors.dark : colors.light
+      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
     },
     textColors() {
-      return this.$store.state.windows.darkTheme ? colors.light : colors.dark
+      return this.$store.state.settings.darkTheme ? colors.light : colors.dark
     }
   },
   methods: {
diff --git a/packages/nc-gui/pages/apiClient.vue b/packages/nc-gui/pages/apiClient.vue
index a50b3fcdac..23fb2f0e14 100644
--- a/packages/nc-gui/pages/apiClient.vue
+++ b/packages/nc-gui/pages/apiClient.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ApiClientSwagger from '../components/project/apiClientSwagger'
+import ApiClientSwagger from '../components/project/ApiClientSwagger'
 export default {
   name: 'ApiClient',
   components: { ApiClientSwagger }
diff --git a/packages/nc-gui/pages/index.vue b/packages/nc-gui/pages/index.vue
index e9ead33504..42894da2cf 100644
--- a/packages/nc-gui/pages/index.vue
+++ b/packages/nc-gui/pages/index.vue
@@ -5,14 +5,13 @@
     align="center"
     justify="center"
   >
-    <template v-if="typed && moved || $store.state.project.projectInfo && $store.state.project.projectInfo.ncMin">
+    <template v-if="typed && moved || $store.state.project.appInfo && $store.state.project.appInfo.ncMin">
       <v-col
         cols="12"
         sm="12"
         md="12"
         class="text-center "
       >
-
         <h1 class="mt-8 mb-4 primary--text  mt-1  white--tex mb-0 text-h2 font-weight-black">
           NocoDB <br><span
             class="textColor--text text--lighten-1"
@@ -46,7 +45,6 @@
           <img src="db/sqlite.svg">
         </div>
       </v-col>
-
     </template>
     <div v-else>
       <p class="display-4 text-center font-weight-bold textColor--text text--lighten-1 welcome-msg">
@@ -350,19 +348,19 @@ export default {
   }),
   computed: {
     text() {
-      const text = this.lang.find(it => it.symbol === this.$store.state.windows.language)
+      const text = this.lang.find(it => it.symbol === this.$store.state.settings.language)
       return text ? text.text : 'default'
     },
-    projectInfo() {
-      return this.$store.state.project.projectInfo
+    appInfo() {
+      return this.$store.state.project.appInfo
     },
     message() {
       let message = this.defaultMessage
 
-      if (this.projectInfo) {
-        switch (this.projectInfo.authType) {
+      if (this.appInfo) {
+        switch (this.appInfo.authType) {
           case 'jwt':
-            /* if (this.projectInfo.projectHasDb) { */
+            /* if (this.appInfo.projectHasDb) { */
             message = // 'The Open Source Airtable alternative. <br/>' +
               'Turns any database into an Airtable like collaborative spreadsheet. <br/>'
             // +
@@ -372,14 +370,14 @@ export default {
                 } */
             break
           /*          case 'masterKey':
-                      if (this.projectInfo.projectHasDb) {
+                      if (this.appInfo.projectHasDb) {
                         message = 'Looks like you configured databases. <br> Now it\'s time to authenticate via Master Key.';
                       } else {
                         message = 'Instantly generate REST APIs / GraphQL APIs / gRPC<br/> by connecting to any SQL database.'
                       }
                       break;
                     case 'none':
-                      if (this.projectInfo.projectHasDb) {
+                      if (this.appInfo.projectHasDb) {
                         message = 'Looks like you configured databases. <br> No authentication configured access dashboard.';
                       } else {
                         message = 'Instantly generate REST APIs / GraphQL APIs / gRPC<br/> by connecting to any SQL database.'
@@ -390,16 +388,16 @@ export default {
         }
       }
 
-      return message// `${message} <br><span class="caption">(Current Environment : ${this.projectInfo ? this.projectInfo.env : ''})</span>`;
+      return message// `${message} <br><span class="caption">(Current Environment : ${this.appInfo ? this.appInfo.env : ''})</span>`;
     }
   },
   created() {
-    const projectInfo = this.$store.state.project.projectInfo
-    if (projectInfo) {
-      if (this.$store.state.users.token || (projectInfo && projectInfo.authType === 'none')) {
+    const appInfo = this.$store.state.project.appInfo
+    if (appInfo) {
+      if (this.$store.state.users.token || (appInfo && appInfo.authType === 'none')) {
         this.$router.replace('/projects')
         return
-      } else if (projectInfo && projectInfo.projectHasAdmin) {
+      } else if (appInfo && appInfo.projectHasAdmin) {
         this.$router.replace('/user/authentication/signin')
         return
       }
@@ -457,11 +455,11 @@ export default {
     },
 
     navigate() {
-      if (this.projectInfo) {
-        // if (!this.projectInfo.projectHasDb) {
+      if (this.appInfo) {
+        // if (!this.appInfo.projectHasDb) {
         //   this.$router.push('/project/0')
         // } else
-        if (this.projectInfo.projectHasAdmin === false) {
+        if (this.appInfo.projectHasAdmin === false) {
           return this.$router.push('/user/authentication/signup')
         }
       }
diff --git a/packages/nc-gui/pages/nc/_project_id.vue b/packages/nc-gui/pages/nc/_project_id.vue
index 0553d1a90b..83d0ef3cf6 100644
--- a/packages/nc-gui/pages/nc/_project_id.vue
+++ b/packages/nc-gui/pages/nc/_project_id.vue
@@ -30,7 +30,7 @@
 <script>
 
 import { Splitpanes, Pane } from 'splitpanes'
-import ProjectTabs from '@/components/projectTabs'
+import ProjectTabs from '~/components/ProjectTabs'
 import ProjectTreeView from '@/components/ProjectTreeView'
 
 export default {
diff --git a/packages/nc-gui/pages/nc/base/_shared_base_id.vue b/packages/nc-gui/pages/nc/base/_shared_base_id.vue
index 85e8985eb5..b766442a5c 100644
--- a/packages/nc-gui/pages/nc/base/_shared_base_id.vue
+++ b/packages/nc-gui/pages/nc/base/_shared_base_id.vue
@@ -39,7 +39,7 @@
 <script>
 
 import { Splitpanes, Pane } from 'splitpanes'
-import ProjectTabs from '@/components/projectTabs'
+import ProjectTabs from '~/components/ProjectTabs'
 import ProjectTreeView from '@/components/ProjectTreeView'
 
 export default {
diff --git a/packages/nc-gui/pages/nc/form/_id.vue b/packages/nc-gui/pages/nc/form/_id.vue
index 05f1f00072..a17f69152c 100644
--- a/packages/nc-gui/pages/nc/form/_id.vue
+++ b/packages/nc-gui/pages/nc/form/_id.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import XcForm from '../../../components/project/spreadsheet/public/xcForm'
+import XcForm from '../../../components/project/spreadsheet/public/XcForm'
 
 export default {
   components: { XcForm },
diff --git a/packages/nc-gui/pages/nc/index.vue b/packages/nc-gui/pages/nc/index.vue
index 666cfe6a81..24c46ff3e6 100644
--- a/packages/nc-gui/pages/nc/index.vue
+++ b/packages/nc-gui/pages/nc/index.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container fluid class="pa-0 ma-0" style="overflow: auto">
-    <!--    <trialExpired v-if="$store.getters['windows/GtrHasTrialPeriodExpired']"></trialExpired>-->
+    <!--    <trialExpired v-if="$store.getters['settings/GtrHasTrialPeriodExpired']"></trialExpired>-->
     <splitpanes style="height:calc(100vh - 48px)" class="xc-theme">
       <pane min-size="10" :size="paneSize" max-size="50" style="overflow: auto">
         <ProjectTreeView />
@@ -13,10 +13,10 @@
         <!--            <ProjectTabs/>-->
         <!--          </pane>-->
 
-        <!--          <pane v-if="$store.state.windows.outputWindow" :size="10" style="overflow: auto"  >-->
+        <!--          <pane v-if="$store.state.settings.outputWindow" :size="10" style="overflow: auto"  >-->
         <!--            <ProjectOutput   />-->
         <!--          </pane>-->
-        <!--          <pane v-if="$store.state.windows.logWindow"  :size="10" style="overflow: auto" >-->
+        <!--          <pane v-if="$store.state.settings.logWindow"  :size="10" style="overflow: auto" >-->
         <!--            <ProjectLogs />-->
         <!--          </pane>-->
         <!--        </splitpanes>-->
@@ -26,7 +26,7 @@
 </template>
 <script>
 import { Splitpanes, Pane } from 'splitpanes'
-import ProjectTabs from '@/components/projectTabs'
+import ProjectTabs from '~/components/ProjectTabs'
 import ProjectTreeView from '@/components/ProjectTreeView'
 // import ProjectLogs from "~/components/ProjectLogs";
 // import ProjectOutput from "~/components/ProjectOutput";
@@ -67,7 +67,7 @@ export default {
     )
     //
     // this.$store.watch(
-    //   (state) => !state.windows.outputWindow && !state.windows.logWindow,
+    //   (state) => !state.settings.outputWindow && !state.settings.logWindow,
     //   (newState) => {
     //     if (newState) this.$nextTick(() => this.mainPanelSize = 100)
     //   }
diff --git a/packages/nc-gui/pages/nc/kanban/_id.vue b/packages/nc-gui/pages/nc/kanban/_id.vue
index 9c87815ace..a07c214696 100644
--- a/packages/nc-gui/pages/nc/kanban/_id.vue
+++ b/packages/nc-gui/pages/nc/kanban/_id.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import XcKanban from '../../../components/project/spreadsheet/public/xcKanban'
+import XcKanban from '../../../components/project/spreadsheet/public/XcKanban'
 
 export default {
   components: { XcKanban },
diff --git a/packages/nc-gui/pages/nc/view/_id.vue b/packages/nc-gui/pages/nc/view/_id.vue
index 9b84d3a6a0..4ee94dfd23 100644
--- a/packages/nc-gui/pages/nc/view/_id.vue
+++ b/packages/nc-gui/pages/nc/view/_id.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import XcTable from '../../../components/project/spreadsheet/public/xcTable'
+import XcTable from '../../../components/project/spreadsheet/public/XcTable'
 
 export default {
   components: { XcTable },
diff --git a/packages/nc-gui/pages/project/_id.vue b/packages/nc-gui/pages/project/_id.vue
index 984578d341..73a0536132 100644
--- a/packages/nc-gui/pages/project/_id.vue
+++ b/packages/nc-gui/pages/project/_id.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import CreateOrEditProject from '@/components/createOrEditProject'
+import CreateOrEditProject from '~/components/CreateOrEditProject'
 export default {
   name: 'Id',
   components: { CreateOrEditProject }
diff --git a/packages/nc-gui/pages/project/id.vue b/packages/nc-gui/pages/project/id.vue
index 4ffe580260..46069ba5bf 100644
--- a/packages/nc-gui/pages/project/id.vue
+++ b/packages/nc-gui/pages/project/id.vue
@@ -596,10 +596,10 @@ import { mapGetters, mapActions } from 'vuex'
 import Vue from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import axios from 'axios'
-import textDlgSubmitCancel from '../../components/utils/dlgTextSubmitCancel'
+import textDlgSubmitCancel from '../../components/utils/DlgTextSubmitCancel'
 
-import dlgOk from '../../components/utils/dlgOk.vue'
-import XBtn from '../../components/global/xBtn'
+import dlgOk from '../../components/utils/DlgOk.vue'
+import XBtn from '../../components/global/XBtn'
 
 const { uniqueNamesGenerator, starWars, adjectives, animals } = require('unique-names-generator')
 
@@ -1013,7 +1013,7 @@ export default {
           break
       }
 
-      xcConfig.type = this.$store.state.project.projectInfo ? this.$store.state.project.projectInfo.type : 'docker'
+      xcConfig.type = this.$store.state.project.appInfo ? this.$store.state.project.appInfo.type : 'docker'
 
       return xcConfig
     },
@@ -1072,9 +1072,9 @@ export default {
     },
 
     async createOrUpdateProject () {
-      // if (this.$store.state.windows.isComp) {
+      // if (this.$store.state.settings.isComp) {
       //   try {
-      //     ga('send', 'event', 'NewProject.', 'Action failed', this.$store.state.windows.isComp);
+      //     ga('send', 'event', 'NewProject.', 'Action failed', this.$store.state.settings.isComp);
       //   } catch (e) {
       //   }
       //   this.$toast.info(this.compErrorMessage).goAway(800);
@@ -1140,7 +1140,7 @@ export default {
 
       await this.$store.dispatch('project/ActLoadProjectInfo')
 
-      if (this.$store.state.project.projectInfo.firstUser || this.$store.state.project.projectInfo.authType === 'masterKey') {
+      if (this.$store.state.project.appInfo.firstUser || this.$store.state.project.appInfo.authType === 'masterKey') {
         return this.$router.push({
           path: '/user/authentication/signup'
         })
diff --git a/packages/nc-gui/pages/project/name.vue b/packages/nc-gui/pages/project/name.vue
index a999694366..b7f156e1c3 100644
--- a/packages/nc-gui/pages/project/name.vue
+++ b/packages/nc-gui/pages/project/name.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <v-toolbar>
-      <v-spacer/>
+      <v-spacer />
       Create New Project
-      <v-spacer/>
+      <v-spacer />
     </v-toolbar>
     <v-container>
       <v-form ref="form" v-model="valid">
@@ -69,8 +69,8 @@ export default {
     loading: false,
     projectType: 'rest',
     projectTypes: [
-      {text: 'Automatic REST APIs on database', value: 'rest', icon: 'mdi-code-json', iconColor: 'green'},
-      {text: 'Automatic GRAPHQL APIs on database', value: 'graphql', icon: 'mdi-graphql', iconColor: 'pink'},
+      { text: 'Automatic REST APIs on database', value: 'rest', icon: 'mdi-code-json', iconColor: 'green' },
+      { text: 'Automatic GRAPHQL APIs on database', value: 'graphql', icon: 'mdi-graphql', iconColor: 'pink' },
       {
         text: 'Automatic gRPC APIs on database',
         value: 'grpc',
@@ -82,9 +82,9 @@ export default {
   computed: {
     typeIcon() {
       if (this.projectType) {
-        return this.projectTypes.find(({value}) => value === this.projectType)
+        return this.projectTypes.find(({ value }) => value === this.projectType)
       } else {
-        return {icon: 'mdi-server', iconColor: 'primary'}
+        return { icon: 'mdi-server', iconColor: 'primary' }
       }
     }
   },
@@ -107,7 +107,7 @@ export default {
 
           this.projectReloading = false
 
-          if (this.$store.state.project.projectInfo.firstUser || this.$store.state.project.projectInfo.authType === 'masterKey') {
+          if (this.$store.state.project.appInfo.firstUser || this.$store.state.project.appInfo.authType === 'masterKey') {
             return this.$router.push({
               path: '/user/authentication/signup'
             })
diff --git a/packages/nc-gui/pages/project/templates/_id.vue b/packages/nc-gui/pages/project/templates/_id.vue
index b176a53d1f..ce8d7b369f 100644
--- a/packages/nc-gui/pages/project/templates/_id.vue
+++ b/packages/nc-gui/pages/project/templates/_id.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ProjectTemplate from '~/components/templates/detailed'
+import ProjectTemplate from '~/components/templates/Detailed'
 export default {
   components: { ProjectTemplate }
 }
diff --git a/packages/nc-gui/pages/project/templates/index.vue b/packages/nc-gui/pages/project/templates/index.vue
index c7ce8a4bf0..62a5ae70b3 100644
--- a/packages/nc-gui/pages/project/templates/index.vue
+++ b/packages/nc-gui/pages/project/templates/index.vue
@@ -3,7 +3,7 @@
 </template>
 <script>
 
-import ProjectTemplates from '~/components/templates/list'
+import ProjectTemplates from '~/components/templates/List'
 export default {
   components: {
     ProjectTemplates
diff --git a/packages/nc-gui/pages/project/xcdb.vue b/packages/nc-gui/pages/project/xcdb.vue
index 6605fd854e..18534c3a86 100644
--- a/packages/nc-gui/pages/project/xcdb.vue
+++ b/packages/nc-gui/pages/project/xcdb.vue
@@ -143,7 +143,7 @@ export default {
 
           this.projectReloading = false
 
-          if (this.$store.state.project.projectInfo.firstUser || this.$store.state.project.projectInfo.authType === 'masterKey') {
+          if (this.$store.state.project.appInfo.firstUser || this.$store.state.project.appInfo.authType === 'masterKey') {
             return this.$router.push({
               path: '/user/authentication/signup'
             })
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index 9a6553a5ca..83c324116a 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -2,12 +2,6 @@
   <v-container
     fluid
     class="text-center px-10 pt-10 nc-container"
-    @dragover.prevent="dragOver = true"
-    @dragenter.prevent="dragOver = true"
-    @dragexit="dragOver = false"
-    @dragleave="dragOver = false"
-    @dragend="dragOver = false"
-    @drop.prevent.stop="onFileDrop"
   >
     <v-row>
       <v-col v-if="loaded" class="col-lg-6 offset-lg-3 col-12 col-md-12">
@@ -28,8 +22,8 @@
                   :tooltip="$t('activity.refreshProject')"
                   @click="projectsRefresh"
                 >
-                  mdi-refresh </x-icon
-                >&nbsp;
+                  mdi-refresh
+                </x-icon>&nbsp;
                 <!--                </x-btn>-->
               </h1>
             </v-row>
@@ -47,29 +41,31 @@
                 style="max-width: 200px"
               >
                 <template #prepend-inner>
-                  <v-icon color="grey" class="mt-1" small> search </v-icon>
+                  <v-icon color="grey" class="mt-1" small>
+                    search
+                  </v-icon>
                 </template>
               </v-text-field>
               <v-spacer />
               <!-- Import NocoDB Project by uploading metadata zip file -->
-<!--              <x-btn-->
-<!--                vbind:tooltip="$t('msg.info.importText')"-->
-<!--                outlined-->
-<!--                color="grey"-->
-<!--                @click="-->
-<!--                  $refs.importFile.click();-->
-<!--                  project_id = null;-->
-<!--                "-->
-<!--              >-->
-<!--                <v-icon>mdi-import</v-icon>-->
-<!--              </x-btn>-->
+              <!--              <x-btn-->
+              <!--                vbind:tooltip="$t('msg.info.importText')"-->
+              <!--                outlined-->
+              <!--                color="grey"-->
+              <!--                @click="-->
+              <!--                  $refs.importFile.click();-->
+              <!--                  project_id = null;-->
+              <!--                "-->
+              <!--              >-->
+              <!--                <v-icon>mdi-import</v-icon>-->
+              <!--              </x-btn>-->
 
               <template v-if="connectToExternalDB">
                 <v-menu offset-y bottom open-on-hover>
                   <template #activator="{ on }">
                     <div>
                       <x-btn
-                        v-if="_isUIAllowed('projectCreate', true)"
+                        v-if="_isUIAllowed('projectCreate')"
                         v-ge="['home', 'project-new']"
                         data-v-step="1"
                         outlined
@@ -79,7 +75,9 @@
                       >
                         <!-- New Project -->
                         {{ $t("title.newProj") }}
-                        <v-icon class="mr-1" small> mdi-menu-down </v-icon>
+                        <v-icon class="mr-1" small>
+                          mdi-menu-down
+                        </v-icon>
                       </x-btn>
                     </div>
                   </template>
@@ -89,7 +87,9 @@
                       @click="onCreateProject('xcdb')"
                     >
                       <v-list-item-icon class="mr-2">
-                        <v-icon small> mdi-plus </v-icon>
+                        <v-icon small>
+                          mdi-plus
+                        </v-icon>
                       </v-list-item-icon>
                       <v-list-item-title>
                         <!-- Create -->
@@ -115,7 +115,9 @@
                       @click="onCreateProject()"
                     >
                       <v-list-item-icon class="mr-2">
-                        <v-icon small class=""> mdi-power-plug-outline </v-icon>
+                        <v-icon small class="">
+                          mdi-power-plug-outline
+                        </v-icon>
                       </v-list-item-icon>
                       <v-list-item-title>
                         <!-- Create By Connecting <br>To An External Database -->
@@ -135,26 +137,6 @@
                         <span class="caption">{{ $t("tooltip.extDB") }}</span>
                       </v-tooltip>
                     </v-list-item>
-                    <v-divider />
-                    <v-list-item
-                      title
-                      class="pt-2 nc-create-project-from-excel"
-                      @click="onCreateProjectFromExcel()"
-                    >
-                      <v-list-item-icon class="mr-2">
-                        <v-icon small class="">
-                          mdi-file-excel-outline
-                        </v-icon>
-                      </v-list-item-icon>
-                      <v-list-item-title>
-                        <span
-                          class="caption font-weight-regular"
-                          v-html="
-                            $t('activity.createProjectExtended.excel')
-                          "
-                        />
-                      </v-list-item-title>
-                    </v-list-item>
                   </v-list>
                 </v-menu>
               </template>
@@ -244,8 +226,8 @@
                       <div
                         v-if="
                           props.item.allowed &&
-                          _isUIAllowed('projectActions', true) &&
-                          props.item.is_creator
+                            _isUIAllowed('projectActions', true) &&
+                            props.item.is_creator
                         "
                         :class="{
                           'action-icons': !(
@@ -277,7 +259,7 @@
                         <x-icon
                           v-if="
                             projectStatusUpdating &&
-                            props.item.id === statusUpdatingProjectId
+                              props.item.id === statusUpdatingProjectId
                           "
                           class="mr-1"
                         >
@@ -317,7 +299,9 @@
                               "
                             >
                               <v-list-item-icon class="mr-1">
-                                <v-icon small> mdi-import </v-icon>
+                                <v-icon small>
+                                  mdi-import
+                                </v-icon>
                               </v-list-item-icon>
                               <v-list-item-title>
                                 <!-- Import Metadata -->
@@ -331,7 +315,9 @@
                               @click="exportMetaZip(props.item.id)"
                             >
                               <v-list-item-icon class="mr-1">
-                                <v-icon small> mdi-export </v-icon>
+                                <v-icon small>
+                                  mdi-export
+                                </v-icon>
                               </v-list-item-icon>
                               <v-list-item-title>
                                 <!-- Export Metadata -->
@@ -345,7 +331,9 @@
                               @click="resetMeta(props.item.id)"
                             >
                               <v-list-item-icon class="mr-1">
-                                <v-icon small> mdi-delete-variant </v-icon>
+                                <v-icon small>
+                                  mdi-delete-variant
+                                </v-icon>
                               </v-list-item-icon>
                               <v-list-item-title>
                                 <!-- Clear Metadata -->
@@ -413,8 +401,8 @@
                   @click="onCreateProject"
                 >
                   <v-icon color="white" class="blink_me">
-                    mdi-lightbulb-on </v-icon
-                  >&nbsp;
+                    mdi-lightbulb-on
+                  </v-icon>&nbsp;
                   <!-- New Project -->
                   {{ $t("title.newProj") }}
                 </x-btn>
@@ -444,12 +432,16 @@
           target="_blank"
         >
           <v-list-item-icon>
-            <v-icon class="ml-2 mt-n2"> mdi-github </v-icon>
+            <v-icon class="ml-2 mt-n2">
+              mdi-github
+            </v-icon>
           </v-list-item-icon>
           <v-list-item-title>
             <!-- Star -->
             {{ $t("labels.community.starUs1") }}
-            <v-icon small> mdi-star-outline </v-icon>
+            <v-icon small>
+              mdi-star-outline
+            </v-icon>
             <!-- us on Github -->
             {{ $t("labels.community.starUs2") }}
           </v-list-item-title>
@@ -474,7 +466,9 @@
         <v-divider />
         <v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank">
           <v-list-item-icon>
-            <v-icon class="ml-2" :color="textColors[0]"> mdi-discord </v-icon>
+            <v-icon class="ml-2" :color="textColors[0]">
+              mdi-discord
+            </v-icon>
           </v-list-item-icon>
           <!-- Get your questions answered -->
           <v-list-item-title>
@@ -489,7 +483,9 @@
           target="_blank"
         >
           <v-list-item-icon>
-            <v-icon class="ml-2" :color="textColors[1]"> mdi-twitter </v-icon>
+            <v-icon class="ml-2" :color="textColors[1]">
+              mdi-twitter
+            </v-icon>
           </v-list-item-icon>
           <!-- Follow NocoDB -->
           <v-list-item-title>
@@ -531,7 +527,7 @@
           <v-divider />
           <v-list-item dense target="_blank">
             <v-list-item-icon>
-              <img class="ml-2" src="vue.svg" width="25" />
+              <img class="ml-2" src="vue.svg" width="25">
             </v-list-item-icon>
             <!-- Follow NocoDB -->
             <v-list-item-title>
@@ -551,7 +547,7 @@
       type="file"
       accept=".zip"
       @change="importMetaZip"
-    />
+    >
 
     <dlg-label-submit-cancel
       v-if="dialogShow"
@@ -560,36 +556,31 @@
       :dialog-show="dialogShow"
       :heading="confirmMessage"
     />
-    <excel-import ref="excelImport" v-model="excelImportModal" hide-label />
     <templates-modal v-model="templatesModal" hide-label create-project />
   </v-container>
 </template>
 
 <script>
-import dlgLabelSubmitCancel from "../../components/utils/dlgLabelSubmitCancel.vue";
-import ShareIcons from "../../components/share-icons";
-import SponsorMini from "@/components/sponsorMini";
-import colors from "~/mixins/colors";
-import TemplatesModal from "~/components/templates/templatesModal";
-import ExcelImport from "~/components/import/excelImport";
+import dlgLabelSubmitCancel from '../../components/utils/DlgLabelSubmitCancel.vue'
+import ShareIcons from '../../components/ShareIcons'
+import SponsorMini from '~/components/SponsorMini'
+import colors from '~/mixins/colors'
+import TemplatesModal from '~/components/templates/TemplatesModal'
 
 export default {
   components: {
-    ExcelImport,
     TemplatesModal,
     ShareIcons,
     SponsorMini,
-    dlgLabelSubmitCancel,
+    dlgLabelSubmitCancel
     // howItWorks,
   },
   mixins: [colors],
   $_veeValidate: {
-    validator: "new",
+    validator: 'new'
   },
   data() {
     return {
-      dragOver: false,
-      excelImportModal: false,
       templatesModal: false,
       overlayVisible: true,
       showCommunity: false,
@@ -597,7 +588,7 @@ export default {
       loading: null,
       dialogShow: false,
       confirmAction: null,
-      confirmMessage: "",
+      confirmMessage: '',
 
       createProjectDialog: false,
       projectStatusUpdating: false,
@@ -608,262 +599,249 @@ export default {
       steps: [
         {
           target: '[data-v-step="1"]',
-          content: "Click here to create new Project.",
+          content: 'Click here to create new Project.',
           params: {
-            placement: "top",
-          },
+            placement: 'top'
+          }
         },
         {
           target: '[data-v-step="2"]',
-          content: "Click here to open existing project.",
+          content: 'Click here to open existing project.'
         },
         {
           target: '[data-v-step="3"]',
-          content: "Click here to filter projects.",
+          content: 'Click here to filter projects.'
         },
         {
           target: '[data-v-step="4"]',
-          content: "Click here to open project folder.",
+          content: 'Click here to open project folder.'
         },
         {
           target: '[data-v-step="5"]',
-          content: "Click here to edit project.",
+          content: 'Click here to edit project.'
         },
         {
           target: '[data-v-step="6"]',
-          content: "Click here to delete project.",
-        },
+          content: 'Click here to delete project.'
+        }
       ],
       loaded: false,
       dialog: {
         show: false,
-        title: "Confirm Deleting project",
-        heading: "",
+        title: 'Confirm Deleting project',
+        heading: '',
         // mtdOk: this.projectRemove,
-        type: "error",
+        type: 'error'
       },
       loadingProjects: true,
       newProjectDialog: false,
-      name: "",
-      type: "MySQL",
+      name: '',
+      type: 'MySQL',
       userSelectedDir: false,
-      dialogTitle: "New",
+      dialogTitle: 'New',
       databases: {
-        Oracle: "oracledb",
-        Postgres: "pg",
-        MySQL: "mysql",
-        MSSQL: "mssql",
-        Sqlite: "sqlite",
+        Oracle: 'oracledb',
+        Postgres: 'pg',
+        MySQL: 'mysql',
+        MSSQL: 'mssql',
+        Sqlite: 'sqlite'
       },
       headers: [
         {
-          text: "Title",
-          value: "title",
-          class: "caption",
+          text: 'Title',
+          value: 'title',
+          class: 'caption'
         },
         {
-          text: "",
-          value: "name",
+          text: '',
+          value: 'name',
           sortable: false,
-          class: "caption",
-        },
+          class: 'caption'
+        }
       ],
       projects: [],
-      search: "",
-      deleteBtnClicked: false,
-    };
+      search: '',
+      deleteBtnClicked: false
+    }
   },
   computed: {
     connectToExternalDB() {
       return (
         this.$store.state.project &&
-        this.$store.state.project.projectInfo &&
-        this.$store.state.project.projectInfo.connectToExternalDB
-      );
-    },
+        this.$store.state.project.appInfo &&
+        this.$store.state.project.appInfo.connectToExternalDB
+      )
+    }
   },
   watch: {
     name() {
       if (!this.userSelectedDir) {
-        this.folder = `${this.baseFolder}/${this.name}`;
+        this.folder = `${this.baseFolder}/${this.name}`
       }
-    },
+    }
   },
   async created() {
-    this.$store.commit("windows/MutToggleGaEnabled", true);
-    this.$store.commit("windows/MutToggleTelemetryEnabled", true);
-    await this.$store.dispatch("users/ActGetUserDetails");
+    this.$store.commit('settings/MutToggleGaEnabled', true)
+    this.$store.commit('settings/MutToggleTelemetryEnabled', true)
+    await this.$store.dispatch('users/ActGetUserDetails')
   },
   async mounted() {
-    setTimeout(() => (this.showCommunity = true), 2000);
-
-    await this.projectsLoad();
+    setTimeout(() => (this.showCommunity = true), 2000)
 
-    if (this.$route && this.$route.query && this.$route.query.excelUrl) {
-      this.excelImportModal = true;
-    }
+    await this.projectsLoad()
   },
   methods: {
-    async onFileDrop(e) {
-      this.excelImportModal = true;
-      this.$refs.excelImport.dropHandler(e);
-    },
     async stopProject(project) {
-      this.dialogShow = true;
-      this.confirmMessage = "Do you want to stop the project?";
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.dialogShow = true
+      this.confirmMessage = 'Do you want to stop the project?'
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.$set(project, "status", "stopping");
-          const projectId = project.id;
-          this.statusUpdatingProjectId = projectId;
-          this.projectStatusUpdating = true;
+          this.$set(project, 'status', 'stopping')
+          const projectId = project.id
+          this.statusUpdatingProjectId = projectId
+          this.projectStatusUpdating = true
           try {
-            await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            await this.$store.dispatch('sqlMgr/ActSqlOp', [
               { project_id: projectId },
-              "projectStop",
-            ]);
+              'projectStop'
+            ])
             this.$toast
               .success(`Project '${project.title}' stopped successfully`)
-              .goAway(3000);
+              .goAway(3000)
           } catch (e) {
             this.$toast
               .error(`Project '${project.title}' stopping failed`)
-              .goAway(3000);
+              .goAway(3000)
           }
-          await this.projectsLoad();
-          this.projectStatusUpdating = false;
-          this.dialogShow = false;
+          await this.projectsLoad()
+          this.projectStatusUpdating = false
+          this.dialogShow = false
         }
-      };
+      }
     },
     async startProject(project) {
-      this.dialogShow = true;
-      this.confirmMessage = "Do you want to start the project?";
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.dialogShow = true
+      this.confirmMessage = 'Do you want to start the project?'
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.$set(project, "status", "starting");
-          const projectId = project.id;
-          this.statusUpdatingProjectId = projectId;
-          this.projectStatusUpdating = true;
+          this.$set(project, 'status', 'starting')
+          const projectId = project.id
+          this.statusUpdatingProjectId = projectId
+          this.projectStatusUpdating = true
           try {
-            await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            await this.$store.dispatch('sqlMgr/ActSqlOp', [
               { project_id: projectId },
-              "projectStart",
-            ]);
+              'projectStart'
+            ])
             this.$toast
               .success(`Project '${project.title}' started successfully`)
-              .goAway(3000);
+              .goAway(3000)
           } catch (e) {
             this.$toast
               .error(`Project '${project.title}' starting failed`)
-              .goAway(3000);
+              .goAway(3000)
           }
-          await this.projectsLoad();
-          this.projectStatusUpdating = false;
-          this.dialogShow = false;
+          await this.projectsLoad()
+          this.projectStatusUpdating = false
+          this.dialogShow = false
         }
-      };
+      }
     },
     async restartProject(project) {
-      this.dialogShow = true;
-      this.confirmMessage = "Do you want to restart the project?";
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.dialogShow = true
+      this.confirmMessage = 'Do you want to restart the project?'
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.$set(project, "status", "restarting");
-          const projectId = project.id;
-          this.statusUpdatingProjectId = projectId;
-          this.projectStatusUpdating = true;
+          this.$set(project, 'status', 'restarting')
+          const projectId = project.id
+          this.statusUpdatingProjectId = projectId
+          this.projectStatusUpdating = true
           try {
-            await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            await this.$store.dispatch('sqlMgr/ActSqlOp', [
               { project_id: projectId },
-              "projectRestart",
-            ]);
+              'projectRestart'
+            ])
             this.$toast
               .success(`Project '${project.title}' restarted successfully`)
-              .goAway(3000);
+              .goAway(3000)
           } catch (e) {
             this.$toast
               .error(`Project '${project.title}' restarting failed`)
-              .goAway(3000);
+              .goAway(3000)
           }
-          await this.projectsLoad();
-          this.projectStatusUpdating = false;
-          this.dialogShow = false;
+          await this.projectsLoad()
+          this.projectStatusUpdating = false
+          this.dialogShow = false
         }
-      };
+      }
     },
     async deleteProject(project) {
-      this.dialogShow = true;
-      this.confirmMessage = "Do you want to delete the project?";
-      this.$e("c:project:delete");
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.dialogShow = true
+      this.confirmMessage = 'Do you want to delete the project?'
+      this.$e('c:project:delete')
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.$set(project, "status", "deleting");
-          const projectId = project.id;
-          this.statusUpdatingProjectId = projectId;
-          this.projectStatusUpdating = true;
+          this.$set(project, 'status', 'deleting')
+          const projectId = project.id
+          this.statusUpdatingProjectId = projectId
+          this.projectStatusUpdating = true
           try {
             await this.$api.project.delete(projectId)
             this.$toast
               .success(`Project '${project.title}' deleted successfully`)
-              .goAway(3000);
+              .goAway(3000)
           } catch (e) {
             this.$toast
               .error(`Project '${project.title}' deleting failed`)
-              .goAway(3000);
+              .goAway(3000)
           }
-          await this.projectsLoad();
-          this.projectStatusUpdating = false;
+          await this.projectsLoad()
+          this.projectStatusUpdating = false
 
-          this.dialogShow = false;
-          this.$e("a:project:delete");
+          this.dialogShow = false
+          this.$e('a:project:delete')
         }
-      };
+      }
     },
     onCreateProject(xcdb) {
-      if (xcdb === "xcdb") {
-        this.$router.push("/project/xcdb");
-        this.$e("c:project:create:xcdb");
+      if (xcdb === 'xcdb') {
+        this.$router.push('/project/xcdb')
+        this.$e('c:project:create:xcdb')
       } else {
-        this.$router.push("/project/0");
-        this.$e("c:project:create:extdb");
+        this.$router.push('/project/0')
+        this.$e('c:project:create:extdb')
       }
     },
     onCreateProjectFromTemplate() {
-      this.templatesModal = true;
-      this.$e("c:project:create:template");
-    },
-    onCreateProjectFromExcel() {
-      // this.$refs.excelImport.selectFile()
-      this.excelImportModal = true;
-      this.$e("c:project:create:excel");
+      this.templatesModal = true
+      this.$e('c:project:create:template')
     },
     async importProjectFromJSON() {},
     onTourCompletion() {
-      // this.$store.commit('windows/MutShowTour', {page: 'home'})
+      // this.$store.commit('settings/MutShowTour', {page: 'home'})
     },
     getDir(filePath) {
       // return path.dirname(filePath);
     },
     async projectsRefresh() {
-      await this.projectsLoad();
-      this.$e("a:project:refresh");
+      await this.projectsLoad()
+      this.$e('a:project:refresh')
     },
     async projectsLoad() {
       try {
-        this.loadingProjects = true;
-        this.projects = (await this.$api.project.list({})).list;
+        this.loadingProjects = true
+        this.projects = (await this.$api.project.list({})).list
 
         // todo: multiplex
-        const user = this.$store.state.users.user;
+        const user = this.$store.state.users.user
         if (
           !(this.projects && this.projects.length) &&
           user &&
@@ -871,143 +849,143 @@ export default {
           user.roles.owner
         ) {
           if (
-            this.$store.state.project.projectInfo &&
-            this.$store.state.project.projectInfo.oneClick
+            this.$store.state.project.appInfo &&
+            this.$store.state.project.appInfo.oneClick
           ) {
             //
           }
         }
 
-        this.loadingProjects = false;
+        this.loadingProjects = false
       } catch (error) {
-        console.log("Project fetch err", error);
+        console.log('Project fetch err', error)
       }
-      this.loaded = true;
+      this.loaded = true
     },
     async projectRouteHandler(project, count) {
       if (!this.deleteBtnClicked) {
         await this.$router.push({
-          path: `/nc/${project.id}`,
-        });
+          path: `/nc/${project.id}`
+        })
       }
-      this.$e("a:project:open", { count });
+      this.$e('a:project:open', { count })
     },
     async projectEdit(project) {
       this.$router.push({
-        path: `project/0?edit=true&projectId=${project.id}`,
-      });
+        path: `project/0?edit=true&projectId=${project.id}`
+      })
     },
     async projectOpenFolder(project) {},
 
     async exportMetaZip(projectId) {
-      this.dialogShow = true;
-      this.confirmMessage = "Do you want to export metadata from meta tables?";
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.dialogShow = true
+      this.confirmMessage = 'Do you want to export metadata from meta tables?'
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.loading = "export-zip";
-          let data;
+          this.loading = 'export-zip'
+          let data
           try {
-            data = await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            data = await this.$store.dispatch('sqlMgr/ActSqlOp', [
               {
                 // dbAlias: 'db',
                 project_id: projectId,
-                env: "_noco",
+                env: '_noco'
               },
-              "xcMetaTablesExportDbToZip",
+              'xcMetaTablesExportDbToZip',
               null,
               null,
               {
-                responseType: "blob",
-              },
-            ]);
+                responseType: 'blob'
+              }
+            ])
             const url = window.URL.createObjectURL(
-              new Blob([data], { type: "application/zip" })
-            );
-            const link = document.createElement("a");
-            link.href = url;
-            link.setAttribute("download", "meta.zip"); // or any other extension
-            document.body.appendChild(link);
-            link.click();
+              new Blob([data], { type: 'application/zip' })
+            )
+            const link = document.createElement('a')
+            link.href = url
+            link.setAttribute('download', 'meta.zip') // or any other extension
+            document.body.appendChild(link)
+            link.click()
             this.$toast
-              .success(`${this.$t("msg.toast.exportMetadata")}`)
-              .goAway(3000);
+              .success(`${this.$t('msg.toast.exportMetadata')}`)
+              .goAway(3000)
           } catch (e) {
-            console.log(e);
-            this.$toast.error(e.message).goAway(3000);
+            console.log(e)
+            this.$toast.error(e.message).goAway(3000)
           }
-          this.dialogShow = false;
-          this.loading = null;
+          this.dialogShow = false
+          this.loading = null
         }
-      };
+      }
     },
     async resetMeta(projectId) {
-      this.dialogShow = true;
-      this.confirmMessage = "Do you want to clear metadata from meta tables?";
-      this.confirmAction = async (act) => {
-        if (act === "hideDialog") {
-          this.dialogShow = false;
+      this.dialogShow = true
+      this.confirmMessage = 'Do you want to clear metadata from meta tables?'
+      this.confirmAction = async(act) => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false
         } else {
-          this.loading = "reset-metadata";
+          this.loading = 'reset-metadata'
           try {
-            await this.$store.dispatch("sqlMgr/ActSqlOp", [
+            await this.$store.dispatch('sqlMgr/ActSqlOp', [
               {
                 // dbAlias: 'db',
-                env: "_noco",
-                project_id: projectId,
+                env: '_noco',
+                project_id: projectId
               },
-              "xcMetaTablesReset",
-            ]);
+              'xcMetaTablesReset'
+            ])
             // this.$toast.success('Metadata cleared successfully').goAway(3000)
             this.$toast
-              .success(`${this.$t("msg.toast.clearMetadata")}`)
-              .goAway(3000);
+              .success(`${this.$t('msg.toast.clearMetadata')}`)
+              .goAway(3000)
           } catch (e) {
-            console.log(e);
-            this.$toast.error(e.message).goAway(3000);
+            console.log(e)
+            this.$toast.error(e.message).goAway(3000)
           }
-          this.dialogShow = false;
-          this.loading = null;
+          this.dialogShow = false
+          this.loading = null
         }
-      };
+      }
     },
     async importMetaZip() {
-      const projectId = this.project_id;
+      const projectId = this.project_id
       if (
         this.$refs.importFile &&
         this.$refs.importFile.files &&
         this.$refs.importFile.files[0]
       ) {
-        const zipFile = this.$refs.importFile.files[0];
-        this.loading = "import-zip";
+        const zipFile = this.$refs.importFile.files[0]
+        this.loading = 'import-zip'
         try {
-          this.$refs.importFile.value = "";
-          await this.$store.dispatch("sqlMgr/ActUploadOld", [
+          this.$refs.importFile.value = ''
+          await this.$store.dispatch('sqlMgr/ActUploadOld', [
             {
               // dbAlias: 'db',
               project_id: projectId,
-              env: "_noco",
+              env: '_noco'
             },
-            "xcMetaTablesImportZipToLocalFsAndDb",
+            'xcMetaTablesImportZipToLocalFsAndDb',
             {},
-            zipFile,
-          ]);
+            zipFile
+          ])
           // this.$toast.success('Successfully imported metadata').goAway(3000)
           this.$toast
-            .success(`${this.$t("msg.toast.importMetadata")}`)
-            .goAway(3000);
-          await this.projectsLoad();
+            .success(`${this.$t('msg.toast.importMetadata')}`)
+            .goAway(3000)
+          await this.projectsLoad()
         } catch (e) {
-          console.log(e);
-          this.$toast.error(e.message).goAway(3000);
+          console.log(e)
+          this.$toast.error(e.message).goAway(3000)
         }
-        this.dialogShow = false;
-        this.loading = null;
+        this.dialogShow = false
+        this.loading = null
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style scoped>
 .action-icons {
diff --git a/packages/nc-gui/pages/projects/list.vue b/packages/nc-gui/pages/projects/list.vue
index 5665798dda..faa8bf77a4 100644
--- a/packages/nc-gui/pages/projects/list.vue
+++ b/packages/nc-gui/pages/projects/list.vue
@@ -101,7 +101,9 @@
               <v-list dense>
                 <v-list-item>
                   <v-list-item-title>
-                    <v-icon small color="red"> mdi-delete-outline </v-icon>
+                    <v-icon small color="red">
+                      mdi-delete-outline
+                    </v-icon>
                     Delete
                   </v-list-item-title>
                 </v-list-item>
@@ -147,13 +149,13 @@
 </template>
 
 <script>
-import colors from "~/mixins/colors";
-import CreateNewProjectBtn from "~/components/projectList/createNewProjectBtn";
-import Extras from "~/components/project/spreadsheet/components/extras";
-import SponsorMini from "~/components/sponsorMini";
+import colors from '~/mixins/colors'
+import CreateNewProjectBtn from '~/components/projectList/CreateNewProjectBtn'
+import Extras from '~/components/project/spreadsheet/components/Extras'
+import SponsorMini from '~/components/SponsorMini'
 
 export default {
-  name: "List",
+  name: 'List',
   components: { SponsorMini, Extras, CreateNewProjectBtn },
   mixins: [colors],
   data: () => ({
@@ -161,39 +163,39 @@ export default {
     activePage: null,
     navDrawerOptions: [
       {
-        title: "My NocoDB",
-        icon: "mdi-folder-outline",
+        title: 'My NocoDB',
+        icon: 'mdi-folder-outline'
       },
       {
-        title: "Shared With Me",
-        icon: "mdi-account-group",
+        title: 'Shared With Me',
+        icon: 'mdi-account-group'
       },
       {
-        title: "Recent",
-        icon: "mdi-clock-outline",
+        title: 'Recent',
+        icon: 'mdi-clock-outline'
       },
       {
-        title: "Starred",
-        icon: "mdi-star",
-      },
-    ],
+        title: 'Starred',
+        icon: 'mdi-star'
+      }
+    ]
   }),
   mounted() {
-    this.loadProjectList();
+    this.loadProjectList()
   },
   methods: {
     async loadProjectList() {
-      const { list, pageInfo } = await this.$api.project.list();
-      this.projectList = list;
+      const { list, pageInfo } = await this.$api.project.list()
+      this.projectList = list
     },
     async openProject(project) {
       await this.$router.push({
-        path: `/nc/${project.id}`,
-      });
-      this.$e("a:project:open", { count: this.projects.length });
-    },
-  },
-};
+        path: `/nc/${project.id}`
+      })
+      this.$e('a:project:open', { count: this.projects.length })
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/packages/nc-gui/pages/user/authentication/signin.vue b/packages/nc-gui/pages/user/authentication/signin.vue
index 86ff7eaf9b..ee0583675a 100644
--- a/packages/nc-gui/pages/user/authentication/signin.vue
+++ b/packages/nc-gui/pages/user/authentication/signin.vue
@@ -287,20 +287,20 @@ export default {
     type() {
       return 'jwt'
       // return (
-      //   this.$store.state.project.projectInfo &&
-      //   this.$store.state.project.projectInfo.authType
+      //   this.$store.state.project.appInfo &&
+      //   this.$store.state.project.appInfo.authType
       // )
     },
     googleAuthEnabled() {
       return (
-        this.$store.state.project.projectInfo &&
-        this.$store.state.project.projectInfo.googleAuthEnabled
+        this.$store.state.project.appInfo &&
+        this.$store.state.project.appInfo.googleAuthEnabled
       )
     },
     githubAuthEnabled() {
       return (
-        this.$store.state.project.projectInfo &&
-        this.$store.state.project.projectInfo.githubAuthEnabled
+        this.$store.state.project.appInfo &&
+        this.$store.state.project.appInfo.githubAuthEnabled
       )
     }
   },
diff --git a/packages/nc-gui/pages/user/authentication/signup/_token.vue b/packages/nc-gui/pages/user/authentication/signup/_token.vue
index 034b2a81f4..80d5848174 100644
--- a/packages/nc-gui/pages/user/authentication/signup/_token.vue
+++ b/packages/nc-gui/pages/user/authentication/signup/_token.vue
@@ -297,13 +297,13 @@ export default {
       return this.$store.getters['users/GtrUser']
     },
     type() {
-      return this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.authType
+      return this.$store.state.project.appInfo && this.$store.state.project.appInfo.authType
     },
     firstUser() {
-      return this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.firstUser
+      return this.$store.state.project.appInfo && this.$store.state.project.appInfo.firstUser
     },
     googleAuthEnabled() {
-      return this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.googleAuthEnabled
+      return this.$store.state.project.appInfo && this.$store.state.project.appInfo.googleAuthEnabled
     },
     token() {
       return this.$route.params.token
diff --git a/packages/nc-gui/pages/user/authentication/signup/index.vue b/packages/nc-gui/pages/user/authentication/signup/index.vue
index 8bc4fb49d2..b2943c38c6 100644
--- a/packages/nc-gui/pages/user/authentication/signup/index.vue
+++ b/packages/nc-gui/pages/user/authentication/signup/index.vue
@@ -269,13 +269,13 @@ export default {
       return this.$store.getters['users/GtrUser']
     },
     type() {
-      return 'jwt'// this.$store.state.project && this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.authType
+      return 'jwt'// this.$store.state.project && this.$store.state.project.appInfo && this.$store.state.project.appInfo.authType
     },
     firstUser() {
-      return this.$store.state.project && this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.firstUser
+      return this.$store.state.project && this.$store.state.project.appInfo && this.$store.state.project.appInfo.firstUser
     },
     googleAuthEnabled() {
-      return this.$store.state.project && this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.googleAuthEnabled
+      return this.$store.state.project && this.$store.state.project.appInfo && this.$store.state.project.appInfo.googleAuthEnabled
     }
   },
   watch: {},
diff --git a/packages/nc-gui/plugins/axiosInterceptor.js b/packages/nc-gui/plugins/axiosInterceptor.js
index 4b9ad92d35..966610a818 100644
--- a/packages/nc-gui/plugins/axiosInterceptor.js
+++ b/packages/nc-gui/plugins/axiosInterceptor.js
@@ -73,7 +73,7 @@ export default ({ store, $axios, redirect, $toast, route, app }) => {
       })
       .catch(async(error) => {
         await store.dispatch('users/ActSignOut')
-        if (store.state.project.projectInfo.firstUser) {
+        if (store.state.project.appInfo.firstUser) {
           redirect('/')
         } else {
           $toast.clear()
diff --git a/packages/nc-gui/plugins/globalMixin.js b/packages/nc-gui/plugins/globalMixin.js
index f4cb75b3b7..40ac25fb2a 100644
--- a/packages/nc-gui/plugins/globalMixin.js
+++ b/packages/nc-gui/plugins/globalMixin.js
@@ -7,13 +7,13 @@ Vue.mixin(device)
 export default async({ store }) => {
   function getListener(binding) {
     return function(e) {
-      if (store.state.windows.isGaEnabled || store.state.windows.isComp) {
+      if (store.state.settings.isGaEnabled || store.state.settings.isComp) {
         const cat = window.location.hash.replace(/\d+\/(?=dashboard)/, '')
         const action = binding.value && binding.value[0]
         const label = binding.value && binding.value[1]
         try {
-          if (store.state.windows.isComp) {
-            ga('send', 'event', `${store.state.windows.isComp}\\${cat}`, action, label)
+          if (store.state.settings.isComp) {
+            ga('send', 'event', `${store.state.settings.isComp}\\${cat}`, action, label)
           }
           ga('send', 'event', cat, action, label)
         } catch {}
diff --git a/packages/nc-gui/plugins/i18n.js b/packages/nc-gui/plugins/i18n.js
index 20b4b518d4..9da0c390a9 100644
--- a/packages/nc-gui/plugins/i18n.js
+++ b/packages/nc-gui/plugins/i18n.js
@@ -11,7 +11,7 @@ export default ({ app, store }) => {
   // This way we can use it globally in our components through this.$i18n
   app.i18n = new VueI18n({
     // Set the initial locale
-    locale: store.state.windows.language,
+    locale: store.state.settings.language,
 
     // Set the fallback locale in case the current locale can't be found
     fallbackLocale: 'en',
@@ -49,7 +49,7 @@ export default ({ app, store }) => {
   })
 
   store.watch(
-    state => state.windows.language,
+    state => state.settings.language,
     (language) => {
       if (app.i18n.availableLocales.includes(language)) {
         app.i18n.locale = language
diff --git a/packages/nc-gui/plugins/localStorage.js b/packages/nc-gui/plugins/localStorage.js
index e44c974744..d618e00d7f 100644
--- a/packages/nc-gui/plugins/localStorage.js
+++ b/packages/nc-gui/plugins/localStorage.js
@@ -5,22 +5,22 @@ export default async({ store, $vuetify: { theme }, route }) => {
    *
    */
   store.watch(
-    state => state.windows.theme,
+    state => state.settings.theme,
     (c) => {
       theme.themes.dark = { ...theme.themes.dark, ...c }
       theme.themes.light = { ...theme.themes.light, ...c }
     }
   )
   store.watch(
-    state => state.windows.darkTheme,
+    state => state.settings.darkTheme,
     (isDark) => {
       theme.dark = isDark
       document.body.classList.add(isDark ? 'dark' : 'light')
       document.body.classList.remove(isDark ? 'light' : 'dark')
     }
   )
-  document.body.classList.add(store.state.windows.darkTheme ? 'dark' : 'light')
-  document.body.classList.remove(store.state.windows.darkTheme ? 'light' : 'dark')
+  document.body.classList.add(store.state.settings.darkTheme ? 'dark' : 'light')
+  document.body.classList.remove(store.state.settings.darkTheme ? 'light' : 'dark')
 
   // In case of HMR, mutation occurs before nuxReady, so previously saved state
   // gets replaced with original state received from server. So, we've to skip HMR.
@@ -44,7 +44,7 @@ export default async({ store, $vuetify: { theme }, route }) => {
       async rehydrated(store) {
         window.rehydrated = true
       },
-      paths: ['users', 'sqlClient', 'apiClient', 'panelSize', 'windows', 'graphqlClient', 'apiClientSwagger', 'app'],
+      paths: ['users', 'sqlClient', 'apiClient', 'panelSize', 'settings', 'graphqlClient', 'apiClientSwagger', 'app'],
       ...(
         isDev()
           ? {}
diff --git a/packages/nc-gui/plugins/projectLoader.js b/packages/nc-gui/plugins/projectLoader.js
index 4bfff15eb6..90bcbe3a5d 100644
--- a/packages/nc-gui/plugins/projectLoader.js
+++ b/packages/nc-gui/plugins/projectLoader.js
@@ -51,9 +51,9 @@ export default async({ store, redirect, $axios, $toast, $api, route }) => {
 
   try {
     await store.dispatch('project/ActLoadProjectInfo')
-    if (!store.state.project.projectInfo.projectHasDb) {
+    if (!store.state.project.appInfo.projectHasDb) {
       redirect('/')
-    } else if (store.state.project.projectInfo.projectHasAdmin === false) {
+    } else if (store.state.project.appInfo.projectHasAdmin === false) {
       redirect('/')
     }
   } catch (e) {
diff --git a/packages/nc-gui/plugins/tele.js b/packages/nc-gui/plugins/tele.js
index 6fa5bd8451..ca2cd1a853 100644
--- a/packages/nc-gui/plugins/tele.js
+++ b/packages/nc-gui/plugins/tele.js
@@ -89,7 +89,7 @@ export default function({
     }
   })
 
-  store.watch(state => state.project.projectInfo && state.project.projectInfo.teleEnabled && state.users.token, (token) => {
+  store.watch(state => state.project.appInfo && state.project.appInfo.teleEnabled && state.users.token, (token) => {
     if (token) {
       init(token).then(() => {
       })
@@ -98,7 +98,7 @@ export default function({
       socket = null
     }
   })
-  if (store.state.project.projectInfo && store.state.project.projectInfo.teleEnabled && store.state.users.token) {
+  if (store.state.project.appInfo && store.state.project.appInfo.teleEnabled && store.state.users.token) {
     init(store.state.users.token).then(() => {
     })
   }
diff --git a/packages/nc-gui/store/apiClient.js b/packages/nc-gui/store/archived/apiClient.js
similarity index 100%
rename from packages/nc-gui/store/apiClient.js
rename to packages/nc-gui/store/archived/apiClient.js
diff --git a/packages/nc-gui/store/apiServer.js b/packages/nc-gui/store/archived/apiServer.js
similarity index 100%
rename from packages/nc-gui/store/apiServer.js
rename to packages/nc-gui/store/archived/apiServer.js
diff --git a/packages/nc-gui/store/graphqlClient.js b/packages/nc-gui/store/archived/graphqlClient.js
similarity index 100%
rename from packages/nc-gui/store/graphqlClient.js
rename to packages/nc-gui/store/archived/graphqlClient.js
diff --git a/packages/nc-gui/store/outputs.js b/packages/nc-gui/store/archived/outputs.js
similarity index 100%
rename from packages/nc-gui/store/outputs.js
rename to packages/nc-gui/store/archived/outputs.js
diff --git a/packages/nc-gui/store/snackbar.js b/packages/nc-gui/store/archived/snackbar.js
similarity index 100%
rename from packages/nc-gui/store/snackbar.js
rename to packages/nc-gui/store/archived/snackbar.js
diff --git a/packages/nc-gui/store/sqlClient.js b/packages/nc-gui/store/archived/sqlClient.js
similarity index 100%
rename from packages/nc-gui/store/sqlClient.js
rename to packages/nc-gui/store/archived/sqlClient.js
diff --git a/packages/nc-gui/store/sqlMgr.js b/packages/nc-gui/store/archived/sqlMgr.js
similarity index 96%
rename from packages/nc-gui/store/sqlMgr.js
rename to packages/nc-gui/store/archived/sqlMgr.js
index 6103d6f842..f922e8e16b 100644
--- a/packages/nc-gui/store/sqlMgr.js
+++ b/packages/nc-gui/store/archived/sqlMgr.js
@@ -307,9 +307,9 @@ export const actions = {
     commit('notification/MutListAdd', { status: 'pending', ...data }, { root: true })
 
     const headers = {}
-    if (rootState.project.projectInfo && rootState.project.projectInfo.authType === 'masterKey') {
+    if (rootState.project.appInfo && rootState.project.appInfo.authType === 'masterKey') {
       headers['xc-master-key'] = rootState.users.masterKey || ''
-    } else if (rootState.project.projectInfo && rootState.project.projectInfo.authType === 'jwt') {
+    } else if (rootState.project.appInfo && rootState.project.appInfo.authType === 'jwt') {
       headers['xc-auth'] = rootState.users.token || ''
     }
 
@@ -376,9 +376,9 @@ export const actions = {
 
     try {
       const headers = {}
-      if (rootState.project.projectInfo && rootState.project.projectInfo.authType === 'masterKey') {
+      if (rootState.project.appInfo && rootState.project.appInfo.authType === 'masterKey') {
         headers['xc-master-key'] = rootState.users.masterKey
-      } else if (rootState.project.projectInfo && rootState.project.projectInfo.authType === 'jwt') {
+      } else if (rootState.project.appInfo && rootState.project.appInfo.authType === 'jwt') {
         headers['xc-auth'] = rootState.users.token
       }
 
@@ -497,9 +497,9 @@ export const actions = {
         'Content-Type': 'multipart/form-data'
       }
 
-      if (rootState.project.projectInfo && rootState.project.projectInfo.authType === 'masterKey') {
+      if (rootState.project.appInfo && rootState.project.appInfo.authType === 'masterKey') {
         headers['xc-master-key'] = rootState.users.masterKey
-      } else if (rootState.project.projectInfo && rootState.project.projectInfo.authType === 'jwt') {
+      } else if (rootState.project.appInfo && rootState.project.appInfo.authType === 'jwt') {
         headers['xc-auth'] = rootState.users.token
       }
 
diff --git a/packages/nc-gui/store/project.js b/packages/nc-gui/store/project.js
index d43cb088af..a0754debac 100644
--- a/packages/nc-gui/store/project.js
+++ b/packages/nc-gui/store/project.js
@@ -18,7 +18,7 @@ export const state = () => ({
    */
   unserializedList: [],
   defaultProject,
-  projectInfo: null,
+  appInfo: null,
   activeEnv: null,
   authDbAlias: null,
   projectId: null,
@@ -100,8 +100,8 @@ export const mutations = {
     // setProp(state, ['unserializedList', 0, 'projectJson'], projJson)
     Vue.set(state, 'defaultProject', { ...projJson })
   },
-  MutProjectInfo(state, projectInfo) {
-    state.projectInfo = projectInfo
+  MutAppInfo(state, appInfo) {
+    state.appInfo = appInfo
   }
 }
 
@@ -121,7 +121,7 @@ function getSerializedEnvObj(data) {
 export const getters = {
 
   GtrEnv(state) {
-    return state.projectInfo && state.projectInfo.env
+    return state.appInfo && state.appInfo.env
   },
   GtrFirstDbAlias(state, getters) {
     return (state.unserializedList
@@ -276,14 +276,14 @@ export const getters = {
   },
 
   GtrIsFirstLoad(state) {
-    return !state.projectInfo || !state.projectInfo.projectHasDb || state.projectInfo.firstUser
+    return !state.appInfo || !state.appInfo.projectHasDb || state.appInfo.firstUser
   },
 
   GtrIsDocker(state) {
-    return state.projectInfo && state.projectInfo.type === 'docker'
+    return state.appInfo && state.appInfo.type === 'docker'
   },
   GtrIsMvc(state) {
-    return state.projectInfo && state.projectInfo.type === 'mvc'
+    return state.appInfo && state.appInfo.type === 'mvc'
   },
   GtrEnvList(state) {
     return state.unserializedList[0]
@@ -372,7 +372,7 @@ export const actions = {
       const tables = (await this.$api.dbTable.list(
         state.projectId,
         {
-          includeM2M: rootState.windows.includeM2M || ''
+          includeM2M: rootState.settings.includeM2M || ''
         })).list
 
       commit('tables', tables)
@@ -752,8 +752,8 @@ export const actions = {
   },
 
   async ActLoadProjectInfo({ commit }) {
-    const projectInfo = (await this.$api.utils.appInfo())
-    commit('MutProjectInfo', projectInfo)
+    const appInfo = (await this.$api.utils.appInfo())
+    commit('MutAppInfo', appInfo)
   }
 }
 
diff --git a/packages/nc-gui/store/windows.js b/packages/nc-gui/store/settings.js
similarity index 93%
rename from packages/nc-gui/store/windows.js
rename to packages/nc-gui/store/settings.js
index d229474f98..b596c3c39e 100644
--- a/packages/nc-gui/store/windows.js
+++ b/packages/nc-gui/store/settings.js
@@ -209,17 +209,17 @@ export const actions = {
     commit('MutToggleDarkMode', status)
   },
   ActCheckMaxTable({ state, commit, rootState }, { tableIndex }) {
-    const prepareToastMessage = () => {
-      return `You are allowed to access only ${rootState.users.ui_ability.rules.maxTables} tables.<br/>
-You can either upgrade or <a href="#/referral" style="color: white;font-weight: bold;">refer</a> us. `
-    }
-
-    if (process.env.ui_ability) {
-      if (tableIndex > rootState.users.ui_ability.rules.maxTables) {
-        this.commit('snackbar/setSnack', prepareToastMessage())
-        return false
-      }
-    }
+    //     const prepareToastMessage = () => {
+    //       return `You are allowed to access only ${rootState.users.ui_ability.rules.maxTables} tables.<br/>
+    // You can either upgrade or <a href="#/referral" style="color: white;font-weight: bold;">refer</a> us. `
+    //     }
+    //
+    //     if (process.env.ui_ability) {
+    //       if (tableIndex > rootState.users.ui_ability.rules.maxTables) {
+    //         this.commit('snackbar/setSnack', prepareToastMessage())
+    //         return false
+    //       }
+    //     }
     return true
   },
   ActSetTheme({ state, commit, rootState }, { theme, themeName, custom }) {
diff --git a/packages/nc-gui/store/tabs.js b/packages/nc-gui/store/tabs.js
index ce2bc2f307..f91e1a59f7 100644
--- a/packages/nc-gui/store/tabs.js
+++ b/packages/nc-gui/store/tabs.js
@@ -290,6 +290,20 @@ export const actions = {
     }
     commit('list', tabs)
   },
+  async loadFirstTableTab({ commit, state, rootGetters, dispatch, rootState }, load) {
+    const tabs = []
+
+    const nodes = rootState.project
+      .list[0] // project
+      .children[0] //  environment
+      .children[0] // db
+      .children.find(n => n.type === 'tableDir') // parent node
+      .children
+    if (nodes && nodes[0]) {
+      tabs.push(nodes[0])
+    }
+    if (tabs.length) { commit('list', tabs) }
+  },
 
   removeTableTab({ commit, state }, nodes) {
     const tabs = JSON.parse(JSON.stringify(state.list))
@@ -363,10 +377,10 @@ export const actions = {
   },
 
   async ActAddTab({ commit, state, rootState }, item) {
-    if (rootState.users.ui_ability.rules.maxTabs <= state.list.length) {
-      this.commit('snackbar/setSnack', `Free plan limits to ${rootState.users.ui_ability.rules.maxTabs} tabs. Please <a href="https://nocodb.com/pricing" style="color: white;font-weight: bold;">upgrade</a> your plan for unlimited tabs.`)
-      return
-    }
+    // if (rootState.users.ui_ability.rules.maxTabs <= state.list.length) {
+    //   this.commit('snackbar/setSnack', `Free plan limits to ${rootState.users.ui_ability.rules.maxTabs} tabs. Please <a href="https://nocodb.com/pricing" style="color: white;font-weight: bold;">upgrade</a> your plan for unlimited tabs.`)
+    //   return
+    // }
     commit('add', item)
     await Vue.nextTick()
     const index = state.list.length - 1
@@ -385,6 +399,22 @@ export const actions = {
     //     }
     //   })
     // });
+  },
+  async loadFirstCreatedTableTab({ commit, state, rootGetters, dispatch, rootState }, data) {
+    const tabs = state.list || []
+    const item = rootState.project
+      .list[0] // project
+      .children[0] //  environment
+      .children[0] // db
+      .children.find(n => n.type === 'tableDir') // parent node
+      .children.find(n => n.title === data.title) // look for the target table
+    if (item) {
+      tabs.push(item)
+    }
+    if (tabs.length) {
+      commit('list', tabs)
+    }
+    return item
   }
 }
 /**
@@ -392,6 +422,7 @@ export const actions = {
  *
  * @author Naveen MR <oof1lab@gmail.com>
  * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
diff --git a/packages/nc-gui/store/users.js b/packages/nc-gui/store/users.js
index cb0693b66d..bee643f490 100644
--- a/packages/nc-gui/store/users.js
+++ b/packages/nc-gui/store/users.js
@@ -159,18 +159,18 @@ export const actions = {
           } else {
             commit('MutSetUser', res)
           }
-          commit('windows/MutPollingSet', 0, { root: true })
+          commit('settings/MutPollingSet', 0, { root: true })
         } catch (e) {
           if (e.response.status === 504) {
-            commit('windows/MutPollingIncrementBy', 1, { root: true })
+            commit('settings/MutPollingIncrementBy', 1, { root: true })
 
-            if (rootGetters['windows/GtrMaxPollingRetryExceeded']) {
+            if (rootGetters['settings/GtrMaxPollingRetryExceeded']) {
               commit('MutSetUser', null)
-              commit('windows/MutPollingSet', 0, { root: true })
+              commit('settings/MutPollingSet', 0, { root: true })
             }
           } else {
             commit('MutSetUser', null)
-            commit('windows/MutPollingSet', 0, { root: true })
+            commit('settings/MutPollingSet', 0, { root: true })
           }
         }
       } else {
@@ -324,7 +324,7 @@ export const actions = {
       commit('MutUiAbility', uiAbility.data)
 
       if (changed) {
-        commit('windows/MutToggleDarkMode', true, { root: true })
+        commit('settings/MutToggleDarkMode', true, { root: true })
       }
     } catch (e) {
       console.log(e)
diff --git a/packages/noco-docs/content/en/setup-and-usages/app-store.md b/packages/noco-docs/content/en/setup-and-usages/app-store.md
index 1ee015ad8d..b0fba0d8a6 100644
--- a/packages/noco-docs/content/en/setup-and-usages/app-store.md
+++ b/packages/noco-docs/content/en/setup-and-usages/app-store.md
@@ -1,7 +1,7 @@
 ---
 title: 'App Store'
 description: 'App Store'
-position: 1200
+position: 1100
 category: 'Product'
 menuTitle: 'App Store'
 ---
diff --git a/packages/noco-docs/content/en/setup-and-usages/dashboard.md b/packages/noco-docs/content/en/setup-and-usages/dashboard.md
index 3777702d98..34ed955cac 100644
--- a/packages/noco-docs/content/en/setup-and-usages/dashboard.md
+++ b/packages/noco-docs/content/en/setup-and-usages/dashboard.md
@@ -98,31 +98,4 @@ Tip 3: You can click Edit Connection JSON and specify the schema you want to use
 
 Click `Test Database Connection` to see if the connection can be established or not. NocoDB creates a new **empty database** with specified parameters if the database doesn't exist.
 
-![image](https://user-images.githubusercontent.com/35857179/163136039-ad521d74-6996-4173-84ba-cfc55392c3b7.png)
-
-### Creating Project from Excel
-
-Click `Create Project from Excel`, you can either upload / drag and drop Excel file (OR) specify Excel file URL. 
-
-<alert type="success">
-If your excel file contains multiple sheets, each sheet will be stored in a separate table. <br> Currently the data will be imported to NC_DB only. We'll support importing to existing projects with other database types in the future.
-</alert>
-    
-<img src="https://user-images.githubusercontent.com/86527202/144373863-7ced9315-a70b-4746-9295-325e463dc110.png" width="60%"/>  
-
-You can change Project Name, Table Name, Column Name or even Column Type as you want.
-
-![image](https://user-images.githubusercontent.com/35857179/167252703-3a9be428-8737-4683-bc29-d3f9dbbfb712.png)
-
-Click Import Excel to start importing process. The project and the table(s) will be created and the data will be imported to the corresponding table(s).
-
-![image](https://user-images.githubusercontent.com/35857179/167253045-2e9890ca-4451-4b59-8eba-cb90ea5abdf1.png)
-
-Supported file formats
-
-- Xls
-- Xlsx
-- Xlsm
-- Ods
-- Ots
-
+![image](https://user-images.githubusercontent.com/35857179/163136039-ad521d74-6996-4173-84ba-cfc55392c3b7.png)
\ No newline at end of file
diff --git a/packages/noco-docs/content/en/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free.md b/packages/noco-docs/content/en/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free.md
new file mode 100644
index 0000000000..f36c5bd2a4
--- /dev/null
+++ b/packages/noco-docs/content/en/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free.md
@@ -0,0 +1,34 @@
+---
+title: 'Import: Airtable to NocoDB'
+description: 'Import: Airtable to NocoDB'
+position: 1150
+category: 'Product'
+menuTitle: 'Import: Airtable to NocoDB'
+---
+
+## Import Airtable to NocoDB
+
+### Find & enter your Airtable API Key
+Copy API Key from [Airtable Accounts](https://airtable.com/account) page
+  
+![Screenshot 2022-05-16 at 1 50 07 PM](https://user-images.githubusercontent.com/86527202/168569905-48c16d6d-c44a-4337-be49-0ac3dc1f7b75.png)
+
+
+
+### Share you Airtable base
+Detailed procedure is captured [here](https://support.airtable.com/hc/en-us/articles/205752117-Creating-a-base-share-link-or-a-view-share-link#basesharelink)
+
+Quick steps
+  
+1. Open `Share` menu in your Project/ Base
+  
+![Screenshot 2022-05-16 at 3 47 27 PM](https://user-images.githubusercontent.com/86527202/168572054-533b8c19-d76e-4add-b876-f1e0570ac33c.png)
+
+
+
+3. Open tab `Share Publicly`
+4. Enable `Turn on full base access`
+5. Copy generated shared base URL
+    
+![Screenshot 2022-05-16 at 3 41 54 PM](https://user-images.githubusercontent.com/86527202/168572062-5dee065d-2394-426d-8f43-77ecc0c9b73f.png)
+
diff --git a/packages/noco-docs/content/en/setup-and-usages/languages.md b/packages/noco-docs/content/en/setup-and-usages/languages.md
index 37621be85b..3c2ff98223 100644
--- a/packages/noco-docs/content/en/setup-and-usages/languages.md
+++ b/packages/noco-docs/content/en/setup-and-usages/languages.md
@@ -1,7 +1,7 @@
 ---
 title: 'Languages'
 description: 'Languages'
-position: 1200
+position: 900
 category: 'Product'
 menuTitle: 'Languages'
 ---
diff --git a/packages/noco-docs/content/en/setup-and-usages/table-operations.md b/packages/noco-docs/content/en/setup-and-usages/table-operations.md
index 6a381cd256..007c1bd7b6 100644
--- a/packages/noco-docs/content/en/setup-and-usages/table-operations.md
+++ b/packages/noco-docs/content/en/setup-and-usages/table-operations.md
@@ -14,19 +14,22 @@ Once you have created a new NocoDB project you can open it, In the browser, the
 
 Now you can start creating new tables by simply clicking one of the following options.
 
-![table_create](https://user-images.githubusercontent.com/61551451/126771744-063f22da-6def-43fe-b9ef-1744d104db9d.png)
+- Click the plus button next to Table menu
+- Click Add / Import, then click Add new table
 
-On click, in modal popup, enter the table name, enable/disable default columns and click `Submit` button.
+<img width="632" alt="image" src="https://user-images.githubusercontent.com/35857179/168772379-63d7e92c-39ce-4d91-ac1e-279591833e0e.png">
+
+A modal will be popped up. Input the corresponding info and enable or disable default columns and click `Submit` button.
 
 ![table_create_modal](https://user-images.githubusercontent.com/61551451/126772859-5a301c45-d830-4df2-a05a-43b15dd77728.png)
 
 <alert>
-You can't disable the `id` column since NocoDB needs a primary column for every table.
+Note: You can't disable the `id` column since NocoDB needs a primary column for every table. You can rename it after the creation.
 </alert>
 
 After the successful submission, the table will be created and open as a new tab.  
-  
-![TableCreated](https://user-images.githubusercontent.com/86527202/144402089-b5e35564-80d5-4105-9e00-7e3e1c4a5030.png)
+
+![table_created](https://user-images.githubusercontent.com/35857179/168411541-b0233cf1-4683-490b-bdec-f2546a2d9015.png)
 
 ### Table Rename
 
@@ -38,7 +41,8 @@ In modal popup, enter new table name and click `Submit` button
 ### Table Delete
 
 The table can be deleted using the `delete` icon present in the toolbar within the table tab.
-<img src="https://user-images.githubusercontent.com/86527202/144403591-5d3d36eb-64b7-4057-9244-56a95b47b97b.png" width="60%"/>
+
+![image](https://user-images.githubusercontent.com/35857179/168411589-540f50d2-78e3-4d97-b17c-1b9fad9f90b7.png)
 
 ## Column
 
@@ -107,6 +111,46 @@ Right-click on anywhere in the row and then from the context menu select `Delete
 Bulk delete is also possible by selecting multiple rows by using the checkbox in first column and then `Delete Selected Rows` options from the right click context menu.  
 <img src="https://user-images.githubusercontent.com/86527202/144406191-ccff1382-e808-44e8-babe-bd937faf1b3d.png" width="40%"/>
 
+## Quick Import
+
+You can use Quick Import when you have data from external sources such as Airtable, CSV file or Microsoft Excel to an existing project by clicking `Add / Import` and choosing the corresponding options.
+
+![image](https://user-images.githubusercontent.com/35857179/168772072-937b037b-32b3-4e5b-b982-5ee4b9a4959c.png)
+
+### Import Airtable into an existing project
+
+- Click `Add / Import` and click `Airtable`
+- Input API key & Shared Base ID / URL (See <a href="./import-airtable-to-sql-database-within-a-minute-for-free" target="_blank">here</a> for the guideline to retrieve the credentials)
+![image](https://user-images.githubusercontent.com/35857179/168773192-f3ef9d36-3329-4324-ae25-989b611f66bf.png)
+- Click `Import` and you will see the status
+![image](https://user-images.githubusercontent.com/35857179/168779663-5bb1dac8-01bd-43fb-8638-318a66a0f4bf.png)
+- Click `Go to dashboard` after the sync is finished
+![image](https://user-images.githubusercontent.com/35857179/168779906-6163b23e-4bcc-4991-8a77-b2fa94e5dcf3.png)
+
+### Import CSV data into an existing project
+
+- Click `Add / Import` and click `CSV file`
+- Drag & drop or select file to upload or specify Excel file URL
+  ![image](https://user-images.githubusercontent.com/35857179/168412051-ed988659-011d-455b-ba32-be0a2e1184b0.png)
+- You can revise the table name, column name and column type. By default, the first column will be chosen as <a href="./primary-value" target="_blank">Primary Value</a> and cannot be deleted.
+  ![image](https://user-images.githubusercontent.com/35857179/168412069-aea8a8fb-09ab-4412-95b7-963bdbe24cfc.png)
+- Click `Import CSV` to start importing process. The table will be created and the data will be imported.
+  ![image](https://user-images.githubusercontent.com/35857179/168412172-9bb24ab9-da15-45cf-9b12-3af362fc604a.png)
+
+### Import Excel data into an existing project
+
+- Click `Add / Import` and click `Microsoft Excel`
+- Drag & drop or select file to upload or specify Excel file URL
+  ![image](https://user-images.githubusercontent.com/35857179/168412483-a12f7d90-1b91-48bb-96a7-2a16dc8c7b81.png)
+- You can revise the table name, column name and column type. By default, the first column will be chosen as <a href="./primary-value" target="_blank">Primary Value</a> and cannot be deleted.
+  <alert>
+  Note: If your Excel file contains multiple sheets, each sheet will be stored in a separate table.
+  </alert>
+
+  ![image](https://user-images.githubusercontent.com/35857179/168412465-e46b4fcf-ec1c-4d32-bb56-eb62516829f5.png)
+- Click `Import Excel` to start importing process. The table(s) will be created and the data will be imported to the corresponding table(s).
+  ![image](https://user-images.githubusercontent.com/35857179/168413233-adfb85e2-8d52-46d8-a754-e2ec9f8d3234.png)
+
 ## Export Data
 
 You can export your data from a table as a CSV file by clicking `More` and `Download as CSV`.
diff --git a/packages/noco-docs/content/en/setup-and-usages/usage-information.md b/packages/noco-docs/content/en/setup-and-usages/usage-information.md
index fc1fd51a09..9d4e9bb97f 100644
--- a/packages/noco-docs/content/en/setup-and-usages/usage-information.md
+++ b/packages/noco-docs/content/en/setup-and-usages/usage-information.md
@@ -1,7 +1,7 @@
 ---
 title: 'Usage Information'
 description: 'Non-sensitive and anonymous usage information'
-position: 900
+position: 1200
 category: 'Product'
 menuTitle: 'Usage Information'
 ---
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 4361875a00..dcb115ca87 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -134,7 +134,7 @@ export interface TableInfoType {
   fk_project_id?: string;
   fk_base_id?: string;
   title: string;
-  table_nameme: string;
+  table_name: string;
   type?: string;
   enabled?: string;
   parent_id?: string;
diff --git a/packages/nocodb-sdk/src/lib/sqlUi/MssqlUi.ts b/packages/nocodb-sdk/src/lib/sqlUi/MssqlUi.ts
index ea52649575..a9ed5d0bd2 100644
--- a/packages/nocodb-sdk/src/lib/sqlUi/MssqlUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/MssqlUi.ts
@@ -1,4 +1,4 @@
-import UITypes from "../UITypes";
+import UITypes from '../UITypes';
 
 const dbTypes = [
   'bigint',
@@ -35,15 +35,15 @@ const dbTypes = [
   'uniqueidentifier',
   'varbinary',
   'xml',
-  'varchar'
+  'varchar',
 ];
 
 export class MssqlUi {
   static getNewTableColumns() {
     return [
       {
-       column_name: 'id',
-       title: 'Id',
+        column_name: 'id',
+        title: 'Id',
         dt: 'int',
         dtx: 'integer',
         ct: 'int(11)',
@@ -62,11 +62,11 @@ export class MssqlUi {
         altered: 1,
         uidt: 'ID',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'title',
-       title: 'Title',
+        column_name: 'title',
+        title: 'Title',
         dt: 'varchar',
         dtx: 'specificType',
         ct: 'varchar(45)',
@@ -85,11 +85,11 @@ export class MssqlUi {
         altered: 1,
         uidt: 'SingleLineText',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'created_at',
-       title: 'CreatedAt',
+        column_name: 'created_at',
+        title: 'CreatedAt',
         dt: 'datetime',
         dtx: 'specificType',
         ct: 'varchar(45)',
@@ -108,11 +108,11 @@ export class MssqlUi {
         altered: 1,
         uidt: UITypes.DateTime,
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'updated_at',
-       title: 'UpdatedAt',
+        column_name: 'updated_at',
+        title: 'UpdatedAt',
         dt: 'datetime',
         dtx: 'specificType',
         ct: 'varchar(45)',
@@ -131,8 +131,8 @@ export class MssqlUi {
         altered: 1,
         uidt: UITypes.DateTime,
         uip: '',
-        uicn: ''
-      }
+        uicn: '',
+      },
     ];
   }
 
@@ -157,7 +157,7 @@ export class MssqlUi {
       altered: 1,
       uidt: 'SingleLineText',
       uip: '',
-      uicn: ''
+      uicn: '',
     };
   }
 
@@ -741,13 +741,15 @@ export class MssqlUi {
   }
 
   static extractFunctionName(query) {
-    const reg = /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
 
   static extractProcedureName(query) {
-    const reg = /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
@@ -808,7 +810,7 @@ export class MssqlUi {
           const column = {
             dp: null,
             tn,
-           column_name: keys[i],
+            column_name: keys[i],
             cno: keys[i],
             np: 10,
             ns: 0,
@@ -827,7 +829,7 @@ export class MssqlUi {
             dtx: 'specificType',
             dtxp: null,
             dtxs: 0,
-            altered: 1
+            altered: 1,
           };
 
           switch (typeof json[keys[i]]) {
@@ -835,13 +837,13 @@ export class MssqlUi {
               if (Number.isInteger(json[keys[i]])) {
                 if (MssqlUi.isValidTimestamp(keys[i], json[keys[i]])) {
                   Object.assign(column, {
-                    dt: 'timestamp'
+                    dt: 'timestamp',
                   });
                 } else {
                   Object.assign(column, {
                     dt: 'int',
                     np: 10,
-                    ns: 0
+                    ns: 0,
                   });
                 }
               } else {
@@ -850,25 +852,25 @@ export class MssqlUi {
                   np: 10,
                   ns: 2,
                   dtxp: '11',
-                  dtxs: 2
+                  dtxs: 2,
                 });
               }
               break;
             case 'string':
               if (MssqlUi.isValidDate(json[keys[i]])) {
                 Object.assign(column, {
-                  dt: 'datetime'
+                  dt: 'datetime',
                 });
               } else if (json[keys[i]].length <= 255) {
                 Object.assign(column, {
                   dt: 'varchar',
                   np: 255,
                   ns: 0,
-                  dtxp: '255'
+                  dtxp: '255',
                 });
               } else {
                 Object.assign(column, {
-                  dt: 'text'
+                  dt: 'text',
                 });
               }
               break;
@@ -876,7 +878,7 @@ export class MssqlUi {
               Object.assign(column, {
                 dt: 'bit',
                 np: null,
-                ns: 0
+                ns: 0,
               });
               break;
             case 'object':
@@ -884,7 +886,7 @@ export class MssqlUi {
                 dt: 'varchar',
                 np: 255,
                 ns: 0,
-                dtxp: '255'
+                dtxp: '255',
               });
               break;
             default:
@@ -1043,9 +1045,7 @@ export class MssqlUi {
     }
   }
 
-  static getDataTypeForUiType(
-    col
-  ): {
+  static getDataTypeForUiType(col): {
     readonly dt: string;
     readonly [key: string]: any;
   } {
@@ -1098,7 +1098,7 @@ export class MssqlUi {
         colProp.validate = {
           func: ['isMobilePhone'],
           args: [''],
-          msg: ['Validation failed : isMobilePhone']
+          msg: ['Validation failed : isMobilePhone'],
         };
         break;
       case 'Email':
@@ -1106,7 +1106,7 @@ export class MssqlUi {
         colProp.validate = {
           func: ['isEmail'],
           args: [''],
-          msg: ['Validation failed : isEmail']
+          msg: ['Validation failed : isEmail'],
         };
         break;
       case 'URL':
@@ -1114,7 +1114,7 @@ export class MssqlUi {
         colProp.validate = {
           func: ['isURL'],
           args: [''],
-          msg: ['Validation failed : isURL']
+          msg: ['Validation failed : isURL'],
         };
         break;
       case 'Number':
@@ -1128,7 +1128,7 @@ export class MssqlUi {
         colProp.validate = {
           func: ['isCurrency'],
           args: [''],
-          msg: ['Validation failed : isCurrency']
+          msg: ['Validation failed : isCurrency'],
         };
         break;
       case 'Percent':
@@ -1138,7 +1138,7 @@ export class MssqlUi {
         colProp.dt = 'int';
         break;
       case 'Rating':
-        colProp.dt = 'float';
+        colProp.dt = 'int';
         break;
       case 'Formula':
         colProp.dt = 'varchar';
@@ -1224,7 +1224,7 @@ export class MssqlUi {
           'numeric',
           'real',
           'smallint',
-          'tinyint'
+          'tinyint',
         ];
 
       case 'Decimal':
@@ -1240,7 +1240,7 @@ export class MssqlUi {
           'numeric',
           'real',
           'smallint',
-          'tinyint'
+          'tinyint',
         ];
 
       case 'Percent':
@@ -1253,7 +1253,7 @@ export class MssqlUi {
           'numeric',
           'real',
           'smallint',
-          'tinyint'
+          'tinyint',
         ];
 
       case 'Duration':
@@ -1266,7 +1266,7 @@ export class MssqlUi {
           'numeric',
           'real',
           'smallint',
-          'tinyint'
+          'tinyint',
         ];
 
       case 'Rating':
@@ -1279,7 +1279,7 @@ export class MssqlUi {
           'numeric',
           'real',
           'smallint',
-          'tinyint'
+          'tinyint',
         ];
 
       case 'Formula':
@@ -1302,7 +1302,7 @@ export class MssqlUi {
       case 'LastModifiedTime':
         return [
           'datetimeoffset',
-          'datetime2'
+          'datetime2',
           // 'datetime'
         ];
 
diff --git a/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts b/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts
index f639e8a2a4..18063917d2 100644
--- a/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts
@@ -1,4 +1,4 @@
-import UITypes from "../UITypes";
+import UITypes from '../UITypes';
 
 const dbTypes = [
   'int',
@@ -39,7 +39,7 @@ const dbTypes = [
   'multipoint',
   'multilinestring',
   'multipolygon',
-  'json'
+  'json',
 ];
 
 export class MysqlUi {
@@ -66,7 +66,7 @@ export class MysqlUi {
         altered: 1,
         uidt: 'ID',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
         column_name: 'title',
@@ -89,7 +89,7 @@ export class MysqlUi {
         altered: 1,
         uidt: 'SingleLineText',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
         column_name: 'created_at',
@@ -112,7 +112,7 @@ export class MysqlUi {
         altered: 1,
         uidt: UITypes.DateTime,
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
         column_name: 'updated_at',
@@ -135,8 +135,8 @@ export class MysqlUi {
         altered: 1,
         uidt: UITypes.DateTime,
         uip: '',
-        uicn: ''
-      }
+        uicn: '',
+      },
     ];
   }
 
@@ -161,7 +161,7 @@ export class MysqlUi {
       altered: 1,
       uidt: 'SingleLineText',
       uip: '',
-      uicn: ''
+      uicn: '',
     };
   }
 
@@ -659,13 +659,15 @@ export class MysqlUi {
   }
 
   static extractFunctionName(query) {
-    const reg = /^\s*CREATE\s+.*?(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:`?[\w\d_]+`?\.)?`?([\w_\d]+)`?/i;
+    const reg =
+      /^\s*CREATE\s+.*?(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:`?[\w\d_]+`?\.)?`?([\w_\d]+)`?/i;
     const match = query.match(reg);
     return match && match[1];
   }
 
   static extractProcedureName(query) {
-    const reg = /^\s*CREATE.*?\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE.*?\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
@@ -677,14 +679,14 @@ export class MysqlUi {
       // set headers before settings result
       for (let i = 0; i < keys.length; i++) {
         const text = keys[i];
-        headers.push({text, value: text, sortable: false});
+        headers.push({ text, value: text, sortable: false });
       }
     } else {
       const keys = Object.keys(result);
       for (let i = 0; i < keys.length; i++) {
         const text = keys[i];
         if (typeof text !== 'function') {
-          headers.push({text, value: text, sortable: false});
+          headers.push({ text, value: text, sortable: false });
         }
       }
       result = [result];
@@ -750,7 +752,7 @@ export class MysqlUi {
             dtx: 'specificType',
             dtxp: null,
             dtxs: 0,
-            altered: 1
+            altered: 1,
           };
 
           switch (typeof json[keys[i]]) {
@@ -758,13 +760,13 @@ export class MysqlUi {
               if (Number.isInteger(json[keys[i]])) {
                 if (MysqlUi.isValidTimestamp(keys[i], json[keys[i]])) {
                   Object.assign(column, {
-                    dt: 'timestamp'
+                    dt: 'timestamp',
                   });
                 } else {
                   Object.assign(column, {
                     dt: 'int',
                     np: 10,
-                    ns: 0
+                    ns: 0,
                   });
                 }
               } else {
@@ -773,25 +775,25 @@ export class MysqlUi {
                   np: 10,
                   ns: 2,
                   dtxp: '11',
-                  dtxs: 2
+                  dtxs: 2,
                 });
               }
               break;
             case 'string':
               if (MysqlUi.isValidDate(json[keys[i]])) {
                 Object.assign(column, {
-                  dt: 'datetime'
+                  dt: 'datetime',
                 });
               } else if (json[keys[i]].length <= 255) {
                 Object.assign(column, {
                   dt: 'varchar',
                   np: 255,
                   ns: 0,
-                  dtxp: '255'
+                  dtxp: '255',
                 });
               } else {
                 Object.assign(column, {
-                  dt: 'text'
+                  dt: 'text',
                 });
               }
               break;
@@ -799,14 +801,14 @@ export class MysqlUi {
               Object.assign(column, {
                 dt: 'boolean',
                 np: 3,
-                ns: 0
+                ns: 0,
               });
               break;
             case 'object':
               Object.assign(column, {
                 dt: 'json',
                 np: 3,
-                ns: 0
+                ns: 0,
               });
               break;
             default:
@@ -991,7 +993,7 @@ export class MysqlUi {
         colProp.validate = {
           func: ['isMobilePhone'],
           args: [''],
-          msg: ['Validation failed : isMobilePhone ({cn})']
+          msg: ['Validation failed : isMobilePhone ({cn})'],
         };
         break;
       case 'Email':
@@ -999,7 +1001,7 @@ export class MysqlUi {
         colProp.validate = {
           func: ['isEmail'],
           args: [''],
-          msg: ['Validation failed : isEmail ({cn})']
+          msg: ['Validation failed : isEmail ({cn})'],
         };
         break;
       case 'URL':
@@ -1007,7 +1009,7 @@ export class MysqlUi {
         colProp.validate = {
           func: ['isURL'],
           args: [''],
-          msg: ['Validation failed : isURL ({cn})']
+          msg: ['Validation failed : isURL ({cn})'],
         };
         break;
       case 'Number':
@@ -1021,7 +1023,7 @@ export class MysqlUi {
         colProp.validate = {
           func: ['isCurrency'],
           args: [''],
-          msg: ['Validation failed : isCurrency']
+          msg: ['Validation failed : isCurrency'],
         };
         break;
       case 'Percent':
@@ -1031,7 +1033,7 @@ export class MysqlUi {
         colProp.dt = 'int';
         break;
       case 'Rating':
-        colProp.dt = 'float';
+        colProp.dt = 'int';
         break;
       case 'Formula':
         colProp.dt = 'varchar';
@@ -1089,7 +1091,7 @@ export class MysqlUi {
           'text',
           'tinytext',
           'mediumtext',
-          'longtext'
+          'longtext',
         ];
 
       case 'Attachment':
@@ -1101,7 +1103,7 @@ export class MysqlUi {
           'text',
           'tinytext',
           'mediumtext',
-          'longtext'
+          'longtext',
         ];
 
       case 'JSON':
@@ -1116,7 +1118,7 @@ export class MysqlUi {
           'bit',
           'boolean',
           'serial',
-          'tinyint'
+          'tinyint',
         ];
 
       case 'MultiSelect':
@@ -1148,7 +1150,7 @@ export class MysqlUi {
           'float',
           'decimal',
           'double',
-          'serial'
+          'serial',
         ];
 
       case 'Decimal':
@@ -1164,7 +1166,7 @@ export class MysqlUi {
           'smallint',
           'mediumint',
           'bigint',
-          'bit'
+          'bit',
         ];
 
       case 'Percent':
@@ -1177,7 +1179,7 @@ export class MysqlUi {
           'smallint',
           'mediumint',
           'bigint',
-          'bit'
+          'bit',
         ];
 
       case 'Duration':
@@ -1190,7 +1192,7 @@ export class MysqlUi {
           'smallint',
           'mediumint',
           'bigint',
-          'bit'
+          'bit',
         ];
 
       case 'Rating':
@@ -1203,7 +1205,7 @@ export class MysqlUi {
           'smallint',
           'mediumint',
           'bigint',
-          'bit'
+          'bit',
         ];
 
       case 'Formula':
@@ -1214,7 +1216,7 @@ export class MysqlUi {
           'text',
           'tinytext',
           'mediumtext',
-          'longtext'
+          'longtext',
         ];
 
       case 'Rollup':
@@ -1248,7 +1250,7 @@ export class MysqlUi {
           'polygon',
           'multipoint',
           'multilinestring',
-          'multipolygon'
+          'multipolygon',
         ];
 
       case 'Button':
diff --git a/packages/nocodb-sdk/src/lib/sqlUi/OracleUi.ts b/packages/nocodb-sdk/src/lib/sqlUi/OracleUi.ts
index 3f1b14ac2a..f8fe150422 100644
--- a/packages/nocodb-sdk/src/lib/sqlUi/OracleUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/OracleUi.ts
@@ -22,7 +22,7 @@ export class OracleUi {
         altered: 1,
         uidt: 'ID',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
         column_name: 'title',
@@ -45,8 +45,8 @@ export class OracleUi {
         altered: 1,
         uidt: 'SingleLineText',
         uip: '',
-        uicn: ''
-      }
+        uicn: '',
+      },
       // {
       //  column_name: "created_at",
       //   dt: "timestamp",
@@ -107,7 +107,7 @@ export class OracleUi {
       altered: 1,
       uidt: 'SingleLineText',
       uip: '',
-      uicn: ''
+      uicn: '',
     };
   }
 
@@ -435,13 +435,15 @@ export class OracleUi {
   }
 
   static extractFunctionName(query) {
-    const reg = /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
 
   static extractProcedureName(query) {
-    const reg = /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
@@ -522,7 +524,7 @@ export class OracleUi {
                   dtx: 'specificType',
                   dtxp: '11',
                   dtxs: 0,
-                  altered: 1
+                  altered: 1,
                 });
               } else {
                 columns.push({
@@ -548,7 +550,7 @@ export class OracleUi {
                   dtx: 'specificType',
                   dtxp: '11',
                   dtxs: 2,
-                  altered: 1
+                  altered: 1,
                 });
               }
 
@@ -579,7 +581,7 @@ export class OracleUi {
                   dtx: 'specificType',
                   dtxp: '45',
                   dtxs: 0,
-                  altered: 1
+                  altered: 1,
                 });
               } else {
                 columns.push({
@@ -605,7 +607,7 @@ export class OracleUi {
                   dtx: 'specificType',
                   dtxp: null,
                   dtxs: 0,
-                  altered: 1
+                  altered: 1,
                 });
               }
 
@@ -635,7 +637,7 @@ export class OracleUi {
                 dtx: 'specificType',
                 dtxp: '1',
                 dtxs: 0,
-                altered: 1
+                altered: 1,
               });
               break;
 
@@ -663,7 +665,7 @@ export class OracleUi {
                 dtx: 'specificType',
                 dtxp: null,
                 dtxs: 0,
-                altered: 1
+                altered: 1,
               });
               break;
 
@@ -839,7 +841,7 @@ export class OracleUi {
         colProp.validate = {
           func: ['isMobilePhone'],
           args: [''],
-          msg: ['Validation failed : isMobilePhone']
+          msg: ['Validation failed : isMobilePhone'],
         };
         break;
       case 'Email':
@@ -847,7 +849,7 @@ export class OracleUi {
         colProp.validate = {
           func: ['isEmail'],
           args: [''],
-          msg: ['Validation failed : isEmail']
+          msg: ['Validation failed : isEmail'],
         };
         break;
       case 'URL':
@@ -855,7 +857,7 @@ export class OracleUi {
         colProp.validate = {
           func: ['isURL'],
           args: [''],
-          msg: ['Validation failed : isURL']
+          msg: ['Validation failed : isURL'],
         };
         break;
       case 'Number':
@@ -869,7 +871,7 @@ export class OracleUi {
         colProp.validate = {
           func: ['isCurrency'],
           args: [''],
-          msg: ['Validation failed : isCurrency']
+          msg: ['Validation failed : isCurrency'],
         };
         break;
       case 'Percent':
@@ -879,7 +881,7 @@ export class OracleUi {
         colProp.dt = 'integer';
         break;
       case 'Rating':
-        colProp.dt = 'float';
+        colProp.dt = 'integer';
         break;
       case 'Formula':
         colProp.dt = 'varchar';
diff --git a/packages/nocodb-sdk/src/lib/sqlUi/PgUi.ts b/packages/nocodb-sdk/src/lib/sqlUi/PgUi.ts
index 49b695a0f5..ecea78b096 100644
--- a/packages/nocodb-sdk/src/lib/sqlUi/PgUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/PgUi.ts
@@ -1,4 +1,4 @@
-import UITypes from "../UITypes";
+import UITypes from '../UITypes';
 
 const dbTypes = [
   'int',
@@ -98,15 +98,15 @@ const dbTypes = [
   'unknown',
   'void',
   'xid',
-  'xml'
+  'xml',
 ];
 
 export class PgUi {
   static getNewTableColumns() {
     return [
       {
-       column_name: 'id',
-       title: 'Id',
+        column_name: 'id',
+        title: 'Id',
         dt: 'int4',
         dtx: 'integer',
         ct: 'int(11)',
@@ -125,11 +125,11 @@ export class PgUi {
         altered: 1,
         uidt: 'ID',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'title',
-       title: 'Title',
+        column_name: 'title',
+        title: 'Title',
         dt: 'character varying',
         dtx: 'specificType',
         ct: 'varchar(45)',
@@ -148,11 +148,11 @@ export class PgUi {
         altered: 1,
         uidt: 'SingleLineText',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'created_at',
-       title: 'CreatedAt',
+        column_name: 'created_at',
+        title: 'CreatedAt',
         dt: 'timestamp',
         dtx: 'specificType',
         ct: 'varchar(45)',
@@ -171,11 +171,11 @@ export class PgUi {
         altered: 1,
         uidt: UITypes.DateTime,
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'updated_at',
-       title: 'UpdatedAt',
+        column_name: 'updated_at',
+        title: 'UpdatedAt',
         dt: 'timestamp',
         dtx: 'specificType',
         ct: 'varchar(45)',
@@ -195,8 +195,8 @@ export class PgUi {
         altered: 1,
         uidt: UITypes.DateTime,
         uip: '',
-        uicn: ''
-      }
+        uicn: '',
+      },
     ];
   }
 
@@ -221,7 +221,7 @@ export class PgUi {
       altered: 1,
       uidt: 'SingleLineText',
       uip: '',
-      uicn: ''
+      uicn: '',
     };
   }
 
@@ -1160,13 +1160,15 @@ export class PgUi {
   }
 
   static extractFunctionName(query) {
-    const reg = /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
 
   static extractProcedureName(query) {
-    const reg = /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
@@ -1176,8 +1178,8 @@ export class PgUi {
       headers.push({ text: 'Row count', value: 'rowCount', sortable: false });
       result = [
         {
-          rowCount: result.rowCount
-        }
+          rowCount: result.rowCount,
+        },
       ];
     } else {
       result = result.rows;
@@ -1232,7 +1234,7 @@ export class PgUi {
           const column = {
             dp: null,
             tn,
-           column_name: keys[i],
+            column_name: keys[i],
             cno: keys[i],
             np: 10,
             ns: 0,
@@ -1251,7 +1253,7 @@ export class PgUi {
             dtx: 'specificType',
             dtxp: null,
             dtxs: 0,
-            altered: 1
+            altered: 1,
           };
 
           switch (typeof json[keys[i]]) {
@@ -1259,13 +1261,13 @@ export class PgUi {
               if (Number.isInteger(json[keys[i]])) {
                 if (PgUi.isValidTimestamp(keys[i], json[keys[i]])) {
                   Object.assign(column, {
-                    dt: 'timestamp'
+                    dt: 'timestamp',
                   });
                 } else {
                   Object.assign(column, {
                     dt: 'int',
                     np: 10,
-                    ns: 0
+                    ns: 0,
                   });
                 }
               } else {
@@ -1274,25 +1276,25 @@ export class PgUi {
                   np: null,
                   ns: null,
                   dtxp: null,
-                  dtxs: null
+                  dtxs: null,
                 });
               }
               break;
             case 'string':
               if (PgUi.isValidDate(json[keys[i]])) {
                 Object.assign(column, {
-                  dt: 'date'
+                  dt: 'date',
                 });
               } else if (json[keys[i]].length <= 255) {
                 Object.assign(column, {
                   dt: 'character varying',
                   np: null,
                   ns: 0,
-                  dtxp: null
+                  dtxp: null,
                 });
               } else {
                 Object.assign(column, {
-                  dt: 'text'
+                  dt: 'text',
                 });
               }
               break;
@@ -1300,14 +1302,14 @@ export class PgUi {
               Object.assign(column, {
                 dt: 'boolean',
                 np: 3,
-                ns: 0
+                ns: 0,
               });
               break;
             case 'object':
               Object.assign(column, {
                 dt: 'json',
                 np: 3,
-                ns: 0
+                ns: 0,
               });
               break;
             default:
@@ -1521,7 +1523,6 @@ export class PgUi {
       case 'longblob':
         return 'blob';
       case 'enum':
-
         return 'enum';
       case 'set':
         return 'set';
@@ -1616,7 +1617,7 @@ export class PgUi {
         colProp.validate = {
           func: ['isMobilePhone'],
           args: [''],
-          msg: ['Validation failed : isMobilePhone']
+          msg: ['Validation failed : isMobilePhone'],
         };
         break;
       case 'Email':
@@ -1624,7 +1625,7 @@ export class PgUi {
         colProp.validate = {
           func: ['isEmail'],
           args: [''],
-          msg: ['Validation failed : isEmail']
+          msg: ['Validation failed : isEmail'],
         };
         break;
       case 'URL':
@@ -1632,7 +1633,7 @@ export class PgUi {
         colProp.validate = {
           func: ['isURL'],
           args: [''],
-          msg: ['Validation failed : isURL']
+          msg: ['Validation failed : isURL'],
         };
         break;
       case 'Number':
@@ -1646,7 +1647,7 @@ export class PgUi {
         colProp.validate = {
           func: ['isCurrency'],
           args: [''],
-          msg: ['Validation failed : isCurrency']
+          msg: ['Validation failed : isCurrency'],
         };
         break;
       case 'Percent':
@@ -1656,7 +1657,7 @@ export class PgUi {
         colProp.dt = 'int8';
         break;
       case 'Rating':
-        colProp.dt = 'float8';
+        colProp.dt = 'smallint';
         break;
       case 'Formula':
         colProp.dt = 'character varying';
@@ -1732,7 +1733,7 @@ export class PgUi {
           'int8range',
           'serial',
           'serial2',
-          'serial8'
+          'serial8',
         ];
 
       case 'MultiSelect':
@@ -1753,7 +1754,7 @@ export class PgUi {
           'timestamptz',
           'timestamp with time zone',
           'timetz',
-          'time with time zone'
+          'time with time zone',
         ];
 
       case 'PhoneNumber':
@@ -1780,7 +1781,7 @@ export class PgUi {
           'float8',
           'smallint',
           'smallserial',
-          'numeric'
+          'numeric',
         ];
 
       case 'Decimal':
@@ -1802,7 +1803,7 @@ export class PgUi {
           'money',
           'float4',
           'float8',
-          'numeric'
+          'numeric',
         ];
 
       case 'Percent':
@@ -1822,7 +1823,7 @@ export class PgUi {
           'float8',
           'smallint',
           'smallserial',
-          'numeric'
+          'numeric',
         ];
 
       case 'Duration':
@@ -1842,7 +1843,7 @@ export class PgUi {
           'float8',
           'smallint',
           'smallserial',
-          'numeric'
+          'numeric',
         ];
 
       case 'Rating':
@@ -1862,7 +1863,7 @@ export class PgUi {
           'float8',
           'smallint',
           'smallserial',
-          'numeric'
+          'numeric',
         ];
 
       case 'Formula':
@@ -1884,7 +1885,7 @@ export class PgUi {
           'serial2',
           'serial8',
           'smallint',
-          'smallserial'
+          'smallserial',
         ];
 
       case 'Lookup':
@@ -1896,7 +1897,7 @@ export class PgUi {
           'timestamp',
           'timestamp without time zone',
           'timestamptz',
-          'timestamp with time zone'
+          'timestamp with time zone',
         ];
 
       case 'DateTime':
@@ -1906,7 +1907,7 @@ export class PgUi {
           'timestamp',
           'timestamp without time zone',
           'timestamptz',
-          'timestamp with time zone'
+          'timestamp with time zone',
         ];
 
       case 'AutoNumber':
@@ -1922,7 +1923,7 @@ export class PgUi {
           'serial2',
           'serial8',
           'smallint',
-          'smallserial'
+          'smallserial',
         ];
 
       case 'Barcode':
@@ -1937,7 +1938,7 @@ export class PgUi {
           'line',
           'lseg',
           'path',
-          'circle'
+          'circle',
         ];
 
       case 'Button':
diff --git a/packages/nocodb-sdk/src/lib/sqlUi/SqliteUi.ts b/packages/nocodb-sdk/src/lib/sqlUi/SqliteUi.ts
index f2dfb426ec..905ae534a4 100644
--- a/packages/nocodb-sdk/src/lib/sqlUi/SqliteUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/SqliteUi.ts
@@ -1,4 +1,4 @@
-import UITypes from "../UITypes";
+import UITypes from '../UITypes';
 
 const dbTypes = [
   'int',
@@ -22,15 +22,15 @@ const dbTypes = [
   'datetime',
   'text',
   'varchar',
-  'timestamp'
+  'timestamp',
 ];
 
 export class SqliteUi {
   static getNewTableColumns() {
     return [
       {
-       column_name: 'id',
-       title: 'Id',
+        column_name: 'id',
+        title: 'Id',
         dt: 'integer',
         dtx: 'integer',
         ct: 'int(11)',
@@ -49,11 +49,11 @@ export class SqliteUi {
         altered: 1,
         uidt: 'ID',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'title',
-       title: 'Title',
+        column_name: 'title',
+        title: 'Title',
         dt: 'varchar',
         dtx: 'specificType',
         ct: 'varchar',
@@ -72,11 +72,11 @@ export class SqliteUi {
         altered: 1,
         uidt: 'SingleLineText',
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'created_at',
-       title: 'CreatedAt',
+        column_name: 'created_at',
+        title: 'CreatedAt',
         dt: 'datetime',
         dtx: 'specificType',
         ct: 'varchar',
@@ -95,11 +95,11 @@ export class SqliteUi {
         altered: 1,
         uidt: UITypes.DateTime,
         uip: '',
-        uicn: ''
+        uicn: '',
       },
       {
-       column_name: 'updated_at',
-       title: 'UpdatedAt',
+        column_name: 'updated_at',
+        title: 'UpdatedAt',
         dt: 'datetime',
         dtx: 'specificType',
         ct: 'varchar',
@@ -118,8 +118,8 @@ export class SqliteUi {
         altered: 1,
         uidt: UITypes.DateTime,
         uip: '',
-        uicn: ''
-      }
+        uicn: '',
+      },
     ];
   }
 
@@ -144,7 +144,7 @@ export class SqliteUi {
       altered: 1,
       uidt: 'SingleLineText',
       uip: '',
-      uicn: ''
+      uicn: '',
     };
   }
 
@@ -498,13 +498,15 @@ export class SqliteUi {
   }
 
   static extractFunctionName(query) {
-    const reg = /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*FUNCTION\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
 
   static extractProcedureName(query) {
-    const reg = /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
+    const reg =
+      /^\s*CREATE\s+(?:OR\s+REPLACE\s*)?\s*PROCEDURE\s+(?:[\w\d_]+\.)?([\w_\d]+)/i;
     const match = query.match(reg);
     return match && match[1];
   }
@@ -565,7 +567,7 @@ export class SqliteUi {
           const column = {
             dp: null,
             tn,
-           column_name: keys[i],
+            column_name: keys[i],
             cno: keys[i],
             np: null,
             ns: null,
@@ -584,7 +586,7 @@ export class SqliteUi {
             dtx: 'specificType',
             dtxp: null,
             dtxs: 0,
-            altered: 1
+            altered: 1,
           };
 
           switch (typeof json[keys[i]]) {
@@ -592,16 +594,16 @@ export class SqliteUi {
               if (Number.isInteger(json[keys[i]])) {
                 if (SqliteUi.isValidTimestamp(keys[i], json[keys[i]])) {
                   Object.assign(column, {
-                    dt: 'timestamp'
+                    dt: 'timestamp',
                   });
                 } else {
                   Object.assign(column, {
-                    dt: 'integer'
+                    dt: 'integer',
                   });
                 }
               } else {
                 Object.assign(column, {
-                  dt: 'real'
+                  dt: 'real',
                 });
               }
               break;
@@ -613,24 +615,24 @@ export class SqliteUi {
               // } else
               if (json[keys[i]].length <= 255) {
                 Object.assign(column, {
-                  dt: 'varchar'
+                  dt: 'varchar',
                 });
               } else {
                 Object.assign(column, {
-                  dt: 'text'
+                  dt: 'text',
                 });
               }
               break;
             case 'boolean':
               Object.assign(column, {
-                dt: 'integer'
+                dt: 'integer',
               });
               break;
             case 'object':
               Object.assign(column, {
                 dt: 'text',
                 np: null,
-                dtxp: null
+                dtxp: null,
               });
               break;
             default:
@@ -807,7 +809,7 @@ export class SqliteUi {
         colProp.validate = {
           func: ['isMobilePhone'],
           args: [''],
-          msg: ['Validation failed : isMobilePhone']
+          msg: ['Validation failed : isMobilePhone'],
         };
         break;
       case 'Email':
@@ -815,7 +817,7 @@ export class SqliteUi {
         colProp.validate = {
           func: ['isEmail'],
           args: [''],
-          msg: ['Validation failed : isEmail']
+          msg: ['Validation failed : isEmail'],
         };
         break;
       case 'URL':
@@ -823,7 +825,7 @@ export class SqliteUi {
         colProp.validate = {
           func: ['isURL'],
           args: [''],
-          msg: ['Validation failed : isURL']
+          msg: ['Validation failed : isURL'],
         };
         break;
       case 'Number':
@@ -837,7 +839,7 @@ export class SqliteUi {
         colProp.validate = {
           func: ['isCurrency'],
           args: [''],
-          msg: ['Validation failed : isCurrency']
+          msg: ['Validation failed : isCurrency'],
         };
         break;
       case 'Percent':
@@ -847,7 +849,7 @@ export class SqliteUi {
         colProp.dt = 'integer';
         break;
       case 'Rating':
-        colProp.dt = 'float';
+        colProp.dt = 'integer';
         break;
       case 'Formula':
         colProp.dt = 'varchar';
@@ -911,7 +913,7 @@ export class SqliteUi {
           'bigint',
           'int2',
           'int8',
-          'boolean'
+          'boolean',
         ];
 
       case 'MultiSelect':
@@ -929,7 +931,7 @@ export class SqliteUi {
           'mediumint',
           'bigint',
           'int2',
-          'int8'
+          'int8',
         ];
 
       case 'Time':
@@ -941,7 +943,7 @@ export class SqliteUi {
           'mediumint',
           'bigint',
           'int2',
-          'int8'
+          'int8',
         ];
 
       case 'PhoneNumber':
@@ -965,7 +967,7 @@ export class SqliteUi {
           'real',
           'double',
           'double precision',
-          'float'
+          'float',
         ];
 
       case 'Decimal':
@@ -985,7 +987,7 @@ export class SqliteUi {
           'bigint',
           'int2',
           'int8',
-          'numeric'
+          'numeric',
         ];
 
       case 'Percent':
@@ -1002,7 +1004,7 @@ export class SqliteUi {
           'bigint',
           'int2',
           'int8',
-          'numeric'
+          'numeric',
         ];
 
       case 'Duration':
@@ -1014,15 +1016,11 @@ export class SqliteUi {
           'mediumint',
           'bigint',
           'int2',
-          'int8'
+          'int8',
         ];
 
       case 'Rating':
         return [
-          'real',
-          'double',
-          'double precision',
-          'float',
           'int',
           'integer',
           'tinyint',
@@ -1031,7 +1029,11 @@ export class SqliteUi {
           'bigint',
           'int2',
           'int8',
-          'numeric'
+          'numeric',
+          'real',
+          'double',
+          'double precision',
+          'float',
         ];
 
       case 'Formula':
@@ -1049,7 +1051,7 @@ export class SqliteUi {
           'mediumint',
           'bigint',
           'int2',
-          'int8'
+          'int8',
         ];
 
       case 'Lookup':
@@ -1072,7 +1074,7 @@ export class SqliteUi {
           'mediumint',
           'bigint',
           'int2',
-          'int8'
+          'int8',
         ];
 
       case 'Barcode':
diff --git a/packages/nocodb/.prettierrc.js b/packages/nocodb/.prettierrc.js
index 3a429aa560..663965b8a9 100644
--- a/packages/nocodb/.prettierrc.js
+++ b/packages/nocodb/.prettierrc.js
@@ -1,6 +1,6 @@
 module.exports = {
-  semi: true,
-  trailingComma: "all",
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
   singleQuote: true,
   tabWidth: 2,
   printWidth: 120
diff --git a/packages/nocodb/package-lock.json b/packages/nocodb/package-lock.json
index 3ed1843470..9b7f90dce5 100644
--- a/packages/nocodb/package-lock.json
+++ b/packages/nocodb/package-lock.json
@@ -12,6 +12,7 @@
         "@google-cloud/storage": "^5.7.2",
         "@graphql-tools/merge": "^6.0.12",
         "@sentry/node": "^6.3.5",
+        "airtable": "^0.11.3",
         "archiver": "^5.0.2",
         "auto-bind": "^4.0.0",
         "aws-sdk": "^2.829.0",
@@ -19,6 +20,7 @@
         "bcryptjs": "^2.4.3",
         "body-parser": "^1.19.0",
         "boxen": "^5.0.0",
+        "bullmq": "^1.81.1",
         "clear": "^0.1.0",
         "cli-table3": "^0.6.0",
         "cluster": "^0.7.7",
@@ -74,6 +76,7 @@
         "ncp": "^2.0.0",
         "nocodb-sdk": "file:../nocodb-sdk",
         "nodemailer": "^6.4.10",
+        "object-hash": "^3.0.0",
         "ora": "^4.0.4",
         "os-locale": "^5.0.0",
         "papaparse": "^5.3.1",
@@ -2367,6 +2370,11 @@
         "node": ">=6.5"
       }
     },
+    "node_modules/abortcontroller-polyfill": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
+      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
+    },
     "node_modules/accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -2498,6 +2506,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/airtable": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/airtable/-/airtable-0.11.3.tgz",
+      "integrity": "sha512-fPT0SdipmJU1eQNe+sJshvnb87HcZ2rPS7gJuryDAF9xDbfbxB8AmYQSuC1f0PIbLyPPpSWBuEewf4UJ9i3rJw==",
+      "dependencies": {
+        "@types/node": ">=8.0.0 <15",
+        "abort-controller": "^3.0.0",
+        "abortcontroller-polyfill": "^1.4.0",
+        "lodash": "^4.17.21",
+        "node-fetch": "^2.6.7"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/airtable/node_modules/@types/node": {
+      "version": "14.18.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.16.tgz",
+      "integrity": "sha512-X3bUMdK/VmvrWdoTkz+VCn6nwKwrKCFTHtqwBIaQJNx4RUIBBUFXM00bqPz/DsDd+Icjmzm6/tyYZzeGVqb6/Q=="
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -4257,6 +4285,27 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
       "dev": true
     },
+    "node_modules/bullmq": {
+      "version": "1.81.4",
+      "resolved": "https://registry.npmjs.org/bullmq/-/bullmq-1.81.4.tgz",
+      "integrity": "sha512-sUEWOMKZnWlh1/XNqYAoSwXW6P8nZN7uJiHKZ8XlZCiIxWlEGjFtlugkkiCZ0lsTI2nNRHdxfpn78x9K3L1utQ==",
+      "dependencies": {
+        "cron-parser": "^4.2.1",
+        "get-port": "^5.1.1",
+        "glob": "^7.2.0",
+        "ioredis": "^4.28.5",
+        "lodash": "^4.17.21",
+        "msgpackr": "^1.4.6",
+        "semver": "^6.3.0",
+        "tslib": "^1.14.1",
+        "uuid": "^8.3.2"
+      }
+    },
+    "node_modules/bullmq/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/busboy": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
@@ -7324,6 +7373,17 @@
         "moment-timezone": "^0.5.x"
       }
     },
+    "node_modules/cron-parser": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.4.0.tgz",
+      "integrity": "sha512-TrE5Un4rtJaKgmzPewh67yrER5uKM0qI9hGLDBfWb8GGRe9pn/SDkhVrdHa4z7h0SeyeNxnQnogws/H+AQANQA==",
+      "dependencies": {
+        "luxon": "^1.28.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-argv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/cross-argv/-/cross-argv-1.0.0.tgz",
@@ -10760,7 +10820,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
       "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -14520,6 +14579,14 @@
       "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
       "dev": true
     },
+    "node_modules/luxon": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
+      "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mailersend": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/mailersend/-/mailersend-1.3.1.tgz",
@@ -15728,6 +15795,104 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/msgpackr": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.5.7.tgz",
+      "integrity": "sha512-Hsa80i8W4BiObSMHslfnwC+CC1CYHZzoXJZn0+3EvoCEOgt3c5QlXhdcjgFk2aZxMgpV8aUFZqJyQUCIp4UrzA==",
+      "optionalDependencies": {
+        "msgpackr-extract": "^1.1.4"
+      }
+    },
+    "node_modules/msgpackr-extract": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-1.1.4.tgz",
+      "integrity": "sha512-WQbHvsThprXh+EqZYy+SQFEs7z6bNM7a0vgirwUfwUcphWGT2mdPcpyLCNiRsN6w5q5VKJUMblHY+tNEyceb9Q==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build-optional-packages": "^4.3.2"
+      },
+      "optionalDependencies": {
+        "msgpackr-extract-darwin-arm64": "1.1.0",
+        "msgpackr-extract-darwin-x64": "1.1.0",
+        "msgpackr-extract-linux-arm": "1.1.0",
+        "msgpackr-extract-linux-arm64": "1.1.0",
+        "msgpackr-extract-linux-x64": "1.1.0",
+        "msgpackr-extract-win32-x64": "1.1.0"
+      }
+    },
+    "node_modules/msgpackr-extract-darwin-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-1.1.0.tgz",
+      "integrity": "sha512-s1kHoT12tS2cCQOv+Wl3I+/cYNJXBPtwQqGA+dPYoXmchhXiE0Nso+BIfvQ5PxbmAyjj54Q5o7PnLTqVquNfZA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/msgpackr-extract-darwin-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-1.1.0.tgz",
+      "integrity": "sha512-yx/H/i12IKg4eWGu/eKdKzJD4jaYvvujQSaVmeOMCesbSQnWo5X6YR9TFjoiNoU9Aexk1KufzL9gW+1DozG1yw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/msgpackr-extract-linux-arm": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-1.1.0.tgz",
+      "integrity": "sha512-0VvSCqi12xpavxl14gMrauwIzHqHbmSChUijy/uo3mpjB1Pk4vlisKpZsaOZvNJyNKj0ACi5jYtbWnnOd7hYGw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/msgpackr-extract-linux-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-1.1.0.tgz",
+      "integrity": "sha512-AxFle3fHNwz2V4CYDIGFxI6o/ZuI0lBKg0uHI8EcCMUmDE5mVAUWYge5WXmORVvb8sVWyVgFlmi3MTu4Ve6tNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/msgpackr-extract-linux-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-1.1.0.tgz",
+      "integrity": "sha512-O+XoyNFWpdB8oQL6O/YyzffPpmG5rTNrr1nKLW70HD2ENJUhcITzbV7eZimHPzkn8LAGls1tBaMTHQezTBpFOw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/msgpackr-extract-win32-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-1.1.0.tgz",
+      "integrity": "sha512-6AJdM5rNsL4yrskRfhujVSPEd6IBpgvsnIT/TPowKNLQ62iIdryizPY2PJNFiW3AJcY249AHEiDBXS1cTDPxzA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/mssql": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/mssql/-/mssql-6.4.0.tgz",
@@ -16150,14 +16315,22 @@
       "integrity": "sha512-ASCL5U13as7HhOExbT6OlWJJUV/lLzL2voOSP1UVehpRD8FbSrSDjfScK/KwAvVTI5AS6r4VwbOMlIqtvRidnA=="
     },
     "node_modules/node-fetch": {
-      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
-      "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
       "engines": {
         "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
       }
     },
     "node_modules/node-forge": {
@@ -16194,6 +16367,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/node-gyp-build-optional-packages": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-4.3.2.tgz",
+      "integrity": "sha512-P5Ep3ISdmwcCkZIaBaQamQtWAG0facC89phWZgi5Z3hBU//J6S48OIvyZWSPPf6yQMklLZiqoosWAZUj7N+esA==",
+      "optional": true,
+      "bin": {
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-optional-packages": "bin.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-gyp/node_modules/nopt": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
@@ -17257,6 +17441,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
@@ -26673,6 +26865,11 @@
         "event-target-shim": "^5.0.0"
       }
     },
+    "abortcontroller-polyfill": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
+      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -26781,6 +26978,25 @@
         }
       }
     },
+    "airtable": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/airtable/-/airtable-0.11.3.tgz",
+      "integrity": "sha512-fPT0SdipmJU1eQNe+sJshvnb87HcZ2rPS7gJuryDAF9xDbfbxB8AmYQSuC1f0PIbLyPPpSWBuEewf4UJ9i3rJw==",
+      "requires": {
+        "@types/node": ">=8.0.0 <15",
+        "abort-controller": "^3.0.0",
+        "abortcontroller-polyfill": "^1.4.0",
+        "lodash": "^4.17.21",
+        "node-fetch": "^2.6.7"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.18.16",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.16.tgz",
+          "integrity": "sha512-X3bUMdK/VmvrWdoTkz+VCn6nwKwrKCFTHtqwBIaQJNx4RUIBBUFXM00bqPz/DsDd+Icjmzm6/tyYZzeGVqb6/Q=="
+        }
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -28213,6 +28429,29 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
       "dev": true
     },
+    "bullmq": {
+      "version": "1.81.4",
+      "resolved": "https://registry.npmjs.org/bullmq/-/bullmq-1.81.4.tgz",
+      "integrity": "sha512-sUEWOMKZnWlh1/XNqYAoSwXW6P8nZN7uJiHKZ8XlZCiIxWlEGjFtlugkkiCZ0lsTI2nNRHdxfpn78x9K3L1utQ==",
+      "requires": {
+        "cron-parser": "^4.2.1",
+        "get-port": "^5.1.1",
+        "glob": "^7.2.0",
+        "ioredis": "^4.28.5",
+        "lodash": "^4.17.21",
+        "msgpackr": "^1.4.6",
+        "semver": "^6.3.0",
+        "tslib": "^1.14.1",
+        "uuid": "^8.3.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "busboy": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
@@ -30607,6 +30846,14 @@
         "moment-timezone": "^0.5.x"
       }
     },
+    "cron-parser": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.4.0.tgz",
+      "integrity": "sha512-TrE5Un4rtJaKgmzPewh67yrER5uKM0qI9hGLDBfWb8GGRe9pn/SDkhVrdHa4z7h0SeyeNxnQnogws/H+AQANQA==",
+      "requires": {
+        "luxon": "^1.28.0"
+      }
+    },
     "cross-argv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/cross-argv/-/cross-argv-1.0.0.tgz",
@@ -33382,8 +33629,7 @@
     "get-port": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
-      "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
-      "dev": true
+      "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ=="
     },
     "get-stdin": {
       "version": "6.0.0",
@@ -36211,6 +36457,11 @@
       "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
       "dev": true
     },
+    "luxon": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
+      "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ=="
+    },
     "mailersend": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/mailersend/-/mailersend-1.3.1.tgz",
@@ -37175,6 +37426,65 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "msgpackr": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.5.7.tgz",
+      "integrity": "sha512-Hsa80i8W4BiObSMHslfnwC+CC1CYHZzoXJZn0+3EvoCEOgt3c5QlXhdcjgFk2aZxMgpV8aUFZqJyQUCIp4UrzA==",
+      "requires": {
+        "msgpackr-extract": "^1.1.4"
+      }
+    },
+    "msgpackr-extract": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-1.1.4.tgz",
+      "integrity": "sha512-WQbHvsThprXh+EqZYy+SQFEs7z6bNM7a0vgirwUfwUcphWGT2mdPcpyLCNiRsN6w5q5VKJUMblHY+tNEyceb9Q==",
+      "optional": true,
+      "requires": {
+        "msgpackr-extract-darwin-arm64": "1.1.0",
+        "msgpackr-extract-darwin-x64": "1.1.0",
+        "msgpackr-extract-linux-arm": "1.1.0",
+        "msgpackr-extract-linux-arm64": "1.1.0",
+        "msgpackr-extract-linux-x64": "1.1.0",
+        "msgpackr-extract-win32-x64": "1.1.0",
+        "node-gyp-build-optional-packages": "^4.3.2"
+      }
+    },
+    "msgpackr-extract-darwin-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-1.1.0.tgz",
+      "integrity": "sha512-s1kHoT12tS2cCQOv+Wl3I+/cYNJXBPtwQqGA+dPYoXmchhXiE0Nso+BIfvQ5PxbmAyjj54Q5o7PnLTqVquNfZA==",
+      "optional": true
+    },
+    "msgpackr-extract-darwin-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-1.1.0.tgz",
+      "integrity": "sha512-yx/H/i12IKg4eWGu/eKdKzJD4jaYvvujQSaVmeOMCesbSQnWo5X6YR9TFjoiNoU9Aexk1KufzL9gW+1DozG1yw==",
+      "optional": true
+    },
+    "msgpackr-extract-linux-arm": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-1.1.0.tgz",
+      "integrity": "sha512-0VvSCqi12xpavxl14gMrauwIzHqHbmSChUijy/uo3mpjB1Pk4vlisKpZsaOZvNJyNKj0ACi5jYtbWnnOd7hYGw==",
+      "optional": true
+    },
+    "msgpackr-extract-linux-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-1.1.0.tgz",
+      "integrity": "sha512-AxFle3fHNwz2V4CYDIGFxI6o/ZuI0lBKg0uHI8EcCMUmDE5mVAUWYge5WXmORVvb8sVWyVgFlmi3MTu4Ve6tNQ==",
+      "optional": true
+    },
+    "msgpackr-extract-linux-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-1.1.0.tgz",
+      "integrity": "sha512-O+XoyNFWpdB8oQL6O/YyzffPpmG5rTNrr1nKLW70HD2ENJUhcITzbV7eZimHPzkn8LAGls1tBaMTHQezTBpFOw==",
+      "optional": true
+    },
+    "msgpackr-extract-win32-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-1.1.0.tgz",
+      "integrity": "sha512-6AJdM5rNsL4yrskRfhujVSPEd6IBpgvsnIT/TPowKNLQ62iIdryizPY2PJNFiW3AJcY249AHEiDBXS1cTDPxzA==",
+      "optional": true
+    },
     "mssql": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/mssql/-/mssql-6.4.0.tgz",
@@ -37556,9 +37866,9 @@
       "integrity": "sha512-ASCL5U13as7HhOExbT6OlWJJUV/lLzL2voOSP1UVehpRD8FbSrSDjfScK/KwAvVTI5AS6r4VwbOMlIqtvRidnA=="
     },
     "node-fetch": {
-      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
-      "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
       "requires": {
         "whatwg-url": "^5.0.0"
       }
@@ -37605,6 +37915,12 @@
         }
       }
     },
+    "node-gyp-build-optional-packages": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-4.3.2.tgz",
+      "integrity": "sha512-P5Ep3ISdmwcCkZIaBaQamQtWAG0facC89phWZgi5Z3hBU//J6S48OIvyZWSPPf6yQMklLZiqoosWAZUj7N+esA==",
+      "optional": true
+    },
     "node-libs-browser": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
@@ -38454,6 +38770,11 @@
         }
       }
     },
+    "object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
+    },
     "object-inspect": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
diff --git a/packages/nocodb/package.json b/packages/nocodb/package.json
index 522a9d2ff5..cc2cae2723 100644
--- a/packages/nocodb/package.json
+++ b/packages/nocodb/package.json
@@ -94,6 +94,7 @@
     "@google-cloud/storage": "^5.7.2",
     "@graphql-tools/merge": "^6.0.12",
     "@sentry/node": "^6.3.5",
+    "airtable": "^0.11.3",
     "archiver": "^5.0.2",
     "auto-bind": "^4.0.0",
     "aws-sdk": "^2.829.0",
@@ -101,6 +102,7 @@
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.19.0",
     "boxen": "^5.0.0",
+    "bullmq": "^1.81.1",
     "clear": "^0.1.0",
     "cli-table3": "^0.6.0",
     "cluster": "^0.7.7",
@@ -156,6 +158,7 @@
     "ncp": "^2.0.0",
     "nocodb-sdk": "file:../nocodb-sdk",
     "nodemailer": "^6.4.10",
+    "object-hash": "^3.0.0",
     "ora": "^4.0.4",
     "os-locale": "^5.0.0",
     "papaparse": "^5.3.1",
diff --git a/packages/nocodb/src/lib/dataMapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/dataMapper/lib/sql/BaseModelSqlv2.ts
index f9e67c6222..e9f781fb10 100644
--- a/packages/nocodb/src/lib/dataMapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/dataMapper/lib/sql/BaseModelSqlv2.ts
@@ -1776,6 +1776,9 @@ class BaseModelSqlv2 {
     // let cols = Object.keys(this.columns);
     for (let i = 0; i < this.model.columns.length; ++i) {
       const column = this.model.columns[i];
+      // skip validation if `validate` is undefined or false
+      if (!column?.meta?.validate) continue;
+
       const validate = column.getValidators();
       const cn = column.column_name;
       if (!validate) continue;
diff --git a/packages/nocodb/src/lib/noco-jobs/EmitteryJobsMgr.ts b/packages/nocodb/src/lib/noco-jobs/EmitteryJobsMgr.ts
new file mode 100644
index 0000000000..9b0291a566
--- /dev/null
+++ b/packages/nocodb/src/lib/noco-jobs/EmitteryJobsMgr.ts
@@ -0,0 +1,35 @@
+import JobsMgr from './JobsMgr';
+import Emittery from 'emittery';
+
+export default class EmitteryJobsMgr extends JobsMgr {
+  emitter: Emittery;
+
+  constructor() {
+    super();
+    this.emitter = new Emittery();
+  }
+
+  add(jobName: string, payload: any): Promise<any> {
+    return this.emitter.emit(jobName, payload);
+  }
+
+  addJobWorker(
+    jobName: string,
+    workerFn: (
+      payload: any,
+      progressCbk?: (payload: any, msg?: string) => void
+    ) => void
+  ) {
+    this.emitter.on(jobName, async payload => {
+      try {
+        await workerFn(payload, msg =>
+          this.invokeProgressCbks(jobName, payload, msg)
+        );
+        await this.invokeSuccessCbks(jobName, payload);
+      } catch (e) {
+        console.log(e);
+        await this.invokeFailureCbks(jobName, payload, e);
+      }
+    });
+  }
+}
diff --git a/packages/nocodb/src/lib/noco-jobs/JobsMgr.ts b/packages/nocodb/src/lib/noco-jobs/JobsMgr.ts
new file mode 100644
index 0000000000..13395ae5a4
--- /dev/null
+++ b/packages/nocodb/src/lib/noco-jobs/JobsMgr.ts
@@ -0,0 +1,65 @@
+export default abstract class JobsMgr {
+  protected successCbks: Array<{
+    [jobName: string]: (payload: any) => void;
+  }> = [];
+  protected failureCbks: Array<{
+    [jobName: string]: (payload: any, error: Error) => void;
+  }> = [];
+  protected progressCbks: Array<{
+    [jobName: string]: (payload: any, msg?: string) => void;
+  }> = [];
+
+  public abstract add<T>(jobName: string, payload: T): Promise<any>;
+
+  public abstract addJobWorker(
+    jobName: string,
+    workerFn: (
+      payload: any,
+      progressCbk?: (payload: any, msg?: string) => void
+    ) => void,
+    options?: {
+      onSuccess?: (payload: any) => void;
+      onFailure?: (payload: any, msg: string) => void;
+      onProgress?: (payload: any, msgOrData: any) => void;
+    }
+  );
+
+  addSuccessCbk(jobName: string, cbk: (payload: any) => void) {
+    this.successCbks[jobName] = this.successCbks[jobName] || [];
+    this.successCbks[jobName].push(cbk);
+  }
+
+  addFailureCbk(jobName: string, cbk: (payload: any, msg: string) => void) {
+    this.failureCbks[jobName] = this.failureCbks[jobName] || [];
+    this.failureCbks[jobName].push(cbk);
+  }
+  addProgressCbk(
+    jobName: string,
+    cbk: (payload: any, progress: string) => void
+  ) {
+    this.progressCbks[jobName] = this.progressCbks[jobName] || [];
+    this.progressCbks[jobName].push(cbk);
+  }
+
+  protected async invokeSuccessCbks(jobName: string, payload: any) {
+    await Promise.all(this.successCbks?.[jobName]?.map(cb => cb(payload)));
+  }
+  protected async invokeFailureCbks(
+    jobName: string,
+    payload: any,
+    error?: Error
+  ) {
+    await Promise.all(
+      this.failureCbks?.[jobName]?.map(cb => cb(payload, error))
+    );
+  }
+  protected async invokeProgressCbks(
+    jobName: string,
+    payload: any,
+    msg?: string
+  ) {
+    await Promise.all(
+      this.progressCbks?.[jobName]?.map(cb => cb(payload, msg))
+    );
+  }
+}
diff --git a/packages/nocodb/src/lib/noco-jobs/NocoJobs.ts b/packages/nocodb/src/lib/noco-jobs/NocoJobs.ts
new file mode 100644
index 0000000000..dd19d5c1f9
--- /dev/null
+++ b/packages/nocodb/src/lib/noco-jobs/NocoJobs.ts
@@ -0,0 +1,20 @@
+import JobsMgr from './JobsMgr';
+import EmitteryJobsMgr from './EmitteryJobsMgr';
+import RedisJobsMgr from './RedisJobsMgr';
+
+export default class NocoJobs {
+  private static client: JobsMgr;
+
+  private static init() {
+    if (process.env.NC_REDIS_URL) {
+      this.client = new RedisJobsMgr(process.env.NC_REDIS_URL);
+    } else {
+      this.client = new EmitteryJobsMgr();
+    }
+  }
+
+  public static get jobsMgr(): JobsMgr {
+    if (!this.client) this.init();
+    return this.client;
+  }
+}
diff --git a/packages/nocodb/src/lib/noco-jobs/RedisJobsMgr.ts b/packages/nocodb/src/lib/noco-jobs/RedisJobsMgr.ts
new file mode 100644
index 0000000000..bc2551bbd9
--- /dev/null
+++ b/packages/nocodb/src/lib/noco-jobs/RedisJobsMgr.ts
@@ -0,0 +1,54 @@
+import { Queue, Worker } from 'bullmq';
+import Redis from 'ioredis';
+import JobsMgr from './JobsMgr';
+
+export default class RedisJobsMgr extends JobsMgr {
+  queue: { [jobName: string]: Queue };
+  workers: { [jobName: string]: Worker };
+  connection: Redis;
+
+  constructor(config: any) {
+    super();
+    this.queue = {};
+    this.workers = {};
+    this.connection = new Redis(config);
+  }
+
+  async add(
+    jobName: string,
+    payload: any
+    // options?: {
+    //   onSuccess?: (payload: any) => void;
+    //   onFailure?: (payload: any, msg: string) => void;
+    //   onProgress?: (payload: any, msgOrData: any) => void;
+    // }
+  ): Promise<any> {
+    this.queue[jobName] =
+      this.queue[jobName] ||
+      new Queue(jobName, { connection: this.connection });
+    this.queue[jobName].add(jobName, payload);
+  }
+
+  addJobWorker(
+    jobName: string,
+    workerFn: (
+      payload: any,
+      progressCbk?: (payload: any, msg?: string) => void
+    ) => void
+  ) {
+    this.workers[jobName] = new Worker(
+      jobName,
+      async payload => {
+        try {
+          await workerFn(payload.data, (...args) =>
+            this.invokeProgressCbks(jobName, ...args)
+          );
+          await this.invokeFailureCbks(jobName, payload.data);
+        } catch (e) {
+          await this.invokeFailureCbks(jobName, payload.data);
+        }
+      },
+      { connection: this.connection }
+    );
+  }
+}
diff --git a/packages/nocodb/src/lib/noco-models/Column.ts b/packages/nocodb/src/lib/noco-models/Column.ts
index 3c3de4f6b6..63d942599f 100644
--- a/packages/nocodb/src/lib/noco-models/Column.ts
+++ b/packages/nocodb/src/lib/noco-models/Column.ts
@@ -56,6 +56,7 @@ export default class Column<T = any> implements ColumnType {
   public order: number;
 
   public validate: any;
+  public meta: any;
 
   constructor(data: Partial<ColumnType | Column>) {
     Object.assign(this, data);
@@ -106,7 +107,11 @@ export default class Column<T = any> implements ColumnType {
       order: column.order,
       project_id: column.project_id,
       base_id: column.base_id,
-      system: column.system
+      system: column.system,
+      meta:
+        column.meta && typeof column.meta === 'object'
+          ? JSON.stringify(column.meta)
+          : column.meta
     };
 
     if (column.validate) {
@@ -375,6 +380,17 @@ export default class Column<T = any> implements ColumnType {
           order: 'asc'
         }
       });
+
+      columnsList.forEach(column => {
+        if (column.meta && typeof column.meta === 'string') {
+          try {
+            column.meta = JSON.parse(column.meta);
+          } catch {
+            column.meta = {};
+          }
+        }
+      });
+
       await NocoCache.setList(CacheScope.COLUMN, [fk_model_id], columnsList);
     }
     columnsList.sort(
@@ -452,6 +468,11 @@ export default class Column<T = any> implements ColumnType {
         MetaTable.COLUMNS,
         colId
       );
+      try {
+        colData.meta = JSON.parse(colData.meta);
+      } catch {
+        colData.meta = {};
+      }
       await NocoCache.set(`${CacheScope.COLUMN}:${colId}`, colData);
     }
     if (colData) {
@@ -783,7 +804,8 @@ export default class Column<T = any> implements ColumnType {
       au: column.au,
       pv: column.pv,
       system: column.system,
-      validate: null
+      validate: null,
+      meta: column.meta
     };
 
     if (column.validate) {
@@ -801,7 +823,19 @@ export default class Column<T = any> implements ColumnType {
       await NocoCache.set(key, o);
     }
     // set meta
-    await ncMeta.metaUpdate(null, null, MetaTable.COLUMNS, updateObj, colId);
+    await ncMeta.metaUpdate(
+      null,
+      null,
+      MetaTable.COLUMNS,
+      {
+        ...updateObj,
+        meta:
+          updateObj.meta && typeof updateObj.meta === 'object'
+            ? JSON.stringify(updateObj.meta)
+            : updateObj.meta
+      },
+      colId
+    );
     await this.insertColOption(column, colId, ncMeta);
   }
 
diff --git a/packages/nocodb/src/lib/noco-models/Project.ts b/packages/nocodb/src/lib/noco-models/Project.ts
index 25d8485e43..20009b3148 100644
--- a/packages/nocodb/src/lib/noco-models/Project.ts
+++ b/packages/nocodb/src/lib/noco-models/Project.ts
@@ -152,14 +152,14 @@ export default class Project implements ProjectType {
         deleted: false
       });
       await NocoCache.set(`${CacheScope.PROJECT}:${projectId}`, projectData);
-      if (projectData.uuid) {
+      if (projectData?.uuid) {
         await NocoCache.set(
           `${CacheScope.PROJECT}:${projectData.uuid}`,
           projectId
         );
       }
     } else {
-      if (projectData.deleted) {
+      if (projectData?.deleted) {
         projectData = null;
       }
     }
diff --git a/packages/nocodb/src/lib/noco-models/SyncLogs.ts b/packages/nocodb/src/lib/noco-models/SyncLogs.ts
new file mode 100644
index 0000000000..53a5b805bc
--- /dev/null
+++ b/packages/nocodb/src/lib/noco-models/SyncLogs.ts
@@ -0,0 +1,57 @@
+import Noco from '../noco/Noco';
+import { MetaTable } from '../utils/globals';
+
+export default class SyncLogs {
+  id?: string;
+  project_id?: string;
+  fk_sync_source_id?: string;
+  time_taken?: string;
+  status?: string;
+  status_details?: string;
+
+  constructor(syncLog: Partial<SyncLogs>) {
+    Object.assign(this, syncLog);
+  }
+
+  static async list(projectId: string, ncMeta = Noco.ncMeta) {
+    const syncLogs = await ncMeta.metaList(null, null, MetaTable.SYNC_LOGS, {
+      condition: {
+        project_id: projectId
+      },
+      orderBy: {
+        created_at: 'asc'
+      }
+    });
+    return syncLogs?.map(h => new SyncLogs(h));
+  }
+
+  public static async insert(
+    syncLog: Partial<
+      SyncLogs & {
+        created_at?;
+        updated_at?;
+      }
+    >,
+    ncMeta = Noco.ncMeta
+  ) {
+    const insertObj = {
+      project_id: syncLog?.project_id,
+      fk_sync_source_id: syncLog?.fk_sync_source_id,
+      time_taken: syncLog?.time_taken,
+      status: syncLog?.status,
+      status_details: syncLog?.status_details
+    };
+
+    const { id } = await ncMeta.metaInsert2(
+      null,
+      null,
+      MetaTable.SYNC_LOGS,
+      insertObj
+    );
+    return new SyncLogs({ ...insertObj, id });
+  }
+
+  static async delete(syncLogId: any, ncMeta = Noco.ncMeta) {
+    return await ncMeta.metaDelete(null, null, MetaTable.SYNC_LOGS, syncLogId);
+  }
+}
diff --git a/packages/nocodb/src/lib/noco-models/SyncSource.ts b/packages/nocodb/src/lib/noco-models/SyncSource.ts
new file mode 100644
index 0000000000..254abbc40e
--- /dev/null
+++ b/packages/nocodb/src/lib/noco-models/SyncSource.ts
@@ -0,0 +1,135 @@
+import Noco from '../noco/Noco';
+import { MetaTable } from '../utils/globals';
+import extractProps from '../noco/meta/helpers/extractProps';
+import User from './User';
+
+export default class SyncSource {
+  id?: string;
+  title?: string;
+  type?: string;
+  details?: any;
+  deleted?: boolean;
+  order?: number;
+  project_id?: string;
+  fk_user_id?: string;
+
+  constructor(syncSource: Partial<SyncSource>) {
+    Object.assign(this, syncSource);
+  }
+
+  public getUser(ncMeta = Noco.ncMeta) {
+    return User.get(this.fk_user_id, ncMeta);
+  }
+
+  public static async get(syncSourceId: string, ncMeta = Noco.ncMeta) {
+    const syncSource = await ncMeta.metaGet2(
+      null,
+      null,
+      MetaTable.SYNC_SOURCE,
+      syncSourceId
+    );
+    if (syncSource.details && typeof syncSource.details === 'string') {
+      try {
+        syncSource.details = JSON.parse(syncSource.details);
+      } catch {}
+    }
+    return syncSource && new SyncSource(syncSource);
+  }
+
+  static async list(projectId: string, ncMeta = Noco.ncMeta) {
+    const syncSources = await ncMeta.metaList(
+      null,
+      null,
+      MetaTable.SYNC_SOURCE,
+      {
+        condition: {
+          project_id: projectId
+        },
+        orderBy: {
+          created_at: 'asc'
+        }
+      }
+    );
+
+    for (const syncSource of syncSources) {
+      if (syncSource.details && typeof syncSource.details === 'string') {
+        try {
+          syncSource.details = JSON.parse(syncSource.details);
+        } catch {}
+      }
+    }
+    return syncSources?.map(h => new SyncSource(h));
+  }
+
+  public static async insert(
+    syncSource: Partial<
+      SyncSource & {
+        created_at?;
+        updated_at?;
+      }
+    >,
+    ncMeta = Noco.ncMeta
+  ) {
+    const insertObj = {
+      id: syncSource?.id,
+      title: syncSource?.title,
+      type: syncSource?.type,
+      details: syncSource?.details,
+      project_id: syncSource?.project_id,
+      fk_user_id: syncSource?.fk_user_id
+    };
+
+    if (insertObj.details && typeof insertObj.details === 'object') {
+      insertObj.details = JSON.stringify(insertObj.details);
+    }
+
+    const { id } = await ncMeta.metaInsert2(
+      null,
+      null,
+      MetaTable.SYNC_SOURCE,
+      insertObj
+    );
+
+    return this.get(id, ncMeta);
+  }
+
+  public static async update(
+    syncSourceId: string,
+    syncSource: Partial<SyncSource>,
+    ncMeta = Noco.ncMeta
+  ) {
+    const updateObj = extractProps(syncSource, [
+      'id',
+      'title',
+      'type',
+      'details',
+      'deleted',
+      'order',
+      'project_id'
+    ]);
+
+    if (updateObj.details && typeof updateObj.details === 'object') {
+      updateObj.details = JSON.stringify(updateObj.details);
+    }
+
+    // set meta
+    await ncMeta.metaUpdate(
+      null,
+      null,
+      MetaTable.SYNC_SOURCE,
+      updateObj,
+      syncSourceId
+    );
+
+    return this.get(syncSourceId, ncMeta);
+  }
+
+  static async delete(syncSourceId: any, ncMeta = Noco.ncMeta) {
+    return await ncMeta.metaDelete(
+      null,
+      null,
+      MetaTable.SYNC_SOURCE,
+      syncSourceId
+    );
+  }
+}
diff --git a/packages/nocodb/src/lib/noco/common/XcMigrationSourcev2.ts b/packages/nocodb/src/lib/noco/common/XcMigrationSourcev2.ts
index 25df4729f9..63405c2084 100644
--- a/packages/nocodb/src/lib/noco/common/XcMigrationSourcev2.ts
+++ b/packages/nocodb/src/lib/noco/common/XcMigrationSourcev2.ts
@@ -1,5 +1,8 @@
 import * as nc_011 from '../migrationsv2/nc_011';
 import * as nc_012_alter_column_data_types from '../migrationsv2/nc_012_alter_column_data_types';
+import * as nc_013_sync_source from '../migrationsv2/nc_013_sync_source';
+import * as nc_014_alter_column_data_types from '../migrationsv2/nc_014_alter_column_data_types';
+import * as nc_015_add_meta_col_in_column_table from '../migrationsv2/nc_015_add_meta_col_in_column_table';
 
 // Create a custom migration source class
 export default class XcMigrationSourcev2 {
@@ -8,7 +11,13 @@ export default class XcMigrationSourcev2 {
   // arguments to getMigrationName and getMigration
   public getMigrations(): Promise<any> {
     // In this example we are just returning migration names
-    return Promise.resolve(['nc_011', 'nc_012_alter_column_data_types']);
+    return Promise.resolve([
+      'nc_011',
+      'nc_012_alter_column_data_types',
+      'nc_013_sync_source',
+      'nc_014_alter_column_data_types',
+      'nc_015_add_meta_col_in_column_table'
+    ]);
   }
 
   public getMigrationName(migration): string {
@@ -21,6 +30,12 @@ export default class XcMigrationSourcev2 {
         return nc_011;
       case 'nc_012_alter_column_data_types':
         return nc_012_alter_column_data_types;
+      case 'nc_013_sync_source':
+        return nc_013_sync_source;
+      case 'nc_014_alter_column_data_types':
+        return nc_014_alter_column_data_types;
+      case 'nc_015_add_meta_col_in_column_table':
+        return nc_015_add_meta_col_in_column_table;
     }
   }
 }
diff --git a/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts b/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
index 5fa391d0c9..1dbd938dea 100644
--- a/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
+++ b/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
@@ -1686,7 +1686,7 @@ export default class NcMetaMgr {
           postListenerCb = async () => {
             if (args?.args?.template) {
               Tele.emit('evt', {
-                evt_type: args.args?.excelImport
+                evt_type: args.args?.quickImport
                   ? 'project:created:fromExcel'
                   : 'project:created:fromTemplate',
                 xcdb: true
diff --git a/packages/nocodb/src/lib/noco/meta/api/index.ts b/packages/nocodb/src/lib/noco/meta/api/index.ts
index adf0ca248f..25f06395bf 100644
--- a/packages/nocodb/src/lib/noco/meta/api/index.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/index.ts
@@ -41,11 +41,15 @@ import {
   publicMetaApis
 } from './publicApis';
 import { Tele } from 'nc-help';
-import { Server } from 'socket.io';
+import { Server, Socket } from 'socket.io';
 import passport from 'passport';
 
 import crypto from 'crypto';
 import swaggerApis from './swagger/swaggerApis';
+import importApis from './sync/importApis';
+import syncSourceApis from './sync/syncSourceApis';
+
+const clients: { [id: string]: Socket } = {};
 
 export default function(router: Router, server) {
   initStrategies(router);
@@ -85,6 +89,7 @@ export default function(router: Router, server) {
   router.use(apiTokenApis);
   router.use(hookFilterApis);
   router.use(swaggerApis);
+  router.use(syncSourceApis);
 
   userApis(router);
 
@@ -109,6 +114,7 @@ export default function(router: Router, server) {
       }
     )(socket.handshake, {}, next);
   }).on('connection', socket => {
+    clients[socket.id] = socket;
     const id = getHash(
       (process.env.NC_SERVER_UUID || Tele.id) +
         (socket?.handshake as any)?.user?.id
@@ -121,6 +127,8 @@ export default function(router: Router, server) {
       Tele.event({ ...args, id });
     });
   });
+
+  importApis(router, clients);
 }
 
 function getHash(str) {
diff --git a/packages/nocodb/src/lib/noco/meta/api/sync/helpers/NocoSyncDestAdapter.ts b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/NocoSyncDestAdapter.ts
new file mode 100644
index 0000000000..8af4a493c5
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/NocoSyncDestAdapter.ts
@@ -0,0 +1,6 @@
+export abstract class NocoSyncSourceAdapter {
+  public abstract init(): Promise<void>;
+  public abstract destProjectWrite(): Promise<any>;
+  public abstract destSchemaWrite(): Promise<any>;
+  public abstract destDataWrite(): Promise<any>;
+}
diff --git a/packages/nocodb/src/lib/noco/meta/api/sync/helpers/NocoSyncSourceAdapter.ts b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/NocoSyncSourceAdapter.ts
new file mode 100644
index 0000000000..a419d1c24d
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/NocoSyncSourceAdapter.ts
@@ -0,0 +1,7 @@
+export abstract class NocoSyncSourceAdapter {
+  public abstract init(): Promise<void>;
+  public abstract srcSchemaGet(): Promise<any>;
+  public abstract srcDataLoad(): Promise<any>;
+  public abstract srcDataListen(): Promise<any>;
+  public abstract srcDataPoll(): Promise<any>;
+}
diff --git a/packages/nocodb/src/lib/noco/meta/api/sync/helpers/fetchAT.ts b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/fetchAT.ts
new file mode 100644
index 0000000000..4da2497800
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/fetchAT.ts
@@ -0,0 +1,170 @@
+const axios = require('axios').default;
+
+var info : any = {
+  initialized: false
+};
+
+async function initialize(shareId) {
+  info.cookie = "";
+  let url = `https://airtable.com/${shareId}`
+
+  try {
+    const hreq = await axios.get(url, {
+      "headers": {
+        "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
+        "accept-language": "en-US,en;q=0.9",
+        "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"100\", \"Google Chrome\";v=\"100\"",
+        "sec-ch-ua-mobile": "?0",
+        "sec-ch-ua-platform": "\"Linux\"",
+        "sec-fetch-dest": "document",
+        "sec-fetch-mode": "navigate",
+        "sec-fetch-site": "none",
+        "sec-fetch-user": "?1",
+        "upgrade-insecure-requests": "1",
+        "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36"
+      },
+      "referrerPolicy": "strict-origin-when-cross-origin",
+      "body": null,
+      "method": "GET"
+    })
+    .then(response => {
+      for(const ck of response.headers['set-cookie']) {
+        info.cookie += ck.split(';')[0] + '; '
+      }
+      return response.data
+    })
+    
+    info.headers = JSON.parse(hreq.match(/(?<=var headers =)(.*)(?=;)/g)[0].trim())
+    info.link = unicodeToChar(hreq.match(/(?<=fetch\(")(.*)(?=")/g)[0].trim())
+    info.baseInfo = decodeURIComponent(info.link).match(/{(.*)}/g)[0].split('&').reduce((result, el) => {
+      try {
+        return Object.assign(result, JSON.parse((el.includes('=')?el.split('=')[1]:el)))
+      } catch(e) {
+        if(el.includes('=')) {
+          return Object.assign(result, { [el.split('=')[0]]: el.split('=')[1]})
+        }
+      }
+    }, {})
+    info.baseId = info.baseInfo.applicationId;
+    info.initialized = true;
+  } catch (e) {
+    console.log(e);
+    info.initialized = false;
+  }
+}
+
+async function read() {
+  if (info.initialized) {
+    const resreq = await axios("https://airtable.com" + info.link, {
+      "headers": {
+        "accept": "*/*",
+        "accept-language": "en-US,en;q=0.9",
+        "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"100\", \"Google Chrome\";v=\"100\"",
+        "sec-ch-ua-mobile": "?0",
+        "sec-ch-ua-platform": "\"Linux\"",
+        "sec-fetch-dest": "empty",
+        "sec-fetch-mode": "cors",
+        "sec-fetch-site": "same-origin",
+        "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36",
+        "x-time-zone": "Europe/Berlin",
+        "cookie": info.cookie,
+        ...info.headers
+      },
+      "referrerPolicy": "no-referrer",
+      "body": null,
+      "method": "GET"
+    })
+    .then(response => {
+      return response.data
+    })
+    .catch(() => {
+      throw "Error while fetching"
+    })
+
+    return {schema: resreq.data, baseId: info.baseId, baseInfo: info.baseInfo}
+  } else {
+    throw "Please initialize first!"
+  }
+}
+
+async function readView(viewId) {
+  if (info.initialized) {
+    const resreq = await axios(`https://airtable.com/v0.3/view/${viewId}/readData?` + `stringifiedObjectParams=${
+      encodeURIComponent('{}')}&requestId=${info.baseInfo.requestId}&accessPolicy=${encodeURIComponent(JSON.stringify({allowedActions: info.baseInfo.allowedActions, shareId: info.baseInfo.shareId, applicationId: info.baseInfo.applicationId, generationNumber: info.baseInfo.generationNumber, expires: info.baseInfo.expires, signature: info.baseInfo.signature}))}`, {
+      "headers": {
+        "accept": "*/*",
+        "accept-language": "en-US,en;q=0.9",
+        "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"100\", \"Google Chrome\";v=\"100\"",
+        "sec-ch-ua-mobile": "?0",
+        "sec-ch-ua-platform": "\"Linux\"",
+        "sec-fetch-dest": "empty",
+        "sec-fetch-mode": "cors",
+        "sec-fetch-site": "same-origin",
+        "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36",
+        "x-time-zone": "Europe/Berlin",
+        "cookie": info.cookie,
+        ...info.headers
+      },
+      "referrerPolicy": "no-referrer",
+      "body": null,
+      "method": "GET"
+    })
+    .then(response => {
+      return response.data
+    })
+    .catch(() => {
+      throw "Error while fetching"
+    })
+    return {view: resreq.data}
+  } else {
+    throw "Please initialize first!"
+  }
+}
+
+async function readTemplate(templateId) {
+  if (!info.initialized) {
+    await initialize('shrO8aYf3ybwSdDKn');
+  }
+  const resreq = await axios(`https://www.airtable.com/v0.3/exploreApplications/${templateId}`, {
+    "headers": {
+      "accept": "*/*",
+      "accept-language": "en-US,en;q=0.9",
+      "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"100\", \"Google Chrome\";v=\"100\"",
+      "sec-ch-ua-mobile": "?0",
+      "sec-ch-ua-platform": "\"Linux\"",
+      "sec-fetch-dest": "empty",
+      "sec-fetch-mode": "cors",
+      "sec-fetch-site": "same-origin",
+      "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36",
+      "x-time-zone": "Europe/Berlin",
+      "cookie": info.cookie,
+      ...info.headers
+    },
+    "referrer": "https://www.airtable.com/",
+    "referrerPolicy": "same-origin",
+    "body": null,
+    "method": "GET",
+    "mode": "cors",
+    "credentials": "include"
+  })
+  .then(response => {
+    return response.data
+  })
+  .catch(() => {
+    throw "Error while fetching"
+  })
+  return {template: resreq}
+}
+
+function unicodeToChar(text) {
+  return text.replace(/\\u[\dA-F]{4}/gi, function(match) {
+    return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
+  });
+}
+
+export default {
+  initialize,
+  read,
+  readView,
+  readTemplate
+}
\ No newline at end of file
diff --git a/packages/nocodb/src/lib/noco/meta/api/sync/helpers/job.ts b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/job.ts
new file mode 100644
index 0000000000..99557902ad
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/job.ts
@@ -0,0 +1,2014 @@
+import FetchAT from './fetchAT';
+import { UITypes } from 'nocodb-sdk';
+// import * as sMap from './syncMap';
+import FormData from 'form-data';
+
+import { Api } from 'nocodb-sdk';
+
+import axios from 'axios';
+import Airtable from 'airtable';
+import jsonfile from 'jsonfile';
+import hash from 'object-hash';
+
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+
+export default async (
+  syncDB: AirtableSyncConfig,
+  progress: (msg: string) => void
+) => {
+  const sMap = {
+    mapTbl: {},
+
+    // static mapping records between aTblId && ncId
+    addToMappingTbl(aTblId, ncId, ncName, parent?) {
+      this.mapTbl[aTblId] = {
+        ncId: ncId,
+        ncParent: parent,
+        // name added to assist in quick debug
+        ncName: ncName
+      };
+    },
+
+    // get NcID from airtable ID
+    getNcIdFromAtId(aId) {
+      return this.mapTbl[aId]?.ncId;
+    },
+
+    // get nc Parent from airtable ID
+    getNcParentFromAtId(aId) {
+      return this.mapTbl[aId]?.ncParent;
+    },
+
+    // get nc-title from airtable ID
+    getNcNameFromAtId(aId) {
+      return this.mapTbl[aId]?.ncName;
+    }
+  };
+
+  let base, baseId;
+  const start = Date.now();
+  const enableErrorLogs = false;
+  const process_aTblData = true;
+  const generate_migrationStats = true;
+  const debugMode = true;
+  let api: Api<any>;
+  let g_aTblSchema = [];
+  let ncCreatedProjectSchema: any = {};
+  const ncLinkMappingTable: any[] = [];
+  const aTblDataLinks: any[] = [];
+  const nestedLookupTbl: any[] = [];
+  const nestedRollupTbl: any[] = [];
+  const runTimeCounters = {
+    sort: 0,
+    filter: 0,
+    view: {
+      total: 0,
+      grid: 0,
+      gallery: 0,
+      form: 0
+    },
+    fetchAt: {
+      count: 0,
+      time: 0
+    },
+    columnNotMigrated: {
+      count: 0,
+      log: []
+    }
+  };
+
+  function addToSkipColumnLog(tbl, col, type, reason?) {
+    runTimeCounters.columnNotMigrated.count++;
+    runTimeCounters.columnNotMigrated.log.push(
+      `tn[${tbl}] cn[${col}] type[${type}] :: ${reason}`
+    );
+  }
+
+  let syncLog = _log => {
+    // console.log(log)
+  };
+
+  // mapping table
+  //
+
+  async function getAtableSchema(sDB) {
+    const start = Date.now();
+    if (sDB.shareId.startsWith('exp')) {
+      const template = await FetchAT.readTemplate(sDB.shareId);
+      await FetchAT.initialize(template.template.exploreApplication.shareId);
+    } else {
+      await FetchAT.initialize(sDB.shareId);
+    }
+    const ft = await FetchAT.read();
+    const duration = Date.now() - start;
+    runTimeCounters.fetchAt.count++;
+    runTimeCounters.fetchAt.time += duration;
+
+    const file = ft.schema;
+    baseId = ft.baseId;
+    base = new Airtable({ apiKey: sDB.apiKey }).base(baseId);
+    // store copy of atbl schema globally
+    g_aTblSchema = file.tableSchemas;
+
+    if (debugMode) jsonfile.writeFileSync('aTblSchema.json', ft, { spaces: 2 });
+
+    return file;
+  }
+
+  async function getViewData(viewId) {
+    const start = Date.now();
+    const ft = await FetchAT.readView(viewId);
+    const duration = Date.now() - start;
+    runTimeCounters.fetchAt.count++;
+    runTimeCounters.fetchAt.time += duration;
+
+    if (debugMode) jsonfile.writeFileSync(`${viewId}.json`, ft, { spaces: 2 });
+    return ft.view;
+  }
+
+  // base mapping table
+  const aTblNcTypeMap = {
+    foreignKey: UITypes.LinkToAnotherRecord,
+    text: UITypes.SingleLineText,
+    multilineText: UITypes.LongText,
+    multipleAttachment: UITypes.Attachment,
+    checkbox: UITypes.Checkbox,
+    multiSelect: UITypes.MultiSelect,
+    select: UITypes.SingleSelect,
+    collaborator: UITypes.Collaborator,
+    multiCollaborator: UITypes.Collaborator,
+    date: UITypes.Date,
+    // kludge: phone: UITypes.PhoneNumber,
+    phone: UITypes.SingleLineText,
+    number: UITypes.Number,
+    rating: UITypes.Rating,
+    formula: UITypes.Formula,
+    rollup: UITypes.Rollup,
+    count: UITypes.Count,
+    lookup: UITypes.Lookup,
+    autoNumber: UITypes.AutoNumber,
+    barcode: UITypes.Barcode,
+    button: UITypes.Button
+  };
+
+  //-----------------------------------------------------------------------------
+  // aTbl helper routines
+  //
+
+  function nc_sanitizeName(name) {
+    // knex complains use of '?' in field name
+    // good to replace all special characters by _ in one go
+
+    // https://stackoverflow.com/questions/18862256/how-to-detect-emoji-using-javascript
+    const regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;
+
+    const col_name = name
+      .replace(/\?/g, '_')
+      .replace('.', '_')
+      .replace(regex, '_')
+      .trim();
+
+    return col_name;
+  }
+
+  function nc_getSanitizedColumnName(table, name) {
+    const col_name = nc_sanitizeName(name);
+
+    // check if already a column exists with same name?
+    const duplicateColumn = table.columns.find(x => x.title === name.trim());
+    if (duplicateColumn) {
+      if (enableErrorLogs) console.log(`## Duplicate ${name.trim()}`);
+    }
+
+    return {
+      // kludge: error observed in Nc with space around column-name
+      title: name.trim() + (duplicateColumn ? '_2' : ''),
+      column_name: col_name + (duplicateColumn ? '_2' : '')
+    };
+  }
+
+  // aTbl: retrieve table name from table ID
+  //
+  function aTbl_getTableName(tblId) {
+    const sheetObj = g_aTblSchema.find(tbl => tbl.id === tblId);
+    return {
+      tn: sheetObj.name
+    };
+  }
+
+  const ncSchema = {
+    tables: [],
+    tablesById: {}
+  };
+
+  // aTbl: retrieve column name from column ID
+  //
+  function aTbl_getColumnName(colId): any {
+    for (let i = 0; i < g_aTblSchema.length; i++) {
+      const sheetObj = g_aTblSchema[i];
+      const column = sheetObj.columns.find(col => col.id === colId);
+      if (column !== undefined)
+        return {
+          tn: sheetObj.name,
+          cn: column.name
+        };
+    }
+  }
+
+  // nc dump schema
+  //
+  // @ts-ignore
+  async function nc_DumpTableSchema() {
+    console.log('[');
+    const ncTblList = await api.dbTable.list(ncCreatedProjectSchema.id);
+    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));
+      console.log(',');
+    }
+    console.log(']');
+  }
+
+  // retrieve nc column schema from using aTbl field ID as reference
+  //
+  async function nc_getColumnSchema(aTblFieldId) {
+    // let ncTblList = await api.dbTable.list(ncCreatedProjectSchema.id);
+    // let aTblField = aTbl_getColumnName(aTblFieldId);
+    // let ncTblId = ncTblList.list.filter(x => x.title === aTblField.tn)[0].id;
+    // let ncTbl = await api.dbTable.read(ncTblId);
+    // let ncCol = ncTbl.columns.find(x => x.title === aTblField.cn);
+    // return ncCol;
+
+    const ncTblId = sMap.getNcParentFromAtId(aTblFieldId);
+    const ncColId = sMap.getNcIdFromAtId(aTblFieldId);
+
+    // not migrated column, skip
+    if (ncColId === undefined || ncTblId === undefined) return 0;
+
+    const ncCol = ncSchema.tablesById[ncTblId].columns.find(
+      x => x.id === ncColId
+    );
+    return ncCol;
+  }
+
+  // retrieve nc table schema using table name
+  // optimize: create a look-up table & re-use information
+  //
+  async function nc_getTableSchema(tableName) {
+    // let ncTblList = await api.dbTable.list(ncCreatedProjectSchema.id);
+    // let ncTblId = ncTblList.list.filter(x => x.title === tableName)[0].id;
+    // let ncTbl = await api.dbTable.read(ncTblId);
+    // return ncTbl;
+
+    return ncSchema.tables.find(x => x.title === tableName);
+  }
+
+  // delete project if already exists
+  async function init({
+    projectName
+  }: {
+    projectName?: string;
+    projectId?: string;
+  }) {
+    // delete 'sample' project if already exists
+    const x = await api.project.list();
+
+    const sampleProj = x.list.find(a => a.title === projectName);
+    if (sampleProj) {
+      await api.project.delete(sampleProj.id);
+    }
+    syncLog('Init');
+  }
+
+  // map UIDT
+  //
+  function getNocoType(col) {
+    // start with default map
+    let ncType = aTblNcTypeMap[col.type];
+
+    // types email & url are marked as text
+    // types currency & percent, duration are marked as number
+    // types createTime & modifiedTime are marked as formula
+
+    switch (col.type) {
+      case 'text':
+        if (col.typeOptions?.validatorName === 'email') ncType = UITypes.Email;
+        else if (col.typeOptions?.validatorName === 'url') ncType = UITypes.URL;
+        break;
+
+      case 'number':
+        // kludge: currency validation error with decimal places
+        if (col.typeOptions?.format === 'percentV2') ncType = UITypes.Percent;
+        else if (col.typeOptions?.format === 'duration')
+          ncType = UITypes.Duration;
+        else if (col.typeOptions?.format === 'currency')
+          ncType = UITypes.Currency;
+        break;
+
+      case 'formula':
+        if (col.typeOptions?.formulaTextParsed === 'CREATED_TIME()')
+          ncType = UITypes.CreateTime;
+        else if (col.typeOptions?.formulaTextParsed === 'LAST_MODIFIED_TIME()')
+          ncType = UITypes.LastModifiedTime;
+        break;
+
+      case 'computation':
+        if (col.typeOptions?.resultType === 'collaborator')
+          ncType = UITypes.Collaborator;
+        break;
+
+      case 'date':
+        if (col.typeOptions?.isDateTime) ncType = UITypes.DateTime;
+        break;
+
+      // case 'barcode':
+      // case 'button':
+      //   ncType = UITypes.SingleLineText;
+      //   break;
+    }
+
+    return ncType;
+  }
+
+  // retrieve additional options associated with selected data types
+  //
+  function getNocoTypeOptions(col: any): any {
+    switch (col.type) {
+      case 'select':
+      case 'multiSelect': {
+        // prepare options list in CSV format
+        // note: NC doesn't allow comma's in options
+        //
+        const opt = [];
+        for (const [, value] of Object.entries(col.typeOptions.choices)) {
+          opt.push((value as any).name);
+          sMap.addToMappingTbl(
+            (value as any).id,
+            undefined,
+            (value as any).name
+          );
+        }
+        const csvOpt = "'" + opt.join("','") + "'";
+        return { type: 'select', data: csvOpt };
+      }
+      default:
+        return { type: undefined };
+    }
+  }
+
+  // convert to Nc schema (basic, excluding relations)
+  //
+  function tablesPrepare(tblSchema: any[]) {
+    const tables: any[] = [];
+
+    for (let i = 0; i < tblSchema.length; ++i) {
+      const table: any = {};
+
+      syncLog(`Preparing base schema (sans relations): ${tblSchema[i].name}`);
+      runTimeCounters.view.total += tblSchema[i].views.length;
+
+      // Enable to use aTbl identifiers as is: table.id = tblSchema[i].id;
+      table.title = tblSchema[i].name;
+      table.table_name = nc_sanitizeName(tblSchema[i].name);
+
+      // insert _aTbl_nc_rec_id of type ID by default
+      table.columns = [
+        {
+          title: '_aTbl_nc_rec_id',
+          column_name: '_aTbl_nc_rec_id',
+          // uidt: UITypes.ID
+          uidt: UITypes.SingleLineText,
+          pk: true,
+          // mysql additionally requires NOT-NULL to be explicitly set
+          rqd: true
+        },
+        {
+          title: '_aTbl_nc_rec_hash',
+          column_name: '_aTbl_nc_rec_hash',
+          uidt: UITypes.SingleLineText
+        }
+      ];
+
+      for (let j = 0; j < tblSchema[i].columns.length; j++) {
+        const col = tblSchema[i].columns[j];
+
+        // skip link, lookup, rollup fields in this iteration
+        if (['foreignKey', 'lookup', 'rollup'].includes(col.type)) {
+          continue;
+        }
+
+        // base column schema
+        const ncName: any = nc_getSanitizedColumnName(table, col.name);
+        const ncCol: any = {
+          // Enable to use aTbl identifiers as is: id: col.id,
+          title: ncName.title,
+          column_name: ncName.column_name,
+          uidt: getNocoType(col)
+        };
+
+        // not supported datatype: pure formula field
+        // allow formula based computed fields (created time/ modified time to go through)
+        if (ncCol.uidt === UITypes.Formula) {
+          addToSkipColumnLog(
+            tblSchema[i].name,
+            ncName.title,
+            col.type,
+            'column type not supported'
+          );
+          continue;
+        }
+
+        // populate cdf (column default value) if configured
+        if (col?.default) {
+          ncCol.cdf = col.default;
+        }
+
+        // additional column parameters when applicable
+        const colOptions = getNocoTypeOptions(col);
+
+        switch (colOptions.type) {
+          case 'select':
+            ncCol.dtxp = colOptions.data;
+            break;
+
+          case undefined:
+            break;
+        }
+        table.columns.push(ncCol);
+      }
+      tables.push(table);
+    }
+    return tables;
+  }
+
+  async function nocoCreateBaseSchema(aTblSchema) {
+    // base schema preparation: exclude
+    const tables: any[] = tablesPrepare(aTblSchema);
+
+    syncLog(`Total tables: ${tables.length} `);
+
+    // for each table schema, create nc table
+    for (let idx = 0; idx < tables.length; idx++) {
+      syncLog(
+        `[${idx + 1}/${tables.length}] Creating base table schema: ${
+          tables[idx].title
+        }`
+      );
+
+      syncLog(`NC API: dbTable.create ${tables[idx].title}`);
+      const table: any = await api.dbTable.create(
+        ncCreatedProjectSchema.id,
+        tables[idx]
+      );
+      updateNcTblSchema(table);
+
+      // update mapping table
+      await sMap.addToMappingTbl(aTblSchema[idx].id, table.id, table.title);
+      for (let colIdx = 0; colIdx < table.columns.length; colIdx++) {
+        const aId = aTblSchema[idx].columns.find(
+          x => x.name.trim() === table.columns[colIdx].title
+        )?.id;
+        if (aId)
+          await sMap.addToMappingTbl(
+            aId,
+            table.columns[colIdx].id,
+            table.columns[colIdx].title,
+            table.id
+          );
+      }
+
+      // update default view name- to match it to airtable view name
+      syncLog(`NC API: dbView.list ${table.id}`);
+      const view = await api.dbView.list(table.id);
+
+      syncLog(
+        `NC API: dbView.update ${view.list[0].id} ${aTblSchema[idx].views[0].name}`
+      );
+      const aTbl_grid = aTblSchema[idx].views.find(x => x.type === 'grid');
+      // @ts-ignore
+      const x = await api.dbView.update(view.list[0].id, {
+        title: aTbl_grid.name
+      });
+      await updateNcTblSchemaById(table.id);
+
+      await sMap.addToMappingTbl(
+        aTbl_grid.id,
+        table.views[0].id,
+        aTbl_grid.name,
+        table.id
+      );
+    }
+
+    // debug
+    // console.log(JSON.stringify(tables, null, 2));
+    return tables;
+  }
+
+  async function nocoCreateLinkToAnotherRecord(aTblSchema) {
+    // Link to another RECORD
+    for (let idx = 0; idx < aTblSchema.length; idx++) {
+      const aTblLinkColumns = aTblSchema[idx].columns.filter(
+        x => x.type === 'foreignKey'
+      );
+
+      // Link columns exist
+      //
+      if (aTblLinkColumns.length) {
+        for (let i = 0; i < aTblLinkColumns.length; i++) {
+          syncLog(
+            `[${idx + 1}/${aTblSchema.length}] Configuring Links :: [${i + 1}/${
+              aTblLinkColumns.length
+            }] ${aTblSchema[idx].name}`
+          );
+
+          // for self links, there is no symmetric column
+          {
+            const src = aTbl_getColumnName(aTblLinkColumns[i].id);
+            const dst = aTbl_getColumnName(
+              aTblLinkColumns[i].typeOptions?.symmetricColumnId
+            );
+            syncLog(
+              `    LTAR ${src.tn}:${src.cn} <${aTblLinkColumns[i].typeOptions.relationship}> ${dst?.tn}:${dst?.cn}`
+            );
+          }
+
+          // check if link already established?
+          if (!nc_isLinkExists(aTblLinkColumns[i].id)) {
+            // parent table ID
+            // let srcTableId = (await nc_getTableSchema(aTblSchema[idx].name)).id;
+            const srcTableId = sMap.getNcIdFromAtId(aTblSchema[idx].id);
+
+            // find child table name from symmetric column ID specified
+            // self link, symmetricColumnId field will be undefined
+            const childTable = aTbl_getColumnName(
+              aTblLinkColumns[i].typeOptions?.symmetricColumnId
+            );
+
+            // retrieve child table ID (nc) from table name
+            let childTableId = srcTableId;
+            if (childTable) {
+              childTableId = (await nc_getTableSchema(childTable.tn)).id;
+            }
+
+            // check if already a column exists with this name?
+            const srcTbl: any = await api.dbTable.read(srcTableId);
+
+            // create link
+            const ncName = nc_getSanitizedColumnName(
+              srcTbl,
+              aTblLinkColumns[i].name
+            );
+            const ncTbl: any = await api.dbTableColumn.create(srcTableId, {
+              uidt: UITypes.LinkToAnotherRecord,
+              title: ncName.title,
+              column_name: ncName.column_name,
+              parentId: srcTableId,
+              childId: childTableId,
+              type: 'mm'
+              // aTblLinkColumns[i].typeOptions.relationship === 'many'
+              //   ? 'mm'
+              //   : 'hm'
+            });
+            updateNcTblSchema(ncTbl);
+            syncLog(`NC API: dbTableColumn.create LinkToAnotherRecord`);
+
+            const ncId = ncTbl.columns.find(x => x.title === ncName.title)?.id;
+            await sMap.addToMappingTbl(
+              aTblLinkColumns[i].id,
+              ncId,
+              ncName.title,
+              ncTbl.id
+            );
+
+            // store link information in separate table
+            // this information will be helpful in identifying relation pair
+            const link = {
+              nc: {
+                title: aTblLinkColumns[i].name,
+                parentId: srcTableId,
+                childId: childTableId,
+                type: 'mm'
+              },
+              aTbl: {
+                tblId: aTblSchema[idx].id,
+                ...aTblLinkColumns[i]
+              }
+            };
+
+            ncLinkMappingTable.push(link);
+          } else {
+            // if link already exists, we need to change name of linked column
+            // to what is represented in airtable
+
+            // 1. extract associated link information from link table
+            // 2. retrieve parent table information (source)
+            // 3. using foreign parent & child column ID, find associated mapping in child table
+            // 4. update column name
+            const x = ncLinkMappingTable.findIndex(
+              x =>
+                x.aTbl.tblId ===
+                  aTblLinkColumns[i].typeOptions.foreignTableId &&
+                x.aTbl.id === aTblLinkColumns[i].typeOptions.symmetricColumnId
+            );
+
+            const childTblSchema: any = await api.dbTable.read(
+              ncLinkMappingTable[x].nc.childId
+            );
+            const parentTblSchema: any = await api.dbTable.read(
+              ncLinkMappingTable[x].nc.parentId
+            );
+
+            // fix me
+            // let childTblSchema = ncSchema.tablesById[ncLinkMappingTable[x].nc.childId]
+            // let parentTblSchema = ncSchema.tablesById[ncLinkMappingTable[x].nc.parentId]
+
+            let parentLinkColumn = parentTblSchema.columns.find(
+              col => col.title === ncLinkMappingTable[x].nc.title
+            );
+
+            // hack // fix me
+            if (parentLinkColumn.uidt !== 'LinkToAnotherRecord') {
+              parentLinkColumn = parentTblSchema.columns.find(
+                col => col.title === ncLinkMappingTable[x].nc.title + '_2'
+              );
+            }
+
+            let childLinkColumn: any = {};
+
+            if (parentLinkColumn.colOptions.type == 'hm') {
+              // for hm:
+              // mapping between child & parent column id is direct
+              //
+              childLinkColumn = childTblSchema.columns.find(
+                col =>
+                  col.uidt === UITypes.LinkToAnotherRecord &&
+                  col.colOptions.fk_child_column_id ===
+                    parentLinkColumn.colOptions.fk_child_column_id &&
+                  col.colOptions.fk_parent_column_id ===
+                    parentLinkColumn.colOptions.fk_parent_column_id
+              );
+            } else {
+              // for mm:
+              // mapping between child & parent column id is inverted
+              //
+              childLinkColumn = childTblSchema.columns.find(
+                col =>
+                  col.uidt === UITypes.LinkToAnotherRecord &&
+                  col.colOptions.fk_child_column_id ===
+                    parentLinkColumn.colOptions.fk_parent_column_id &&
+                  col.colOptions.fk_parent_column_id ===
+                    parentLinkColumn.colOptions.fk_child_column_id &&
+                  col.colOptions.fk_mm_model_id ===
+                    parentLinkColumn.colOptions.fk_mm_model_id
+              );
+            }
+
+            // check if already a column exists with this name?
+            const duplicate = childTblSchema.columns.find(
+              x => x.title === aTblLinkColumns[i].name
+            );
+            const suffix = duplicate ? '_2' : '';
+            if (duplicate)
+              if (enableErrorLogs)
+                console.log(`## Duplicate ${aTblLinkColumns[i].name}`);
+
+            // rename
+            // note that: current rename API requires us to send all parameters,
+            // not just title being renamed
+            const ncName = nc_getSanitizedColumnName(
+              childTblSchema,
+              aTblLinkColumns[i].name
+            );
+            const ncTbl: any = await api.dbTableColumn.update(
+              childLinkColumn.id,
+              {
+                ...childLinkColumn,
+                title: ncName.title,
+                column_name: ncName.column_name
+              }
+            );
+            updateNcTblSchema(ncTbl);
+
+            const ncId = ncTbl.columns.find(
+              x => x.title === aTblLinkColumns[i].name + suffix
+            )?.id;
+            await sMap.addToMappingTbl(
+              aTblLinkColumns[i].id,
+              ncId,
+              aTblLinkColumns[i].name + suffix,
+              ncTbl.id
+            );
+
+            // console.log(res.columns.find(x => x.title === aTblLinkColumns[i].name))
+            syncLog(`NC API: dbTableColumn.update rename symmetric column`);
+          }
+        }
+      }
+    }
+  }
+
+  async function nocoCreateLookups(aTblSchema) {
+    // LookUps
+    for (let idx = 0; idx < aTblSchema.length; idx++) {
+      const aTblColumns = aTblSchema[idx].columns.filter(
+        x => x.type === 'lookup'
+      );
+
+      // parent table ID
+      // let srcTableId = (await nc_getTableSchema(aTblSchema[idx].name)).id;
+      const srcTableId = sMap.getNcIdFromAtId(aTblSchema[idx].id);
+      const srcTableSchema = ncSchema.tablesById[srcTableId];
+
+      if (aTblColumns.length) {
+        // Lookup
+        for (let i = 0; i < aTblColumns.length; i++) {
+          syncLog(
+            `[${idx + 1}/${aTblSchema.length}] Configuring Lookup :: [${i +
+              1}/${aTblColumns.length}] ${aTblSchema[idx].name}`
+          );
+
+          // something is not right, skip
+          if (
+            aTblColumns[i]?.typeOptions?.dependencies?.invalidColumnIds?.length
+          ) {
+            if (enableErrorLogs)
+              console.log(`## Invalid column IDs mapped; skip`);
+
+            addToSkipColumnLog(
+              srcTableSchema.title,
+              aTblColumns[i].name,
+              aTblColumns[i].type,
+              'invalid column ID in dependency list'
+            );
+            continue;
+          }
+
+          const ncRelationColumnId = sMap.getNcIdFromAtId(
+            aTblColumns[i].typeOptions.relationColumnId
+          );
+          const ncLookupColumnId = sMap.getNcIdFromAtId(
+            aTblColumns[i].typeOptions.foreignTableRollupColumnId
+          );
+
+          if (ncLookupColumnId === undefined) {
+            aTblColumns[i]['srcTableId'] = srcTableId;
+            nestedLookupTbl.push(aTblColumns[i]);
+            continue;
+          }
+
+          const ncName = nc_getSanitizedColumnName(
+            srcTableSchema,
+            aTblColumns[i].name
+          );
+          const ncTbl: any = await api.dbTableColumn.create(srcTableId, {
+            uidt: UITypes.Lookup,
+            title: ncName.title,
+            column_name: ncName.column_name,
+            fk_relation_column_id: ncRelationColumnId,
+            fk_lookup_column_id: ncLookupColumnId
+          });
+          updateNcTblSchema(ncTbl);
+
+          const ncId = ncTbl.columns.find(x => x.title === aTblColumns[i].name)
+            ?.id;
+          await sMap.addToMappingTbl(
+            aTblColumns[i].id,
+            ncId,
+            aTblColumns[i].name,
+            ncTbl.id
+          );
+
+          syncLog(`NC API: dbTableColumn.create LOOKUP`);
+        }
+      }
+    }
+
+    let level = 2;
+    let nestedCnt = 0;
+    while (nestedLookupTbl.length) {
+      // if nothing has changed from previous iteration, skip rest
+      if (nestedCnt === nestedLookupTbl.length) {
+        for (let i = 0; i < nestedLookupTbl.length; i++) {
+          const fTblField =
+            nestedLookupTbl[i].typeOptions.foreignTableRollupColumnId;
+          const name = aTbl_getColumnName(fTblField);
+          addToSkipColumnLog(
+            ncSchema.tablesById[nestedLookupTbl[i].srcTableId]?.title,
+            nestedLookupTbl[i].name,
+            nestedLookupTbl[i].type,
+            `foreign table field not found [${name.tn}/${name.cn}]`
+          );
+        }
+        if (enableErrorLogs)
+          console.log(
+            `## Failed to configure ${nestedLookupTbl.length} lookups`
+          );
+        break;
+      }
+
+      // Nested lookup
+      nestedCnt = nestedLookupTbl.length;
+      for (let i = 0; i < nestedLookupTbl.length; i++) {
+        syncLog(
+          `Configuring Nested Lookup: Level-${level} [${i + 1}/${nestedCnt}]`
+        );
+
+        const srcTableId = nestedLookupTbl[0].srcTableId;
+        const srcTableSchema = ncSchema.tablesById[srcTableId];
+
+        const ncRelationColumnId = sMap.getNcIdFromAtId(
+          nestedLookupTbl[0].typeOptions.relationColumnId
+        );
+        const ncLookupColumnId = sMap.getNcIdFromAtId(
+          nestedLookupTbl[0].typeOptions.foreignTableRollupColumnId
+        );
+
+        if (ncLookupColumnId === undefined) {
+          continue;
+        }
+
+        const ncName = nc_getSanitizedColumnName(
+          srcTableSchema,
+          nestedLookupTbl[0].name
+        );
+        const ncTbl: any = await api.dbTableColumn.create(srcTableId, {
+          uidt: UITypes.Lookup,
+          title: ncName.title,
+          column_name: ncName.column_name,
+          fk_relation_column_id: ncRelationColumnId,
+          fk_lookup_column_id: ncLookupColumnId
+        });
+        updateNcTblSchema(ncTbl);
+
+        const ncId = ncTbl.columns.find(
+          x => x.title === nestedLookupTbl[0].name
+        )?.id;
+        await sMap.addToMappingTbl(
+          nestedLookupTbl[0].id,
+          ncId,
+          nestedLookupTbl[0].name,
+          ncTbl.id
+        );
+
+        // remove entry
+        nestedLookupTbl.splice(0, 1);
+        syncLog(`NC API: dbTableColumn.create LOOKUP`);
+      }
+      level++;
+    }
+  }
+
+  function getRollupNcFunction(aTblFunction) {
+    const fn = aTblFunction.split('(')[0];
+    const aTbl_ncRollUp = {
+      AND: '',
+      ARRAYCOMPACT: '',
+      ARRAYJOIN: '',
+      ARRAYUNIQUE: '',
+      AVERAGE: 'average',
+      CONCATENATE: '',
+      COUNT: 'count',
+      COUNTA: '',
+      COUNTALL: '',
+      MAX: 'max',
+      MIN: 'min',
+      OR: '',
+      SUM: 'sum',
+      XOR: ''
+    };
+    return aTbl_ncRollUp[fn];
+  }
+
+  async function nocoCreateRollups(aTblSchema) {
+    // Rollups
+    for (let idx = 0; idx < aTblSchema.length; idx++) {
+      const aTblColumns = aTblSchema[idx].columns.filter(
+        x => x.type === 'rollup'
+      );
+
+      // parent table ID
+      // let srcTableId = (await nc_getTableSchema(aTblSchema[idx].name)).id;
+      const srcTableId = sMap.getNcIdFromAtId(aTblSchema[idx].id);
+      const srcTableSchema = ncSchema.tablesById[srcTableId];
+
+      if (aTblColumns.length) {
+        // rollup exist
+        for (let i = 0; i < aTblColumns.length; i++) {
+          syncLog(
+            `[${idx + 1}/${aTblSchema.length}] Configuring Rollup :: [${i +
+              1}/${aTblColumns.length}] ${aTblSchema[idx].name}`
+          );
+
+          // fetch associated rollup function
+          // skip column creation if supported rollup function doesnot exist
+          const ncRollupFn = getRollupNcFunction(
+            aTblColumns[i].typeOptions.formulaTextParsed
+          );
+
+          if (ncRollupFn === '') {
+            addToSkipColumnLog(
+              srcTableSchema.title,
+              aTblColumns[i].name,
+              aTblColumns[i].type,
+              `rollup function ${aTblColumns[i].typeOptions.formulaTextParsed} not supported`
+            );
+            continue;
+          }
+
+          // something is not right, skip
+          if (
+            aTblColumns[i]?.typeOptions?.dependencies?.invalidColumnIds?.length
+          ) {
+            if (enableErrorLogs)
+              console.log(`## Invalid column IDs mapped; skip`);
+
+            addToSkipColumnLog(
+              srcTableSchema.title,
+              aTblColumns[i].name,
+              aTblColumns[i].type,
+              'invalid column ID in dependency list'
+            );
+            continue;
+          }
+
+          const ncRelationColumnId = sMap.getNcIdFromAtId(
+            aTblColumns[i].typeOptions.relationColumnId
+          );
+          const ncRollupColumnId = sMap.getNcIdFromAtId(
+            aTblColumns[i].typeOptions.foreignTableRollupColumnId
+          );
+
+          if (ncRollupColumnId === undefined) {
+            aTblColumns[i]['srcTableId'] = srcTableId;
+            nestedRollupTbl.push(aTblColumns[i]);
+            continue;
+          }
+
+          const ncName = nc_getSanitizedColumnName(
+            srcTableSchema,
+            aTblColumns[i].name
+          );
+          const ncTbl: any = await api.dbTableColumn.create(srcTableId, {
+            uidt: UITypes.Rollup,
+            title: ncName.title,
+            column_name: ncName.column_name,
+            fk_relation_column_id: ncRelationColumnId,
+            fk_rollup_column_id: ncRollupColumnId,
+            rollup_function: ncRollupFn
+          });
+          updateNcTblSchema(ncTbl);
+          syncLog(`NC API: dbTableColumn.create ROLLUP`);
+
+          const ncId = ncTbl.columns.find(x => x.title === aTblColumns[i].name)
+            ?.id;
+          await sMap.addToMappingTbl(
+            aTblColumns[i].id,
+            ncId,
+            aTblColumns[i].name,
+            ncTbl.id
+          );
+        }
+      }
+    }
+    syncLog(`Nested rollup: ${nestedRollupTbl.length}`);
+  }
+
+  async function nocoLookupForRollups() {
+    const nestedCnt = nestedLookupTbl.length;
+    for (let i = 0; i < nestedLookupTbl.length; i++) {
+      syncLog(`Configuring Lookup over Rollup :: [${i + 1}/${nestedCnt}]`);
+
+      const srcTableId = nestedLookupTbl[0].srcTableId;
+      const srcTableSchema = ncSchema.tablesById[srcTableId];
+
+      const ncRelationColumnId = sMap.getNcIdFromAtId(
+        nestedLookupTbl[0].typeOptions.relationColumnId
+      );
+      const ncLookupColumnId = sMap.getNcIdFromAtId(
+        nestedLookupTbl[0].typeOptions.foreignTableRollupColumnId
+      );
+
+      if (ncLookupColumnId === undefined) {
+        continue;
+      }
+
+      const ncName = nc_getSanitizedColumnName(
+        srcTableSchema,
+        nestedLookupTbl[0].name
+      );
+      const ncTbl: any = await api.dbTableColumn.create(srcTableId, {
+        uidt: UITypes.Lookup,
+        title: ncName.title,
+        column_name: ncName.column_name,
+        fk_relation_column_id: ncRelationColumnId,
+        fk_lookup_column_id: ncLookupColumnId
+      });
+      updateNcTblSchema(ncTbl);
+
+      const ncId = ncTbl.columns.find(x => x.title === nestedLookupTbl[0].name)
+        ?.id;
+      await sMap.addToMappingTbl(
+        nestedLookupTbl[0].id,
+        ncId,
+        nestedLookupTbl[0].name,
+        ncTbl.id
+      );
+
+      // remove entry
+      nestedLookupTbl.splice(0, 1);
+      syncLog(`NC API: dbTableColumn.create LOOKUP`);
+    }
+  }
+
+  async function nocoSetPrimary(aTblSchema) {
+    for (let idx = 0; idx < aTblSchema.length; idx++) {
+      syncLog(
+        `[${idx + 1}/${aTblSchema.length}] Configuring Primary value : ${
+          aTblSchema[idx].name
+        }`
+      );
+
+      const pColId = aTblSchema[idx].primaryColumnId;
+      const ncColId = sMap.getNcIdFromAtId(pColId);
+
+      // skip primary column configuration if we field not migrated
+      syncLog(`NC API: dbTableColumn.primaryColumnSet`);
+      if (ncColId) {
+        await api.dbTableColumn.primaryColumnSet(ncColId);
+
+        // update schema
+        const ncTblId = sMap.getNcIdFromAtId(aTblSchema[idx].id);
+        await updateNcTblSchemaById(ncTblId);
+      }
+    }
+  }
+
+  // retrieve nc-view column ID from corresponding nc-column ID
+  async function nc_getViewColumnId(viewId, viewType, ncColumnId) {
+    // retrieve view Info
+    let viewDetails = [];
+
+    if (viewType === 'form')
+      viewDetails = (await api.dbView.formRead(viewId)).columns;
+    else if (viewType === 'gallery')
+      viewDetails = (await api.dbView.galleryRead(viewId)).columns;
+    else viewDetails = await api.dbView.gridColumnsList(viewId);
+
+    const viewColumnId = viewDetails.find(x => x.fk_column_id === ncColumnId)
+      ?.id;
+
+    return viewColumnId;
+  }
+
+  // @ts-ignore
+  async function nc_hideColumn(tblName, viewName, hiddenColumns, viewType?) {
+    // retrieve table schema
+    const ncTbl = await nc_getTableSchema(tblName);
+    // retrieve view ID
+    const viewId = ncTbl.views.find(x => x.title === viewName).id;
+
+    // retrieve view Info
+    let viewDetails = [];
+
+    if (viewType === 'form')
+      viewDetails = (await api.dbView.formRead(viewId)).columns;
+    else if (viewType === 'gallery')
+      viewDetails = (await api.dbView.galleryRead(viewId)).columns;
+    else viewDetails = await api.dbView.gridColumnsList(viewId);
+
+    for (let i = 0; i < hiddenColumns.length; i++) {
+      // retrieve column schema
+      const ncColumn = ncTbl.columns.find(x => x.title === hiddenColumns[i]);
+      // retrieve view column ID
+      const viewColumnId = viewDetails.find(
+        x => x.fk_column_id === ncColumn?.id
+      )?.id;
+
+      // fix me
+      if (viewColumnId === undefined) {
+        if (enableErrorLogs)
+          console.log(
+            `## Column disable fail: ${tblName}, ${viewName}, ${hiddenColumns[i]}`
+          );
+        continue;
+      }
+
+      // hide
+      syncLog(`NC API: dbViewColumn.update ${viewId}, ${ncColumn.id}`);
+      // @ts-ignore
+      const retVal = await api.dbViewColumn.update(viewId, viewColumnId, {
+        show: false
+      });
+    }
+  }
+
+  //////////  Data processing
+
+  async function nocoLinkProcessing(projName, table, record, _field) {
+    const rec = record.fields;
+    const refRowIdList: any = Object.values(rec);
+    const referenceColumnName = Object.keys(rec)[0];
+
+    if (refRowIdList.length) {
+      for (let i = 0; i < refRowIdList[0].length; i++) {
+        syncLog(
+          `NC API: dbTableRow.nestedAdd ${record.id}/mm/${referenceColumnName}/${refRowIdList[0][i]}`
+        );
+
+        await api.dbTableRow.nestedAdd(
+          'noco',
+          projName,
+          table.id,
+          `${record.id}`,
+          'mm', // fix me
+          encodeURIComponent(referenceColumnName),
+          `${refRowIdList[0][i]}`
+        );
+      }
+    }
+  }
+
+  // fix me:
+  // instead of skipping data after retrieval, use select fields option in airtable API
+  async function nocoBaseDataProcessing(sDB, table, record) {
+    const recordHash = hash(record);
+    const rec = record.fields;
+
+    // kludge -
+    // trim spaces on either side of column name
+    // leads to error in NocoDB
+    Object.keys(rec).forEach(key => {
+      const replacedKey = key.replace(/\?/g, 'QQ').trim();
+      if (key !== replacedKey) {
+        rec[replacedKey] = rec[key];
+        delete rec[key];
+      }
+    });
+
+    // post-processing on the record
+    for (const [key, value] of Object.entries(rec as { [key: string]: any })) {
+      // retrieve datatype
+      const dt = table.columns.find(x => x.title === key)?.uidt;
+
+      // if(dt === undefined)
+      //   console.log('fix me')
+
+      // https://www.npmjs.com/package/validator
+      // default value: digits_after_decimal: [2]
+      // if currency, set decimal place to 2
+      //
+      if (dt === UITypes.Currency) rec[key] = (+value).toFixed(2);
+
+      // we will pick up LTAR once all table data's are in place
+      if (dt === UITypes.LinkToAnotherRecord) {
+        aTblDataLinks.push(JSON.parse(JSON.stringify(rec)));
+        delete rec[key];
+      }
+
+      // these will be automatically populated depending on schema configuration
+      if (dt === UITypes.Lookup) delete rec[key];
+      if (dt === UITypes.Rollup) delete rec[key];
+
+      if (dt === UITypes.Collaborator) {
+        // in case of multi-collaborator, this will be an array
+        if (Array.isArray(value)) {
+          let collaborators = '';
+          for (let i = 0; i < value.length; i++) {
+            collaborators += `${value[i]?.name} <${value[i]?.email}>, `;
+            rec[key] = collaborators;
+          }
+        } else rec[key] = `${value?.name} <${value?.email}>`;
+      }
+
+      if (dt === UITypes.Barcode) rec[key] = value.text;
+      if (dt === UITypes.Button) rec[key] = `${value?.label} <${value?.url}>`;
+
+      if (dt === UITypes.DateTime) {
+        const atDateField = dayjs(value);
+        rec[key] = atDateField.utc().format('YYYY-MM-DD HH:mm');
+      }
+
+      if (dt === UITypes.Attachment) {
+        const tempArr = [];
+        for (const v of value) {
+          const binaryImage = await axios
+            .get(v.url, {
+              responseType: 'stream',
+              headers: {
+                'Content-Type': v.type
+              }
+            })
+            .then(response => {
+              return response.data;
+            })
+            .catch(error => {
+              console.log(error);
+              return false;
+            });
+
+          const imageFile: any = new FormData();
+          imageFile.append('files', binaryImage, {
+            filename: v.filename.includes('?')
+              ? v.filename.split('?')[0]
+              : v.filename
+          });
+
+          const rs = await axios
+            .post(sDB.baseURL + '/api/v1/db/storage/upload', imageFile, {
+              params: {
+                path: `noco/${sDB.projectName}/${table.title}/${key}`
+              },
+              headers: {
+                'Content-Type': `multipart/form-data; boundary=${imageFile._boundary}`,
+                'xc-auth': sDB.authToken
+              }
+            })
+            .then(response => {
+              return response.data;
+            })
+            .catch(e => {
+              console.log(e);
+            });
+
+          tempArr.push(...rs);
+        }
+        rec[key] = JSON.stringify(tempArr);
+      }
+    }
+
+    // insert airtable record ID explicitly into each records
+    rec['_aTbl_nc_rec_id'] = record.id;
+    rec['_aTbl_nc_rec_hash'] = recordHash;
+
+    // console.log(rec)
+
+    syncLog(`NC API: dbTableRow.bulkCreate ${table.title} [${rec}]`);
+    // console.log(JSON.stringify(rec, null, 2))
+
+    // bulk Insert
+    // @ts-ignore
+    const returnValue = await api.dbTableRow.bulkCreate(
+      'nc',
+      sDB.projectName,
+      table.id, // encodeURIComponent(table.title),
+      [rec]
+    );
+  }
+
+  async function nocoReadData(sDB, table, callback) {
+    return new Promise((resolve, reject) => {
+      base(table.title)
+        .select({
+          pageSize: 100
+          // maxRecords: 1,
+        })
+        .eachPage(
+          async function page(records, fetchNextPage) {
+            // console.log(JSON.stringify(records, null, 2));
+
+            // This function (`page`) will get called for each page of records.
+            await Promise.all(
+              records.map(record => callback(sDB, table, record))
+            );
+
+            // To fetch the next page of records, call `fetchNextPage`.
+            // If there are more records, `page` will get called again.
+            // If there are no more records, `done` will get called.
+            fetchNextPage();
+          },
+          function done(err) {
+            if (err) {
+              console.error(err);
+              reject(err);
+            }
+            resolve(null);
+          }
+        );
+    });
+  }
+
+  async function nocoReadDataSelected(projName, table, callback, fields) {
+    return new Promise((resolve, reject) => {
+      base(table.title)
+        .select({
+          pageSize: 100,
+          // maxRecords: 100,
+          fields: [fields]
+        })
+        .eachPage(
+          async function page(records, fetchNextPage) {
+            // console.log(JSON.stringify(records, null, 2));
+
+            // This function (`page`) will get called for each page of records.
+            // records.forEach(record => callback(table, record));
+            await Promise.all(
+              records.map(r => callback(projName, table, r, fields))
+            );
+
+            // To fetch the next page of records, call `fetchNextPage`.
+            // If there are more records, `page` will get called again.
+            // If there are no more records, `done` will get called.
+            fetchNextPage();
+          },
+          function done(err) {
+            if (err) {
+              console.error(err);
+              reject(err);
+            }
+            resolve(null);
+          }
+        );
+    });
+  }
+
+  //////////
+
+  function nc_isLinkExists(atblFieldId) {
+    if (
+      ncLinkMappingTable.find(
+        x => x.aTbl.typeOptions.symmetricColumnId === atblFieldId
+      )
+    )
+      return true;
+    return false;
+  }
+
+  async function nocoCreateProject(projName) {
+    syncLog(`Create Project: ${projName}`);
+
+    // create empty project (XC-DB)
+    ncCreatedProjectSchema = await api.project.create({
+      title: projName
+    });
+  }
+
+  async function nocoGetProject(projId) {
+    syncLog(`Getting project meta: ${projId}`);
+
+    // create empty project (XC-DB)
+    ncCreatedProjectSchema = await api.project.read(projId);
+  }
+
+  async function nocoConfigureGalleryView(sDB, aTblSchema) {
+    if (!sDB.syncViews) return;
+    for (let idx = 0; idx < aTblSchema.length; idx++) {
+      const tblId = (await nc_getTableSchema(aTblSchema[idx].name)).id;
+      const galleryViews = aTblSchema[idx].views.filter(
+        x => x.type === 'gallery'
+      );
+
+      const configuredViews =
+        runTimeCounters.view.grid +
+        runTimeCounters.view.gallery +
+        runTimeCounters.view.form;
+      runTimeCounters.view.gallery += galleryViews.length;
+
+      for (let i = 0; i < galleryViews.length; i++) {
+        syncLog(
+          `[${configuredViews + i + 1}/${
+            runTimeCounters.view.total
+          }] Configuring view :: Gallery`
+        );
+        syncLog(`   Axios fetch view-data`);
+
+        // create view
+        // @ts-ignore
+        const vData = await getViewData(galleryViews[i].id);
+        const viewName = aTblSchema[idx].views.find(
+          x => x.id === galleryViews[i].id
+        )?.name;
+
+        syncLog(`   Create NC View :: ${viewName}`);
+        // @ts-ignore
+        const g = await api.dbView.galleryCreate(tblId, { title: viewName });
+        await updateNcTblSchemaById(tblId);
+        // syncLog(`[${idx+1}/${aTblSchema.length}][Gallery View][${i+1}/${galleryViews.length}] Create ${viewName}`)
+
+        // await nc_configureFields(g.id, vData.columnOrder, aTblSchema[idx].name, viewName, 'gallery');
+      }
+    }
+  }
+
+  async function nocoConfigureFormView(sDB, aTblSchema) {
+    if (!sDB.syncViews) return;
+    for (let idx = 0; idx < aTblSchema.length; idx++) {
+      const tblId = sMap.getNcIdFromAtId(aTblSchema[idx].id);
+      const formViews = aTblSchema[idx].views.filter(x => x.type === 'form');
+
+      const configuredViews =
+        runTimeCounters.view.grid +
+        runTimeCounters.view.gallery +
+        runTimeCounters.view.form;
+      runTimeCounters.view.form += formViews.length;
+      for (let i = 0; i < formViews.length; i++) {
+        syncLog(
+          `[${configuredViews + i + 1}/${
+            runTimeCounters.view.total
+          }] Configuring view :: Form`
+        );
+        syncLog(`   Axios fetch view-data`);
+
+        // create view
+        const vData = await getViewData(formViews[i].id);
+        const viewName = aTblSchema[idx].views.find(
+          x => x.id === formViews[i].id
+        )?.name;
+
+        // everything is default
+        let refreshMode = 'NO_REFRESH';
+        let msg = 'Thank you for submitting the form!';
+        let desc = '';
+
+        // response will not include form object if everything is default
+        //
+        if (vData.metadata?.form) {
+          refreshMode = vData.metadata.form.refreshAfterSubmit;
+          msg = vData.metadata.form?.afterSubmitMessage
+            ? vData.metadata.form.afterSubmitMessage
+            : 'Thank you for submitting the form!';
+          desc = vData.metadata.form.description;
+        }
+
+        const formData = {
+          title: viewName,
+          heading: viewName,
+          subheading: desc,
+          success_msg: msg,
+          submit_another_form: refreshMode.includes('REFRESH_BUTTON')
+            ? true
+            : false,
+          show_blank_form: refreshMode.includes('AUTO_REFRESH') ? true : false
+        };
+
+        syncLog(`   Create NC View :: ${viewName}`);
+        const f = await api.dbView.formCreate(tblId, formData);
+        syncLog(
+          `[${idx + 1}/${aTblSchema.length}][Form View][${i + 1}/${
+            formViews.length
+          }] Create ${viewName}`
+        );
+
+        await updateNcTblSchemaById(tblId);
+
+        syncLog(`   Configure show/hide columns`);
+        await nc_configureFields(
+          f.id,
+          vData.columnOrder,
+          aTblSchema[idx].name,
+          viewName,
+          'form'
+        );
+      }
+    }
+  }
+
+  async function nocoConfigureGridView(sDB, aTblSchema) {
+    for (let idx = 0; idx < aTblSchema.length; idx++) {
+      const tblId = sMap.getNcIdFromAtId(aTblSchema[idx].id);
+      const gridViews = aTblSchema[idx].views.filter(x => x.type === 'grid');
+
+      const configuredViews =
+        runTimeCounters.view.grid +
+        runTimeCounters.view.gallery +
+        runTimeCounters.view.form;
+      runTimeCounters.view.grid += gridViews.length;
+
+      for (let i = 0; i < (sDB.syncViews ? gridViews.length : 1); i++) {
+        syncLog(
+          `[${configuredViews + i + 1}/${
+            runTimeCounters.view.total
+          }] Configuring view :: Grid`
+        );
+        syncLog(`   Axios fetch view-data`);
+        // fetch viewData JSON
+        const vData = await getViewData(gridViews[i].id);
+
+        // retrieve view name & associated NC-ID
+        const viewName = aTblSchema[idx].views.find(
+          x => x.id === gridViews[i].id
+        )?.name;
+        const viewList: any = await api.dbView.list(tblId);
+        const ncViewId = viewList?.list?.find(x => x.tn === viewName)?.id;
+
+        // create view (default already created)
+        if (i > 0) {
+          syncLog(`   Create NC View :: ${viewName}`);
+          const viewCreated = await api.dbView.gridCreate(tblId, {
+            title: viewName
+          });
+          await updateNcTblSchemaById(tblId);
+          await sMap.addToMappingTbl(
+            gridViews[i].id,
+            viewCreated.id,
+            viewName,
+            tblId
+          );
+          // syncLog(`[${idx+1}/${aTblSchema.length}][Grid View][${i+1}/${gridViews.length}] Create ${viewName}`)
+        }
+
+        // syncLog(`[${idx+1}/${aTblSchema.length}][Grid View][${i+1}/${gridViews.length}] Hide columns ${viewName}`)
+        syncLog(`   Configure show/hide columns`);
+        await nc_configureFields(
+          ncViewId,
+          vData.columnOrder,
+          aTblSchema[idx].name,
+          viewName,
+          'grid'
+        );
+
+        // configure filters
+        if (vData?.filters) {
+          // syncLog(`[${idx+1}/${aTblSchema.length}][Grid View][${i+1}/${gridViews.length}] Configure filters ${viewName}`)
+          syncLog(`   Configure filter set`);
+
+          // skip filters if nested
+          if (!vData.filters.filterSet.find(x => x?.type === 'nested')) {
+            await nc_configureFilters(ncViewId, vData.filters);
+          }
+        }
+
+        // configure sort
+        if (vData?.lastSortsApplied?.sortSet.length) {
+          // syncLog(`[${idx+1}/${aTblSchema.length}][Grid View][${i+1}/${gridViews.length}] Configure sort ${viewName}`)
+          syncLog(`   Configure sort set`);
+          await nc_configureSort(ncViewId, vData.lastSortsApplied);
+        }
+      }
+    }
+  }
+
+  async function nocoAddUsers(aTblSchema) {
+    const userRoles = {
+      owner: 'owner',
+      create: 'creator',
+      edit: 'editor',
+      comment: 'commenter',
+      read: 'viewer',
+      none: 'viewer'
+    };
+    const userList = aTblSchema.appBlanket.userInfoById;
+    const totalUsers = Object.keys(userList).length;
+    let cnt = 0;
+
+    for (const [_key, value] of Object.entries(
+      userList as { [key: string]: any }
+    )) {
+      syncLog(`[${++cnt}/${totalUsers}] Configuring User :: ${value.email}`);
+      await api.auth.projectUserAdd(ncCreatedProjectSchema.id, {
+        email: value.email,
+        roles: userRoles[value.permissionLevel]
+      });
+    }
+  }
+
+  function updateNcTblSchema(tblSchema) {
+    const tblId = tblSchema.id;
+
+    // replace entry from array if already exists
+    const idx = ncSchema.tables.findIndex(x => x.id === tblId);
+    if (idx !== -1) ncSchema.tables.splice(idx, 1);
+    ncSchema.tables.push(tblSchema);
+
+    // overwrite object if it exists
+    ncSchema.tablesById[tblId] = tblSchema;
+  }
+
+  async function updateNcTblSchemaById(tblId) {
+    const ncTbl = await api.dbTable.read(tblId);
+    updateNcTblSchema(ncTbl);
+  }
+
+  // @ts-ignore
+  async function nocoReadNcSchema() {
+    const tableList = await api.dbTable.list(ncCreatedProjectSchema.id);
+    for (let tblCnt = 0; tblCnt < tableList.list.length; tblCnt++) {
+      const tblSchema = await api.dbTable.read(tableList.list[tblCnt].id);
+      updateNcTblSchema(tblSchema);
+    }
+  }
+
+  ///////////////////////
+
+  // statistics
+  //
+  const migrationStats = [];
+
+  async function generateMigrationStats(aTblSchema) {
+    const migrationStatsObj = {
+      table_name: '',
+      aTbl: {
+        columns: 0,
+        links: 0,
+        lookup: 0,
+        rollup: 0
+      },
+      nc: {
+        columns: 0,
+        links: 0,
+        lookup: 0,
+        rollup: 0,
+        invalidColumn: 0
+      }
+    };
+    for (let idx = 0; idx < aTblSchema.length; idx++) {
+      migrationStatsObj.table_name = aTblSchema[idx].name;
+
+      const aTblLinkColumns = aTblSchema[idx].columns.filter(
+        x => x.type === 'foreignKey'
+      );
+      const aTblLookups = aTblSchema[idx].columns.filter(
+        x => x.type === 'lookup'
+      );
+      const aTblRollups = aTblSchema[idx].columns.filter(
+        x => x.type === 'rollup'
+      );
+
+      let invalidColumnId = 0;
+      for (let i = 0; i < aTblLookups.length; i++) {
+        if (
+          aTblLookups[i]?.typeOptions?.dependencies?.invalidColumnIds?.length
+        ) {
+          invalidColumnId++;
+        }
+      }
+      for (let i = 0; i < aTblRollups.length; i++) {
+        if (
+          aTblRollups[i]?.typeOptions?.dependencies?.invalidColumnIds?.length
+        ) {
+          invalidColumnId++;
+        }
+      }
+
+      migrationStatsObj.aTbl.columns = aTblSchema[idx].columns.length;
+      migrationStatsObj.aTbl.links = aTblLinkColumns.length;
+      migrationStatsObj.aTbl.lookup = aTblLookups.length;
+      migrationStatsObj.aTbl.rollup = aTblRollups.length;
+
+      const ncTbl = await nc_getTableSchema(aTblSchema[idx].name);
+      const linkColumn = ncTbl.columns.filter(
+        x => x.uidt === UITypes.LinkToAnotherRecord
+      );
+      const lookup = ncTbl.columns.filter(x => x.uidt === UITypes.Lookup);
+      const rollup = ncTbl.columns.filter(x => x.uidt === UITypes.Rollup);
+
+      // all links hardwired as m2m. m2m generates additional tables per link
+      // hence link/2
+      migrationStatsObj.nc.columns =
+        ncTbl.columns.length - linkColumn.length / 2;
+      migrationStatsObj.nc.links = linkColumn.length / 2;
+      migrationStatsObj.nc.lookup = lookup.length;
+      migrationStatsObj.nc.rollup = rollup.length;
+      migrationStatsObj.nc.invalidColumn = invalidColumnId;
+
+      const temp = JSON.parse(JSON.stringify(migrationStatsObj));
+      migrationStats.push(temp);
+    }
+
+    const columnSum = migrationStats.reduce((accumulator, object) => {
+      return accumulator + object.nc.columns;
+    }, 0);
+    const linkSum = migrationStats.reduce((accumulator, object) => {
+      return accumulator + object.nc.links;
+    }, 0);
+    const lookupSum = migrationStats.reduce((accumulator, object) => {
+      return accumulator + object.nc.lookup;
+    }, 0);
+    const rollupSum = migrationStats.reduce((accumulator, object) => {
+      return accumulator + object.nc.rollup;
+    }, 0);
+
+    syncLog(`Quick Stats:`);
+    syncLog(`     Total Tables:   ${aTblSchema.length}`);
+    syncLog(`     Total Columns:  ${columnSum}`);
+    syncLog(`       Links:        ${linkSum}`);
+    syncLog(`       Lookup:       ${lookupSum}`);
+    syncLog(`       Rollup:       ${rollupSum}`);
+    syncLog(`     Total Filters:  ${runTimeCounters.filter}`);
+    syncLog(`     Total Sort:     ${runTimeCounters.sort}`);
+    syncLog(`     Total Views:    ${runTimeCounters.view.total}`);
+    syncLog(`       Grid:         ${runTimeCounters.view.grid}`);
+    syncLog(`       Gallery:      ${runTimeCounters.view.gallery}`);
+    syncLog(`       Form:         ${runTimeCounters.view.form}`);
+
+    const duration = Date.now() - start;
+    syncLog(`Migration time:      ${duration}`);
+    syncLog(`Axios fetch count:   ${runTimeCounters.fetchAt.count}`);
+    syncLog(`Axios fetch time:    ${runTimeCounters.fetchAt.time}`);
+  }
+
+  //////////////////////////////
+  // filters
+
+  const filterMap = {
+    '=': 'eq',
+    '!=': 'neq',
+    '<': 'lt',
+    '<=': 'lte',
+    '>': 'gt',
+    '>=': 'gte',
+    isEmpty: 'empty',
+    isNotEmpty: 'notempty',
+    contains: 'like',
+    doesNotContain: 'nlike',
+    isAnyOf: 'eq',
+    isNoneOf: 'neq'
+  };
+
+  async function nc_configureFilters(viewId, f) {
+    for (let i = 0; i < f.filterSet.length; i++) {
+      const filter = f.filterSet[i];
+      const colSchema = await nc_getColumnSchema(filter.columnId);
+
+      // column not available;
+      // one of not migrated column;
+      if (!colSchema) {
+        addUserInfo(
+          `Filter configuration partial: ${sMap.getNcNameFromAtId(viewId)}`
+        );
+        continue;
+      }
+
+      const columnId = colSchema.id;
+      const datatype = colSchema.uidt;
+      const ncFilters = [];
+
+      // console.log(filter)
+      if (datatype === UITypes.Date) {
+        // skip filters over data datatype
+        addUserInfo(
+          `Filter configuration partial: ${sMap.getNcNameFromAtId(viewId)}`
+        );
+        continue;
+      }
+
+      // single-select & multi-select
+      else if (
+        datatype === UITypes.SingleSelect ||
+        datatype === UITypes.MultiSelect
+      ) {
+        // if array, break it down to multiple filters
+        if (Array.isArray(filter.value)) {
+          for (let i = 0; i < filter.value.length; i++) {
+            const fx = {
+              fk_column_id: columnId,
+              logical_op: f.conjunction,
+              comparison_op: filterMap[filter.operator],
+              value: sMap.getNcNameFromAtId(filter.value[i])
+            };
+            ncFilters.push(fx);
+          }
+        }
+        // not array - add as is
+        else if (filter.value) {
+          const fx = {
+            fk_column_id: columnId,
+            logical_op: f.conjunction,
+            comparison_op: filterMap[filter.operator],
+            value: sMap.getNcNameFromAtId(filter.value)
+          };
+          ncFilters.push(fx);
+        }
+      }
+
+      // other data types (number/ text/ long text/ ..)
+      else if (filter.value) {
+        const fx = {
+          fk_column_id: columnId,
+          logical_op: f.conjunction,
+          comparison_op: filterMap[filter.operator],
+          value: filter.value
+        };
+        ncFilters.push(fx);
+      }
+
+      // insert filters
+      for (let i = 0; i < ncFilters.length; i++) {
+        await api.dbTableFilter.create(viewId, {
+          ...ncFilters[i]
+        });
+        runTimeCounters.filter++;
+      }
+    }
+  }
+
+  async function nc_configureSort(viewId, s) {
+    for (let i = 0; i < s.sortSet.length; i++) {
+      const columnId = (await nc_getColumnSchema(s.sortSet[i].columnId))?.id;
+
+      if (columnId)
+        await api.dbTableSort.create(viewId, {
+          fk_column_id: columnId,
+          direction: s.sortSet[i].ascending ? 'asc' : 'dsc'
+        });
+      runTimeCounters.sort++;
+    }
+  }
+
+  async function nc_configureFields(_viewId, c, tblName, viewName, viewType?) {
+    // force hide PK column
+    const hiddenColumns = ['_aTbl_nc_rec_id', '_aTbl_nc_rec_hash'];
+
+    // // extract other columns hidden in this view
+    // const hiddenColumnID = c.filter(x => x.visibility === false);
+    // for (let j = 0; j < hiddenColumnID.length; j++) {
+    //   hiddenColumns.push(aTbl_getColumnName(hiddenColumnID[j].columnId).cn);
+    // }
+
+    // await nc_hideColumn(tblName, viewName, hiddenColumns, viewType);
+
+    // column order corrections
+    // retrieve table schema
+    const ncTbl = await nc_getTableSchema(tblName);
+    // retrieve view ID
+    const viewId = ncTbl.views.find(x => x.title === viewName).id;
+
+    // nc-specific columns; default hide.
+    for (let j = 0; j < hiddenColumns.length; j++) {
+      const ncColumnId = ncTbl.columns.find(x => x.title === hiddenColumns[j])
+        .id;
+      const ncViewColumnId = await nc_getViewColumnId(
+        viewId,
+        viewType,
+        ncColumnId
+      );
+      if (ncViewColumnId === undefined) continue;
+
+      // first two positions held by record id & record hash
+      await api.dbViewColumn.update(viewId, ncViewColumnId, {
+        show: false,
+        order: j + 1 + c.length
+      });
+    }
+
+    // rest of the columns from airtable- retain order & visibility property
+    for (let j = 0; j < c.length; j++) {
+      const ncColumnId = sMap.getNcIdFromAtId(c[j].columnId);
+      const ncViewColumnId = await nc_getViewColumnId(
+        viewId,
+        viewType,
+        ncColumnId
+      );
+      if (ncViewColumnId === undefined) continue;
+
+      // first two positions held by record id & record hash
+      await api.dbViewColumn.update(viewId, ncViewColumnId, {
+        show: c[j].visibility,
+        order: j + 1
+      });
+    }
+  }
+
+  ///////////////////////////////////////////////////////////////////////////////
+  const userInfo = [];
+
+  function addUserInfo(log) {
+    userInfo.push(log);
+  }
+
+  try {
+    syncLog = progress;
+    progress('SDK initialized');
+    api = new Api({
+      baseURL: syncDB.baseURL,
+      headers: {
+        'xc-auth': syncDB.authToken
+      }
+    });
+
+    progress('Project initialization started');
+    // delete project if already exists
+    if (debugMode) await init(syncDB);
+
+    progress('Project initialized');
+
+    progress('Project schema extraction started');
+    // read schema file
+    const schema = await getAtableSchema(syncDB);
+    const aTblSchema = schema.tableSchemas;
+    progress('Project schema extraction completed');
+
+    if (!syncDB.projectId) {
+      if (!syncDB.projectName)
+        throw new Error('Project name or id not provided');
+      // create empty project
+      await nocoCreateProject(syncDB.projectName);
+      progress('Project created');
+    } else {
+      await nocoGetProject(syncDB.projectId);
+      syncDB.projectName = ncCreatedProjectSchema?.title;
+      progress('Getting existing project meta');
+    }
+
+    progress('Table creation started');
+    // prepare table schema (base)
+    await nocoCreateBaseSchema(aTblSchema);
+    progress('Table creation completed');
+
+    progress('Migrating LTAR columns');
+    // add LTAR
+    await nocoCreateLinkToAnotherRecord(aTblSchema);
+    progress('Migrating LTAR columns completed');
+
+    progress('Migrating Lookup columns');
+    // add look-ups
+    await nocoCreateLookups(aTblSchema);
+    progress('Migrating Lookup columns completed');
+
+    progress('Migrating Rollup columns');
+    // add roll-ups
+    await nocoCreateRollups(aTblSchema);
+    progress('Migrating Rollup columns completed');
+
+    progress('Migrating Lookup form Rollup columns');
+    // lookups for rollups
+    await nocoLookupForRollups();
+    progress('Migrating Lookup form Rollup columns completed');
+
+    progress('Configuring primary value column');
+    // configure primary values
+    await nocoSetPrimary(aTblSchema);
+    progress('Configuring primary value column completed');
+
+    progress('Adding users');
+    // add users
+    await nocoAddUsers(schema);
+    progress('Adding users completed');
+
+    // hide-fields
+    // await nocoReconfigureFields(aTblSchema);
+
+    progress('Syncing views');
+    // configure views
+    await nocoConfigureGridView(syncDB, aTblSchema);
+    await nocoConfigureFormView(syncDB, aTblSchema);
+    await nocoConfigureGalleryView(syncDB, aTblSchema);
+    progress('Syncing views completed');
+
+    if (process_aTblData) {
+      try {
+        // await nc_DumpTableSchema();
+        const ncTblList = await api.dbTable.list(ncCreatedProjectSchema.id);
+        for (let i = 0; i < ncTblList.list.length; i++) {
+          const ncTbl = await api.dbTable.read(ncTblList.list[i].id);
+          progress(`Reading data from ${ncTbl.title}`);
+          let c = 0;
+          await nocoReadData(syncDB, ncTbl, async (sDB, table, record) => {
+            progress(
+              `Processing records from ${ncTbl.title} : ${c} - ${(c += 25)}`
+            );
+            await nocoBaseDataProcessing(sDB, table, record);
+          });
+          progress(`Data inserted from ${ncTbl.title}`);
+        }
+
+        // Configure link @ Data row's
+        for (let idx = 0; idx < ncLinkMappingTable.length; idx++) {
+          const x = ncLinkMappingTable[idx];
+          const ncTbl = await nc_getTableSchema(
+            aTbl_getTableName(x.aTbl.tblId).tn
+          );
+          progress(`Linking data to ${ncTbl.title}`);
+          let c = 0;
+          await nocoReadDataSelected(
+            syncDB.projectName,
+            ncTbl,
+            async (projName, table, record, _field) => {
+              progress(
+                `Mapping LTAR records from ${ncTbl.title} : ${c} - ${(c += 25)}`
+              );
+              await nocoLinkProcessing(projName, table, record, _field);
+            },
+            x.aTbl.name
+          );
+          progress(`Linked data to ${ncTbl.title}`);
+        }
+      } catch (error) {
+        progress(
+          `There was an error while migrating data! Please make sure your API key (${syncDB.apiKey}) is correct.`
+        );
+        progress(`Error: ${error}`);
+      }
+    }
+    if (generate_migrationStats) {
+      await generateMigrationStats(aTblSchema);
+    }
+  } catch (e) {
+    if (e.response?.data?.msg) {
+      throw new Error(e.response.data.msg);
+    }
+    throw e;
+  }
+};
+
+export interface AirtableSyncConfig {
+  id: string;
+  baseURL: string;
+  authToken: string;
+  projectName?: string;
+  projectId?: string;
+  apiKey: string;
+  shareId: string;
+  syncViews: boolean;
+}
diff --git a/packages/nocodb/src/lib/noco/meta/api/sync/helpers/syncMap.ts b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/syncMap.ts
new file mode 100644
index 0000000000..20c3375a94
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/syncMap.ts
@@ -0,0 +1,31 @@
+export const mapTbl = {};
+
+// static mapping records between aTblId && ncId
+export const addToMappingTbl = function addToMappingTbl(
+  aTblId,
+  ncId,
+  ncName,
+  parent?
+) {
+  mapTbl[aTblId] = {
+    ncId: ncId,
+    ncParent: parent,
+    // name added to assist in quick debug
+    ncName: ncName
+  };
+};
+
+// get NcID from airtable ID
+export const getNcIdFromAtId = function getNcIdFromAtId(aId) {
+  return mapTbl[aId]?.ncId;
+};
+
+// get nc Parent from airtable ID
+export const getNcParentFromAtId = function getNcParentFromAtId(aId) {
+  return mapTbl[aId]?.ncParent;
+};
+
+// get nc-title from airtable ID
+export const getNcNameFromAtId = function getNcNameFromAtId(aId) {
+  return mapTbl[aId]?.ncName;
+};
diff --git a/packages/nocodb/src/lib/noco/meta/api/sync/importApis.ts b/packages/nocodb/src/lib/noco/meta/api/sync/importApis.ts
new file mode 100644
index 0000000000..5855f48e8e
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/meta/api/sync/importApis.ts
@@ -0,0 +1,79 @@
+import { Request, Router } from 'express';
+// import { Queue } from 'bullmq';
+// import axios from 'axios';
+import catchError from '../../helpers/catchError';
+import { Socket } from 'socket.io';
+import NocoJobs from '../../../../noco-jobs/NocoJobs';
+import job, { AirtableSyncConfig } from './helpers/job';
+import SyncSource from '../../../../noco-models/SyncSource';
+import Noco from '../../../Noco';
+import * as jwt from 'jsonwebtoken';
+const AIRTABLE_IMPORT_JOB = 'AIRTABLE_IMPORT_JOB';
+
+enum SyncStatus {
+  PROGRESS = 'PROGRESS',
+  COMPLETED = 'COMPLETED',
+  FAILED = 'FAILED'
+}
+
+export default (router: Router, clients: { [id: string]: Socket }) => {
+  NocoJobs.jobsMgr.addJobWorker(AIRTABLE_IMPORT_JOB, job);
+  NocoJobs.jobsMgr.addProgressCbk(AIRTABLE_IMPORT_JOB, (payload, progress) => {
+    clients?.[payload?.id]?.emit('progress', {
+      msg: progress,
+      status: SyncStatus.PROGRESS
+    });
+  });
+  NocoJobs.jobsMgr.addSuccessCbk(AIRTABLE_IMPORT_JOB, payload => {
+    clients?.[payload?.id]?.emit('progress', {
+      msg: 'completed',
+      status: SyncStatus.COMPLETED
+    });
+  });
+  NocoJobs.jobsMgr.addFailureCbk(AIRTABLE_IMPORT_JOB, (payload, error: any) => {
+    clients?.[payload?.id]?.emit('progress', {
+      msg: error?.message || 'Failed due to some internal error',
+      status: SyncStatus.FAILED
+    });
+  });
+
+  router.post(
+    '/api/v1/db/meta/import/airtable',
+    catchError((req, res) => {
+      NocoJobs.jobsMgr.add(AIRTABLE_IMPORT_JOB, {
+        id: req.query.id,
+        ...req.body
+      });
+      res.json({});
+    })
+  );
+  router.post(
+    '/api/v1/db/meta/syncs/:syncId/trigger',
+    catchError(async (req: Request, res) => {
+      const syncSource = await SyncSource.get(req.params.syncId);
+
+      const user = await syncSource.getUser();
+      const token = jwt.sign(
+        {
+          email: user.email,
+          firstname: user.firstname,
+          lastname: user.lastname,
+          id: user.id,
+          roles: user.roles
+        },
+
+        Noco.getConfig().auth.jwt.secret,
+        Noco.getConfig().auth.jwt.options
+      );
+
+      NocoJobs.jobsMgr.add<AirtableSyncConfig>(AIRTABLE_IMPORT_JOB, {
+        id: req.query.id,
+        ...(syncSource?.details || {}),
+        projectId: syncSource.project_id,
+        authToken: token,
+        baseURL: (req as any).ncSiteUrl
+      });
+      res.json({});
+    })
+  );
+};
diff --git a/packages/nocodb/src/lib/noco/meta/api/sync/syncSourceApis.ts b/packages/nocodb/src/lib/noco/meta/api/sync/syncSourceApis.ts
new file mode 100644
index 0000000000..ce2d00b1af
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/meta/api/sync/syncSourceApis.ts
@@ -0,0 +1,53 @@
+import { Request, Response, Router } from 'express';
+
+import { Tele } from 'nc-help';
+import SyncSource from '../../../../noco-models/SyncSource';
+import { PagedResponseImpl } from '../../helpers/PagedResponse';
+import ncMetaAclMw from '../../helpers/ncMetaAclMw';
+
+export async function syncSourceList(req: Request, res: Response) {
+  // todo: pagination
+  res.json(new PagedResponseImpl(await SyncSource.list(req.params.projectId)));
+}
+
+export async function syncCreate(req: Request, res: Response) {
+  Tele.emit('evt', { evt_type: 'webhooks:created' });
+  const sync = await SyncSource.insert({
+    ...req.body,
+    fk_user_id: (req as any).user.id,
+    project_id: req.params.projectId
+  });
+  res.json(sync);
+}
+
+export async function syncDelete(req: Request, res: Response<any>) {
+  Tele.emit('evt', { evt_type: 'webhooks:deleted' });
+  res.json(await SyncSource.delete(req.params.syncId));
+}
+
+export async function syncUpdate(req: Request, res: Response) {
+  Tele.emit('evt', { evt_type: 'webhooks:updated' });
+
+  res.json(await SyncSource.update(req.params.syncId, req.body));
+}
+
+const router = Router({ mergeParams: true });
+
+router.get(
+  '/api/v1/db/meta/projects/:projectId/syncs',
+  ncMetaAclMw(syncSourceList, 'syncSourceList')
+);
+router.post(
+  '/api/v1/db/meta/projects/:projectId/syncs',
+  ncMetaAclMw(syncCreate, 'syncSourceCreate')
+);
+router.delete(
+  '/api/v1/db/meta/syncs/:syncId',
+  ncMetaAclMw(syncDelete, 'syncSourceDelete')
+);
+router.patch(
+  '/api/v1/db/meta/syncs/:syncId',
+  ncMetaAclMw(syncUpdate, 'syncSourceUpdate')
+);
+
+export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/helpers/extractProps.ts b/packages/nocodb/src/lib/noco/meta/helpers/extractProps.ts
index 266fbbe84a..ba4aef7bb2 100644
--- a/packages/nocodb/src/lib/noco/meta/helpers/extractProps.ts
+++ b/packages/nocodb/src/lib/noco/meta/helpers/extractProps.ts
@@ -1,4 +1,5 @@
 export default function extractProps<T>(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];
     return o;
diff --git a/packages/nocodb/src/lib/noco/migrationsv2/nc_013_sync_source.ts b/packages/nocodb/src/lib/noco/migrationsv2/nc_013_sync_source.ts
new file mode 100644
index 0000000000..638eab0eec
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/migrationsv2/nc_013_sync_source.ts
@@ -0,0 +1,72 @@
+import Knex from 'knex';
+import { MetaTable } from '../../utils/globals';
+
+const up = async (knex: Knex) => {
+  await knex.schema.createTable(MetaTable.SYNC_SOURCE, table => {
+    table
+      .string('id', 20)
+      .primary()
+      .notNullable();
+
+    table.string('title');
+    table.string('type');
+    table.text('details');
+    table.boolean('deleted');
+    table.boolean('enabled').defaultTo(true);
+    table.float('order');
+
+    table.string('project_id', 128);
+    table.foreign('project_id').references(`${MetaTable.PROJECT}.id`);
+    table.string('fk_user_id', 128);
+    table.foreign('fk_user_id').references(`${MetaTable.USERS}.id`);
+
+    table.timestamps(true, true);
+  });
+
+  await knex.schema.createTable(MetaTable.SYNC_LOGS, table => {
+    table
+      .string('id', 20)
+      .primary()
+      .notNullable();
+
+    table.string('project_id', 128);
+    table.string('fk_sync_source_id', 20);
+    // table
+    //   .foreign('fk_sync_source_id')
+    //   .references(`${MetaTable.SYNC_SOURCE}.id`);
+
+    table.integer('time_taken');
+    table.string('status');
+    table.text('status_details');
+
+    table.timestamps(true, true);
+  });
+};
+
+const down = async knex => {
+  await knex.schema.dropTable(MetaTable.SYNC_SOURCE);
+};
+
+export { up, down };
+
+/**
+ * @copyright Copyright (c) 2022, Xgene Cloud Ltd
+ *
+ * @author Wing-Kam Wong <wingkwong.code@gmail.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/noco/migrationsv2/nc_014_alter_column_data_types.ts b/packages/nocodb/src/lib/noco/migrationsv2/nc_014_alter_column_data_types.ts
new file mode 100644
index 0000000000..a64de5bab0
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/migrationsv2/nc_014_alter_column_data_types.ts
@@ -0,0 +1,66 @@
+import Knex from 'knex';
+import { MetaTable } from '../../utils/globals';
+
+const up = async (knex: Knex) => {
+  if (knex.client.config.client !== 'sqlite3') {
+    await knex.schema.alterTable(MetaTable.FORM_VIEW, table => {
+      table.text('success_msg').alter();
+    });
+    await knex.schema.alterTable(MetaTable.FORM_VIEW, table => {
+      table.text('redirect_url').alter();
+    });
+    await knex.schema.alterTable(MetaTable.FORM_VIEW, table => {
+      table.text('banner_image_url').alter();
+    });
+    await knex.schema.alterTable(MetaTable.FORM_VIEW, table => {
+      table.text('logo_url').alter();
+    });
+    await knex.schema.alterTable(MetaTable.FORM_VIEW_COLUMNS, table => {
+      table.text('description').alter();
+    });
+  }
+};
+
+const down = async knex => {
+  if (knex.client.config.client !== 'sqlite3') {
+    await knex.schema.alterTable(MetaTable.FORM_VIEW, table => {
+      table.string('success_msg').alter();
+    });
+    await knex.schema.alterTable(MetaTable.FORM_VIEW, table => {
+      table.string('redirect_url').alter();
+    });
+    await knex.schema.alterTable(MetaTable.FORM_VIEW, table => {
+      table.string('banner_image_url').alter();
+    });
+    await knex.schema.alterTable(MetaTable.FORM_VIEW, table => {
+      table.string('logo_url').alter();
+    });
+    await knex.schema.alterTable(MetaTable.FORM_VIEW_COLUMNS, table => {
+      table.string('description').alter();
+    });
+  }
+};
+
+export { up, down };
+
+/**
+ * @copyright Copyright (c) 2022, Xgene Cloud Ltd
+ *
+ * @author Wing-Kam Wong <wingkwong.code@gmail.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/nc-gui/components/trialExpired.vue b/packages/nocodb/src/lib/noco/migrationsv2/nc_015_add_meta_col_in_column_table.ts
similarity index 58%
rename from packages/nc-gui/components/trialExpired.vue
rename to packages/nocodb/src/lib/noco/migrationsv2/nc_015_add_meta_col_in_column_table.ts
index d6806dd89d..aeb1d9f9d4 100644
--- a/packages/nc-gui/components/trialExpired.vue
+++ b/packages/nocodb/src/lib/noco/migrationsv2/nc_015_add_meta_col_in_column_table.ts
@@ -1,37 +1,24 @@
-<template>
-  <v-overlay
-    absolute
-    class="text-center"
-  >
-    <p class="display-1">
-      Your trial period has expired.
-    </p>
-    <v-btn class="primary" x-large @click="openPricingPage">
-      Buy Now
-    </v-btn>
-  </v-overlay>
-</template>
+import Knex from 'knex';
+import { MetaTable } from '../../utils/globals';
 
-<script>
+const up = async (knex: Knex) => {
+  await knex.schema.alterTable(MetaTable.COLUMNS, table => {
+    table.text('meta');
+  });
+};
 
-export default {
-  name: 'TrialExpired',
-  methods: {
-    openPricingPage() {
-    }
-  }
-}
-</script>
+const down = async knex => {
+  await knex.schema.alterTable(MetaTable.COLUMNS, table => {
+    table.dropColumn('meta');
+  });
+};
 
-<style scoped>
+export { up, down };
 
-</style>
-<!--
 /**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ * @copyright Copyright (c) 2022, Xgene Cloud Ltd
  *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -49,4 +36,3 @@ export default {
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
--->
diff --git a/packages/nocodb/src/lib/noco/upgrader/jobs/ncProjectUpgraderV2_0090000.ts b/packages/nocodb/src/lib/noco/upgrader/jobs/ncProjectUpgraderV2_0090000.ts
index c0ef59e8ed..d2765134af 100644
--- a/packages/nocodb/src/lib/noco/upgrader/jobs/ncProjectUpgraderV2_0090000.ts
+++ b/packages/nocodb/src/lib/noco/upgrader/jobs/ncProjectUpgraderV2_0090000.ts
@@ -436,6 +436,10 @@ async function migrateProjectModels(
           columnMeta.uidt = UITypes.ForeignKey;
         }
 
+        if (columnMeta.uidt === UITypes.Rating) {
+          columnMeta.uidt = UITypes.Number;
+        }
+
         const column = await Column.insert(
           {
             ...columnMeta,
@@ -777,8 +781,12 @@ async function migrateProjectModels(
         });
         let orderCount = 1;
         for (const [_cn, column] of aliasColArr) {
+          const viewColumn = viewColumns.find(
+            c => column.id === c.fk_column_id
+          );
+          if (!viewColumn) continue;
           await GridViewColumn.update(
-            viewColumns.find(c => column.id === c.fk_column_id).id,
+            viewColumn.id,
             {
               order: orderCount++,
               show: queryParams?.showFields
@@ -947,7 +955,7 @@ async function migrateProjectModelViews(
         await FormViewColumn.update(
           viewColumn.id,
           {
-            help: columnParams?.help,
+            help: columnParams?.help?.slice(0, 254),
             label: columnParams?.label,
             required: columnParams?.required,
             description: columnParams?.description,
@@ -957,8 +965,10 @@ async function migrateProjectModelViews(
           ncMeta
         );
       } else if (viewData.show_as === 'grid') {
+        const viewColumn = viewColumns.find(c => column.id === c.fk_column_id);
+        if (!viewColumn) continue;
         await GridViewColumn.update(
-          viewColumns.find(c => column.id === c.fk_column_id).id,
+          viewColumn.id,
           {
             order,
             show,
@@ -1025,9 +1035,9 @@ async function migrateViewsParams(
             {
               fk_column_id: sort.field
                 ? (
-                    objModelColumnAliasRef[projectId][tn][sort.field] ||
-                    objModelColumnRef[projectId][tn][sort.field]
-                  ).id
+                    objModelColumnAliasRef[projectId]?.[tn]?.[sort.field] ||
+                    objModelColumnRef[projectId]?.[tn]?.[sort.field]
+                  )?.id || null
                 : null,
               fk_view_id: view.id,
               direction: sort.order === '-' ? 'desc' : 'asc'
@@ -1041,7 +1051,10 @@ async function migrateViewsParams(
           await Filter.insert(
             {
               fk_column_id: filter.field
-                ? objModelColumnAliasRef[projectId][tn][filter.field].id
+                ? (
+                    objModelColumnAliasRef?.[projectId]?.[tn]?.[filter.field] ||
+                    objModelColumnRef?.[projectId]?.[tn]?.[filter.field]
+                  )?.id || null
                 : null,
               fk_view_id: view.id,
               comparison_op: filterV1toV2CompOpMap[filter.op],
@@ -1071,7 +1084,7 @@ async function migrateUIAcl(ctx: MigrateCtxV1, ncMeta: any) {
 
   for (const acl of uiAclList) {
     // if missing model name skip the view acl migration
-    if (!acl.title) continue;
+    if (!acl?.title) continue;
 
     let fk_view_id;
     if (acl.type === 'vtable') {
@@ -1231,7 +1244,10 @@ async function migrateWebhooks(ctx: MigrateCtxV1, ncMeta: any) {
   }> = await ncMeta.metaList(null, null, 'nc_hooks');
 
   for (const hookMeta of hooks) {
-    if (!hookMeta.project_id) {
+    if (
+      !hookMeta.project_id ||
+      !ctx.objModelRef[hookMeta?.project_id]?.[hookMeta?.tn]
+    ) {
       continue;
     }
     const hook = await Hook.insert(
diff --git a/packages/nocodb/src/lib/utils/globals.ts b/packages/nocodb/src/lib/utils/globals.ts
index eada1fb767..e34c0ab296 100644
--- a/packages/nocodb/src/lib/utils/globals.ts
+++ b/packages/nocodb/src/lib/utils/globals.ts
@@ -34,7 +34,9 @@ export enum MetaTable {
   PLUGIN = 'nc_plugins_v2',
   PROJECT_USERS = 'nc_project_users_v2',
   MODEL_ROLE_VISIBILITY = 'nc_disabled_models_for_role_v2',
-  API_TOKENS = 'nc_api_tokens'
+  API_TOKENS = 'nc_api_tokens',
+  SYNC_SOURCE = 'nc_sync_source_v2',
+  SYNC_LOGS = 'nc_sync_logs_v2'
 }
 
 export enum CacheScope {
diff --git a/scripts/cypress/integration/spec/roleValidation.spec.js b/scripts/cypress/integration/spec/roleValidation.spec.js
index de509a4b07..2d86df82d9 100644
--- a/scripts/cypress/integration/spec/roleValidation.spec.js
+++ b/scripts/cypress/integration/spec/roleValidation.spec.js
@@ -78,7 +78,7 @@ export function _editSchema(roleType, previewMode) {
     cy.get(".add-btn").should(validationString);
     cy.get(".v-tabs-bar")
         .eq(0)
-        .find("button.mdi-plus-box")
+        .find(".add-btn.mdi-plus-box")
         .should(validationString);
 
     // delete table option
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 176cab8b18..61171b8c20 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -258,6 +258,7 @@ Cypress.Commands.add("getActiveContentModal", () => {
 
 Cypress.Commands.add("createTable", (name) => {
     cy.get(".add-btn").click();
+    cy.getActiveMenu().contains("Add new table").should('exist').click()
     cy.get('.nc-create-table-card .nc-table-name input[type="text"]')
         .first()
         .click()
diff --git a/scripts/markdown/readme/languages/chinese.md b/scripts/markdown/readme/languages/chinese.md
index cd672cff6e..bc032c6c6a 100644
--- a/scripts/markdown/readme/languages/chinese.md
+++ b/scripts/markdown/readme/languages/chinese.md
@@ -16,93 +16,150 @@
 </div>
 
 <p align="center">
-    <a href="http://www.nocodb.com"><b>Website</b></a> •
+    <a href="http://www.nocodb.com"><b>官网</b></a> •
     <a href="https://discord.gg/5RgZmkW"><b>Discord</b></a> •
     <a href="https://twitter.com/nocodb"><b>Twitter</b></a> •
     <a href="https://www.reddit.com/r/NocoDB/"><b>Reddit</b></a> •
-    <a href="https://docs.nocodb.com/"><b>Documentation</b></a>
-</p>  
+    <a href="https://docs.nocodb.com/"><b>文档</b></a>
+</p>
 
 ![OpenSourceAirtableAlternative](https://user-images.githubusercontent.com/5435402/133762127-e94da292-a1c3-4458-b09a-02cd5b57be53.png)
 
 <img src="https://static.scarf.sh/a.png?x-pxid=c12a77cc-855e-4602-8a0f-614b2d0da56a" />
 
 <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>
+    <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 - 开源的 Airtable 替代品 | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 </p>
 
 # 快速尝试
-### 一键式部署
+
+### 一键部署
+
+在部署之前，请确保你有一个 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="Deploy NocoDB to Heroku with 1-Click" 
+    alt="一键部署 NocoDB 到 Heroku" 
     />
 </a>
 <br>
 
-### 使用Docker
-```bash
-docker run -d --name nocodb -p 8080:8080 nocodb/nocodb:latest
-```
-
-- NocoDB needs a database as input : See [Production Setup](https://github.com/nocodb/nocodb/blob/master/README.md#production-setup).
-- 要使用数据持久化，你可以挂载到 `/usr/app/data/`。
+## NPX
 
-  示例:
+如果你需要一个交互式的配置，你可以运行下面的命令。
 
-  ```
-  docker run -d -p 8080:8080 --name nocodb -v "$(pwd)"/nocodb:/usr/app/data/ nocodb/nocodb:latest
-  ```
-
-### 使用NPM
 ```
 npx create-nocodb-app
 ```
-### 使用git
-```
+
+<img src="https://user-images.githubusercontent.com/35857179/163672964-00ef5d62-0434-447d-ac01-3ebb780099b9.png" width="520px"/>
+
+## Node 应用程序
+
+我们提供了一个简单的 NodeJS 应用程序以供入门。
+
+```bash
 git clone https://github.com/nocodb/nocodb-seed
 cd nocodb-seed
 npm install
 npm start
 ```
 
-### GUI
+## Docker 部署
+
+```bash
+# 如果使用 SQLite 的话
+docker run -d --name nocodb \
+-v "$(pwd)"/nocodb:/usr/app/data/ \
+-p 8080:8080 \
+nocodb/nocodb:latest
+
+# 如果使用 MySQL 的话
+docker run -d --name nocodb-mysql \
+-v "$(pwd)"/nocodb:/usr/app/data/ \
+-p 8080:8080 \
+-e NC_DB="mysql2://host.docker.internal:3306?u=root&p=password&d=d1" \
+-e NC_AUTH_JWT_SECRET="569a1821-0a93-45e8-87ab-eb857f20a010" \
+nocodb/nocodb:latest
+
+# 如果使用 PostgreSQL 的话
+docker run -d --name nocodb-postgres \
+-v "$(pwd)"/nocodb:/usr/app/data/ \
+-p 8080:8080 \
+-e NC_DB="pg://host.docker.internal:5432?u=root&p=password&d=d1" \
+-e NC_AUTH_JWT_SECRET="569a1821-0a93-45e8-87ab-eb857f20a010" \
+nocodb/nocodb:latest
+
+# 如果使用 MSSQL 的话
+docker run -d --name nocodb-mssql \
+-v "$(pwd)"/nocodb:/usr/app/data/ \
+-p 8080:8080 \
+-e NC_DB="mssql://host.docker.internal:1433?u=root&p=password&d=d1" \
+-e NC_AUTH_JWT_SECRET="569a1821-0a93-45e8-87ab-eb857f20a010" \
+nocodb/nocodb:latest
+```
+
+> 你可以通过在 0.10.6 以上的版本中挂载 `/usr/app/data/` 来持久化数据，否则你的数据会在重新创建容器后完全丢失。
 
-使用仪表板使用 : [http://localhost:8080/dashboard](http://localhost:8080/dashboard)
+> 如果你打算输入一些特殊字符，你可能需要在创建数据库时改变字符集和排序。请查看[MySQL Docker](https://github.com/nocodb/nocodb/issues/1340#issuecomment-1049481043)的例子。
 
+## Docker Compose
+
+我们在[这个目录](https://github.com/nocodb/nocodb/tree/master/docker-compose)下提供了不同的 docker-compose.yml 文件。下面是一些例子：
+
+```bash
+git clone https://github.com/nocodb/nocodb
+# 如果使用 MySQL 的话
+cd nocodb/docker-compose/mysql
+# 如果使用 PostgreSQL 的话
+cd nocodb/docker-compose/pg
+# 如果使用 MSSQL 的话
+cd nocodb/docker-compose/mssql
+docker-compose up -d
+```
+
+> 你可以通过在 0.10.6 以上的版本中挂载 `/usr/app/data/` 来持久化数据，否则你的数据会在重新创建容器后完全丢失。
+
+> 如果你打算输入一些特殊字符，你可能需要在创建数据库时改变字符集和排序。请查看[MySQL Docker Compose](https://github.com/nocodb/nocodb/issues/1313#issuecomment-1046625974)的例子。
+
+# GUI
+
+点击 [http://localhost:8080/dashboard](http://localhost:8080/dashboard) 打开仪表盘。
 
 # 加入我们的社区
-<a href="https://discord.gg/5RgZmkW">
+
+<a href="https://discord.gg/5RgZmkW" target="_blank">
 <img src="https://discordapp.com/api/guilds/661905455894888490/widget.png?style=banner3" alt="">
 </a>
-<br>
-<br>
+<a href="https://community.nocodb.com/" target="_blank">
+<img src="https://i2.wp.com/www.feverbee.com/wp-content/uploads/2018/07/logo-discourse.png" alt="">
+</a>
 
 # 截图
 
 ![1](https://user-images.githubusercontent.com/86527202/136066713-5408634f-5469-40eb-94c9-7eafae5e179c.png)
 <br>
 
-![2](https://user-images.githubusercontent.com/86527202/136066729-9b6a261a-231d-4d7f-9fc2-061c301d6192.png)
+![2](https://user-images.githubusercontent.com/86527202/168545293-b48a4237-8646-4f9a-a56b-56d5c55adc79.jpg)
 <br>
 
 ![5](https://user-images.githubusercontent.com/86527202/136066734-3f25aecc-bb7e-4db7-81c4-00b368d799d3.png)
 <br>
 
-![6](https://user-images.githubusercontent.com/86527202/136066735-2d4cb656-02dc-4233-ac4a-1ba9bd8acdf0.png)
+![6](https://user-images.githubusercontent.com/86527202/168545527-3948125d-1640-4c07-ac80-15db9a85f66f.jpg)
 <br>
 
-![7](https://user-images.githubusercontent.com/86527202/136066737-eb6a56fb-5e2e-4423-912b-ced32e8b479c.png)
+![7](https://user-images.githubusercontent.com/86527202/168545772-dfbffe13-bcf6-4a49-8a10-1bc8a933d77e.jpg)
 <br>
 
-![8](https://user-images.githubusercontent.com/86527202/136066742-94c7eff7-d88e-4002-ad72-ffd23090847c.png)
+![8](https://user-images.githubusercontent.com/86527202/168545839-0ba950a4-400f-45b2-b2db-b22b1853af4a.jpg)
 <br>
 
-![9](https://user-images.githubusercontent.com/86527202/136066743-1b4030c5-042f-4338-99b0-06237878ce53.png)
+![9](https://user-images.githubusercontent.com/86527202/168545872-c2a4b63a-9dc9-4c12-add7-69d5f4d0a6e1.jpg)
 <br>
 
 ![9a](https://user-images.githubusercontent.com/86527202/136066745-9797775d-7db0-4681-ab10-d7ecbbd972ef.png)
@@ -117,83 +174,112 @@ npm start
 ![11](https://user-images.githubusercontent.com/86527202/136066756-fc203c2c-570e-4514-b9f4-2a41ac24e5dd.png)
 <br>
 
-# 特征
+# 功能
+
 ### 丰富的电子表格功能
 
-- ⚡ 搜索，排序，过滤，隐藏列
-- ⚡ 创建视图：网格，画廊，看板，甘特图，表单
-- ⚡ 分享视图：公开 或 密码保护
-- ⚡ 个人和锁定视图
-- ⚡ 将图像上传到单元格（使用S3，Minio，GCP，Azure，DigitalOcean，Linode，OVH，Backblaze）
-- ⚡ 角色：所有者，创建者，编辑器，查看器，评论者，自定义角色。
-- ⚡ 访问控制：在 `数据库`、`表`、`列` 级别的访问控制。
-
-### 工作流自动化应用商店：
-- ⚡ 聊天：微软Teams，Slack，Discord，Mattermost
-- ⚡ 电子邮件：SMTP，SES，MailChimp
-- ⚡ 短信：Twilio
-- ⚡ whatsapp
-- ⚡ 任何第三方API
-
-### Programmatic API访问通过：
-- ⚡ REST API (Swagger)
-- ⚡ GraphQL API
-- ⚡ JWT身份验证和社交验证
-- ⚡ 与Zapier，Integromat集成的API
-
-# 生产安装
-NoCodb 要求一个数据库用来存储电子表格视图和外部元数据。可以在`NC_DB`环境变量中指定此数据库的连接参数。
-
-## Docker
-
-#### MySQL 示例
-```bash
-docker run -d -p 8080:8080 \
-    -e NC_DB="mysql2://host.docker.internal:3306?u=root&p=password&d=d1" \
-    -e NC_AUTH_JWT_SECRET="569a1821-0a93-45e8-87ab-eb857f20a010" \
-    nocodb/nocodb:latest
-```
+- ⚡ 基本操作：对表、列和行进行增删改查
+- ⚡ 字段操作：排序、过滤、隐藏/取消隐藏列
+- ⚡ 多种视图：网格（默认）、画廊和表单视图
+- ⚡ 视图权限：协作视图和锁定的视图
+- ⚡ 分享基础/视图：公开或私人（有密码保护）
+- ⚡ 多种单元格类型：ID、链接到另一记录、查找、滚动、单行文本、附件、货币、公式等
+- ⚡ 基于角色的访问控制：不同层次的精细化地控制访问
+- ⚡ 以及更多......
 
-#### Postgres 示例
-```bash
-docker run -d -p 8080:8080 \
-    -e NC_DB="pg://host:port?u=user&p=password&d=database" \
-    -e NC_AUTH_JWT_SECRET="569a1821-0a93-45e8-87ab-eb857f20a010" \
-    nocodb/nocodb:latest
+### 工作流程自动化的应用商店
+
+我们在三个主要类别中提供不同的集成。详见<a href="https://docs.nocodb.com/setup-and-usages/app-store" target="_blank">App Store</a>。
+
+- ⚡ 聊天：Slack、Discord、Mattermost 等
+- ⚡ 电子邮件: AWS SES，SMTP，MailerSend 等
+- ⚡ 存储：AWS S3，Google Cloud Storage，Minio 等
+
+### 使用 API 编程访问
+
+我们提供以下方式让用户以编程方式调用操作。 您可以使用 Token（JWT 或 Social Auth）来签署您对 NocoDB 授权的请求。
+
+- ⚡ &nbsp;REST APIs
+- ⚡ &nbsp;NocoDB SDK
+
+### 架构同步
+
+如果您在 NocoDB GUI 之外进行了更改，我们允许您同步架构更改。 但是，必须注意的是，您必须附有自己的迁移架构才能从一个环境迁移到其他环境。 有关详细信息，请参阅 <a href="https://docs.nocodb.com/setup-and-usages/sync-schema/" target="_blank">同步架构</a>。
+
+### 审计
+
+我们将所有用户操作日志保存在一起。 有关详细信息，请参阅 <a href="https://docs.nocodb.com/setup-and-usages/audit" target="_blank">审计</a>。
+
+# 生产部署
+
+默认情况下使用 SQLite 存储元数据。你也可以指定你自己的数据库。这个数据库的连接参数可以在 `NC_DB` 环境变量中指定。此外，我们还提供以下环境变量进行配置：
+
+## 环境变量
+
+参见[环境变量](https://docs.nocodb.com/getting-started/installation#environment-variables)
+
+# 开发
+
+## 拉取项目
+
+```shell
+git clone https://github.com/nocodb/nocodb
+cd nocodb
 ```
 
-#### SQL Server 示例
-```bash
-docker run -d -p 8080:8080 \
-    -e NC_DB="mssql://host:port?u=user&p=password&d=database" \
-    -e NC_AUTH_JWT_SECRET="569a1821-0a93-45e8-87ab-eb857f20a010" \
-    nocodb/nocodb:latest
+## 本地运行后端
+
+```shell
+cd packages/nocodb
+npm install
+npm run watch:run
+# 在浏览器中打开 localhost:8080/dashboard
 ```
 
-## Docker Compose
-```bash
-git clone https://github.com/nocodb/nocodb
-cd docker-compose
-cd mysql or pg or mssql
-docker-compose up -d
+## 本地运行前端
+
+```shell
+cd packages/nc-gui
+npm install
+npm run dev
+# 在浏览器中打开 localhost:3000/dashboard
 ```
 
-## 环境变量
+修改代码后会自动重新启动。
+
+> nocodb/packages/nocodb 包括 nc-lib-gui，它是 npm 源中托管的 nc-gui 的预构建版本。如果您只想修改后端，则可以在本地启动后端后在浏览器中访问 localhost:8000/dashboard
 
-Please refer to [Environment variables](https://docs.nocodb.com/getting-started/installation#environment-variables)
+## 本地运行 Cypress 测试
+
+```shell
+# 安装依赖 (cypress)
+npm install
 
-# 开发安装
+# 使用 docker compose 运行带有所需数据库的 mysql 数据库
+docker-compose -f ./scripts/docker-compose-cypress.yml up
 
-Please refer to [Development Setup](https://github.com/nocodb/nocodb/tree/master#development-setup)
+# 使用以下命令运行后端 api
+npm run start:api
+
+# 使用以下命令运行前端 Web UI
+npm run start:web
+
+# 等待 3000 和 8080 端口都可用后
+# 使用以下命令运行 cypress 测试
+npm run cypress:run
+
+# 或运行以下命令以使用 GUI 运行它
+npm run cypress:open
+```
 
 # 贡献
 
-Please refer to [Contribution Guide](https://github.com/nocodb/nocodb/blob/master/.github/CONTRIBUTING.md).
+参见[贡献指南](https://github.com/nocodb/nocodb/blob/master/.github/CONTRIBUTING.md).
 
-# 为什么我们建立这个？
+# 我们为什么要做这个？
 
-大多数互联网业务都配备了电子表格或数据库以解决其业务需求，每天有上亿人使用电子表格。我们基于数据库运行更强大的工具能更高效地完成工作。用SaaS产品解决此问题的尝试已经意味着可怕的访问控制，供应商锁定，数据锁定，突然的价格变化，甚至是将来可能会阻碍发展。
+大多数互联网企业都为自己配备了电子表格或数据库来解决他们的业务需求。每天有十亿多人协作使用电子表格。然而，我们在数据库上以类似的效率工作还有很长的路要走，这些数据库在计算方面是更强大的工具。使用 SaaS 产品解决这个问题意味着可怕的访问控制、供应商锁定、数据锁定、突然的价格变化以及最重要的是未来可能出现的玻璃天花板。
 
 # 我们的任务
 
-我们的使命是为数据库提供最强大的无码界面，为世界上每一个互联网业务的开源使用。这不仅将民主化带给强大的计算工具，还将为数亿人增强他们的创造力。
+我们的使命是为数据库提供最强大的无代码接口，并向世界上每一个互联网企业开放源代码。这不仅能让这个强大的计算工具开放给每个人，而且10亿或更多的人将会在互联网上拥有激进的修补和建设能力。