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 92%
rename from packages/nc-gui/components/projectTabs.vue
rename to packages/nc-gui/components/ProjectTabs.vue
index d272c266b2..59b2cc302d 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="" />
 
@@ -357,33 +357,33 @@
 <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 QuickImport from '@/components/import/quickImport'
-import ImportFromAirtable from '~/components/import/importFromAirtable'
+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: {
@@ -471,7 +471,7 @@ export default {
             }
           }
 
-          self.showScreensaver = self.$store.state.windows.screensaver
+          self.showScreensaver = self.$store.state.settings.screensaver
           scrolltitle()
           clearInterval(idleInterval)
         }
diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index 865b086a80..07ac95aa73 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@@ -784,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 QuickImport from "~/components/import/quickImport";
+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: {
@@ -909,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() {
@@ -1063,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) {
@@ -1253,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,
                 }))
               ) {
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/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
similarity index 100%
rename from packages/nc-gui/components/import/importFromAirtable.vue
rename to packages/nc-gui/components/import/ImportFromAirtable.vue
diff --git a/packages/nc-gui/components/import/quickImport.vue b/packages/nc-gui/components/import/QuickImport.vue
similarity index 99%
rename from packages/nc-gui/components/import/quickImport.vue
rename to packages/nc-gui/components/import/QuickImport.vue
index e1c9ae8ecf..3ac14f1a68 100644
--- a/packages/nc-gui/components/import/quickImport.vue
+++ b/packages/nc-gui/components/import/QuickImport.vue
@@ -187,8 +187,8 @@
 <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'
 
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 98%
rename from packages/nc-gui/components/project/auditTab/audit.vue
rename to packages/nc-gui/components/project/auditTab/Audit.vue
index f7bc5736a0..0ddfb15f48 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 }}-->
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 98%
rename from packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue
index 075daa9710..4841aa71fa 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue
@@ -112,11 +112,11 @@
 
 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'
 
 export default {
   name: 'ExportImport',
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 99%
rename from packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
rename to packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
index 033f6bf2b8..69e4d8cb1d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
@@ -288,7 +288,7 @@
         </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,12 +518,12 @@
 <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'
 
 export default {
   name: 'SpreadsheetNavDrawer',
@@ -726,7 +726,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 100%
rename from packages/nc-gui/components/project/spreadsheet/components/importExport/columnMappingModal.vue
rename to packages/nc-gui/components/project/spreadsheet/components/importExport/ColumnMappingModal.vue
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 2fc1811673..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 },
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 99%
rename from packages/nc-gui/components/project/tableTabs/webhook/webhookEditor.vue
rename to packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue
index 7cfe8969b8..0f4f6092d9 100644
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhookEditor.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue
@@ -243,10 +243,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
similarity index 100%
rename from packages/nc-gui/components/project/tableTabs/webhook/webhookList.vue
rename to packages/nc-gui/components/project/tableTabs/webhook/WebhookList.vue
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/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/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 96%
rename from packages/nc-gui/components/settings/settingsModal.vue
rename to packages/nc-gui/components/settings/SettingsModal.vue
index 93e4987dba..fa84ae6f75 100644
--- a/packages/nc-gui/components/settings/settingsModal.vue
+++ b/packages/nc-gui/components/settings/SettingsModal.vue
@@ -172,12 +172,12 @@
 </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 ImportFromAirtable from '~/components/import/importFromAirtable'
+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',
diff --git a/packages/nc-gui/components/templates/categories.vue b/packages/nc-gui/components/templates/Categories.vue
similarity index 100%
rename from packages/nc-gui/components/templates/categories.vue
rename to packages/nc-gui/components/templates/Categories.vue
diff --git a/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue b/packages/nc-gui/components/templates/CreateProjectFromTemplateBtn.vue
similarity index 100%
rename from packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
rename to packages/nc-gui/components/templates/CreateProjectFromTemplateBtn.vue
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 99%
rename from packages/nc-gui/components/templates/editor.vue
rename to packages/nc-gui/components/templates/Editor.vue
index 2faa6535f7..b293460bfc 100644
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/packages/nc-gui/components/templates/Editor.vue
@@ -759,16 +759,16 @@
 </template>
 
 <script>
+import {
+  isVirtualCol
+} from 'nocodb-sdk'
 import {
   uiTypes,
   getUIDTIcon,
   UITypes
 } from '~/components/project/spreadsheet/helpers/uiTypes'
-import GradientGenerator from '~/components/templates/gradientGenerator'
-import Help from '~/components/templates/help'
-import {
-  isVirtualCol,
-} from "nocodb-sdk";
+import GradientGenerator from '~/components/templates/GradientGenerator'
+import Help from '~/components/templates/Help'
 
 const LinkToAnotherRecord = 'LinkToAnotherRecord'
 const Lookup = 'Lookup'
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/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/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 1951d0815a..83c324116a 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -22,8 +22,8 @@
                   :tooltip="$t('activity.refreshProject')"
                   @click="projectsRefresh"
                 >
-                  mdi-refresh </x-icon
-                >&nbsp;
+                  mdi-refresh
+                </x-icon>&nbsp;
                 <!--                </x-btn>-->
               </h1>
             </v-row>
@@ -41,22 +41,24 @@
                 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>
@@ -73,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>
@@ -83,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 -->
@@ -109,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 -->
@@ -218,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': !(
@@ -251,7 +259,7 @@
                         <x-icon
                           v-if="
                             projectStatusUpdating &&
-                            props.item.id === statusUpdatingProjectId
+                              props.item.id === statusUpdatingProjectId
                           "
                           class="mr-1"
                         >
@@ -291,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 -->
@@ -305,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 -->
@@ -319,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 -->
@@ -387,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>
@@ -418,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>
@@ -448,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>
@@ -463,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>
@@ -505,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>
@@ -525,7 +547,7 @@
       type="file"
       accept=".zip"
       @change="importMetaZip"
-    />
+    >
 
     <dlg-label-submit-cancel
       v-if="dialogShow"
@@ -539,23 +561,23 @@
 </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 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: {
     TemplatesModal,
     ShareIcons,
     SponsorMini,
-    dlgLabelSubmitCancel,
+    dlgLabelSubmitCancel
     // howItWorks,
   },
   mixins: [colors],
   $_veeValidate: {
-    validator: "new",
+    validator: 'new'
   },
   data() {
     return {
@@ -566,7 +588,7 @@ export default {
       loading: null,
       dialogShow: false,
       confirmAction: null,
-      confirmMessage: "",
+      confirmMessage: '',
 
       createProjectDialog: false,
       projectStatusUpdating: false,
@@ -577,249 +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);
+    setTimeout(() => (this.showCommunity = true), 2000)
 
-    await this.projectsLoad();
+    await this.projectsLoad()
   },
   methods: {
     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");
+      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 &&
@@ -827,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/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/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