diff --git a/.all-contributorsrc b/.all-contributorsrc
index c5433eaecb..7ddc814bef 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -765,6 +765,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "youyiio",
+      "name": "youyiio",
+      "avatar_url": "https://avatars.githubusercontent.com/u/49471274?v=4",
+      "profile": "https://www.youyi.io",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
diff --git a/README.md b/README.md
index 61cf060ea4..d468acce1f 100644
--- a/README.md
+++ b/README.md
@@ -447,6 +447,9 @@ Our mission is to provide the most powerful no-code interface for databases whic
     <td align="center"><a href="http://blog.mukyu.tw/"><img src="https://avatars.githubusercontent.com/u/6008539?v=4?s=100" width="100px;" alt=""/><br /><sub><b>神楽坂帕琪</b></sub></a><br /><a href="https://github.com/nocodb/nocodb/commits?author=mudream4869" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/titouancreach"><img src="https://avatars.githubusercontent.com/u/3995719?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Titouan CREACH</b></sub></a><br /><a href="https://github.com/nocodb/nocodb/commits?author=titouancreach" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://www.youyi.io"><img src="https://avatars.githubusercontent.com/u/49471274?v=4?s=100" width="100px;" alt=""/><br /><sub><b>youyiio</b></sub></a><br /><a href="https://github.com/nocodb/nocodb/commits?author=youyiio" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->
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..e8f80c4a4c
--- /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" 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 81%
rename from packages/nc-gui/components/import/excelImport.vue
rename to packages/nc-gui/components/import/QuickImport.vue
index 9a4921b311..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,13 +60,13 @@
                       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
                       :rules="[v => !!v || $t('general.required') ]"
                     />
-                    <v-btn class="ml-3" color="primary" @click="loadUrl">
+                    <v-btn v-t="['c:project:create:excel:load-url']" class="ml-3" color="primary" @click="loadUrl">
                       <!--Load-->
                       {{ $t('general.load') }}
                     </v-btn>
@@ -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 {
@@ -266,7 +288,7 @@ export default {
             templateGenerator = new ExcelTemplateAdapter(name, val, this.parserConfig)
             break
           case 'url':
-            templateGenerator = new ExcelUrlTemplateAdapter(val, this.$store, this.parserConfig)
+            templateGenerator = new ExcelUrlTemplateAdapter(val, this.$store, this.parserConfig, this.$api)
             break
         }
         await templateGenerator.init()
@@ -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/import/templateParsers/ExcelTemplateAdapter.js b/packages/nc-gui/components/import/templateParsers/ExcelTemplateAdapter.js
index 37dfd37bae..b1964ae5a6 100644
--- a/packages/nc-gui/components/import/templateParsers/ExcelTemplateAdapter.js
+++ b/packages/nc-gui/components/import/templateParsers/ExcelTemplateAdapter.js
@@ -42,7 +42,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
       }
       tableNamePrefixRef[tn] = 0
 
-      const table = { tn, refTn: tn, columns: [] }
+      const table = { table_name: tn, ref_table_name: tn, columns: [] }
       this.data[tn] = []
       const ws = this.wb.Sheets[sheet]
       const range = XLSX.utils.decode_range(ws['!ref'])
@@ -79,8 +79,8 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
         columnNamePrefixRef[cn] = 0
 
         const column = {
-          cn,
-          refCn: cn
+          column_name: cn,
+          ref_column_name: cn
         }
 
         table.columns.push(column)
diff --git a/packages/nc-gui/components/import/templateParsers/ExcelUrlTemplateAdapter.js b/packages/nc-gui/components/import/templateParsers/ExcelUrlTemplateAdapter.js
index 6c8e774f76..a263ccc0fd 100644
--- a/packages/nc-gui/components/import/templateParsers/ExcelUrlTemplateAdapter.js
+++ b/packages/nc-gui/components/import/templateParsers/ExcelUrlTemplateAdapter.js
@@ -1,20 +1,22 @@
 import ExcelTemplateAdapter from '~/components/import/templateParsers/ExcelTemplateAdapter'
 
 export default class ExcelUrlTemplateAdapter extends ExcelTemplateAdapter {
-  constructor(url, $store, parserConfig) {
+  constructor(url, $store, parserConfig, $api) {
     const name = url.split('/').pop()
     super(name, null, parserConfig)
     this.url = url
+    this.$api = $api
     this.$store = $store
   }
 
   async init() {
-    const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'handleAxiosCall',
-      [{
+    const data = await this.$api.utils.axiosRequestMake({
+      apiMeta: {
         url: this.url,
         responseType: 'arraybuffer'
-      }]])
-    this.excelData = res.data
+      }
+    })
+    this.excelData = data.data
     await super.init()
   }
 }
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 78%
rename from packages/nc-gui/components/project/spreadsheet/components/cell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/Cell.vue
index 18fc8a16cc..d19ab48087 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/Cell.vue
@@ -20,16 +20,16 @@
 </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'
 
 export default {
   name: 'TableCell',
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 81%
rename from packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
rename to packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
index 7f99d1913f..0f1b4d1f6a 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"
@@ -225,7 +228,7 @@
                                           v-model="newColumn.rqd"
                                           :disabled="
                                             newColumn.pk ||
-                                            !sqlUi.columnEditable(newColumn)
+                                              !sqlUi.columnEditable(newColumn)
                                           "
                                           class="mr-2 mt-0"
                                           dense
@@ -239,8 +242,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >NN</span
-                                            >
+                                            >NN</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -267,8 +269,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >PK</span
-                                            >
+                                            >PK</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -285,7 +286,7 @@
                                             sqlUi.colPropUNDisabled(
                                               newColumn
                                             ) ||
-                                            !sqlUi.columnEditable(newColumn)
+                                              !sqlUi.columnEditable(newColumn)
                                           "
                                           class="mr-2 mt-0"
                                           dense
@@ -299,8 +300,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >AI</span
-                                            >
+                                            >AI</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -321,7 +321,7 @@
                                             sqlUi.colPropUNDisabled(
                                               newColumn
                                             ) ||
-                                            !sqlUi.columnEditable(newColumn)
+                                              !sqlUi.columnEditable(newColumn)
                                           "
                                           @change="
                                             newColumn.altered =
@@ -331,8 +331,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >UN</span
-                                            >
+                                            >UN</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -353,7 +352,7 @@
                                             sqlUi.colPropAuDisabled(
                                               newColumn
                                             ) ||
-                                            !sqlUi.columnEditable(newColumn)
+                                              !sqlUi.columnEditable(newColumn)
                                           "
                                           @change="
                                             newColumn.altered =
@@ -363,8 +362,7 @@
                                           <template #label>
                                             <span
                                               class="caption font-weight-bold"
-                                              >AU</span
-                                            >
+                                            >AU</span>
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -483,13 +481,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,19 +516,19 @@
 </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'
 
 export default {
-  name: "EditColumn",
+  name: 'EditColumn',
   components: {
     RollupOptions,
     FormulaOptions,
@@ -539,7 +536,7 @@ export default {
     LinkedToAnotherOptions,
     DlgLabelSubmitCancel,
     RelationOptions,
-    CustomSelectOptions,
+    CustomSelectOptions
   },
   props: {
     nodes: Object,
@@ -548,13 +545,13 @@ export default {
     editColumn: Boolean,
     column: Object,
     columnIndex: Number,
-    value: Boolean,
+    value: Boolean
   },
   data: () => ({
     valid: false,
     relationDeleteDlg: false,
     newColumn: {},
-    advanceOptions: false,
+    advanceOptions: false
   }),
   computed: {
     accordion() {
@@ -563,42 +560,42 @@ 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'
     },
     isRollup() {
-      return this.newColumn && this.newColumn.uidt === "Rollup";
+      return this.newColumn && this.newColumn.uidt === 'Rollup'
     },
     relation() {
       return (
@@ -606,135 +603,135 @@ 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,
         rqd: false,
@@ -742,74 +739,74 @@ export default {
         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;
+      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 80%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
index 21430fea29..ee41ca63ca 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
@@ -116,22 +116,22 @@
 
 <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'
 
 export default {
   name: 'EditableCell',
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 7c1e85b9e6..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-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/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
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/cell/urlCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/UrlCell.vue
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/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/editableCell/booleanCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/BooleanCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/booleanCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/BooleanCell.vue
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 100%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/editableUrlCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/EditableUrlCell.vue
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/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/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 82%
rename from packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
rename to packages/nc-gui/components/project/spreadsheet/views/GridView.vue
index e5faaf2893..87416c0d18 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,101 @@ 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;
+              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;
+              return
             }
 
-            this.$set(rowObj, columnObj.title, null);
+            this.$set(rowObj, columnObj.title, null)
             // update/save cell value
             this.onCellValueChange(
               this.selected.col,
               this.selected.row,
               columnObj,
               true
-            );
+            )
           }
-          break;
+          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 +710,7 @@ export default {
           }
 
           if (e.ctrlKey || e.altKey || e.metaKey) {
-            return;
+            return
           }
 
           if (e.key && e.key.length === 1) {
@@ -714,15 +719,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 }
           }
         }
       }
@@ -734,77 +739,77 @@ export default {
         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].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) {
@@ -817,37 +822,37 @@ export default {
         (column && column.uidt === UITypes.Time) ||
         (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">
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
new file mode 100644
index 0000000000..b5d31fa484
--- /dev/null
+++ b/packages/nc-gui/components/templates/CreateProjectFromTemplateBtn.vue
@@ -0,0 +1,302 @@
+<template>
+  <div>
+    <v-btn
+      :loading="projectCreation"
+      :disabled="projectCreation"
+      class="primary nc-btn-use-template"
+      x-large
+      @click="useTemplate('rest')"
+    >
+      <slot>Use template</slot>
+    </v-btn>
+  </div>
+</template>
+
+<script>
+import { SqlUiFactory } from 'nocodb-sdk'
+import colors from '~/mixins/colors'
+
+export default {
+  name: 'CreateProjectFromTemplateBtn',
+  mixins: [colors],
+  props: {
+    quickImport: Boolean,
+    loading: Boolean,
+    importToProject: Boolean,
+    templateData: [Array, Object],
+    importData: [Array, Object],
+    valid: {
+      default: true,
+      type: Boolean
+    },
+    validationErrorMsg: {
+      default: 'Please fill all the required values',
+      type: String
+    },
+    createGqlText: {
+      default: 'Create GQL Project',
+      type: String
+    },
+    createRestText: {
+      default: 'Create REST Project',
+      type: String
+    }
+  },
+  data() {
+    return {
+      localTemplateData: null,
+      projectCreation: false,
+      tableCreation: false,
+      loaderMessagesIndex: 0,
+      loaderMessages: [
+        'Setting up new database configs',
+        'Inferring database schema',
+        'Generating APIs.',
+        'Generating APIs..',
+        'Generating APIs...',
+        'Generating APIs....',
+        'Please wait',
+        'Please wait.',
+        'Please wait..',
+        'Please wait...',
+        'Please wait..',
+        'Please wait.',
+        'Please wait',
+        'Please wait.',
+        'Please wait..',
+        'Please wait...',
+        'Please wait..',
+        'Please wait.',
+        'Please wait..',
+        'Please wait...'
+      ]
+    }
+  },
+  watch: {
+    templateData: {
+      deep: true,
+      handler(data) {
+        this.localTemplateData = JSON.parse(JSON.stringify(data))
+      }
+    }
+  },
+  created() {
+    this.localTemplateData = JSON.parse(JSON.stringify(this.templateData))
+  },
+
+  methods: {
+    async useTemplate(projectType) {
+      if (!this.valid) {
+        return this.$toast.error(this.validationErrorMsg).goAway(3000)
+      }
+
+      // this.$emit('useTemplate', type)
+      // this.projectCreation = true
+      let interv
+      try {
+        interv = setInterval(() => {
+          this.loaderMessagesIndex = this.loaderMessagesIndex < this.loaderMessages.length - 1 ? this.loaderMessagesIndex + 1 : 6
+          this.$store.commit('loader/MutMessage', this.loaderMessages[this.loaderMessagesIndex])
+        }, 1000)
+
+        const projectId = this.$store.state.project.project.id
+        let firstTable = null
+
+        // Not available now
+        if (this.importToProject) {
+          // this.$store.commit('loader/MutMessage', 'Importing excel template')
+
+          // const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
+          //   // todo: extract based on active
+          //   dbAlias: 'db', // this.nodes.dbAlias,
+          //   env: '_noco'
+          // }, 'xcModelsCreateFromTemplate', {
+          //   template: this.templateData
+          // }])
+
+          // if (res && res.tables && res.tables.length) {
+          //   this.$toast.success(`Imported ${res.tables.length} tables successfully`).goAway(3000)
+          // } else {
+          //   this.$toast.success('Template imported successfully').goAway(3000)
+          // }
+
+          // projectId = this.$route.params.project_id
+          // prefix = this.$store.getters['project/GtrProjectPrefix']
+        } else {
+          // 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: this.$store.state.project.project.bases[0].type })
+                .getNewTableColumns()
+                .filter(c => c.column_name !== 'title')
+
+              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
+              })
+              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) {
+            this.$toast
+              .error(await this._extractSdkResponseErrorMsg(e))
+              .goAway(3000)
+            this.tableCreation = false
+          } finally {
+            clearInterval(interv)
+          }
+        }
+
+        if (!this.tableCreation) {
+          // failed to create table
+          return
+        }
+
+        // Bulk import data
+        if (this.importData) {
+          this.$store.commit('loader/MutMessage', 'Importing excel data to project')
+          await this.importDataToProject()
+        }
+
+        // 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'
+                }
+              })
+            })
+          })
+        })
+
+        // confetti effect
+        this.simpleAnim()
+      } catch (e) {
+        console.log(e)
+        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() {
+      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]
+        total += data.length
+        for (let i = 0; i < data.length; i += 500) {
+          this.$store.commit('loader/MutMessage', `Importing data to ${projectName}: ${progress}/${total} records`)
+          this.$store.commit('loader/MutProgress', Math.round(progress && 100 * progress / total))
+          const batchData = this.remapColNames(data.slice(i, i + 500), tableMeta.columns)
+          await this.$api.dbTableRow.bulkCreate(
+            'noco',
+            projectName,
+            tableName,
+            batchData
+          )
+          progress += batchData.length
+        }
+        this.$store.commit('loader/MutClear')
+      })(v)))
+    },
+    remapColNames(batchData, columns) {
+      return batchData.map(data => (columns || []).reduce((aggObj, col) => ({
+        ...aggObj,
+        [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>
+
+<style scoped>
+
+</style>
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 61%
rename from packages/nc-gui/components/templates/editor.vue
rename to packages/nc-gui/components/templates/Editor.vue
index 30f4840b45..b293460bfc 100644
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/packages/nc-gui/components/templates/Editor.vue
@@ -10,7 +10,9 @@
               v-on="on"
               @click="$toast.info('Happy hacking!').goAway(3000)"
             >
-              <v-icon small class="mr-1"> mdi-file-excel-outline </v-icon>
+              <v-icon small class="mr-1">
+                mdi-file-excel-outline
+              </v-icon>
               Import
             </v-btn>
           </template>
@@ -24,11 +26,15 @@
         </v-icon>
 
         <v-btn small outlined class="mr-1" @click="project = { tables: [] }">
-          <v-icon small> mdi-close </v-icon>
+          <v-icon small>
+            mdi-close
+          </v-icon>
           Reset
         </v-btn>
         <v-btn small outlined class="mr-1" @click="createTableClick">
-          <v-icon small> mdi-plus </v-icon>
+          <v-icon small>
+            mdi-plus
+          </v-icon>
           New table
         </v-btn>
         <v-btn
@@ -54,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" : ""
                   }}
@@ -118,15 +106,22 @@
                       </span>
 
                       <v-spacer />
-                      <v-icon
-                        v-if="!viewMode"
-                        class="flex-grow-0 mr-2"
-                        small
-                        color="grey"
-                        @click.stop="deleteTable(i)"
-                      >
-                        mdi-delete-outline
-                      </v-icon>
+                      <v-tooltip bottom>
+                        <template #activator="{ on }">
+                          <v-icon
+                            v-if="!viewMode && project.tables.length > 1"
+                            class="flex-grow-0 mr-2"
+                            small
+                            color="grey"
+                            @click.stop="deleteTable(i)"
+                            v-on="on"
+                          >
+                            mdi-delete-outline
+                          </v-icon>
+                        </template>
+                        <!-- TODO: i18n -->
+                        <span>Delete Table</span>
+                      </v-tooltip>
                     </v-expansion-panel-header>
                     <v-expansion-panel-content>
                       <!--                <v-toolbar>
@@ -227,22 +222,22 @@
                                   <span
                                     v-if="isRelation(col)"
                                     class="caption pointer primary--text"
-                                    @click="navigateToTable(col.rtn)"
+                                    @click="navigateToTable(col.ref_table_name)"
                                   >
-                                    {{ col.rtn }}
+                                    {{ col.ref_table_name }}
                                   </span>
                                   <template v-else-if="isLookup(col)">
                                     <span
                                       class="caption pointer primary--text"
                                       @click="
                                         navigateToTable(
-                                          col.rtn && col.rtn.table_name
+                                          col.ref_table_name && col.ref_table_name.table_name
                                         )
                                       "
                                     >
-                                      {{ col.rtn && col.rtn.table_name }}
+                                      {{ col.ref_table_name && col.ref_table_name.table_name }}
                                     </span>
-                                    <span class="caption">({{ col.rcn }})</span>
+                                    <span class="caption">({{ col.ref_column_name }})</span>
                                   </template>
 
                                   <template v-else-if="isRollup(col)">
@@ -250,11 +245,11 @@
                                       class="caption pointer primary--text"
                                       @click="
                                         navigateToTable(
-                                          col.rtn && col.rtn.table_name
+                                          col.ref_table_name && col.ref_table_name.table_name
                                         )
                                       "
                                     >
-                                      {{ col.rtn && col.rtn.table_name }}
+                                      {{ col.ref_table_name && col.ref_table_name.table_name }}
                                     </span>
                                     <span class="caption">({{ col.fn }})</span>
                                   </template>
@@ -270,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"
@@ -281,13 +276,13 @@
                                     :items="
                                       col.uidt === 'ForeignKey'
                                         ? [
-                                            ...uiTypes,
-                                            {
-                                              name: 'ForeignKey',
-                                              icon: 'mdi-link-variant',
-                                              virtual: 1,
-                                            },
-                                          ]
+                                          ...uiTypes,
+                                          {
+                                            name: 'ForeignKey',
+                                            icon: 'mdi-link-variant',
+                                            virtual: 1,
+                                          },
+                                        ]
                                         : uiTypes
                                     "
                                     item-text="name"
@@ -332,7 +327,7 @@
                                 >
                                   <td class="pa-1 text-left">
                                     <v-autocomplete
-                                      :value="col.rtn"
+                                      :value="col.ref_table_name"
                                       placeholder="Related table"
                                       outlined
                                       class="caption"
@@ -346,9 +341,9 @@
                                       :items="
                                         isLookupOrRollup(col)
                                           ? getRelatedTables(
-                                              table.table_name,
-                                              isRollup(col)
-                                            )
+                                            table.table_name,
+                                            isRollup(col)
+                                          )
                                           : project.tables
                                       "
                                       :item-text="
@@ -366,7 +361,7 @@
                                       :value-comparator="compareRel"
                                       @input="
                                         (v) =>
-                                          onRtnChange(col.rtn, v, col, table)
+                                          onRtnChange(col.ref_table_name, v, col, table)
                                       "
                                     />
                                   </td>
@@ -406,12 +401,12 @@
                                   </td>
                                   <td v-if="isLookupOrRollup(col)" class="pa-1">
                                     <span v-if="viewMode" class="caption">
-                                      {{ col.rcn }}
+                                      {{ col.ref_column_name }}
                                     </span>
 
                                     <v-autocomplete
                                       v-else
-                                      v-model="col.rcn"
+                                      v-model="col.ref_column_name"
                                       placeholder="Related table column"
                                       outlined
                                       dense
@@ -426,9 +421,9 @@
                                           project.tables.find(
                                             (t) =>
                                               t.table_name ===
-                                              ((col.rtn &&
-                                                col.rtn.table_name) ||
-                                                col.rtn)
+                                              ((col.ref_table_name &&
+                                                col.ref_table_name.table_name) ||
+                                                col.ref_table_name)
                                           ) || { columns: [] }
                                         ).columns.filter((v) => !isVirtual(v))
                                       "
@@ -477,96 +472,164 @@
                                   v-if="!isRollup(col)"
                                   :colspan="
                                     isLookupOrRollup(col) ||
-                                    isRelation(col) ||
-                                    isSelect(col)
+                                      isRelation(col) ||
+                                      isSelect(col)
                                       ? isRollup(col)
                                         ? 0
                                         : 1
                                       : 3
                                   "
                                 />
-                                <td style="max-width: 50px; width: 50px">
-                                  <v-icon
-                                    v-if="!viewMode"
-                                    class="flex-grow-0"
-                                    small
-                                    color="grey"
-                                    @click.stop="
-                                      deleteTableColumn(i, j, col, table)
-                                    "
-                                  >
-                                    mdi-delete-outline
-                                  </v-icon>
+                                <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
+                                        class="flex-grow-0"
+                                        small
+                                        color="grey"
+                                        @click.stop="
+                                          deleteTableColumn(i, j, col, table)
+                                        "
+                                        v-on="on"
+                                      >
+                                        mdi-delete-outline
+                                      </v-icon>
+                                    </template>
+                                    <!-- TODO: i18n -->
+                                    <span>Delete Column</span>
+                                  </v-tooltip>
                                 </td>
                               </template>
                             </tr>
-
-                            <!--                  <tr>-->
-                            <!--                    <td colspan='4' class='text-center pa-2'>-->
-                            <!--                    </td>-->
-                            <!--                  </tr>-->
                           </tbody>
                         </v-simple-table>
 
                         <div v-if="!viewMode" class="text-center">
-                          <v-icon
-                            class="mx-2"
-                            small
-                            @click="addNewColumnRow(table, 'Number')"
-                          >
-                            {{ getIcon("Number") }}
-                          </v-icon>
-                          <v-icon
-                            class="mx-2"
-                            small
-                            @click="addNewColumnRow(table, 'SingleLineText')"
-                          >
-                            {{ getIcon("SingleLineText") }}
-                          </v-icon>
-                          <v-icon
-                            class="mx-2"
-                            small
-                            @click="addNewColumnRow(table, 'LongText')"
-                          >
-                            {{ getIcon("LongText") }}
-                          </v-icon>
-                          <v-icon
-                            class="mx-2"
-                            small
-                            @click="
-                              addNewColumnRow(table, 'LinkToAnotherRecord')
-                            "
-                          >
-                            {{ getIcon("LinkToAnotherRecord") }}
-                          </v-icon>
-                          <v-icon
-                            class="mx-2"
-                            small
-                            @click="addNewColumnRow(table, 'Lookup')"
-                          >
-                            {{ getIcon("Lookup") }}
-                          </v-icon>
-                          <v-icon
-                            class="mx-2"
-                            small
-                            @click="addNewColumnRow(table, 'Rollup')"
-                          >
-                            {{ getIcon("Rollup") }}
-                          </v-icon>
-                          <v-btn
-                            class="mx-2"
-                            small
-                            @click="addNewColumnRow(table)"
-                          >
-                            + column
-                          </v-btn>
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-icon
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table, 'Number')"
+                                v-on="on"
+                              >
+                                {{ getIcon("Number") }}
+                              </v-icon>
+                            </template>
+                            <!-- TODO: i18n -->
+                            <span>Add Number Column</span>
+                          </v-tooltip>
+
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-icon
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table, 'SingleLineText')"
+                                v-on="on"
+                              >
+                                {{ getIcon("SingleLineText") }}
+                              </v-icon>
+                            </template>
+                            <!-- TODO: i18n -->
+                            <span>Add SingleLineText Column</span>
+                          </v-tooltip>
+
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-icon
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table, 'LongText')"
+                                v-on="on"
+                              >
+                                {{ getIcon("LongText") }}
+                              </v-icon>
+                            </template>
+                            <!-- TODO: i18n -->
+                            <span>Add LongText Column</span>
+                          </v-tooltip>
+
+                          <!-- <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-icon
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table, 'LinkToAnotherRecord')"
+                                v-on="on"
+                              >
+                                {{ getIcon("LinkToAnotherRecord") }}
+                              </v-icon>
+                            </template>
+                            <span>Add LinkToAnotherRecord Column</span>
+                          </v-tooltip>
+
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-icon
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table, 'Lookup')"
+                                v-on="on"
+                              >
+                                {{ getIcon("Lookup") }}
+                              </v-icon>
+                            </template>
+                            <span>Add Lookup Column</span>
+                          </v-tooltip>
+
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-icon
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table, 'Rollup')"
+                                v-on="on"
+                              >
+                                {{ getIcon("Rollup") }}
+                              </v-icon>
+                            </template>
+                            <span>Add Rollup Column</span>
+                          </v-tooltip> -->
+
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-btn
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table)"
+                                v-on="on"
+                              >
+                                + column
+                              </v-btn>
+                            </template>
+                            <!-- TODO: i18n -->
+                            <span>Add Other Column</span>
+                          </v-tooltip>
                         </div>
                       </template>
                     </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"
@@ -604,7 +667,7 @@
                       />
                     </div>
                   </template>
-                </div>
+                </div> -->
               </v-card-text>
             </v-card>
           </v-col>
@@ -696,78 +759,82 @@
 </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";
+  UITypes
+} from '~/components/project/spreadsheet/helpers/uiTypes'
+import GradientGenerator from '~/components/templates/GradientGenerator'
+import Help from '~/components/templates/Help'
 
-const LinkToAnotherRecord = "LinkToAnotherRecord";
-const Lookup = "Lookup";
-const Rollup = "Rollup";
-const defaultColProp = {};
+const LinkToAnotherRecord = 'LinkToAnotherRecord'
+const Lookup = 'Lookup'
+const Rollup = 'Rollup'
+const defaultColProp = {}
 
 export default {
-  name: "TemplateEditor",
+  name: 'TemplateEditor',
   components: { Help, GradientGenerator },
   props: {
     id: [Number, String],
     viewMode: Boolean,
     projectTemplate: Object,
-    excelImport: Boolean,
+    quickImport: Boolean,
+    quickImportType: String
   },
   data: () => ({
     loading: false,
     localId: null,
     valid: false,
-    url: "",
+    url: '',
     githubConfigForm: false,
     helpModal: false,
     editableTn: {},
     expansionPanel: 0,
     project: {
-      name: "Project name",
-      tables: [],
+      name: 'Project name',
+      tables: []
     },
-    tableNamesInput: "",
-    columnNamesInput: "",
+    tableNamesInput: '',
+    columnNamesInput: '',
     createTablesDialog: false,
     createTableColumnsDialog: false,
     selectedTable: null,
     uiTypes: uiTypes.filter(
-      (t) => ![UITypes.Formula, UITypes.SpecificDBType].includes(t.name)
+      t => !isVirtualCol(t.name)
     ),
     rollupFnList: [
-      { text: "count", value: "count" },
-      { text: "min", value: "min" },
-      { text: "max", value: "max" },
-      { text: "avg", value: "avg" },
-      { text: "min", value: "min" },
-      { text: "sum", value: "sum" },
-      { text: "countDistinct", value: "countDistinct" },
-      { text: "sumDistinct", value: "sumDistinct" },
-      { text: "avgDistinct", value: "avgDistinct" },
+      { text: 'count', value: 'count' },
+      { text: 'min', value: 'min' },
+      { text: 'max', value: 'max' },
+      { text: 'avg', value: 'avg' },
+      { text: 'min', value: 'min' },
+      { text: 'sum', value: 'sum' },
+      { text: 'countDistinct', value: 'countDistinct' },
+      { text: 'sumDistinct', value: 'sumDistinct' },
+      { text: 'avgDistinct', value: 'avgDistinct' }
     ],
     colors: {
-      LinkToAnotherRecord: "blue lighten-5",
-      Rollup: "pink lighten-5",
-      Lookup: "green lighten-5",
-    },
+      LinkToAnotherRecord: 'blue lighten-5',
+      Rollup: 'pink lighten-5',
+      Lookup: 'green lighten-5'
+    }
   }),
   computed: {
     counter: {
       get() {
-        return this.$store.state.templateC;
+        return this.$store.state.templateC
       },
       set(c) {
-        this.$store.commit("mutTemplateC", c);
-      },
+        this.$store.commit('mutTemplateC', c)
+      }
     },
     updateFilename() {
-      return this.url && this.url.split("/").pop();
-    },
+      return this.url && this.url.split('/').pop()
+    }
   },
   watch: {
     project: {
@@ -782,429 +849,429 @@ export default {
               hasMany: [],
               manyToMany: [],
               belongsTo: [],
-              v: [],
-            };
+              v: []
+            }
 
             for (const column of t.columns || []) {
               if (this.isRelation(column)) {
-                if (column.type === "hm") {
+                if (column.type === 'hm') {
                   table.hasMany.push({
-                    tn: column.rtn,
-                    _cn: column.column_name,
-                  });
-                } else if (column.type === "mm") {
+                    table_name: column.ref_table_name,
+                    title: column.column_name
+                  })
+                } else if (column.type === 'mm') {
                   table.manyToMany.push({
-                    rtn: column.rtn,
-                    _cn: column.column_name,
-                  });
+                    ref_table_name: column.ref_table_name,
+                    title: column.column_name
+                  })
                 } else if (column.uidt === UITypes.ForeignKey) {
                   table.belongsTo.push({
-                    tn: column.rtn,
-                    _cn: column.column_name,
-                  });
+                    table_name: column.ref_table_name,
+                    title: column.column_name
+                  })
                 }
               } else if (this.isLookup(column)) {
-                if (column.rtn) {
+                if (column.ref_table_name) {
                   table.v.push({
-                    _cn: column.column_name,
+                    title: column.column_name,
                     lk: {
-                      ltn: column.rtn.table_name,
-                      type: column.rtn.type,
-                      lcn: column.rcn,
-                    },
-                  });
+                      ltn: column.ref_table_name.table_name,
+                      type: column.ref_table_name.type,
+                      lcn: column.ref_column_name
+                    }
+                  })
                 }
               } else if (this.isRollup(column)) {
-                if (column.rtn) {
+                if (column.ref_table_name) {
                   table.v.push({
-                    _cn: column.column_name,
+                    title: column.column_name,
                     rl: {
-                      rltn: column.rtn.table_name,
-                      rlcn: column.rcn,
-                      type: column.rtn.type,
-                      fn: column.fn,
-                    },
-                  });
+                      rltn: column.ref_table_name.table_name,
+                      rlcn: column.ref_column_name,
+                      type: column.ref_table_name.type,
+                      fn: column.fn
+                    }
+                  })
                 }
               } else {
-                table.columns.push(column);
+                table.columns.push(column)
               }
             }
-            return table;
-          }),
-        };
-        this.$emit("update:projectTemplate", template);
-      },
-    },
+            return table
+          })
+        }
+        this.$emit('update:projectTemplate', template)
+      }
+    }
   },
 
   created() {
-    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener('keydown', this.handleKeyDown)
   },
   destroyed() {
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener('keydown', this.handleKeyDown)
   },
   mounted() {
-    this.parseAndLoadTemplate();
+    this.parseAndLoadTemplate()
     const input =
-      this.$refs.projec && this.$refs.project.$el.querySelector("input");
+      this.$refs.projec && this.$refs.project.$el.querySelector('input')
     if (input) {
-      input.focus();
-      input.select();
+      input.focus()
+      input.select()
     }
   },
   methods: {
     createTableClick() {
-      this.createTablesDialog = true;
-      this.$e("c:table:create:navdraw");
+      this.createTablesDialog = true
+      this.$e('c:table:create:navdraw')
     },
     parseAndLoadTemplate() {
       if (this.projectTemplate) {
-        this.parseTemplate(this.projectTemplate);
+        this.parseTemplate(this.projectTemplate)
         this.expansionPanel = Array.from(
           { length: this.project.tables.length },
           (_, i) => i
-        );
+        )
       }
     },
     getIcon(type) {
-      return getUIDTIcon(type);
+      return getUIDTIcon(type)
     },
     getRelatedTables(tableName, rollup = false) {
-      const tables = [];
+      const tables = []
       for (const t of this.projectTemplate.tables) {
         if (tableName === t.table_name) {
           for (const hm of t.hasMany) {
             const rTable = this.project.tables.find(
-              (t1) => t1.table_name === hm.table_name
-            );
+              t1 => t1.table_name === hm.table_name
+            )
             tables.push({
               ...rTable,
-              type: "hm",
-            });
+              type: 'hm'
+            })
           }
           for (const mm of t.manyToMany) {
             const rTable = this.project.tables.find(
-              (t1) => t1.table_name === mm.rtn
-            );
+              t1 => t1.table_name === mm.ref_table_name
+            )
             tables.push({
               ...rTable,
-              type: "mm",
-            });
+              type: 'mm'
+            })
           }
         } else {
           for (const hm of t.hasMany) {
             if (hm.table_name === tableName && !rollup) {
               tables.push({
                 ...t,
-                type: "bt",
-              });
+                type: 'bt'
+              })
             }
           }
           for (const mm of t.manyToMany) {
-            if (mm.rtn === tableName) {
+            if (mm.ref_table_name === tableName) {
               tables.push({
                 ...t,
-                type: "mm",
-              });
+                type: 'mm'
+              })
             }
           }
         }
       }
 
-      return tables;
+      return tables
     },
     validateAndFocus() {
       if (!this.$refs.form.validate()) {
-        const input = this.$el.querySelector(".v-input.error--text");
+        const input = this.$el.querySelector('.v-input.error--text')
         this.expansionPanel =
           input &&
           input.parentElement &&
           input.parentElement.parentElement &&
-          +input.parentElement.parentElement.dataset.exp;
+          +input.parentElement.parentElement.dataset.exp
         setTimeout(() => {
-          input.querySelector("input,select").focus();
-        }, 500);
-        return false;
+          input.querySelector('input,select').focus()
+        }, 500)
+        return false
       }
-      return true;
+      return true
     },
     deleteTable(i) {
-      const deleteTable = this.project.tables[i];
+      const deleteTable = this.project.tables[i]
       for (const table of this.project.tables) {
         if (table === deleteTable) {
-          continue;
+          continue
         }
         table.columns = table.columns.filter(
-          (c) => c.rtn !== deleteTable.table_name
-        );
+          c => c.ref_table_name !== deleteTable.table_name
+        )
       }
-      this.project.tables.splice(i, 1);
+      this.project.tables.splice(i, 1)
     },
     deleteTableColumn(i, j, col, table) {
-      const deleteTable = this.project.tables[i];
-      const deleteColumn = deleteTable.columns[j];
+      const deleteTable = this.project.tables[i]
+      const deleteColumn = deleteTable.columns[j]
 
-      let rTable, index;
+      let rTable, index
       // if relation column, delete the corresponding relation from other table
       if (col.uidt === UITypes.LinkToAnotherRecord) {
-        if (col.type === "hm") {
-          rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+        if (col.type === 'hm') {
+          rTable = this.project.tables.find(t => t.table_name === col.ref_table_name)
           index =
             rTable &&
             rTable.columns.findIndex(
-              (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
-            );
-        } else if (col.type === "mm") {
-          rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+              c => c.uidt === UITypes.ForeignKey && c.ref_table_name === table.table_name
+            )
+        } else if (col.type === 'mm') {
+          rTable = this.project.tables.find(t => t.table_name === col.ref_table_name)
           index =
             rTable &&
             rTable.columns.findIndex(
-              (c) =>
+              c =>
                 c.uidt === UITypes.LinkToAnotherRecord &&
-                c.rtn === table.table_name &&
-                c.type === "mm"
-            );
+                c.ref_table_name === table.table_name &&
+                c.type === 'mm'
+            )
         }
       } else if (col.uidt === UITypes.ForeignKey) {
-        rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+        rTable = this.project.tables.find(t => t.table_name === col.ref_table_name)
         index =
           rTable &&
           rTable.columns.findIndex(
-            (c) =>
+            c =>
               c.uidt === UITypes.LinkToAnotherRecord &&
-              c.rtn === table.table_name &&
-              c.type === "hm"
-          );
+              c.ref_table_name === table.table_name &&
+              c.type === 'hm'
+          )
       }
 
       if (rTable && index > -1) {
-        rTable.columns.splice(index, 1);
+        rTable.columns.splice(index, 1)
       }
 
       for (const table of this.project.tables) {
         if (table === deleteTable) {
-          continue;
+          continue
         }
         table.columns = table.columns.filter(
-          (c) =>
-            c.rtn !== deleteTable.table_name ||
-            c.rcn !== deleteColumn.column_name
-        );
+          c =>
+            c.ref_table_name !== deleteTable.table_name ||
+            c.ref_column_name !== deleteColumn.column_name
+        )
       }
-      deleteTable.columns.splice(j, 1);
+      deleteTable.columns.splice(j, 1)
     },
     addTables() {
       if (!this.tableNamesInput) {
-        return;
+        return
       }
       // todo: fix
       const re =
-        /(?:^|,\s*)(\w+)(?:\(((\w+)(?:\s*,\s*\w+)?)?\)){0,1}(?=\s*,|\s*$)/g;
-      let m;
+        /(?:^|,\s*)(\w+)(?:\(((\w+)(?:\s*,\s*\w+)?)?\)){0,1}(?=\s*,|\s*$)/g
+      let m
       // eslint-disable-next-line no-cond-assign
       while ((m = re.exec(this.tableNamesInput))) {
-        if (this.project.tables.some((t) => t.table_name === m[1])) {
-          this.$toast.info(`Table '${m[1]}' is already exist`).goAway(1000);
-          continue;
+        if (this.project.tables.some(t => t.table_name === m[1])) {
+          this.$toast.info(`Table '${m[1]}' is already exist`).goAway(1000)
+          continue
         }
 
         this.project.tables.push({
-          tn: m[1],
+          table_name: m[1],
           columns: (m[2] ? m[2].split(/\s*,\s*/) : [])
-            .map((col) => ({
-              cn: col,
-              ...defaultColProp,
+            .map(col => ({
+              column_name: col,
+              ...defaultColProp
             }))
             .filter(
               (v, i, arr) =>
-                i === arr.findIndex((c) => c.column_name === v.column_name)
-            ),
-        });
+                i === arr.findIndex(c => c.column_name === v.column_name)
+            )
+        })
       }
-      this.createTablesDialog = false;
-      this.tableNamesInput = "";
+      this.createTablesDialog = false
+      this.tableNamesInput = ''
     },
     compareRel(a, b) {
       return (
         ((a && a.table_name) || a) === ((b && b.table_name) || b) &&
         (a && a.type) === (b && b.type)
-      );
+      )
     },
     addColumns() {
       if (!this.columnNamesInput) {
-        return;
+        return
       }
-      const table = this.project.tables[this.expansionPanel];
+      const table = this.project.tables[this.expansionPanel]
       for (const col of this.columnNamesInput.split(/\s*,\s*/)) {
-        if (table.columns.some((c) => c.column_name === col)) {
-          this.$toast.info(`Column '${col}' is already exist`).goAway(1000);
-          continue;
+        if (table.columns.some(c => c.column_name === col)) {
+          this.$toast.info(`Column '${col}' is already exist`).goAway(1000)
+          continue
         }
 
         table.columns.push({
-          cn: col,
-          ...defaultColProp,
-        });
+          column_name: col,
+          ...defaultColProp
+        })
       }
-      this.columnNamesInput = "";
-      this.createTableColumnsDialog = false;
+      this.columnNamesInput = ''
+      this.createTableColumnsDialog = false
 
       this.$nextTick(() => {
         const input =
           this.$refs[
             `uidt_${table.table_name}_${table.columns.length - 1}`
-          ][0].$el.querySelector("input");
-        input.focus();
+          ][0].$el.querySelector('input')
+        input.focus()
         this.$nextTick(() => {
-          input.select();
-        });
-      });
+          input.select()
+        })
+      })
     },
     showColCreateDialog(table) {
-      this.createTableColumnsDialog = true;
-      this.selectedTable = table;
+      this.createTableColumnsDialog = true
+      this.selectedTable = table
     },
 
     isRelation(col) {
-      return col.uidt === "LinkToAnotherRecord" || col.uidt === "ForeignKey";
+      return col.uidt === 'LinkToAnotherRecord' || col.uidt === 'ForeignKey'
     },
     isLookup(col) {
-      return col.uidt === "Lookup";
+      return col.uidt === 'Lookup'
     },
     isRollup(col) {
-      return col.uidt === "Rollup";
+      return col.uidt === 'Rollup'
     },
     isVirtual(col) {
-      return col && uiTypes.some((ut) => ut.name === col.uidt && ut.virtual);
+      return col && uiTypes.some(ut => ut.name === col.uidt && ut.virtual)
     },
     isLookupOrRollup(col) {
-      return this.isLookup(col) || this.isRollup(col);
+      return this.isLookup(col) || this.isRollup(col)
     },
     isSelect(col) {
-      return col.uidt === "MultiSelect" || col.uidt === "SingleSelect";
+      return col.uidt === 'MultiSelect' || col.uidt === 'SingleSelect'
     },
     addNewColumnRow(table, uidt) {
       table.columns.push({
-        cn: `title${table.columns.length + 1}`,
+        column_name: `title${table.columns.length + 1}`,
         ...defaultColProp,
         uidt,
         ...(uidt === LinkToAnotherRecord
           ? {
-              type: "mm",
+              type: 'mm'
             }
-          : {}),
-      });
+          : {})
+      })
       this.$nextTick(() => {
         const input =
           this.$refs[
             `cn_${table.table_name}_${table.columns.length - 1}`
-          ][0].$el.querySelector("input");
-        input.focus();
-        input.select();
-      });
+          ][0].$el.querySelector('input')
+        input.focus()
+        input.select()
+      })
     },
 
     async handleKeyDown({ metaKey, key, altKey, shiftKey, ctrlKey }) {
       if (!(metaKey && ctrlKey) && !(altKey && shiftKey)) {
-        return;
+        return
       }
       switch (key && key.toLowerCase()) {
-        case "t":
-          this.createTablesDialog = true;
-          break;
-        case "c":
-          this.createTableColumnsDialog = true;
-          break;
-        case "a":
-          this.addNewColumnRow(this.project.tables[this.expansionPanel]);
-          break;
-        case "j":
-          this.copyJSON();
-          break;
-        case "s":
-          await this.saveTemplate();
-          break;
-        case "arrowup":
+        case 't':
+          this.createTablesDialog = true
+          break
+        case 'c':
+          this.createTableColumnsDialog = true
+          break
+        case 'a':
+          this.addNewColumnRow(this.project.tables[this.expansionPanel])
+          break
+        case 'j':
+          this.copyJSON()
+          break
+        case 's':
+          await this.saveTemplate()
+          break
+        case 'arrowup':
           this.expansionPanel = this.expansionPanel
             ? --this.expansionPanel
-            : this.project.tables.length - 1;
-          break;
-        case "arrowdown":
+            : this.project.tables.length - 1
+          break
+        case 'arrowdown':
           this.expansionPanel =
-            ++this.expansionPanel % this.project.tables.length;
-          break;
+            ++this.expansionPanel % this.project.tables.length
+          break
 
-        case "1":
+        case '1':
           this.addNewColumnRow(
             this.project.tables[this.expansionPanel],
-            "Number"
-          );
-          break;
-        case "2":
+            'Number'
+          )
+          break
+        case '2':
           this.addNewColumnRow(
             this.project.tables[this.expansionPanel],
-            "SingleLineText"
-          );
-          break;
-        case "3":
+            'SingleLineText'
+          )
+          break
+        case '3':
           this.addNewColumnRow(
             this.project.tables[this.expansionPanel],
-            "LongText"
-          );
-          break;
-        case "4":
+            'LongText'
+          )
+          break
+        case '4':
           this.addNewColumnRow(
             this.project.tables[this.expansionPanel],
-            "LinkToAnotherRecord"
-          );
-          break;
-        case "5":
+            'LinkToAnotherRecord'
+          )
+          break
+        case '5':
           this.addNewColumnRow(
             this.project.tables[this.expansionPanel],
-            "Lookup"
-          );
-          break;
-        case "6":
+            'Lookup'
+          )
+          break
+        case '6':
           this.addNewColumnRow(
             this.project.tables[this.expansionPanel],
-            "Rollup"
-          );
-          break;
+            'Rollup'
+          )
+          break
       }
     },
     copyJSON() {
       if (!this.validateAndFocus()) {
-        this.$toast.info("Please fill all the required column!").goAway(5000);
-        return;
+        this.$toast.info('Please fill all the required column!').goAway(5000)
+        return
       }
-      const el = document.createElement("textarea");
-      el.addEventListener("focusin", (e) => e.stopPropagation());
-      el.value = JSON.stringify(this.projectTemplate, null, 2);
-      el.style = { position: "absolute", left: "-9999px" };
-      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 = JSON.stringify(this.projectTemplate, null, 2)
+      el.style = { position: 'absolute', left: '-9999px' }
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
       this.$toast
-        .success("Successfully copied JSON data to clipboard!")
-        .goAway(3000);
-      return true;
+        .success('Successfully copied JSON data to clipboard!')
+        .goAway(3000)
+      return true
     },
     openUrl() {
-      window.open(this.url, "_blank");
+      window.open(this.url, '_blank')
     },
     async loadUrl() {
       try {
-        let template = (await this.$axios.get(this.url)).data;
+        let template = (await this.$axios.get(this.url)).data
 
-        if (typeof template === "string") {
-          template = JSON.parse(template);
+        if (typeof template === 'string') {
+          template = JSON.parse(template)
         }
 
-        this.parseTemplate(template);
+        this.parseTemplate(template)
       } catch (e) {
-        this.$toast.error(e.message).goAway(5000);
+        this.$toast.error(e.message).goAway(5000)
       }
     },
 
@@ -1223,62 +1290,62 @@ export default {
             ...rest,
             columns: [
               ...columns,
-              ...manyToMany.map((mm) => ({
-                cn: mm.title || `${rest.table_name} <=> ${mm.rtn}`,
+              ...manyToMany.map(mm => ({
+                column_name: mm.title || `${rest.table_name} <=> ${mm.ref_table_name}`,
                 uidt: LinkToAnotherRecord,
-                type: "mm",
-                ...mm,
+                type: 'mm',
+                ...mm
               })),
-              ...hasMany.map((hm) => ({
-                cn: hm.title || `${rest.table_name} => ${hm.table_name}`,
+              ...hasMany.map(hm => ({
+                column_name: hm.title || `${rest.table_name} => ${hm.table_name}`,
                 uidt: LinkToAnotherRecord,
-                type: "hm",
-                rtn: hm.table_name,
-                ...hm,
+                type: 'hm',
+                ref_table_name: hm.table_name,
+                ...hm
               })),
-              ...belongsTo.map((bt) => ({
-                cn: bt.title || `${rest.table_name} => ${bt.rtn}`,
+              ...belongsTo.map(bt => ({
+                column_name: bt.title || `${rest.table_name} => ${bt.ref_table_name}`,
                 uidt: UITypes.ForeignKey,
-                rtn: bt.table_name,
-                ...bt,
+                ref_table_name: bt.table_name,
+                ...bt
               })),
               ...v.map((v) => {
                 const res = {
-                  cn: v.title,
-                  rtn: {
-                    ...v,
-                  },
-                };
+                  column_name: v.title,
+                  ref_table_name: {
+                    ...v
+                  }
+                }
                 if (v.lk) {
-                  res.uidt = Lookup;
-                  res.rtn.table_name = v.lk.ltn;
-                  res.rcn = v.lk.lcn;
-                  res.rtn.type = v.lk.type;
+                  res.uidt = Lookup
+                  res.ref_table_name.table_name = v.lk.ltn
+                  res.ref_column_name = v.lk.lcn
+                  res.ref_table_name.type = v.lk.type
                 } else if (v.rl) {
-                  res.uidt = Rollup;
-                  res.rtn.table_name = v.rl.rltn;
-                  res.rcn = v.rl.rlcn;
-                  res.rtn.type = v.rl.type;
-                  res.fn = v.rl.fn;
+                  res.uidt = Rollup
+                  res.ref_table_name.table_name = v.rl.rltn
+                  res.ref_column_name = v.rl.rlcn
+                  res.ref_table_name.type = v.rl.type
+                  res.fn = v.rl.fn
                 }
-                return res;
-              }),
-            ],
+                return res
+              })
+            ]
           })
-        ),
-      };
+        )
+      }
 
-      this.project = parsedTemplate;
+      this.project = parsedTemplate
     },
 
     async projectTemplateCreate() {
       if (!this.validateAndFocus()) {
-        this.$toast.info("Please fill all the required column!").goAway(5000);
-        return;
+        this.$toast.info('Please fill all the required column!').goAway(5000)
+        return
       }
 
       try {
-        const githubConfig = this.$store.state.github;
+        const githubConfig = this.$store.state.github
 
         // const token = await models.store.where({ key: 'GITHUB_TOKEN' }).first()
         // const branch = await models.store.where({ key: 'GITHUB_BRANCH' }).first()
@@ -1286,75 +1353,75 @@ export default {
         // const templateRepo = await models.store.where({ key: 'PROJECT_TEMPLATES_REPO' }).first()
 
         if (!githubConfig.token || !githubConfig.repo) {
-          throw new Error("Missing token or template path");
+          throw new Error('Missing token or template path')
         }
 
-        const data = JSON.stringify(this.projectTemplate, 0, 2);
+        const data = JSON.stringify(this.projectTemplate, 0, 2)
         const filename =
           this.updateFilename ||
-          `${this.projectTemplate.name}_${Date.now()}.json`;
+          `${this.projectTemplate.name}_${Date.now()}.json`
         const filePath = `${
-          githubConfig.filePath ? githubConfig.filePath + "/" : ""
-        }${filename}`;
-        const apiPath = `https://api.github.com/repos/${githubConfig.repo}/contents/${filePath}`;
+          githubConfig.filePath ? githubConfig.filePath + '/' : ''
+        }${filename}`
+        const apiPath = `https://api.github.com/repos/${githubConfig.repo}/contents/${filePath}`
 
-        let sha;
+        let sha
         if (this.updateFilename) {
           const {
-            data: { sha: _sha },
+            data: { sha: _sha }
           } = await this.$axios({
             url: `https://api.github.com/repos/${githubConfig.repo}/contents/${filePath}`,
-            method: "get",
+            method: 'get',
             headers: {
-              Authorization: "token " + githubConfig.token,
-            },
-          });
-          sha = _sha;
+              Authorization: 'token ' + githubConfig.token
+            }
+          })
+          sha = _sha
         }
 
         await this.$axios({
           url: apiPath,
-          method: "put",
+          method: 'put',
           headers: {
-            "Content-Type": "application/json",
-            Authorization: "token " + githubConfig.token,
+            'Content-Type': 'application/json',
+            Authorization: 'token ' + githubConfig.token
           },
           data: {
             message: `templates : init template ${filename}`,
             content: Base64.encode(data),
             sha,
-            branch: githubConfig.branch,
-          },
-        });
+            branch: githubConfig.branch
+          }
+        })
 
-        this.url = `https://raw.githubusercontent.com/${githubConfig.repo}/${githubConfig.branch}/${filePath}`;
+        this.url = `https://raw.githubusercontent.com/${githubConfig.repo}/${githubConfig.branch}/${filePath}`
 
         this.$toast
-          .success("Template generated and saved successfully!")
-          .goAway(4000);
+          .success('Template generated and saved successfully!')
+          .goAway(4000)
       } catch (e) {
-        this.$toast.error(e.message).goAway(5000);
+        this.$toast.error(e.message).goAway(5000)
       }
     },
     navigateToTable(tn) {
       const index = this.projectTemplate.tables.findIndex(
-        (t) => t.table_name === tn
-      );
+        t => t.table_name === tn
+      )
       if (Array.isArray(this.expansionPanel)) {
-        this.expansionPanel.push(index);
+        this.expansionPanel.push(index)
       } else {
-        this.expansionPanel = index;
+        this.expansionPanel = index
       }
 
       this.$nextTick(() => {
-        const accord = this.$el.querySelector(`#tn_${tn}`);
-        accord.focus();
-        accord.scrollIntoView();
-      });
+        const accord = this.$el.querySelector(`#tn_${tn}`)
+        accord.focus()
+        accord.scrollIntoView()
+      })
     },
 
     async saveTemplate() {
-      this.loading = true;
+      this.loading = true
       try {
         if (this.id || this.localId) {
           await this.$axios.put(
@@ -1364,281 +1431,281 @@ export default {
             this.projectTemplate,
             {
               params: {
-                token: this.$store.state.template,
-              },
+                token: this.$store.state.template
+              }
             }
-          );
-          this.$toast.success("Template updated successfully").goAway(3000);
+          )
+          this.$toast.success('Template updated successfully').goAway(3000)
         } else if (!this.$store.state.template) {
           if (!this.copyJSON()) {
-            return;
+            return
           }
 
-          this.$toast.info("Initiating Github for template").goAway(3000);
+          this.$toast.info('Initiating Github for template').goAway(3000)
           const res = await this.$axios.post(
             `${process.env.NC_API_URL}/api/v1/projectTemplateCreate`,
             this.projectTemplate
-          );
-          this.$toast.success("Initiated Github successfully").goAway(3000);
-          window.open(res.data.path, "_blank");
+          )
+          this.$toast.success('Initiated Github successfully').goAway(3000)
+          window.open(res.data.path, '_blank')
         } else {
           const res = await this.$axios.post(
             `${process.env.NC_API_URL}/api/v1/nc/templates`,
             this.projectTemplate,
             {
               params: {
-                token: this.$store.state.template,
-              },
+                token: this.$store.state.template
+              }
             }
-          );
-          this.localId = res.data.id;
-          this.$toast.success("Template updated successfully").goAway(3000);
+          )
+          this.localId = res.data.id
+          this.$toast.success('Template updated successfully').goAway(3000)
         }
 
-        this.$emit("saved");
+        this.$emit('saved')
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000);
+        this.$toast.error(e.message).goAway(3000)
       } finally {
-        this.loading = false;
+        this.loading = false
       }
     },
     getRules(col, table) {
-      return (v) =>
+      return v =>
         col.uidt !== UITypes.LinkToAnotherRecord ||
         !table.columns.some(
-          (c) =>
+          c =>
             c !== col &&
             c.uidt === UITypes.LinkToAnotherRecord &&
             c.type === col.type &&
-            c.rtn === col.rtn
+            c.ref_table_name === col.ref_table_name
         ) ||
-        "Duplicate relation is not allowed";
+        'Duplicate relation is not allowed'
     },
     onTableNameUpdate(oldTable, newVal) {
-      const oldVal = oldTable.table_name;
-      this.$set(oldTable, "tn", newVal);
+      const oldVal = oldTable.table_name
+      this.$set(oldTable, 'table_name', newVal)
 
       for (const table of this.project.tables) {
         for (const col of table.columns) {
           if (col.uidt === UITypes.LinkToAnotherRecord) {
-            if (col.rtn === oldVal) {
-              this.$set(col, "rtn", newVal);
+            if (col.ref_table_name === oldVal) {
+              this.$set(col, 'ref_table_name', newVal)
             }
           } else if (
             col.uidt === UITypes.Rollup ||
             col.uidt === UITypes.Lookup
           ) {
-            if (col.rtn && col.rtn.table_name === oldVal) {
-              this.$set(col.rtn, "tn", newVal);
+            if (col.ref_table_name && col.ref_table_name.table_name === oldVal) {
+              this.$set(col.ref_table_name, 'table_name', newVal)
             }
           }
         }
       }
     },
     onColumnNameUpdate(oldCol, newVal, tn) {
-      const oldVal = oldCol.column_name;
-      this.$set(oldCol, "cn", newVal);
+      const oldVal = oldCol.column_name
+      this.$set(oldCol, 'column_name', newVal)
 
       for (const table of this.project.tables) {
         for (const col of table.columns) {
           if (col.uidt === UITypes.Rollup || col.uidt === UITypes.Lookup) {
-            if (col.rtn && col.rcn === oldVal && col.rtn.table_name === tn) {
-              this.$set(col, "rcn", newVal);
+            if (col.ref_table_name && col.ref_column_name === oldVal && col.ref_table_name.table_name === tn) {
+              this.$set(col, 'ref_column_name', newVal)
             }
           }
         }
       }
     },
     async onRtnChange(oldVal, newVal, col, table) {
-      this.$set(col, "rtn", newVal);
+      this.$set(col, 'ref_table_name', newVal)
 
-      await this.$nextTick();
+      await this.$nextTick()
 
       if (
         col.uidt !== UITypes.LinkToAnotherRecord &&
         col.uidt !== UITypes.ForeignKey
       ) {
-        return;
+        return
       }
 
       if (oldVal) {
-        const rTable = this.project.tables.find((t) => t.table_name === oldVal);
+        const rTable = this.project.tables.find(t => t.table_name === oldVal)
         // delete relation from other table if exist
 
-        let index = -1;
-        if (col.uidt === UITypes.LinkToAnotherRecord && col.type === "mm") {
+        let index = -1
+        if (col.uidt === UITypes.LinkToAnotherRecord && col.type === 'mm') {
           index = rTable.columns.findIndex(
-            (c) =>
+            c =>
               c.uidt === UITypes.LinkToAnotherRecord &&
-              c.rtn === table.table_name &&
-              c.type === "mm"
-          );
+              c.ref_table_name === table.table_name &&
+              c.type === 'mm'
+          )
         } else if (
           col.uidt === UITypes.LinkToAnotherRecord &&
-          col.type === "hm"
+          col.type === 'hm'
         ) {
           index = rTable.columns.findIndex(
-            (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
-          );
+            c => c.uidt === UITypes.ForeignKey && c.ref_table_name === table.table_name
+          )
         } else if (col.uidt === UITypes.ForeignKey) {
           index = rTable.columns.findIndex(
-            (c) =>
+            c =>
               c.uidt === UITypes.LinkToAnotherRecord &&
-              c.rtn === table.table_name &&
-              c.type === "hm"
-          );
+              c.ref_table_name === table.table_name &&
+              c.type === 'hm'
+          )
         }
 
         if (index > -1) {
-          rTable.columns.splice(index, 1);
+          rTable.columns.splice(index, 1)
         }
       }
       if (newVal) {
-        const rTable = this.project.tables.find((t) => t.table_name === newVal);
+        const rTable = this.project.tables.find(t => t.table_name === newVal)
 
         // check relation relation exist in other table
         // if not create a relation
-        if (col.uidt === UITypes.LinkToAnotherRecord && col.type === "mm") {
+        if (col.uidt === UITypes.LinkToAnotherRecord && col.type === 'mm') {
           if (
             !rTable.columns.find(
-              (c) =>
+              c =>
                 c.uidt === UITypes.LinkToAnotherRecord &&
-                c.rtn === table.table_name &&
-                c.type === "mm"
+                c.ref_table_name === table.table_name &&
+                c.type === 'mm'
             )
           ) {
             rTable.columns.push({
-              cn: `title${rTable.columns.length + 1}`,
+              column_name: `title${rTable.columns.length + 1}`,
               uidt: UITypes.LinkToAnotherRecord,
-              type: "mm",
-              rtn: table.table_name,
-            });
+              type: 'mm',
+              ref_table_name: table.table_name
+            })
           }
         } else if (
           col.uidt === UITypes.LinkToAnotherRecord &&
-          col.type === "hm"
+          col.type === 'hm'
         ) {
           if (
             !rTable.columns.find(
-              (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
+              c => c.uidt === UITypes.ForeignKey && c.ref_table_name === table.table_name
             )
           ) {
             rTable.columns.push({
-              cn: `title${rTable.columns.length + 1}`,
+              column_name: `title${rTable.columns.length + 1}`,
               uidt: UITypes.ForeignKey,
-              rtn: table.table_name,
-            });
+              ref_table_name: table.table_name
+            })
           }
         } else if (col.uidt === UITypes.ForeignKey) {
           if (
             !rTable.columns.find(
-              (c) =>
+              c =>
                 c.uidt === UITypes.LinkToAnotherRecord &&
-                c.rtn === table.table_name &&
-                c.type === "hm"
+                c.ref_table_name === table.table_name &&
+                c.type === 'hm'
             )
           ) {
             rTable.columns.push({
-              cn: `title${rTable.columns.length + 1}`,
+              column_name: `title${rTable.columns.length + 1}`,
               uidt: UITypes.LinkToAnotherRecord,
-              type: "hm",
-              rtn: table.table_name,
-            });
+              type: 'hm',
+              ref_table_name: table.table_name
+            })
           }
         }
       }
     },
     onRTypeChange(oldType, newType, col, table) {
-      this.$set(col, "type", newType);
+      this.$set(col, 'type', newType)
 
-      const rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+      const rTable = this.project.tables.find(t => t.table_name === col.ref_table_name)
 
-      let index = -1;
+      let index = -1
 
       // find column and update relation
       // or create a new column
 
-      if (oldType === "hm") {
+      if (oldType === 'hm') {
         index = rTable.columns.findIndex(
-          (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
-        );
-      } else if (oldType === "mm") {
+          c => c.uidt === UITypes.ForeignKey && c.ref_table_name === table.table_name
+        )
+      } else if (oldType === 'mm') {
         index = rTable.columns.findIndex(
-          (c) =>
+          c =>
             c.uidt === UITypes.LinkToAnotherRecord &&
-            c.rtn === table.table_name &&
-            c.type === "mm"
-        );
+            c.ref_table_name === table.table_name &&
+            c.type === 'mm'
+        )
       }
 
       const rCol =
         index === -1
-          ? { cn: `title${rTable.columns.length + 1}` }
-          : { ...rTable.columns[index] };
-      index = index === -1 ? rTable.columns.length : index;
-
-      if (newType === "mm") {
-        rCol.type = "mm";
-        rCol.uidt = UITypes.LinkToAnotherRecord;
-      } else if (newType === "hm") {
-        rCol.type = "bt";
-        rCol.uidt = UITypes.ForeignKey;
+          ? { column_name: `title${rTable.columns.length + 1}` }
+          : { ...rTable.columns[index] }
+      index = index === -1 ? rTable.columns.length : index
+
+      if (newType === 'mm') {
+        rCol.type = 'mm'
+        rCol.uidt = UITypes.LinkToAnotherRecord
+      } else if (newType === 'hm') {
+        rCol.type = 'bt'
+        rCol.uidt = UITypes.ForeignKey
       }
-      rCol.rtn = table.table_name;
+      rCol.ref_table_name = table.table_name
 
-      this.$set(rTable.columns, index, rCol);
+      this.$set(rTable.columns, index, rCol)
     },
     onUidtChange(oldVal, newVal, col, table) {
-      this.$set(col, "uidt", newVal);
-      this.$set(col, "dtxp", undefined);
+      this.$set(col, 'uidt', newVal)
+      this.$set(col, 'dtxp', undefined)
 
       // delete relation column from other table
       // if previous type is relation
 
-      let index = -1;
-      let rTable;
+      let index = -1
+      let rTable
 
       if (oldVal === UITypes.LinkToAnotherRecord) {
-        rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+        rTable = this.project.tables.find(t => t.table_name === col.ref_table_name)
         if (rTable) {
-          if (col.type === "hm") {
+          if (col.type === 'hm') {
             index = rTable.columns.findIndex(
-              (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
-            );
-          } else if (col.type === "mm") {
+              c => c.uidt === UITypes.ForeignKey && c.ref_table_name === table.table_name
+            )
+          } else if (col.type === 'mm') {
             index = rTable.columns.findIndex(
-              (c) =>
+              c =>
                 c.uidt === UITypes.LinkToAnotherRecord &&
-                c.rtn === table.table_name &&
-                c.type === "mm"
-            );
+                c.ref_table_name === table.table_name &&
+                c.type === 'mm'
+            )
           }
         }
       } else if (oldVal === UITypes.ForeignKey) {
-        rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+        rTable = this.project.tables.find(t => t.table_name === col.ref_table_name)
         if (rTable) {
           index = rTable.columns.findIndex(
-            (c) =>
+            c =>
               c.uidt === UITypes.LinkToAnotherRecord &&
-              c.rtn === table.table_name &&
-              c.type === "hm"
-          );
+              c.ref_table_name === table.table_name &&
+              c.type === 'hm'
+          )
         }
       }
       if (rTable && index > -1) {
-        rTable.columns.splice(index, 1);
+        rTable.columns.splice(index, 1)
       }
 
-      col.rtn = undefined;
-      col.type = undefined;
-      col.rcn = undefined;
+      col.ref_table_name = undefined
+      col.type = undefined
+      col.ref_column_name = undefined
 
       if (col.uidt === LinkToAnotherRecord) {
-        col.type = col.type || "mm";
+        col.type = col.type || 'mm'
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped>
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/templates/createProjectFromTemplateBtn.vue b/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
deleted file mode 100644
index 9d3c0542c0..0000000000
--- a/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<template>
-  <div>
-    <v-btn
-      :loading="projectCreation"
-      :disabled="projectCreation"
-      class="primary nc-btn-use-template"
-      x-large
-      @click="useTemplate('rest')"
-    >
-      <slot>Use template</slot>
-    </v-btn>
-  </div>
-</template>
-
-<script>
-import colors from '~/mixins/colors'
-
-export default {
-  name: 'CreateProjectFromTemplateBtn',
-  mixins: [colors],
-  props: {
-    excelImport: Boolean,
-    loading: Boolean,
-    importToProject: Boolean,
-    templateData: [Array, Object],
-    importData: [Array, Object],
-    valid: {
-      default: true,
-      type: Boolean
-    },
-    validationErrorMsg: {
-      default: 'Please fill all the required values',
-      type: String
-    },
-    createGqlText: {
-      default: 'Create GQL Project',
-      type: String
-    },
-    createRestText: {
-      default: 'Create REST Project',
-      type: String
-    }
-  },
-  data() {
-    return {
-      projectCreation: false,
-      loaderMessagesIndex: 0,
-      loaderMessages: [
-        'Setting up new database configs',
-        'Inferring database schema',
-        'Generating APIs.',
-        'Generating APIs..',
-        'Generating APIs...',
-        'Generating APIs....',
-        'Please wait',
-        'Please wait.',
-        'Please wait..',
-        'Please wait...',
-        'Please wait..',
-        'Please wait.',
-        'Please wait',
-        'Please wait.',
-        'Please wait..',
-        'Please wait...',
-        'Please wait..',
-        'Please wait.',
-        'Please wait..',
-        'Please wait...'
-      ]
-    }
-  },
-  methods: {
-    async useTemplate(projectType) {
-      if (!this.valid) {
-        return this.$toast.error(this.validationErrorMsg).goAway(3000)
-      }
-
-      // this.$emit('useTemplate', type)
-
-      this.projectCreation = true
-      let interv
-      try {
-        interv = setInterval(() => {
-          this.loaderMessagesIndex = this.loaderMessagesIndex < this.loaderMessages.length - 1 ? this.loaderMessagesIndex + 1 : 6
-          this.$store.commit('loader/MutMessage', this.loaderMessages[this.loaderMessagesIndex])
-        }, 1000)
-
-        let projectId, prefix
-
-        if (this.importToProject) {
-          this.$store.commit('loader/MutMessage', 'Importing excel template')
-
-          const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-            // todo: extract based on active
-            dbAlias: 'db', // this.nodes.dbAlias,
-            env: '_noco'
-          }, 'xcModelsCreateFromTemplate', {
-            template: this.templateData
-          }])
-
-          if (res && res.tables && res.tables.length) {
-            this.$toast.success(`Imported ${res.tables.length} tables successfully`).goAway(3000)
-          } else {
-            this.$toast.success('Template imported successfully').goAway(3000)
-          }
-
-          projectId = this.$route.params.project_id
-          prefix = this.$store.getters['project/GtrProjectPrefix']
-        } else {
-          const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'projectCreateByWebWithXCDB', {
-            title: this.templateData.title,
-            projectType,
-            template: this.templateData,
-            excelImport: this.excelImport
-          }])
-          projectId = result.id
-          prefix = result.prefix
-          await this.$store.dispatch('project/ActLoadProjectInfo')
-        }
-        clearInterval(interv)
-        if (this.importData) {
-          this.$store.commit('loader/MutMessage', 'Importing excel data to project')
-          await this.importDataToProject({ projectId, projectType, prefix })
-        }
-        this.$store.commit('loader/MutMessage', null)
-
-        this.projectReloading = false
-        if (!this.importToProject) {
-          await this.$router.push({
-            path: `/nc/${projectId}`,
-            query: {
-              new: 1
-            }
-          })
-        }
-
-        this.$emit('success')
-      } catch (e) {
-        console.log(e)
-        this.$toast.error(e.message).goAway(3000)
-        this.$store.commit('loader/MutMessage', null)
-        clearInterval(interv)
-      }
-      this.projectCreation = false
-    },
-    async importDataToProject({ projectId, projectType, prefix = '' }) {
-      // this.$store.commit('project/MutProjectId', projectId)
-      this.$ncApis.setProjectId(projectId)
-
-      let total = 0
-      let progress = 0
-
-      /*      await Promise.all(Object.entries(this.importData).map(v => (async([table, data]) => {
-        await this.$store.dispatch('meta/ActLoadMeta', {
-          tn: `${prefix}${table}`, project_id: projectId
-        })
-
-        // todo: get table name properly
-        const api = this.$ncApis.get({
-          table: `${prefix}${table}`,
-          type: projectType
-        })
-        total += data.length
-        for (let i = 0; i < data.length; i += 500) {
-          this.$store.commit('loader/MutMessage', `Importing data : ${progress}/${total}`)
-          this.$store.commit('loader/MutProgress', Math.round(progress && 100 * progress / total))
-          const batchData = data.slice(i, i + 500)
-          await api.insertBulk(batchData)
-          progress += batchData.length
-        }
-        this.$store.commit('loader/MutClear')
-      })(v))) */
-
-      await Promise.all(this.templateData.tables.map(v => (async(tableMeta) => {
-        const table = tableMeta.table_name
-        const data = this.importData[tableMeta.refTn]
-
-        await this.$store.dispatch('meta/ActLoadMeta', {
-          tn: `${prefix}${table}`, project_id: projectId
-        })
-
-        // todo: get table name properly
-        const api = this.$ncApis.get({
-          table: `${prefix}${table}`,
-          type: projectType
-        })
-        total += data.length
-        for (let i = 0; i < data.length; i += 500) {
-          this.$store.commit('loader/MutMessage', `Importing data : ${progress}/${total}`)
-          this.$store.commit('loader/MutProgress', Math.round(progress && 100 * progress / total))
-          const batchData = this.remapColNames(data.slice(i, i + 500), tableMeta.columns)
-          await api.insertBulk(batchData)
-          progress += batchData.length
-        }
-        this.$store.commit('loader/MutClear')
-      })(v)))
-    },
-    remapColNames(batchData, columns) {
-      return batchData.map(data => (columns || []).reduce((aggObj, col) => ({
-        ...aggObj,
-        [col.column_name]: data[col.refCn]
-      }), {})
-      )
-    }
-  }
-
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/packages/nc-gui/components/trialExpired.vue b/packages/nc-gui/components/trialExpired.vue
deleted file mode 100644
index d6806dd89d..0000000000
--- a/packages/nc-gui/components/trialExpired.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<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>
-
-<script>
-
-export default {
-  name: 'TrialExpired',
-  methods: {
-    openPricingPage() {
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</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/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 57%
rename from packages/nc-gui/components/utils/language.vue
rename to packages/nc-gui/components/utils/Language.vue
index b921431e75..5f4581e30e 100644
--- a/packages/nc-gui/components/utils/language.vue
+++ b/packages/nc-gui/components/utils/Language.vue
@@ -39,103 +39,103 @@
 
 <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() {
-      document.body.style.direction = this.isRtlLang() ? "rtl" : "ltr";
+      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 9cba8448dc..a39e3e8eab 100644
--- a/packages/nc-gui/lang/zh_CN.json
+++ b/packages/nc-gui/lang/zh_CN.json
@@ -5,7 +5,7 @@
     "open": "打开",
     "close": "关闭",
     "yes": "是的",
-    "no": "No",
+    "no": "否",
     "ok": "行",
     "and": "和",
     "or": "或者",
@@ -40,7 +40,7 @@
     "required": "必填项",
     "preferred": "Preferred",
     "mandatory": "强制的",
-    "loading": "loading ...",
+    "loading": "加载中...",
     "title": "标题",
     "upload": "上传",
     "download": "下载",
@@ -74,7 +74,7 @@
     "view": "视图",
     "views": "视图",
     "viewType": {
-      "grid": "表格",
+      "grid": "网格",
       "gallery": "画廊",
       "form": "表单",
       "kanban": "看板",
@@ -171,7 +171,8 @@
     "headLogin": "登录 | NocoDB",
     "resetPassword": "重置密码",
     "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": "导入",
@@ -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_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..ee0fbcf4e5 100644
--- a/packages/nc-gui/layouts/default.vue
+++ b/packages/nc-gui/layouts/default.vue
@@ -29,8 +29,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 +85,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 +332,18 @@
 <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 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'
 
 export default {
   components: {
@@ -394,10 +394,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 +454,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 +482,7 @@ export default {
     },
 
     isProjectInfoLoaded() {
-      return this.$store.state.project.projectInfo !== null
+      return this.$store.state.project.appInfo !== null
     },
     githubClickHandler(e) {
       //   e.preventDefault();
@@ -728,8 +728,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 86e52191e6..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 -->
@@ -224,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': !(
@@ -257,7 +259,7 @@
                         <x-icon
                           v-if="
                             projectStatusUpdating &&
-                            props.item.id === statusUpdatingProjectId
+                              props.item.id === statusUpdatingProjectId
                           "
                           class="mr-1"
                         >
@@ -297,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 -->
@@ -311,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 -->
@@ -325,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 -->
@@ -393,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>
@@ -424,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>
@@ -454,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>
@@ -469,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>
@@ -511,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>
@@ -531,7 +547,7 @@
       type="file"
       accept=".zip"
       @change="importMetaZip"
-    />
+    >
 
     <dlg-label-submit-cancel
       v-if="dialogShow"
@@ -540,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,
@@ -577,7 +588,7 @@ export default {
       loading: null,
       dialogShow: false,
       confirmAction: null,
-      confirmMessage: "",
+      confirmMessage: '',
 
       createProjectDialog: false,
       projectStatusUpdating: false,
@@ -588,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 &&
@@ -851,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/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 100%
rename from packages/nc-gui/store/windows.js
rename to packages/nc-gui/store/settings.js
diff --git a/packages/nc-gui/store/sqlMgr.js b/packages/nc-gui/store/sqlMgr.js
index 6103d6f842..f922e8e16b 100644
--- a/packages/nc-gui/store/sqlMgr.js
+++ b/packages/nc-gui/store/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/tabs.js b/packages/nc-gui/store/tabs.js
index ce2bc2f307..3d0ac62b4a 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))
@@ -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/getting-started/installation.md b/packages/noco-docs/content/en/getting-started/installation.md
index 8fd20b70da..a0e4e36ac9 100644
--- a/packages/noco-docs/content/en/getting-started/installation.md
+++ b/packages/noco-docs/content/en/getting-started/installation.md
@@ -206,7 +206,7 @@ By default, SQLite is used for storing meta data. However, you can specify your
 | NC_SENTRY_DSN                      | No        | For Sentry monitoring                                                                                                   |                                                                                                |   |
 | NC_DISABLE_ERR_REPORT              | No        | Disable error reporting                                                                                                 |                                                                                                |   |
 | NC_REDIS_URL                       | No        | Custom Redis URL. Example: `redis://:authpassword@127.0.0.1:6380/4`                                                     | Meta data will be stored in memory                                                             |   |
-| NC_DISABLE_CACHE                   | No        | If it is set to `true`, then meta data will not be cached.                                                              | `false`                                                                                        |   |
+| NC_DISABLE_CACHE                   | No        | To be used only while debugging. On setting this to `true` - meta data be fetched from db instead of redis/cache.           | `false`                                                                                    |   |
 
 ### AWS ECS (Fargate)
 
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 ca57ca504f..34ed955cac 100644
--- a/packages/noco-docs/content/en/setup-and-usages/dashboard.md
+++ b/packages/noco-docs/content/en/setup-and-usages/dashboard.md
@@ -30,7 +30,7 @@ Once you have logged into NocoDB, you should see `My Projects`.
 
 To create a project, you can click `New Project`.  
     
-![image](https://user-images.githubusercontent.com/35857179/163135493-2afcc8c9-153b-4c82-9f41-397facd10b1a.png)
+![image](https://user-images.githubusercontent.com/35857179/167252813-84876756-f6a1-488a-a185-cbb09f163c5b.png)
 
 ### Creating Empty Project
 
@@ -96,25 +96,6 @@ 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 create's a new **empty database** with specified parameters, if the database doesn't exist.
+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>
-A local SQLite will be used.
-</alert>
-    
-<img src="https://user-images.githubusercontent.com/86527202/144373863-7ced9315-a70b-4746-9295-325e463dc110.png" width="60%"/>  
-
-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..977a6e746d
--- /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,15 @@
+---
+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
+- TODO
+
+### Share you Airtable base
+- TODO
\ No newline at end of file
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..9aa6d31e01 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="567" alt="image" src="https://user-images.githubusercontent.com/35857179/168411444-e39ecf95-2efd-4133-ac3e-5815a9983a3d.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,38 @@ 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)
+
+### Quick Import
+
+You can use Quick Import when you have data from an existing CSV file or Microsoft Excel by clicking `Add / Import` and choosing the corresponding options.
+
+![image](https://user-images.githubusercontent.com/35857179/168412001-54b86df4-5d34-427a-b741-81240f9a63a6.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 Microsoft 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)
 
 ## Column
 
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 ee6bb65487..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;
@@ -3073,6 +3073,24 @@ export class Api<
         ...params,
       }),
 
+    /**
+     * @description Generic Axios Call
+     *
+     * @tags Utils
+     * @name AxiosRequestMake
+     * @request POST:/api/v1/db/meta/axiosRequestMake
+     * @response `200` `object` OK
+     */
+    axiosRequestMake: (data: object, params: RequestParams = {}) =>
+      this.request<object, any>({
+        path: `/api/v1/db/meta/axiosRequestMake`,
+        method: 'POST',
+        body: data,
+        type: ContentType.Json,
+        format: 'json',
+        ...params,
+      }),
+
     /**
      * No description
      *
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 82249d36d4..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",
@@ -68,12 +70,13 @@
         "mysql2": "^2.2.5",
         "nanoid": "^3.1.20",
         "nc-common": "0.0.6",
-        "nc-help": "0.2.46",
+        "nc-help": "0.2.49",
         "nc-lib-gui": "0.90.11",
         "nc-plugin": "^0.1.1",
         "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",
@@ -1019,6 +1022,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@dsherret/to-absolute-glob": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@dsherret/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
+      "integrity": "sha1-H2R13IvZdM6gei2vOGSzF7HdMyw=",
+      "peer": true,
+      "dependencies": {
+        "is-absolute": "^1.0.0",
+        "is-negated-glob": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -1270,7 +1286,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1283,7 +1298,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1292,7 +1306,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1670,6 +1683,33 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.5.2.tgz",
+      "integrity": "sha512-eLmfYV6u6gUgHrB9QV9lpuWg3cD60mhXdv0jvM5exWR/Cor8HG+GziFIj2hPEWHJknqzuU4meZd8DTqIzZfDRQ==",
+      "peer": true,
+      "dependencies": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "fast-glob": "^3.2.2",
+        "fs-extra": "^9.0.0",
+        "is-negated-glob": "^1.0.0",
+        "multimatch": "^4.0.0",
+        "typescript": "~3.9.7"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/typescript": {
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -1782,8 +1822,7 @@
     "node_modules/@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
-      "dev": true
+      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "node_modules/@types/minimist": {
       "version": "1.2.2",
@@ -2331,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",
@@ -2462,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",
@@ -2770,7 +2834,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
       "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2834,7 +2897,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4223,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",
@@ -4997,6 +5080,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
+      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
+      "peer": true
+    },
     "node_modules/code-excerpt": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/code-excerpt/-/code-excerpt-2.1.1.tgz",
@@ -7284,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",
@@ -9611,6 +9711,12 @@
       ],
       "optional": true
     },
+    "node_modules/faker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/faker/-/faker-4.1.0.tgz",
+      "integrity": "sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=",
+      "peer": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -9627,7 +9733,6 @@
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
       "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -9643,7 +9748,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -9655,7 +9759,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -9667,7 +9770,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -9676,7 +9778,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
       "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.1",
         "picomatch": "^2.2.3"
@@ -9689,7 +9790,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -9741,7 +9841,6 @@
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
       "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -10721,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"
       },
@@ -11733,7 +11831,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -12965,6 +13062,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -14473,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",
@@ -14749,7 +14863,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -15682,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",
@@ -15749,7 +15960,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
       "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
-      "dev": true,
       "dependencies": {
         "@types/minimatch": "^3.0.3",
         "array-differ": "^3.0.0",
@@ -15878,9 +16088,9 @@
       }
     },
     "node_modules/nc-help": {
-      "version": "0.2.46",
-      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.46.tgz",
-      "integrity": "sha512-FoQKYtggCo3AWE6OO+BF62Whp51n/JF59hiKNLmw8tzkS/sXp/L8UCm1PYum0QoKqi2hFGxCF/JG1jU0vQiedQ==",
+      "version": "0.2.49",
+      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.49.tgz",
+      "integrity": "sha512-vnDwdHT/vmkdZMnhGvqkvj/LFkpOolRym6zsbAj2Qns67ySbASLJVFQswW2mr6dAHz6Q1ntWeyOKB7yw049mKA==",
       "dependencies": {
         "axios": "^0.21.1",
         "boxen": "^4.2.0",
@@ -16105,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": {
@@ -16149,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",
@@ -17212,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",
@@ -18202,7 +18439,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -18818,7 +19054,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -19462,7 +19697,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -19517,7 +19751,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -22341,6 +22574,17 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-morph": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-7.3.0.tgz",
+      "integrity": "sha512-BUKSoz7AFSKPcYTZODbICW2mOthAN4vc5juD6FL1lD/dLwZ0WvrC3zqBM3/X6f5gHxq3yaz+HmanHGaWm0ddbQ==",
+      "peer": true,
+      "dependencies": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "@ts-morph/common": "~0.5.2",
+        "code-block-writer": "^10.1.0"
+      }
+    },
     "node_modules/ts-node": {
       "version": "8.10.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
@@ -25504,6 +25748,16 @@
         }
       }
     },
+    "@dsherret/to-absolute-glob": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@dsherret/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
+      "integrity": "sha1-H2R13IvZdM6gei2vOGSzF7HdMyw=",
+      "peer": true,
+      "requires": {
+        "is-absolute": "^1.0.0",
+        "is-negated-glob": "^1.0.0"
+      }
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -25699,7 +25953,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -25708,14 +25961,12 @@
     "@nodelib/fs.stat": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
     },
     "@nodelib/fs.walk": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -26018,6 +26269,28 @@
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A=="
     },
+    "@ts-morph/common": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.5.2.tgz",
+      "integrity": "sha512-eLmfYV6u6gUgHrB9QV9lpuWg3cD60mhXdv0jvM5exWR/Cor8HG+GziFIj2hPEWHJknqzuU4meZd8DTqIzZfDRQ==",
+      "peer": true,
+      "requires": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "fast-glob": "^3.2.2",
+        "fs-extra": "^9.0.0",
+        "is-negated-glob": "^1.0.0",
+        "multimatch": "^4.0.0",
+        "typescript": "~3.9.7"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "3.9.10",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+          "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
+          "peer": true
+        }
+      }
+    },
     "@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -26130,8 +26403,7 @@
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
-      "dev": true
+      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "@types/minimist": {
       "version": "1.2.2",
@@ -26593,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",
@@ -26701,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",
@@ -26957,8 +27253,7 @@
     "array-differ": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg=="
     },
     "array-each": {
       "version": "1.0.1",
@@ -27003,8 +27298,7 @@
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
     "array-uniq": {
       "version": "2.1.0",
@@ -28135,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",
@@ -28731,6 +29048,12 @@
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.0.tgz",
       "integrity": "sha512-2Nii8p3RwAPiFwsnZvukotvow2rIHM+yQ6ZcBXGHdniadkYGZYiGmkHJIbZPIV9nfv7m/U1IPMVVcAhoWFeklw=="
     },
+    "code-block-writer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
+      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
+      "peer": true
+    },
     "code-excerpt": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/code-excerpt/-/code-excerpt-2.1.1.tgz",
@@ -30523,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",
@@ -32383,6 +32714,12 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "optional": true
     },
+    "faker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/faker/-/faker-4.1.0.tgz",
+      "integrity": "sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=",
+      "peer": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -32399,7 +32736,6 @@
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
       "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -32412,7 +32748,6 @@
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
           "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -32421,7 +32756,6 @@
           "version": "7.0.1",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
           "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -32429,14 +32763,12 @@
         "is-number": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
         },
         "micromatch": {
           "version": "4.0.4",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
           "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
           "requires": {
             "braces": "^3.0.1",
             "picomatch": "^2.2.3"
@@ -32446,7 +32778,6 @@
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
           "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -32490,7 +32821,6 @@
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
       "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
-      "dev": true,
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -33299,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",
@@ -34041,7 +34370,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -34951,6 +35279,12 @@
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
       "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w=="
     },
+    "is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=",
+      "peer": true
+    },
     "is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -36123,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",
@@ -36351,8 +36690,7 @@
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
     },
     "methods": {
       "version": "1.1.2",
@@ -37088,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",
@@ -37144,7 +37541,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
       "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
-      "dev": true,
       "requires": {
         "@types/minimatch": "^3.0.3",
         "array-differ": "^3.0.0",
@@ -37253,9 +37649,9 @@
       "integrity": "sha512-3AryS9uwa5NfISLxMciUonrH7YfXp+nlahB9T7girXIsLQrmwX4MdnuKs32akduCOGpKmjTJSWmATULbuMkbfw=="
     },
     "nc-help": {
-      "version": "0.2.46",
-      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.46.tgz",
-      "integrity": "sha512-FoQKYtggCo3AWE6OO+BF62Whp51n/JF59hiKNLmw8tzkS/sXp/L8UCm1PYum0QoKqi2hFGxCF/JG1jU0vQiedQ==",
+      "version": "0.2.49",
+      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.49.tgz",
+      "integrity": "sha512-vnDwdHT/vmkdZMnhGvqkvj/LFkpOolRym6zsbAj2Qns67ySbASLJVFQswW2mr6dAHz6Q1ntWeyOKB7yw049mKA==",
       "requires": {
         "axios": "^0.21.1",
         "boxen": "^4.2.0",
@@ -37470,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"
       }
@@ -37519,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",
@@ -38368,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",
@@ -39127,8 +39534,7 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "pidtree": {
       "version": "0.3.1",
@@ -39585,8 +39991,7 @@
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
     "quick-lru": {
       "version": "1.1.0",
@@ -40077,8 +40482,7 @@
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
     "right-pad": {
       "version": "1.0.1",
@@ -40120,7 +40524,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "requires": {
         "queue-microtask": "^1.2.2"
       }
@@ -42341,6 +42744,17 @@
         }
       }
     },
+    "ts-morph": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-7.3.0.tgz",
+      "integrity": "sha512-BUKSoz7AFSKPcYTZODbICW2mOthAN4vc5juD6FL1lD/dLwZ0WvrC3zqBM3/X6f5gHxq3yaz+HmanHGaWm0ddbQ==",
+      "peer": true,
+      "requires": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "@ts-morph/common": "~0.5.2",
+        "code-block-writer": "^10.1.0"
+      }
+    },
     "ts-node": {
       "version": "8.10.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
diff --git a/packages/nocodb/package.json b/packages/nocodb/package.json
index 487db8a978..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",
@@ -150,12 +152,13 @@
     "mysql2": "^2.2.5",
     "nanoid": "^3.1.20",
     "nc-common": "0.0.6",
-    "nc-help": "0.2.46",
+    "nc-help": "0.2.49",
     "nc-lib-gui": "0.90.11",
     "nc-plugin": "^0.1.1",
     "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 6523373c2b..f9e67c6222 100644
--- a/packages/nocodb/src/lib/dataMapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/dataMapper/lib/sql/BaseModelSqlv2.ts
@@ -1260,12 +1260,13 @@ class BaseModelSqlv2 {
 
   async delByPk(id, trx?, cookie?) {
     try {
+      // retrieve data for handling paramas in hook
+      const data = await this.readByPk(id);
       await this.beforeDelete(id, trx, cookie);
-
       const response = await this.dbDriver(this.tnPath)
         .del()
         .where(await this._wherePk(id));
-      await this.afterDelete(response, trx, cookie);
+      await this.afterDelete(data, trx, cookie);
       return response;
     } catch (e) {
       console.log(e);
@@ -1479,7 +1480,7 @@ class BaseModelSqlv2 {
 
       const response = await this.dbDriver
         .batchInsert(this.model.table_name, insertDatas, 50)
-        .returning(this.model.primaryKey.column_name);
+        .returning(this.model.primaryKey?.column_name);
 
       // await this.afterInsertb(insertDatas, null);
 
diff --git a/packages/nocodb/src/lib/dataMapper/lib/sql/helpers/getAst.ts b/packages/nocodb/src/lib/dataMapper/lib/sql/helpers/getAst.ts
index a184ae72b2..5307aba7ed 100644
--- a/packages/nocodb/src/lib/dataMapper/lib/sql/helpers/getAst.ts
+++ b/packages/nocodb/src/lib/dataMapper/lib/sql/helpers/getAst.ts
@@ -17,6 +17,8 @@ const getAst = async ({
   view?: View;
 }) => {
   if (!model.columns?.length) await model.getColumns();
+
+  // extract only pk and pv
   if (extractOnlyPrimaries) {
     return {
       ...(model.primaryKeys
@@ -71,7 +73,7 @@ const getAst = async ({
       value = await getAst({
         model,
         query: query?.nested,
-        extractOnlyPrimaries: true
+        extractOnlyPrimaries: nestedFields !== '*'
       });
     }
 
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/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..eeca1fae48 100644
--- a/packages/nocodb/src/lib/noco/common/XcMigrationSourcev2.ts
+++ b/packages/nocodb/src/lib/noco/common/XcMigrationSourcev2.ts
@@ -1,5 +1,7 @@
 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';
 
 // Create a custom migration source class
 export default class XcMigrationSourcev2 {
@@ -8,7 +10,12 @@ 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'
+    ]);
   }
 
   public getMigrationName(migration): string {
@@ -21,6 +28,10 @@ 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;
     }
   }
 }
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/columnApis.ts b/packages/nocodb/src/lib/noco/meta/api/columnApis.ts
index 4959cf206b..96c68b5885 100644
--- a/packages/nocodb/src/lib/noco/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/columnApis.ts
@@ -496,7 +496,11 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
         }> = (await sqlClient.columnList({ tn: table.table_name }))?.data?.list;
 
         const insertedColumnMeta =
-          columns.find(c => c.cn === colBody.column_name) || {};
+          columns.find(c => c.cn === colBody.column_name) || {} as any;
+
+        if (colBody.uidt === UITypes.SingleSelect || colBody.uidt === UITypes.MultiSelect) {
+          insertedColumnMeta.dtxp = colBody.dtxp;
+        }
 
         await Column.insert({
           ...colBody,
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..e9a8848bb9
--- /dev/null
+++ b/packages/nocodb/src/lib/noco/meta/api/sync/helpers/job.ts
@@ -0,0 +1,2007 @@
+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
+    const col_name = name
+      .replace(/\?/g, 'QQ')
+      .replace('.', '_')
+      .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/api/utilApis.ts b/packages/nocodb/src/lib/noco/meta/api/utilApis.ts
index 123bc1a069..25073bbc54 100644
--- a/packages/nocodb/src/lib/noco/meta/api/utilApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/utilApis.ts
@@ -60,6 +60,52 @@ export async function releaseVersion(_req: Request, res: Response) {
   res.json(result);
 }
 
+export async function axiosRequestMake(req: Request, res: Response) {
+  const { apiMeta } = req.body;
+  if (apiMeta?.body) {
+    try {
+      apiMeta.body = JSON.parse(apiMeta.body);
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  if (apiMeta?.auth) {
+    try {
+      apiMeta.auth = JSON.parse(apiMeta.auth);
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  apiMeta.response = {};
+  const _req = {
+    params: apiMeta.parameters
+      ? apiMeta.parameters.reduce((paramsObj, param) => {
+          if (param.name && param.enabled) {
+            paramsObj[param.name] = param.value;
+          }
+          return paramsObj;
+        }, {})
+      : {},
+    url: apiMeta.url,
+    method: apiMeta.method || 'GET',
+    data: apiMeta.body || {},
+    headers: apiMeta.headers
+      ? apiMeta.headers.reduce((headersObj, header) => {
+          if (header.name && header.enabled) {
+            headersObj[header.name] = header.value;
+          }
+          return headersObj;
+        }, {})
+      : {},
+    responseType: apiMeta.responseType || 'json',
+    withCredentials: true
+  };
+  const data = await require('axios')(_req);
+  return res.json(data?.data);
+}
+
 export default router => {
   router.post(
     '/api/v1/db/meta/connection/test',
@@ -67,4 +113,5 @@ export default router => {
   );
   router.get('/api/v1/db/meta/nocodb/info', catchError(appInfo));
   router.get('/api/v1/db/meta/nocodb/version', catchError(releaseVersion));
+  router.post('/api/v1/db/meta/axiosRequestMake', catchError(axiosRequestMake));
 };
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/nocodb/src/lib/noco/upgrader/jobs/ncProjectUpgraderV2_0090000.ts b/packages/nocodb/src/lib/noco/upgrader/jobs/ncProjectUpgraderV2_0090000.ts
index c0ef59e8ed..5a8439a7f3 100644
--- a/packages/nocodb/src/lib/noco/upgrader/jobs/ncProjectUpgraderV2_0090000.ts
+++ b/packages/nocodb/src/lib/noco/upgrader/jobs/ncProjectUpgraderV2_0090000.ts
@@ -777,8 +777,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 +951,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 +961,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 +1031,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 +1047,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 +1080,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 +1240,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/german.md b/scripts/markdown/readme/languages/german.md
index 3b15008785..4d6ca079b8 100644
--- a/scripts/markdown/readme/languages/german.md
+++ b/scripts/markdown/readme/languages/german.md
@@ -54,7 +54,7 @@ docker run -d --name nocodb -p 8080:8080 nocodb/nocodb:latest
 ```
 
 - NocoDB benötigt eine Datenbank zur Eingabe: Siehe [Production Setup](https://github.com/nocodb/nocodb/blob/master/README.md#production-setup).
-- Fehlt diese Eingabe, wird aus SQLite zurückgegriffen. Um SQLite dauerhaft zu machen, kann `/usr/app/data/` gemountet werden. 
+- Fehlt diese Eingabe, wird auf SQLite zurückgegriffen. Um SQLite beständig zu machen, kann `/usr/app/data/` gemountet werden. 
 
   Beispiel:
 
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 091505e9a9..064de341de 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -4800,6 +4800,39 @@
         "description": ""
       }
     },
+    "/api/v1/db/meta/axiosRequestMake": {
+      "parameters": [],
+      "post": {
+        "summary": "",
+        "operationId": "utils-axios-request-make",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {}
+                }
+              }
+            }
+          }
+        },
+        "description": "Generic Axios Call",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object"
+              }
+            }
+          }
+        },
+        "tags": [
+          "Utils"
+        ]
+      }
+    },
     "/api/v1/db/meta/nocodb/version": {
       "parameters": [],
       "get": {
@@ -5725,7 +5758,7 @@
           "title": {
             "type": "string"
           },
-          "table_nameme": {
+          "table_name": {
             "type": "string"
           },
           "type": {
@@ -5773,7 +5806,7 @@
         },
         "required": [
           "title",
-          "table_nameme"
+          "table_name"
         ]
       },
       "TableReq": {
@@ -7925,4 +7958,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}