diff --git a/.all-contributorsrc b/.all-contributorsrc
index 1787418b03..d473b894eb 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -864,6 +864,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "dolsem",
+      "name": "Denis Olsem",
+      "avatar_url": "https://avatars.githubusercontent.com/u/14323955?v=4",
+      "profile": "https://github.com/dolsem",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
diff --git a/README.md b/README.md
index 4534588a55..b7a0a980f9 100644
--- a/README.md
+++ b/README.md
@@ -453,6 +453,7 @@ Our mission is to provide the most powerful no-code interface for databases whic
       <td align="center"><a href="https://github.com/drsantam"><img src="https://avatars.githubusercontent.com/u/10681456?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Santam Chakraborty</b></sub></a><br /><a href="#translation-drsantam" title="Translation">🌍</a></td>
       <td align="center"><a href="https://bandism.net/"><img src="https://avatars.githubusercontent.com/u/22633385?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ikko Ashimine</b></sub></a><br /><a href="https://github.com/nocodb/nocodb/commits?author=eltociear" title="Code">💻</a></td>
       <td align="center"><a href="http://asheerrizvi.com"><img src="https://avatars.githubusercontent.com/u/17976252?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Asheer Rizvi</b></sub></a><br /><a href="https://github.com/nocodb/nocodb/commits?author=asheerrizvi" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/dolsem"><img src="https://avatars.githubusercontent.com/u/14323955?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Denis Olsem</b></sub></a><br /><a href="https://github.com/nocodb/nocodb/commits?author=dolsem" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 3458e922f2..6eaa24df25 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -224,6 +224,7 @@ declare module '@vue/runtime-core' {
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 0705a02495..abc49e68d5 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -42,9 +42,15 @@ function onClick() {
 <template>
   <div
     class="flex"
-    :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel && !readOnly, 'opacity-0': readOnly && !vModel }"
+    :class="{
+      'justify-center': !isForm,
+      'w-full': isForm,
+      'nc-cell-hover-show': !vModel && !readOnly,
+      'opacity-0': readOnly && !vModel,
+    }"
+    @click="onClick"
   >
-    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="onClick">
+    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }">
       <component
         :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
         :style="{
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 2d9af3343b..5c00e36526 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -1,21 +1,35 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
-import MiCircleWarning from '~icons/mi/circle-warning'
+import {
+  CellUrlDisableOverlayInj,
+  ColumnInj,
+  EditModeInj,
+  computed,
+  inject,
+  isValidURL,
+  ref,
+  useCellUrlConfig,
+  useI18n,
+  watch,
+} from '#imports'
 
-const { modelValue: value } = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
-const { t } = useI18n()
 interface Props {
   modelValue?: string | null
 }
 
+const { modelValue: value } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t } = useI18n()
+
 const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
 
+const disableOverlay = inject(CellUrlDisableOverlayInj)
+
 // Used in the logic of when to display error since we are not storing the url if its not valid
 const localState = ref(value)
 
@@ -40,6 +54,8 @@ const url = computed(() => {
   return `https://${value}`
 })
 
+const { cellUrlOptions } = useCellUrlConfig(url)
+
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 watch(
@@ -59,7 +75,22 @@ watch(
   <div class="flex flex-row items-center justify-between">
     <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm w-full" @blur="editEnabled = false" />
 
-    <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
+    <nuxt-link
+      v-else-if="isValid && !cellUrlOptions?.overlay"
+      class="z-3 text-sm underline hover:opacity-75"
+      :to="url"
+      :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
+    >
+      {{ value }}
+    </nuxt-link>
+    <nuxt-link
+      v-else-if="isValid && !disableOverlay && cellUrlOptions?.overlay"
+      class="z-3 w-full h-full text-center !no-underline hover:opacity-75"
+      :to="url"
+      :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
+    >
+      {{ cellUrlOptions.overlay }}
+    </nuxt-link>
 
     <span v-else class="w-9/10 overflow-ellipsis overflow-hidden">{{ value }}</span>
 
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 36e4e6c436..f8937b9821 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -9,7 +9,7 @@ const { isUIAllowed } = useUIPermission()
 const {
   open,
   isLoading,
-  isPublicGrid,
+  isPublic,
   isReadonly,
   visibleItems,
   modalVisible,
@@ -68,7 +68,7 @@ function onClick(item: Record<string, any>) {
     <template #title>
       <div class="flex gap-4">
         <div
-          v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
+          v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublic && !isLocked)"
           class="nc-attach-file group"
           @click="open"
         >
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 8c88a86b4e..5093eee409 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -65,7 +65,7 @@ watch(
     } else {
       nextTick(() => {
         const nextCell = cellRefs.value.reduceRight((cell, curr) => {
-          if (!cell && curr.dataset.key === `${rowIndex}${column.value.id}`) cell = curr
+          if (!cell && curr.dataset.key === `${rowIndex}${column.value!.id}`) cell = curr
 
           return cell
         }, undefined as HTMLTableDataCellElement | undefined)
@@ -118,7 +118,7 @@ onKeyDown('Escape', () => {
 watch(
   () => storedFiles.value.length || 0,
   () => {
-    rowState.value[column.value.title!] = storedFiles.value
+    rowState.value[column.value!.title!] = storedFiles.value
   },
 )
 
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index 453aa345e8..975b84d624 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -1,9 +1,9 @@
 import { message } from 'ant-design-vue'
 import FileSaver from 'file-saver'
-import { useI18n } from 'vue-i18n'
 import {
   ColumnInj,
   EditModeInj,
+  IsFormInj,
   IsPublicInj,
   MetaInj,
   NOCO,
@@ -14,11 +14,11 @@ import {
   ref,
   useApi,
   useFileDialog,
+  useI18n,
   useInjectionState,
   useProject,
   watch,
 } from '#imports'
-import { IsFormInj } from '~/context'
 import MdiPdfBox from '~icons/mdi/pdf-box'
 import MdiFileWordOutline from '~icons/mdi/file-word-outline'
 import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
@@ -40,9 +40,9 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const isForm = inject(IsFormInj, ref(false))
 
-    const meta = inject(MetaInj)!
+    const meta = inject(MetaInj, ref())
 
-    const column = inject(ColumnInj)!
+    const column = inject(ColumnInj, ref())
 
     const editEnabled = inject(EditModeInj, ref(false))
 
@@ -119,7 +119,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         try {
           const data = await api.storage.upload(
             {
-              path: [NOCO, project.value.title, meta.value.title, column.value.title].join('/'),
+              path: [NOCO, project.value.title, meta.value?.title, column.value?.title].join('/'),
             },
             {
               files: file,
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index b4f93a7778..1b1c9de92f 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -104,7 +104,7 @@ const initSortable = (el: Element) => {
 
       // update the item order
       await $api.dbTable.reorder(item.id as string, {
-        order: item.order as any,
+        order: item.order,
       })
     },
     animation: 150,
@@ -142,7 +142,7 @@ const reloadTables = async () => {
 }
 
 const addTableTab = (table: TableType) => {
-  addTab({ title: table.title, id: table.id, type: table.type as any })
+  addTab({ title: table.title, id: table.id, type: table.type as TabType })
 }
 
 function openRenameTableDialog(table: TableType, rightClick = false) {
@@ -286,7 +286,7 @@ function openTableCreateDialog() {
 
                   <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
                     <a
-                      v-t="['e:datasource:import-request']"
+                      v-e="['e:datasource:import-request']"
                       href="https://github.com/nocodb/nocodb/issues/2052"
                       target="_blank"
                       class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
@@ -306,7 +306,7 @@ function openTableCreateDialog() {
               <div
                 v-for="table of tables"
                 :key="table.id"
-                v-t="['a:table:open']"
+                v-e="['a:table:open']"
                 :class="[
                   { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
                   `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 4e3a4c644b..82b5a47e48 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -83,7 +83,7 @@ const columns = [
     <div class="flex flex-col w-3/5">
       <div class="flex flex-row justify-end items-center w-full mb-4">
         <!--        Reload -->
-        <a-button v-t="['a:proj-meta:meta-data:reload']" class="self-start nc-btn-metasync-reload" @click="loadMetaDiff">
+        <a-button v-e="['a:proj-meta:meta-data:reload']" class="self-start nc-btn-metasync-reload" @click="loadMetaDiff">
           <div class="flex items-center gap-2 text-gray-600 font-light">
             <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
             {{ $t('general.reload') }}
@@ -112,7 +112,7 @@ const columns = [
     <div class="flex place-content-center w-2/5">
       <!--      Sync Now -->
       <div v-if="isDifferent">
-        <a-button v-t="['a:proj-meta:meta-data:sync']" class="nc-btn-metasync-sync-now" type="primary" @click="syncMetaDiff">
+        <a-button v-e="['a:proj-meta:meta-data:sync']" class="nc-btn-metasync-sync-now" type="primary" @click="syncMetaDiff">
           <div class="flex items-center gap-2">
             <MdiDatabaseSync />
             {{ $t('activity.metaSync') }}
diff --git a/packages/nc-gui/components/dashboard/settings/Misc.vue b/packages/nc-gui/components/dashboard/settings/Misc.vue
index 500b63f10b..a9ce1f6d2e 100644
--- a/packages/nc-gui/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui/components/dashboard/settings/Misc.vue
@@ -10,7 +10,7 @@ watch(includeM2M, async () => await loadTables())
     <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <!--        Show M2M Tables -->
-        <a-checkbox v-model:checked="includeM2M" v-t="['c:themes:show-m2m-tables']">{{
+        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']">{{
           $t('msg.info.showM2mTables')
         }}</a-checkbox>
       </div>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 655a4cf1ba..ebc2cc828e 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -208,7 +208,7 @@ watch(
           </a-menu-item>
         </a-menu>
 
-        <component :is="selectedSubTab.body" class="px-2 py-6" />
+        <component :is="selectedSubTab?.body" class="px-2 py-6" />
       </a-layout-content>
     </a-layout>
   </a-modal>
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index 1469e46061..0aeca558e4 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -208,9 +208,10 @@ onMounted(async () => {
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
 
-    // FIXME: this doesn't work
     await nextTick(() => {
-      ;(logRef.value?.$el as HTMLDivElement).scrollTo()
+      const container: HTMLDivElement = logRef.value?.$el?.firstElementChild
+      if (!container) return
+      container.scrollTop = container.scrollHeight
     })
 
     if (d.status === 'COMPLETED') {
@@ -251,7 +252,8 @@ onBeforeUnmount(() => {
             href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free/#get-airtable-credentials"
             class="prose-sm underline text-grey text-xs"
             target="_blank"
-            >{{ $t('msg.info.airtable.credentials') }}
+          >
+            {{ $t('msg.info.airtable.credentials') }}
           </a>
         </div>
 
@@ -286,30 +288,30 @@ onBeforeUnmount(() => {
 
           <!--          Import Secondary Views -->
           <div class="my-2">
-            <a-checkbox v-model:checked="syncSource.details.options.syncViews">{{
-              $t('labels.importSecondaryViews')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncViews">
+              {{ $t('labels.importSecondaryViews') }}
+            </a-checkbox>
           </div>
 
           <!--          Import Rollup Columns -->
           <div class="my-2">
-            <a-checkbox v-model:checked="syncSource.details.options.syncRollup">{{
-              $t('labels.importRollupColumns')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncRollup">
+              {{ $t('labels.importRollupColumns') }}
+            </a-checkbox>
           </div>
 
           <!--          Import Lookup Columns -->
           <div class="my-2">
-            <a-checkbox v-model:checked="syncSource.details.options.syncLookup">{{
-              $t('labels.importLookupColumns')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncLookup">
+              {{ $t('labels.importLookupColumns') }}
+            </a-checkbox>
           </div>
 
           <!--          Import Attachment Columns -->
           <div class="my-2">
-            <a-checkbox v-model:checked="syncSource.details.options.syncAttachment">{{
-              $t('labels.importAttachmentColumns')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncAttachment">
+              {{ $t('labels.importAttachmentColumns') }}
+            </a-checkbox>
           </div>
 
           <!--          Import Formula Columns -->
@@ -317,9 +319,9 @@ onBeforeUnmount(() => {
             <template #title>
               <span>Coming Soon!</span>
             </template>
-            <a-checkbox v-model:checked="syncSource.details.options.syncFormula" disabled>{{
-              $t('labels.importFormulaColumns')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncFormula" disabled>
+              {{ $t('labels.importFormulaColumns') }}
+            </a-checkbox>
           </a-tooltip>
         </a-form>
 
@@ -327,8 +329,8 @@ onBeforeUnmount(() => {
 
         <!--        Questions / Help - Reach out here -->
         <div>
-          <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank"
-            >{{ $t('general.questions') }} / {{ $t('general.help') }} - {{ $t('general.reachOut') }}</a
+          <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank">
+            {{ $t('general.questions') }} / {{ $t('general.help') }} - {{ $t('general.reachOut') }}</a
           >
 
           <br />
@@ -337,8 +339,8 @@ onBeforeUnmount(() => {
             {{ $t('general.betaNote') }}
             <a class="prose-sm" href="https://github.com/nocodb/nocodb/discussions/2122" target="_blank">{{
               $t('general.moreInfo')
-            }}</a
-            >.
+            }}</a>
+            .
           </div>
         </div>
       </div>
@@ -391,7 +393,7 @@ onBeforeUnmount(() => {
         <!--        Import -->
         <a-button
           key="submit"
-          v-t="['c:sync-airtable:save-and-sync']"
+          v-e="['c:sync-airtable:save-and-sync']"
           type="primary"
           class="nc-btn-airtable-import"
           :disabled="disableImportButton"
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index e9c79307e1..933e94c434 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -42,7 +42,7 @@ const { t } = useI18n()
 
 const { isLoading: loading, api } = useApi()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const viewList = inject(ViewListInj)
 
diff --git a/packages/nc-gui/components/general/HelpAndSupport.vue b/packages/nc-gui/components/general/HelpAndSupport.vue
index c97ad0f013..2695a12d81 100644
--- a/packages/nc-gui/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui/components/general/HelpAndSupport.vue
@@ -41,7 +41,7 @@ const openSwaggerLink = () => {
         <template #before>
           <a-list-item v-if="project">
             <nuxt-link
-              v-t="['a:navbar:user:swagger']"
+              v-e="['a:navbar:user:swagger']"
               class="!no-underline !text-current py-4 font-semibold"
               target="_blank"
               @click="openSwaggerLink"
diff --git a/packages/nc-gui/components/general/MiniSidebar.vue b/packages/nc-gui/components/general/MiniSidebar.vue
index f41b4a6717..8e4aebf01b 100644
--- a/packages/nc-gui/components/general/MiniSidebar.vue
+++ b/packages/nc-gui/components/general/MiniSidebar.vue
@@ -37,7 +37,7 @@ const logout = () => {
         <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded nc-menu-account">
           <a-menu-item-group title="User Settings">
             <a-menu-item key="email" class="!rounded-t">
-              <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
+              <nuxt-link v-e="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
                 <MdiAt class="mt-1 group-hover:text-success" />
                 &nbsp;
                 <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
@@ -47,7 +47,7 @@ const logout = () => {
             <a-menu-divider class="!m-0" />
 
             <a-menu-item key="signout" class="!rounded-b">
-              <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
+              <div v-e="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
                 <MdiLogout class="group-hover:(!text-red-500)" />&nbsp;
                 <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
                   {{ $t('general.signOut') }}
@@ -76,7 +76,7 @@ const logout = () => {
 
               <a-menu-item class="active:(ring ring-accent)">
                 <div
-                  v-t="['c:project:create:xcdb']"
+                  v-e="['c:project:create:xcdb']"
                   class="group flex items-center gap-2 py-2 hover:text-primary"
                   @click="navigateTo('/project/create')"
                 >
@@ -87,7 +87,7 @@ const logout = () => {
 
               <a-menu-item class="rounded-b active:(ring ring-accent)">
                 <div
-                  v-t="['c:project:create:extdb']"
+                  v-e="['c:project:create:extdb']"
                   class="group flex items-center gap-2 py-2 hover:text-primary"
                   @click="navigateTo('/project/create-external')"
                 >
diff --git a/packages/nc-gui/components/general/Social.vue b/packages/nc-gui/components/general/Social.vue
index 87613759c2..53adcad83e 100644
--- a/packages/nc-gui/components/general/Social.vue
+++ b/packages/nc-gui/components/general/Social.vue
@@ -23,18 +23,18 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
   />
 
   <div v-else class="flex justify-between gap-1 w-full px-2">
-    <MdiDiscord v-t="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" />
+    <MdiDiscord v-e="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" />
     <div
-      v-t="['e:community:discourse']"
+      v-e="['e:community:discourse']"
       class="icon flex items-center justify-center min-w-[43px]"
       @click="open('https://community.nocodb.com/')"
     >
       <div class="discourse" />
     </div>
-    <MdiReddit v-t="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
-    <MdiTwitter v-t="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
+    <MdiReddit v-e="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
+    <MdiTwitter v-e="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
     <MdiCalendarMonth
-      v-t="['e:community:book-demo']"
+      v-e="['e:community:book-demo']"
       class="icon text-green-500"
       @click="open('https://calendly.com/nocodb-meeting')"
     />
diff --git a/packages/nc-gui/components/general/SocialCard.vue b/packages/nc-gui/components/general/SocialCard.vue
index 8fc0b9fa81..21b84d274e 100644
--- a/packages/nc-gui/components/general/SocialCard.vue
+++ b/packages/nc-gui/components/general/SocialCard.vue
@@ -13,7 +13,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
 
       <a-list-item>
         <nuxt-link
-          v-t="['e:docs']"
+          v-e="['e:docs']"
           class="text-primary !no-underline !text-current"
           target="_blank"
           to="https://docs.nocodb.com/"
@@ -26,7 +26,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:api-docs']"
+          v-e="['e:api-docs']"
           class="text-primary !no-underline !text-current"
           target="_blank"
           to="https://apis.nocodb.com/"
@@ -40,7 +40,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:github']"
+          v-e="['e:community:github']"
           class="text-primary !no-underline !text-current"
           to="https://github.com/nocodb/nocodb"
           target="_blank"
@@ -66,7 +66,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:book-demo']"
+          v-e="['e:community:book-demo']"
           class="!no-underline !text-current"
           to="https://calendly.com/nocodb-meeting"
           target="_blank"
@@ -82,7 +82,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:discord']"
+          v-e="['e:community:discord']"
           class="!no-underline !text-current"
           to="https://discord.gg/5RgZmkW"
           target="_blank"
@@ -98,7 +98,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:twitter']"
+          v-e="['e:community:twitter']"
           class="!no-underline !text-current"
           to="https://twitter.com/NocoDB"
           target="_blank"
@@ -113,7 +113,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
         </nuxt-link>
       </a-list-item>
       <a-list-item>
-        <nuxt-link v-t="['e:hiring']" class="!no-underline !text-current" target="_blank" to="http://careers.nocodb.com">
+        <nuxt-link v-e="['e:hiring']" class="!no-underline !text-current" target="_blank" to="http://careers.nocodb.com">
           <div class="flex items-center text-sm">
             <!--            todo:  i18n -->
             <div class="ml-3">
@@ -124,7 +124,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:reddit']"
+          v-e="['e:community:reddit']"
           class="!no-underline !text-current"
           target="_blank"
           to="https://www.reddit.com/r/NocoDB/"
diff --git a/packages/nc-gui/components/shared-view/Grid.vue b/packages/nc-gui/components/shared-view/Grid.vue
index 16ae280d46..963ac3a4ee 100644
--- a/packages/nc-gui/components/shared-view/Grid.vue
+++ b/packages/nc-gui/components/shared-view/Grid.vue
@@ -1,23 +1,21 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '#imports'
 
 const { sharedView, meta, sorts, nestedFilters } = useSharedView()
 const { signedIn } = useGlobal()
-const { loadProject } = useProject(meta?.value.project_id)
+const { loadProject } = useProject(meta.value?.project_id)
 
 const reloadEventHook = createEventHook<void>()
+
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(ReadonlyInj, true)
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
-provide(FieldsInj, ref(meta.value.columns as any[]))
+provide(FieldsInj, ref(meta.value?.columns || []))
 provide(IsPublicInj, ref(true))
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta, true, sorts, nestedFilters)
+useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
 
 if (signedIn.value) {
   try {
diff --git a/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
index f9cd0dfa46..bb8de75244 100644
--- a/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { computed, inject, useMetas, watchEffect } from '#imports'
-import { IsFormInj, MetaInj, ReloadViewDataHookInj } from '~/context'
-import { uiTypes } from '~/utils/columnUtils'
+import { IsFormInj, MetaInj, ReloadViewDataHookInj, computed, inject, uiTypes, useMetas, useNuxtApp, watchEffect } from '#imports'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 import MdiIdentifierIcon from '~icons/mdi/identifier'
@@ -20,7 +17,7 @@ const { t } = useI18n()
 
 const { $e } = useNuxtApp()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const isForm = inject(IsFormInj, ref(false))
 
@@ -48,7 +45,7 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
 })
 
 const reloadMetaAndData = async () => {
-  await getMeta(meta?.value.id as string, true)
+  await getMeta(meta.value?.id as string, true)
   reloadDataTrigger?.trigger()
 }
 
diff --git a/packages/nc-gui/components/smartsheet-column/EditOrAddProvider.vue b/packages/nc-gui/components/smartsheet-column/EditOrAddProvider.vue
index 27d8ce227c..933c8240bd 100644
--- a/packages/nc-gui/components/smartsheet-column/EditOrAddProvider.vue
+++ b/packages/nc-gui/components/smartsheet-column/EditOrAddProvider.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { inject } from '#imports'
-import { MetaInj } from '~/context'
+import { MetaInj, inject } from '#imports'
 
 interface Props {
   column?: Ref<ColumnType & { meta: any }>
@@ -12,14 +11,10 @@ const props = defineProps<Props>()
 
 const emit = defineEmits(['submit', 'cancel'])
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
-if (props?.column) {
-  const column = toRef(props, 'column')
-  useProvideColumnCreateStore(meta as Ref<TableType>, column)
-} else {
-  useProvideColumnCreateStore(meta as Ref<TableType>)
-}
+const column = toRef(props, 'column')
+useProvideColumnCreateStore(meta, column as Ref<ColumnType | undefined>)
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui/components/smartsheet-column/FormulaOptions.vue
index f0858875bd..186c477713 100644
--- a/packages/nc-gui/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/FormulaOptions.vue
@@ -41,7 +41,7 @@ enum JSEPNode {
   ARRAY_EXP = 'ArrayExpression',
 }
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const columns = computed(() => meta?.value?.columns || [])
 
@@ -102,7 +102,7 @@ const suggestionsList = computed(() => {
         if (c.uidt === UITypes.LinkToAnotherRecord && c.system) return false
         // v1 logic? skip the current column
         if (!column) return true
-        return column.value.id !== c.id
+        return column.value?.id !== c.id
       })
       .map((c: any) => ({
         text: c.title,
@@ -238,7 +238,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
   } else if (parsedTree.type === JSEPNode.IDENTIFIER) {
     if (
       columns.value
-        .filter((c: Record<string, any>) => !column || column.value.id !== c.id)
+        .filter((c: Record<string, any>) => !column || column.value?.id !== c.id)
         .every((c: Record<string, any>) => c.title !== parsedTree.name)
     ) {
       errors.add(`Column '${parsedTree.name}' is not available`)
@@ -249,7 +249,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
 
     // get all formula columns excluding itself
     const formulaPaths = columns.value
-      .filter((c: Record<string, any>) => c.id !== column?.value.id && c.uidt === UITypes.Formula)
+      .filter((c: Record<string, any>) => c.id !== column.value?.id && c.uidt === UITypes.Formula)
       .reduce((res: Record<string, any>[], c: Record<string, any>) => {
         // in `formula`, get all the target neighbours
         // i.e. all column id (e.g. cl_xxxxxxxxxxxxxx) with formula type
@@ -265,9 +265,9 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
     // include target formula column (i.e. the one to be saved if applicable)
     const targetFormulaCol = columns.value.find((c: ColumnType) => c.title === parsedTree.name && c.uidt === UITypes.Formula)
 
-    if (targetFormulaCol && column?.value.id) {
+    if (targetFormulaCol && column.value?.id) {
       formulaPaths.push({
-        [column?.value?.id as string]: [targetFormulaCol.id],
+        [column.value?.id as string]: [targetFormulaCol.id],
       })
     }
     const vertices = formulaPaths.length
diff --git a/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
index 2e34a50a2c..411192378b 100644
--- a/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ModelTypes, MssqlUi, SqliteUi } from 'nocodb-sdk'
-import { inject, useProject } from '#imports'
-import { MetaInj } from '~/context'
+import { MetaInj, inject, useProject } from '#imports'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
@@ -13,7 +12,7 @@ const props = defineProps<Props>()
 const emit = defineEmits(['update:value'])
 const vModel = useVModel(props, 'value', emit)
 
-const meta = $(inject(MetaInj)!)
+const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
 
@@ -25,10 +24,10 @@ setAdditionalValidations({
 
 const onUpdateDeleteOptions = sqlUi === MssqlUi ? ['NO ACTION'] : ['NO ACTION', 'CASCADE', 'RESTRICT', 'SET NULL', 'SET DEFAULT']
 
-if (!vModel.value.parentId) vModel.value.parentId = meta.id
+if (!vModel.value.parentId) vModel.value.parentId = meta?.id
 if (!vModel.value.childId) vModel.value.childId = null
-if (!vModel.value.childColumn) vModel.value.childColumn = `${meta.table_name}_id`
-if (!vModel.value.childTable) vModel.value.childTable = meta.table_name
+if (!vModel.value.childColumn) vModel.value.childColumn = `${meta?.table_name}_id`
+if (!vModel.value.childTable) vModel.value.childTable = meta?.table_name
 if (!vModel.value.parentTable) vModel.value.parentTable = vModel.value.rtn || ''
 if (!vModel.value.parentColumn) vModel.value.parentColumn = vModel.value.rcn || ''
 
diff --git a/packages/nc-gui/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
index 503ab38fa9..310375da15 100644
--- a/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
@@ -11,7 +11,7 @@ const props = defineProps<Props>()
 const emit = defineEmits(['update:value'])
 const vModel = useVModel(props, 'value', emit)
 
-const meta = $(inject(MetaInj)!)
+const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
 
@@ -38,7 +38,7 @@ const refTables = $computed(() => {
     return []
   }
 
-  return meta.columns
+  return meta?.columns
     ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
     .map((c: ColumnType) => ({
       col: c.colOptions,
diff --git a/packages/nc-gui/components/smartsheet-column/PercentOptions.vue b/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
index eab97e43be..9d163c7fe7 100644
--- a/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
@@ -1,7 +1,7 @@
 <!-- File not in use for now -->
 
 <script setup lang="ts">
-import { precisions } from '@/utils/percentUtils'
+import { precisions } from '#imports'
 
 interface Props {
   value: Record<string, any>
diff --git a/packages/nc-gui/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
index 14cf29d68b..992a2511c6 100644
--- a/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getMdiIcon } from '@/utils'
+import { getMdiIcon } from '#imports'
 
 interface Props {
   value: Record<string, any>
diff --git a/packages/nc-gui/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
index ebfe0cb776..0d4a11ec76 100644
--- a/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import { inject, useMetas, useProject } from '#imports'
-import { MetaInj } from '~/context'
+import { MetaInj, inject, useMetas, useProject } from '#imports'
 
 interface Props {
   value: Record<string, any>
@@ -11,7 +10,7 @@ const props = defineProps<Props>()
 const emit = defineEmits(['update:value'])
 const vModel = useVModel(props, 'value', emit)
 
-const meta = $(inject(MetaInj)!)
+const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
 
@@ -51,7 +50,7 @@ const refTables = $computed(() => {
   }
 
   return (
-    meta.columns
+    meta?.columns
       ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
       .map((c) => ({
         col: c.colOptions,
diff --git a/packages/nc-gui/components/smartsheet-header/CellIcon.vue b/packages/nc-gui/components/smartsheet-header/CellIcon.vue
index eb382da5d1..01933c377d 100644
--- a/packages/nc-gui/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui/components/smartsheet-header/CellIcon.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { toRef } from 'vue'
-import { ColumnInj } from '~/context'
+import { ColumnInj, toRef, useColumn } from '#imports'
 import FilePhoneIcon from '~icons/mdi/file-phone'
-import { useColumn } from '#imports'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
 import ClockIcon from '~icons/mdi/clock-time-five'
-// import FKIcon from '~icons/mdi/link-variant'
 import WebIcon from '~icons/mdi/web'
 import TextAreaIcon from '~icons/mdi/card-text-outline'
 import StringIcon from '~icons/mdi/alpha-a-box-outline'
@@ -65,11 +62,7 @@ const icon = computed(() => {
     return DecimalIcon
   } else if (additionalColMeta.isPhoneNumber.value) {
     return FilePhoneIcon
-  }
-  // else if(additionalColMeta.isForeignKey) {
-  //   return FKIcon
-  // }
-  else if (additionalColMeta.isURL.value) {
+  } else if (additionalColMeta.isURL.value) {
     return WebIcon
   } else if (additionalColMeta.isCurrency.value) {
     return CurrencyIcon
diff --git a/packages/nc-gui/components/smartsheet-header/Menu.vue b/packages/nc-gui/components/smartsheet-header/Menu.vue
index 7a89b8ed62..0a263e697b 100644
--- a/packages/nc-gui/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet-header/Menu.vue
@@ -10,7 +10,7 @@ const emit = defineEmits(['edit'])
 
 const column = inject(ColumnInj)
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const isLocked = inject(IsLockedInj)
 
diff --git a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
index fc16d5e37e..8d4d458831 100644
--- a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
-import { useI18n } from 'vue-i18n'
 import {
   ColumnInj,
   IsFormInj,
@@ -11,6 +10,7 @@ import {
   provide,
   ref,
   toRef,
+  useI18n,
   useMetas,
   useUIPermission,
   useVirtualCell,
@@ -32,7 +32,7 @@ const { metas } = useMetas()
 
 const { isUIAllowed } = useUIPermission()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const isForm = inject(IsFormInj, ref(false))
 
diff --git a/packages/nc-gui/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui/components/smartsheet-header/VirtualCellIcon.vue
index 5301ba8079..8eb50be6ad 100644
--- a/packages/nc-gui/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui/components/smartsheet-header/VirtualCellIcon.vue
@@ -2,8 +2,7 @@
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { toRef } from 'vue'
-import { ColumnInj } from '~/context'
+import { ColumnInj, toRef } from '#imports'
 import GenericIcon from '~icons/mdi/square-rounded'
 import HMIcon from '~icons/mdi/table-arrow-right'
 import BTIcon from '~icons/mdi/table-arrow-left'
@@ -25,9 +24,9 @@ if (column) {
   const { isLookup, isBt, isRollup, isMm, isHm } = useVirtualCell(column as Ref<ColumnType>)
 
   if (isLookup || isBt || isRollup || isMm || isHm) {
-    const meta = inject(MetaInj)
+    const meta = inject(MetaInj, ref())
 
-    relationColumn = meta?.value.columns?.find((c) => c.id === column.value?.colOptions?.fk_relation_column_id) as ColumnType & {
+    relationColumn = meta.value?.columns?.find((c) => c.id === column.value?.colOptions?.fk_relation_column_id) as ColumnType & {
       colOptions: LinkToAnotherRecordType
     }
   }
diff --git a/packages/nc-gui/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui/components/smartsheet-toolbar/AddRow.vue
index 659d151804..e55c2deadc 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/AddRow.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/AddRow.vue
@@ -14,7 +14,7 @@ const onClick = () => {
   <a-tooltip placement="bottom">
     <template #title> {{ $t('activity.addRow') }} </template>
     <div
-      v-t="['c:row:add:grid-top']"
+      v-e="['c:row:add:grid-top']"
       :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
       class="nc-add-new-row-btn flex align-center"
     >
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
index b417d42871..75683e7e77 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
@@ -33,9 +33,9 @@ const logicalOps = [
   { value: 'or', text: 'OR' },
 ]
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
-const activeView = inject(ActiveViewInj)!
+const activeView = inject(ActiveViewInj, ref())
 
 const reloadDataHook = inject(ReloadViewDataHookInj)!
 
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 91e01f3df0..8c4cc4d020 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -5,7 +5,7 @@ import { ActiveViewInj, IsLockedInj, IsPublicInj, computed, inject, ref, useGlob
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const activeView = inject(ActiveViewInj)
+const activeView = inject(ActiveViewInj, ref())
 
 const isPublic = inject(IsPublicInj, ref(false))
 
@@ -53,7 +53,7 @@ const filterAutoSaveLoc = computed({
 <template>
   <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
-      <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
+      <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-1">
           <MdiFilterOutline />
           <!-- Filter -->
@@ -80,7 +80,7 @@ const filterAutoSaveLoc = computed({
           <div class="flex-1" />
           <a-button
             v-show="!filterAutoSave"
-            v-t="['a:filter:auto-apply']"
+            v-e="['a:filter:auto-apply']"
             size="small"
             class="text-xs ml-2"
             @click="applyChanges"
diff --git a/packages/nc-gui/components/smartsheet-toolbar/Export.vue b/packages/nc-gui/components/smartsheet-toolbar/Export.vue
index 36999c4c66..c666a825d4 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Export.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Export.vue
@@ -1,6 +1,6 @@
 <template>
   <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
-    <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+    <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
       <div class="flex gap-2 items-center">
         <MdiDownload class="group-hover:text-accent text-gray-500" />
         <span class="text-capitalize !text-sm font-weight-normal">Download</span>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ExportSubActions.vue
index 5175ad81bb..277ed1801f 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ExportSubActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ExportSubActions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RequestParams } from 'nocodb-sdk'
 import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
 import * as XLSX from 'xlsx'
@@ -15,7 +16,7 @@ const { project } = useProject()
 
 const { $api } = useNuxtApp()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const selectedView = inject(ActiveViewInj)
 
@@ -35,8 +36,8 @@ const exportFile = async (exportType: ExportTypes) => {
       } else {
         res = await $api.dbViewRow.export(
           'noco',
-          project?.value.title as string,
-          meta?.value.title as string,
+          project.value?.title as string,
+          meta.value?.title as string,
           selectedView?.value.title as string,
           exportType,
           {
@@ -47,16 +48,16 @@ const exportFile = async (exportType: ExportTypes) => {
               sortArrJson: JSON.stringify(sorts.value),
               filterArrJson: JSON.stringify(nestedFilters.value),
             },
-          } as any,
+          } as RequestParams,
         )
       }
       const { data, headers } = res
       if (exportType === ExportTypes.EXCEL) {
         const workbook = XLSX.read(data, { type: 'base64' })
-        XLSX.writeFile(workbook, `${meta?.value.title}_exported_${c++}.xlsx`)
+        XLSX.writeFile(workbook, `${meta.value?.title}_exported_${c++}.xlsx`)
       } else if (exportType === ExportTypes.CSV) {
         const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
-        FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
+        FileSaver.saveAs(blob, `${meta.value?.title}_exported_${c++}.csv`)
       }
       offset = +headers['nc-export-offset']
       if (offset > -1) {
@@ -75,14 +76,14 @@ const exportFile = async (exportType: ExportTypes) => {
 
 <template>
   <a-menu-item>
-    <div v-t="['a:actions:download-csv']" class="nc-project-menu-item" @click="exportFile(ExportTypes.CSV)">
+    <div v-e="['a:actions:download-csv']" class="nc-project-menu-item" @click="exportFile(ExportTypes.CSV)">
       <MdiDownloadOutline class="text-gray-500" />
       <!-- Download as CSV -->
       {{ $t('activity.downloadCSV') }}
     </div>
   </a-menu-item>
   <a-menu-item>
-    <div v-t="['a:actions:download-excel']" class="nc-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+    <div v-e="['a:actions:download-excel']" class="nc-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
       <MdiDownloadOutline class="text-gray-500" />
       <!-- Download as XLSX -->
       {{ $t('activity.downloadExcel') }}
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index d50907bad1..e35e9c4cc3 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -2,8 +2,7 @@
 import type { SelectProps } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { computed } from 'vue'
-import { MetaInj } from '~/context'
+import { MetaInj, computed } from '#imports'
 import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
 import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
 
@@ -16,39 +15,13 @@ const { modelValue, isSort } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const localValue = computed({
   get: () => modelValue,
   set: (val) => emit('update:modelValue', val),
 })
 
-/* export default {
-  name: 'FieldListAutoCompleteDropdown',
-  props: {
-    columns: Array,
-    value: String,
-  },
-  computed: {
-    localValue: {
-      set(v) {
-        this.$emit('input', v)
-      },
-      get() {
-        return this.value
-      },
-    },
-  },
-  mounted() {
-    const autocompleteInput = this.$refs.field.$refs.input
-    autocompleteInput.addEventListener('focus', this.onFocus, true)
-  },
-  methods: {
-    onFocus(e) {
-      this.$refs.field.isMenuActive = true // open item list
-    },
-  },
-} */
 const options = computed<SelectProps['options']>(() =>
   meta?.value?.columns
     ?.filter((c: ColumnType) => {
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
index 26a649086f..af6da2fa96 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
@@ -20,9 +20,9 @@ import {
 import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
 import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
-const activeView = inject(ActiveViewInj)!
+const activeView = inject(ActiveViewInj, ref())
 
 const reloadDataHook = inject(ReloadViewDataHookInj)!
 
@@ -48,7 +48,7 @@ const {
 } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
-  () => (activeView.value as any)?.id,
+  () => activeView.value?.id,
   async (newVal, oldVal) => {
     if (newVal !== oldVal && meta.value) {
       await loadViewColumns()
@@ -118,7 +118,7 @@ const getIcon = (c: ColumnType) =>
 <template>
   <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
-      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
+      <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
           <MdiEyeOffOutline />
 
@@ -146,7 +146,7 @@ const getIcon = (c: ColumnType) =>
               <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex items-center" @click.stop>
                 <a-checkbox
                   v-model:checked="field.show"
-                  v-t="['a:fields:show-hide']"
+                  v-e="['a:fields:show-hide']"
                   class="shrink"
                   @change="saveOrUpdate(field, index)"
                 >
diff --git a/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
index dbc260bf40..f322e5f39b 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import * as XLSX from 'xlsx'
+import type { RequestParams } from 'nocodb-sdk'
 import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
 import { message } from 'ant-design-vue'
@@ -29,11 +30,11 @@ const { project } = useProject()
 
 const { $api } = useNuxtApp()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const fields = inject(FieldsInj, ref([]))
 
-const selectedView = inject(ActiveViewInj)
+const selectedView = inject(ActiveViewInj, ref())
 
 const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
 
@@ -60,8 +61,8 @@ const exportFile = async (exportType: ExportTypes) => {
         res = await $api.dbViewRow.export(
           'noco',
           project?.value.title as string,
-          meta?.value.title as string,
-          selectedView?.value.title as string,
+          meta.value?.title as string,
+          selectedView.value?.title as string,
           exportType,
           {
             responseType,
@@ -71,16 +72,16 @@ const exportFile = async (exportType: ExportTypes) => {
               sortArrJson: JSON.stringify(sorts.value),
               filterArrJson: JSON.stringify(nestedFilters.value),
             },
-          } as any,
+          } as RequestParams,
         )
       }
       const { data, headers } = res
       if (exportType === ExportTypes.EXCEL) {
         const workbook = XLSX.read(data, { type: 'base64' })
-        XLSX.writeFile(workbook, `${meta?.value.title}_exported_${c++}.xlsx`)
+        XLSX.writeFile(workbook, `${meta.value?.title}_exported_${c++}.xlsx`)
       } else if (exportType === ExportTypes.CSV) {
         const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
-        FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
+        FileSaver.saveAs(blob, `${meta.value?.title}_exported_${c++}.csv`)
       }
       offset = +headers['nc-export-offset']
       if (offset > -1) {
@@ -100,7 +101,7 @@ const exportFile = async (exportType: ExportTypes) => {
 <template>
   <div>
     <a-dropdown>
-      <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-1 items-center">
           <MdiFlashOutline />
 
@@ -114,13 +115,13 @@ const exportFile = async (exportType: ExportTypes) => {
       <template #overlay>
         <div class="bg-gray-50 py-2 shadow-lg !border">
           <div>
-            <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
+            <div v-e="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
               <MdiDownloadOutline class="text-gray-500" />
               <!-- Download as CSV -->
               {{ $t('activity.downloadCSV') }}
             </div>
 
-            <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+            <div v-e="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
               <MdiDownloadOutline class="text-gray-500" />
               <!-- Download as XLSX -->
               {{ $t('activity.downloadExcel') }}
@@ -128,7 +129,7 @@ const exportFile = async (exportType: ExportTypes) => {
 
             <div
               v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
-              v-t="['a:actions:upload-csv']"
+              v-e="['a:actions:upload-csv']"
               class="nc-menu-item"
               :class="{ disabled: isLocked }"
               @click="!isLocked ? (quickImportDialog = true) : {}"
@@ -140,7 +141,7 @@ const exportFile = async (exportType: ExportTypes) => {
 
             <div
               v-if="isUIAllowed('sharedViewList') && !isView && !isPublicView"
-              v-t="['a:actions:shared-view-list']"
+              v-e="['a:actions:shared-view-list']"
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
             >
@@ -150,7 +151,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
             <div
               v-if="isUIAllowed('webhook') && !isView && !isPublicView"
-              v-t="['c:actions:webhook']"
+              v-e="['c:actions:webhook']"
               class="nc-menu-item"
               @click="showWebhookDrawer = true"
             >
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
index 8d44e32bdc..10dc3fd6bd 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
@@ -1,9 +1,15 @@
 <script lang="ts" setup>
-import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { computed, extractSdkResponseErrorMsg, useNuxtApp, useProject, useSmartsheetStoreOrThrow } from '#imports'
+import {
+  computed,
+  extractSdkResponseErrorMsg,
+  useClipboard,
+  useI18n,
+  useNuxtApp,
+  useProject,
+  useSmartsheetStoreOrThrow,
+} from '#imports'
 import MdiOpenInNewIcon from '~icons/mdi/open-in-new'
 import MdiCopyIcon from '~icons/mdi/content-copy'
 
@@ -39,7 +45,7 @@ const allowCSVDownload = computed({
 })
 
 const genShareLink = async () => {
-  shared.value = await $api.dbViewShare.create(view.value.id as string)
+  shared.value = await $api.dbViewShare.create(view.value?.id as string)
   shared.value.meta =
     shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
   passwordProtected.value = shared.value.password !== null && shared.value.password !== ''
@@ -69,7 +75,7 @@ async function saveAllowCSVDownload() {
     const meta = shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
     await $api.dbViewShare.update(shared.value.id, {
       meta,
-    } as any)
+    })
     // Successfully updated
     message.success(t('msg.success.updated'))
   } catch (e: any) {
@@ -114,7 +120,7 @@ watch(passwordProtected, (value) => {
   <div>
     <a-button
       v-if="isUIAllowed('share-view') && !isSharedBase"
-      v-t="['c:view:share']"
+      v-e="['c:view:share']"
       outlined
       class="nc-btn-share-view nc-toolbar-btn"
     >
@@ -136,11 +142,10 @@ watch(passwordProtected, (value) => {
     >
       <div class="share-link-box nc-share-link-box bg-primary-50">
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
-        <!--        <v-spacer /> -->
-        <a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
+        <a v-e="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
           <MdiOpenInNewIcon class="text-sm text-gray-500 mt-2" />
         </a>
-        <MdiCopyIcon v-t="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
+        <MdiCopyIcon v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
 
       <a-collapse ghost>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue
index 1798f8477f..db39f24e17 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,17 +1,12 @@
 <script lang="ts" setup>
-import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { Empty, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { onMounted, useSmartsheetStoreOrThrow } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useSmartsheetStoreOrThrow } from '#imports'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
 import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'
 import MdiCopyIcon from '~icons/mdi/content-copy'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
-const { t } = useI18n()
-
 interface SharedViewType {
   password: string
   title: string
@@ -21,6 +16,8 @@ interface SharedViewType {
   showPassword?: boolean
 }
 
+const { t } = useI18n()
+
 const { $api, meta } = useSmartsheetStoreOrThrow()
 
 const { copy } = useClipboard()
diff --git a/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
index 0600886f14..aefe7baa16 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
@@ -14,14 +14,14 @@ import {
   watch,
 } from '#imports'
 
-const meta = inject(MetaInj)
-const view = inject(ActiveViewInj)
+const meta = inject(MetaInj, ref())
+const view = inject(ActiveViewInj, ref())
 const isLocked = inject(IsLockedInj, ref(false))
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
 
-const columns = computed(() => meta?.value?.columns || [])
+const columns = computed(() => meta.value?.columns || [])
 
 const columnByID = computed(() =>
   columns.value.reduce((obj, col) => {
@@ -32,7 +32,7 @@ const columnByID = computed(() =>
 )
 
 watch(
-  () => (view?.value as any)?.id,
+  () => view.value?.id,
   () => {
     loadSorts()
   },
@@ -43,7 +43,7 @@ watch(
 <template>
   <a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
-      <a-button v-t="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
+      <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex items-center gap-1">
           <MdiSort />
           <!-- Sort -->
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index e8915dabb5..f095ffa5d5 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import {
   ActiveViewInj,
   IsLockedInj,
@@ -8,13 +7,14 @@ import {
   extractSdkResponseErrorMsg,
   inject,
   ref,
+  useI18n,
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
   useUIPermission,
+  viewIcons,
 } from '#imports'
 import { LockType } from '~/lib'
-import { viewIcons } from '~/utils'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
@@ -44,7 +44,7 @@ const { isUIAllowed } = useUIPermission()
 const { isSharedBase } = useProject()
 
 const Icon = computed(() => {
-  switch ((selectedView?.value as any)?.lock_type) {
+  switch (selectedView?.value.lock_type) {
     case LockType.Personal:
       return MdiAccountIcon
     case LockType.Locked:
@@ -65,8 +65,8 @@ async function changeLockType(type: LockType) {
     return message.info(t('msg.toast.futureRelease'))
   }
   try {
-    ;(selectedView.value as any).lock_type = type
-    $api.dbView.update(selectedView.value.id as string, {
+    selectedView.value.lock_type = type
+    await $api.dbView.update(selectedView.value.id as string, {
       lock_type: type,
     })
 
@@ -82,7 +82,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 <template>
   <div>
     <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
-      <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
             :is="viewIcons[selectedView?.type].icon"
@@ -106,7 +106,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"
             >
               <template #title>
-                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
+                <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
                   <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
 
                   <MaterialSymbolsChevronRightRounded
@@ -130,7 +130,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-sub-menu key="download">
               <template #title>
                 <!--                Download -->
-                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                   <MdiDownload class="group-hover:text-accent text-gray-500" />
                   {{ $t('general.download') }}
                   <div class="flex-1" />
@@ -148,7 +148,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               <a-sub-menu key="upload">
                 <!--                Upload -->
                 <template #title>
-                  <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                  <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                     <MdiUpload class="group-hover:text-accent text-gray-500" />
                     {{ $t('general.upload') }}
                     <div class="flex-1" />
@@ -163,7 +163,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 <a-menu-item>
                   <div
                     v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
-                    v-t="['a:actions:upload-csv']"
+                    v-e="['a:actions:upload-csv']"
                     class="nc-project-menu-item"
                     :class="{ disabled: isLocked }"
                     @click="!isLocked ? (quickImportDialog = true) : {}"
@@ -180,7 +180,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-menu-item>
               <div
                 v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
-                v-t="['a:actions:shared-view-list']"
+                v-e="['a:actions:shared-view-list']"
                 class="py-2 flex gap-2 items-center"
                 @click="sharedViewListDlg = true"
               >
@@ -192,7 +192,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-menu-item v-if="!isSqlView">
               <div
                 v-if="isUIAllowed('webhook') && !isView && !isPublicView"
-                v-t="['c:actions:webhook']"
+                v-e="['c:actions:webhook']"
                 class="py-2 flex gap-2 items-center"
                 @click="showWebhookDrawer = true"
               >
@@ -203,7 +203,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-menu-item>
               <div
                 v-if="!isSharedBase && !isPublicView"
-                v-t="['c:snippet:open']"
+                v-e="['c:snippet:open']"
                 class="py-2 flex gap-2 items-center"
                 @click="showApiSnippetDrawer = true"
               >
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index e6278521c1..57813ab3fb 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import HTTPSnippet from 'httpsnippet'
-import { useClipboard } from '@vueuse/core'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { ActiveViewInj, MetaInj } from '~/context'
-import { inject, useGlobal, useProject, useSmartsheetStoreOrThrow, useVModel, useViewData } from '#imports'
+import {
+  ActiveViewInj,
+  MetaInj,
+  inject,
+  useClipboard,
+  useGlobal,
+  useI18n,
+  useProject,
+  useSmartsheetStoreOrThrow,
+  useVModel,
+  useViewData,
+} from '#imports'
 
 const props = defineProps<Props>()
 
@@ -20,13 +28,13 @@ const { project } = $(useProject())
 
 const { appInfo, token } = $(useGlobal())
 
-const meta = $(inject(MetaInj)!)
+const meta = $(inject(MetaInj, ref()))
 
-const view = $(inject(ActiveViewInj)!)
+const view = $(inject(ActiveViewInj, ref()))
 
 const { xWhere } = useSmartsheetStoreOrThrow()
 
-const { queryParams } = $(useViewData($$(meta), view as any, xWhere))
+const { queryParams } = $(useViewData($$(meta), $$(view), xWhere))
 
 const { copy } = useClipboard()
 
@@ -169,7 +177,7 @@ watch($$(activeLang), (newLang) => {
               </a-select-option>
             </a-select>
             <a-button
-              v-t="[
+              v-e="[
                 'c:snippet:copy',
                 { client: activeLang?.clients && (selectedClient || activeLang?.clients[0]), lang: activeLang?.name },
               ]"
@@ -181,7 +189,7 @@ watch($$(activeLang), (newLang) => {
 
           <div class="absolute bottom-4 flex flex-row justify-center w-[95%]">
             <a
-              v-t="['e:hiring']"
+              v-e="['e:hiring']"
               class="px-4 py-2 ! rounded shadow"
               href="https://angel.co/company/nocodb"
               target="_blank"
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index dfe5166e27..9f797dec50 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -2,8 +2,6 @@
 import Draggable from 'vuedraggable'
 import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import type { Permission } from '~/composables/useUIPermission/rolePermissions'
 import {
   ActiveViewInj,
   IsFormInj,
@@ -18,12 +16,14 @@ import {
   ref,
   useDebounceFn,
   useGlobal,
+  useI18n,
   useNuxtApp,
   useUIPermission,
   useViewColumns,
   useViewData,
   watch,
 } from '#imports'
+import type { Permission } from '~/composables/useUIPermission/rolePermissions'
 
 provide(IsFormInj, ref(true))
 provide(IsGalleryInj, ref(false))
@@ -45,11 +45,11 @@ const secondsRemain = ref(0)
 
 const isEditable = isUIAllowed('editFormView' as Permission)
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
-const view = inject(ActiveViewInj)
+const view = inject(ActiveViewInj, ref())
 
-const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view as any)
+const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view)
 
 const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -59,7 +59,7 @@ reloadEventHook.on(async () => {
   setFormData()
 })
 
-const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, async () => reloadEventHook.trigger())
+const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta, async () => reloadEventHook.trigger())
 
 const { syncLTARRefs, row } = useProvideSmartsheetRowStore(
   meta,
@@ -252,10 +252,9 @@ function setFormData() {
 
   formViewData.value = {
     ...formViewData.value,
-    submit_another_form: !!(formViewData?.value?.submit_another_form ?? 0),
-    // todo: show_blank_form missing from FormType
-    show_blank_form: !!((formViewData?.value as any)?.show_blank_form ?? 0),
-  } as any
+    submit_another_form: !!(formViewData.value?.submit_another_form ?? 0),
+    show_blank_form: !!(formViewData.value?.show_blank_form ?? 0),
+  }
 
   // email me
   let data: Record<string, boolean> = {}
@@ -309,7 +308,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 function updateEmail() {
   try {
-    const data = JSON.parse(formViewData.value?.email) || {}
+    const data = formViewData.value?.email ? JSON.parse(formViewData.value?.email) : {}
     data[state.user.value?.email as string] = emailMe.value
     formViewData.value!.email = JSON.stringify(data)
     checkSMTPStatus()
@@ -338,7 +337,7 @@ const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
 }, 250)
 
 watch(submitted, (v) => {
-  if (v && (formViewData?.value as any)?.show_blank_form) {
+  if (v && formViewData.value?.show_blank_form) {
     secondsRemain.value = 5
     const intvl = setInterval(() => {
       if (--secondsRemain.value < 0) {
@@ -591,7 +590,7 @@ onMounted(async () => {
 
                           <a-switch
                             v-model:checked="element.required"
-                            v-t="['a:form-view:field:mark-required']"
+                            v-e="['a:form-view:field:mark-required']"
                             size="small"
                             class="ml-2"
                             @change="updateColMeta(element)"
@@ -715,7 +714,7 @@ onMounted(async () => {
               <!-- Show "Submit Another Form" button -->
               <a-switch
                 v-model:checked="formViewData.submit_another_form"
-                v-t="[`a:form-view:submit-another-form`]"
+                v-e="[`a:form-view:submit-another-form`]"
                 size="small"
                 class="nc-form-checkbox-submit-another-form"
                 @change="updateView"
@@ -727,7 +726,7 @@ onMounted(async () => {
               <!-- Show a blank form after 5 seconds -->
               <a-switch
                 v-model:checked="formViewData.show_blank_form"
-                v-t="[`a:form-view:show-blank-form`]"
+                v-e="[`a:form-view:show-blank-form`]"
                 size="small"
                 class="nc-form-checkbox-show-blank-form"
                 @change="updateView"
@@ -738,7 +737,7 @@ onMounted(async () => {
             <div class="my-4">
               <a-switch
                 v-model:checked="emailMe"
-                v-t="[`a:form-view:email-me`]"
+                v-e="[`a:form-view:email-me`]"
                 size="small"
                 class="nc-form-checkbox-send-email"
                 @change="onEmailChange"
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 7d2ca2a2c5..f946d8f779 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
-import { inject, provide, useViewData } from '#imports'
-import Row from '~/components/smartsheet/Row.vue'
-import type { Row as RowType } from '~/composables'
 import {
   ActiveViewInj,
   ChangePageInj,
@@ -14,15 +11,21 @@ import {
   OpenNewRecordFormHookInj,
   PaginationDataInj,
   ReadonlyInj,
-} from '~/context'
+  ReloadViewDataHookInj,
+  inject,
+  provide,
+  useViewData,
+} from '#imports'
+import Row from '~/components/smartsheet/Row.vue'
+import type { Row as RowType } from '~/composables'
 import ImageIcon from '~icons/mdi/file-image-box'
 
 interface Attachment {
   url: string
 }
 
-const meta = inject(MetaInj)
-const view = inject(ActiveViewInj)
+const meta = inject(MetaInj, ref())
+const view = inject(ActiveViewInj, ref())
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
@@ -38,7 +41,7 @@ const {
   galleryData,
   changePage,
   addEmptyRow,
-} = useViewData(meta, view as any)
+} = useViewData(meta, view)
 
 const { isUIAllowed } = useUIPermission()
 
@@ -55,7 +58,7 @@ const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== ga
 
 const coverImageColumn: any = $(
   computed(() =>
-    meta?.value.columnsById
+    meta.value?.columnsById
       ? meta.value.columnsById[galleryData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
       : {},
   ),
@@ -144,7 +147,7 @@ openNewRecordFormHook?.on(async () => {
                 <img
                   v-for="(attachment, index) in attachments(record)"
                   :key="`carousel-${record.row.id}-${index}`"
-                  class="h-52"
+                  class="h-52 object-cover"
                   :src="attachment.url"
                 />
               </a-carousel>
@@ -192,14 +195,17 @@ openNewRecordFormHook?.on(async () => {
   grid-auto-rows: 1fr;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
 }
-:depp(.slick-dots li button) {
+
+:deep(.slick-dots li button) {
   background-color: black;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-dots) {
   position: relative;
   height: auto;
   bottom: 0px;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
   background: #000;
   border: 0;
@@ -215,15 +221,18 @@ openNewRecordFormHook?.on(async () => {
   transition: all 0.5s;
   width: 100%;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
   opacity: 1;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-prev) {
   left: 0;
   height: 100%;
   top: 12px;
   width: 50%;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-next) {
   right: 0;
   height: 100%;
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5389221ce0..efb4a3e99a 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -2,9 +2,9 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import {
   ActiveViewInj,
+  CellUrlDisableOverlayInj,
   ChangePageInj,
   FieldsInj,
   IsFormInj,
@@ -17,7 +17,6 @@ import {
   ReadonlyInj,
   ReloadViewDataHookInj,
   createEventHook,
-  enumColor,
   inject,
   onClickOutside,
   onMounted,
@@ -26,6 +25,7 @@ import {
   ref,
   useEventListener,
   useGridViewColumnWidth,
+  useI18n,
   useSmartsheetStoreOrThrow,
   useUIPermission,
   useViewData,
@@ -36,9 +36,9 @@ import { NavigateDir } from '~/lib'
 
 const { t } = useI18n()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
-const view = inject(ActiveViewInj)
+const view = inject(ActiveViewInj, ref())
 
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
@@ -92,9 +92,10 @@ const {
   deleteSelectedRows,
   selectedAllRecords,
   removeRowIfNew,
-} = useViewData(meta, view as any, xWhere)
+} = useViewData(meta, view, xWhere)
+
+const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 
-const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
@@ -109,6 +110,9 @@ provide(ChangePageInj, changePage)
 
 provide(ReadonlyInj, !hasEditPermission)
 
+const disableUrlOverlay = ref(false)
+provide(CellUrlDisableOverlayInj, disableUrlOverlay)
+
 reloadViewDataHook?.on(async () => {
   await loadData()
 })
@@ -133,9 +137,9 @@ const selectCell = (row: number, col: number) => {
 }
 
 watch(
-  () => (view?.value as any)?.id,
-  async (n?: string, o?: string) => {
-    if (n && o && n !== o) {
+  () => view.value?.id,
+  async (next, old) => {
+    if (next && old && next !== old) {
       await loadData()
     }
   },
@@ -201,6 +205,10 @@ const makeEditable = (row: Row, col: ColumnType) => {
 
 /** handle keypress events */
 const onKeyDown = async (e: KeyboardEvent) => {
+  if (e.key === 'Alt') {
+    disableUrlOverlay.value = true
+    return
+  }
   if (selected.row === null || selected.col === null) return
   /** on tab key press navigate through cells */
   switch (e.key) {
@@ -284,8 +292,14 @@ const onKeyDown = async (e: KeyboardEvent) => {
       break
   }
 }
+const onKeyUp = async (e: KeyboardEvent) => {
+  if (e.key === 'Alt') {
+    disableUrlOverlay.value = false
+  }
+}
 
 useEventListener(document, 'keydown', onKeyDown)
+useEventListener(document, 'keyup', onKeyUp)
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
@@ -346,7 +360,7 @@ onBeforeUnmount(async () => {
     /** if existing row check updated cell and invoke update method */
     if (currentRow.rowMeta.changed) {
       currentRow.rowMeta.changed = false
-      for (const field of meta?.value.columns ?? []) {
+      for (const field of meta.value?.columns ?? []) {
         if (isVirtualCol(field)) continue
         if (currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
           await updateOrSaveRow(currentRow, field.title!)
@@ -411,7 +425,7 @@ onBeforeUnmount(async () => {
               </th>
               <th
                 v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
-                v-t="['c:column:add']"
+                v-e="['c:column:add']"
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
               >
@@ -472,7 +486,7 @@ onBeforeUnmount(async () => {
                           class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
                         >
                           <MdiArrowExpand
-                            v-t="['c:row-expand']"
+                            v-e="['c:row-expand']"
                             class="select-none transform hover:(text-accent scale-120) nc-row-expand"
                             @click="expandForm(row, state)"
                           />
@@ -530,7 +544,7 @@ onBeforeUnmount(async () => {
 
             <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
               <td
-                v-t="['c:row:add:grid-bottom']"
+                v-e="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"
                 class="text-left pointer nc-grid-add-new-cell cursor-pointer"
                 @click="addEmptyRow()"
@@ -550,14 +564,14 @@ onBeforeUnmount(async () => {
         <template v-if="!isLocked && isUIAllowed('xcDatatableEditable')" #overlay>
           <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
             <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)">
-              <div v-t="['a:row:delete']" class="nc-project-menu-item">
+              <div v-e="['a:row:delete']" class="nc-project-menu-item">
                 <!-- Delete Row -->
                 {{ $t('activity.deleteRow') }}
               </div>
             </a-menu-item>
 
             <a-menu-item @click="deleteSelectedRows">
-              <div v-t="['a:row:delete-bulk']" class="nc-project-menu-item">
+              <div v-e="['a:row:delete-bulk']" class="nc-project-menu-item">
                 <!-- Delete Selected Rows -->
                 {{ $t('activity.deleteSelectedRow') }}
               </div>
@@ -565,11 +579,11 @@ onBeforeUnmount(async () => {
 
             <!--            Clear cell -->
             <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)">
-              <div v-t="['a:row:clear']" class="nc-project-menu-item">{{ $t('activity.clearCell') }}</div>
+              <div v-e="['a:row:clear']" class="nc-project-menu-item">{{ $t('activity.clearCell') }}</div>
             </a-menu-item>
 
             <a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)">
-              <div v-t="['a:row:insert']" class="nc-project-menu-item">
+              <div v-e="['a:row:insert']" class="nc-project-menu-item">
                 <!-- Insert New Row -->
                 {{ $t('activity.insertRow') }}
               </div>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 77463595da..25a1d54aea 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -57,7 +57,7 @@ watch(
     <div class="p-0">
       <div class="flex justify-center">
         <!--        Comments only -->
-        <a-checkbox v-model:checked="commentsOnly" v-t="['c:row-expand:comment-only']" @change="loadCommentsAndLogs"
+        <a-checkbox v-model:checked="commentsOnly" v-e="['c:row-expand:comment-only']" @change="loadCommentsAndLogs"
           >{{ $t('labels.commentsOnly') }}<span class="text-[11px] text-gray-500"></span>
         </a-checkbox>
       </div>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 2f8e0c7cf6..0678f8e01c 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -64,7 +64,7 @@ const iconColor = '#1890ff'
       </template>
       <MdiCommentTextOutline
         v-if="isUIAllowed('rowComments') && !isNew"
-        v-t="['c:row-expand:comment-toggle']"
+        v-e="['c:row-expand:comment-toggle']"
         class="cursor-pointer select-none nc-toggle-comments text-gray-500"
         @click="commentsDrawer = !commentsDrawer"
       />
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index e3307587e5..cec93e16d2 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -5,9 +5,7 @@ import type { Menu as AntMenu } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import Sortable from 'sortablejs'
-import { useI18n } from 'vue-i18n'
 import RenameableMenuItem from './RenameableMenuItem.vue'
-import { useNuxtApp } from '#app'
 import {
   ActiveViewInj,
   ViewListInj,
@@ -17,6 +15,8 @@ import {
   ref,
   useApi,
   useDialog,
+  useI18n,
+  useNuxtApp,
   useRoute,
   useRouter,
   viewTypeAlias,
@@ -40,7 +40,7 @@ const { $e } = useNuxtApp()
 
 const activeView = inject(ActiveViewInj, ref())
 
-const views = inject<Ref<any[]>>(ViewListInj, ref([]))
+const views = inject<Ref<ViewType[]>>(ViewListInj, ref([]))
 
 const { api } = useApi()
 
@@ -76,7 +76,7 @@ function markItem(id: string) {
 }
 
 /** validate view title */
-function validate(view: Record<string, any>) {
+function validate(view: ViewType) {
   if (!view.title || view.title.trim().length < 0) {
     return 'View name is required'
   }
@@ -110,28 +110,32 @@ async function onSortEnd(evt: SortableEvent) {
   const previousEl = children[newIndex - 1]
   const nextEl = children[newIndex + 1]
 
-  const currentItem: Record<string, any> = views.value.find((v) => v.id === evt.item.id)
-  const previousItem: Record<string, any> = previousEl ? views.value.find((v) => v.id === previousEl.id) : {}
-  const nextItem: Record<string, any> = nextEl ? views.value.find((v) => v.id === nextEl.id) : {}
+  const currentItem = views.value.find((v) => v.id === evt.item.id)
+
+  if (!currentItem || !currentItem.id) return
+
+  const previousItem = (previousEl ? views.value.find((v) => v.id === previousEl.id) : {}) as ViewType
+  const nextItem = (nextEl ? views.value.find((v) => v.id === nextEl.id) : {}) as ViewType
 
   let nextOrder: number
 
   // set new order value based on the new order of the items
   if (views.value.length - 1 === newIndex) {
-    nextOrder = parseFloat(previousItem.order) + 1
+    nextOrder = parseFloat(String(previousItem.order)) + 1
   } else if (newIndex === 0) {
-    nextOrder = parseFloat(nextItem.order) / 2
+    nextOrder = parseFloat(String(nextItem.order)) / 2
   } else {
-    nextOrder = (parseFloat(previousItem.order) + parseFloat(nextItem.order)) / 2
+    nextOrder = (parseFloat(String(previousItem.order)) + parseFloat(String(nextItem.order))) / 2
   }
 
-  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder.toString() : oldIndex.toString()
+  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex
 
   currentItem.order = _nextOrder
 
   await api.dbView.update(currentItem.id, { order: _nextOrder })
 
   markItem(currentItem.id)
+
   $e('a:view:reorder')
 }
 
@@ -168,7 +172,7 @@ async function onRename(view: ViewType) {
   try {
     await api.dbView.update(view.id!, {
       title: view.title,
-      order: String(view.order),
+      order: view.order,
     })
 
     await router.replace({
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 956dfc11d5..2602e742a7 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { ViewTypes } from 'nocodb-sdk'
+import type { ViewType, ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { viewIcons } from '~/utils'
-import { IsLockedInj, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel } from '#imports'
+import type { WritableComputedRef } from '@vue/reactivity'
+import { IsLockedInj, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel, viewIcons } from '#imports'
 
 interface Props {
-  view: Record<string, any>
-  onValidate: (view: Record<string, any>) => boolean | string
+  view: ViewType
+  onValidate: (view: ViewType) => boolean | string
 }
 
 interface Emits {
   (event: 'update:view', data: Record<string, any>): void
   (event: 'changeView', view: Record<string, any>): void
-  (event: 'rename', view: Record<string, any>): void
-  (event: 'delete', view: Record<string, any>): void
+  (event: 'rename', view: ViewType): void
+  (event: 'delete', view: ViewType): void
   (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
 }
 
@@ -21,7 +21,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const vModel = useVModel(props, 'view', emits)
+const vModel = useVModel(props, 'view', emits) as WritableComputedRef<any>
 
 const { $e } = useNuxtApp()
 
@@ -92,7 +92,7 @@ function focusInput(el: HTMLInputElement) {
 /** Duplicate a view */
 // todo: This is not really a duplication, maybe we need to implement a true duplication?
 function onDuplicate() {
-  emits('openModal', { type: vModel.value.type, title: vModel.value.title, copyViewId: vModel.value.id })
+  emits('openModal', { type: vModel.value.type!, title: vModel.value.title, copyViewId: vModel.value.id })
 
   $e('c:view:copy', { view: vModel.value.type })
 }
@@ -129,7 +129,7 @@ async function onRename() {
 function onCancel() {
   if (!isEditing) return
 
-  vModel.value.title = originalTitle
+  vModel.value.title = originalTitle || ''
   onStopEdit()
 }
 
@@ -151,7 +151,7 @@ function onStopEdit() {
     @dblclick.stop="isUIAllowed('virtualViewsCreateOrEdit') && onDblClick()"
     @click.stop="onClick"
   >
-    <div v-t="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2">
+    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2">
       <div class="flex w-auto">
         <MdiDrag
           class="nc-drag-icon hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 !cursor-move"
@@ -161,7 +161,7 @@ function onStopEdit() {
         <component
           :is="viewIcons[vModel.type].icon"
           class="nc-view-icon group-hover:hidden"
-          :style="{ color: viewIcons[vModel?.type]?.color }"
+          :style="{ color: viewIcons[vModel.type].color }"
         />
       </div>
 
diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index fe44649b92..934f87e813 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -34,7 +34,7 @@ const { $e } = useNuxtApp()
 provide(ViewListInj, views)
 
 /** Sidebar visible */
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
 
 const sidebarCollapsed = computed(() => !isOpen.value)
 
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteTable.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteTable.vue
index 94a61f3a17..289c6e9848 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteTable.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { MetaInj, inject, useTable } from '#imports'
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
 const { deleteTable } = useTable()
 
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
index d80a18d15a..4e06896448 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Sidebar visible */
-const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
+const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/tabs/Auth.vue b/packages/nc-gui/components/tabs/Auth.vue
index a06f8b2558..206fd89b93 100644
--- a/packages/nc-gui/components/tabs/Auth.vue
+++ b/packages/nc-gui/components/tabs/Auth.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import UserManagement from './auth/UserManagement.vue'
 import ApiTokenManagement from './auth/ApiTokenManagement.vue'
-import { useUIPermission } from '#imports'
+import { useI18n, useUIPermission } from '#imports'
 
 interface Tab {
   title: string
@@ -10,6 +9,7 @@ interface Tab {
   body: any
   isUIAllowed: boolean
 }
+
 const { t } = useI18n()
 
 const { isUIAllowed } = useUIPermission()
@@ -29,8 +29,6 @@ const tabsInfo: Tab[] = [
   },
 ]
 
-// const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
-
 const selectedTabKey = $ref(0)
 const selectedTab = $computed(() => tabsInfo[selectedTabKey])
 </script>
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 715d64474d..b4d4918447 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
 import {
   ActiveViewInj,
@@ -18,7 +17,6 @@ import {
   useProvideSmartsheetStore,
   watch,
 } from '#imports'
-
 import type { TabItem } from '~/composables'
 
 const { activeTab } = defineProps<{
@@ -39,10 +37,10 @@ const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 const reloadEventHook = createEventHook<void>()
 const openNewRecordFormHook = createEventHook<void>()
 
-const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
 
 // provide the sidebar injection state
-provideSidebar({ storageKey: 'nc-right-sidebar' })
+provideSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
 
 // todo: move to store
 provide(MetaInj, meta)
diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index 7ca866f904..c65fbbe569 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useClipboard } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
+import { extractSdkResponseErrorMsg, useClipboard, useI18n } from '#imports'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -11,13 +10,13 @@ import VisibilityOpenIcon from '~icons/material-symbols/visibility'
 import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
-const { t } = useI18n()
 interface ApiToken extends ApiTokenType {
   show?: boolean
 }
 
+const { t } = useI18n()
+
 const { $api, $e } = useNuxtApp()
 
 const { project } = $(useProject())
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index e3fac012df..d88b38b039 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import type { RequestParams } from 'nocodb-sdk'
 import UsersModal from './user-management/UsersModal.vue'
 import FeedbackForm from './user-management/FeedbackForm.vue'
 import {
   extractSdkResponseErrorMsg,
-  onMounted,
-  projectRoleTagColors,
+  onBeforeMount,
   ref,
   useApi,
   useClipboard,
   useDashboard,
+  useI18n,
   useNuxtApp,
   useProject,
   useUIPermission,
@@ -61,7 +61,7 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
         offset: searchText.value.length === 0 ? (page - 1) * limit : 0,
         query: searchText.value,
       },
-    } as any)
+    } as RequestParams)
     if (!response.users) return
 
     totalRows = response.users.pageInfo.totalRows ?? 0
@@ -150,11 +150,13 @@ const copyInviteUrl = (user: User) => {
   $e('c:user:copy-url')
 }
 
-onMounted(() => {
+onBeforeMount(async () => {
   if (!users) {
     isLoading = true
 
-    loadUsers().finally(() => (isLoading = false))
+    await loadUsers()
+
+    isLoading = false
   }
 })
 
@@ -162,9 +164,10 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
 </script>
 
 <template>
-  <div v-if="isLoading" class="h-full w-full flex flex-row justify-center mt-42">
+  <div v-if="isLoading" class="h-full w-full flex items-center justify-center">
     <a-spin size="large" />
   </div>
+
   <div v-else class="flex flex-col w-full px-6">
     <UsersModal
       :key="showUserModal"
@@ -201,7 +204,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
       </div>
 
       <div class="flex flex-row space-x-1">
-        <a-button v-t="['a:user:reload']" size="middle" type="text" @click="loadUsers()">
+        <a-button v-e="['a:user:reload']" size="middle" type="text" @click="loadUsers()">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <MdiReload class="text-gray-500" />
             <div class="text-gray-500">{{ $t('general.reload') }}</div>
@@ -209,7 +212,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         </a-button>
         <a-button
           v-if="isUIAllowed('newUser')"
-          v-t="['c:user:invite']"
+          v-e="['c:user:invite']"
           size="middle"
           type="primary"
           ghost
@@ -282,7 +285,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <template #title>
               <span>{{ $t('activity.deleteUser') }}</span>
             </template>
-            <a-button v-t="['c:user:delete']" type="text" class="!rounded-md nc-user-delete" @click="onDelete(user)">
+            <a-button v-e="['c:user:delete']" type="text" class="!rounded-md nc-user-delete" @click="onDelete(user)">
               <template #icon>
                 <MdiDeleteOutline class="flex mx-auto h-[1.1rem] text-gray-500" />
               </template>
diff --git a/packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue b/packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue
index 57be11a5f0..52b7b25124 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import CloseIcon from '~icons/material-symbols/close-rounded'
-
 const { feedbackForm } = useGlobal()
+
 const showForm = ref(false)
+
 setTimeout(() => (showForm.value = true), 60000)
 </script>
 
 <template>
   <div v-if="showForm && feedbackForm && !feedbackForm.isHidden" class="nc-feedback-form-wrapper mt-6">
-    <CloseIcon class="nc-close-icon" @click="feedbackForm.isHidden = true" />
+    <MaterialSymbolsCloseRounded class="nc-close-icon" @click="feedbackForm.isHidden = true" />
 
     <iframe :src="feedbackForm.url" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading… </iframe>
   </div>
diff --git a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
index dffea22d20..4417ebe2ce 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { onMounted, useClipboard, useNuxtApp, useProject } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
-
-const { t } = useI18n()
+import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useNuxtApp, useProject } from '#imports'
 
 interface ShareBase {
   uuid?: string
@@ -17,6 +13,8 @@ enum ShareBaseRole {
   Viewer = 'viewer',
 }
 
+const { t } = useI18n()
+
 const { dashboardUrl } = $(useDashboard())
 
 const { $api, $e } = useNuxtApp()
@@ -35,8 +33,7 @@ const loadBase = async () => {
   try {
     if (!project.value.id) return
 
-    // todo: response is missing roles in type
-    const res = (await $api.project.sharedBaseGet(project.value.id)) as any
+    const res = await $api.project.sharedBaseGet(project.value.id)
 
     base = {
       uuid: res.uuid,
@@ -52,10 +49,9 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
   try {
     if (!project.value.id) return
 
-    // todo: return type void?
-    const res = (await $api.project.sharedBaseUpdate(project.value.id, {
+    const res = await $api.project.sharedBaseUpdate(project.value.id, {
       roles: role,
-    })) as any
+    })
 
     base = res ?? {}
     base!.role = role
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index cecd6e20bb..ce559cb338 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -1,28 +1,23 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import ShareBase from './ShareBase.vue'
 import {
   computed,
   extractSdkResponseErrorMsg,
   isEmail,
   onMounted,
+  projectRoleTagColors,
   projectRoles,
   ref,
   useClipboard,
   useDashboard,
+  useI18n,
   useNuxtApp,
   useProject,
 } from '#imports'
 import type { User } from '~/lib'
 import { ProjectRole } from '~/lib'
 
-const { show, selectedUser } = defineProps<Props>()
-
-const emit = defineEmits(['closed', 'reload'])
-
-const { t } = useI18n()
-
 interface Props {
   show: boolean
   selectedUser?: User
@@ -34,6 +29,12 @@ interface Users {
   invitationToken?: string
 }
 
+const { show, selectedUser } = defineProps<Props>()
+
+const emit = defineEmits(['closed', 'reload'])
+
+const { t } = useI18n()
+
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
 const { copy } = useClipboard()
@@ -69,7 +70,8 @@ const { validateInfos } = useForm(usersData, validators)
 onMounted(() => {
   if (!usersData.emails && selectedUser?.email) {
     usersData.emails = selectedUser.email
-    usersData.role = selectedUser.roles
+    // todo: types not matching, probably a bug here?
+    usersData.role = selectedUser.roles as any
   }
 })
 
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 76f0ea95e9..fd347ddef1 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -2,7 +2,6 @@
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { Empty, Form, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import { srcDestMappingColumns, tableColumns } from './utils'
 import {
   MetaInj,
@@ -17,6 +16,7 @@ import {
   onMounted,
   reactive,
   ref,
+  useI18n,
   useNuxtApp,
   useProject,
   useTabs,
@@ -44,7 +44,7 @@ interface Option {
   value: string
 }
 
-const meta = inject(MetaInj, ref({} as TableType))
+const meta = inject(MetaInj, ref())
 
 const columns = computed(() => meta.value?.columns || [])
 
@@ -255,7 +255,7 @@ function fieldsValidation(record: Record<string, any>) {
     return true
   }
 
-  const tableName = meta?.value.title || ''
+  const tableName = meta.value?.title || ''
 
   if (!record.destCn) {
     message.error(`${t('msg.error.columnDescriptionNotFound')} ${record.srcCn}`)
@@ -340,7 +340,7 @@ async function importTemplate() {
     try {
       isImporting.value = true
 
-      const tableName = meta.value.title
+      const tableName = meta.value?.title
 
       // only one file is allowed currently
       const data = importData[Object.keys(importData)[0]]
@@ -381,7 +381,7 @@ async function importTemplate() {
           }, {}),
         )
 
-        await $api.dbTableRow.bulkCreate('noco', projectName, tableName, batchData)
+        await $api.dbTableRow.bulkCreate('noco', projectName, tableName!, batchData)
 
         importingTip.value = `Importing data to ${projectName}: ${progress}/${total} records`
 
@@ -440,7 +440,7 @@ async function importTemplate() {
           table_name: table.ref_table_name,
           // leave title empty to get a generated one based on ref_table_name
           title: '',
-          columns: table.columns,
+          columns: table.columns || [],
         })
         table.title = tableMeta.title
 
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index 6482e996e1..fd9ea5b19f 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
 
 // todo: column type doesn't have required property `error` - throws in typecheck
-const column: any = inject(ColumnInj)
+const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
 
 const value = inject(CellValueInj)
 
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index 505cc065d2..d9298241b9 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -54,7 +54,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
 )
 await loadRelatedTableMeta()
 
-const localCellValue = computed(() => {
+const localCellValue = computed<any[]>(() => {
   if (cellValue?.value) {
     return cellValue?.value ?? []
   } else if (isNew.value) {
@@ -64,7 +64,7 @@ const localCellValue = computed(() => {
 })
 
 const cells = computed(() =>
-  localCellValue.value.reduce((acc: any[], curr: any) => {
+  localCellValue.value.reduce((acc, curr) => {
     if (!relatedTablePrimaryValueProp.value) return acc
 
     const value = curr[relatedTablePrimaryValueProp.value]
@@ -72,16 +72,21 @@ const cells = computed(() =>
     if (!value) return acc
 
     return [...acc, { value, item: curr }]
-  }, [] as any[]),
+  }, []),
 )
 
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
-    removeLTARRef(rec, column?.value as ColumnType)
+    await removeLTARRef(rec, column.value)
   } else {
     await unlink(rec)
   }
 }
+
+const onAttachRecord = () => {
+  childListDlg.value = false
+  listItemsDlg.value = true
+}
 </script>
 
 <template>
@@ -110,16 +115,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
     <ListItems v-model="listItemsDlg" />
 
-    <ListChildItems
-      v-model="childListDlg"
-      :cell-value="localCellValue"
-      @attach-record="
-        () => {
-          childListDlg = false
-          listItemsDlg = true
-        }
-      "
-    />
+    <ListChildItems v-model="childListDlg" :cell-value="localCellValue" @attach-record="onAttachRecord" />
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 8c3544f063..d8a01a49b6 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -2,7 +2,18 @@
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { CellValueInj, ColumnInj, MetaInj, ReadonlyInj, computed, inject, provide, useColumn, useMetas } from '#imports'
+import {
+  CellUrlDisableOverlayInj,
+  CellValueInj,
+  ColumnInj,
+  MetaInj,
+  ReadonlyInj,
+  computed,
+  inject,
+  provide,
+  useColumn,
+  useMetas,
+} from '#imports'
 
 const { metas, getMeta } = useMetas()
 
@@ -10,13 +21,13 @@ provide(ReadonlyInj, true)
 
 const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const value = inject(CellValueInj)
 
 const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]) ?? [])
 
-const relationColumn = meta?.value.columns?.find((c) => c.id === column.value.colOptions?.fk_relation_column_id) as ColumnType & {
+const relationColumn = meta.value?.columns?.find((c) => c.id === column.value.colOptions?.fk_relation_column_id) as ColumnType & {
   colOptions: LinkToAnotherRecordType
 }
 
@@ -32,6 +43,7 @@ const lookupColumn = computed<any>(
 )
 
 provide(MetaInj, lookupTableMeta)
+provide(CellUrlDisableOverlayInj, ref(true))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
 </script>
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index b5d81ed648..0bb553d693 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -53,7 +53,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
 
 await loadRelatedTableMeta()
 
-const localCellValue = computed(() => {
+const localCellValue = computed<any[]>(() => {
   if (cellValue?.value) {
     return cellValue?.value ?? []
   } else if (isNew.value) {
@@ -63,7 +63,7 @@ const localCellValue = computed(() => {
 })
 
 const cells = computed(() =>
-  localCellValue.value.reduce((acc: any[], curr: any) => {
+  localCellValue.value.reduce((acc, curr) => {
     if (!relatedTablePrimaryValueProp.value) return acc
 
     const value = curr[relatedTablePrimaryValueProp.value]
@@ -71,16 +71,21 @@ const cells = computed(() =>
     if (!value) return acc
 
     return [...acc, { value, item: curr }]
-  }, [] as any[]),
+  }, []),
 )
 
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
-    removeLTARRef(rec, column?.value as ColumnType)
+    await removeLTARRef(rec, column.value)
   } else {
     await unlink(rec)
   }
 }
+
+const onAttachRecord = () => {
+  childListDlg.value = false
+  listItemsDlg.value = true
+}
 </script>
 
 <template>
@@ -110,16 +115,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
     <ListItems v-model="listItemsDlg" />
 
-    <ListChildItems
-      v-model="childListDlg"
-      :cell-value="localCellValue"
-      @attach-record="
-        () => {
-          childListDlg = false
-          listItemsDlg = true
-        }
-      "
-    />
+    <ListChildItems v-model="childListDlg" :cell-value="localCellValue" @attach-record="onAttachRecord" />
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
index 7e84165d06..1bc2b2c064 100644
--- a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
+++ b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
@@ -59,8 +59,8 @@ onMounted(() => {
 
 <template>
   <a-select v-model:value="localChannelValues" mode="multiple" :placeholder="placeholder" max-tag-count="responsive">
-    <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">{{
-      channel.channel
-    }}</a-select-option>
+    <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">
+      {{ channel.channel }}
+    </a-select-option>
   </a-select>
 </template>
diff --git a/packages/nc-gui/components/webhook/Drawer.vue b/packages/nc-gui/components/webhook/Drawer.vue
index 64237ce834..8391dd1b96 100644
--- a/packages/nc-gui/components/webhook/Drawer.vue
+++ b/packages/nc-gui/components/webhook/Drawer.vue
@@ -38,7 +38,7 @@ async function editHook(hook: Record<string, any>) {
         <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
       </a-layout-content>
       <a-layout-footer class="!bg-white flex">
-        <a-button v-t="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
+        <a-button v-e="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
           🚀 {{ $t('labels.weAreHiring') }}! 🚀
         </a-button>
       </a-layout-footer>
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index 5b3f5e2679..9abdf91bc0 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { MetaInj, extractSdkResponseErrorMsg, fieldRequiredValidator, inject, reactive, useApi, useNuxtApp } from '#imports'
+import type { Ref } from 'vue'
+import type { AuditType } from 'nocodb-sdk'
+import {
+  MetaInj,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  inject,
+  reactive,
+  useApi,
+  useI18n,
+  useNuxtApp,
+} from '#imports'
 
 const emit = defineEmits(['backToList', 'editOrAdd'])
 
@@ -11,7 +21,7 @@ const { $e } = useNuxtApp()
 
 const { api, isLoading: loading } = useApi()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const useForm = Form.useForm
 
@@ -254,28 +264,28 @@ async function onEventChange() {
 
   hook.notification.payload = payload
 
-  let channels: Record<string, any>[] | null = null
+  let channels: Ref<Record<string, any>[] | null> = ref(null)
 
   switch (hook.notification.type) {
     case 'Slack':
-      channels = slackChannels as any
+      channels = slackChannels
       break
     case 'Microsoft Teams':
-      channels = teamsChannels as any
+      channels = teamsChannels
       break
     case 'Discord':
-      channels = discordChannels as any
+      channels = discordChannels
       break
     case 'Mattermost':
-      channels = mattermostChannels as any
+      channels = mattermostChannels
       break
   }
 
   if (channels) {
     hook.notification.payload.webhook_url =
       hook.notification.payload.webhook_url &&
-      hook.notification.payload.webhook_url.map((v: Record<string, any>) =>
-        channels?.find((s: Record<string, any>) => v.webhook_url === s.webhook_url),
+      hook.notification.payload.webhook_url.map((v: { webhook_url: string }) =>
+        channels.value?.find((s) => v.webhook_url === s.webhook_url),
       )
   }
 
@@ -289,13 +299,21 @@ async function onEventChange() {
 
 async function loadPluginList() {
   try {
-    const plugins = (await api.plugin.list()).list as any
-    apps.value = plugins.reduce((o: Record<string, any>[], p: Record<string, any>) => {
-      p.tags = p.tags ? p.tags.split(',') : []
-      p.parsedInput = p.input && JSON.parse(p.input)
-      o[p.title] = p
+    const plugins = (await api.plugin.list()).list!
+
+    apps.value = plugins.reduce((o, p) => {
+      const plugin: { title: string; tags: string[]; parsedInput: Record<string, any> } = {
+        title: '',
+        tags: [],
+        parsedInput: {},
+        ...(p as any),
+      }
+      plugin.tags = p.tags ? p.tags.split(',') : []
+      plugin.parsedInput = p.input && JSON.parse(p.input)
+      o[plugin.title] = plugin
+
       return o
-    }, {})
+    }, {} as Record<string, any>)
 
     if (hook.event && hook.operation) {
       hook.eventOperation = `${hook.event} ${hook.operation}`
@@ -330,13 +348,13 @@ async function saveHooks() {
         },
       })
     } else {
-      res = await api.dbTableWebhook.create(meta!.value.id!, {
+      res = await api.dbTableWebhook.create(meta.value!.id!, {
         ...hook,
         notification: {
           ...hook.notification,
           payload: hook.notification.payload,
         },
-      } as any)
+      } as AuditType)
     }
 
     if (!hook.id && res) {
diff --git a/packages/nc-gui/components/webhook/List.vue b/packages/nc-gui/components/webhook/List.vue
index b5fe8b16b6..cc769d55b4 100644
--- a/packages/nc-gui/components/webhook/List.vue
+++ b/packages/nc-gui/components/webhook/List.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { MetaInj } from '~/context'
-import { inject, onMounted, ref, useNuxtApp } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { MetaInj, extractSdkResponseErrorMsg, inject, onMounted, ref, useI18n, useNuxtApp } from '#imports'
 
 const emit = defineEmits(['edit', 'add'])
 
@@ -13,11 +10,11 @@ const { $api, $e } = useNuxtApp()
 
 const hooks = ref<Record<string, any>[]>([])
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
 async function loadHooksList() {
   try {
-    const hookList = (await $api.dbTableWebhook.list(meta?.value.id as string)).list as Record<string, any>[]
+    const hookList = (await $api.dbTableWebhook.list(meta.value?.id as string)).list as Record<string, any>[]
     hooks.value = hookList.map((hook) => {
       hook.notification = hook.notification && JSON.parse(hook.notification)
       return hook
@@ -58,7 +55,7 @@ onMounted(() => {
     <div class="mb-2">
       <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
       <a-button
-        v-t="['c:webhook:add']"
+        v-e="['c:webhook:add']"
         class="float-right nc-btn-create-webhook"
         type="primary"
         size="large"
diff --git a/packages/nc-gui/components/webhook/Test.vue b/packages/nc-gui/components/webhook/Test.vue
index 84856d9b35..d9e6455d43 100644
--- a/packages/nc-gui/components/webhook/Test.vue
+++ b/packages/nc-gui/components/webhook/Test.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import { onMounted } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils'
-
-const { hook } = defineProps<Props>()
-
-const { t } = useI18n()
+import { MetaInj, extractSdkResponseErrorMsg, onMounted, useI18n } from '#imports'
 
 interface Props {
   hook: Record<string, any>
 }
 
+const { hook } = defineProps<Props>()
+
+const { t } = useI18n()
+
 const { $api } = useNuxtApp()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const sampleData = ref({
   data: {},
@@ -37,7 +34,7 @@ async function loadSampleData() {
 
 async function testWebhook() {
   try {
-    await $api.dbTableWebhook.test(meta?.value.id as string, {
+    await $api.dbTableWebhook.test(meta.value?.id as string, {
       hook,
       payload: sampleData.value,
     })
diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
index cea4437711..fd818866f4 100644
--- a/packages/nc-gui/composables/index.ts
+++ b/packages/nc-gui/composables/index.ts
@@ -24,3 +24,4 @@ export * from './useSmartsheetStore'
 export * from './useLTARStore'
 export * from './useExpandedFormStore'
 export * from './useSharedFormViewStore'
+export * from './useCellUrlConfig'
diff --git a/packages/nc-gui/composables/useCellUrlConfig.ts b/packages/nc-gui/composables/useCellUrlConfig.ts
new file mode 100644
index 0000000000..d5604445c5
--- /dev/null
+++ b/packages/nc-gui/composables/useCellUrlConfig.ts
@@ -0,0 +1,48 @@
+import type { MaybeRef } from '@vueuse/core'
+import { computed, unref, useRoute } from '#imports'
+
+export interface CellUrlOptions {
+  behavior?: string
+  overlay?: string
+}
+
+type ParsedRules = [RegExp, CellUrlOptions]
+
+const parseUrlRules = (serialized?: string): ParsedRules[] | undefined => {
+  if (!serialized) return undefined
+
+  try {
+    return Object.entries(JSON.parse(serialized)).map(([key, value]) => [new RegExp(key), value] as ParsedRules)
+  } catch (err) {
+    console.error(err)
+
+    return undefined
+  }
+}
+
+export function useCellUrlConfig(url?: MaybeRef<string>) {
+  const route = useRoute()
+
+  const config = $computed(() => ({
+    behavior: route.query.url_behavior as string | undefined,
+    overlay: route.query.url_overlay as string | undefined,
+    rules: parseUrlRules(route.query.url_rules as string),
+  }))
+
+  const options = computed(() => {
+    const options = { behavior: config.behavior, overlay: config.overlay }
+
+    if (config.rules && (!config.behavior || !config.overlay)) {
+      for (const [regex, value] of config.rules) {
+        if (unref(url)?.match(regex)) return Object.assign(options, value)
+      }
+    }
+
+    return options
+  })
+
+  return {
+    cellUrlConfig: config,
+    cellUrlOptions: options,
+  }
+}
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index 419e339ec4..c2e0f70ff6 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -12,14 +12,14 @@ const useForm = Form.useForm
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
-  (meta: Ref<TableType>, column?: Ref<ColumnType>) => {
+  (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
     const { sqlUi } = useProject()
     const { $api } = useNuxtApp()
     const { getMeta } = useMetas()
     const { t } = useI18n()
     const { $e } = useNuxtApp()
 
-    const isEdit = computed(() => !!column?.value?.id)
+    const isEdit = computed(() => !!column.value?.id)
 
     const idType = null
 
@@ -32,7 +32,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const formState = ref<Record<string, any>>({
       title: 'title',
       uidt: UITypes.SingleLineText,
-      ...clone(column?.value || {}),
+      ...clone(column.value || {}),
     })
 
     // actions
@@ -84,7 +84,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const onUidtOrIdTypeChange = () => {
       const { isCurrency } = useColumn(ref(formState.value as ColumnType))
 
-      const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
+      const colProp = sqlUi.value.getDataTypeForUiType(formState.value as { uidt: UITypes }, idType ?? undefined)
       formState.value = {
         ...formState.value,
         meta: {},
@@ -101,8 +101,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
       const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-      if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value?.uidt as UITypes)) {
-        formState.value.dtxp = column?.value?.dtxp
+      if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.value?.uidt as UITypes)) {
+        formState.value.dtxp = column.value?.dtxp
       }
 
       if (columnToValidate.includes(formState.value.uidt)) {
@@ -112,7 +112,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
 
       if (isCurrency.value) {
-        if (column?.value?.uidt === UITypes.Currency) {
+        if (column.value?.uidt === UITypes.Currency) {
           formState.value.dtxp = column.value.dtxp
           formState.value.dtxs = column.value.dtxs
         } else {
@@ -140,12 +140,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       formState.value.dtx = 'specificType'
 
       const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-      if (column?.value && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value.uidt as UITypes)) {
-        formState.value.dtxp = column?.value.dtxp
+      if (column.value && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.value.uidt as UITypes)) {
+        formState.value.dtxp = column.value.dtxp
       }
 
       if (isCurrency.value) {
-        if (column?.value?.uidt === UITypes.Currency) {
+        if (column.value?.uidt === UITypes.Currency) {
           formState.value.dtxp = column.value.dtxp
           formState.value.dtxs = column.value.dtxs
         } else {
@@ -177,10 +177,10 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
 
       try {
-        formState.value.table_name = meta.value.table_name
+        formState.value.table_name = meta.value?.table_name
         // formState.value.title = formState.value.column_name
-        if (column?.value) {
-          await $api.dbTableColumn.update(column?.value?.id as string, formState.value)
+        if (column.value) {
+          await $api.dbTableColumn.update(column.value?.id as string, formState.value)
           // Column updated
           message.success(t('msg.success.columnUpdated'))
         } else {
@@ -193,10 +193,10 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
             //   };
             // }
           }
-          await $api.dbTableColumn.create(meta.value.id as string, formState.value)
+          await $api.dbTableColumn.create(meta.value?.id as string, formState.value)
 
           /** if LTAR column then force reload related table meta */
-          if (formState.value.uidt === UITypes.LinkToAnotherRecord && meta.value.id !== formState.value.childId) {
+          if (formState.value.uidt === UITypes.LinkToAnotherRecord && meta.value?.id !== formState.value.childId) {
             getMeta(formState.value.childId, true).then(() => {})
           }
 
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index b6664cf0a3..2aec9d1bf6 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -94,9 +94,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       await api.utils.commentRow({
         fk_model_id: meta.value?.id as string,
         row_id: rowId,
-        // todo: description missing from argument type
         description: comment.value,
-      } as any)
+      })
 
       comment.value = ''
 
diff --git a/packages/nc-gui/composables/useGridViewColumnWidth.ts b/packages/nc-gui/composables/useGridViewColumnWidth.ts
index f26da87d31..1d67613cfa 100644
--- a/packages/nc-gui/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui/composables/useGridViewColumnWidth.ts
@@ -1,11 +1,11 @@
 import { useStyleTag } from '@vueuse/core'
-import type { ColumnType, GridColumnType, GridType } from 'nocodb-sdk'
+import type { ColumnType, GridColumnType, GridType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useMetas } from './useMetas'
 import { useUIPermission } from './useUIPermission'
 import { IsPublicInj } from '~/context'
 
-export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | undefined>) {
+export function useGridViewColumnWidth(view: Ref<GridType | undefined>) {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
   const { isUIAllowed } = useUIPermission()
   const { $api } = useNuxtApp()
@@ -16,7 +16,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
   const resizingColWidth = ref('200px')
   const isPublic = inject(IsPublicInj, ref(false))
 
-  const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
+  const columns = computed<ColumnType[]>(() => metas.value?.[(view.value as ViewType)?.fk_model_id as string]?.columns || [])
 
   watch(
     [gridViewCols, resizingCol, resizingColWidth],
@@ -38,7 +38,8 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
 
   const loadGridViewColumns = async () => {
     if (!view.value?.id && !isPublic.value) return
-    const colsData: GridColumnType[] = isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value.id)
+
+    const colsData: GridColumnType[] = (isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value!.id!)) ?? []
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index f4daf4d3fb..d0f235533a 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -1,4 +1,4 @@
-import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, PaginatedType, RequestParams, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { Modal, message } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
@@ -46,10 +46,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const isPublic: boolean = $(inject(IsPublicInj, ref(false)))
 
-    const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
+    const colOptions = $computed(() => column.value?.colOptions as LinkToAnotherRecordType)
 
     const { sharedView } = useSharedView() as Record<string, any>
-    const projectId = project?.value?.id || sharedView.value?.view?.project_id
+    const projectId = project.value?.id || sharedView.value?.view?.project_id
 
     // getters
     const meta = computed(() => metas?.value?.[column?.value?.fk_model_id as string])
@@ -73,18 +73,18 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     }
 
     const loadRelatedTableMeta = async () => {
-      await getMeta(colOptions?.fk_related_model_id as string)
+      await getMeta(colOptions.fk_related_model_id as string)
     }
 
     const relatedTablePrimaryValueProp = computed(() => {
-      return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+      return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
     const relatedTablePrimaryKeyProps = computed(() => {
-      return relatedTableMeta?.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
+      return relatedTableMeta.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
     })
     const primaryValueProp = computed(() => {
-      return (meta?.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+      return (meta.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
     const loadChildrenExcludedList = async () => {
@@ -93,7 +93,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           const route = useRoute()
           childrenExcludedList.value = await $api.public.dataRelationList(
             route.params.viewId as string,
-            column?.value?.id,
+            column.value.id,
             {},
             {
               headers: {
@@ -106,7 +106,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
                   childrenExcludedListPagination.query &&
                   `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
                 fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
-              } as any,
+              } as RequestParams,
             },
           )
 
diff --git a/packages/nc-gui/composables/useLoadingIndicator/index.ts b/packages/nc-gui/composables/useLoadingIndicator/index.ts
new file mode 100644
index 0000000000..4455349df5
--- /dev/null
+++ b/packages/nc-gui/composables/useLoadingIndicator/index.ts
@@ -0,0 +1,72 @@
+import { computed, ref } from '#imports'
+
+interface UseLoadingIndicatorProps {
+  duration?: number
+  throttle?: number
+}
+
+export function useLoadingIndicator({ duration = 2000, throttle = 200 }: UseLoadingIndicatorProps) {
+  const progress = ref(0)
+  const isLoading = ref(false)
+  const step = computed(() => 10000 / duration)
+
+  let _timer: any = null
+  let _throttle: any = null
+
+  function start() {
+    clear()
+    progress.value = 0
+    isLoading.value = true
+    if (throttle) {
+      if (process.client) {
+        _throttle = setTimeout(_startTimer, throttle)
+      }
+    } else {
+      _startTimer()
+    }
+  }
+
+  function finish() {
+    progress.value = 100
+    _hide()
+  }
+
+  function clear() {
+    clearInterval(_timer)
+    clearTimeout(_throttle)
+    _timer = null
+    _throttle = null
+  }
+
+  function _increase(num: number) {
+    progress.value = Math.min(100, progress.value + num)
+  }
+
+  function _hide() {
+    clear()
+    if (process.client) {
+      setTimeout(() => {
+        isLoading.value = false
+        setTimeout(() => {
+          progress.value = 0
+        }, 400)
+      }, 500)
+    }
+  }
+
+  function _startTimer() {
+    if (process.client) {
+      _timer = setInterval(() => {
+        _increase(step.value)
+      }, 100)
+    }
+  }
+
+  return {
+    progress,
+    isLoading,
+    start,
+    finish,
+    clear,
+  }
+}
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 9efb7d4b64..9d073426e3 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -4,7 +4,7 @@ import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { useNuxtApp, useRoute } from '#app'
 import type { ProjectMetaInfo } from '~/lib'
 import type { ThemeConfig } from '@/composables/useTheme'
-import { useInjectionState } from '#imports'
+import { createEventHook, useInjectionState } from '#imports'
 
 const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const { $api, $e } = useNuxtApp()
@@ -12,6 +12,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const { includeM2M } = useGlobal()
   const { setTheme, theme } = useTheme()
 
+  const projectLoadedHook = createEventHook<ProjectType>()
+
   const projectId = computed(() => (_projectId ? unref(_projectId) : (route.params.projectId as string)))
   const project = ref<ProjectType>({})
   const tables = ref<TableType[]>([])
@@ -86,6 +88,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     await loadProjectRoles()
     await loadTables()
     setTheme(projectMeta.value?.theme)
+
+    projectLoadedHook.trigger(project.value)
   }
 
   async function updateProject(data: Partial<ProjectType>) {
@@ -151,6 +155,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     projectMetaInfo,
     projectMeta,
     saveTheme,
+    projectLoadedHook: projectLoadedHook.on,
   }
 }, 'useProject')
 
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 46508aab80..6bc3e54499 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -52,7 +52,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   )
   const loadSharedView = async () => {
     try {
-      const viewMeta: Record<string, any> = await api.public.sharedViewMetaGet(sharedViewId, {
+      const viewMeta = await api.public.sharedViewMetaGet(sharedViewId, {
         headers: {
           'xc-password': password.value,
         },
@@ -90,7 +90,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     for (const column of formColumns.value) {
       if (
         !isVirtualCol(column) &&
-        ((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || (column as any).required)
+        ((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || column.required)
       ) {
         obj.localState[column.title!] = { required }
       } else if (
@@ -141,7 +141,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       }
 
       await api.public.dataCreate(
-        (sharedView.value as any)?.uuid as string,
+        sharedView.value!.uuid!,
         {
           data,
           ...attachment,
@@ -156,7 +156,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       submitted.value = true
       progress.value = false
 
-      await message.success(sharedFormView.value?.sucess_msg || 'Saved successfully.')
+      await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
       await message.error(await extractSdkResponseErrorMsg(e))
@@ -166,7 +166,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   /** reset form if show_blank_form is true */
   watch(submitted, (nextVal) => {
-    if (nextVal && (sharedFormView.value as any)?.show_blank_form) {
+    if (nextVal && sharedFormView.value?.show_blank_form) {
       secondsRemain.value = 5
       const intvl = setInterval(() => {
         secondsRemain.value = secondsRemain.value - 1
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index 4d0b3bfdfd..0d1163fdae 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -1,4 +1,4 @@
-import type { ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import type { ExportTypes, FilterType, PaginatedType, RequestParams, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { useGlobal, useNuxtApp } from '#imports'
 
@@ -10,16 +10,16 @@ export function useSharedView() {
   const { appInfo } = $(useGlobal())
   const appInfoDefaultLimit = appInfo.defaultLimit || 25
   const paginationData = useState<PaginatedType>('paginationData', () => ({ page: 1, pageSize: appInfoDefaultLimit }))
-  const sharedView = useState<ViewType>('sharedView')
+  const sharedView = useState<ViewType | undefined>('sharedView', () => undefined)
   const sorts = useState<SortType[]>('sorts', () => [])
-  const password = useState<string | undefined>('password')
+  const password = useState<string | undefined>('password', () => undefined)
   const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
+  const meta = useState<TableType | undefined>('meta', () => undefined)
 
-  const meta = useState<TableType>('meta')
   const formColumns = computed(
     () =>
-      meta.value.columns
-        .filter(
+      meta.value?.columns
+        ?.filter(
           (f: Record<string, any>) =>
             f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
         )
@@ -31,7 +31,7 @@ export function useSharedView() {
   const { setMeta } = useMetas()
 
   const loadSharedView = async (viewId: string, localPassword: string | undefined = undefined) => {
-    const viewMeta = await $api.public.sharedViewMetaGet(viewId, {
+    const viewMeta: Record<string, any> = await $api.public.sharedViewMetaGet(viewId, {
       headers: {
         'xc-password': localPassword ?? password.value,
       },
@@ -40,11 +40,11 @@ export function useSharedView() {
     allowCSVDownload.value = JSON.parse(viewMeta.meta)?.allowCSVDownload
 
     if (localPassword) password.value = localPassword
-    sharedView.value = { ...viewMeta }
+    sharedView.value = { title: '', ...viewMeta }
     meta.value = { ...viewMeta.model }
 
     let order = 1
-    meta.value.columns = [...viewMeta.model.columns]
+    meta.value!.columns = [...viewMeta.model.columns]
       .filter((c) => c.show)
       .map((c) => ({ ...c, order: order++ }))
       .sort((a, b) => a.order - b.order)
@@ -56,11 +56,13 @@ export function useSharedView() {
   }
 
   const fetchSharedViewData = async () => {
+    if (!sharedView.value) return
+
     const page = paginationData.value.page || 1
     const pageSize = paginationData.value.pageSize || appInfoDefaultLimit
 
     const { data } = await $api.public.dataList(
-      sharedView?.value?.uuid,
+      sharedView.value.uuid!,
       {
         offset: (page - 1) * pageSize,
         filterArrJson: JSON.stringify(nestedFilters.value),
@@ -82,8 +84,8 @@ export function useSharedView() {
     type: ExportTypes.EXCEL | ExportTypes.CSV,
     responseType: 'base64' | 'blob',
   ) => {
-    return await $api.public.csvExport(sharedView.value?.uuid, type, {
-      format: responseType as any,
+    return await $api.public.csvExport(sharedView.value!.uuid!, type, {
+      format: responseType,
       query: {
         fields: fields.map((field) => field.title),
         offset,
@@ -94,7 +96,7 @@ export function useSharedView() {
       headers: {
         'xc-password': password.value,
       },
-    })
+    } as RequestParams)
   }
 
   return {
diff --git a/packages/nc-gui/composables/useSmartsheetRowStore.ts b/packages/nc-gui/composables/useSmartsheetRowStore.ts
index c337d2e2d6..07d8d1c5b0 100644
--- a/packages/nc-gui/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetRowStore.ts
@@ -20,123 +20,126 @@ import {
   useVirtualCell,
 } from '#imports'
 
-const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: MaybeRef<Row>) => {
-  const { $api } = useNuxtApp()
+const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
+  (meta: Ref<TableType | undefined>, row: MaybeRef<Row>) => {
+    const { $api } = useNuxtApp()
 
-  const { t } = useI18n()
+    const { t } = useI18n()
 
-  const { project } = useProject()
+    const { project } = useProject()
 
-  const { metas } = useMetas()
+    const { metas } = useMetas()
 
-  const currentRow = ref(row)
+    const currentRow = ref(row)
 
-  // state
-  const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
+    // state
+    const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
 
-  // getters
-  const isNew = computed(() => unref(row).rowMeta?.new ?? false)
+    // getters
+    const isNew = computed(() => unref(row).rowMeta?.new ?? false)
 
-  // actions
-  const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
-    const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
-    if (isHm || isMm) {
-      if (!state.value[column.title!]) state.value[column.title!] = []
+    // actions
+    const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
+      const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+      if (isHm || isMm) {
+        if (!state.value[column.title!]) state.value[column.title!] = []
 
-      if (state.value[column.title!]!.find((ln: Record<string, any>) => deepCompare(ln, value))) {
-        // This value is already in the list
-        return message.info(t('msg.info.valueAlreadyInList'))
-      }
+        if (state.value[column.title!]!.find((ln: Record<string, any>) => deepCompare(ln, value))) {
+          // This value is already in the list
+          return message.info(t('msg.info.valueAlreadyInList'))
+        }
 
-      state.value[column.title!]!.push(value)
-    } else if (isBt) {
-      state.value[column.title!] = value
-    }
-  }
-
-  // actions
-  const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
-    const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
-    if (isHm || isMm) {
-      state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
-    } else if (isBt) {
-      state.value[column.title!] = null
+        state.value[column.title!]!.push(value)
+      } else if (isBt) {
+        state.value[column.title!] = value
+      }
     }
-  }
 
-  const linkRecord = async (rowId: string, relatedRowId: string, column: ColumnType, type: RelationTypes) => {
-    try {
-      await $api.dbTableRow.nestedAdd(
-        NOCO,
-        project.value.title as string,
-        meta.value.title as string,
-        rowId,
-        type as 'mm' | 'hm',
-        column.title as string,
-        relatedRowId,
-      )
-    } catch (e: any) {
-      message.error(await extractSdkResponseErrorMsg(e))
+    // actions
+    const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
+      const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+      if (isHm || isMm) {
+        state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
+      } else if (isBt) {
+        state.value[column.title!] = null
+      }
     }
-  }
-
-  /** sync LTAR relations kept in local state */
-  const syncLTARRefs = async (row: Record<string, any>) => {
-    const id = extractPkFromRow(row, meta.value.columns as ColumnType[])
-    for (const column of meta?.value?.columns ?? []) {
-      if (column.uidt !== UITypes.LinkToAnotherRecord) continue
-      const colOptions = column?.colOptions as LinkToAnotherRecordType
 
-      const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
-      const relatedTableMeta = metas.value?.[colOptions?.fk_related_model_id as string]
+    const linkRecord = async (rowId: string, relatedRowId: string, column: ColumnType, type: RelationTypes) => {
+      try {
+        await $api.dbTableRow.nestedAdd(
+          NOCO,
+          project.value.title as string,
+          meta.value?.title as string,
+          rowId,
+          type as 'mm' | 'hm',
+          column.title as string,
+          relatedRowId,
+        )
+      } catch (e: any) {
+        message.error(await extractSdkResponseErrorMsg(e))
+      }
+    }
 
-      if (isHm || isMm) {
-        const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
-        for (const relatedRow of relatedRows) {
+    /** sync LTAR relations kept in local state */
+    const syncLTARRefs = async (row: Record<string, any>) => {
+      const id = extractPkFromRow(row, meta.value?.columns as ColumnType[])
+      for (const column of meta?.value?.columns ?? []) {
+        if (column.uidt !== UITypes.LinkToAnotherRecord) continue
+        const colOptions = column?.colOptions as LinkToAnotherRecordType
+
+        const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+        const relatedTableMeta = metas.value?.[colOptions?.fk_related_model_id as string]
+
+        if (isHm || isMm) {
+          const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
+          for (const relatedRow of relatedRows) {
+            await linkRecord(
+              id,
+              extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
+              column,
+              colOptions.type as RelationTypes,
+            )
+          }
+        } else if (isBt && state?.value?.[column.title!]) {
           await linkRecord(
             id,
-            extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
+            extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
             column,
             colOptions.type as RelationTypes,
           )
         }
-      } else if (isBt && state?.value?.[column.title!]) {
-        await linkRecord(
-          id,
-          extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
-          column,
-          colOptions.type as RelationTypes,
-        )
       }
     }
-  }
-
-  const loadRow = async () => {
-    const record = await $api.dbTableRow.read(
-      NOCO,
-      project?.value?.id as string,
-      meta.value.title,
-      extractPkFromRow(ref(row).value?.row, meta.value.columns as ColumnType[]),
-    )
-    Object.assign(ref(row).value, {
-      row: record,
-      oldRow: { ...record },
-      rowMeta: {},
-    })
-  }
-
-  return {
-    row,
-    state,
-    isNew,
-    // todo: use better name
-    addLTARRef,
-    removeLTARRef,
-    syncLTARRefs,
-    loadRow,
-    currentRow,
-  }
-}, 'smartsheet-row-store')
+
+    const loadRow = async () => {
+      const record = await $api.dbTableRow.read(
+        NOCO,
+        project.value?.id as string,
+        meta.value?.title as string,
+        extractPkFromRow(ref(row).value?.row, meta.value?.columns as ColumnType[]),
+      )
+      Object.assign(ref(row).value, {
+        row: record,
+        oldRow: { ...record },
+        rowMeta: {},
+      })
+    }
+
+    return {
+      row,
+      state,
+      isNew,
+      // todo: use better name
+      addLTARRef,
+      removeLTARRef,
+      syncLTARRefs,
+      loadRow,
+      currentRow,
+    }
+  },
+  'smartsheet-row-store',
+)
 
 export { useProvideSmartsheetRowStore }
 
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 6022624512..2ea1ad1f26 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -5,8 +5,8 @@ import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTempl
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   (
-    view: Ref<ViewType>,
-    meta: Ref<TableType>,
+    view: Ref<ViewType | undefined>,
+    meta: Ref<TableType | undefined>,
     shared = false,
     initalSorts?: Ref<SortType[]>,
     initialFilters?: Ref<FilterType[]>,
@@ -24,15 +24,15 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     })
 
     // getters
-    const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
-    const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
-    const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
-    const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
-    const isSharedForm = computed(() => isForm?.value && shared)
-    const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
+    const isLocked = computed(() => view.value?.lock_type === 'locked')
+    const isPkAvail = computed(() => meta.value?.columns?.some((c) => c.pk))
+    const isGrid = computed(() => view.value?.type === ViewTypes.GRID)
+    const isForm = computed(() => view.value?.type === ViewTypes.FORM)
+    const isSharedForm = computed(() => isForm.value && shared)
+    const isGallery = computed(() => view.value?.type === ViewTypes.GALLERY)
     const xWhere = computed(() => {
       let where
-      const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
+      const col = meta.value?.columns?.find(({ id }) => id === search.field) || meta.value?.columns?.find((v) => v.pv)
       if (!col) return
 
       if (!search.query.trim()) return
@@ -44,7 +44,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       return where
     })
 
-    const isSqlView = computed(() => meta?.value?.type === 'view')
+    const isSqlView = computed(() => meta.value?.type === 'view')
 
     const sorts = initalSorts ?? ref<SortType[]>([])
     const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])
diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 8557bc6524..10bd5b151c 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -1,6 +1,7 @@
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { USER_PROJECT_ROLES, useGlobal, useState } from '#imports'
+import { USER_PROJECT_ROLES, computed, useGlobal, useState } from '#imports'
+import type { Role, Roles } from '~/lib'
 
 export function useUIPermission() {
   const { user, previewAs } = useGlobal()
@@ -8,7 +9,7 @@ export function useUIPermission() {
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
   const baseRoles = computed(() => {
-    let userRoles = user.value?.roles || {}
+    let userRoles = typeof user.value?.roles === 'string' ? user.value?.roles : ({ ...(user.value?.roles || {}) } as Roles)
 
     // if string populate key-value paired object
     if (typeof userRoles === 'string') {
@@ -17,20 +18,20 @@ export function useUIPermission() {
         return acc
       }, {})
     }
+
     // merge user role and project specific user roles
-    const roles = {
+    return {
       ...userRoles,
       ...projectRoles.value,
     }
-
-    return roles
   })
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    let roles = baseRoles.value
+    let roles = baseRoles.value as Record<string, any>
+
     if (previewAs.value && !skipPreviewAs) {
       roles = {
-        [previewAs.value]: true,
+        [previewAs.value as Role]: true,
       }
     }
 
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index 012fa08c11..8255a556c2 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -6,7 +6,11 @@ import { useNuxtApp } from '#app'
 import { IsPublicInj } from '#imports'
 import type { Field } from '~/lib'
 
-export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
+export function useViewColumns(
+  view: Ref<ViewType | undefined>,
+  meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
+  reloadData?: () => void,
+) {
   const isPublic = inject(IsPublicInj, ref(false))
 
   const fields = ref<Field[]>()
@@ -26,12 +30,12 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   const metaColumnById = computed<Record<string, ColumnType>>(() => {
     if (!meta.value?.columns) return {}
 
-    return meta.value?.columns?.reduce(
-      (acc: ColumnType, curr: ColumnType) => ({
+    return meta.value.columns.reduce(
+      (acc, curr) => ({
         ...acc,
         [curr.id!]: curr,
       }),
-      {} as any,
+      {},
     )
   })
 
@@ -119,7 +123,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   const saveOrUpdate = async (field: any, index: number) => {
     if (isPublic.value && fields.value) {
       fields.value[index] = field
-      meta.value.columns = meta.value?.columns?.map((column: ColumnType) => {
+      meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => {
         if (column.id === field.fk_column_id) {
           return {
             ...column,
@@ -136,7 +140,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     if (isUIAllowed('fieldsSync')) {
       if (field.id && view?.value?.id) {
         await $api.dbViewColumn.update(view.value.id, field.id, field)
-      } else if (view?.value?.id) {
+      } else if (view.value?.id) {
         const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any
 
         /** update the field in fields if defined */
@@ -151,8 +155,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
 
   const showSystemFields = computed({
     get() {
-      // todo: show_system_fields missing from ViewType
-      return (view?.value as any)?.show_system_fields || false
+      return view.value?.show_system_fields || false
     },
     set(v: boolean) {
       if (view?.value?.id) {
@@ -163,7 +166,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
             })
             .finally(() => reloadData?.())
         }
-        ;(view.value as any).show_system_fields = v
+        view.value.show_system_fields = v
       }
       $e('a:fields:system-fields')
     },
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 13c1bc0816..690e2b6169 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -34,8 +34,8 @@ export interface Row {
 }
 
 export function useViewData(
-  meta: Ref<TableType> | ComputedRef<TableType> | undefined,
-  viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
+  meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
+  viewMeta: Ref<ViewType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
   where?: ComputedRef<string | undefined>,
 ) {
   if (!meta) {
@@ -50,8 +50,7 @@ export function useViewData(
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
   const formColumnData = ref<FormType>()
-  // todo: missing properties on FormType (success_msg, show_blank_form,
-  const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
+  const formViewData = ref<FormType>()
   const formattedData = ref<Row[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
@@ -156,19 +155,19 @@ export function useViewData(
 
     aggCommentCount.value = await $api.utils.commentCount({
       ids,
-      fk_model_id: meta?.value.id as string,
+      fk_model_id: meta.value?.id as string,
     })
 
     for (const row of formattedData.value) {
-      const id = extractPkFromRow(row.row, meta?.value?.columns as ColumnType[])
+      const id = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
       row.rowMeta.commentCount = aggCommentCount.value?.find((c: Record<string, any>) => c.row_id === id)?.count || 0
     }
   }
 
   async function loadData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
-    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
+    if ((!project?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic.value) return
     const response = !isPublic.value
-      ? await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
+      ? await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!, {
           ...queryParams.value,
           ...params,
           ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
@@ -199,7 +198,7 @@ export function useViewData(
       const insertedData = await $api.dbViewRow.create(
         NOCO,
         project?.value.id as string,
-        meta?.value.id as string,
+        meta.value?.id as string,
         viewMeta?.value?.id as string,
         insertObj,
       )
@@ -219,12 +218,12 @@ export function useViewData(
 
   async function updateRowProperty(toUpdate: Row, property: string) {
     try {
-      const id = extractPkFromRow(toUpdate.row, meta?.value.columns as ColumnType[])
+      const id = extractPkFromRow(toUpdate.row, meta.value?.columns as ColumnType[])
 
       const updatedRowData = await $api.dbViewRow.update(
         NOCO,
         project?.value.id as string,
-        meta?.value.id as string,
+        meta.value?.id as string,
         viewMeta?.value?.id as string,
         id,
         {
@@ -238,7 +237,7 @@ export function useViewData(
       // audit
       $api.utils
         .auditRowUpdate(id, {
-          fk_model_id: meta?.value.id as string,
+          fk_model_id: meta.value?.id as string,
           column_name: property,
           row_id: id,
           value: getHTMLEncodedText(toUpdate.row[property]),
@@ -276,8 +275,8 @@ export function useViewData(
     const res: any = await $api.dbViewRow.delete(
       'noco',
       project.value.id as string,
-      meta?.value.id as string,
-      viewMeta?.value.id as string,
+      meta.value?.id as string,
+      viewMeta.value?.id as string,
       id,
     )
 
@@ -298,7 +297,7 @@ export function useViewData(
       if (!row.rowMeta.new) {
         const id = meta?.value?.columns
           ?.filter((c) => c.pk)
-          .map((c) => row.row[c.title as any])
+          .map((c) => row.row[c.title!])
           .join('___')
 
         const deleted = await deleteRowById(id as string)
@@ -365,7 +364,7 @@ export function useViewData(
         ?.map((c: Record<string, any>) => ({
           ...c,
           fk_column_id: c.id,
-          fk_view_id: viewMeta.value.id,
+          fk_view_id: viewMeta.value?.id,
           ...(fieldById[c.id] ? fieldById[c.id] : {}),
           order: (fieldById[c.id] && fieldById[c.id].order) || order++,
           id: fieldById[c.id] && fieldById[c.id].id,
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index a93ae4fb11..eb914f1824 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -1,4 +1,4 @@
-import type { ViewType } from 'nocodb-sdk'
+import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import {
@@ -16,7 +16,7 @@ import {
 import type { Filter } from '~/lib'
 
 export function useViewFilters(
-  view: Ref<ViewType> | undefined,
+  view: Ref<ViewType | undefined>,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
@@ -69,13 +69,14 @@ export function useViewFilters(
         if (parentId) {
           filters.value = await $api.dbTableFilter.childrenRead(parentId)
         } else {
-          filters.value = (await $api.dbTableWebhookFilter.read(hookId as string)) as any
+          // todo: return type is incorrect
+          filters.value = (await $api.dbTableWebhookFilter.read(hookId!)) as unknown as Filter[]
         }
       } else {
         if (parentId) {
           filters.value = await $api.dbTableFilter.childrenRead(parentId)
         } else {
-          filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+          filters.value = await $api.dbTableFilter.read(view.value!.id!)
         }
       }
     } catch (e: any) {
@@ -99,12 +100,12 @@ export function useViewFilters(
             filters.value[+i] = (await $api.dbTableWebhookFilter.create(hookId, {
               ...filter,
               fk_parent_id: parentId,
-            })) as any
+            })) as unknown as FilterType
           } else {
-            filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+            filters.value[+i] = await $api.dbTableFilter.create(view?.value?.id as string, {
               ...filter,
               fk_parent_id: parentId,
-            })) as any
+            })
           }
         }
       }
@@ -168,10 +169,10 @@ export function useViewFilters(
         })
       } else {
         // todo: return type of dbTableFilter is void?
-        filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+        filters.value[i] = await $api.dbTableFilter.create(view.value.id!, {
           ...filter,
           fk_parent_id: parentId,
-        })) as any
+        })
       }
     } catch (e: any) {
       console.log(e)
diff --git a/packages/nc-gui/composables/useViewSorts.ts b/packages/nc-gui/composables/useViewSorts.ts
index edf77643c1..1d53a639ab 100644
--- a/packages/nc-gui/composables/useViewSorts.ts
+++ b/packages/nc-gui/composables/useViewSorts.ts
@@ -1,12 +1,9 @@
-import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
+import type { SortType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { IsPublicInj, ReloadViewDataHookInj, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
 
-export function useViewSorts(
-  view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
-  reloadData?: () => void,
-) {
+export function useViewSorts(view: Ref<ViewType | undefined>, reloadData?: () => void) {
   const { sharedView } = useSharedView()
   const { sorts } = useSmartsheetStoreOrThrow()
 
@@ -21,14 +18,15 @@ export function useViewSorts(
 
   const loadSorts = async () => {
     if (isPublic.value) {
-      const sharedSorts = sharedView.value?.sorts || []
+      // todo: sorts missing on `ViewType`
+      const sharedSorts = (sharedView.value as any)?.sorts || []
       sorts.value = [...sharedSorts]
       return
     }
 
     try {
       if (!view?.value) return
-      sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
+      sorts.value = (await $api.dbTableSort.list(view.value!.id!)).sorts?.list || []
     } catch (e: any) {
       console.error(e)
       message.error(await extractSdkResponseErrorMsg(e))
@@ -48,7 +46,7 @@ export function useViewSorts(
           await $api.dbTableSort.update(sort.id, sort)
           $e('sort-updated')
         } else {
-          sorts.value[i] = (await $api.dbTableSort.create(view?.value?.id as string, sort)) as any
+          sorts.value[i] = (await $api.dbTableSort.create(view.value?.id as string, sort)) as unknown as SortType
         }
       }
       reloadData?.()
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 3a08d13944..5caebcb1c4 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -28,3 +28,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
 export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')
+export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index e7d7f2d7d6..df5e5cc39c 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -41,7 +41,7 @@ hooks.hook('page:finish', () => {
       >
         <div
           v-if="!route.params.projectType"
-          v-t="['c:navbar:home']"
+          v-e="['c:navbar:home']"
           class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
           @click="navigateTo('/')"
         >
@@ -75,7 +75,7 @@ hooks.hook('page:finish', () => {
             <template #overlay>
               <a-menu class="!py-0 leading-8 !rounded">
                 <a-menu-item key="0" class="!rounded-t">
-                  <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
+                  <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
                     <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 
                     <span class="prose group-hover:text-primary"> {{ email }}</span>
@@ -85,7 +85,7 @@ hooks.hook('page:finish', () => {
                 <a-menu-divider class="!m-0" />
 
                 <a-menu-item key="1" class="!rounded-b group">
-                  <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                  <div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
                     <MdiLogout class="group-hover:text-accent" />&nbsp;
 
                     <span class="prose group-hover:text-primary">
@@ -102,7 +102,7 @@ hooks.hook('page:finish', () => {
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>
 
-        <GeneralLanguage class="nc-lang-btn" />
+        <GeneralLanguage v-if="!signedIn" class="nc-lang-btn" />
       </a-tooltip>
 
       <div class="w-full h-full overflow-hidden">
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 0fe61f8fa7..74f2a6e4e0 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -1,6 +1,6 @@
 import type { FilterType } from 'nocodb-sdk'
 import type { I18n } from 'vue-i18n'
-import type { Language, Role } from './enums'
+import type { Role } from './enums'
 
 export interface User {
   id: string
@@ -31,7 +31,7 @@ export interface Field {
   system?: boolean
 }
 
-export type Roles = Record<Role, boolean>
+export type Roles = Record<Role, boolean> | string
 
 export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }
 
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index da72238bd0..9a56058a7c 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -1,5 +1,6 @@
 {
   "private": true,
+  "web-types": "web-types.json",
   "scripts": {
     "build": "nuxi build",
     "dev": "nuxi dev",
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 2d5d534226..37f731b86d 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
-import { useI18n } from 'vue-i18n'
 import {
   computed,
   definePageMeta,
@@ -14,6 +13,7 @@ import {
   ref,
   useClipboard,
   useGlobal,
+  useI18n,
   useProject,
   useRoute,
   useTabs,
@@ -25,15 +25,15 @@ definePageMeta({
   hideHeader: true,
 })
 
-const route = useRoute()
+const { t } = useI18n()
 
-const router = useRouter()
+const route = useRoute()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
 
-const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
+const { projectLoadedHook, project, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
 
-const { addTab, clearTabs } = useTabs()
+const { clearTabs, addTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
@@ -62,27 +62,11 @@ const logout = () => {
   navigateTo('/signin')
 }
 
-onKeyStroke(
-  'Escape',
-  () => {
-    dropdownOpen.value = false
-  },
-  { eventName: 'keydown' },
-)
-
-clearTabs()
-
 function toggleDialog(value?: boolean, key?: string) {
   dialogOpen.value = value ?? !dialogOpen.value
   openDialogKey.value = key
 }
 
-await loadProject()
-
-await loadTables()
-
-const { t } = useI18n()
-
 const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: string) => {
   switch (mode) {
     case 'swatch': {
@@ -117,10 +101,6 @@ const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: st
   }
 }
 
-if (!route.params.type && isUIAllowed('teamAndAuth')) {
-  addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
-}
-
 const copyProjectInfo = async () => {
   try {
     await loadProjectMetaInfo()
@@ -150,11 +130,21 @@ const copyAuthToken = async () => {
   }
 }
 
-/** If v1 url found navigate to corresponding new url */
-const { type, name, view } = route.query
-if (type && name) {
-  router.replace(`/nc/${route.params.projectId}/${type}/${name}${view ? `/${view}` : ''}`)
-}
+onKeyStroke(
+  'Escape',
+  () => {
+    dropdownOpen.value = false
+  },
+  { eventName: 'keydown' },
+)
+
+clearTabs()
+
+projectLoadedHook(() => {
+  if (!route.params.type && isUIAllowed('teamAndAuth')) {
+    addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
+  }
+})
 </script>
 
 <template>
@@ -177,7 +167,7 @@ if (type && name) {
         >
           <div
             v-if="isOpen && !isSharedBase"
-            v-t="['c:navbar:home']"
+            v-e="['c:navbar:home']"
             class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
             @click="navigateTo('/')"
           >
@@ -245,7 +235,7 @@ if (type && name) {
                     <!-- Copy Project Info -->
                     <a-menu-item key="copy">
                       <div
-                        v-t="['c:navbar:user:copy-proj-info']"
+                        v-e="['c:navbar:user:copy-proj-info']"
                         class="nc-project-menu-item group"
                         @click.stop="copyProjectInfo"
                       >
@@ -260,7 +250,7 @@ if (type && name) {
                     <a-menu-item key="api">
                       <div
                         v-if="isUIAllowed('apiDocs')"
-                        v-t="['e:api-docs']"
+                        v-e="['e:api-docs']"
                         class="nc-project-menu-item group"
                         @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                       >
@@ -271,7 +261,7 @@ if (type && name) {
 
                     <!-- Copy Auth Token -->
                     <a-menu-item key="copy">
-                      <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                      <div v-e="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
                         <MdiScriptTextKeyOutline class="group-hover:text-accent" />
                         {{ $t('activity.account.authToken') }}
                       </div>
@@ -283,7 +273,7 @@ if (type && name) {
                     <a-menu-item key="teamAndSettings">
                       <div
                         v-if="isUIAllowed('settings')"
-                        v-t="['c:navdraw:project-settings']"
+                        v-e="['c:navdraw:project-settings']"
                         class="nc-project-menu-item group"
                         @click="toggleDialog(true, 'teamAndAuth')"
                       >
@@ -364,7 +354,7 @@ if (type && name) {
                     <!-- Preview As -->
                     <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
                       <template #title>
-                        <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                        <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                           <MdiFileEyeOutline class="group-hover:text-accent" />
                           {{ $t('activity.previewAs') }}
 
@@ -421,7 +411,7 @@ if (type && name) {
                       <template #expandIcon></template>
 
                       <a-menu-item key="0" class="!rounded-t">
-                        <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
+                        <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
                           <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 
                           <span class="prose-sm">{{ email }}</span>
@@ -429,7 +419,7 @@ if (type && name) {
                       </a-menu-item>
 
                       <a-menu-item key="1" class="!rounded-b">
-                        <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                        <div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
                           <MdiLogout class="group-hover:(!text-accent)" />&nbsp;
 
                           <span class="prose-sm nc-user-menu-signout">
@@ -448,7 +438,7 @@ if (type && name) {
             class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
           >
             <MdiBackburger
-              v-t="['c:grid:toggle-navdraw']"
+              v-e="['c:grid:toggle-navdraw']"
               class="cursor-pointer transform transition-transform duration-500"
               :class="{ 'rotate-180': !isOpen }"
               @click="toggle(!isOpen)"
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 3184ab3df0..683f31d84b 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -1,15 +1,48 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
 import { TabType } from '~/composables'
-import { TabMetaInj, provide, useGlobal, useSidebar, useTabs } from '#imports'
+import {
+  TabMetaInj,
+  onBeforeMount,
+  provide,
+  ref,
+  useGlobal,
+  useProject,
+  useRoute,
+  useRouter,
+  useSidebar,
+  useTabs,
+} from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
+const { project, loadProject, loadTables } = useProject()
+
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
 const { isLoading } = useGlobal()
 
+const route = useRoute()
+
+const router = useRouter()
+
+const isReady = ref(false)
+
+onBeforeMount(async () => {
+  if (!Object.keys(project.value).length) await loadProject()
+
+  /** If v1 url found navigate to corresponding new url */
+  const { type, name, view } = route.query
+  if (type && name) {
+    await router.replace(`/nc/${route.params.projectId}/${type}/${name}${view ? `/${view}` : ''}`)
+  }
+
+  await loadTables()
+
+  isReady.value = true
+})
+
 provide(TabMetaInj, activeTab)
 
 const icon = (tab: TabItem) => {
@@ -39,7 +72,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3"
         >
           <MdiMenu
-            v-t="['c:grid:toggle-navdraw']"
+            v-e="['c:grid:toggle-navdraw']"
             class="cursor-pointer transform transition-transform duration-500 text-white"
             :class="{ 'rotate-180': !isOpen }"
             @click="toggle(!isOpen)"
@@ -71,13 +104,17 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200">
             {{ $t('general.loading') }}
 
-            <MdiLoading :class="{ 'animate-infinite animate-spin': isLoading }" />
+            <MdiLoading class="animate-infinite animate-spin" />
           </div>
         </div>
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
-        <NuxtPage />
+        <NuxtPage v-if="isReady" />
+
+        <div v-else class="w-full h-full flex justify-center items-center">
+          <a-spin size="large" />
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index ee6297069c..d5249fb619 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -22,5 +22,3 @@ getMeta(route.params.title as string, true).finally(() => {
   </div>
   <TabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue
index b495a6da15..0073f0c16f 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Auth from '~~/components/tabs/Auth.vue'
+import Auth from '~/components/tabs/Auth.vue'
 </script>
 
 <template>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index eb2a315dc2..e14b91c438 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk'
 import {
   IsFormInj,
   IsPublicInj,
@@ -34,7 +32,7 @@ if (!notFound.value) {
   provide(IsPublicInj, ref(true))
   provide(IsFormInj, ref(true))
 
-  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>, true)
+  useProvideSmartsheetStore(sharedView, meta, true)
 }
 </script>
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 550698274b..3ab3e6aea0 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -36,97 +36,99 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     <div
       class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
     >
-      <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+      <template v-if="sharedFormView">
+        <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 
-      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView?.heading }}</h1>
 
-      <h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
+        <h2 v-if="sharedFormView?.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
 
-      <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
+        <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
 
-      <template v-else-if="submitted">
-        <div class="flex justify-center">
-          <div v-if="sharedFormView" class="min-w-350px mt-3">
-            <a-alert
-              type="success"
-              class="my-4 text-center"
-              outlined
-              :message="sharedFormView.success_msg || 'Successfully submitted form data'"
-            />
+        <template v-else-if="submitted">
+          <div class="flex justify-center">
+            <div v-if="sharedFormView" class="min-w-350px mt-3">
+              <a-alert
+                type="success"
+                class="my-4 text-center"
+                outlined
+                :message="sharedFormView.success_msg || 'Successfully submitted form data'"
+              />
 
-            <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
-              New form will be loaded after {{ secondsRemain }} seconds
-            </p>
+              <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+                New form will be loaded after {{ secondsRemain }} seconds
+              </p>
 
-            <div v-if="sharedFormView.submit_another_form" class="text-center">
-              <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+              <div v-if="sharedFormView.submit_another_form" class="text-center">
+                <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+              </div>
             </div>
           </div>
-        </div>
-      </template>
-
-      <template v-else-if="sharedFormView">
-        <div class="nc-form-wrapper">
-          <div class="nc-form h-full max-w-3/4 mx-auto">
-            <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
-              <div class="flex nc-form-column-label">
-                <SmartsheetHeaderVirtualCell
-                  v-if="isVirtualCol(field)"
-                  :column="{ ...field, title: field.label || field.title }"
-                  :required="isRequired(field, field.required)"
-                  :hide-menu="true"
-                />
-
-                <SmartsheetHeaderCell
-                  v-else
-                  :column="{ ...field, title: field.label || field.title }"
-                  :required="isRequired(field, field.required)"
-                  :hide-menu="true"
-                />
+        </template>
+
+        <template v-else-if="sharedFormView">
+          <div class="nc-form-wrapper">
+            <div class="nc-form h-full max-w-3/4 mx-auto">
+              <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
+                <div class="flex nc-form-column-label">
+                  <SmartsheetHeaderVirtualCell
+                    v-if="isVirtualCol(field)"
+                    :column="{ ...field, title: field.label || field.title }"
+                    :required="isRequired(field, field.required)"
+                    :hide-menu="true"
+                  />
+
+                  <SmartsheetHeaderCell
+                    v-else
+                    :column="{ ...field, title: field.label || field.title }"
+                    :required="isRequired(field, field.required)"
+                    :hide-menu="true"
+                  />
+                </div>
+
+                <div v-if="isVirtualCol(field)" class="mt-0">
+                  <SmartsheetVirtualCell
+                    class="mt-0 nc-input"
+                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                    :column="field"
+                  />
+
+                  <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+                  <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
+                    <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
+                      {{ error.$message }}
+                    </div>
+                  </template>
+                </div>
+
+                <div v-else class="mt-0">
+                  <SmartsheetCell
+                    v-model="formState[field.title]"
+                    class="nc-input"
+                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                    :column="field"
+                    :edit-enabled="true"
+                  />
+
+                  <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+                  <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
+                    <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
+                      {{ error.$message }}
+                    </div>
+                  </template>
+                </div>
               </div>
 
-              <div v-if="isVirtualCol(field)" class="mt-0">
-                <SmartsheetVirtualCell
-                  class="mt-0 nc-input"
-                  :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                  :column="field"
-                />
-
-                <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-                <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
-                  <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
-                    {{ error.$message }}
-                  </div>
-                </template>
-              </div>
-
-              <div v-else class="mt-0">
-                <SmartsheetCell
-                  v-model="formState[field.title]"
-                  class="nc-input"
-                  :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                  :column="field"
-                  :edit-enabled="true"
-                />
-
-                <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-                <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
-                  <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
-                    {{ error.$message }}
-                  </div>
-                </template>
+              <div class="text-center my-9">
+                <button type="submit" class="submit" @click="submitForm">
+                  {{ $t('general.submit') }}
+                </button>
               </div>
             </div>
-
-            <div class="text-center my-9">
-              <button type="submit" class="submit" @click="submitForm">
-                {{ $t('general.submit') }}
-              </button>
-            </div>
           </div>
-        </div>
+        </template>
       </template>
 
       <a-modal
diff --git a/packages/nc-gui/pages/index/index.vue b/packages/nc-gui/pages/index/index.vue
index 43259c2547..94745d09f3 100644
--- a/packages/nc-gui/pages/index/index.vue
+++ b/packages/nc-gui/pages/index/index.vue
@@ -22,11 +22,11 @@ const route = useRoute()
       <div class="flex flex-1 justify-between gap-6 lg:block">
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
-            <div>
+            <div key="social-card">
               <GeneralSocialCard />
             </div>
 
-            <div class="block mt-0 lg:(!mt-6) xl:hidden">
+            <div key="sponsors" class="block mt-0 lg:(!mt-6) xl:hidden">
               <GeneralSponsors />
             </div>
           </TransitionGroup>
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index d62b06858e..9464c2ca6e 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -57,7 +57,7 @@ onMounted(async () => {
     setTimeout(() => {
       const input = form.value?.$el?.querySelector('input[type=text]')
 
-      input.setSelectionRange(0, formState.title.length)
+      input.setSelectionRange(0, formState.title?.length)
 
       input.focus()
     }, 500)
@@ -95,7 +95,7 @@ onMounted(async () => {
       </a-form-item>
 
       <div class="text-center">
-        <button v-t="['a:project:edit:rename']" type="submit" class="submit">
+        <button v-e="['a:project:edit:rename']" type="submit" class="submit">
           <span class="flex items-center gap-2">
             <MaterialSymbolsRocketLaunchOutline />
             {{ $t('general.edit') }}
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 929ab0fd44..c10462266e 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -119,7 +119,7 @@ const getProjectPrimary = (project: ProjectType) => {
           :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
         >
           <MdiRefresh
-            v-t="['a:project:refresh']"
+            v-e="['a:project:refresh']"
             class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
             :class="isLoading ? '!text-primary' : ''"
             @click="loadProjects"
@@ -149,7 +149,7 @@ const getProjectPrimary = (project: ProjectType) => {
           <a-menu class="!py-0 rounded">
             <a-menu-item>
               <div
-                v-t="['c:project:create:xcdb']"
+                v-e="['c:project:create:xcdb']"
                 class="nc-project-menu-item group nc-create-xc-db-project"
                 @click="navigateTo('/create')"
               >
@@ -161,7 +161,7 @@ const getProjectPrimary = (project: ProjectType) => {
 
             <a-menu-item>
               <div
-                v-t="['c:project:create:extdb']"
+                v-e="['c:project:create:extdb']"
                 class="nc-project-menu-item group nc-create-external-db-project"
                 @click="navigateTo('/create-external')"
               >
@@ -176,18 +176,18 @@ const getProjectPrimary = (project: ProjectType) => {
     </div>
 
     <TransitionGroup name="layout" mode="out-in">
-      <div v-if="isLoading">
+      <div v-if="isLoading" key="skeleton">
         <a-skeleton />
       </div>
 
       <a-table
         v-else
+        key="table"
         :custom-row="
           (record) => ({
             onClick: () => {
-              $e('a:project:open')
-
               navigateTo(`/nc/${record.id}`)
+              $e('a:project:open')
             },
             class: ['group'],
           })
@@ -198,6 +198,7 @@ const getProjectPrimary = (project: ProjectType) => {
         <template #emptyText>
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </template>
+
         <!-- Title -->
         <a-table-column key="title" :title="$t('general.title')" data-index="title">
           <template #default="{ text, record }">
@@ -252,7 +253,7 @@ const getProjectPrimary = (project: ProjectType) => {
         <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
           <template #default="{ text, record }">
             <div class="flex items-center gap-2">
-              <MdiEditOutline v-t="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
+              <MdiEditOutline v-e="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
 
               <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
             </div>
diff --git a/packages/nc-gui/plugins/tele.ts b/packages/nc-gui/plugins/tele.ts
index 18d03a57c0..4970f32bd1 100644
--- a/packages/nc-gui/plugins/tele.ts
+++ b/packages/nc-gui/plugins/tele.ts
@@ -63,7 +63,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     },
   }
 
-  nuxtApp.vueApp.directive('t', {
+  nuxtApp.vueApp.directive('e', {
     created(el, binding, vnode) {
       if (vnode.el) vnode.el.addEventListener('click', getListener(binding))
       else el.addEventListener('click', getListener(binding))
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 2b3f0daa0f..aff29794a7 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -13,7 +13,7 @@ import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
 import MdiFlag from '~icons/mdi/flag'
 import MdiFlagOutline from '~icons/mdi/flag-outline'
 
-export const getMdiIcon = (type: string) => {
+export const getMdiIcon = (type: string): any => {
   switch (type) {
     case 'mdi-check-bold':
       return MdiCheckBold
diff --git a/packages/nc-gui/utils/viewUtils.ts b/packages/nc-gui/utils/viewUtils.ts
index eafaddf70f..7c81513b7c 100644
--- a/packages/nc-gui/utils/viewUtils.ts
+++ b/packages/nc-gui/utils/viewUtils.ts
@@ -18,7 +18,7 @@ export const viewIcons = {
 }
 
 export const viewTypeAlias = {
-  [ViewTypes.GRID as any]: 'grid',
-  [ViewTypes.FORM as any]: 'form',
-  [ViewTypes.GALLERY as any]: 'gallery',
+  [ViewTypes.GRID]: 'grid',
+  [ViewTypes.FORM]: 'form',
+  [ViewTypes.GALLERY]: 'gallery',
 }
diff --git a/packages/nc-gui/web-types.json b/packages/nc-gui/web-types.json
new file mode 100644
index 0000000000..701777a464
--- /dev/null
+++ b/packages/nc-gui/web-types.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/v2-preview/web-types.json",
+  "name": "nc-gui",
+  "framework": "vue",
+  "version": "1.0.0",
+  "contributions": {
+    "html": {
+      "vue-directives": [
+        {
+          "name": "e",
+          "description": "Telemetry directive"
+        },
+        {
+          "name": "t",
+          "description": "I18n directive"
+        }
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/noco-docs/content/en/developer-resources/accessing-apis.md b/packages/noco-docs/content/en/developer-resources/accessing-apis.md
index 15c8565c04..701821504f 100644
--- a/packages/noco-docs/content/en/developer-resources/accessing-apis.md
+++ b/packages/noco-docs/content/en/developer-resources/accessing-apis.md
@@ -13,36 +13,44 @@ NocoDB APIs can be authorized by either Auth Token or API Token.
 Auth Token is a JWT Token generated based on the logged-in user. By default, the token is only valid for 10 hours. However, you can change the value by defining it using environment variable `NC_JWT_EXPIRES_IN`. If you are passing Auth Token, make sure that the header is called `xc-auth`.
 
 - Go to NocoDB Project, click the rightmost button and click ``Copy Auth Token``.
-
-<img width="219" alt="image" src="https://user-images.githubusercontent.com/35857179/164874424-7622112f-9729-4514-81d2-5c6631b19ed0.png">
+    
+![Screenshot 2022-09-14 at 10 18 58 AM](https://user-images.githubusercontent.com/86527202/190062565-34ec5f49-b2a9-4ccb-a02f-8ea60980ffd9.png)
+<!-- <img width="219" alt="image" src="https://user-images.githubusercontent.com/35857179/164874424-7622112f-9729-4514-81d2-5c6631b19ed0.png"> -->
 
 ## API Token
 
 NocoDB allows creating API tokens which allow it to be integrated seamlessly with 3rd party apps. API Token is a Nano ID with a length of 40. If you are passing API Token, make sure that the header is called `xc-token`.
 
 
-- Go to `Team & Settings` from the left navigation drawer
-    ![image](https://user-images.githubusercontent.com/35857179/161902474-fd06678c-a171-4237-b171-dc028b3753de.png)
+- Open `Project Menu`, click on `Team & Settings`
+  
+<img width="390" alt="image" src="https://user-images.githubusercontent.com/35857179/189115289-07657c15-deab-435f-b0f9-2948007f8c65.png">
+<!--     ![image](https://user-images.githubusercontent.com/35857179/161902474-fd06678c-a171-4237-b171-dc028b3753de.png) -->
 
-- Click `API Tokens Management`
-    ![image](https://user-images.githubusercontent.com/35857179/161958345-83cb60bf-80f1-4d11-9e9c-52d0b05c7677.png)
+- Click `API Tokens Management` tab under `Team & Auth` section
+<!--     ![image](https://user-images.githubusercontent.com/35857179/161958345-83cb60bf-80f1-4d11-9e9c-52d0b05c7677.png) -->
 
 - Click Add New Token
-    ![image](https://user-images.githubusercontent.com/35857179/161958563-dc5d380a-26c5-4b78-9d4b-e40188bef05a.png)
+  
+![Screenshot 2022-09-14 at 10 20 00 AM](https://user-images.githubusercontent.com/86527202/190062728-9c09934f-b5e4-4fec-b4d2-0cd3648bbb39.png)
+<!--     ![image](https://user-images.githubusercontent.com/35857179/161958563-dc5d380a-26c5-4b78-9d4b-e40188bef05a.png) -->
 
 - Type an recognizable name for your token and click `Generate`
-    ![image](https://user-images.githubusercontent.com/35857179/161958676-e4faa321-13ca-4b11-8d22-1332c522dde7.png)
+  
+![Screenshot 2022-09-14 at 10 20 10 AM](https://user-images.githubusercontent.com/86527202/190062801-db3fab83-7974-4dfe-9c83-bf0d8a7dba1e.png)
+<!--     ![image](https://user-images.githubusercontent.com/35857179/161958676-e4faa321-13ca-4b11-8d22-1332c522dde7.png) -->
 
-- Copy API token to your clipboard
-    ![image](https://user-images.githubusercontent.com/35857179/161958822-b0689a6a-a864-429f-8bb2-71eb92808339.png)
+- Copy API token to your clipboard; use action menu to the right of token list
+<!--     ![image](https://user-images.githubusercontent.com/35857179/161958822-b0689a6a-a864-429f-8bb2-71eb92808339.png) -->
 
 ## Swagger UI
 
 You can interact with the API's resources via Swagger UI.
 
 - Go to NocoDB Project, click the rightmost button and click  ``Swagger APIs Doc``.
-
-<img width="215" alt="image" src="https://user-images.githubusercontent.com/35857179/164874429-d8e8f129-9cca-4d47-92c4-0b34b6e0b922.png">
+  
+![Screenshot 2022-09-14 at 10 22 00 AM](https://user-images.githubusercontent.com/86527202/190062896-c1c2d529-694f-46ad-b6b1-0ee8d71a6e14.png)
+<!-- <img width="215" alt="image" src="https://user-images.githubusercontent.com/35857179/164874429-d8e8f129-9cca-4d47-92c4-0b34b6e0b922.png"> -->
 
 - Click ``Authorize``, paste the token you copied in above steps and click `Authorize` to save.
 
diff --git a/packages/noco-docs/content/en/developer-resources/webhooks.md b/packages/noco-docs/content/en/developer-resources/webhooks.md
index d95e1bf68d..228a077807 100644
--- a/packages/noco-docs/content/en/developer-resources/webhooks.md
+++ b/packages/noco-docs/content/en/developer-resources/webhooks.md
@@ -10,17 +10,31 @@ menuTitle: "Webhooks"
 
 Some types of notifications can be triggered by a webhook after a particular event.
 
-- Open a Project, Select a table and Click 'More' > 'Webhooks'.
-
-![Screenshot 2022-02-22 at 11 16 18 AM](https://user-images.githubusercontent.com/86527202/155085373-f9b438ed-98c3-4fb1-9209-1bb52736a35d.png)
+### Open `View menu`, click on `Webhooks`
+  
+![Screenshot 2022-09-14 at 10 32 13 AM](https://user-images.githubusercontent.com/86527202/190064555-77d2444e-250e-4c26-bf65-4bccde166c25.png)
 
-- Click 'Create webhook'
+<!-- ![Screenshot 2022-02-22 at 11 16 18 AM](https://user-images.githubusercontent.com/86527202/155085373-f9b438ed-98c3-4fb1-9209-1bb52736a35d.png) -->
 
-![image](https://user-images.githubusercontent.com/35857179/166660074-0a896ec9-9cd8-403e-a713-61c2cefbae28.png)
+### Click `Add new webhook`
+  
+![Screenshot 2022-09-14 at 10 33 15 AM](https://user-images.githubusercontent.com/86527202/190064639-c51038bc-cfd0-4f5a-aece-3bade55ae994.png)
+
+<!-- ![image](https://user-images.githubusercontent.com/35857179/166660074-0a896ec9-9cd8-403e-a713-61c2cefbae28.png) -->
+
+### Configure Webhook
+  - General configurations
+    - Webhook Name
+    - Webhook Trigger
+    - Webhook Type
+  - Webhook Type specific configuration : additional configuration details depending on webhook type selected
+  - Webhook Conditional Trigger
+    - Only records meeting the criteria will trigger webhook   
+  
+![Screenshot 2022-09-14 at 10 35 39 AM](https://user-images.githubusercontent.com/86527202/190064668-37245025-81f6-491c-b639-83c8fd131bc3.png)
 
-- Configure the webhook
 
-![image](https://user-images.githubusercontent.com/35857179/166660248-a3c81a34-4334-48c2-846a-65759d761559.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/166660248-a3c81a34-4334-48c2-846a-65759d761559.png) -->
 
 
 ## Triggers
@@ -96,13 +110,15 @@ Detailed procedure for discord webhook described [here](https://support.discord.
 ### 2. Install Plugin
 
 -   Open 'App Store' (under Settings), hover over Discord tile. Click 'Install'.
-
-![Screenshot 2022-02-22 at 11 30 36 AM](https://user-images.githubusercontent.com/86527202/155085257-5bdde1d9-d7b5-471d-bf44-3c3920e7b853.png)
+  
+![Screenshot 2022-09-14 at 10 47 59 AM](https://user-images.githubusercontent.com/86527202/190066333-04bab4eb-f114-48e5-b3f9-6327cadb1ca7.png)
+<!-- ![Screenshot 2022-02-22 at 11 30 36 AM](https://user-images.githubusercontent.com/86527202/155085257-5bdde1d9-d7b5-471d-bf44-3c3920e7b853.png) -->
 
 -   Provide a name of your choice (not to be confused with Discord Channel name).
 -   Paste Discord Webhook URL copied from Step (1.) above.
-
-![Screenshot 2022-02-22 at 11 31 21 AM](https://user-images.githubusercontent.com/86527202/155085287-f5e45aab-fd33-4138-a7a9-6eddc6dc140b.png)
+  
+![Screenshot 2022-09-14 at 10 52 14 AM](https://user-images.githubusercontent.com/86527202/190066365-90e3136b-db24-4514-aa89-c1fb371b33ee.png)
+<!-- ![Screenshot 2022-02-22 at 11 31 21 AM](https://user-images.githubusercontent.com/86527202/155085287-f5e45aab-fd33-4138-a7a9-6eddc6dc140b.png) -->
 
 ### 3. Configure 
 
@@ -154,14 +170,18 @@ Detailed procedure for discord webhook described [here](https://support.discord.
 ### 2. Install Plugin
 
 -   Open 'App Store' (under Settings), hover over 'Microsoft Teams' tile. Click 'Install'.
+  
+![Screenshot 2022-09-14 at 10 53 22 AM](https://user-images.githubusercontent.com/86527202/190066409-03311add-3b36-4521-acf7-dba5ffdef3fb.png)
 
-![Screenshot 2022-02-22 at 7 32 52 PM](https://user-images.githubusercontent.com/86527202/155148122-60844b42-7d2a-4c0f-9778-a5bc4f9c0107.png)
+<!-- ![Screenshot 2022-02-22 at 7 32 52 PM](https://user-images.githubusercontent.com/86527202/155148122-60844b42-7d2a-4c0f-9778-a5bc4f9c0107.png) -->
 
 
 -   Provide a name of your choice (not to be confused with Teams Channel name).
 -   Paste MS Teams Webhook URL copied from Step (1.) above.
+  
+![Screenshot 2022-09-14 at 10 53 31 AM](https://user-images.githubusercontent.com/86527202/190066430-838eaa69-ac2c-49ce-a0eb-d84c97964f8b.png)
 
-<img width="414" alt="154971222-7fe2c25a-d8c6-46b0-ba1e-a05ff1cf6537" src="https://user-images.githubusercontent.com/86527202/155095720-ff1c052c-a4a7-4c10-8f30-d779dac336f3.png">
+<!-- <img width="414" alt="154971222-7fe2c25a-d8c6-46b0-ba1e-a05ff1cf6537" src="https://user-images.githubusercontent.com/86527202/155095720-ff1c052c-a4a7-4c10-8f30-d779dac336f3.png"> -->
 
 ### 3. Configure 
 
diff --git a/packages/noco-docs/content/en/engineering/development-setup.md b/packages/noco-docs/content/en/engineering/development-setup.md
index 9181659407..034233546e 100644
--- a/packages/noco-docs/content/en/engineering/development-setup.md
+++ b/packages/noco-docs/content/en/engineering/development-setup.md
@@ -1,6 +1,6 @@
 ---
 title: "Development setup"
-description: "How to setup your development environment"
+description: "How to set-up your development environment"
 position: 3200
 category: "Engineering"
 menuTitle: "Development setup"
@@ -39,19 +39,130 @@ npm run dev
 Any changes made to frontend and backend will be automatically reflected in the browser.
 
 ### Cypress
+Cypress tests are divided into 4 suites
+- SQLite tests
+- Postgres tests
+- MySQL tests
+- Quick import tests
 
+First 3 suites, each have 4 test category
+- Table operations (create, delete, rename, add column, delete column, rename column)
+- Views (Grid, Gallery, Form)
+- Roles (user profiles, access control & preview)
+- Miscellaneous (Import, i18n, etc)
+
+
+#### MySQL tests (ExtDB project)
+```shell
+# install dependencies(cypress)
+npm install
+# start MySQL database using docker compose
+docker-compose -f ./scripts/docker-compose-cypress.yml up
+
+# Run backend api using following command
+npm run start:api:cache
+# Run frontend web UI using following command
+npm run start:web
+
+# wait until both 3000 and 8080 ports are available
+# or run following command to run it with GUI
+npm run cypress:open
+
+# run one of 4 test scripts
+- Table operations : restTableOps.js
+- Views : restViews.js
+- Roles & access control : restRoles.js
+- Miscellaneous : restMisc.js
+```
+
+#### SQLite tests (XCDB project)
+```shell
+# install dependencies(cypress)
+npm install
+# start MySQL database using docker compose
+docker-compose -f ./scripts/docker-compose-cypress.yml up
+
+# Run backend api using following command
+npm run start:xcdb-api:cache
+# Run frontend web UI using following command
+npm run start:web
+
+# wait until both 3000 and 8080 ports are available
+# or run following command to run it with GUI
+npm run cypress:open
+
+# run one of 4 test scripts
+- Table operations : xcdb-restTableOps.js
+- Views : xcdb-restViews.js
+- Roles & access control : xcdb-restRoles.js
+- Miscellaneous : xcdb-restMisc.js
+```
+
+#### PG tests (ExtDB project)
+```shell
+# install dependencies(cypress)
+npm install
+# start PG database using docker compose
+docker-compose -f ./scripts/cypress/docker-compose-pg.yml up -d
+
+# Run backend api using following command
+npm run start:api:cache
+# Run frontend web UI using following command
+npm run start:web
+
+# wait until both 3000 and 8080 ports are available
+# or run following command to run it with GUI
+npm run cypress:open
+
+# run one of 4 test scripts
+- Table operations : pg-restTableOps.js
+- Views : pg-restViews.js
+- Roles & access control : pg-restRoles.js
+- Miscellaneous : pg-restMisc.js
+```
+
+#### Quick import tests (SQLite project)
 ```shell
 # install dependencies(cypress)
 npm install
-# run mysql database with required database using docker compose
+# start MySQL database using docker compose
 docker-compose -f ./scripts/docker-compose-cypress.yml up
+
+# copy existing xcdb (v0.91.7) database to ./packages/nocodb/
+cp ./scripts/cypress/fixtures/quickTest/noco_0_91_7.db ./packages/nocodb/noco.db
+
 # Run backend api using following command
-npm run start:api
+npm run start:api:cache
 # Run frontend web UI using following command
 npm run start:web
+
 # wait until both 3000 and 8080 ports are available
-# and run cypress test using following command
-npm run cypress:run
 # or run following command to run it with GUI
 npm run cypress:open
-```
\ No newline at end of file
+
+# run test script
+- quickTest.js
+```
+
+#### Quick import tests (PG)
+```shell
+# install dependencies(cypress)
+npm install
+# start PG database using docker compose
+docker-compose -f ./scripts/cypress/docker-compose-pg.yml up -d
+
+# copy existing xcdb (v0.91.7) database to ./packages/nocodb/
+cp ./scripts/cypress/fixtures/quickTest/noco_0_91_7.db ./packages/nocodb/noco.db
+
+# Run backend api using following command
+npm run start:api:cache
+# Run frontend web UI using following command
+npm run start:web
+
+# wait until both 3000 and 8080 ports are available
+# or run following command to run it with GUI
+npm run cypress:open
+
+# run test script
+- quickTest.js
+```
diff --git a/packages/noco-docs/content/en/engineering/translation.md b/packages/noco-docs/content/en/engineering/translation.md
index 86909e77c4..e88c5be891 100644
--- a/packages/noco-docs/content/en/engineering/translation.md
+++ b/packages/noco-docs/content/en/engineering/translation.md
@@ -6,48 +6,81 @@ category: "Engineering"
 menuTitle: "i18n translation"
 ---
 
-NocoDB supports many foreign languages & we welcome community contributions via an easy to use [google-spreadsheet](https://docs.google.com/spreadsheets/d/1kGp92yLwhs1l7lwwgeor3oN1dFl7JZWuQOa4WSeZ0TE/edit#gid=2076107172).
+NocoDB supports many foreign languages & community contributions are now simplified via [Crowdin](https://crowdin.com/)
 Your help in fixing i18n goes a long way supporting NocoDB. Please follow below simple procedure to request corrections to existing translation errors.
 
-## How to contribute ? (for community members)
+# Public Contributions
 
-### 1. How to change a string value ?
-- Make a copy of [Google spreadsheet](https://docs.google.com/spreadsheets/d/1kGp92yLwhs1l7lwwgeor3oN1dFl7JZWuQOa4WSeZ0TE/edit#gid=2076107172)
-  <img width="995" alt="Screenshot 2022-02-10 at 1 47 06 PM" src="https://user-images.githubusercontent.com/86527202/153368423-d1d898ef-bdcb-48c4-a772-b75e2c66566d.png">
-- Find your language code [here](https://developers.google.com/admin-sdk/directory/v1/languages)
-- Go to the column containing your language code. Make necessary changes. Origin text in ENGLISH can be found in `Column B` of master spreadsheet.
-- Create a new [issue in Github](https://github.com/nocodb/nocodb/issues/new?assignees=dstala&labels=i18n+translation&template=i18n-translation-request.md&title=%5Bi18n%5D+Language+support+extension-+%3Clanguage+code%3E) request with a link to your spreadsheet from Step-1 (for us to verify & update master spreadsheet). 
-- NocoDB Maintainers will take changes and merge it.
-- It's that simple!
+### 1. How to add translation corrections (to existing languages)?
 
+- Setup [Crowdin](https://crowdin.com) account
+- Join [NocoDB](https://crowdin.com/project/nocodb) project
+  
+![Screenshot 2022-09-08 at 10 26 23 PM](https://user-images.githubusercontent.com/86527202/189181511-51b8671e-bee8-45d5-8216-a4a031bc6309.png)
 
+- Click the language that you wish to contribute
+  
+![Screenshot 2022-09-08 at 10 29 56 PM](https://user-images.githubusercontent.com/86527202/189182132-0eed7d5a-eaa1-43e1-929d-688f375763c1.png)
 
+- Click the `Translate` button; this opens up `Crowdin Online Editor`
+  
+![Screenshot 2022-09-08 at 10 32 17 PM](https://user-images.githubusercontent.com/86527202/189182450-999124e8-566c-40af-9d3c-731a11c1b6aa.png)
 
-### 2. How to add a new language ?
+- Select string in `English` on the left-hand menu bar [1]
+- Propose changes [2]
+- Save [3]
+Note: Crowdin provides translation recommendation's as in [4]. Click directly if it's apt
+  
+![Screenshot 2022-09-08 at 10 37 38 PM](https://user-images.githubusercontent.com/86527202/189184278-69d688ed-4e5a-4d5a-b629-9f6d10d79346.png)
+
+A GitHub Pull Request will be automatically triggered (periodicity- 6 hours). We will follup on remaining integration work items.
+
+---
+
+
+#### Reference
+  
+Refer following articles to get additional details about Crowdin Portal usage
+- [Translator Introduction](https://support.crowdin.com/crowdin-intro/)
+- [Volunteer Translation Introduction](https://support.crowdin.com/for-volunteer-translators/)
+- [Online Editor](https://support.crowdin.com/online-editor/) 
 
-Your native language not in list, we will be glad to support with your help! Please follow below steps
+---
+
+
+### 2. How to add a new language ?
+  
+Your native language not in list, we will be glad to support with your help! Request for it [here](https://github.com/nocodb/nocodb/issues/new?assignees=dstala&labels=i18n+translation&template=i18n-translation-request.md&title=%5Bi18n%5D+Language+support+extension-+%3Clanguage+code%3E). We will be glad to take your help to set up translations
 
-- Make a copy of [Google spreadsheet](https://docs.google.com/spreadsheets/d/1kGp92yLwhs1l7lwwgeor3oN1dFl7JZWuQOa4WSeZ0TE/edit#gid=2076107172)
-  <img width="995" alt="Screenshot 2022-02-10 at 1 47 06 PM" src="https://user-images.githubusercontent.com/86527202/153368423-d1d898ef-bdcb-48c4-a772-b75e2c66566d.png">
-- Find your language code [here](https://developers.google.com/admin-sdk/directory/v1/languages)
-- Replace cell $AB$1 (rightmost, containing text `en`) with language code obtained above.
-- Google will generate first version translation in column AB. Review. Make changes as you find appropriate for various items listed. Origin text in ENGLISH can be found in `Column B` of master spreadsheet.
-- Create new [issue](https://github.com/nocodb/nocodb/issues/new?assignees=dstala&labels=i18n+translation&template=i18n-translation-request.md&title=%5Bi18n%5D+Language+support+extension-+%3Clanguage+code%3E) request with a link to your spreadsheet from Step-1 (for us to verify & update master spreadsheet).
 
 ---
 
-## How to accept i18n contributions ? (for NocoDB maintainers)
+# Engineering Contributions (for NocoDB developers & maintainers)
 
-> _This is exclusive to NocoDB maintainers only_
+> _This is exclusive to NocoDB developers & maintainers only_
 
 ### 1. Adding / Updating a string
-- Open master [Spreadsheet](https://docs.google.com/spreadsheets/d/1kGp92yLwhs1l7lwwgeor3oN1dFl7JZWuQOa4WSeZ0TE/edit#gid=2076107172)
-- For the string/ text under consideration, look-up in existing sheet if it exists already
-- [New string already exists] Consider re-using it; align string key if required
-- [New string need to be inserted] Insert a new record into appropriate categories as defined below
-- Download spreadsheet as .csv (File > Download > Comma-seperated values (.csv, current sheet)
-- Use noco-i18n-from-cli to generate new language JSON file
-- Copy respective i18n/\*.json files to `nocodb/packages/nc-gui/lang`
+### Add / update key-value
+  - [en] make changes directly to `en.json` & commit to `develop`
+  - [any other language] add changes using `crowdin` portal; procedure described below
+
+### Add a new language
+#### GitHub changes
+- Update enumeration in `enums.ts` [packages/nc-gui/lib/enums.ts]
+- Map JSON path in `a.i18n.ts` [packages/nc-gui/plugins/a.i18n.ts]
+- Update array in `6d_language_validation.js` [scripts/cypress/integration/common/6d_language_validation.js]
+#### Crowdin changes [admin only]
+- Open `NocoDB` project
+- Click on `Language` on the home tab
+- Select target language, `Update`
+  
+  
+![Screenshot 2022-09-08 at 10 52 59 PM](https://user-images.githubusercontent.com/86527202/189186570-5c1c7cad-6d3f-4937-ab4d-fa7ebe022cb1.png)
+  
+  
+![Screenshot 2022-09-08 at 10 54 04 PM](https://user-images.githubusercontent.com/86527202/189186632-0b9f5f55-0550-4d8f-a8ae-7e9b9076774e.png)
+  
+---
 
 ### 2. String Categories
 -   **General**: simple & common tokens (save, cancel, submit, open, close, home, and such)
diff --git a/packages/noco-docs/content/en/index.md b/packages/noco-docs/content/en/index.md
index 42dc8cb9c6..860cb5d1cd 100644
--- a/packages/noco-docs/content/en/index.md
+++ b/packages/noco-docs/content/en/index.md
@@ -58,6 +58,6 @@ Most internet businesses equip themselves with either spreadsheet or a database
 ## Our Mission
 Our mission is to provide the most powerful no-code interface for databases which is open source to every single internet business in the world. This would not only democratise access to a powerful computing tool but also bring forth a billion+ people who will have radical tinkering-and-building abilities on internet. 
 
-# How can I contribute to NocoDB's development ?
+## How can I contribute to NocoDB's development ?
 
 Please refer to [here](https://github.com/nocodb/nocodb/blob/develop/.github/CONTRIBUTING.md) for the contribution guidelines.
\ No newline at end of file
diff --git a/packages/noco-docs/content/en/setup-and-usages/audit.md b/packages/noco-docs/content/en/setup-and-usages/audit.md
index 39b513c6c3..6d62edc44f 100644
--- a/packages/noco-docs/content/en/setup-and-usages/audit.md
+++ b/packages/noco-docs/content/en/setup-and-usages/audit.md
@@ -6,10 +6,10 @@ category: 'Product'
 menuTitle: 'Audit'
 ---
 
-We are keeping all the user operation logs under Audit. Audits logs can be accessed by clicking `Team & Settings` from the left navigation drawer.
+We are keeping all the user operation logs under Audit. To access it, click the down arrow button next to Project Name on the top left side, then select `Team & Settings`.
 
-<img width="367" alt="image" src="https://user-images.githubusercontent.com/35857179/170426881-ba645392-24a2-4446-b501-0595a0887724.png">
+<img width="390" alt="image" src="https://user-images.githubusercontent.com/35857179/189115289-07657c15-deab-435f-b0f9-2948007f8c65.png">
 
 Then, under SETTINGS, click `Audit`.
 
-<img width="1335" alt="image" src="https://user-images.githubusercontent.com/35857179/170428570-627a3763-26ae-4b8f-b5a8-0b8b42638464.png">
+<img width="1498" alt="image" src="https://user-images.githubusercontent.com/35857179/189115759-ac1664be-906a-4f36-973b-ed67f39d55a3.png">
\ No newline at end of file
diff --git a/packages/noco-docs/content/en/setup-and-usages/code-snippets.md b/packages/noco-docs/content/en/setup-and-usages/code-snippets.md
index 479f98b6b5..00e4172caf 100644
--- a/packages/noco-docs/content/en/setup-and-usages/code-snippets.md
+++ b/packages/noco-docs/content/en/setup-and-usages/code-snippets.md
@@ -8,14 +8,13 @@ menuTitle: 'Code Snippets'
 
 ## Overview
 
-Open a Project, Select a Table and Click `Get API Snippet` on the bottom right area. 
+In the table toolbar, click Table name button and click `Get API Snippet`.
 
-<img width="1335" alt="image" src="https://user-images.githubusercontent.com/35857179/166663362-43ffe3cc-1053-4bf6-a65e-e4b8bae69fcb.png">
+<img width="468" alt="image" src="https://user-images.githubusercontent.com/35857179/189104172-4f7f6b6d-cae1-431e-8a7a-26127cf8a791.png">
 
 A modal box will be shown with sample code snippet for List API.
 
-![image](https://user-images.githubusercontent.com/35857179/166663478-3f802012-7bdc-4265-9ffe-6e51c4bcf4cd.png)
-
+<img width="1498" alt="image" src="https://user-images.githubusercontent.com/35857179/189104418-cfa38ec0-ee91-4e72-83e1-6e28ab0311d1.png">
 
 ## Supported Snippet
 
diff --git a/packages/noco-docs/content/en/setup-and-usages/column-operations.md b/packages/noco-docs/content/en/setup-and-usages/column-operations.md
index 1895daaee8..843001954d 100644
--- a/packages/noco-docs/content/en/setup-and-usages/column-operations.md
+++ b/packages/noco-docs/content/en/setup-and-usages/column-operations.md
@@ -8,20 +8,26 @@ menuTitle: "Column Operations"
 
 ## Fields
 
-<img src="https://user-images.githubusercontent.com/86527202/144435795-7156799c-04de-474d-9125-1b15e07acc3d.png" width="60%"/>
+Click `Fields` to control the visibility of a field.
+
+<img width="1262" alt="image" src="https://user-images.githubusercontent.com/35857179/189098625-8b4930e7-9bb4-4e8f-aa44-d2a28a31abdb.png">
+
+By default, all system fields will be hid. However, you can tick `Show system fields` to make them visible.
+
+<img width="1268" alt="image" src="https://user-images.githubusercontent.com/35857179/189098684-4fe2ebfc-df00-40fc-8f3c-1d4d14a8fb23.png">
 
 ### Re-order Columns  
 
 Column positions can be re-ordered. Open `Fields` menu, and re-order fields as needed by dragging and dropping the `drag icon`.
 
-<img src="https://user-images.githubusercontent.com/86527202/144435838-8cff72eb-eaa2-4268-9749-213283eb8336.png" width="40%"/>
+<img width="358" alt="image" src="https://user-images.githubusercontent.com/35857179/189100445-d1a3816e-ddc0-4830-ba0a-a7b65597d264.png">
 
-#### Demo
+<!-- #### Demo -->
 
-<img src="https://github.com/dstala/nocodb-files/blob/2c4ca2ff31460ee5636262e88ba303e2d436ba54/ColumnReorder.gif?raw=true" width="100%"/>
+<!-- <img src="https://github.com/dstala/nocodb-files/blob/2c4ca2ff31460ee5636262e88ba303e2d436ba54/ColumnReorder.gif?raw=true" width="100%"/> -->
 <!-- img src="https://media0.giphy.com/media/z5mYR1XoO85Umd5abh/giphy.gif?cid=790b7611f53d7e966bf9de3ae6b1cd5a7d6380b0ab8a4337&rid=giphy.gif&ct=g" width="60%"/ -->
 
-### Hide/ Unhide Columns  
+### Hide / Unhide Columns  
 
 To hide / unhide columns, open `Fields` menu, tick checkbox to keep the column visible, untick checkbox to remove it from the view.
 
@@ -29,11 +35,11 @@ To hide / unhide columns, open `Fields` menu, tick checkbox to keep the column v
 Tip: You can create different grid views with different fields shown in each view.
 </alert>
 
-<img src="https://user-images.githubusercontent.com/86527202/144435852-47f87057-f42f-4691-abbd-9592cde50541.png" width="40%"/>
+<img width="355" alt="image" src="https://user-images.githubusercontent.com/35857179/189100701-125b529b-5578-43ad-a707-e8c1738e788c.png">
 
-#### Demo
+<!-- #### Demo -->
 
-<img src="https://github.com/dstala/nocodb-files/blob/2c4ca2ff31460ee5636262e88ba303e2d436ba54/ColumnHide.gif?raw=true" width="100%"/>
+<!-- <img src="https://github.com/dstala/nocodb-files/blob/2c4ca2ff31460ee5636262e88ba303e2d436ba54/ColumnHide.gif?raw=true" width="100%"/> -->
 <!-- img src="https://media2.giphy.com/media/8NXvWfHDoul72dwLhk/giphy.gif?cid=790b76116fa008b45c79bb91bfe611e324fa38cde21a255a&rid=giphy.gif&ct=g" width="60%"/ -->
 
 ## Sort 
@@ -41,22 +47,29 @@ Tip: You can create different grid views with different fields shown in each vie
 Sorting allows you to order contents alphabetically (A → Z) / (Z → A)  (OR) in ascending / descending order. NocoDB allows nested sorting. You can choose column fields & order in which to apply nested sorting. Lookup, Formula, Nested Data are also supported in Sorting.
   
   
-<img src="https://user-images.githubusercontent.com/86527202/144435903-84ed8e81-64ec-45e5-a045-9a993238c78c.png" width="75%"/>  
+<img width="462" alt="image" src="https://user-images.githubusercontent.com/35857179/189100830-29b164a2-dd63-41f9-987a-09de53e0a0ec.png">
 
-<img src="https://user-images.githubusercontent.com/86527202/144435925-67b995a0-da10-45c9-bf54-9edcc63c5644.png" width="75%"/>  
-  
-#### Demo
+<img width="473" alt="image" src="https://user-images.githubusercontent.com/35857179/189100869-e458814c-ef9b-4d88-8d7c-4e7de0f3b416.png">
+
+<img width="607" alt="image" src="https://user-images.githubusercontent.com/35857179/189100945-f2575174-f0d2-48e5-8b89-2d14baa873e5.png">
 
-<img src="https://github.com/dstala/nocodb-files/blob/2c4ca2ff31460ee5636262e88ba303e2d436ba54/ColumnSort-2.gif?raw=true" width="100%"/>
+
+<!-- #### Demo -->
+
+<!-- <img src="https://github.com/dstala/nocodb-files/blob/2c4ca2ff31460ee5636262e88ba303e2d436ba54/ColumnSort-2.gif?raw=true" width="100%"/> -->
 <!-- img src="https://media4.giphy.com/media/ThQ8d42U2zdFyZGeZe/giphy.gif?cid=790b761183da2eb690295c5c25f83ace7acf5212c82569a1&rid=giphy.gif&ct=g" width="60%"/ -->
 
 ## Filter  
 
-Filters allow you to restrict/organize your data on the view as per your needs. NocoDB allows nested filters. You can choose multiple columns and conditions to apply filter. Between filters, you can opt for either `and` or `or` mode operation. Lookup, Formula, Nested Data are also supported in Filtering.
+Filters allow you to restrict / organize your data on the view as per your needs. NocoDB allows nested filters. You can choose multiple columns and conditions to apply filter. Between filters, you can opt for either `and` or `or` mode operation. Lookup, Formula, Nested Data are also supported in Filtering.
   
-<img src="https://user-images.githubusercontent.com/86527202/144435944-8498be32-76cb-48d1-883a-8f674f2eb68e.png" width="60%"/>
+<img width="1011" alt="image" src="https://user-images.githubusercontent.com/35857179/189102268-706ba965-e332-4c93-b2d2-ea04f0fabf11.png">
+
+<img width="1021" alt="image" src="https://user-images.githubusercontent.com/35857179/189102641-bd4f64b1-21fc-42a0-bbe6-2a019e213eda.png">
+
+You can also group several filters together using Filter Group.
 
-<img src="https://user-images.githubusercontent.com/86527202/144435955-361238d5-ecda-448e-a6de-a47086aeec6e.png" width="75%"/>
+<img width="1025" alt="image" src="https://user-images.githubusercontent.com/35857179/189102932-aa0e31ef-554f-4e8b-ae0e-2024b7f4d35b.png">
 
 ### Supported filters
 
diff --git a/packages/noco-docs/content/en/setup-and-usages/dashboard.md b/packages/noco-docs/content/en/setup-and-usages/dashboard.md
index 21bcbd1aec..7adc4aeaae 100644
--- a/packages/noco-docs/content/en/setup-and-usages/dashboard.md
+++ b/packages/noco-docs/content/en/setup-and-usages/dashboard.md
@@ -8,60 +8,54 @@ menuTitle: 'Dashboard'
 
 ## Setup Your First Super Admin
 
-Once you have started NocoDB, you can visit the dashboard via `example.com/dashboard`.
-
-Click `Let's Begin` button to sign up.
-
-![image](https://user-images.githubusercontent.com/35857179/163138119-be4314f9-22eb-4df6-b0af-b6990c563795.png)
+Once you have started NocoDB, you can visit the dashboard via `example.com`. You will be redirected to `example.com/#/signup`. 
 
 Enter your work email and your password.
 
+<img width="1485" alt="image" src="https://user-images.githubusercontent.com/35857179/189030350-89a4d361-1f0c-495f-bb03-4958dc5eb556.png">
+
 <alert id="password-conditions">
   Your password has at least 8 letters with one uppercase, one number and one special letter
 </alert>
 
-![image](https://user-images.githubusercontent.com/35857179/163138460-59ddd93f-a8ef-4c02-8b7b-037a53cefd77.png)
-
 ## Initialize Your First Project
 
 Once you have logged into NocoDB, you should see `My Projects`.
 
-![image](https://user-images.githubusercontent.com/35857179/163135335-652470ee-f69e-4b12-8884-63e8056bfce3.png)
+<img width="1482" alt="image" src="https://user-images.githubusercontent.com/35857179/189045961-0801accb-e07f-42cd-b679-cab5c3cab8a6.png">
 
-To create a project, you can click `New Project`.  
+To create a project, you can click `New Project`. You can choose create an empty project or a project connecting to an external database.
     
-![image](https://user-images.githubusercontent.com/35857179/167252813-84876756-f6a1-488a-a185-cbb09f163c5b.png)
+<img width="1497" alt="image" src="https://user-images.githubusercontent.com/35857179/189046071-113c424f-c908-4bb6-99f1-a4447337f1fc.png">
 
 ### Creating Empty Project
 
-Click `Create`, you need to specify the project name and API type. 
+Click `Create Project`, you need to specify the project name. The data will be stored in `NC_DB`. If it is not specified, a local SQLite will be created and used.
 
 <alert>
-A local SQLite will be used.
+NC_DB is an environment variable used to store the meta data in the given database.
 </alert>
 
-![image](https://user-images.githubusercontent.com/35857179/163135608-5e135a73-afcd-40bb-9d26-f2970dab7143.png)
+<img width="1499" alt="image" src="https://user-images.githubusercontent.com/35857179/189047000-e2f9cf80-fe85-4a79-9e34-76b8a28d66ec.png">
 
 ### Connecting to External Database
 
 Click `Create By Connecting To An External Database`, you need to specify the project name, API type, and other database parameters.
 
 <alert type="success">
-Tip 1: If you are running NocoDB on Docker and your local DB is running on your host machine, your Host Address would be host.docker.internal instead of localhost.
+Tip: If you are running NocoDB on Docker and your local DB is running on your host machine, your Host Address would be host.docker.internal instead of localhost.
 </alert>
 
-![image](https://user-images.githubusercontent.com/35857179/163135736-d209061e-893d-4441-aaaa-ff22a1c82ceb.png)
+<img width="1500" alt="image" src="https://user-images.githubusercontent.com/35857179/189047070-7600d2f9-bec5-47ed-948e-c6da46202e9c.png">
 
 Currently it supports MySQL, Postgres, MSSQL and SQLite.
 
-![image](https://user-images.githubusercontent.com/35857179/126597320-fd6b19a9-ed3e-4f4a-80b7-880a79a54a11.png)
-
 You can also configure associated SSL & advanced parameters.
 
-![image](https://user-images.githubusercontent.com/35857179/163135911-04e01016-0ffd-4f38-83a8-c667bd268759.png)
+<img width="689" alt="image" src="https://user-images.githubusercontent.com/35857179/189047293-05176c44-e162-495a-a7cd-e02377c1f42c.png">
 
 <alert type="success">
-Tip 2: You can click Edit Connection JSON and modify SSL settings in "ssl".
+Tip: You can click Edit Connection JSON and modify SSL settings in "ssl".
 </alert>
 
 ```json
@@ -83,7 +77,7 @@ Tip 2: You can click Edit Connection JSON and modify SSL settings in "ssl".
 ```
 
 <alert type="success">
-Tip 3: You can click Edit Connection JSON and specify the schema you want to use in "searchPath".
+Tip: You can click Edit Connection JSON and specify the schema you want to use in "searchPath".
 </alert>
 
 ```json
@@ -98,4 +92,4 @@ Tip 3: You can click Edit Connection JSON and specify the schema you want to use
 
 Click `Test Database Connection` to see if the connection can be established or not. NocoDB creates a new **empty database** with specified parameters if the database doesn't exist.
 
-![image](https://user-images.githubusercontent.com/35857179/163136039-ad521d74-6996-4173-84ba-cfc55392c3b7.png)
+<img width="632" alt="image" src="https://user-images.githubusercontent.com/35857179/189048167-0725c306-12d3-4c5c-91a9-55b0aa63732d.png">
diff --git a/packages/noco-docs/content/en/setup-and-usages/formulas.md b/packages/noco-docs/content/en/setup-and-usages/formulas.md
index be5dbaa939..9d6a351bba 100644
--- a/packages/noco-docs/content/en/setup-and-usages/formulas.md
+++ b/packages/noco-docs/content/en/setup-and-usages/formulas.md
@@ -8,7 +8,7 @@ menuTitle: "Formulas"
 
 ## Adding formula column
 
-![Formula](https://user-images.githubusercontent.com/86527202/144246227-42c44df6-7e3e-4b2c-9bb9-a3c213bcad20.png)
+<img width="990" alt="image" src="https://user-images.githubusercontent.com/35857179/189108950-fba76e31-8ae4-4108-916b-e413c841f451.png">
 
 ### 1. Click on '+' (Add column)
 
@@ -25,6 +25,12 @@ menuTitle: "Formulas"
 
 ### 5. Click on 'Save'
 
+## Editing formula column 
+
+Unlike other column types, formula cells cannot be modified by double-clicking since the value is generated based on the formula. Instead, the vaule can be changed by updating the formula in the column setting.
+
+<img width="253" alt="image" src="https://user-images.githubusercontent.com/35857179/189109486-4d41f2b7-0a19-46ef-8bb4-a8d1aabd3592.png">
+
 ## Available Formula Features
 
 ### Numeric Functions
diff --git a/packages/noco-docs/content/en/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free.md b/packages/noco-docs/content/en/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free.md
index e4f2a77913..32e8bc4e40 100644
--- a/packages/noco-docs/content/en/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free.md
+++ b/packages/noco-docs/content/en/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free.md
@@ -45,12 +45,32 @@ See [here](https://support.airtable.com/hc/en-us/articles/205752117-Creating-a-b
 <alert>
 Prerequisites: <br/> - A NocoDB Project <br/> - Airtable Credentials
 </alert>
-
+  
 Below are 3 simple steps
-1. Go to your Project and Click `Add / Import` and click `Airtable`.
-  ![image](https://user-images.githubusercontent.com/35857179/168772072-937b037b-32b3-4e5b-b982-5ee4b9a4959c.png)
-  ![image](https://user-images.githubusercontent.com/35857179/168773192-f3ef9d36-3329-4324-ae25-989b611f66bf.png)
+1. Go to your Project, Open `Add / Import` menu and click `Airtable`.
+  
+![Screenshot 2022-09-14 at 9 27 51 AM](https://user-images.githubusercontent.com/86527202/190057053-983126b3-287a-4bc4-a1d8-fa89da8f40f8.png)
+
+<!--   ![image](https://user-images.githubusercontent.com/35857179/168772072-937b037b-32b3-4e5b-b982-5ee4b9a4959c.png) -->
+<!--   ![image](https://user-images.githubusercontent.com/35857179/168773192-f3ef9d36-3329-4324-ae25-989b611f66bf.png) -->
 2. Input API key & Shared Base ID / URL (retrieved from `Get Airtable Credentials` above).
-  ![image](https://user-images.githubusercontent.com/35857179/168779663-5bb1dac8-01bd-43fb-8638-318a66a0f4bf.png)
-3. Click `Import` and you will see the status.
-  ![image](https://user-images.githubusercontent.com/35857179/168779906-6163b23e-4bcc-4991-8a77-b2fa94e5dcf3.png)
+  
+  - <1> API Key
+  - <2> Share Base ID
+  - <3> Configuration option
+    - Import Data: disable this option to import only table & view schema's
+    - Import Secondary Views: disable this option to import only primary grid view per table
+    - Import Rollup Columns: disable this option to skip Rollup column import
+    - Import Lookup Columns: disable this option to skip Lookup column import
+    - Import Attachments Columns: disable this option to skip Attachment column import
+    - <Not supported yet> Import Formula Columns: disable this option to skip Formula (computation) column import
+    
+![Screenshot 2022-09-14 at 9 30 14 AM](https://user-images.githubusercontent.com/86527202/190057133-92807b16-4f2b-4c58-8bae-a2cfe677ee62.png)
+
+<!--   ![image](https://user-images.githubusercontent.com/35857179/168779663-5bb1dac8-01bd-43fb-8638-318a66a0f4bf.png) -->
+3. Click `Import` and you will see the status
+4. Wait until `Go To Dashboard` button is activated on the modal. Import details are captured in log window.
+  
+![Screenshot 2022-09-14 at 9 33 42 AM](https://user-images.githubusercontent.com/86527202/190057152-be9ec6cb-e414-465c-8967-d1ad40478ce1.png)
+
+<!--   ![image](https://user-images.githubusercontent.com/35857179/168779906-6163b23e-4bcc-4991-8a77-b2fa94e5dcf3.png) -->
diff --git a/packages/noco-docs/content/en/setup-and-usages/languages.md b/packages/noco-docs/content/en/setup-and-usages/languages.md
index 5711e30b91..9365dbdeed 100644
--- a/packages/noco-docs/content/en/setup-and-usages/languages.md
+++ b/packages/noco-docs/content/en/setup-and-usages/languages.md
@@ -8,12 +8,12 @@ menuTitle: 'Languages'
 
 NocoDB supports multiple lanuages on dashboard. By default, English will be used. However, if you prefer to display in other languages, you can do the following steps to change the language.
 
-Click the icon on top right tool bar
+Open `Project Menu` (click on project name on left top to access Project menu)
 
-![image](https://user-images.githubusercontent.com/35857179/161960398-a41f9f23-5786-4a1c-a57e-8c166a2785a5.png)
+![Screenshot 2022-09-13 at 11 14 02 AM](https://user-images.githubusercontent.com/86527202/189819445-c1a64ebe-2f6d-41f2-97de-473c48945986.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/161960398-a41f9f23-5786-4a1c-a57e-8c166a2785a5.png) -->
 
-and select the one you prefer. Currently we support the following languages.
+and select the one you prefer.
 
-![image](https://user-images.githubusercontent.com/35857179/161960528-fb852ad5-8a12-4fbc-9ad1-7c285980603f.png)
 
-If you want to help translate, please check out <a href ="../engineering/translation" target="_blank">i18n</a>. If you want to request a new language, please create an issue on <a href="https://github.com/nocodb/nocodb/issues" target="_blank">Github</a>.
\ No newline at end of file
+If you want to help translate, please check out <a href ="../engineering/translation" target="_blank">i18n</a>. If you want to request a new language, please create an issue on <a href="https://github.com/nocodb/nocodb/issues" target="_blank">Github</a>.
diff --git a/packages/noco-docs/content/en/setup-and-usages/link-to-another-record.md b/packages/noco-docs/content/en/setup-and-usages/link-to-another-record.md
index f1980ba5d6..c6801c082e 100644
--- a/packages/noco-docs/content/en/setup-and-usages/link-to-another-record.md
+++ b/packages/noco-docs/content/en/setup-and-usages/link-to-another-record.md
@@ -29,7 +29,7 @@ Workflow details are captured below
 
 ## Adding a relationship
 
-![1](https://user-images.githubusercontent.com/86527202/144224170-43f4194f-83d4-4291-8c91-1f66ea1caeda.png)
+<img width="1016" alt="image" src="https://user-images.githubusercontent.com/35857179/189105583-20014dd9-e5a6-4f27-b03c-97fad9096b5f.png">
 
 ### 1. Create column
 
@@ -45,8 +45,8 @@ Select Column type as "LinkToAnotherRecord" from the drop-down menu
 
 ### 4. Choose relationship type
 
-'Has Many': corresponds to the 'One-to-many' relationships
-'Many To Many': corresponds to the 'Many-to-many' relationships
+- 'Has Many' corresponds to the 'One-to-many' relationships
+- 'Many To Many' corresponds to the 'Many-to-many' relationships
 
 ### 5. Select child table from drop down menu
 
@@ -59,19 +59,22 @@ A new column will get created in both the parent table & child table
 ### 1. Open link record tab
 
 Click on the '+' icon in corresponding row - cell
-![2truncate](https://user-images.githubusercontent.com/86527202/144224728-1cba50e3-323e-4578-be48-d2a205fb472c.png)
+<img width="750" alt="image" src="https://user-images.githubusercontent.com/35857179/189106326-90e46156-798d-4a01-a4eb-4e991ce94c03.png">
 
 ### 2. Select from the option displayed
 
 Use 'Filter box' to narrow down on search items
 You can opt to insert a new record as well, using "+ New Record" button
-![3](https://user-images.githubusercontent.com/86527202/144224530-a258775f-1eea-4c79-88ed-a377d1e35a26.png)
+<img width="1014" alt="image" src="https://user-images.githubusercontent.com/35857179/189106494-4b49a200-a44f-41ae-8b54-93b18d867a04.png">
 
 ### 3. Column mapping showing "Has Many" relationship
 
-Country 'has many' City
+Sheet1 'has many' Sheet2
+
+<img width="756" alt="image" src="https://user-images.githubusercontent.com/35857179/189106702-3b8d7a50-08f4-4a04-b2cb-16db0cf667b3.png">
 
 ### 4. Column mapping for "Belongs to" relationship [Automatically updated]
 
-City 'belongs to' Country
-![4](https://user-images.githubusercontent.com/86527202/144224542-d28be060-a077-468a-bdc4-b2e8a783d75f.png)
+Sheet2 'belongs to' Sheet1
+
+<img width="574" alt="image" src="https://user-images.githubusercontent.com/35857179/189106731-59e5bc3c-bcc5-4796-b5b2-d9b5418bfe2b.png">
\ No newline at end of file
diff --git a/packages/noco-docs/content/en/setup-and-usages/lookup.md b/packages/noco-docs/content/en/setup-and-usages/lookup.md
index f4748984a4..52075da925 100644
--- a/packages/noco-docs/content/en/setup-and-usages/lookup.md
+++ b/packages/noco-docs/content/en/setup-and-usages/lookup.md
@@ -8,61 +8,35 @@ menuTitle: "Lookup"
 
 ## Lookup
 
-### Sample simple Organization structure
-
-- 5 departments (company departments), each department has a team name & associated team code. Vertical **has many** Employees - relationship has been defined
-
-<img src="https://user-images.githubusercontent.com/35857179/161894091-6b6092c2-7184-4fe6-aa17-64ce5a7e97d5.png" width="70%"/>
-
+### Example organization structure
+  
+Consider an organization with
+- 5 departments (company departments), each department has a team name & associated team code. Each `Team` **has many** `Employees` - relationship has been defined using `LinkToAnotherRecord` column
 - 5 employees working at different departments
+  
+  
+![Screenshot 2022-09-09 at 12 57 32 PM](https://user-images.githubusercontent.com/86527202/189295738-a4197818-f7d7-4769-acad-13b6d05afe7e.png)
+<!-- ![Screenshot 2022-09-09 at 12 18 40 PM](https://user-images.githubusercontent.com/86527202/189291758-21c81ec6-7967-45f1-b49c-b3b6f2701edc.png) -->
+<!-- ![Screenshot 2022-09-09 at 12 19 16 PM](https://user-images.githubusercontent.com/86527202/189291766-f619078e-0881-4531-a3f8-ede22269f6fc.png) -->
 
-<img src="https://user-images.githubusercontent.com/35857179/161894109-9b1a45da-c721-4d42-b676-a7c801cc160d.png" width="50%"/>
-
-Now, we can explore how to extract team-code information in Employee table using **LOOKUP** columns
-
-### Adding a lookup column
-
-### 1. Add new column
-
-Click on '+' icon to the left of column headers in Employee table
-
-<img src="https://user-images.githubusercontent.com/35857179/161895281-a43058c9-00be-4e8e-bf12-925284b7bcf8.png" width="70%"/>
-
-### 2. Feed column name
-
-<img src="https://user-images.githubusercontent.com/35857179/161895397-bde8bd31-6e0a-4251-8ffc-a0d0a2605899.png" width="50%"/>
-
-### 3. Select column type as 'Lookup'
-
-<img src="https://user-images.githubusercontent.com/35857179/161895489-046a3ee4-4a42-4a48-95f9-e6cfc92c598a.png" width="50%"/>
-
-### 4. Choose child table
-
-Table Verticals in our example  
-<img src="https://user-images.githubusercontent.com/35857179/161895601-0e8924ed-9ff0-4215-ab61-151848d01d0d.png" width="50%"/>
-
-### 5. Select child column
-
-<img src="https://user-images.githubusercontent.com/35857179/161895637-e9f9f444-d733-41a4-bd18-8efed6fd16ad.png" width="50%"/>
-
-### 6. Click on 'Save'
-
-<img src="https://user-images.githubusercontent.com/35857179/161895740-e6df9739-178d-4e8c-ba0e-b7537b30b30d.png" width="50%"/>
-
-### 7. Required information is populated in the newly created column
-
-<img src="https://user-images.githubusercontent.com/35857179/161895950-e7b86c0e-74ab-4bf3-b43c-878fe1320fba.png" width="50%"/>
-
-## Nested Lookup
-
-On top of the previous structure, let's introduce one more table - `Project` which contains `ProjectName` and each employee can be assigned with multiple projects. If we want to include the lookup column `TeamCode` from Employee in Project, we can create a nested lookup.
 
-<img src="https://user-images.githubusercontent.com/35857179/161897419-aa00f5eb-3553-46ce-80a1-6c8565366c27.png" width="50%"/>
+Now, let's explore procedure to retrieve team-code information in Employee table using **LOOKUP** columns
 
-We can apply the same steps to create the lookup column `TeamCode` in table `Project`. This time we choose the lookup column created previously in table `Employee` as a child table.
+### Configuring a lookup column
+#### 1. Add new column : Click on '+' icon to the left of column headers in Employee table
+#### 2. Feed column name
+#### 3. Select column type as 'Lookup'
+#### 4. Choose child table
+#### 5. Select child column
+#### 6. Click on 'Save'
 
-<img src="https://user-images.githubusercontent.com/35857179/161893922-e1c8b7e5-655b-4096-827c-75105231d9e0.png" width="50%"/>
+![Screenshot 2022-09-09 at 12 21 13 PM](https://user-images.githubusercontent.com/86527202/189291720-642a6a96-0b3d-4eaa-886a-20d33a967644.png)
 
-Click save. Then `TeamCode` is populated in table `Project`.
 
-<img src="https://user-images.githubusercontent.com/35857179/161898396-c5c96485-3ec2-4452-88a0-6ed7665d6f34.png" width="50%"/>
+Required information is now populated in the newly created column
+  
+![Screenshot 2022-09-09 at 12 26 06 PM](https://user-images.githubusercontent.com/86527202/189291679-09503e32-9146-41fa-b28c-d900f2dc35a4.png)
+  
+  
+## Additional notes
+- Nested 'Lookup' supported: a Lookup field can have its child column datatype as Lookup (or Rollup).
diff --git a/packages/noco-docs/content/en/setup-and-usages/meta-management.md b/packages/noco-docs/content/en/setup-and-usages/meta-management.md
index 38eb3f518b..474e32dbd0 100644
--- a/packages/noco-docs/content/en/setup-and-usages/meta-management.md
+++ b/packages/noco-docs/content/en/setup-and-usages/meta-management.md
@@ -6,13 +6,15 @@ category: 'Product'
 menuTitle: 'Metadata'
 ---
 
-Project Metadata can be found by clicking `Team & Settings` from the left navigation drawer
+Project Metadata includes Database Metadata, UI Access Control and Miscellaneous.
 
-<img width="367" alt="image" src="https://user-images.githubusercontent.com/35857179/170426881-ba645392-24a2-4446-b501-0595a0887724.png">
+To access it, click the down arrow button next to Project Name on the top left side, then select `Team & Settings`.
+
+<img width="390" alt="image" src="https://user-images.githubusercontent.com/35857179/189115289-07657c15-deab-435f-b0f9-2948007f8c65.png">
 
 and clicking `Project Metadata`.
 
-![image](https://user-images.githubusercontent.com/35857179/170427133-09faf93f-a41c-428b-b51c-fefe3fb45d9d.png)
+<img width="244" alt="image" src="https://user-images.githubusercontent.com/35857179/189116366-c58de4c1-c62d-4ac9-8362-aa08ff92005f.png">
 
 <!-- ## Project Metadata
 
@@ -53,10 +55,16 @@ From the destination project, go to `Project Metadata`. Under ``Export / Import
 
 Go to `Project Metadata`, under ``Metadata``, you can see your metadata sync status. If it is out of sync, you can sync the schema. See <a href="./sync-schema">Sync Schema</a> for more.
 
-<img width="1339" alt="image" src="https://user-images.githubusercontent.com/35857179/170427543-07dfdc30-b8f9-4e4f-bd5b-96f93a16b2fe.png">
+<img width="1480" alt="image" src="https://user-images.githubusercontent.com/35857179/189116339-22b202ef-7674-4682-bab7-2b8625e13ea2.png">
 
 ## UI Access Control
 
 Go to `Project Metadata`, under ``UI Access Control``, you can control the access to each table by roles. 
 
-<img width="1335" alt="image" src="https://user-images.githubusercontent.com/35857179/170427529-8bb403bc-0c1f-43ff-868a-c17c8ce9b778.png">
\ No newline at end of file
+<img width="1480" alt="image" src="https://user-images.githubusercontent.com/35857179/189116502-78a0dc75-70cb-4bbe-a676-93af53ecca22.png">
+
+## Miscellaneous
+
+Currently only `Show M2M Tables` can be configurated under Miscellaneous.
+
+<img width="1495" alt="image" src="https://user-images.githubusercontent.com/35857179/189116547-3c5ce944-82c0-4068-b91c-60f45b862d32.png">
\ No newline at end of file
diff --git a/packages/noco-docs/content/en/setup-and-usages/primary-key.md b/packages/noco-docs/content/en/setup-and-usages/primary-key.md
index 62112ae834..3d1be32045 100644
--- a/packages/noco-docs/content/en/setup-and-usages/primary-key.md
+++ b/packages/noco-docs/content/en/setup-and-usages/primary-key.md
@@ -35,10 +35,10 @@ It is possible to have a table without any primary key.
 In such scenario's, new records can be created in NocoDB for this table, but records can't be updated or deleted [as there is now way for NocoDB to uniquely identify these records]
 
 #### Example : Primary Key & optional system fields during new table creation
-![Screenshot 2022-06-16 at 12 15 43 PM](https://user-images.githubusercontent.com/86527202/174010350-8610b9c1-a761-4bff-a53d-dc728df47e1b.png)
+<img width="596" alt="image" src="https://user-images.githubusercontent.com/35857179/189113679-481bceab-8957-4c5d-a38c-9940f03cfd7e.png">
 
 #### Example : Show System Fields
-![Screenshot 2022-06-16 at 12 16 07 PM](https://user-images.githubusercontent.com/86527202/174010379-9e300d42-ad89-4653-afa2-f70fca407ca8.png)
+<img width="309" alt="image" src="https://user-images.githubusercontent.com/35857179/189113907-871f7ab0-9bb2-4f04-a726-2d9feb56892e.png">
 
 ## Can I change the Primary Key to another column within tables ?
-- You can't update Primary Key from NocoDB UI. You can reconfigure it at database level directly & trigger `metasync` explicitly
+- You can't update Primary Key from NocoDB UI. You can reconfigure it at database level directly & trigger `meta sync` explicitly.
diff --git a/packages/noco-docs/content/en/setup-and-usages/primary-value.md b/packages/noco-docs/content/en/setup-and-usages/primary-value.md
index e42de05e51..bd297bf2b4 100644
--- a/packages/noco-docs/content/en/setup-and-usages/primary-value.md
+++ b/packages/noco-docs/content/en/setup-and-usages/primary-value.md
@@ -1,9 +1,9 @@
 ---
-title: "Primary value"
+title: "Primary Value"
 description: "Understanding Primary Value in NocoDB!"
 position: 580
 category: "Product"
-menuTitle: "Primary value"
+menuTitle: "Primary Value"
 ---
 
 ## What is a Primary Value ?
@@ -14,19 +14,27 @@ menuTitle: "Primary value"
 - Within a spreadsheet, primary value are always highlighted so that it is easier to recognise what row we are in.
 - And when LinkToAnotherRecord is created between two tables - it is the primary value that appears in LinkToAnotheRecord column. 
 
-#### Example : Primary Value highlighted in actor table
-<img width="547" alt="actor" src="https://user-images.githubusercontent.com/5435402/152645708-92b83985-4a0a-42b2-9d01-d26be70fd3aa.png">
+#### Example : Primary Value highlighted in Actor table
+<img width="646" alt="image" src="https://user-images.githubusercontent.com/35857179/189114321-58ebaa16-20e2-4615-abda-39417a5df5bf.png">
 
-#### Example : Primary Value highlighted in film table
-<img width="1406" alt="film-table" src="https://user-images.githubusercontent.com/5435402/152645713-b4df99b2-4eb7-4fea-85f9-0baf47470ef3.png">
+#### Example : Primary Value highlighted in Film table
+<img width="643" alt="image" src="https://user-images.githubusercontent.com/35857179/189114462-a7fef0e2-f9ac-4943-98d5-fee9f60a4ab5.png">
 
 #### Example : Primary Value associated when LinkToAnotherRecord is created
-<img width="753" alt="actor-film" src="https://user-images.githubusercontent.com/5435402/152645714-4061c94a-4cfb-44e5-b112-63cf4ed869fe.png">
+<img width="311" alt="image" src="https://user-images.githubusercontent.com/35857179/189114548-193acc4d-f714-4204-a560-97668db7884c.png">
+
+## How to set Primary Value ?
+
+Click down arrow in the target column. Click `Set as Primary Value`. 
+
+<img width="251" alt="image" src="https://user-images.githubusercontent.com/35857179/189114857-b452aa6b-5cdb-4a74-9980-cb839d7d15fd.png">
 
 
 ## How is Primary Value identfied for existing database tables ?
+
 - It is usually the first column after the primary key which is not a number. 
 - If there is no column which is not a number then the column adjacent to primary key is chosen. 
 
 ## Can I change the Primary Value to another column within tables ?
-- Yes, you can. Hover over column which you want as primary column and click ```Set as Primary Value``` 
+
+- Yes, you can use the same way mentioned above to set Primary Value.
diff --git a/packages/noco-docs/content/en/setup-and-usages/rollup.md b/packages/noco-docs/content/en/setup-and-usages/rollup.md
index 01d1e6dee5..ede595a270 100644
--- a/packages/noco-docs/content/en/setup-and-usages/rollup.md
+++ b/packages/noco-docs/content/en/setup-and-usages/rollup.md
@@ -8,13 +8,14 @@ menuTitle: "Rollup"
 
 ## Rollup
 
-Sample simple Organization structure:
+Sample Organization structure:
 
-- 5 Departments (company departments), each department has a team name & associated team code
+- 5 Departments, each department has a team name & associated team code
 - 5 employees working at different Departments
-- Vertical **has many** Employees : relationship has been defined
+- Teams **has many** Employees : relationship has been defined
+
+![Screenshot 2022-09-09 at 12 57 32 PM](https://user-images.githubusercontent.com/86527202/189296162-536185f1-31ed-40df-b668-deed7ad630aa.png)
 
-![LookUp](https://user-images.githubusercontent.com/86527202/144038845-402d5401-a214-4166-bc07-fcf8dcc8a961.png)
 
 ### RollUp AGGREGATION functions supported
 
@@ -27,46 +28,53 @@ Sample simple Organization structure:
 - Sum Distinct
 - Average Distinct
 
-Now, we can explore how to extract employee count information per vertical using **"ROLLUP"** columns
+Now, we can explore how to extract employee count information per team using **"ROLLUP"** columns
 
 ## Adding a rollup column
 
-### 1. Add new column
+#### 1. Add new column
 
 Click on '+' icon to the left of column headers in Departments table
 
-![1](https://user-images.githubusercontent.com/86527202/144236273-484edc5b-7f5f-4041-b480-db08d4459d07.png)
+<!-- ![1](https://user-images.githubusercontent.com/86527202/144236273-484edc5b-7f5f-4041-b480-db08d4459d07.png) -->
 
-### 2. Feed column name
+#### 2. Feed column name
 
-![2](https://user-images.githubusercontent.com/86527202/144236279-41904955-4990-4a23-bec6-b0953002eac6.png)
+<!-- ![2](https://user-images.githubusercontent.com/86527202/144236279-41904955-4990-4a23-bec6-b0953002eac6.png) -->
 
-### 3. Select Column type as 'Rollup'
+#### 3. Select Column type as 'Rollup'
 
-![3](https://user-images.githubusercontent.com/86527202/144236283-4596e3e1-3bf8-488f-bc9b-8ec1466a35c6.png)
+<!-- ![3](https://user-images.githubusercontent.com/86527202/144236283-4596e3e1-3bf8-488f-bc9b-8ec1466a35c6.png) -->
 
-### 4. Choose Child Table
+#### 4. Choose Child Table
 
 Table Employee in our example
 
-![4](https://user-images.githubusercontent.com/86527202/144236284-301178d8-f452-4d1e-9dff-80dd9570c280.png)
+<!-- ![4](https://user-images.githubusercontent.com/86527202/144236284-301178d8-f452-4d1e-9dff-80dd9570c280.png) -->
 
-### 5. Choose on ​Child column
+#### 5. Choose on ​Child column
 
 Pick appropriate column for aggreagation
 
-![5](https://user-images.githubusercontent.com/86527202/144236286-28547d74-feb8-4ad8-a872-7ba809e5db1e.png)
+<!-- ![5](https://user-images.githubusercontent.com/86527202/144236286-28547d74-feb8-4ad8-a872-7ba809e5db1e.png) -->
 
-### 6. Select ​Aggregate function
+#### 6. Select ​Aggregate function
 
 Aggregate function will be "count" in our case
 
-![6](https://user-images.githubusercontent.com/86527202/144236288-34a567d5-a5e9-4a1e-b074-5ea633e799a3.png)
+<!-- ![6](https://user-images.githubusercontent.com/86527202/144236288-34a567d5-a5e9-4a1e-b074-5ea633e799a3.png) -->
+
+#### 7. Click on Save
+
+
+![Screenshot 2022-09-09 at 1 03 49 PM](https://user-images.githubusercontent.com/86527202/189297619-4d5c815b-6c97-41fa-978e-9b645448e508.png)
+
 
-### 7. Click on Save
+<!-- ![7](https://user-images.githubusercontent.com/86527202/144236289-5872529a-ba47-428d-979e-fdefb92a1039.png) -->
 
-![7](https://user-images.githubusercontent.com/86527202/144236289-5872529a-ba47-428d-979e-fdefb92a1039.png)
+Column `Employee Count` is populated with appropriate information
+  
+![Screenshot 2022-09-09 at 1 07 45 PM](https://user-images.githubusercontent.com/86527202/189297662-c7ff1e3e-eec7-4108-a089-6c945b90b867.png)
 
-### 8. Column TeamCount is populated with appropriate information
 
-![8](https://user-images.githubusercontent.com/86527202/144236291-52855f92-ad8b-4be1-aa98-b5cfdb1ee108.png)
+<!-- ![8](https://user-images.githubusercontent.com/86527202/144236291-52855f92-ad8b-4be1-aa98-b5cfdb1ee108.png) -->
diff --git a/packages/noco-docs/content/en/setup-and-usages/sync-schema.md b/packages/noco-docs/content/en/setup-and-usages/sync-schema.md
index e1db6d6459..fd7c712e01 100644
--- a/packages/noco-docs/content/en/setup-and-usages/sync-schema.md
+++ b/packages/noco-docs/content/en/setup-and-usages/sync-schema.md
@@ -8,26 +8,28 @@ menuTitle: 'Sync Schema'
 
 ## How to sync schema changes to NocoDB
 
-NocoDB allows you to sync schema changes if you have made changes outside NocoDB GUI. However, it has to be noted then you will have to bring your own schema migrations for moving from environment to others.
+NocoDB allows you to sync schema changes if you have made changes outside NocoDB GUI. However, it has to be noted then you will have to bring your own schema migrations for moving from one environment to other.
 
 Below are the steps to sync schema changes.
 
-### 1. From the menu bar, click `Team & Settings`
+### 1. From the `Project menu`, click `Team & Settings`
 
-<img width="367" alt="image" src="https://user-images.githubusercontent.com/35857179/170426881-ba645392-24a2-4446-b501-0595a0887724.png">
+<img width="390" alt="image" src="https://user-images.githubusercontent.com/35857179/189115289-07657c15-deab-435f-b0f9-2948007f8c65.png">
 
-### 2. Click `Project Metadata` under SETTINGS and click `Metadata`
+### 2. Click `Project Metadata` under SETTINGS, access `Metadata` tab
 
-![image](https://user-images.githubusercontent.com/35857179/170427133-09faf93f-a41c-428b-b51c-fefe3fb45d9d.png)
+![Screenshot 2022-09-13 at 10 37 17 AM](https://user-images.githubusercontent.com/86527202/189814111-56036958-c6e4-4560-af1e-9443380db080.png)
 
 ### 3. Changes carried outside GUI, identified by NocoDB are listed under `Sync state`
+- If changes made to the database are not visible, click `Reload`
+- Identified schema changes are identified for each table in `red`
+- `Sync now` button gets activated, if Schema changes are identified by NocoDB
 
-![image](https://user-images.githubusercontent.com/35857179/161957119-f66f22ad-9d37-45ed-84ca-35c99726078c.png)
+![Screenshot 2022-09-13 at 10 42 12 AM](https://user-images.githubusercontent.com/86527202/189814648-ca28f28d-b0ed-4652-a5da-e6472bfd9407.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/161957119-f66f22ad-9d37-45ed-84ca-35c99726078c.png) -->
 
 ### 4. Click `Sync Now` to complete Schema sync procedure
 
-<img width="1352" alt="image" src="https://user-images.githubusercontent.com/35857179/170428004-022dd436-0c58-41c5-b5e6-89d1d3ac87b0.png">
-
 #### Notes
 
 1. Column rename operation will be treated like `column delete` & `column create` operation.
diff --git a/packages/noco-docs/content/en/setup-and-usages/table-operations.md b/packages/noco-docs/content/en/setup-and-usages/table-operations.md
index 730b0bc94f..644172e397 100644
--- a/packages/noco-docs/content/en/setup-and-usages/table-operations.md
+++ b/packages/noco-docs/content/en/setup-and-usages/table-operations.md
@@ -6,7 +6,7 @@ category: "Product"
 menuTitle: "Table Operations"
 ---
 
-Once you have created a new NocoDB project you can open it, In the browser, the URL would be like `example.com/dashboard/#/nc/project_id`.
+Once you have created a new NocoDB project you can open it, In the browser, the URL would be like `example.com/dashboard/#/nc/<project_id>`.
 
 ## Table
 
@@ -14,35 +14,48 @@ Once you have created a new NocoDB project you can open it, In the browser, the
 
 Now you can start creating new tables by simply clicking one of the following options.
 
-- Click the plus button next to Table menu
-- Click Add / Import, then click Add new table
+- Click `Add new table` button
+- Hover `Add new table` button in table menu, click three dots, use Quick Import to create
+- Drag and drop CSV, JSON or Excel file to import
 
-<img width="632" alt="image" src="https://user-images.githubusercontent.com/35857179/168772379-63d7e92c-39ce-4d91-ac1e-279591833e0e.png">
+<img width="1508" alt="image" src="https://user-images.githubusercontent.com/35857179/189051917-d6b07f21-845c-4519-a1c5-4b26bbfcf04b.png">
 
 A modal will be popped up. Input the corresponding info and enable or disable default columns and click `Submit` button.
 
-![table_create_modal](https://user-images.githubusercontent.com/61551451/126772859-5a301c45-d830-4df2-a05a-43b15dd77728.png)
+<img width="1500" alt="image" src="https://user-images.githubusercontent.com/35857179/189052476-505c7e6d-ff67-4cbe-aec1-6b3eec374030.png">
+
+Click Show more for advanced settings.
 
 <alert>
 Note: You can't disable the `id` column since NocoDB needs a primary column for every table. You can rename it after the creation.
 </alert>
 
+<img width="1500" alt="image" src="https://user-images.githubusercontent.com/35857179/189052642-ab77a791-fdd6-42f6-b2b6-fcc972859939.png">
+
 After the successful submission, the table will be created and open as a new tab.  
 
-![table_created](https://user-images.githubusercontent.com/35857179/168411541-b0233cf1-4683-490b-bdec-f2546a2d9015.png)
+<img width="1501" alt="image" src="https://user-images.githubusercontent.com/35857179/189052804-deea1ed7-6b62-4c00-8aca-fed00151d3c9.png">
 
 ### Table Rename
 
 Right click on Table name on left hand project-tree menu, select `Rename`
-In modal popup, enter new table name and click `Submit` button
   
-<img src="https://user-images.githubusercontent.com/86527202/144403447-1b2e4368-eb2b-40c0-901a-54e8adf9a80c.png" width="60%"/>
+<img width="651" alt="image" src="https://user-images.githubusercontent.com/35857179/189052896-2313dd1f-8baf-4cc3-8ef2-ff007d3ff920.png">
+
+In modal popup, enter new table name and click `Submit` button
+
+<img width="1507" alt="image" src="https://user-images.githubusercontent.com/35857179/189052935-c6403bd9-4b91-40ba-91d6-a34abfcfa21f.png">
+
 
 ### Table Delete
 
-The table can be deleted using the `delete` icon present in the toolbar within the table tab.
+Right click on Table name on left hand project-tree menu, select `Delete`
+
+<img width="617" alt="image" src="https://user-images.githubusercontent.com/35857179/189053090-806c62d5-6028-444f-93eb-6ccb9345dd52.png">
+
+Click Yes to confirm the table deletion
 
-![image](https://user-images.githubusercontent.com/35857179/168411589-540f50d2-78e3-4d97-b17c-1b9fad9f90b7.png)
+<img width="1506" alt="image" src="https://user-images.githubusercontent.com/35857179/189053138-54f6a85a-e9e3-4cad-b127-df19ccdd184e.png">
 
 ## Column
 
@@ -50,34 +63,39 @@ The table can be deleted using the `delete` icon present in the toolbar within t
 
 Click the `+` icon on the right corner of the table.
 
-![Pasted_Image_23_07_21__4_39_PM](https://user-images.githubusercontent.com/61551451/126773798-4470d632-69e0-4f5f-803b-e3597715fe22.png)
+<img width="352" alt="image" src="https://user-images.githubusercontent.com/35857179/189053971-a3d29b3b-1177-49fe-8178-8868528fe3e7.png">
 
-After the click, it will show a menu and you can enter the column name and choose the column type ([Abstract type](./abstract-types)).  
-Click `Save`button to create the new column.
+After the click, it will show a menu and you can enter the column name and choose the column type.  (See [Column Types](./column-types) for the full list).
 
-![image](https://user-images.githubusercontent.com/61551451/126774157-ae9af236-e1ad-4a54-adb7-1b96775cae57.png)  
-  
-& we have new column created as part of our table  
-![Pasted_Image_23_07_21__4_43_PM](https://user-images.githubusercontent.com/61551451/126774276-e947f510-2fe1-4595-afc1-a31d2c35a69a.png)  
-  
-> For more about Abstract type [click here](./abstract-types).
+<img width="459" alt="image" src="https://user-images.githubusercontent.com/35857179/189073266-a0f19e2e-5dd2-4343-8c74-4ef709da272c.png">
+
+You can also click `Show more` for additional menu options.
+
+<img width="445" alt="image" src="https://user-images.githubusercontent.com/35857179/189075678-d18b799f-df13-4f78-a5a5-813e8d3277ae.png">
+
+Click `Save` button to create the new column. 
+
+<img width="909" alt="image" src="https://user-images.githubusercontent.com/35857179/189075920-30acaf44-eba7-4fa6-ab93-a576ce88ef23.png">
 
 ### Column Edit
-To edit column properties, click/hover on down arrow, select `Edit` from the menu.  
+
+To edit column properties, click the down arrow, select `Edit` from the menu.  
   
-<img src="https://user-images.githubusercontent.com/86527202/144404169-80d8b514-53cf-4bb1-8323-fd3cfda8816b.png" width="50%"/>  
+<img width="230" alt="image" src="https://user-images.githubusercontent.com/35857179/189077129-dfb7a815-3fc7-41ea-b72c-e57f3c30a7f4.png"> 
   
-You will be able to edit column name & associated datatype using pop-up modal.  
-For additional menu options, click `Show more options`  
+You will be able to edit column name & associated datatype using pop-up modal.  You can also click `Show more` for additional menu options.
   
-<img src="https://user-images.githubusercontent.com/86527202/144404188-146ab0dc-bd2b-4902-9369-a34253e2fad6.png" width="40%"/>
-
+<img width="497" alt="image" src="https://user-images.githubusercontent.com/35857179/189077270-7acdc818-3747-4307-93fb-e970cb7936f9.png">
 
 ### Column Delete
 
-Column deletion can be done by using the `delete` option from the column header menu.
+To delete a column, click the down arrow, select `Delete` from the menu.  
+
+<img width="256" alt="image" src="https://user-images.githubusercontent.com/35857179/189077566-c9376e4e-9ee8-4ffa-b437-1240894a30cd.png">
 
-![Pasted_Image_23_07_21__6_49_PM](https://user-images.githubusercontent.com/61551451/126787679-562aaa22-14b3-4ff8-8057-b8219e057110.png)
+Click `Yes` to confirm the column deletion. 
+
+<img width="1507" alt="image" src="https://user-images.githubusercontent.com/35857179/189077741-b2e271af-1f0a-4de8-8e99-acb349d3c6aa.png">
 
 ## Row
 
@@ -86,17 +104,18 @@ For adding new values to the table we need new rows, new rows can be added in tw
 ### Row Add (Using Form)
 
 - Click the `+` icon in the toolbar of the table tab.  
-  <img src="https://user-images.githubusercontent.com/86527202/144405563-50573b1c-1bd3-43ea-8020-357fc7ef9e42.png" width="50%"/>
-- Now it will open a modal Form to enter the values, provide the values and press the save button.  
-  <img src="https://user-images.githubusercontent.com/61551451/126784347-b82f9dfd-4c6d-4d65-be07-80e051ff19de.png" width="75%">
+  <img width="1038" alt="image" src="https://user-images.githubusercontent.com/35857179/189079143-8f3e3dd6-9b62-4fb0-9a78-a57545026d11.png">
+- Then you can enter the values and click `Save row`.  
+  <img width="1498" alt="image" src="https://user-images.githubusercontent.com/35857179/189079268-5b1da462-624b-4cac-9820-e2ed3ed421af.png">
 - After saving it will be there on your table.  
-  ![image](https://user-images.githubusercontent.com/61551451/126785340-e9b80ad0-ba06-4a22-8a01-876d829c9673.png)
+  <img width="1501" alt="image" src="https://user-images.githubusercontent.com/35857179/189079668-5f7b0b53-8d62-41b5-acc0-2fa38cd8a144.png">
 
 ### Row Add (Using Table Row at bottom of page)
 
-- Click the bottom row of the table which contains `+` icon at the beginning.  
-  <img src="https://user-images.githubusercontent.com/86527202/144405773-bb0d00ef-264d-4941-b01f-3b7f0b1fc54d.png" width="40%"/>
-- Now it will add a new row in the table
+- Click the bottom row of the table `+ Add new row`.
+  <img width="545" alt="image" src="https://user-images.githubusercontent.com/35857179/189079815-9a7ea5e3-4eb7-452e-99a8-78c271f2ad1f.png">
+- A new empty row will be created
+  <img width="567" alt="image" src="https://user-images.githubusercontent.com/35857179/189080009-3aeb70b4-92b0-4702-acb9-e5e52e31855e.png">
 
 ### Row Edit
 You can start editing by any of the following methods  
@@ -108,14 +127,18 @@ You can start editing by any of the following methods
 ### Row Delete
 
 Right-click on anywhere in the row and then from the context menu select `Delete Row` option.  
-Bulk delete is also possible by selecting multiple rows by using the checkbox in first column and then `Delete Selected Rows` options from the right click context menu.  
-<img src="https://user-images.githubusercontent.com/86527202/144406191-ccff1382-e808-44e8-babe-bd937faf1b3d.png" width="40%"/>
+Bulk delete is also possible by selecting multiple rows by using the checkbox in first column and then `Delete Selected Rows` options from the right click context menu.
+
+<img width="568" alt="image" src="https://user-images.githubusercontent.com/35857179/189081764-9f13c286-e02a-40d0-93ea-4b1362d96827.png">
 
 ## Quick Import
 
-You can use Quick Import when you have data from external sources such as Airtable, CSV file or Microsoft Excel to an existing project by clicking `Add / Import` and choosing the corresponding options.
+You can use Quick Import when you have data from external sources such as Airtable, CSV file or Microsoft Excel to an existing project by either 
+
+- Hover `Add new table` button in table menu, click three dots, use Quick Import to create
+- Drag and drop CSV, JSON or Excel file to import
 
-![image](https://user-images.githubusercontent.com/35857179/168772072-937b037b-32b3-4e5b-b982-5ee4b9a4959c.png)
+<img width="1508" alt="image" src="https://user-images.githubusercontent.com/35857179/189051917-d6b07f21-845c-4519-a1c5-4b26bbfcf04b.png">
 
 ### Import Airtable into an existing project
 
@@ -123,36 +146,38 @@ You can use Quick Import when you have data from external sources such as Airtab
 
 ### Import CSV data into an existing project
 
-- Click `Add / Import` and click `CSV file`
-- Drag & drop or select file to upload or specify Excel file URL
-  ![image](https://user-images.githubusercontent.com/35857179/168412051-ed988659-011d-455b-ba32-be0a2e1184b0.png)
-- You can revise the table name, column name and column type. By default, the first column will be chosen as <a href="./primary-value" target="_blank">Primary Value</a> and cannot be deleted.
-  ![image](https://user-images.githubusercontent.com/35857179/168412069-aea8a8fb-09ab-4412-95b7-963bdbe24cfc.png)
-- Click `Import CSV` to start importing process. The table will be created and the data will be imported.
-  ![image](https://user-images.githubusercontent.com/35857179/168412172-9bb24ab9-da15-45cf-9b12-3af362fc604a.png)
+- Hover `Add new table` button in table menu, click three dots, and click `CSV file`
+- Drag & drop or select file to upload or specify CSV file URL
+  <img width="1508" alt="image" src="https://user-images.githubusercontent.com/35857179/189083344-79ac27a6-d32e-46e9-9d73-95f4ce8f37de.png">
+- Click `Import`
+  <img width="1502" alt="image" src="https://user-images.githubusercontent.com/35857179/189083577-3c7fef66-0bf2-4d61-be22-dee365b93a8c.png">
+- You can revise the table name by double clicking it, column name and column type. By default, the first column will be chosen as <a href="./primary-value" target="_blank">Primary Value</a> and cannot be deleted.
+  <img width="1506" alt="image" src="https://user-images.githubusercontent.com/35857179/189083667-cf9ce8a9-0126-478e-872d-b554ea9e0e87.png">
+- Click `Import` to start importing process. The table will be created and the data will be imported.
+  <img width="1500" alt="image" src="https://user-images.githubusercontent.com/35857179/189085568-daac2690-2883-4ddd-8a51-ea27bda8630e.png">
 
 ### Import Excel data into an existing project
 
-- Click `Add / Import` and click `Microsoft Excel`
+- Hover `Add new table` button in table menu, click three dots, and click `Microsoft Excel`
 - Drag & drop or select file to upload or specify Excel file URL
-  ![image](https://user-images.githubusercontent.com/35857179/168412483-a12f7d90-1b91-48bb-96a7-2a16dc8c7b81.png)
+  <img width="1495" alt="image" src="https://user-images.githubusercontent.com/35857179/189088426-f0f585ae-a6ac-455c-a4ed-0a9b95b0f381.png">
 - You can revise the table name, column name and column type. By default, the first column will be chosen as <a href="./primary-value" target="_blank">Primary Value</a> and cannot be deleted.
   <alert>
   Note: If your Excel file contains multiple sheets, each sheet will be stored in a separate table.
   </alert>
 
-  ![image](https://user-images.githubusercontent.com/35857179/168412465-e46b4fcf-ec1c-4d32-bb56-eb62516829f5.png)
-- Click `Import Excel` to start importing process. The table(s) will be created and the data will be imported to the corresponding table(s).
-  ![image](https://user-images.githubusercontent.com/35857179/168413233-adfb85e2-8d52-46d8-a754-e2ec9f8d3234.png)
+  <img width="1484" alt="image" src="https://user-images.githubusercontent.com/35857179/189093528-f3c9cc04-de4c-4a87-aae5-9429d1bd50df.png">
+- Click `Import` to start importing process. The table(s) will be created and the data will be imported to the corresponding table(s).
+  <img width="1501" alt="image" src="https://user-images.githubusercontent.com/35857179/189093670-abd3e192-8ed2-481f-9add-ad0f30f3d862.png">
 
 ## Export Data
 
-You can export your data from a table as a CSV file by clicking `More` and `Download as CSV`.
+You can export your data from a table as a CSV file by clicking the down arrow next to Table name and hover on `Download`. Currently only CSV and XLSX formats are supported for export.
 
-![image](https://user-images.githubusercontent.com/35857179/163556138-2aa0a782-12e9-49c7-aadf-b7778e91557f.png)
+<img width="887" alt="image" src="https://user-images.githubusercontent.com/35857179/189094800-a77dedf7-1bad-4a68-abf4-626688e62524.png">
 
 ## Import Data
 
-You can import your data in CSV format to a table by clicking `More` and `Upload CSV`.
+You can import your data in CSV format to a table by clicking the down arrow next to Table name and hover on `Upload`. Currently only CSV format is supported for upload.
 
-![image](https://user-images.githubusercontent.com/35857179/163556175-116b12c2-ca2e-4b54-a65a-39250541d873.png)
+<img width="1095" alt="image" src="https://user-images.githubusercontent.com/35857179/189094939-33a4c87c-66d8-4951-98b4-886ead470ce0.png">
diff --git a/packages/noco-docs/content/en/setup-and-usages/team-and-auth.md b/packages/noco-docs/content/en/setup-and-usages/team-and-auth.md
index 22cf8c33b7..fcb5879d47 100644
--- a/packages/noco-docs/content/en/setup-and-usages/team-and-auth.md
+++ b/packages/noco-docs/content/en/setup-and-usages/team-and-auth.md
@@ -6,16 +6,25 @@ category: 'Product'
 menuTitle: 'Team & Auth'
 ---
 
-Team & Auth can be found by clicking `Team & Settings` from the left navigation drawer and clicking `Team & Auth`.
+# Accessing Team & Auth 
+- Click on `Team & Settings` from the `Project Menu` 
+- Access `Team & Auth` under `Settings`
+  
+  
+<img width="390" alt="image" src="https://user-images.githubusercontent.com/35857179/189115289-07657c15-deab-435f-b0f9-2948007f8c65.png">
 
-![image](https://user-images.githubusercontent.com/35857179/161902474-fd06678c-a171-4237-b171-dc028b3753de.png)
 
-![image](https://user-images.githubusercontent.com/35857179/161902746-aa59b8e5-06d2-4c07-ac60-c82f92b42752.png)
+![Screenshot 2022-09-13 at 10 52 55 AM](https://user-images.githubusercontent.com/86527202/189816444-1591fed2-52d5-4031-b462-f1ad2a72df20.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/161902746-aa59b8e5-06d2-4c07-ac60-c82f92b42752.png) -->
 
 ## How to Add a User
 
-1. Go to `Team & Auth`, click on `New User`.
-    ![image](https://user-images.githubusercontent.com/35857179/161903214-1e0f7ba0-6daf-4073-90c9-9d86a40c9f90.png)
+1. Go to `Team & Auth`, click on `Invite Team`
+
+  
+  ![Screenshot 2022-09-13 at 10 52 55 AM](https://user-images.githubusercontent.com/86527202/189817510-089371d9-1a47-40fa-9dad-0c7b0cea2de0.png)
+
+<!--     ![image](https://user-images.githubusercontent.com/35857179/161903214-1e0f7ba0-6daf-4073-90c9-9d86a40c9f90.png) -->
 
 2. Enter the user's `E-mail`. Select `User Role`, and Click `Invite`.
 
@@ -23,14 +32,25 @@ Team & Auth can be found by clicking `Team & Settings` from the left navigation
         Tip: You can add multiple comma (,) seperated emails
     </alert>
 
-    ![image](https://user-images.githubusercontent.com/35857179/161903296-cd6ea0d5-193f-4e66-aa7a-4cfc468216af.png)
+![Screenshot 2022-09-13 at 10 54 39 AM](https://user-images.githubusercontent.com/86527202/189817152-83fca866-7713-49ee-8068-d3eba1311353.png)
+
+If you do not have an SMTP sender configured, make sure to copy the invite link and manually send it to your collaborator.
+    
+![Screenshot 2022-09-13 at 10 54 22 AM](https://user-images.githubusercontent.com/86527202/189817156-f3dab634-dc25-4f9b-8126-865187aae254.png)
+
+
+## How to Update user permissions
+
+1. Use `Edit` <1> menu to assign a different role to existing user
+2. Use `Delete` <2> menu to remove a user from accessing current project
+  
+![Screenshot 2022-09-13 at 11 06 16 AM](https://user-images.githubusercontent.com/86527202/189818302-80a05245-9dc1-4364-b380-7bd698e5b9e0.png)
 
-    If you do not have an SMTP sender configured, make sure to copy the invite link and manually send it to your collaborator.
 
-    ![image](https://user-images.githubusercontent.com/35857179/161903764-1c875441-87f4-4b25-a864-441a23c96cea.png)
+------
 
 
-## User Role Permissions
+# User Role Permissions
 
 ### Advanced Options & Configurations
 | &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; Owner &nbsp; &nbsp;| &nbsp; &nbsp; Creator &nbsp; &nbsp; | &nbsp; &nbsp; Editor &nbsp; &nbsp;| Commenter | &nbsp; &nbsp; Viewer &nbsp; &nbsp;|
diff --git a/packages/noco-docs/content/en/setup-and-usages/views.md b/packages/noco-docs/content/en/setup-and-usages/views.md
index c003d4bd99..e04162c824 100644
--- a/packages/noco-docs/content/en/setup-and-usages/views.md
+++ b/packages/noco-docs/content/en/setup-and-usages/views.md
@@ -10,84 +10,100 @@ menuTitle: 'Views'
 
 In a table, you can use different views to display your data. You can show specific fields in a View. You can also apply Sorting or Filtering to the View. Each View is independent, which means the configuration applying to View 1 will not apply to View 2. 
 
-To navigate different views, we can select the target one in the view sidebar. By default, Grid View will be created for you after creating the table.You can create multiple views with the same type as you wish, as long as they have unique View names.
+To navigate different views, we can select the target one in the view sidebar. By default, Grid View will be created for you after creating the table. You can create multiple views of a type, as long as they have unique View names.
 
-![image](https://user-images.githubusercontent.com/35857179/163340916-d1101709-2051-4d0e-9d86-dd14eced49e9.png)
+## View Menu Bar
+To work with `Views`, use View menu-bar on the right hand side - 
+- <1> Toggle View menu-bar.
+- <2> Displays created view-list for the selected table
+  - Currently active view is high-lighted   
+- <3> Add new view to the list
+
+![Screenshot 2022-09-09 at 2 56 15 PM](https://user-images.githubusercontent.com/86527202/189321194-303c4a8c-d9a1-4368-962c-c7596763efb6.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163340916-d1101709-2051-4d0e-9d86-dd14eced49e9.png) -->
 
 ## View Types
 
 ### Grid View
 
 Grid View, as a default type of view, allows you to display your data in a spreadsheet-like interface.
-
-![image](https://user-images.githubusercontent.com/35857179/163343433-f6594d6e-5874-45ae-b403-5774247659bb.png)
+  
+![image](https://user-images.githubusercontent.com/86527202/189322133-04bddf2b-c885-49ca-aa8e-2a09ac755555.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163343433-f6594d6e-5874-45ae-b403-5774247659bb.png) -->
 
 ### Form View
 
 Form View allows you to arrange fields in a form to input data.
+  
+https://user-images.githubusercontent.com/35857179/188585121-94d0260d-6dbd-4e34-9758-a1a3709fc416.png
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163355269-73d2a9d4-bafb-47c0-8c0d-d0e66503b47a.png) -->
 
-![image](https://user-images.githubusercontent.com/35857179/163355269-73d2a9d4-bafb-47c0-8c0d-d0e66503b47a.png)
-
-You can show and hide some fields using drag-and-drop fashion.
+You can drag-drop columns from the form to form-field-menu-bar as requried.
 
-![image](https://user-images.githubusercontent.com/35857179/163355377-6b365472-efae-4f73-a103-5dde7c1f8ea7.png)
 
 ### Gallery View
 
 Gallery View allows you to display images as thumbnails with other fields just like a gallery.
-
-<!-- TODO: add screenshots -->
-
+  
+![image](https://user-images.githubusercontent.com/86527202/189322216-f8df0b69-5177-4ebc-be28-c11e3efb41a4.png)
+  
+  
 ## View Permission Types
 
-We can apply permission to each View. By default, Collaborative Views will be used. To see or change the view type, check the first icon above the View sidebar. 
+We can apply permission to each View. By default, Collaborative Views will be used. To see or change the view type, expand `view-tool-bar-menu` as shown below. 
 
-![image](https://user-images.githubusercontent.com/35857179/163343598-fd81edea-f160-41ee-8bb2-3ef1eee5348d.png)
+![Screenshot 2022-09-09 at 3 46 33 PM](https://user-images.githubusercontent.com/86527202/189328303-edbf35b5-f793-4e06-9dbf-89d045a38482.png)
+<!-- ![Screenshot 2022-09-09 at 3 19 00 PM](https://user-images.githubusercontent.com/86527202/189323062-5be6bd3f-366a-4be2-8de0-df30fcd1808e.png) -->
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163343598-fd81edea-f160-41ee-8bb2-3ef1eee5348d.png) -->
 
-### Collaborative Views
-
-Collaborative View allows you to work with your collaborators with edit permissions. 
-
-![image](https://user-images.githubusercontent.com/35857179/163343959-7e2f43cb-1a1f-4f36-985c-ca91db262f98.png)
+### Collaborative Views (default)
+- Collaborators with edit permissions or higher can change the view configurations
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163343959-7e2f43cb-1a1f-4f36-985c-ca91db262f98.png) -->
 
 ### Locked Views
+- No one can edit view configurations until it is Unlocked
+- All collaborators can only READ data from such views
 
-Locked View allows you to lock the current View so that no one can edit the View including applying operations such as Sorting or Filtering.
+### Personal Views
+- Only you can edit the view configuration. 
+- Your personal views are hidden for other collaborators
+- Are not available currently; will be enabled in future release
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163343845-b07f9d3f-5a83-4dfd-8d45-9cc59b3512c3.png) -->
 
-![image](https://user-images.githubusercontent.com/35857179/163343845-b07f9d3f-5a83-4dfd-8d45-9cc59b3512c3.png)
 
 ## View Operations
+  
+![Screenshot 2022-09-09 at 3 27 46 PM](https://user-images.githubusercontent.com/86527202/189325592-302054da-a755-4a92-a322-80aed184ca3b.png)
 
-### Create a View
 
-Click '+' in View sidebar.
+### Create a View
 
-![image](https://user-images.githubusercontent.com/35857179/163353610-ae85967c-91ac-404f-b3b3-bd122e09f492.png)
+Click '+' in View-menu sidebar, as shown in <3>.
 
 ### Rename a View
 
-Hover the target View, click the icon and enter the new name.
+Double click on `view-name`, edit, <enter>.
 
-![image](https://user-images.githubusercontent.com/35857179/163353802-1da52cec-ae17-4ced-8679-62d7180683ec.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163353802-1da52cec-ae17-4ced-8679-62d7180683ec.png) -->
 
 ### Delete a View
 
-Hover the target View and click the delete icon.
+Hover the target View and click the delete icon, as shown in <2>.
 
 <alert>
-You cannot delete the very first Grid View.
+You cannot delete the very first Grid View (termed as `Default view`).
 </alert>
 
-![image](https://user-images.githubusercontent.com/35857179/163359795-f4420402-b2a6-41d8-b48c-f0dea8b9abbe.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163359795-f4420402-b2a6-41d8-b48c-f0dea8b9abbe.png) -->
 
 ### Duplicate a View
 
-Hover the target View and click the icon and enter the new name.
+Hover the target View and click the copy icon, as shown in <2>.
 
-![image](https://user-images.githubusercontent.com/35857179/163353865-7275499e-c685-44f4-906c-ba08f0ee419e.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163353865-7275499e-c685-44f4-906c-ba08f0ee419e.png) -->
 
 ### Reorder a View
 
-Hover the target View and re-order it as needed by dragging and dropping the drag icon.
+Hover the target View and re-order it as needed by drag-drop the drag icon, as shown in <1>.
 
-![image](https://user-images.githubusercontent.com/35857179/163359674-c4aeff74-1cb4-498d-b79c-c6ddf84ad352.png)
+<!-- ![image](https://user-images.githubusercontent.com/35857179/163359674-c4aeff74-1cb4-498d-b79c-c6ddf84ad352.png) -->
diff --git a/packages/nocodb/Dockerfile b/packages/nocodb/Dockerfile
index 73f214b430..9e9b555004 100644
--- a/packages/nocodb/Dockerfile
+++ b/packages/nocodb/Dockerfile
@@ -26,7 +26,7 @@ WORKDIR /usr/src/app
 # Copying this separately prevents re-running npm ci on every code change.
 COPY ./package*.json ./
 COPY ./docker/main.js ./docker/main.js
-#COPY ./docker/start.sh /usr/src/appEntry/start.s
+#COPY ./docker/start.sh /usr/src/appEntry/start.sh
 COPY ./docker/start-litestream.sh /usr/src/appEntry/start.sh
 
 # install production dependencies,