diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index f15d6b19d6..49355fa497 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -31,31 +31,6 @@ nav .v-list {
   @apply dark:bg-white
 }
 
-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
-  @apply transition-opacity duration-300 ease-in-out;
-}
-
-.page-enter,
-.page-leave-active,
-.layout-enter,
-.layout-leave-active {
-  @apply opacity-0;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  @apply transition-all duration-200 ease-in-out;
-  transform: translate(100%, 0);
-}
-
-.slide-enter,
-.slide-leave-active {
-  transform: translate(-100%, 0);
-}
-
 a {
   @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
 }
@@ -153,3 +128,42 @@ html {
     background-position: 0% 22%
   }
 }
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  @apply transition-opacity duration-300 ease-in-out;
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+  @apply opacity-0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  @apply transition-all duration-200 ease-in-out;
+  transform: translate(100%, 0);
+}
+
+.slide-enter,
+.slide-leave-active {
+  transform: translate(-100%, 0);
+}
+
+.glow-enter-active,
+.glow-leave-active {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+.glow-enter-active {
+  @apply ring ring-xl;
+}
+
+.glow-enter,
+.glow-leave-active {
+  @apply opacity-0;
+}
\ No newline at end of file
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index a70885e604..40939c6f17 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -61,27 +61,31 @@ declare module '@vue/runtime-core' {
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
     CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
+    ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
     IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
     IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
     IcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    MaterialSymbolsArrowCircleLeftRounded: typeof import('~icons/material-symbols/arrow-circle-left-rounded')['default']
+    MaterialSymbolsArrowCircleRightRounded: typeof import('~icons/material-symbols/arrow-circle-right-rounded')['default']
     MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
     MaterialSymbolsChevronLeftRounded: typeof import('~icons/material-symbols/chevron-left-rounded')['default']
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsCloseRounded: typeof import('~icons/material-symbols/close-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
+    MaterialSymbolsRocketLaunchOutline: typeof import('~icons/material-symbols/rocket-launch-outline')['default']
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MaterialSymbolsWarning: typeof import('~icons/material-symbols/warning')['default']
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
-    MdiAccountIcon: typeof import('~icons/mdi/account-icon')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
     MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
@@ -90,6 +94,7 @@ declare module '@vue/runtime-core' {
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
+    MdiBugOutline: typeof import('~icons/mdi/bug-outline')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
@@ -100,21 +105,29 @@ declare module '@vue/runtime-core' {
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
+    MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
+    MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
+    MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
-    MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
+    MdiDownloadOutline: typeof import('~icons/mdi/download-outline')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
     MdiDragVertical: typeof import('~icons/mdi/drag-vertical')['default']
     MdiDramaMasks: typeof import('~icons/mdi/drama-masks')['default']
+    MdiEditOutline: typeof import('~icons/mdi/edit-outline')['default']
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
+    MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
+    MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
+    MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
+    MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
@@ -136,10 +149,13 @@ declare module '@vue/runtime-core' {
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
+    MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
+    MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
-    MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
@@ -147,10 +163,13 @@ declare module '@vue/runtime-core' {
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
+    MdiTableLarge: typeof import('~icons/mdi/table-large')['default']
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiTwitter: typeof import('~icons/mdi/twitter')['default']
+    MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
+    MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/nc-gui-v2/components/api-client/Headers.vue b/packages/nc-gui-v2/components/api-client/Headers.vue
index e465ffcdfc..7d5685275b 100644
--- a/packages/nc-gui-v2/components/api-client/Headers.vue
+++ b/packages/nc-gui-v2/components/api-client/Headers.vue
@@ -85,7 +85,7 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
               <a-checkbox v-model:checked="headerRow.enabled" />
             </a-form-item>
           </td>
-          <td class="px-2">
+          <td class="px-2 w-min-[400px]">
             <a-form-item>
               <a-select v-model:value="headerRow.name" size="large" placeholder="Key">
                 <a-select-option v-for="(header, i) in headerList" :key="i" :value="header">
@@ -94,7 +94,7 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
               </a-select>
             </a-form-item>
           </td>
-          <td class="px-2">
+          <td class="px-2 w-min-[400px]">
             <a-form-item>
               <a-input v-model:value="headerRow.value" size="large" placeholder="Value" />
             </a-form-item>
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 3b95868d8d..3b17503d6b 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, EditModeInj, computed, inject, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: string | null | undefined
+  modelValue?: string | null
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const columnMeta = inject(ColumnInj, null)
+const columnMeta = inject(ColumnInj, null)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 let isDateInvalid = $ref(false)
 
@@ -43,7 +42,7 @@ const localState = $computed({
     }
   },
 })
-const open = ref(false)
+const open = ref<boolean>(false)
 
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
@@ -55,6 +54,8 @@ watch(
   },
   { flush: 'post' },
 )
+
+const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : editEnabled.value ? 'Select date' : ''))
 </script>
 
 <template>
@@ -63,7 +64,7 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     :format="dateFormat"
-    :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
+    :placeholder="placeholder"
     :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 97fba2b1a8..dd114415a4 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,12 +1,23 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import type { SelectOptionType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
-import { EditModeInj } from '~/context'
+import type { SelectOptionsType } from 'nocodb-sdk'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  ReadonlyInj,
+  computed,
+  h,
+  inject,
+  onMounted,
+  ref,
+  useEventListener,
+  useProject,
+  watch,
+} from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue?: string | string[] | undefined
+  modelValue?: string | string[]
 }
 
 const { modelValue } = defineProps<Props>()
@@ -15,11 +26,9 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
-// const isForm = inject<boolean>('isForm', false)
-
-const editEnabled = inject(EditModeInj)
+const readOnly = inject(ReadonlyInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -29,12 +38,12 @@ const aselect = ref<typeof AntSelect>()
 
 const isOpen = ref(false)
 
-const options = computed(() => {
+const options = computed<SelectOptionsType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
-      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      ? (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
       : []
-    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+    for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
     return opts
@@ -43,7 +52,7 @@ const options = computed(() => {
 })
 
 const vModel = computed({
-  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el)?.title),
+  get: () => selectedIds.value.map((el) => options.value.find((op) => op.id === el)?.title),
   set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
@@ -52,10 +61,10 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el: SelectOptionType) => el.title === a)
-            const opb = options.value.find((el: SelectOptionType) => el.title === b)
+            const opa = options.value.find((el) => el.title === a)
+            const opb = options.value.find((el) => el.title === b)
             if (opa && opb) {
-              return opa.order - opb.order
+              return opa.order! - opb.order!
             }
             return 0
           })
@@ -83,8 +92,13 @@ const handleClose = (e: MouseEvent) => {
 }
 
 onMounted(() => {
-  selectedIds.value = selectedTitles.value.map((el) => {
-    return options.value.find((op: SelectOptionType) => op.title === el).id
+  selectedIds.value = selectedTitles.value.flatMap((el) => {
+    const item = options.value.find((op) => op.title === el)?.id
+    if (item) {
+      return [item]
+    }
+
+    return []
   })
 })
 
@@ -92,17 +106,20 @@ useEventListener(document, 'click', handleClose)
 
 watch(
   () => modelValue,
-  (_n, _o) => {
-    selectedIds.value = selectedTitles.value.map((el) => {
-      return options.value.find((op: SelectOptionType) => op.title === el).id
+  () => {
+    selectedIds.value = selectedIds.value = selectedTitles.value.flatMap((el) => {
+      const item = options.value.find((op) => op.title === el)?.id
+      if (item) {
+        return [item]
+      }
+
+      return []
     })
   },
 )
 
 watch(isOpen, (n, _o) => {
-  if (n === false) {
-    aselect.value.blur()
-  }
+  if (!n) aselect.value?.$el.blur()
 })
 </script>
 
@@ -112,12 +129,12 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
-    placeholder="Select an option"
+    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
-    show-arrow
+    :show-arrow="!readOnly"
     :show-search="false"
     :open="isOpen"
-    :disabled="!editEnabled"
+    :disabled="readOnly"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
   >
@@ -128,10 +145,10 @@ watch(isOpen, (n, _o) => {
     </a-select-option>
     <template #tagRender="{ value: val, onClose }">
       <a-tag
-        v-if="options.find((el: SelectOptionType) => el.title === val)"
+        v-if="options.find((el) => el.title === val)"
         class="rounded-tag"
         :style="{ display: 'flex', alignItems: 'center' }"
-        :color="options.find((el: SelectOptionType) => el.title === val).color"
+        :color="options.find((el) => el.title === val).color"
         :closable="active && (vModel.length > 1 || !column?.rqd)"
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 821ba945c4..5b4881126b 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import type { SelectOptionType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
-import { EditModeInj } from '~/context'
+import type { SelectOptionsType } from 'nocodb-sdk'
+import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -12,11 +11,9 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
-// const isForm = inject<boolean>('isForm', false)
-
-const editEnabled = inject(EditModeInj)
+const readOnly = inject(ReadonlyInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -29,12 +26,13 @@ const vModel = computed({
   set: (val) => emit('update:modelValue', val || null),
 })
 
-const options = computed(() => {
+const options = computed<SelectOptionsType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
-      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      ? // todo: fix colOptions type, options does not exist as a property
+        (column.value.colOptions as any).options.filter((el: SelectOptionsType) => el.title !== '') || []
       : []
-    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+    for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
     return opts
@@ -61,9 +59,7 @@ const handleClose = (e: MouseEvent) => {
 useEventListener(document, 'click', handleClose)
 
 watch(isOpen, (n, _o) => {
-  if (n === false) {
-    aselect.value.blur()
-  }
+  if (!n) aselect.value?.$el.blur()
 })
 </script>
 
@@ -73,11 +69,11 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     class="w-full"
     :allow-clear="!column.rqd && active"
-    placeholder="Select an option"
+    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
     :open="isOpen"
-    :disabled="!editEnabled"
-    :show-arrow="active || vModel === null"
+    :disabled="readOnly"
+    :show-arrow="!readOnly && (active || vModel === null)"
     @select="isOpen = false"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index f5200c1bcd..5cddb7349c 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, computed, inject, isValidURL } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
 
 interface Props {
-  modelValue: string | null | undefined
+  modelValue?: string | null
 }
 
 const { modelValue: value } = defineProps<Props>()
@@ -13,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 const vModel = computed({
   get: () => value,
@@ -26,10 +25,12 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const url = computed<string | null>(() => {
-  if (!value || !isValidURL(value)) return null
+const url = computed(() => {
+  if (!value || !isValidURL(value)) return ''
+
   /** add url scheme if missing */
   if (/^https?:\/\//.test(value)) return value
+
   return `https://${value}`
 })
 
@@ -38,7 +39,9 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 <template>
   <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
+
   <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
+
   <span v-else>{{ value }}</span>
 </template>
 
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 940fe3a4e9..039331df24 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { EditModeInj } from '~/context'
+import { EditModeInj, computed, inject, onClickOutside, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: number | string | null | undefined
+  modelValue?: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 let isYearInvalid = $ref(false)
 
@@ -41,7 +40,7 @@ const localState = $computed({
   },
 })
 
-const open = ref(false)
+const open = ref<boolean>(false)
 
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
@@ -53,6 +52,8 @@ watch(
   },
   { flush: 'post' },
 )
+
+const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : editEnabled.value ? 'Select year' : ''))
 </script>
 
 <template>
@@ -61,7 +62,7 @@ watch(
     picker="year"
     :bordered="false"
     class="!w-full px-1"
-    :placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
+    :placeholder="placeholder"
     :allow-clear="!editEnabled"
     :input-read-only="true"
     :open="editEnabled ? false : open"
@@ -72,5 +73,3 @@ watch(
     <template #suffixIcon></template>
   </a-date-picker>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index 0b3b91cf3f..902cb57153 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
-import { isImage } from '~/utils'
-import { computed, onClickOutside, ref } from '#imports'
-import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
-import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
-import MdiCloseCircle from '~icons/mdi/close-circle'
+import { computed, isImage, onClickOutside, ref } from '#imports'
 
 const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index c17763bdce..7ffec69130 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -2,8 +2,7 @@
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import { ref, useDropZone, useUIPermission } from '#imports'
-import { isImage, openLink } from '~/utils'
+import { isImage, openLink, ref, useDropZone, useUIPermission, watch } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -39,6 +38,22 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
+
+function onClick(item: Record<string, any>) {
+  selectedImage.value = item
+  modalVisible.value = false
+
+  const stopHandle = watch(selectedImage, (nextImage, _, onCleanup) => {
+    if (!nextImage) {
+      setTimeout(() => {
+        modalVisible.value = true
+      }, 50)
+      stopHandle?.()
+    }
+
+    onCleanup(() => stopHandle?.())
+  })
+}
 </script>
 
 <template>
@@ -103,7 +118,7 @@ onKeyDown('Escape', () => {
                 v-if="isImage(item.title, item.mimetype)"
                 :style="{ backgroundImage: `url('${item.url}')` }"
                 class="w-full h-full bg-contain bg-center bg-no-repeat"
-                @click.stop="() => (selectedImage = item) && (modalVisible = false)"
+                @click.stop="onClick(item)"
               />
 
               <component
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 0a962539fb..33db7c7b83 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -4,8 +4,7 @@ import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { computed, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
-import { isImage, openLink } from '~/utils'
+import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index bbfa6b86e4..ed0aab1982 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -141,7 +141,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       editEnabled,
       isLoading,
       api,
-      open,
+      open: () => open(),
       onDrop,
       modalVisible,
       FileIcon,
@@ -151,5 +151,5 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       selectedImage,
     }
   },
-  'attachmentCell',
+  'useAttachmentCell',
 )
diff --git a/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue b/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
new file mode 100644
index 0000000000..e0ec0a793e
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import GithubButton from 'vue-github-button'
+</script>
+
+<template>
+  <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large"
+    >Star</GithubButton
+  >
+</template>
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 2d3775cc60..7e5ad0f52a 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -3,12 +3,13 @@ import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { Empty } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
-import { computed, useProject, useTable, useTabs, watchEffect } from '#imports'
+import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
 import { TabType } from '~/composables'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiDrag from '~icons/mdi/drag-vertical'
+import GithubStarButton from '~/components/dashboard/GithubStarButton.vue'
 
 const { addTab } = useTabs()
 
@@ -136,7 +137,7 @@ const activeTable = computed(() => {
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <div class="px-6 py-[8.75px] border-b-1 nc-filter-input">
+    <div class="px-6 py-[9px] border-b-1 nc-filter-input">
       <div class="flex items-center bg-gray-50 rounded relative">
         <a-input
           v-model:value="filterQuery"
@@ -266,6 +267,12 @@ const activeTable = computed(() => {
       </template>
     </a-dropdown>
 
+    <a-divider class="mt-0 mb-2" />
+
+    <div class="items-center flex justify-center mb-1">
+      <GithubStarButton />
+    </div>
+
     <DlgTableCreate v-if="tableCreateDlg" v-model="tableCreateDlg" />
     <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Misc.vue b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
new file mode 100644
index 0000000000..117d48f186
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { includeM2M } = useGlobal()
+const { loadTables } = useProject()
+
+watch(includeM2M, async () => await loadTables())
+</script>
+
+<template>
+  <div class="flex flex-row w-full">
+    <div class="flex flex-column w-full">
+      <div class="flex flex-row items-center w-full mb-4 gap-2">
+        <a-checkbox v-model:checked="includeM2M">Show M2M Tables</a-checkbox>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
index b4a5fbbcff..e280c7c8cb 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
@@ -5,6 +5,7 @@ import AuditTab from './AuditTab.vue'
 import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
+import Misc from './Misc.vue'
 import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
 import UserManagement from '~/components/tabs/auth/UserManagement.vue'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
@@ -86,6 +87,10 @@ const tabsInfo: TabGroup = {
         title: 'UI Access Control',
         body: UIAcl,
       },
+      misc: {
+        title: 'Misc',
+        body: Misc,
+      },
     },
   },
   audit: {
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 4aaaf11afe..381f1cfaf8 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -7,6 +7,8 @@ const { $api, $e } = useNuxtApp()
 
 const { project } = useProject()
 
+const { includeM2M } = useGlobal()
+
 const roles = $ref<string[]>(['editor', 'commenter', 'viewer'])
 
 let isLoading = $ref(false)
@@ -28,9 +30,10 @@ async function loadTableList() {
     if (!project.value?.id) return
 
     isLoading = true
-    // TODO includeM2M
+
     tables = await $api.project.modelVisibilityList(project.value?.id, {
-      includeM2M: false,
+      // FIXME: type
+      includeM2M: includeM2M.value || '',
     })
   } catch (e) {
     console.error(e)
diff --git a/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue b/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
index 5928084ef0..1c589933ee 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { message } from 'ant-design-vue'
 import type { PluginType } from 'nocodb-sdk'
-import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
-import CloseIcon from '~icons/material-symbols/close-rounded'
-import MdiPlusIcon from '~icons/mdi/plus'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg, ref, useNuxtApp } from '#imports'
 
 interface Props {
   id: string
@@ -139,7 +135,7 @@ onMounted(async () => {
             class="mr-1 flex items-center justify-center"
             :class="[plugin.title === 'SES' ? 'p-2 bg-[#242f3e]' : '']"
           >
-            <img :src="`/${plugin.logo}`" class="h-6" />
+            <img :alt="plugin.title || 'plugin'" :src="`/${plugin.logo}`" class="h-6" />
           </div>
 
           <span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
@@ -147,7 +143,7 @@ onMounted(async () => {
         <div class="absolute -right-2 -top-0.5">
           <a-button type="text" class="!rounded-md mr-1" @click="emits('close')">
             <template #icon>
-              <CloseIcon class="flex mx-auto" />
+              <MaterialSymbolsCloseRounded class="flex mx-auto" />
             </template>
           </a-button>
         </div>
@@ -194,7 +190,7 @@ onMounted(async () => {
                       v-if="itemIndex !== 0 && columnIndex === plugin.formDetails.items.length - 1"
                       class="absolute flex flex-col justify-start mt-2 -right-6 top-0"
                     >
-                      <MdiDeleteOutlineIcon class="hover:text-red-400 cursor-pointer" @click="deleteFormRow(itemIndex)" />
+                      <MdiDeleteOutline class="hover:text-red-400 cursor-pointer" @click="deleteFormRow(itemIndex)" />
                     </div>
                   </a-form-item>
                 </td>
@@ -205,7 +201,7 @@ onMounted(async () => {
               <td :colspan="plugin.formDetails.items.length" class="text-center">
                 <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addSetting">
                   <template #icon>
-                    <MdiPlusIcon class="flex mx-auto" />
+                    <MdiPlus class="flex mx-auto" />
                   </template>
                 </a-button>
               </td>
diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
index c319f83299..d0d810a522 100644
--- a/packages/nc-gui-v2/components/general/ColorPicker.vue
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 import { Chrome } from '@ckpack/vue-color'
 import { enumColor } from '@/utils'
+import { computed, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: string | any
+  modelValue?: string | any
   colors?: string[]
   rowSize?: number
-  advanced?: Boolean
-  pickButton?: Boolean
+  advanced?: boolean
+  pickButton?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => enumColor.light[0],
   colors: () => enumColor.light.concat(enumColor.dark),
-  rowSize: () => 10,
-  advanced: () => true,
-  pickButton: () => false,
+  rowSize: 10,
+  advanced: true,
+  pickButton: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -27,23 +28,18 @@ const vModel = computed({
   },
 })
 
-const picked = ref(props.modelValue || enumColor.light[0])
+const picked = ref<string | Record<string, any>>(props.modelValue || enumColor.light[0])
 
-const selectColor = (color: any) => {
-  picked.value = color.hex ? color.hex : color
-  vModel.value = color.hex ? color.hex : color
+const selectColor = (color: string | Record<string, any>) => {
+  picked.value = typeof color === 'string' ? color : color.hex ? color.hex : color
+  vModel.value = typeof color === 'string' ? color : color.hex ? color.hex : color
 }
 
-const compare = (colorA: String, colorB: String) => {
-  if ((typeof colorA === 'string' || colorA instanceof String) && (typeof colorB === 'string' || colorB instanceof String)) {
-    return colorA.toLowerCase() === colorB.toLowerCase()
-  }
-  return false
-}
+const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
 
 watch(picked, (n, _o) => {
   if (!props.pickButton) {
-    vModel.value = n.hex ? n.hex : n
+    vModel.value = typeof n === 'string' ? n : n.hex ? n.hex : n
   }
 })
 </script>
@@ -52,7 +48,7 @@ watch(picked, (n, _o) => {
   <div class="color-picker">
     <div v-for="colId in Math.ceil(props.colors.length / props.rowSize)" :key="colId" class="color-picker-row">
       <button
-        v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)"
+        v-for="(color, i) of colors.slice((colId - 1) * rowSize, colId * rowSize)"
         :key="`color-${colId}-${i}`"
         class="color-selector"
         :class="compare(picked, color) ? 'selected' : ''"
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index e7d2e1cc88..2ac4a21ef2 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { onUnmounted, useEventListener, useGlobal, watch } from '#imports'
-import { useState } from '#app'
+import { onUnmounted, useEventListener, useGlobal, useState, watch } from '#imports'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
 import MdiAccountEdit from '~icons/mdi/account-edit'
@@ -54,13 +53,14 @@ watch(previewAs, () => window.location.reload())
     :style="{ top: position.y, left: position.x }"
   >
     <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
+
     <div class="divider" />
 
     <div class="pointer flex items-center gap-4">
       <span>Preview as :</span>
 
       <a-radio-group v-model:value="previewAs" name="radioGroup">
-        <a-radio v-for="role in roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
+        <a-radio v-for="role of roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
           >{{ role.title }}
         </a-radio>
       </a-radio-group>
@@ -77,8 +77,8 @@ watch(previewAs, () => window.location.reload())
   <template v-else>
     <template v-for="role of roleList" :key="role.title">
       <a-menu-item :class="`pointer nc-preview-${role.title}`" @click="previewAs = role.title">
-        <div class="p-1 flex gap-2 items-center">
-          <component :is="roleIcon[role.title]" />
+        <div class="nc-project-menu-item group">
+          <component :is="roleIcon[role.title]" class="group-hover:text-pink-500" />
 
           <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
         </div>
@@ -87,8 +87,8 @@ watch(previewAs, () => window.location.reload())
 
     <template v-if="previewAs">
       <a-menu-item @click="previewAs = null">
-        <div class="p-1 flex gap-2 items-center">
-          <mdi-close />
+        <div class="nc-project-menu-item group">
+          <MdiClose class="group-hover:text-pink-500" />
           <!-- Reset Preview -->
           <span class="text-capitalize text-xs whitespace-nowrap">{{ $t('activity.resetReview') }}</span>
         </div>
@@ -98,6 +98,10 @@ watch(previewAs, () => window.location.reload())
 </template>
 
 <style scoped>
+.nc-project-menu-item {
+  @apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
+}
+
 .floating-reset-btn {
   @apply z-1000 index-100 fixed text-white
   @apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md;
diff --git a/packages/nc-gui-v2/components/general/ReleaseInfo.vue b/packages/nc-gui-v2/components/general/ReleaseInfo.vue
new file mode 100644
index 0000000000..7f42fd24dc
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ReleaseInfo.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import { extractSdkResponseErrorMsg, onMounted } from '#imports'
+
+const { $api } = useNuxtApp()
+
+const { currentVersion, latestRelease, hiddenRelease } = useGlobal()
+
+const releaseAlert = computed(
+  () =>
+    currentVersion.value &&
+    latestRelease.value &&
+    currentVersion.value !== latestRelease.value &&
+    latestRelease.value !== hiddenRelease.value,
+)
+
+async function fetchReleaseInfo() {
+  try {
+    const versionInfo = await $api.utils.appVersion()
+    if (versionInfo && versionInfo.releaseVersion && versionInfo.currentVersion && !/[^0-9.]/.test(versionInfo.currentVersion)) {
+      currentVersion.value = versionInfo.currentVersion
+      latestRelease.value = versionInfo.releaseVersion
+    } else {
+      currentVersion.value = null
+      latestRelease.value = null
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+onMounted(async () => await fetchReleaseInfo())
+</script>
+
+<template>
+  <div v-if="releaseAlert" class="flex items-center">
+    <a-dropdown :trigger="['click']" placement="bottom">
+      <a-button class="bg-primary border-none">
+        <div class="flex gap-1 align-center text-white">
+          <span class="text-sm font-weight-medium">{{ $t('activity.upgrade.available') }}</span>
+          <mdi-menu-down />
+        </div>
+      </a-button>
+      <template #overlay>
+        <div class="mt-1 bg-white shadow-lg !border">
+          <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb/releases" target="_blank">
+            <div class="nc-menu-item">
+              <mdi-script-text-outline />
+              {{ latestRelease }} {{ $t('activity.upgrade.releaseNote') }}
+            </div>
+          </nuxt-link>
+          <nuxt-link class="text-primary" to="https://docs.nocodb.com/getting-started/upgrading" target="_blank">
+            <div class="nc-menu-item">
+              <mdi-rocket-launch-outline />
+              <!-- How to upgrade? -->
+              {{ $t('activity.upgrade.howTo') }}
+            </div>
+          </nuxt-link>
+          <a-divider class="ma-0" />
+          <div class="nc-menu-item" @click="latestRelease = null">
+            <mdi-close />
+            <!-- Hide menu -->
+            {{ $t('general.hideMenu') }}
+          </div>
+        </div>
+      </template>
+    </a-dropdown>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/general/ShareBaseButton.vue b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
new file mode 100644
index 0000000000..b33d45f67c
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useRoute } from '#imports'
+
+const route = useRoute()
+
+const showUserModal = $ref(false)
+
+const { isUIAllowed } = useUIPermission()
+</script>
+
+<template>
+  <div class="flex items-center mr-4">
+    <a-button
+      v-if="
+        isUIAllowed('newUser') &&
+        route.name !== 'index' &&
+        route.name !== 'project-index-create' &&
+        route.name !== 'project-index-create-external' &&
+        route.name !== 'index-user-index'
+      "
+      size="middle"
+      type="primary"
+      class="!bg-white !text-primary rounded"
+      @click="showUserModal = true"
+    >
+      <div class="flex items-center space-x-1">
+        <mdi-account-supervisor-outline class="mr-1" />
+        <div>{{ $t('activity.share') }}</div>
+      </div>
+    </a-button>
+    <TabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/general/SocialCard.vue b/packages/nc-gui-v2/components/general/SocialCard.vue
new file mode 100644
index 0000000000..6ca98e0114
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/SocialCard.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { enumColor as colors } from '#imports'
+
+const { lang: currentLang } = useGlobal()
+
+const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
+</script>
+
+<template>
+  <a-card :body-style="{ padding: '0' }" class="w-[300px] shadow-sm rounded-lg">
+    <a-list class="w-full" dense>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-github class="mx-3 text-lg" />
+            <div v-if="isRtlLang">
+              <!-- us on Github -->
+              {{ $t('labels.community.starUs2') }}
+              <!-- Star -->
+              {{ $t('labels.community.starUs1') }}
+              <mdi-star-outline />
+            </div>
+            <div v-else class="flex items-center">
+              <!-- Star -->
+              {{ $t('labels.community.starUs1') }}
+              <mdi-star-outline class="mx-1" />
+              <!-- us on Github -->
+              {{ $t('labels.community.starUs2') }}
+            </div>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
+            <!-- Book a Free DEMO -->
+            <div>
+              {{ $t('labels.community.bookDemo') }}
+            </div>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
+            <!-- Get your questions answered -->
+            <div>
+              {{ $t('labels.community.getAnswered') }}
+            </div>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
+            <!-- Follow NocoDB -->
+            <div>
+              {{ $t('labels.community.followNocodb') }}
+            </div>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item v-t="['e:hiring']">
+        <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
+          <div class="flex items-center text-sm">
+            <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+    </a-list>
+  </a-card>
+</template>
+
+<style scoped>
+:deep(.ant-list-item) {
+  @apply hover:(bg-gray-100 !text-primary);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue
index a1e6378b9a..8700a04108 100644
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@@ -1,37 +1,38 @@
 <script lang="ts" setup>
-import MdiHeartsCard from '~icons/mdi/cards-heart'
-
 interface Props {
   nav?: boolean
-  img?: boolean
 }
 
-const { nav = false, img = true } = defineProps<Props>()
+const { nav = false } = defineProps<Props>()
 </script>
 
 <template>
-  <v-card :rounded="0" class="dark:bg-gray-900" href="https://github.com/sponsors/nocodb" target="_blank">
-    <v-img v-if="img" src="/ants-leaf-cutter.jpeg" :cover="true" :aspect-ratio="1" :height="nav ? 80 : ''" />
+  <a-card class="w-[300px] shadow-sm rounded-lg">
+    <template #cover>
+      <img class="max-h-[180px] rounded-t-lg" alt="cover" src="/ants-leaf-cutter.jpeg" />
+    </template>
 
-    <v-card-title v-if="!nav" class="pb-2">
-      {{ $t('msg.info.sponsor.header') }}
-    </v-card-title>
+    <a-card-meta>
+      <template #title>
+        <span v-if="!nav" class="text-xl pb-4">
+          {{ $t('msg.info.sponsor.header') }}
+        </span>
+      </template>
+    </a-card-meta>
 
-    <v-card-text v-if="!nav" class="pb-0">
+    <div v-if="!nav" class="py-5 text-sm">
       {{ $t('msg.info.sponsor.message') }}
-    </v-card-text>
+    </div>
 
-    <v-card-actions class="justify-center">
-      <v-btn color="primary" class="dark:(!text-white)">
-        <MdiHeartsCard class="text-red-500 mr-2" />
-        {{ $t('activity.sponsorUs') }}
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+    <div class="flex justify-center">
+      <nuxt-link href="https://github.com/sponsors/nocodb" target="_blank">
+        <a-button class="!shadow rounded" size="large">
+          <div class="flex items-center">
+            <mdi-cards-heart class="text-red-500 mr-2" />
+            {{ $t('activity.sponsorUs') }}
+          </div>
+        </a-button>
+      </nuxt-link>
+    </div>
+  </a-card>
 </template>
-
-<style>
-a img {
-  margin: 0 !important;
-}
-</style>
diff --git a/packages/nc-gui-v2/components/shared-view/AskPassword.vue b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
new file mode 100644
index 0000000000..83f0481245
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import { extractSdkResponseErrorMsg } from '~/utils'
+
+interface Props {
+  modelValue: boolean
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+
+const route = useRoute()
+const { loadSharedView } = useSharedView()
+
+const formState = ref({ password: undefined })
+const vModel = useVModel(props, 'modelValue', emit)
+
+const onFinish = async () => {
+  try {
+    await loadSharedView(route.params.viewId as string, formState.value.password)
+    vModel.value = false
+  } catch (e: any) {
+    console.error(e)
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+</script>
+
+<template>
+  <a-modal
+    v-model:visible="vModel"
+    :closable="false"
+    width="28rem"
+    centered
+    :footer="null"
+    :mask-closable="false"
+    @close="vModel = false"
+  >
+    <div class="w-full flex flex-col">
+      <a-typography-title :level="4">This shared view is protected</a-typography-title>
+      <a-form ref="formRef" :model="formState" class="mt-2" @finish="onFinish">
+        <a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]">
+          <a-input-password v-model:value="formState.password" placeholder="Enter password" />
+        </a-form-item>
+        <a-button type="primary" html-type="submit">Unlock</a-button>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
new file mode 100644
index 0000000000..c8ab68b353
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { FieldsInj, MetaInj } from '#imports'
+
+const fields = inject(FieldsInj, ref([]))
+const meta = inject(MetaInj)
+const { sharedView } = useSharedView()
+
+const formState = ref(fields.value.reduce((a, v) => ({ ...a, [v.title]: undefined }), {}))
+
+function isRequired(_columnObj: Record<string, any>, required = false) {
+  let columnObj = _columnObj
+  if (
+    columnObj.uidt === UITypes.LinkToAnotherRecord &&
+    columnObj.colOptions &&
+    columnObj.colOptions.type === RelationTypes.BELONGS_TO
+  ) {
+    columnObj = fields.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
+  }
+
+  return required || (columnObj && columnObj.rqd && !columnObj.cdf)
+}
+
+useSmartsheetStoreOrThrow()
+useProvideSmartsheetRowStore(meta, formState)
+
+const formRef = ref()
+</script>
+
+<template>
+  <div class="flex flex-col my-4 space-y-2 mx-32 items-center">
+    <div class="flex w-2/3 flex-col mt-10">
+      <div class="flex flex-col items-start px-14 py-8 bg-gray-50 rounded-md w-full">
+        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3" :level="1">
+          {{ sharedView.view.heading }}
+        </a-typography-title>
+        <a-typography class="pl-1 text-sm">{{ sharedView.view.subheading }}</a-typography>
+      </div>
+
+      <a-form ref="formRef" :model="formState" class="mt-8 pb-12 mb-8 px-3 bg-gray-50 rounded-md">
+        <div v-for="(field, index) in fields" :key="index" class="flex flex-col mt-4 px-10 pt-6 space-y-2">
+          <div class="flex">
+            <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>
+          <a-form-item
+            v-if="isVirtualCol(field)"
+            class="ma-0 gap-0 pa-0"
+            :name="field.title"
+            :rules="[{ required: field.required, message: `${field.title} is required` }]"
+          >
+            <SmartsheetVirtualCell v-model="formState[field.title]" class="nc-input" :column="field" />
+          </a-form-item>
+          <a-form-item
+            v-else
+            class="ma-0 gap-0 pa-0"
+            :name="field.title"
+            :rules="[{ required: field.required, message: `${field.title} is required` }]"
+          >
+            <SmartsheetCell v-model="formState[field.title]" class="nc-input" :column="field" :edit-enabled="true" />
+          </a-form-item>
+        </div>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nc-input {
+  @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex align-center border-solid border-1 border-primary;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
new file mode 100644
index 0000000000..7a39c09f98
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk'
+
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+
+const { sharedView, meta, columns } = useSharedView()
+
+const reloadEventHook = createEventHook<void>()
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(ReadonlyInj, ref(true))
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, columns)
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+</script>
+
+<template>
+  <div class="nc-container flex flex-col h-full mt-4 px-6">
+    <SmartsheetToolbar />
+    <SmartsheetGrid class="px-3" />
+  </div>
+</template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 78be8575dd..743e9c7d8f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -17,9 +17,9 @@ const { formState, generateNewColumnMeta, addOrUpdate, onAlter, onUidtOrIdTypeCh
 const reloadDataTrigger = inject(ReloadViewDataHookInj)
 
 const advancedOptions = ref(false)
+
 const { getMeta } = useMetas()
 
-const formulaOptionsRef = ref()
 const editOrAddRef = ref<HTMLElement>()
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
@@ -74,35 +74,27 @@ onMounted(() => {
     generateNewColumnMeta()
   }
 
-  if (formState.value.uidt === UITypes.Formula) {
-    formulaOptionsRef.value.formulaSuggestionDrawer = true
-  }
-
   // for cases like formula
   if (formState.value && !formState.value.column_name) {
     formState.value.column_name = formState.value?.title
   }
 })
 
-onUnmounted(() => {
-  if (formState.value.uidt === UITypes.Formula) {
-    // close formula drawer
-    formulaOptionsRef.value.formulaSuggestionDrawer = false
-  }
-})
-
 const handleClose = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
   if (
-    e.target &&
+    target &&
     editOrAddRef?.value &&
-    !editOrAddRef.value.contains(e.target) &&
-    !e.target.closest('.ant-dropdown') &&
-    !e.target.closest('.ant-select') &&
-    !e.target.closest('.ant-select-item')
+    !editOrAddRef.value.contains(target) &&
+    !target.closest('.ant-dropdown') &&
+    !target.closest('.ant-select') &&
+    !target.closest('.ant-select-item')
   ) {
     emit('cancel')
   }
 }
+
 useEventListener(document, 'click', handleClose)
 </script>
 
@@ -127,11 +119,7 @@ useEventListener(document, 'click', handleClose)
             </a-select-option>
           </a-select>
         </a-form-item>
-        <SmartsheetColumnFormulaOptions
-          v-if="formState.uidt === UITypes.Formula"
-          ref="formulaOptionsRef"
-          v-model:value="formState"
-        />
+        <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" />
         <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
         <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
         <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />
diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index c3c2dda53d..ba57f2d5bf 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -4,9 +4,8 @@ import type { ListItem as AntListItem } from 'ant-design-vue'
 import jsep from 'jsep'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
-import { onMounted, useDebounceFn } from '#imports'
-import { MetaInj } from '~/context'
 import {
+  MetaInj,
   NcAutocompleteTree,
   formulaList,
   formulaTypes,
@@ -14,8 +13,11 @@ import {
   getUIDTIcon,
   getWordUntilCaret,
   insertAtCursor,
+  onMounted,
+  useColumnCreateStoreOrThrow,
+  useDebounceFn,
   validateDateWithUnknownFormat,
-} from '@/utils'
+} from '#imports'
 
 interface Props {
   value: Record<string, any>
@@ -59,8 +61,6 @@ const validators = {
   ],
 }
 
-const formulaSuggestionDrawer = ref(true)
-
 const availableFunctions = formulaList
 
 const availableBinOps = ['+', '-', '*', '/', '>', '<', '==', '<=', '>=', '!=']
@@ -597,10 +597,6 @@ setAdditionalValidations({
   ...validators,
 })
 
-defineExpose({
-  formulaSuggestionDrawer,
-})
-
 onMounted(() => {
   jsep.plugins.register(jsepCurlyHook)
 })
@@ -612,7 +608,7 @@ onMounted(() => {
       <a-textarea
         ref="formulaRef"
         v-model:value="vModel.formula_raw"
-        class="mb-2"
+        class="mb-2 nc-formula-input"
         @keydown.down.prevent="suggestionListDown"
         @keydown.up.prevent="suggestionListUp"
         @keydown.enter.prevent="selectText"
@@ -621,10 +617,11 @@ onMounted(() => {
     </a-form-item>
     <div class="text-gray-600 mt-2 mb-4 prose-sm">
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
-      <a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank"
-        >Formulas</a
-      >.
+      <a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">
+        Formulas.
+      </a>
     </div>
+
     <div class="h-[250px] overflow-auto scrollbar-thin-primary">
       <a-list ref="sugListRef" :data-source="suggestion" :locale="{ emptyText: 'No suggested formula was found' }">
         <template #renderItem="{ item, index }">
diff --git a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
index 237df7df5d..503ab38fa9 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
-import { MetaInj } from '~/context'
+import { MetaInj } from '#imports'
 
 interface Props {
   value: Record<string, any>
@@ -39,25 +39,22 @@ const refTables = $computed(() => {
   }
 
   return meta.columns
-    .filter((c: ColumnType) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
-    .map<TableType & { col: LinkToAnotherRecordType; column: ColumnType }>((c: ColumnType) => ({
+    ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
+    .map((c: ColumnType) => ({
       col: c.colOptions,
       column: c,
       ...tables.find((t) => t.id === (c.colOptions as LinkToAnotherRecordType).fk_related_model_id),
     }))
-    .filter(
-      (table: TableType & { col: LinkToAnotherRecordType; column: ColumnType }) =>
-        table.col.fk_related_model_id === table.id && !table.mm,
-    )
+    .filter((table: any) => table.col.fk_related_model_id === table.id && !table.mm)
 })
 
 const columns = $computed(() => {
-  const selectedTable = refTables.find((t) => t.column.id === vModel.value.fk_relation_column_id)
+  const selectedTable = refTables?.find((t) => t.column.id === vModel.value.fk_relation_column_id)
   if (!selectedTable?.id) {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c) => !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c: any) => !isSystemColumn(c))
 })
 </script>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 8da79dc159..30a67fe9df 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { inject, toRef } from 'vue'
-import { ColumnInj, IsFormInj } from '~/context'
+import { ColumnInj, IsFormInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
+
 const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean; hideMenu?: boolean }>()
 
 const hideMenu = toRef(props, 'hideMenu')
 
-const meta = inject(MetaInj)
-
 const isForm = inject(IsFormInj, ref(false))
 
 const column = toRef(props, 'column')
@@ -26,7 +24,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex align-center w-full text-xs font-weight-regular">
+  <div class="flex items-center w-full text-xs text-normal">
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 5c6b54173c..9a989e41f4 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,9 +1,19 @@
 <script setup lang="ts">
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
-import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
-import { ColumnInj, IsFormInj, MetaInj } from '~/context'
-import { provide, toRef, useMetas } from '#imports'
+import {
+  ColumnInj,
+  IsFormInj,
+  MetaInj,
+  computed,
+  inject,
+  provide,
+  ref,
+  toRef,
+  useMetas,
+  useUIPermission,
+  useVirtualCell,
+} from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required?: boolean }>()
 
@@ -49,12 +59,10 @@ const relatedTableTitle = $computed(() => relatedTableMeta?.title)
 const childColumn = $computed(() => {
   if (relatedTableMeta?.columns) {
     if (isRollup.value) {
-      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
-      return ch
+      return relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
     }
     if (isLookup.value) {
-      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
-      return ch
+      return relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
     }
   }
   return ''
@@ -93,11 +101,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="d-flex align-center w-full text-xs font-weight-regular">
-    <!--    <v-tooltip bottom>
-          <template #activator="{ on }">
-          todo: bring tooltip
-          -->
+  <div class="flex items-center w-full text-xs text-normal">
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
 
     <a-tooltip placement="bottom">
@@ -106,13 +110,10 @@ function onVisibleChange() {
       </template>
       <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
     </a-tooltip>
-    <span v-if="column.rqd || required" class="text-red-500">&nbsp;*</span>
 
-    <!--    <span class="caption" v-html="tooltipMsg" /> -->
+    <span v-if="column.rqd || required" class="text-red-500">&nbsp;*</span>
 
-    <!--    </v-tooltip> -->
     <template v-if="!hideMenu">
-      <v-spacer />
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 6b730127ff..09231feb10 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -8,17 +8,25 @@ import { comparisonOpList } from '~/utils/filterUtils'
 import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
+import type { Filter } from '~/lib/types'
 
-const { nested = false, parentId, autoSave = true } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean }>()
+const {
+  nested = false,
+  parentId,
+  autoSave = true,
+  hookId = null,
+  modelValue,
+} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string; modelValue?: Filter[] }>()
 
 const emit = defineEmits(['update:filtersLength'])
 
 const meta = inject(MetaInj)
+
 const activeView = inject(ActiveViewInj)
+
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 // todo: replace with inject or get from state
-const shared = ref(false)
 
 const { $e } = useNuxtApp()
 
@@ -29,6 +37,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   () => {
     reloadDataHook?.trigger()
   },
+  modelValue,
 )
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
@@ -76,7 +85,7 @@ const types = computed(() => {
 watch(
   () => (activeView?.value as any)?.id,
   (n, o) => {
-    if (n !== o) loadFilters()
+    if (n !== o) loadFilters(hookId as string)
   },
   { immediate: true },
 )
@@ -95,11 +104,11 @@ watch(
   },
 )
 
-const applyChanges = async () => {
-  await sync()
+const applyChanges = async (hookId?: string) => {
+  await sync(hookId)
   for (const nestedFilter of nestedFilters?.value || []) {
     if (nestedFilter.parentId) {
-      await nestedFilter.applyChanges(true)
+      await nestedFilter.applyChanges(hookId, true)
     }
   }
 }
@@ -145,7 +154,7 @@ defineExpose({
             <span class="col-span-3" />
             <div class="col-span-5">
               <SmartsheetToolbarColumnFilter
-                v-if="filter.id || shared"
+                v-if="filter.id || filter.children"
                 ref="nestedFilters"
                 v-model="filter.children"
                 :parent-id="filter.id"
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 6afb92c9fc..3274d16ecd 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { watchEffect } from '@vue/runtime-core'
 import type ColumnFilter from './ColumnFilter.vue'
-import { ActiveViewInj, IsLockedInj } from '~/context'
+import { ActiveViewInj, IsLockedInj, IsPublicInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const isLocked = inject(IsLockedInj)
 const activeView = inject(ActiveViewInj)
+const isPublic = inject(IsPublicInj)
 
 const { filterAutoSave } = useGlobal()
 
@@ -50,7 +51,7 @@ const applyChanges = async () => {
         :auto-save="filterAutoSave"
         @update:filters-length="filtersLength = $event"
       >
-        <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
+        <div v-if="!isPublic" class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
           <a-checkbox id="col-filter-checkbox" v-model:checked="filterAutoSave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 55cc86b8e9..abd0573159 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -21,7 +21,7 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
-} = useViewColumns(activeView, meta, false, () => reloadDataHook.trigger())
+} = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
   () => (activeView.value as any)?.id,
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index fe2ac2095b..f852b05a24 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -1,41 +1,41 @@
 <script lang="ts" setup>
 import * as XLSX from 'xlsx'
-import { ExportTypes } from 'nocodb-sdk'
+// todo: export types is missing EXCEL
+// import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
 import { message } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
-import { ActiveViewInj, MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils'
-import MdiFlashIcon from '~icons/mdi/flash-outline'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
-import MdiDownloadIcon from '~icons/mdi/download-outline'
-import MdiUploadIcon from '~icons/mdi/upload-outline'
-import MdiHookIcon from '~icons/mdi/hook'
-import MdiViewListIcon from '~icons/mdi/view-list-outline'
+import {
+  ActiveViewInj,
+  FieldsInj,
+  IsPublicInj,
+  MetaInj,
+  extractSdkResponseErrorMsg,
+  inject,
+  ref,
+  useNuxtApp,
+  useProject,
+  useUIPermission,
+} from '#imports'
+
+enum ExportTypes {
+  EXCEL = 'excel',
+  CSV = 'csv',
+}
 
 const sharedViewListDlg = ref(false)
 
-const publicViewId = null
+const isPublicView = inject(IsPublicInj, ref(false))
 
 const isView = false
 
 // TODO: pending for shared view
 
-// interface Props {
-//   publicViewId?: string
-//   queryParams?: Record<string, any>
-//   reqPayload?: Record<string, any>
-// }
-
-// const { publicViewId, queryParams, reqPayload } = defineProps<Props>()
-
 const { project } = useProject()
 
 const { $api } = useNuxtApp()
 
 const meta = inject(MetaInj)
-
+const fields = inject(FieldsInj, ref([]))
 const selectedView = inject(ActiveViewInj)
 
 const showWebhookDrawer = ref(false)
@@ -44,35 +44,17 @@ const quickImportDialog = ref(false)
 
 const { isUIAllowed } = useUIPermission()
 
-const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
+const exportFile = async (exportType: ExportTypes) => {
   let offset = 0
   let c = 1
   const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
+
   try {
     while (!isNaN(offset) && offset > -1) {
       let res
-      if (publicViewId) {
-        // TODO: pending for shared view
-        // const { data, headers } = await $api.public.csvExport(publicViewId, exportType, {
-        //   format: responseType,
-        //   query: {
-        //     fields:
-        //       queryParams && queryParams.fieldsOrder && queryParams.fieldsOrder.filter((c: number) => queryParams.showFields[c]),
-        //     offset,
-        //     sortArrJson: JSON.stringify(
-        //       reqPayload &&
-        //         reqPayload.sorts &&
-        //         reqPayload.sorts.map(({ fk_column_id, direction }) => ({
-        //           direction,
-        //           fk_column_id,
-        //         })),
-        //     ),
-        //     filterArrJson: JSON.stringify(reqPayload && reqPayload.filters),
-        //   },
-        //   headers: {
-        //     'xc-password': reqPayload && reqPayload.password,
-        //   },
-        // } as Record<string, any>)
+      if (isPublicView.value) {
+        const { exportFile: sharedViewExportFile } = useSharedView()
+        res = await sharedViewExportFile(fields.value, offset, exportType, responseType)
       } else {
         res = await $api.dbViewRow.export(
           'noco',
@@ -114,52 +96,59 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
     <a-dropdown>
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-1 align-center">
-          <MdiFlashIcon />
+          <MdiFlashOutline />
+
           <!-- More -->
           <span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
-          <MdiMenuDownIcon class="text-grey" />
+
+          <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
+
       <template #overlay>
         <div class="bg-white shadow-lg !border">
           <div>
             <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
-              <MdiDownloadIcon />
+              <MdiDownloadOutline />
               <!-- Download as CSV -->
               {{ $t('activity.downloadCSV') }}
             </div>
+
             <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
-              <MdiDownloadIcon />
+              <MdiDownloadOutline />
               <!-- Download as XLSX -->
               {{ $t('activity.downloadExcel') }}
             </div>
+
             <div
-              v-if="isUIAllowed('csvImport') && !isView"
+              v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
               v-t="['a:actions:upload-csv']"
               class="nc-menu-item"
               @click="quickImportDialog = true"
             >
-              <MdiUploadIcon />
+              <MdiUploadOutline />
               <!-- Upload CSV -->
               {{ $t('activity.uploadCSV') }}
             </div>
+
             <div
-              v-if="isUIAllowed('SharedViewList') && !isView"
+              v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
               v-t="['a:actions:shared-view-list']"
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
             >
-              <MdiViewListIcon />
+              <MdiViewListOutline />
               <!-- Shared View List -->
               {{ $t('activity.listSharedView') }}
             </div>
+
             <div
-              v-if="isUIAllowed('webhook') && !isView"
+              v-if="isUIAllowed('webhook') && !isView && !isPublicView"
               v-t="['c:actions:webhook']"
               class="nc-menu-item"
               @click="showWebhookDrawer = true"
             >
-              <MdiHookIcon />
+              <MdiHook />
               {{ $t('objects.webhooks') }}
             </div>
           </div>
@@ -168,6 +157,7 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
     </a-dropdown>
 
     <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
+
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
     <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 51031561d1..cf08d019e1 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -15,16 +15,14 @@ const columns = computed(() =>
     label: c.title,
   })),
 )
+
+function onPressEnter() {
+  reloadData.trigger()
+}
 </script>
 
 <template>
-  <a-input
-    v-model:value="search.query"
-    size="small"
-    class="max-w-[200px]"
-    placeholder="Filter query"
-    @press-enter="reloadData.trigger(null)"
-  >
+  <a-input v-model:value="search.query" size="small" class="max-w-[200px]" placeholder="Filter query" @press-enter="onPressEnter">
     <template #addonBefore>
       <div class="flex align-center relative" @click="isDropdownOpen = true">
         <MdiMagnify class="text-grey" />
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index ed64f98769..2e2324a762 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
-import { provide, toRef } from 'vue'
-import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
-import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj, computed, provide, toRef, useColumn, useDebounceFn, useVModel } from '#imports'
 import { NavigateDir } from '~/lib'
 
 interface Props {
   column: ColumnType
   modelValue: any
   editEnabled: boolean
-  rowIndex: number
+  rowIndex?: number
   active?: boolean
 }
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 353d76ae2e..2419991536 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -3,11 +3,27 @@ import Draggable from 'vuedraggable'
 import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import type { Permission } from '~/composables/useUIPermission/rolePermissions'
-import { computed, inject, onClickOutside, useDebounceFn } from '#imports'
-import { ActiveViewInj, IsFormInj, MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils'
-
-provide(IsFormInj, true)
+import {
+  ActiveViewInj,
+  IsFormInj,
+  MetaInj,
+  computed,
+  extractSdkResponseErrorMsg,
+  inject,
+  onClickOutside,
+  provide,
+  reactive,
+  ref,
+  useDebounceFn,
+  useGlobal,
+  useNuxtApp,
+  useUIPermission,
+  useViewColumns,
+  useViewData,
+  watch,
+} from '#imports'
+
+provide(IsFormInj, ref(true))
 
 // todo: generate hideCols based on default values
 const hiddenCols = ['created_at', 'updated_at']
@@ -20,7 +36,7 @@ const { $api, $e } = useNuxtApp()
 
 const { isUIAllowed } = useUIPermission()
 
-const formState = reactive({})
+const formState: Record<any, any> = reactive({})
 
 const secondsRemain = ref(0)
 
@@ -39,13 +55,13 @@ const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, fal
 
 const columns = computed(() => meta?.value?.columns || [])
 
-const localColumns = ref<Record<string, any>>([])
+const localColumns = ref<Record<string, any>[]>([])
 
-const hiddenColumns = ref<Record<string, any>>([])
+const hiddenColumns = ref<Record<string, any>[]>([])
 
 const draggableRef = ref()
 
-const systemFieldsIds = ref<Record<string, any>>([])
+const systemFieldsIds = ref<Record<string, any>[]>([])
 
 const showColumnDropdown = ref(false)
 
@@ -76,7 +92,8 @@ async function submitForm() {
     return
   }
 
-  insertRow(formState)
+  await insertRow(formState)
+
   submitted.value = true
 }
 
@@ -199,17 +216,23 @@ function setFormData() {
   formViewData.value = {
     ...formViewData.value,
     submit_another_form: !!(formViewData?.value?.submit_another_form ?? 0),
-    show_blank_form: !!(formViewData?.value?.show_blank_form ?? 0),
-  }
+    // todo: show_blank_form missing from FormType
+    show_blank_form: !!((formViewData?.value as any)?.show_blank_form ?? 0),
+  } as any
 
   {
     // email me
     let data: Record<string, boolean> = {}
     try {
-      data = JSON.parse(formViewData.value.email as string) || {}
-    } catch (e) {}
+      data = JSON.parse(formViewData.value?.email || '') || {}
+    } catch (e) {
+      // noop
+    }
+
     data[state.user.value?.email as string] = emailMe.value
-    formViewData.value.email = JSON.stringify(data)
+
+    formViewData.value!.email = JSON.stringify(data)
+
     checkSMTPStatus()
   }
 
@@ -257,7 +280,7 @@ async function submitCallback() {
 const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
   if (col.id) {
     try {
-      $api.dbView.formColumnUpdate(col.id, col)
+      await $api.dbView.formColumnUpdate(col.id, col)
     } catch (e: any) {
       message.error(await extractSdkResponseErrorMsg(e))
     }
@@ -265,7 +288,7 @@ const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
 }, 250)
 
 watch(submitted, (v) => {
-  if (v && formViewData?.value?.show_blank_form) {
+  if (v && (formViewData?.value as any)?.show_blank_form) {
     secondsRemain.value = 5
     const intvl = setInterval(() => {
       if (--secondsRemain.value < 0) {
@@ -314,7 +337,11 @@ onMounted(async () => {
     </a-col>
   </a-row>
   <a-row v-else class="h-full flex">
-    <a-col v-if="isEditable" :span="8" class="bg-[#f7f7f7] shadow-md pa-5 h-full overflow-auto scrollbar-thin-primary">
+    <a-col
+      v-if="isEditable"
+      :span="8"
+      class="bg-[#f7f7f7] shadow-md pa-5 h-full overflow-auto scrollbar-thin-primary nc-form-left-drawer"
+    >
       <div class="flex">
         <div class="flex flex-row flex-1 text-lg">
           <span>
@@ -326,7 +353,7 @@ onMounted(async () => {
           <div class="cursor-pointer mr-2">
             <span
               v-if="hiddenColumns.length"
-              class="mr-2"
+              class="mr-2 nc-form-add-all"
               style="border-bottom: 2px solid rgb(218, 218, 218)"
               @click="addAllColumns"
             >
@@ -335,7 +362,7 @@ onMounted(async () => {
             </span>
             <span
               v-if="localColumns.length"
-              class="ml-2"
+              class="ml-2 nc-form-remove-all"
               style="border-bottom: 2px solid rgb(218, 218, 218)"
               @click="removeAllColumns"
             >
@@ -377,7 +404,7 @@ onMounted(async () => {
           </a-card>
         </template>
         <template #footer>
-          <div class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center">
+          <div class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
@@ -406,8 +433,15 @@ onMounted(async () => {
       <div class="h-[200px] !bg-[#dbdad7]">
         <!-- for future implementation of cover image -->
       </div>
-      <a-card class="h-full ma-0 rounded-b-0 pa-4" body-style="max-width: 700px; margin: 0 auto; margin-top: -200px;">
-        <a-form ref="formRef" :model="formState">
+      <a-card
+        class="h-full ma-0 rounded-b-0 pa-4"
+        :body-style="{
+          maxWidth: '700px',
+          margin: '0 auto',
+          marginTop: '-200px',
+        }"
+      >
+        <a-form ref="formRef" :model="formState" class="nc-form">
           <a-card class="rounded ma-2 py-10 px-5">
             <!-- Header -->
             <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
@@ -422,7 +456,9 @@ onMounted(async () => {
                 @keydown.enter="updateView"
               />
             </a-form-item>
+
             <div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div>
+
             <!-- Sub Header -->
             <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
               <a-input
@@ -437,7 +473,9 @@ onMounted(async () => {
                 @click="updateView"
               />
             </a-form-item>
+
             <div v-else class="ml-3 mb-5 w-full text-bold text-h3">{{ formViewData.subheading }}</div>
+
             <Draggable
               ref="draggableRef"
               :list="localColumns"
@@ -450,7 +488,11 @@ onMounted(async () => {
               @end="drag = false"
             >
               <template #item="{ element, index }">
-                <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title">
+                <div
+                  class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3"
+                  :class="`nc-form-drag-${element.title.replaceAll(' ', '')}`"
+                  @click="activeRow = element.title"
+                >
                   <div class="flex">
                     <div class="flex flex-1">
                       <div class="flex flex-row">
@@ -473,50 +515,69 @@ onMounted(async () => {
                       <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                     </div>
                   </div>
+
                   <a-form-item
                     v-if="isVirtualCol(element)"
                     class="ma-0 gap-0 pa-0"
                     :name="element.title"
                     :rules="[{ required: element.required, message: `${element.title} is required` }]"
                   >
-                    <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
+                    <SmartsheetVirtualCell
+                      v-model="formState[element.title]"
+                      class="nc-input"
+                      :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                      :column="element"
+                    />
                   </a-form-item>
+
                   <a-form-item
                     v-else
                     class="ma-0 gap-0 pa-0"
                     :name="element.title"
                     :rules="[{ required: element.required, message: `${element.title} is required` }]"
                   >
-                    <SmartsheetCell v-model="formState[element.title]" class="nc-input" :column="element" :edit-enabled="true" />
+                    <SmartsheetCell
+                      v-model="formState[element.title]"
+                      class="nc-input"
+                      :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                      :column="element"
+                      :edit-enabled="true"
+                    />
                   </a-form-item>
+
                   <div v-if="activeRow === element.title">
                     <a-form-item class="my-0 w-1/2">
                       <a-input
                         v-model:value="element.label"
                         size="small"
-                        class="form-meta-input !bg-[#dbdbdb]"
+                        class="form-meta-input !bg-[#dbdbdb] nc-form-input-label"
                         :placeholder="$t('msg.info.formInput')"
                         @change="updateColMeta(element)"
                       >
                       </a-input>
                     </a-form-item>
+
                     <a-form-item class="mt-2 mb-0 w-1/2">
                       <a-input
                         v-model:value="element.description"
                         size="small"
-                        class="form-meta-input !bg-[#dbdbdb] text-sm"
+                        class="form-meta-input !bg-[#dbdbdb] text-sm nc-form-input-help-text"
                         :placeholder="$t('msg.info.formHelpText')"
                         @change="updateColMeta(element)"
                       />
                     </a-form-item>
+
                     <div class="items-center flex">
-                      <span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
+                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required') }}</span>
+
                       <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
                     </div>
                   </div>
+
                   <span class="text-gray-500">{{ element.description }}</span>
                 </div>
               </template>
+
               <template #footer>
                 <div
                   v-if="!localColumns.length"
@@ -528,7 +589,11 @@ onMounted(async () => {
             </Draggable>
 
             <div class="justify-center flex mt-10">
-              <a-button class="flex items-center gap-2 !bg-primary text-white rounded" size="large" @click="submitForm">
+              <a-button
+                class="flex items-center gap-2 !bg-primary text-white rounded nc-form-submit"
+                size="large"
+                @click="submitForm"
+              >
                 <!-- Submit -->
                 {{ $t('general.submit') }}
               </a-button>
@@ -541,9 +606,16 @@ onMounted(async () => {
           <div class="text-gray-500 mt-4 mb-2">
             {{ $t('msg.info.afterFormSubmitted') }}
           </div>
+
           <!-- Show this message -->
           <label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
-          <a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
+          <a-textarea
+            v-model:value="formViewData.success_msg"
+            :rows="3"
+            hide-details
+            class="nc-form-after-submit-msg"
+            @change="updateView"
+          />
 
           <!-- Other options -->
           <div class="mt-4">
@@ -553,6 +625,7 @@ onMounted(async () => {
                 v-model:checked="formViewData.submit_another_form"
                 v-t="[`a:form-view:submit-another-form`]"
                 size="small"
+                class="nc-form-checkbox-submit-another-form"
                 @change="updateView"
               />
               <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
@@ -564,12 +637,20 @@ onMounted(async () => {
                 v-model:checked="formViewData.show_blank_form"
                 v-t="[`a:form-view:show-blank-form`]"
                 size="small"
+                class="nc-form-checkbox-show-blank-form"
                 @change="updateView"
               />
               <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
             </div>
+
             <div class="my-4">
-              <a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" />
+              <a-switch
+                v-model:checked="emailMe"
+                v-t="[`a:form-view:email-me`]"
+                size="small"
+                class="nc-form-checkbox-send-email"
+                @change="onEmailChange"
+              />
               <!-- Email me at <email> -->
               <span class="ml-4">
                 {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index ca55ff15ce..8aabffe927 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -23,8 +23,10 @@ import {
   IsFormInj,
   IsGridInj,
   IsLockedInj,
+  IsPublicInj,
   MetaInj,
   PaginationDataInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
 } from '~/context'
 import { NavigateDir } from '~/lib'
@@ -34,10 +36,12 @@ const meta = inject(MetaInj)
 
 const view = inject(ActiveViewInj)
 
+const isPublicView = inject(IsPublicInj, ref(false))
+
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
-
+const readonly = inject(ReadonlyInj, ref(false))
 const isLocked = inject(IsLockedInj, false)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
@@ -45,8 +49,6 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const { isUIAllowed } = useUIPermission()
 
 // todo: get from parent ( inject or use prop )
-const isPublicView = false
-
 const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
@@ -80,7 +82,6 @@ const {
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
-
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
@@ -149,7 +150,7 @@ const clearCell = async (ctx: { row: number; col: number }) => {
 const { copy } = useClipboard()
 
 const makeEditable = (row: Row, col: ColumnType) => {
-  if (isPublicView || editEnabled || isView) {
+  if (isPublicView.value || editEnabled || isView) {
     return
   }
   if (!isPkAvail.value && !row.rowMeta.new) {
@@ -319,13 +320,18 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 @xcresized="resizingCol = null"
               >
                 <div class="w-full h-full bg-gray-100 flex items-center">
-                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readonly" />
 
-                  <SmartsheetHeaderCell v-else :column="col" />
+                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readonly" />
                 </div>
               </th>
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
-              <th v-if="isUIAllowed('add-column')" v-t="['c:column:add']" @click.stop="addColumnDropdown = true">
+              <th
+                v-if="!readonly && isUIAllowed('add-column')"
+                v-t="['c:column:add']"
+                class="cursor-pointer"
+                @click.stop="addColumnDropdown = true"
+              >
                 <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
                   <div class="h-full w-[60px] flex align-center justify-center">
                     <MdiPlus class="text-sm" />
@@ -350,15 +356,17 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
                     <div class="align-center flex min-w-[80px]">
-                      <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div v-if="!readonly" class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div v-else>{{ rowIndex + 1 }}</div>
                       <div
+                        v-if="!readonly"
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                      <div v-if="!readonly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
@@ -405,7 +413,12 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         v-else
                         v-model="row.row[columnObj.title]"
                         :column="columnObj"
-                        :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                        :edit-enabled="
+                          isUIAllowed('xcDatatableEditable') &&
+                          editEnabled &&
+                          selected.col === colIndex &&
+                          selected.row === rowIndex
+                        "
                         :row-index="rowIndex"
                         :active="selected.col === colIndex && selected.row === rowIndex"
                         @update:edit-enabled="editEnabled = false"
@@ -430,8 +443,8 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 class="text-left pointer nc-grid-add-new-cell"
                 @click="addEmptyRow()"
               >
-                <div class="px-2 w-full flex items-center">
-                  <MdiPlus class="text-pint-500 text-xs" />
+                <div class="px-2 w-full flex items-center text-gray-500">
+                  <MdiPlus class="text-pint-500 text-xs ml-2" />
 
                   <span class="ml-1">
                     {{ $t('activity.addRow') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 3c711d0e15..d4470540f9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject } from '#imports'
 import { ChangePageInj, PaginationDataInj } from '~/context'
-import MdiKeyboardIcon from '~icons/mdi/keyboard-return'
 
-const paginatedData = inject(PaginationDataInj)
+const paginatedData = inject(PaginationDataInj)!
 
-const changePage = inject(ChangePageInj)
+const changePage = inject(ChangePageInj)!
 
-const count = computed(() => paginatedData?.value?.totalRows ?? Infinity)
+const count = computed(() => paginatedData.value?.totalRows ?? Infinity)
 
-const size = computed(() => paginatedData?.value?.pageSize ?? 25)
+const size = computed(() => paginatedData.value?.pageSize ?? 25)
 
 const page = computed({
   get: () => paginatedData?.value?.page ?? 1,
@@ -18,8 +17,8 @@ const page = computed({
 </script>
 
 <template>
-  <div class="flex items-center">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500">
+  <div class="flex items-center mb-1">
+    <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500">
       {{ count }} record{{ count !== 1 ? 's' : '' }}
     </span>
 
@@ -29,7 +28,7 @@ const page = computed({
       v-if="count !== Infinity"
       v-model:current="page"
       size="small"
-      class="!text-xs !m-1"
+      class="!text-xs !m-1 nc-pagination"
       :total="count"
       :page-size="size"
       show-less-items
@@ -39,7 +38,7 @@ const page = computed({
       <span class="text-xs" style="white-space: nowrap"> Change page:</span>
       <a-input :value="page" size="small" class="ml-1 !text-xs" type="number" @keydown.enter="changePage(page)">
         <template #suffix>
-          <MdiKeyboardIcon class="mt-1" @click="changePage(page)" />
+          <MdiKeyboardReturn class="mt-1" @click="changePage(page)" />
         </template>
       </a-input>
     </div>
@@ -50,8 +49,7 @@ const page = computed({
 
 <style scoped>
 :deep(.ant-pagination-item a) {
-  line-height: 21px !important;
-  @apply text-sm;
+  @apply text-sm !leading-[21px];
 }
 :deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
   line-height: 21px !important;
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index d4d9bfb4ca..96d0d002c5 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { useSmartsheetStoreOrThrow } from '~/composables'
+import { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
+const { allowCSVDownload } = useSharedView()
+const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
@@ -12,11 +14,11 @@ const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
 
     <SmartsheetToolbarSortListMenu v-if="isGrid || isGallery" />
 
-    <SmartsheetToolbarShareView v-if="isForm || isGrid" />
+    <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
-    <SmartsheetToolbarMoreActions v-if="isGrid" />
+    <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
     <div class="flex-1" />
-    <SmartsheetToolbarSearchData v-if="isGrid || isGallery" class="shrink mr-2" />
+    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index f47831b164..a0f0ebf549 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -1,10 +1,27 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { provide, toRef, useVirtualCell } from '#imports'
+import { ActiveCellInj, CellValueInj, ColumnInj, RowInj, provide, toRef, useVirtualCell } from '#imports'
 import type { Row } from '~/composables'
-import { ActiveCellInj, CellValueInj, ColumnInj, RowInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
+const props = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue', 'navigate'])
+
+const HasMany = defineAsyncComponent(() => import('../virtual-cell/HasMany.vue'))
+
+const ManyToMany = defineAsyncComponent(() => import('../virtual-cell/ManyToMany.vue'))
+
+const BelongsTo = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
+
+const Rollup = defineAsyncComponent(() => import('../virtual-cell/HasMany.vue'))
+
+const Formula = defineAsyncComponent(() => import('../virtual-cell/ManyToMany.vue'))
+
+const Count = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
+
+const Lookup = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
+
 interface Props {
   column: ColumnType
   modelValue: any
@@ -12,9 +29,6 @@ interface Props {
   active?: boolean
 }
 
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'navigate'])
-
 const column = toRef(props, 'column')
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
@@ -33,12 +47,12 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
     @keydown.stop.enter.exact="emit('navigate', NavigateDir.NEXT)"
     @keydown.stop.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
   >
-    <VirtualCellHasMany v-if="isHm" />
-    <VirtualCellManyToMany v-else-if="isMm" />
-    <VirtualCellBelongsTo v-else-if="isBt" />
-    <VirtualCellRollup v-else-if="isRollup" />
-    <VirtualCellFormula v-else-if="isFormula" />
-    <VirtualCellCount v-else-if="isCount" />
-    <VirtualCellLookup v-else-if="isLookup" />
+    <HasMany v-if="isHm" />
+    <ManyToMany v-else-if="isMm" />
+    <BelongsTo v-else-if="isBt" />
+    <Rollup v-else-if="isRollup" />
+    <Formula v-else-if="isFormula" />
+    <Count v-else-if="isCount" />
+    <Lookup v-else-if="isLookup" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
index 7aecd34155..93012ce369 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { nextTick, useExpandedFormStoreOrThrow } from '#imports'
-import { enumColor, timeAgo } from '~/utils'
-import MdiAccountIcon from '~icons/mdi/account-circle'
+import { enumColor, nextTick, ref, timeAgo, useExpandedFormStoreOrThrow, watch } from '#imports'
 
 const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
   useExpandedFormStoreOrThrow()
@@ -10,6 +8,8 @@ const commentsWrapperEl = ref<HTMLDivElement>()
 
 await loadCommentsAndLogs()
 
+const showborder = ref(false)
+
 watch(
   commentsAndLogs,
   () => {
@@ -28,7 +28,7 @@ watch(
 
       <template v-else>
         <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
-          <MdiAccountIcon class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
+          <MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
           <div class="flex-grow">
             <p class="mb-1 caption edited-text text-[10px] text-gray">
               {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
index 3c0f54621d..eb082778de 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -42,23 +42,31 @@ const iconColor = '#1890ff'
       <template v-if="meta">
         {{ meta.title }}
       </template>
+
+      <!-- todo: table doesn't exist?
       <template v-else>
         {{ table }}
       </template>
+      -->
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
+
     <div class="flex-grow" />
+
     <mdi-reload class="cursor-pointer select-none" />
+
     <component
       :is="drawerToggleIcon"
       v-if="isUIAllowed('rowComments')"
       class="cursor-pointer select-none"
       @click="commentsDrawer = !commentsDrawer"
     />
+
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
     </a-button>
+
     <a-button :disabled="!isUIAllowed('tableRowUpdate')" type="primary" @click="save">
       <!-- Save Row -->
       {{ $t('activity.saveRow') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index 25d9df8284..691f9369a3 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -1,25 +1,32 @@
 <script setup lang="ts">
-import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import Cell from '../Cell.vue'
+import VirtualCell from '../VirtualCell.vue'
 import Comments from './Comments.vue'
 import Header from './Header.vue'
 import {
+  FieldsInj,
+  IsFormInj,
+  MetaInj,
+  NOCO,
   computedInject,
+  extractPkFromRow,
   provide,
+  ref,
   toRef,
   useNuxtApp,
+  useProject,
   useProvideExpandedFormStore,
   useProvideSmartsheetStore,
   useVModel,
   watch,
 } from '#imports'
-import { NOCO } from '~/lib'
-import { extractPkFromRow } from '~/utils'
 import type { Row } from '~/composables'
-import { FieldsInj, IsFormInj, MetaInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue?: boolean
   row: Row
   state?: Record<string, any> | null
   meta: TableType
@@ -28,9 +35,13 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+
 const emits = defineEmits(['update:modelValue'])
+
 const row = toRef(props, 'row')
+
 const state = toRef(props, 'state')
+
 const meta = toRef(props, 'meta')
 
 const fields = computedInject(FieldsInj, (_fields) => {
@@ -45,25 +56,26 @@ provide(MetaInj, meta)
 const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
 
 const { $api } = useNuxtApp()
+
 if (props.loadRow) {
   const { project } = useProject()
+
   row.value.row = await $api.dbTableRow.read(
     NOCO,
     project.value.id as string,
     meta.value.title,
     extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]),
   )
+
   row.value.oldRow = { ...row.value.row }
+
   row.value.rowMeta = {}
 }
 
-useProvideSmartsheetStore(ref({}) as any, meta)
+useProvideSmartsheetStore(ref({}) as Ref<ViewType>, meta)
 
 provide(IsFormInj, ref(true))
 
-// accept as a prop
-// const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
-
 watch(
   state,
   () => {
@@ -76,7 +88,15 @@ watch(
   { immediate: true },
 )
 
-const isExpanded = useVModel(props, 'modelValue', emits)
+const isExpanded = useVModel(props, 'modelValue', emits, {
+  defaultValue: false,
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ExpandedForm',
+}
 </script>
 
 <template>
@@ -86,13 +106,14 @@ const isExpanded = useVModel(props, 'modelValue', emits)
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
         <div class="flex-grow overflow-auto scrollbar-thin-primary">
           <div class="w-[500px] mx-auto">
-            <div v-for="col in fields" :key="col.title" class="mt-2 py-2" :class="`nc-expand-col-${col.title}`">
+            <div v-for="col of fields" :key="col.title" class="mt-2 py-2" :class="`nc-expand-col-${col.title}`">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex align-center mt-2">
-                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
-                <SmartsheetCell
+                <VirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
+
+                <Cell
                   v-else
                   v-model="row.row[col.title]"
                   :column="col"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index e23b8f3b4b..e0558071d8 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -41,8 +41,12 @@ function onOpenModal(type: ViewTypes, title = '') {
         {{ $t('activity.createView') }}
       </h3>
 
-      <a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.GRID)">
-        <a-tooltip placement="left">
+      <a-menu-item
+        key="grid"
+        class="group !flex !items-center !my-0 !h-[30px] nc-create-3-view"
+        @click="onOpenModal(ViewTypes.GRID)"
+      >
+        <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>
             {{ $t('msg.info.addView.grid') }}
           </template>
@@ -59,8 +63,12 @@ function onOpenModal(type: ViewTypes, title = '') {
         </a-tooltip>
       </a-menu-item>
 
-      <a-menu-item key="gallery" class="group !flex !items-center !-my0 !h-[30px]" @click="onOpenModal(ViewTypes.GALLERY)">
-        <a-tooltip placement="left">
+      <a-menu-item
+        key="gallery"
+        class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view"
+        @click="onOpenModal(ViewTypes.GALLERY)"
+      >
+        <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>
             {{ $t('msg.info.addView.gallery') }}
           </template>
@@ -80,10 +88,10 @@ function onOpenModal(type: ViewTypes, title = '') {
       <a-menu-item
         v-if="!isView"
         key="form"
-        class="group !flex !items-center !my-0 !h-[30px]"
+        class="group !flex !items-center !my-0 !h-[30px] nc-create-1-view"
         @click="onOpenModal(ViewTypes.FORM)"
       >
-        <a-tooltip placement="left">
+        <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>
             {{ $t('msg.info.addView.form') }}
           </template>
@@ -103,7 +111,7 @@ function onOpenModal(type: ViewTypes, title = '') {
 
     <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
 
-    <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
+    <div class="flex-auto justify-end flex flex-col gap-3 mt-3">
       <button
         v-if="isUIAllowed('virtualViewsCreateOrEdit')"
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 89558695ad..1ba2093a0c 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -183,6 +183,7 @@ function onDeleted() {
       :class="[
         isMarked === view.id ? 'bg-gray-200' : '',
         route.params.viewTitle && route.params.viewTitle.includes(view.title) ? 'active' : '',
+        `nc-view-item nc-${view.type}-view-item`,
       ]"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index 8ec7ee7b3d..b4a30d59fb 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -2,7 +2,7 @@
 import type { ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import { viewIcons } from '~/utils'
-import { onKeyStroke, useDebounceFn, useNuxtApp, useVModel } from '#imports'
+import { onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel } from '#imports'
 
 interface Props {
   view: Record<string, any>
@@ -163,6 +163,7 @@ function onStopEdit() {
       </div>
 
       <a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel" @keydown="onKeyDown($event)" />
+
       <div v-else>{{ vModel.alias || vModel.title }}</div>
 
       <div class="flex-1" />
@@ -183,7 +184,7 @@ function onStopEdit() {
                 {{ $t('activity.deleteView') }}
               </template>
 
-              <MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop="onDelete" />
+              <MdiTrashCan class="hidden group-hover:block text-red-500 nc-view-delete-icon" @click.stop="onDelete" />
             </a-tooltip>
           </template>
         </div>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 6e06661cc4..92ab9dd635 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -3,7 +3,7 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
-import { computed, inject, provide, ref, useRoute, useRouter, useViews, watch } from '#imports'
+import { computed, inject, provide, ref, useElementHover, useRoute, useRouter, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 
 const meta = inject(MetaInj, ref())
@@ -25,6 +25,9 @@ const sidebarOpen = inject(RightSidebarInj, ref(true))
 
 const sidebarCollapsed = computed(() => !sidebarOpen.value)
 
+/** Sidebar ref */
+const sidebar = ref()
+
 /** View type to create from modal */
 let viewCreateType = $ref<ViewTypes>()
 
@@ -37,6 +40,8 @@ let selectedViewId = $ref('')
 /** is view creation modal open */
 let modalOpen = $ref(false)
 
+const isHovered = useElementHover(sidebar)
+
 /** Watch route param and change active view based on `viewTitle` */
 watch(
   [views, () => route.params.viewTitle],
@@ -74,6 +79,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 
 <template>
   <a-layout-sider
+    ref="sidebar"
     :collapsed="sidebarCollapsed"
     collapsiple
     collapsed-width="50"
@@ -81,24 +87,27 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     class="relative shadow-md h-full"
     theme="light"
   >
-    <a-tooltip placement="left">
+    <a-tooltip :mouse-enter-delay="1" placement="left">
       <template #title> Toggle sidebar </template>
 
-      <div
-        class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
-      >
-        <MaterialSymbolsChevronRightRounded
-          v-if="sidebarOpen"
-          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-          @click="sidebarOpen = false"
-        />
-
-        <MaterialSymbolsChevronLeftRounded
-          v-else
-          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-          @click="sidebarOpen = true"
-        />
-      </div>
+      <Transition name="glow">
+        <div
+          v-show="sidebarCollapsed || isHovered"
+          class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
+        >
+          <MaterialSymbolsChevronRightRounded
+            v-if="sidebarOpen"
+            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
+            @click="sidebarOpen = false"
+          />
+
+          <MaterialSymbolsChevronLeftRounded
+            v-else
+            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
+            @click="sidebarOpen = true"
+          />
+        </div>
+      </Transition>
     </a-tooltip>
 
     <Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
index 3e3aed7159..31bd83a143 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import HTTPSnippet from 'httpsnippet'
+// import HTTPSnippet from 'httpsnippet'
 import { useClipboard } from '@vueuse/core'
 import { message } from 'ant-design-vue'
 import { ActiveViewInj, MetaInj } from '~/context'
+import { inject, useGlobal, useProject, useSmartsheetStoreOrThrow, useVModel, useViewData } from '#imports'
 
 const props = defineProps<Props>()
 
@@ -13,11 +14,17 @@ interface Props {
 }
 
 const { project } = $(useProject())
+
 const { appInfo, token } = $(useGlobal())
-const meta = $(inject(MetaInj))
-const view = $(inject(ActiveViewInj))
+
+const meta = $(inject(MetaInj)!)
+
+const view = $(inject(ActiveViewInj)!)
+
 const { xWhere } = useSmartsheetStoreOrThrow()
-const { queryParams } = $(useViewData(meta, view as any, xWhere))
+
+const { queryParams } = $(useViewData($$(meta), view as any, xWhere))
+
 const { copy } = useClipboard()
 
 let vModel = $(useVModel(props, 'modelValue', emits))
@@ -66,20 +73,7 @@ const apiUrl = $computed(
     new URL(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`, (appInfo && appInfo.ncSiteUrl) || '/').href,
 )
 
-const snippet = $computed(
-  () =>
-    new HTTPSnippet({
-      method: 'GET',
-      headers: [{ name: 'xc-auth', value: token as string, comment: 'JWT Auth token' }],
-      url: apiUrl,
-      queryString: Object.entries(queryParams || {}).map(([name, value]) => {
-        return {
-          name,
-          value: String(value),
-        }
-      }),
-    }),
-)
+const snippet = $computed(() => '')
 
 const activeLang = $computed(() => langs.find((lang) => lang.name === selectedLangName))
 
@@ -178,5 +172,3 @@ const afterVisibleChange = (visible: boolean) => {
     </div>
   </a-drawer>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
new file mode 100644
index 0000000000..60ef0f660f
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const editorOpen = ref(false)
+
+const tabKey = ref()
+
+const { metas } = $(useMetas())
+
+const { tables } = useTable()
+
+const localTables = tables.value.filter((t) => metas[t.id as string])
+</script>
+
+<template>
+  <a-tooltip placement="bottom">
+    <template #title>
+      <span> Debug Meta </span>
+    </template>
+    <mdi-bug-outline class="cursor-pointer" @click="editorOpen = true" />
+  </a-tooltip>
+
+  <a-modal v-model:visible="editorOpen" :footer="null" width="80%">
+    <a-tabs v-model:activeKey="tabKey" type="card" closeable="false" class="shadow-sm">
+      <a-tab-pane v-for="table in localTables" :key="table.id" :tab="table.title">
+        <MonacoEditor v-model="metas[table.id]" class="h-max-[70vh]" :read-only="true" />
+      </a-tab-pane>
+    </a-tabs>
+  </a-modal>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
new file mode 100644
index 0000000000..0905d952dd
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+const { api } = useApi()
+
+async function deleteCache() {
+  try {
+    await api.utils.cacheDelete()
+    message.info('Deleted Cache Successfully')
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
+</script>
+
+<template>
+  <a-tooltip placement="bottom">
+    <template #title>
+      <span> Delete Cache </span>
+    </template>
+    <mdi-delete class="cursor-pointer" @click="deleteCache" />
+  </a-tooltip>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
index fc82263308..c94301fe70 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
@@ -14,7 +14,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(true))
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
-      <MdiDeleteOutline class="cursor-pointer group-hover:(!text-white)" @click="deleteTable(meta)" />
+      <MdiDeleteOutline class="cursor-pointer" @click="deleteTable(meta)" />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
new file mode 100644
index 0000000000..0c0242412b
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import FileSaver from 'file-saver'
+
+const { api } = useApi()
+
+async function exportCache() {
+  try {
+    const data = await api.utils.cacheGet()
+    if (!data) {
+      message.info('Cache is empty')
+      return
+    }
+    const blob = new Blob([JSON.stringify(data)], {
+      type: 'text/plain;charset=utf-8',
+    })
+    FileSaver.saveAs(blob, 'cache_exported.json')
+    message.info('Exported Cache Successfully')
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
+</script>
+
+<template>
+  <a-tooltip placement="bottom">
+    <template #title>
+      <span> Export Cache </span>
+    </template>
+    <mdi-export class="cursor-pointer" @click="exportCache" />
+  </a-tooltip>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index da82d9df10..9af373d4c3 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -2,14 +2,43 @@
 import AddRow from './AddRow.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
+import ExportCache from './ExportCache.vue'
+import DeleteCache from './DeleteCache.vue'
+import DebugMeta from './DebugMeta.vue'
 
 const { isUIAllowed } = useUIPermission()
+
+const debug = $ref(false)
+
+const clickCount = $ref(0)
 </script>
 
 <template>
-  <div class="flex gap-2">
+  <div
+    class="flex gap-2"
+    @click="
+      () => {
+        clickCount = clickCount + 1
+        debug = clickCount >= 4
+      }
+    "
+  >
     <slot name="start" />
 
+    <template v-if="debug">
+      <ExportCache />
+
+      <div class="dot" />
+
+      <DeleteCache />
+
+      <div class="dot" />
+
+      <DebugMeta />
+
+      <div class="dot" />
+    </template>
+
     <LockMenu v-if="isUIAllowed('view-type')" />
 
     <div v-if="isUIAllowed('view-type')" class="dot" />
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index e1dbca365d..012e0a4b38 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -34,7 +34,7 @@ provide(ActiveViewInj, activeView)
 provide(IsLockedInj, false)
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
-provide(RightSidebarInj, ref(true))
+provide(RightSidebarInj, ref(false))
 
 const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
 
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
index fd30bc2233..4c5ffb19ba 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
@@ -32,7 +32,9 @@ const loadBase = async () => {
   try {
     if (!project.value.id) return
 
-    const res = await $api.project.sharedBaseGet(project.value.id)
+    // todo: response is missing roles in type
+    const res = (await $api.project.sharedBaseGet(project.value.id)) as any
+
     base = {
       uuid: res.uuid,
       url: res.url,
@@ -47,9 +49,10 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
   try {
     if (!project.value.id) return
 
-    const res = await $api.project.sharedBaseUpdate(project.value.id, {
+    // todo: return type void?
+    const res = (await $api.project.sharedBaseUpdate(project.value.id, {
       roles: role,
-    })
+    })) as any
 
     base = res ?? {}
     base!.role = role
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
index d557eeea40..cac1f3fe8e 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
@@ -85,7 +85,6 @@ const saveUser = async () => {
         project_id: project.value.id,
         projectName: project.value.title,
       })
-      emit('reload')
       emit('closed')
     } else {
       const res = await $api.auth.projectUserAdd(project.value.id, {
@@ -96,6 +95,7 @@ const saveUser = async () => {
       })
       usersData.invitationToken = res.invite_token
     }
+    emit('reload')
     message.success('Successfully updated the user details')
   } catch (e: any) {
     console.error(e)
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 4739448a47..f7c08a01ca 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -3,14 +3,27 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { Form, message } from 'ant-design-vue'
 import { srcDestMappingColumns, tableColumns } from './utils'
-import { computed, onMounted } from '#imports'
-import { extractSdkResponseErrorMsg, fieldRequiredValidator, getUIDTIcon } from '~/utils'
-import { MetaInj, ReloadViewDataHookInj } from '~/context'
+import {
+  MetaInj,
+  ReloadViewDataHookInj,
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  getUIDTIcon,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  useProject,
+  useTabs,
+  useTemplateRefsList,
+} from '#imports'
+import { TabType } from '~/composables'
 
 interface Props {
   quickImportType: 'csv' | 'excel' | 'json'
   projectTemplate: Record<string, any>
-  importData: Record<string, any>[]
+  importData: Record<string, any>
   importColumns: any[]
   importOnly: boolean
   maxRowsToParse: number
@@ -41,7 +54,7 @@ const expansionPanel = ref<number[]>([])
 
 const editableTn = ref<boolean[]>([])
 
-const inputRefs = ref<HTMLInputElement[]>([])
+const inputRefs = useTemplateRefsList<HTMLInputElement>()
 
 const isImporting = ref(false)
 
@@ -74,6 +87,7 @@ const { sqlUi, project, loadTables } = useProject()
 
 onMounted(() => {
   parseAndLoadTemplate()
+
   nextTick(() => {
     inputRefs.value[0]?.focus()
   })
@@ -409,7 +423,7 @@ async function importTemplate() {
       await loadTables()
       addTab({
         ...tab,
-        type: 'table',
+        type: TabType.TABLE,
       })
     } catch (e: any) {
       message.error(await extractSdkResponseErrorMsg(e))
@@ -476,13 +490,15 @@ onMounted(() => {
         </p>
       </a-form>
       <a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel" class="template-collapse" accordion>
-        <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
+        <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
           <template #header>
             <span class="font-weight-bold text-lg flex items-center gap-2">
               <mdi-table class="text-primary" />
+
               {{ table.ref_table_name }}
             </span>
           </template>
+
           <a-table
             v-if="srcDestMapping"
             class="template-form"
@@ -496,10 +512,12 @@ onMounted(() => {
                 {{ column.name }}
               </span>
             </template>
+
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'source_column'">
                 <span>{{ record.srcCn }}</span>
               </template>
+
               <template v-else-if="column.key === 'destination_column'">
                 <a-select v-model:value="record.destCn" class="w-52" show-search :filter-option="filterOption">
                   <a-select-option v-for="(col, i) of columns" :key="i" :value="col.title">
@@ -525,13 +543,14 @@ onMounted(() => {
           {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
           available for import
         </p>
+
         <a-collapse
           v-if="data.tables && data.tables.length"
           v-model:activeKey="expansionPanel"
           class="template-collapse"
           accordion
         >
-          <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
+          <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
             <template #header>
               <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
                 <a-input
@@ -539,16 +558,18 @@ onMounted(() => {
                   class="max-w-xs"
                   size="large"
                   hide-details
-                  @click="(e) => e.stopPropagation()"
+                  @click="$event.stopPropagation()"
                   @blur="setEditableTn(tableIdx, false)"
                   @keydown.enter="setEditableTn(tableIdx, false)"
                 />
               </a-form-item>
+
               <span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
                 <mdi-table class="text-primary" />
                 {{ table.table_name }}
               </span>
             </template>
+
             <template #extra>
               <a-tooltip bottom>
                 <template #title>
@@ -560,7 +581,7 @@ onMounted(() => {
             </template>
 
             <a-table
-              v-if="table.columns.length"
+              v-if="table.columns && table.columns.length"
               class="template-form"
               row-class-name="template-form-row"
               :data-source="table.columns"
@@ -573,11 +594,13 @@ onMounted(() => {
                     {{ $t('labels.columnName') }}
                   </span>
                 </template>
+
                 <template v-else-if="column.key === 'uidt'">
                   <span>
                     {{ $t('labels.columnType') }}
                   </span>
                 </template>
+
                 <template v-else-if="column.key === 'dtxp' && hasSelectColumn[tableIdx]">
                   <span>
                     <!-- TODO: i18n -->
@@ -585,19 +608,14 @@ onMounted(() => {
                   </span>
                 </template>
               </template>
+
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'column_name'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-input
-                      :ref="
-                        (el) => {
-                          inputRefs[record.key] = el
-                        }
-                      "
-                      v-model:value="record.column_name"
-                    />
+                    <a-input :ref="inputRefs.set" v-model:value="record.column_name" />
                   </a-form-item>
                 </template>
+
                 <template v-else-if="column.key === 'uidt'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
                     <a-select
@@ -622,6 +640,7 @@ onMounted(() => {
                       <!-- TODO: i18n -->
                       <span>Primary Value</span>
                     </template>
+
                     <div class="flex items-center float-right mr-4">
                       <mdi-key-star class="text-lg" />
                     </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 499f8fb3e5..0967f6886a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -1,22 +1,35 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import ItemChip from './components/ItemChip.vue'
-import ListItems from './components/ListItems.vue'
-import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { ActiveCellInj, CellValueInj, ColumnInj, EditModeInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import {
+  ActiveCellInj,
+  CellValueInj,
+  ColumnInj,
+  EditModeInj,
+  ReloadViewDataHookInj,
+  RowInj,
+  defineAsyncComponent,
+  inject,
+  ref,
+  useProvideLTARStore,
+  useSmartsheetRowStoreOrThrow,
+} from '#imports'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
 
-const column = inject(ColumnInj)
+const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
+
+const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
+
+const column = inject(ColumnInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const cellValue = inject(CellValueInj, ref<any>(null))
 
-const row = inject(RowInj)
+const row = inject(RowInj)!
 
-const active = inject(ActiveCellInj)
+const active = inject(ActiveCellInj)!
 
 const editEnabled = inject(EditModeInj)
 
@@ -55,7 +68,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
-      <template v-if="value">
+      <template v-if="value && relatedTablePrimaryValueProp">
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index 2efc5928e4..bc2bda47b4 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { computed, inject, ref, useProject } from '#imports'
-import { CellValueInj, ColumnInj } from '~/context'
-import { handleTZ, replaceUrlsWithLink } from '~/utils'
+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)
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index a549964392..cb54162498 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -1,11 +1,26 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import ItemChip from './components/ItemChip.vue'
-import ListChildItems from './components/ListChildItems.vue'
-import ListItems from './components/ListItems.vue'
-import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, EditModeInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import {
+  CellValueInj,
+  ColumnInj,
+  EditModeInj,
+  IsFormInj,
+  ReloadViewDataHookInj,
+  RowInj,
+  computed,
+  defineAsyncComponent,
+  inject,
+  ref,
+  useProvideLTARStore,
+  useSmartsheetRowStoreOrThrow,
+} from '#imports'
+
+const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
+
+const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
+
+const ListChildItems = defineAsyncComponent(() => import('./components/ListChildItems.vue'))
 
 const column = inject(ColumnInj)!
 
@@ -85,7 +100,9 @@ const unlinkRef = async (rec: Record<string, any>) => {
         />
       </div>
     </template>
+
     <ListItems v-model="listItemsDlg" />
+
     <ListChildItems
       v-model="childListDlg"
       @attach-record="
diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index 15f99e9913..dea7579e40 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
@@ -2,17 +2,19 @@
 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 } from '~/context'
-import { computed, inject, provide, useColumn, useMetas } from '#imports'
+import { CellValueInj, ColumnInj, MetaInj, ReadonlyInj, computed, inject, provide, useColumn, useMetas } from '#imports'
 
 const { metas, getMeta } = useMetas()
 
 provide(ReadonlyInj, true)
 
 const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>
+
 const meta = inject(MetaInj)
+
 const value = inject(CellValueInj)
-const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]))
+
+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 & {
   colOptions: LinkToAnotherRecordType
@@ -22,7 +24,7 @@ await getMeta(relationColumn.colOptions.fk_related_model_id!)
 
 const lookupTableMeta = computed(() => metas.value[relationColumn.colOptions.fk_related_model_id!])
 
-const lookupColumn = computed(
+const lookupColumn = computed<any>(
   () =>
     lookupTableMeta.value.columns?.find(
       (c: Record<string, any>) => c.id === column.value.colOptions?.fk_lookup_column_id,
@@ -58,7 +60,7 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
       <template v-else>
         <!-- For attachment cell avoid adding chip style -->
         <div
-          v-for="(v, i) in arrValue"
+          v-for="(v, i) of arrValue"
           :key="i"
           :class="{ 'bg-gray-100 px-2 rounded-full': !lookupColumnMetaProps.isAttachment }"
         >
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index a5f4655a5b..12a4290210 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -1,11 +1,25 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import ItemChip from './components/ItemChip.vue'
-import ListChildItems from './components/ListChildItems.vue'
-import ListItems from './components/ListItems.vue'
-import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, EditModeInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import {
+  CellValueInj,
+  ColumnInj,
+  EditModeInj,
+  IsFormInj,
+  ReloadViewDataHookInj,
+  RowInj,
+  computed,
+  inject,
+  ref,
+  useProvideLTARStore,
+  useSmartsheetRowStoreOrThrow,
+} from '#imports'
+
+const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
+
+const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
+
+const ListChildItems = defineAsyncComponent(() => import('./components/ListChildItems.vue'))
 
 const column = inject(ColumnInj)!
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
index a08cb64234..68a3e3259b 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CellValueInj } from '~/context'
+import { CellValueInj, inject } from '#imports'
 
 const value = inject(CellValueInj)
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index f4be7fbad0..48d79a6f8a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,6 +1,5 @@
-<script setup lang="ts">
-import { useLTARStoreOrThrow } from '#imports'
-import { ActiveCellInj, EditModeInj, IsFormInj } from '~/context'
+<script lang="ts" setup>
+import { ActiveCellInj, EditModeInj, IsFormInj, defineAsyncComponent, inject, ref, useLTARStoreOrThrow } from '#imports'
 
 interface Props {
   value?: string | number | boolean
@@ -11,17 +10,25 @@ const { value, item } = defineProps<Props>()
 
 const emit = defineEmits(['unlink'])
 
-const { relatedTableMeta } = useLTARStoreOrThrow()
+const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
 
-const editEnabled = inject(EditModeInj)
+const { relatedTableMeta } = useLTARStoreOrThrow()!
+
+const editEnabled = inject(EditModeInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
-const isForm = inject(IsFormInj)
+const isForm = inject(IsFormInj)!
 
 const expandedFormDlg = ref(false)
 </script>
 
+<script lang="ts">
+export default {
+  name: 'ItemChip',
+}
+</script>
+
 <template>
   <div
     class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]"
@@ -29,18 +36,21 @@ const expandedFormDlg = ref(false)
     @click="expandedFormDlg = true"
   >
     <span class="name">{{ value }}</span>
+
     <div v-show="active || isForm" v-if="editEnabled" class="flex align-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
-    <SmartsheetExpandedForm
-      v-if="expandedFormDlg && editEnabled"
-      v-model="expandedFormDlg"
-      :row="{ row: item }"
-      :meta="relatedTableMeta"
-      load-row
-      use-meta-fields
-    />
+    <Suspense>
+      <ExpandedForm
+        v-if="editEnabled"
+        v-model="expandedFormDlg"
+        :row="{ row: item }"
+        :meta="relatedTableMeta"
+        load-row
+        use-meta-fields
+      />
+    </Suspense>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 8083fb0969..c8211f0643 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,12 +1,23 @@
 <script lang="ts" setup>
 import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
-import { ColumnInj, EditModeInj, IsFormInj } from '~/context'
+import {
+  ColumnInj,
+  EditModeInj,
+  IsFormInj,
+  computed,
+  useLTARStoreOrThrow,
+  useSmartsheetRowStoreOrThrow,
+  useVModel,
+  watch,
+} from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
+
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
+const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
+
 const vModel = useVModel(props, 'modelValue', emit)
 
 const isForm = inject(IsFormInj, ref(false))
@@ -120,14 +131,16 @@ const expandedFormRow = ref()
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
     </div>
 
-    <SmartsheetExpandedForm
-      v-if="expandedFormDlg && expandedFormRow"
-      v-model="expandedFormDlg"
-      :row="{ row: expandedFormRow }"
-      :meta="relatedTableMeta"
-      load-row
-      use-meta-fields
-    />
+    <Suspense>
+      <ExpandedForm
+        v-if="expandedFormRow"
+        v-model="expandedFormDlg"
+        :row="{ row: expandedFormRow }"
+        :meta="relatedTableMeta"
+        load-row
+        use-meta-fields
+      />
+    </Suspense>
   </component>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 29ba9e4195..25d512da45 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -2,13 +2,24 @@
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { Empty } from 'ant-design-vue'
-import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel } from '#imports'
-import { ColumnInj } from '~/context'
+import {
+  ColumnInj,
+  computed,
+  defineAsyncComponent,
+  inject,
+  ref,
+  useLTARStoreOrThrow,
+  useSmartsheetRowStoreOrThrow,
+  useVModel,
+  watch,
+} from '#imports'
 
 const props = defineProps<{ modelValue: boolean }>()
 
 const emit = defineEmits(['update:modelValue', 'addNewRecord'])
 
+const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
+
 const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
@@ -118,14 +129,16 @@ const newRowState = computed(() => {
       </template>
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
-      <SmartsheetExpandedForm
-        v-if="expandedFormDlg"
-        v-model="expandedFormDlg"
-        :meta="relatedTableMeta"
-        :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
-        :state="newRowState"
-        use-meta-fields
-      />
+      <Suspense>
+        <ExpandedForm
+          v-if="expandedFormDlg"
+          v-model="expandedFormDlg"
+          :meta="relatedTableMeta"
+          :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
+          :state="newRowState"
+          use-meta-fields
+        />
+      </Suspense>
     </div>
   </a-modal>
 </template>
diff --git a/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue b/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue
new file mode 100644
index 0000000000..7e84165d06
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted } from '@vue/runtime-core'
+
+interface Props {
+  modelValue: Record<string, any>[]
+  availableChannelList: Record<string, any>[]
+  placeholder: string
+}
+
+const { availableChannelList, placeholder, ...rest } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(rest, 'modelValue', emit)
+
+// idx of selected channels
+const localChannelValues = $ref<number[]>([])
+
+// availableChannelList with idx enriched
+let availableChannelWithIdxList = $ref<Record<string, any>[]>()
+
+watch(
+  () => localChannelValues,
+  (v) => {
+    const res = []
+    for (const channelIdx of v) {
+      const target = availableChannelWithIdxList.find((availableChannel) => availableChannel.idx === channelIdx)
+      if (target) {
+        // push without target.idx
+        res.push({ webhook_url: target.webhook_url, channel: target.channel })
+      }
+    }
+    vModel.value = res
+  },
+)
+
+onMounted(() => {
+  if (availableChannelList.length) {
+    // enrich idx
+    let idx = 0
+    availableChannelWithIdxList = availableChannelList.map((channel) => ({
+      ...channel,
+      idx: idx++,
+    }))
+
+    // build localChannelValues from modelValue
+    for (const channel of rest.modelValue || []) {
+      const target = availableChannelWithIdxList.find(
+        (availableChannelWithIdx) =>
+          availableChannelWithIdx.webhook_url === channel.webhook_url && availableChannelWithIdx.channel === channel.channel,
+      )
+      if (target) {
+        localChannelValues.push(target.idx)
+      }
+    }
+  }
+})
+</script>
+
+<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>
+</template>
diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index 45fdd7d580..ff55fe5b2f 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -31,8 +31,10 @@ async function editHook(hook: Record<string, any>) {
     :body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '50px' }"
     @keydown.esc="vModel = false"
   >
-    <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
-    <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
+    <div>
+      <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
+      <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
+    </div>
     <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
       <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
         🚀 We are Hiring! 🚀
diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index c83fea2798..e1711acff7 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
-import { MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
-import { inject, reactive, useApi, useNuxtApp } from '#imports'
-
-interface Option {
-  label: string
-  value: string
-}
+import { MetaInj, extractSdkResponseErrorMsg, fieldRequiredValidator, inject, reactive, useApi, useNuxtApp } from '#imports'
 
 const emit = defineEmits(['backToList', 'editOrAdd'])
 
@@ -51,7 +44,7 @@ const discordChannels = ref<Record<string, any>[]>([])
 
 const mattermostChannels = ref<Record<string, any>[]>([])
 
-const filters = ref([])
+const filterRef = ref()
 
 const formInput = ref({
   'Email': [
@@ -205,21 +198,27 @@ const validators = computed(() => {
 })
 const { validate, validateInfos } = useForm(hook, validators)
 
-function onNotTypeChange() {
-  hook.notification.payload = {} as any
+function onNotTypeChange(reset = false) {
+  if (reset) {
+    hook.notification.payload = {} as Record<string, any>
+  }
 
   if (hook.notification.type === 'Slack') {
-    slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || []
+    slackChannels.value = (apps.value && apps.value.Slack && apps.Slack.parsedInput) || []
   }
+
   if (hook.notification.type === 'Microsoft Teams') {
-    teamsChannels.value = (apps && apps['Microsoft Teams'] && apps['Microsoft Teams'].parsedInput) || []
+    teamsChannels.value = (apps.value && apps.value['Microsoft Teams'] && apps.value['Microsoft Teams'].parsedInput) || []
   }
+
   if (hook.notification.type === 'Discord') {
-    discordChannels.value = (apps && apps.Discord && apps.Discord.parsedInput) || []
+    discordChannels.value = (apps.value && apps.value.Discord && apps.value.Discord.parsedInput) || []
   }
+
   if (hook.notification.type === 'Mattermost') {
-    mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || []
+    mattermostChannels.value = (apps.value && apps.value.Mattermost && apps.value.Mattermost.parsedInput) || []
   }
+
   if (hook.notification.type === 'URL') {
     hook.notification.payload.body = '{{ json data }}'
     hook.notification.payload.parameters = [{}]
@@ -228,10 +227,6 @@ function onNotTypeChange() {
   }
 }
 
-function filterOption(input: string, option: Option) {
-  return option.value.toUpperCase().includes(input.toUpperCase())
-}
-
 function setHook(newHook: any) {
   Object.assign(hook, {
     ...newHook,
@@ -301,6 +296,8 @@ async function loadPluginList() {
     if (hook.event && hook.operation) {
       hook.eventOperation = `${hook.event} ${hook.operation}`
     }
+
+    onNotTypeChange()
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -342,12 +339,9 @@ async function saveHooks() {
       hook.id = res.id
     }
 
-    // TODO: wait for filter implementation
-    // if ($refs.filter) {
-    //   await $refs.filter.applyChanges(false, {
-    //     hookId: hook.id,
-    //   });
-    // }
+    if (filterRef.value) {
+      await filterRef.value.applyChanges(hook.id)
+    }
 
     message.success('Webhook details updated successfully')
   } catch (e: any) {
@@ -383,8 +377,8 @@ watch(
   },
 )
 
-onMounted(() => {
-  loadPluginList()
+onMounted(async () => {
+  await loadPluginList()
 })
 </script>
 
@@ -439,7 +433,7 @@ onMounted(() => {
               v-model:value="hook.notification.type"
               size="large"
               :placeholder="$t('general.notification')"
-              @change="onNotTypeChange"
+              @change="onNotTypeChange(true)"
             >
               <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
                 <div class="flex items-center">
@@ -505,12 +499,12 @@ onMounted(() => {
       <a-row v-if="hook.notification.type === 'Slack'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <a-auto-complete
-              v-model:value="hook.notification.payload.channels"
-              size="large"
-              :options="slackChannels"
+            <WebhookChannelMultiSelect
+              v-if="slackChannels.length > 0"
+              v-model="hook.notification.payload.channels"
+              :selected-channel-list="hook.notification.payload.channels"
+              :available-channel-list="slackChannels"
               placeholder="Select Slack channels"
-              :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>
@@ -519,12 +513,12 @@ onMounted(() => {
       <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <a-auto-complete
-              v-model:value="hook.notification.payload.channels"
-              size="large"
-              :options="teamsChannels"
+            <WebhookChannelMultiSelect
+              v-if="teamsChannels.length > 0"
+              v-model="hook.notification.payload.channels"
+              :selected-channel-list="hook.notification.payload.channels"
+              :available-channel-list="teamsChannels"
               placeholder="Select Microsoft Teams channels"
-              :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>
@@ -533,12 +527,12 @@ onMounted(() => {
       <a-row v-if="hook.notification.type === 'Discord'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <a-auto-complete
-              v-model:value="hook.notification.payload.channels"
-              size="large"
-              :options="discordChannels"
+            <WebhookChannelMultiSelect
+              v-if="discordChannels.length > 0"
+              v-model="hook.notification.payload.channels"
+              :selected-channel-list="hook.notification.payload.channels"
+              :available-channel-list="discordChannels"
               placeholder="Select Discord channels"
-              :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>
@@ -547,12 +541,12 @@ onMounted(() => {
       <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <a-auto-complete
-              v-model:value="hook.notification.payload.channels"
-              size="large"
-              :options="mattermostChannels"
+            <WebhookChannelMultiSelect
+              v-if="mattermostChannels.length > 0"
+              v-model="hook.notification.payload.channels"
+              :selected-channel-list="hook.notification.payload.channels"
+              :available-channel-list="mattermostChannels"
               placeholder="Select Mattermost channels"
-              :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>
@@ -573,7 +567,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-card>
             <a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox>
-            <SmartsheetToolbarColumnFilter v-if="hook.condition" />
+            <SmartsheetToolbarColumnFilter v-if="hook.condition" ref="filterRef" :auto-save="false" :hook-id="hook.id" />
           </a-card>
         </a-col>
       </a-row>
@@ -601,7 +595,6 @@ onMounted(() => {
             ref="webhookTestRef"
             :hook="{
               ...hook,
-              filters,
               notification: {
                 ...hook.notification,
                 payload: hook.notification.payload,
diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index c05cfdaa50..e9f084d5a9 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -4,13 +4,13 @@ import { MetaInj } from '~/context'
 import { inject, onMounted, ref, useNuxtApp } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 
-const emit = defineEmits(['edit'])
+const emit = defineEmits(['edit', 'add'])
 
 const { $api, $e } = useNuxtApp()
 
 const hooks = ref<Record<string, any>[]>([])
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj)!
 
 async function loadHooksList() {
   try {
@@ -58,7 +58,11 @@ onMounted(() => {
     </div>
     <a-divider />
     <div v-if="hooks.length">
-      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer pl-5 pr-5 pt-2 pb-2">
+      <a-list
+        item-layout="horizontal"
+        :data-source="hooks"
+        class="cursor-pointer max-h-[75vh] overflow-y-auto scrollbar-thin-primary"
+      >
         <template #renderItem="{ item, index }">
           <a-list-item class="pa-2" @click="emit('edit', item)">
             <a-list-item-meta>
diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 1a45f1f806..0a8e8551bf 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -28,7 +28,7 @@ watch(
 
 async function loadSampleData() {
   sampleData.value = {
-    data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation),
+    data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation || 'insert'),
   }
 }
 
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index e2aeaec68c..78ec8677ec 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -1,23 +1,13 @@
-import { createInjectionState } from '@vueuse/core'
 import clone from 'just-clone'
 import { Form, message } from 'ant-design-vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useColumn } from './useColumn'
-import { computed } from '#imports'
-import { useNuxtApp } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { computed, createInjectionState, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
 
 const useForm = Form.useForm
 
-// enum ColumnAlterType {
-//   NEW=4,
-//   EDIT=2,
-//   RENAME=8,
-//   DELETE=0,
-// }
-
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
@@ -242,6 +232,6 @@ export { useProvideColumnCreateStore }
 
 export function useColumnCreateStoreOrThrow() {
   const columnCreateStore = useColumnCreateStore()
-  if (columnCreateStore == null) throw new Error('Please call `useColumnCreateStore` on the appropriate parent component')
+  if (columnCreateStore == null) throw new Error('Please call `useProvideColumnCreateStore` on the appropriate parent component')
   return columnCreateStore
 }
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index de5d7874cd..9132809a50 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -3,19 +3,24 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import dayjs from 'dayjs'
-import { useApi, useInjectionState, useProject, useProvideSmartsheetRowStore } from '#imports'
-import { NOCO } from '~/lib'
-import { useNuxtApp } from '#app'
-import type { Row } from '~/composables/useViewData'
-import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+import {
+  NOCO,
+  extractPkFromRow,
+  extractSdkResponseErrorMsg,
+  useApi,
+  useInjectionState,
+  useNuxtApp,
+  useProject,
+  useProvideSmartsheetRowStore,
+} from '#imports'
+import type { Row } from '~/composables'
 
 const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   const { $e, $state, $api } = useNuxtApp()
   const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
-  // { useGlobalInstance: true },
-  // state
+
   const commentsOnly = ref(false)
-  const commentsAndLogs = ref([])
+  const commentsAndLogs = ref<any[]>([])
   const comment = ref('')
   const commentsDrawer = ref(false)
   const changedColumns = ref(new Set<string>())
@@ -84,11 +89,14 @@ 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 = ''
+
       message.success('Comment added successfully')
+
       await loadCommentsAndLogs()
     } catch (e: any) {
       message.error(e.message)
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index c61b3829cf..c0f7a799d4 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -58,6 +58,10 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     },
     filterAutoSave: true,
     previewAs: null,
+    includeM2M: false,
+    currentVersion: null,
+    latestRelease: null,
+    hiddenRelease: null,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
@@ -72,7 +76,21 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     set: (val) => (storage.value.token = val),
   })
 
-  const appInfo = ref<AppInfo>({ ncSiteUrl: 'localhost:8080' })
+  const appInfo = ref<AppInfo>({
+    ncSiteUrl: 'localhost:8080',
+    authType: 'jwt',
+    connectToExternalDB: false,
+    defaultLimit: 0,
+    firstUser: true,
+    githubAuthEnabled: false,
+    googleAuthEnabled: true,
+    ncMin: false,
+    oneClick: false,
+    projectHasAdmin: false,
+    teleEnabled: true,
+    type: 'nocodb',
+    version: '0.0.0',
+  })
 
   /** reactive token payload */
   const { payload } = useJwt<JwtPayload & User>(token)
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 0e57222752..e598332022 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -13,7 +13,7 @@ export interface FeedbackForm {
 
 export interface AppInfo {
   ncSiteUrl: string
-  authType: 'jwt' | 'masterKey' | 'none'
+  authType: 'jwt' | 'none'
   connectToExternalDB: boolean
   defaultLimit: number
   firstUser: boolean
@@ -35,6 +35,10 @@ export interface StoredState {
   feedbackForm: FeedbackForm
   filterAutoSave: boolean
   previewAs: string | null
+  includeM2M: boolean
+  currentVersion: string | null
+  latestRelease: string | null
+  hiddenRelease: string | null
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {
diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index 1e365cc54d..f26da87d31 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -3,6 +3,7 @@ import type { ColumnType, GridColumnType, GridType } 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>) {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
@@ -13,6 +14,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
   const gridViewCols = ref<Record<string, GridColumnType>>({})
   const resizingCol = ref('')
   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)
 
@@ -35,8 +37,8 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
   )
 
   const loadGridViewColumns = async () => {
-    if (!view.value?.id) return
-    const colsData: GridColumnType[] = await $api.dbView.gridColumnsList(view.value.id)
+    if (!view.value?.id && !isPublic.value) return
+    const colsData: GridColumnType[] = isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value.id)
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,
@@ -56,7 +58,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     }
 
     // sync with server if allowed
-    if (isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
+    if (!isPublic.value && isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
       $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
         width,
       })
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 08fae40172..b89ab6896b 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,10 +1,18 @@
 import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { Modal, message } from 'ant-design-vue'
-import { useInjectionState, useMetas, useProject } from '#imports'
-import { NOCO } from '~/lib'
+import {
+  NOCO,
+  computed,
+  extractSdkResponseErrorMsg,
+  reactive,
+  ref,
+  useInjectionState,
+  useMetas,
+  useNuxtApp,
+  useProject,
+} from '#imports'
 import type { Row } from '~/composables'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
 interface DataApiResponse {
   list: Record<string, any>
@@ -13,13 +21,13 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
     const { $api } = useNuxtApp()
-    const childrenExcludedList: Ref<DataApiResponse | undefined> = ref()
-    const childrenList: Ref<DataApiResponse | undefined> = ref()
+    const childrenExcludedList = ref<DataApiResponse | undefined>()
+    const childrenList = ref<DataApiResponse | undefined>()
     const childrenExcludedListPagination = reactive({
       page: 1,
       query: '',
@@ -95,12 +103,13 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             colOptions.type as 'mm' | 'hm',
             column?.value?.title,
             {
-              limit: childrenExcludedListPagination.size,
-              offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+              limit: String(childrenExcludedListPagination.size),
+              offset: String(childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1)),
+              // todo: where clause is missing from type
               where:
                 childrenExcludedListPagination.query &&
                 `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
-            },
+            } as any,
           )
         }
       } catch (e: any) {
@@ -120,10 +129,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           colOptions.type as 'mm' | 'hm',
           column?.value?.title,
           {
-            limit: childrenListPagination.size,
-            offset: childrenListPagination.size * (childrenListPagination.page - 1),
+            limit: String(childrenListPagination.size),
+            offset: String(childrenListPagination.size * (childrenListPagination.page - 1)),
             where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
-          },
+          } as any,
         )
       } catch (e: any) {
         message.error(`Failed to load children list: ${await extractSdkResponseErrorMsg(e)}`)
diff --git a/packages/nc-gui-v2/composables/useMetas.ts b/packages/nc-gui-v2/composables/useMetas.ts
index 732f5393fe..8a780f1793 100644
--- a/packages/nc-gui-v2/composables/useMetas.ts
+++ b/packages/nc-gui-v2/composables/useMetas.ts
@@ -12,6 +12,14 @@ export function useMetas() {
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
   const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
+  const setMeta = async (model: any) => {
+    metas.value = {
+      ...metas.value,
+      [model.id!]: model,
+      [model.title]: model,
+    }
+  }
+
   const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
     if (!tableIdOrTitle) return null
     /** wait until loading is finished if requesting same meta */
@@ -83,5 +91,5 @@ export function useMetas() {
     }
   }
 
-  return { getMeta, clearAllMeta, metas, removeMeta }
+  return { getMeta, clearAllMeta, metas, removeMeta, setMeta }
 }
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index aada5727b6..053787d3bd 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -2,6 +2,7 @@ import { SqlUiFactory } from 'nocodb-sdk'
 import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp, useRoute, useState } from '#app'
+import type { ProjectMetaInfo } from '~/lib'
 import { USER_PROJECT_ROLES } from '~/lib'
 
 export function useProject(projectId?: MaybeRef<string>) {
@@ -12,10 +13,18 @@ export function useProject(projectId?: MaybeRef<string>) {
   const project = useState<ProjectType>('project')
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
   const route = useRoute()
-
+  const { includeM2M } = useGlobal()
+  const projectMetaInfo = useState<ProjectMetaInfo | undefined>('projectMetaInfo')
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
 
+  async function loadProjectMetaInfo(force?: boolean) {
+    if (!projectMetaInfo.value || force) {
+      const data = await $api.project.metaGet(project.value.id!, {}, {})
+      projectMetaInfo.value = data
+    }
+  }
+
   async function loadProjectRoles() {
     projectRoles.value = {}
 
@@ -27,7 +36,10 @@ export function useProject(projectId?: MaybeRef<string>) {
 
   async function loadTables() {
     if (project.value.id) {
-      const tablesResponse = await $api.dbTable.list(project.value.id)
+      const tablesResponse = await $api.dbTable.list(project.value.id, {
+        // FIXME: type
+        includeM2M: includeM2M.value || '',
+      })
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
   }
@@ -56,5 +68,18 @@ export function useProject(projectId?: MaybeRef<string>) {
   )
   const isSharedBase = computed(() => projectType === 'base')
 
-  return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isMssql, isPg, sqlUi, isSharedBase }
+  return {
+    project,
+    tables,
+    loadProjectRoles,
+    loadProject,
+    loadTables,
+    isMysql,
+    isMssql,
+    isPg,
+    sqlUi,
+    isSharedBase,
+    loadProjectMetaInfo,
+    projectMetaInfo,
+  }
 }
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
new file mode 100644
index 0000000000..ce8faa3d5c
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -0,0 +1,108 @@
+import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { useNuxtApp } from '#app'
+
+export function useSharedView() {
+  const nestedFilters = useState<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>(
+    'nestedFilters',
+    () => [],
+  )
+  const paginationData = useState<PaginatedType>('paginationData', () => ({ page: 1, pageSize: 25 }))
+  const sharedView = useState<ViewType>('sharedView')
+  const sorts = useState<SortType[]>('sorts', () => [])
+  const password = useState<string | undefined>('password')
+  const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
+
+  const meta = ref<TableType>(sharedView.value?.model)
+  const columns = ref<ColumnType[]>(sharedView.value?.model?.columns)
+  const formColumns = computed(
+    () =>
+      columns.value
+        .filter(
+          (f: Record<string, any>) =>
+            f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
+        )
+        .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
+        .map((c: Record<string, any>) => ({ ...c, required: !!(c.required || 0) })) ?? [],
+  )
+
+  const { $api } = useNuxtApp()
+  const { setMeta } = useMetas()
+
+  const loadSharedView = async (viewId: string, localPassword: string | undefined = undefined) => {
+    const viewMeta = await $api.public.sharedViewMetaGet(viewId, {
+      headers: {
+        'xc-password': localPassword ?? password.value,
+      },
+    })
+
+    allowCSVDownload.value = JSON.parse(viewMeta.meta).allowCSVDownload
+
+    if (localPassword) password.value = localPassword
+    sharedView.value = viewMeta
+
+    meta.value = viewMeta.model
+    columns.value = viewMeta.model.columns
+
+    setMeta(viewMeta.model)
+
+    const relatedMetas = { ...viewMeta.relatedMetas }
+    Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
+  }
+
+  const fetchSharedViewData = async () => {
+    const page = paginationData.value.page || 1
+    const pageSize = paginationData.value.pageSize || 25
+
+    const { data } = await $api.public.dataList(
+      sharedView?.value?.uuid,
+      {
+        offset: (page - 1) * pageSize,
+        filterArrJson: JSON.stringify(nestedFilters.value),
+        sortArrJson: JSON.stringify(sorts.value),
+      } as any,
+      {
+        headers: {
+          'xc-password': password.value,
+        },
+      },
+    )
+
+    return data
+  }
+
+  const exportFile = async (
+    fields: any[],
+    offset: number,
+    type: ExportTypes.EXCEL | ExportTypes.CSV,
+    responseType: 'base64' | 'blob',
+  ) => {
+    return await $api.public.csvExport(sharedView.value?.uuid, type, {
+      format: responseType as any,
+      query: {
+        fields: fields.map((field) => field.title),
+        offset,
+        sortArrJson: JSON.stringify(sorts.value),
+
+        filterArrJson: JSON.stringify(nestedFilters.value),
+      },
+      headers: {
+        'xc-password': password.value,
+      },
+    })
+  }
+
+  return {
+    sharedView,
+    loadSharedView,
+    meta,
+    columns,
+    nestedFilters,
+    fetchSharedViewData,
+    paginationData,
+    sorts,
+    exportFile,
+    formColumns,
+    allowCSVDownload,
+  }
+}
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index bc9a59aa37..8bb3135a89 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -2,9 +2,8 @@ import { message } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#app'
-import { useInjectionState, useMetas, useProject, useVirtualCell } from '#imports'
-import type { Row } from '~/composables/useViewData'
+import type { Row } from './useViewData'
+import { useInjectionState, useMetas, useNuxtApp, useProject, useVirtualCell } from '#imports'
 import { NOCO } from '~/lib'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
@@ -47,7 +46,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         project.value.title as string,
         meta.value.title as string,
         rowId,
-        type,
+        type as 'mm' | 'hm',
         column.title as string,
         relatedRowId,
       )
@@ -69,14 +68,19 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
       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)
+          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(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
           column,
-          colOptions.type,
+          colOptions.type as RelationTypes,
         )
       }
     }
diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts
index 4c3c08d8e4..43f64ad02d 100644
--- a/packages/nc-gui-v2/composables/useTabs.ts
+++ b/packages/nc-gui-v2/composables/useTabs.ts
@@ -53,8 +53,8 @@ export function useTabs() {
       } else if ((route.name as string)?.startsWith('nc-projectId-index-index-auth')) {
         return tabs.value.findIndex((t) => t.type === 'auth')
       }
-
-      return -1
+      // by default, it's showing Team & Auth
+      return 0
     },
     set(index: number) {
       if (index === -1) {
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index 62ff91f05e..9ac28afbe4 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -1,15 +1,15 @@
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { useState } from '#app'
-import { USER_PROJECT_ROLES } from '~/lib/constants'
+import { USER_PROJECT_ROLES, useGlobal, useState } from '#imports'
 
 export function useUIPermission() {
-  const { $state } = useNuxtApp()
+  const { user, previewAs } = useGlobal()
+
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
-  const isUIAllowed = (permission: Permission, skipPreviewAs = false) => {
-    const user = $state.user
-    let userRoles = user?.value?.roles || {}
+  const getRoles = (skipPreviewAs = false) => {
+    let userRoles = user.value?.roles || {}
+
     // if string populate key-value paired object
     if (typeof userRoles === 'string') {
       userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
@@ -21,19 +21,23 @@ export function useUIPermission() {
     // merge user role and project specific user roles
     let roles = {
       ...userRoles,
-      ...(projectRoles?.value || {}),
+      ...projectRoles.value,
     }
 
-    if ($state.previewAs.value && !skipPreviewAs) {
+    if (previewAs.value && !skipPreviewAs) {
       roles = {
-        [$state.previewAs.value]: true,
+        [previewAs.value]: true,
       }
     }
 
-    return Object.entries<boolean>(roles).some(([role, hasRole]) => {
+    return roles
+  }
+
+  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
+    return Object.entries<boolean>(getRoles(skipPreviewAs)).some(([role, hasRole]) => {
       const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
 
-      return hasRole && (rolePermission === '*' || rolePermission?.[permission])
+      return hasRole && (rolePermission === '*' || rolePermission?.[permission as Permission])
     })
   }
 
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index c0fc06149e..c775d36dc3 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -3,13 +3,10 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
+import { IsPublicInj } from '#imports'
 
-export function useViewColumns(
-  view: Ref<ViewType> | undefined,
-  meta: ComputedRef<TableType>,
-  isPublic = false,
-  reloadData?: () => void,
-) {
+export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
+  const isPublic = inject(IsPublicInj, ref(false))
   const fields = ref<
     {
       order: number
@@ -31,7 +28,7 @@ export function useViewColumns(
 
     let order = 1
     if (view.value?.id) {
-      const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
+      const data = (isPublic.value ? meta.value?.columns : await $api.dbViewColumn.list(view.value.id)) as any[]
 
       const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
         curr.show = !!curr.show
@@ -54,12 +51,19 @@ export function useViewColumns(
           }
         })
         .sort((a, b) => a.order - b.order)
-    } else if (isPublic) {
-      fields.value = meta.value.columns as any
     }
   }
 
   const showAll = async (ignoreIds?: any) => {
+    if (isPublic.value) {
+      fields.value = fields.value?.map((field) => ({
+        ...field,
+        show: true,
+      }))
+      reloadData?.()
+      return
+    }
+
     if (view?.value?.id) {
       if (ignoreIds) {
         await $api.dbView.showAllColumn(view.value.id, {
@@ -74,6 +78,14 @@ export function useViewColumns(
     reloadData?.()
   }
   const hideAll = async (ignoreIds?: any) => {
+    if (isPublic.value) {
+      fields.value = fields.value?.map((field) => ({
+        ...field,
+        show: false,
+      }))
+      reloadData?.()
+      return
+    }
     if (view?.value?.id) {
       if (ignoreIds) {
         await $api.dbView.hideAllColumn(view.value.id, {
@@ -89,6 +101,22 @@ export function useViewColumns(
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
+    if (isPublic && fields.value) {
+      fields.value[index] = field
+      meta.value.columns = meta.value?.columns?.map((column) => {
+        if (column.id === field.fk_column_id) {
+          return {
+            ...column,
+            ...field,
+          }
+        }
+        return column
+      })
+
+      reloadData?.()
+      return
+    }
+
     if (isUIAllowed('fieldsSync')) {
       if (field.id && view?.value?.id) {
         await $api.dbViewColumn.update(view.value.id, field.id, field)
@@ -113,15 +141,18 @@ export function useViewColumns(
 
   const showSystemFields = computed({
     get() {
-      return view?.value?.show_system_fields || false
+      // todo: show_system_fields missing from ViewType
+      return (view?.value as any)?.show_system_fields || false
     },
     set(v: boolean) {
       if (view?.value?.id) {
-        $api.dbView
-          .update(view.value.id, {
-            show_system_fields: v,
-          })
-          .finally(() => reloadData?.())
+        if (!isPublic.value) {
+          $api.dbView
+            .update(view.value.id, {
+              show_system_fields: v,
+            })
+            .finally(() => reloadData?.())
+        }
         ;(view.value as any).show_system_fields = v
       }
     },
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index c2c10fd8c1..8c37a085bf 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -2,9 +2,7 @@ import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType,
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
-import { NOCO } from '~/lib'
-import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+import { IsPublicInj, NOCO, extractPkFromRow, extractSdkResponseErrorMsg, useProject } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -32,16 +30,30 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
-  const formattedData = ref<Row[]>([])
-  const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+  const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
-  const galleryData = ref<GalleryType | undefined>(undefined)
-  const formColumnData = ref<FormType | undefined>(undefined)
-  const formViewData = ref<FormType | undefined>(undefined)
+  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 formattedData = ref<Row[]>([])
 
+  const isPublic = inject(IsPublicInj, ref(false))
   const { project } = useProject()
+  const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
 
+  const paginationData = computed({
+    get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
+    set: (value) => {
+      if (isPublic.value) {
+        sharedPaginationData.value = value
+      } else {
+        _paginationData.value = value
+      }
+    },
+  })
+
   const selectedAllRecords = computed({
     get() {
       return !!formattedData.value.length && formattedData.value.every((row: Row) => row.rowMeta.selected)
@@ -70,9 +82,7 @@ export function useViewData(
   /** load row comments count */
   const loadAggCommentsCount = async () => {
     // todo: handle in public api
-    // if (this.isPublicView) {
-    //   return;
-    // }
+    if (isPublic.value) return
 
     const ids = formattedData.value
       ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
@@ -94,15 +104,18 @@ export function useViewData(
   }
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
-    const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
-      ...params,
-      where: where?.value,
-    })
+    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, {
+          ...params,
+          where: where?.value,
+        })
+      : await fetchSharedViewData()
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
 
-    loadAggCommentsCount()
+    await loadAggCommentsCount()
   }
 
   const loadGalleryData = async () => {
@@ -133,7 +146,8 @@ export function useViewData(
         rowMeta: {},
         oldRow: { ...insertedData },
       })
-      syncCount()
+
+      await syncCount()
     } catch (error: any) {
       message.error(await extractSdkResponseErrorMsg(error))
     }
@@ -241,8 +255,10 @@ export function useViewData(
           return
         }
       }
+
       formattedData.value.splice(rowIndex, 1)
-      syncCount()
+
+      await syncCount()
     } catch (e: any) {
       message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
     }
@@ -272,7 +288,8 @@ export function useViewData(
         return message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
       }
     }
-    syncCount()
+
+    await syncCount()
   }
 
   const loadFormView = async () => {
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 444e22df2a..4d1372a460 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,30 +1,69 @@
-import type { FilterType, ViewType } from 'nocodb-sdk'
+import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { useNuxtApp, useUIPermission } from '#imports'
-import { useMetas } from '~/composables/useMetas'
+import { IsPublicInj, ReloadViewDataHookInj, useMetas, useNuxtApp, useUIPermission } from '#imports'
+import type { Filter } from '~/lib'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
-  shared = false,
+  siblingFilters?: Filter[],
 ) {
-  const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+  const { nestedFilters } = useSharedView()
 
+  const reloadHook = inject(ReloadViewDataHookInj)
+
+  const _filters = ref<Filter[]>([])
+
+  const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
   const { isUIAllowed } = useUIPermission()
   const { metas } = useMetas()
 
-  const loadFilters = async () => {
-    if (parentId) {
-      filters.value = await $api.dbTableFilter.childrenRead(parentId)
+  const filters = computed({
+    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value),
+    set: (value) => {
+      if (isPublic.value) {
+        if (siblingFilters) {
+          siblingFilters = value
+        } else {
+          nestedFilters.value = value
+        }
+        nestedFilters.value = [...nestedFilters.value]
+        reloadHook?.trigger()
+      } else {
+        _filters.value = value
+      }
+    },
+  })
+
+  const placeholderFilter: Filter = {
+    comparison_op: 'eq',
+    value: '',
+    status: 'create',
+    logical_op: 'and',
+  }
+
+  const loadFilters = async (hookId?: string) => {
+    if (isPublic.value) return
+
+    if (hookId) {
+      if (parentId) {
+        filters.value = await $api.dbTableFilter.childrenRead(parentId)
+      } else {
+        filters.value = (await $api.dbTableWebhookFilter.read(hookId as string)) as any
+      }
     } else {
-      filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+      if (parentId) {
+        filters.value = await $api.dbTableFilter.childrenRead(parentId)
+      } else {
+        filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+      }
     }
   }
 
-  const sync = async (_nested = false) => {
+  const sync = async (hookId?: string, _nested = false) => {
     for (const [i, filter] of Object.entries(filters.value)) {
       if (filter.status === 'delete') {
         await $api.dbTableFilter.delete(filter.id as string)
@@ -34,18 +73,26 @@ export function useViewFilters(
           fk_parent_id: parentId,
         })
       } else if (filter.status === 'create') {
-        filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
-          ...filter,
-          fk_parent_id: parentId,
-        })) as any
+        if (hookId) {
+          filters.value[+i] = (await $api.dbTableWebhookFilter.create(hookId, {
+            ...filter,
+            fk_parent_id: parentId,
+          })) as any
+        } else {
+          filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+            ...filter,
+            fk_parent_id: parentId,
+          })) as any
+        }
       }
     }
+
     reloadData?.()
   }
 
-  const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
+  const deleteFilter = async (filter: Filter, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
-    if (shared || !isUIAllowed('filterSync')) {
+    if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
       reloadData?.()
     } else {
@@ -66,9 +113,14 @@ export function useViewFilters(
     }
   }
 
-  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
+  const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
+    if (isPublic.value) {
+      filters.value[i] = { ...filter } as any
+      filters.value = [...filters.value]
+      return
+    }
     if (!view?.value) return
-    if (shared || !isUIAllowed('filterSync')) {
+    if (!isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
       filter.status = filter.id ? 'update' : 'create'
@@ -78,30 +130,29 @@ export function useViewFilters(
         fk_parent_id: parentId,
       })
     } else {
-      filters.value[i] = await $api.dbTableFilter.create(view?.value?.id as string, {
+      // todo: return type of dbTableFilter is void?
+      filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
         ...filter,
         fk_parent_id: parentId,
-      })
+      })) as any
     }
     reloadData?.()
   }
 
   const addFilter = () => {
-    filters.value.push({
-      comparison_op: 'eq',
-      value: '',
-      status: 'create',
-      logical_op: 'and',
-    })
+    filters.value.push(placeholderFilter)
   }
 
-  const addFilterGroup = async (parentId?: string) => {
-    filters.value.push({
-      parentId,
+  const addFilterGroup = async () => {
+    const child = placeholderFilter
+    const placeHolderGroupFilter: Filter = {
       is_group: true,
       status: 'create',
       logical_op: 'and',
-    })
+    }
+    if (isPublic.value) placeHolderGroupFilter.children = [child]
+
+    filters.value.push(placeHolderGroupFilter)
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index 31e4a998e4..b6a3fa6bc0 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -1,18 +1,39 @@
 import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#imports'
+import { IsPublicInj, ReloadViewDataHookInj, useNuxtApp } from '#imports'
 
 export function useViewSorts(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   reloadData?: () => void,
 ) {
-  const sorts = ref<SortType[]>([])
+  const _sorts = ref<SortType[]>([])
+  const { sorts: sharedViewSorts, sharedView } = useSharedView()
+
+  const reloadHook = inject(ReloadViewDataHookInj)
+  const isPublic = inject(IsPublicInj, ref(false))
+
+  const sorts = computed<SortType[]>({
+    get: () => (isPublic.value ? sharedViewSorts.value : _sorts.value),
+    set: (value) => {
+      if (isPublic.value) {
+        sharedViewSorts.value = value
+      } else {
+        _sorts.value = value
+      }
+      reloadHook?.trigger()
+    },
+  })
 
   const { $api } = useNuxtApp()
 
   const { isUIAllowed } = useUIPermission()
 
   const loadSorts = async () => {
+    if (isPublic.value) {
+      const sharedSorts = sharedView.value?.sorts || []
+      sorts.value = [...sharedSorts]
+      return
+    }
     if (!view?.value) return
     sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
   }
@@ -20,6 +41,12 @@ export function useViewSorts(
   const saveOrUpdate = async (sort: SortType, i: number) => {
     // TODO:
     // if (!this.shared && this._isUIAllowed('sortSync')) {
+    if (isPublic.value) {
+      sorts.value[i] = sort
+      sorts.value = [...sorts.value]
+      return
+    }
+
     if (isUIAllowed('sortSync')) {
       if (sort.id) {
         await $api.dbTableSort.update(sort.id, sort)
@@ -30,19 +57,23 @@ export function useViewSorts(
     reloadData?.()
   }
   const addSort = () => {
-    sorts.value.push({
-      direction: 'asc',
-    })
+    sorts.value = [
+      ...sorts.value,
+      {
+        direction: 'asc',
+      },
+    ]
   }
 
   const deleteSort = async (sort: SortType, i: number) => {
     // TOOD:
     // if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
-    if (isUIAllowed('sortSync') && sort.id) {
+
+    if (isUIAllowed('sortSync') && sort.id && !isPublic.value) {
       await $api.dbTableSort.delete(sort.id)
-    } else {
-      sorts.value.splice(i, 1)
     }
+    sorts.value.splice(i, 1)
+    sorts.value = [...sorts.value]
   }
   return { sorts, loadSorts, addSort, deleteSort, saveOrUpdate }
 }
diff --git a/packages/nc-gui-v2/composables/useViews.ts b/packages/nc-gui-v2/composables/useViews.ts
index 854852f003..9083b7192c 100644
--- a/packages/nc-gui-v2/composables/useViews.ts
+++ b/packages/nc-gui-v2/composables/useViews.ts
@@ -1,16 +1,17 @@
 import type { TableType, ViewType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
-import { useNuxtApp } from '#app'
+import { unref, useNuxtApp, watch } from '#imports'
 
 export function useViews(meta: MaybeRef<TableType | undefined>) {
   let views = $ref<ViewType[]>([])
+
   const { $api } = useNuxtApp()
 
   const loadViews = async () => {
     const _meta = unref(meta)
 
     if (_meta && _meta.id) {
-      const response = (await $api.dbView.list(_meta.id)).list
+      const response = (await $api.dbView.list(_meta.id)).list as ViewType[]
       if (response) {
         views = response.sort((a, b) => a.order! - b.order!)
       }
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index d955c93802..c9d3ce92e6 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -6,6 +6,7 @@ import type { Row } from '~/composables'
 import type { TabItem } from '~/composables/useTabs'
 
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
+export const IsPublicInj: InjectionKey<Ref<boolean>> = Symbol('is-public')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
 export const ColumnInj: InjectionKey<Ref<ColumnType & { meta: any }>> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
diff --git a/packages/nc-gui-v2/httpsnippet-shims.d.ts b/packages/nc-gui-v2/httpsnippet-shims.d.ts
new file mode 100644
index 0000000000..a06664f07b
--- /dev/null
+++ b/packages/nc-gui-v2/httpsnippet-shims.d.ts
@@ -0,0 +1,3 @@
+declare module 'httpsnippet' {
+  export default new ((): any => {})()
+}
diff --git a/packages/nc-gui-v2/just-clone-shims.d.ts b/packages/nc-gui-v2/just-clone-shims.d.ts
new file mode 100644
index 0000000000..667284c0d6
--- /dev/null
+++ b/packages/nc-gui-v2/just-clone-shims.d.ts
@@ -0,0 +1 @@
+declare module 'just-clone'
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 2c49275d69..1ce866ad42 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -43,7 +43,11 @@ const logout = () => {
 
           <div class="flex-1" />
 
-          <a-tooltip placement="left">
+          <GeneralReleaseInfo />
+
+          <GeneralShareBaseButton />
+
+          <a-tooltip placement="bottom">
             <template #title> Switch language </template>
 
             <div class="flex pr-4 items-center">
@@ -83,7 +87,7 @@ const logout = () => {
         </a-layout-header>
       </Transition>
 
-      <a-tooltip>
+      <a-tooltip placement="bottom">
         <template #title> Switch language </template>
 
         <Transition name="layout">
diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
new file mode 100644
index 0000000000..a6d2aef876
--- /dev/null
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { navigateTo } from '#app'
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SharedView',
+}
+</script>
+
+<template>
+  <a-layout id="nc-app">
+    <a-layout class="!flex-col">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-3 pr-4 shadow-lg">
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
+
+        <div class="flex-1" />
+      </a-layout-header>
+
+      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
+        <slot />
+      </div>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+</style>
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index f468954e5f..7b006d67f7 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -1,5 +1,5 @@
+import type { FilterType } from 'nocodb-sdk'
 import type { Role } from './enums'
-
 export interface User {
   id: string
   email: string
@@ -10,4 +10,17 @@ export interface User {
   project_id?: string
 }
 
+export interface ProjectMetaInfo {
+  Node?: string
+  Arch?: string
+  Platform?: string
+  Docker?: boolean
+  Database?: string
+  ProjectOnRootDB?: string
+  RootDB?: string
+  PackageVersion?: string
+}
+
 export type Roles = Record<Role, boolean>
+
+export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index e1cf7e689b..da1f361f7a 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -48,6 +48,13 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    // todo: minifiy again
+    build: {
+      minify: false,
+      rollupOptions: {
+        external: 'httpsnippet',
+      },
+    },
     css: {
       preprocessorOptions: {
         less: {
@@ -59,6 +66,7 @@ export default defineNuxtConfig({
     plugins: [
       vueI18n({
         include: path.resolve(__dirname, './lang'),
+        runtimeOnly: false,
       }),
       Icons({
         autoInstall: true,
@@ -81,7 +89,6 @@ export default defineNuxtConfig({
     ],
     define: {
       'process.env.DEBUG': 'false',
-      'global': {},
     },
     server: {
       watch: {
@@ -91,17 +98,6 @@ export default defineNuxtConfig({
   },
   experimental: {
     reactivityTransform: true,
-    viteNode: false,
-  },
-
-  typescript: {
-    typeCheck: true,
-    strict: true,
-    tsConfig: {
-      compilerOptions: {
-        types: ['@intlify/vite-plugin-vue-i18n/client', 'vue-i18n', 'unplugin-icons/types/vue', 'nuxt-windicss'],
-      },
-    },
   },
 
   image: {
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 39f21c9386..c9bc82fe4c 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -12,6 +12,7 @@
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "jsep": "^1.3.6",
+        "just-clone": "^6.1.1",
         "jwt-decode": "^3.1.2",
         "locale-codes": "^1.3.1",
         "monaco-editor": "^0.33.0",
@@ -20,9 +21,8 @@
         "socket.io-client": "^4.5.1",
         "sortablejs": "^1.15.0",
         "unique-names-generator": "^4.7.1",
-        "url": "^0.11.0",
-        "util": "^0.12.4",
         "vue-dompurify-html": "^3.0.0",
+        "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.1.10",
         "vuedraggable": "^4.1.0",
         "vuetify": "^3.0.0-alpha.13",
@@ -38,13 +38,12 @@
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/ri": "^1.1.3",
-        "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+        "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
         "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
-        "@vitejs/plugin-vue": "^2.3.3",
         "@vitest/ui": "^0.18.0",
         "@vue/compiler-sfc": "^3.2.37",
         "@vue/test-utils": "^2.0.2",
@@ -1283,30 +1282,33 @@
       }
     },
     "node_modules/@intlify/vite-plugin-vue-i18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-4.0.0.tgz",
-      "integrity": "sha512-bX7WgJAnYAbhmfvMp17TjCzg4e4T68O7iqAcNo6TOS+oHK0kAJAN9AJfEMTdpDrAwURCw0VwZ0kgMFWDbJkY4g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-6.0.1.tgz",
+      "integrity": "sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==",
       "dev": true,
       "dependencies": {
         "@intlify/bundle-utils": "next",
         "@intlify/shared": "next",
-        "@rollup/pluginutils": "^4.1.0",
+        "@rollup/pluginutils": "^4.2.0",
         "debug": "^4.3.1",
         "fast-glob": "^3.2.5",
         "source-map": "0.6.1"
       },
       "engines": {
-        "node": ">= 12"
+        "node": ">= 14.6"
       },
       "peerDependencies": {
-        "petite-vue-i18n": "next",
-        "vite": "^2.9.0",
-        "vue-i18n": "next"
+        "petite-vue-i18n": "*",
+        "vite": "^2.9.0 || ^3.0.0",
+        "vue-i18n": "*"
       },
       "peerDependenciesMeta": {
         "petite-vue-i18n": {
           "optional": true
         },
+        "vite": {
+          "optional": true
+        },
         "vue-i18n": {
           "optional": true
         }
@@ -3796,17 +3798,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/axios": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
@@ -4043,6 +4034,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -5213,6 +5205,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
       "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -5582,6 +5575,7 @@
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
       "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
@@ -5635,6 +5629,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -7271,14 +7266,6 @@
         }
       }
     },
-    "node_modules/for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dependencies": {
-        "is-callable": "^1.1.3"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -7421,12 +7408,14 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "devOptional": true
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
       "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -7450,6 +7439,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7505,6 +7495,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
       "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -7557,6 +7548,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
       "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -7596,6 +7588,11 @@
         "git-up": "^4.0.0"
       }
     },
+    "node_modules/github-buttons": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.22.0.tgz",
+      "integrity": "sha512-N5bk01s1WgK1FVtoeSUVkRkJpkaSu8yHMPcjye+PTa0jsRjMRNrYqVLgpUf2RA5Kvec05DfHYAT6/68fwkdqPw=="
+    },
     "node_modules/github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -7810,6 +7807,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "devOptional": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -7842,6 +7840,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
       "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7859,6 +7858,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
       },
@@ -7870,6 +7870,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7881,6 +7882,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -8395,7 +8397,8 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -8449,6 +8452,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
       "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.0",
         "has": "^1.0.3",
@@ -8529,21 +8533,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -8554,6 +8543,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
       "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
       "dependencies": {
         "has-bigints": "^1.0.1"
       },
@@ -8577,6 +8567,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
       "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -8604,6 +8595,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
       "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8627,6 +8619,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8680,20 +8673,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-generator-function": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
-      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -8735,6 +8714,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
       "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8755,6 +8735,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
       "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8818,6 +8799,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -8842,6 +8824,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
       "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       },
@@ -8874,6 +8857,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8888,6 +8872,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -8898,24 +8883,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-typed-array": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
-      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -8932,6 +8899,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
       "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       },
@@ -9221,6 +9189,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/just-clone": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/just-clone/-/just-clone-6.1.1.tgz",
+      "integrity": "sha512-V24KLIid8uaG7ayOymGfheNHtxgrbpzj1UznQnF9vQZMHlKGTSLT3WWmFx62OXSQPwk1Tn+uo+H5/Xhb4bL9pA=="
+    },
     "node_modules/jwt-decode": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
@@ -10557,6 +10530,7 @@
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
       "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -10565,6 +10539,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -10573,6 +10548,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.3.tgz",
       "integrity": "sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -11938,15 +11914,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -12237,6 +12204,7 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
       "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -12464,7 +12432,8 @@
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "node_modules/safe-regex": {
       "version": "2.1.1",
@@ -12773,6 +12742,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -13143,6 +13113,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
       "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -13156,6 +13127,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
       "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -13846,6 +13818,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
       "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -14182,33 +14155,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-    },
-    "node_modules/util": {
-      "version": "0.12.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
-      "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "safe-buffer": "^5.1.2",
-        "which-typed-array": "^1.1.2"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -14596,6 +14542,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-github-button": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz",
+      "integrity": "sha512-O2Kv5HxRMn1qqgt2sSy8N7y2C6WGOeICzgGj6y+JFcnLjorTTzNR8vY5abiPOYDiW03WZ/9hUIn7Gm9CG9pIuA==",
+      "dependencies": {
+        "github-buttons": "^2.21.1"
+      }
+    },
     "node_modules/vue-i18n": {
       "version": "9.1.10",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
@@ -14889,6 +14843,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
       "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
       "dependencies": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -14900,25 +14855,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/which-typed-array": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
-      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0",
-        "is-typed-array": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -16175,14 +16111,14 @@
       "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA=="
     },
     "@intlify/vite-plugin-vue-i18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-4.0.0.tgz",
-      "integrity": "sha512-bX7WgJAnYAbhmfvMp17TjCzg4e4T68O7iqAcNo6TOS+oHK0kAJAN9AJfEMTdpDrAwURCw0VwZ0kgMFWDbJkY4g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-6.0.1.tgz",
+      "integrity": "sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==",
       "dev": true,
       "requires": {
         "@intlify/bundle-utils": "next",
         "@intlify/shared": "next",
-        "@rollup/pluginutils": "^4.1.0",
+        "@rollup/pluginutils": "^4.2.0",
         "debug": "^4.3.1",
         "fast-glob": "^3.2.5",
         "source-map": "0.6.1"
@@ -18103,11 +18039,6 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
-    "available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
-    },
     "axios": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
@@ -18279,6 +18210,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -19179,6 +19111,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
       "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
       "requires": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -19455,6 +19388,7 @@
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
       "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
@@ -19502,6 +19436,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -20617,14 +20552,6 @@
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
       "devOptional": true
     },
-    "for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "requires": {
-        "is-callable": "^1.1.3"
-      }
-    },
     "form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -20735,12 +20662,14 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "devOptional": true
     },
     "function.prototype.name": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
       "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -20757,7 +20686,8 @@
     "functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
     },
     "gauge": {
       "version": "3.0.2",
@@ -20798,6 +20728,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
       "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -20835,6 +20766,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
       "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -20865,6 +20797,11 @@
         "git-up": "^4.0.0"
       }
     },
+    "github-buttons": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.22.0.tgz",
+      "integrity": "sha512-N5bk01s1WgK1FVtoeSUVkRkJpkaSu8yHMPcjye+PTa0jsRjMRNrYqVLgpUf2RA5Kvec05DfHYAT6/68fwkdqPw=="
+    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -21031,6 +20968,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "devOptional": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -21055,7 +20993,8 @@
     "has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
     },
     "has-flag": {
       "version": "4.0.0",
@@ -21067,6 +21006,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.1"
       }
@@ -21074,12 +21014,14 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
     },
     "has-tostringtag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -21463,7 +21405,8 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "ini": {
       "version": "1.3.8",
@@ -21510,6 +21453,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
       "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.0",
         "has": "^1.0.3",
@@ -21569,15 +21513,6 @@
         "is-decimal": "^1.0.0"
       }
     },
-    "is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -21588,6 +21523,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
       "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
       "requires": {
         "has-bigints": "^1.0.1"
       }
@@ -21605,6 +21541,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
       "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -21622,7 +21559,8 @@
     "is-callable": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true
     },
     "is-core-module": {
       "version": "2.9.0",
@@ -21637,6 +21575,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -21665,14 +21604,6 @@
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true
     },
-    "is-generator-function": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
-      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "requires": {
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -21703,7 +21634,8 @@
     "is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA=="
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
     },
     "is-number": {
       "version": "7.0.0",
@@ -21715,6 +21647,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
       "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -21763,6 +21696,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -21778,6 +21712,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
       "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2"
       }
@@ -21801,6 +21736,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -21809,22 +21745,11 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
     },
-    "is-typed-array": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
-      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -21835,6 +21760,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
       "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2"
       }
@@ -22055,6 +21981,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "just-clone": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/just-clone/-/just-clone-6.1.1.tgz",
+      "integrity": "sha512-V24KLIid8uaG7ayOymGfheNHtxgrbpzj1UznQnF9vQZMHlKGTSLT3WWmFx62OXSQPwk1Tn+uo+H5/Xhb4bL9pA=="
+    },
     "jwt-decode": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
@@ -23145,17 +23076,20 @@
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true
     },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
     },
     "object.assign": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.3.tgz",
       "integrity": "sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -24121,11 +24055,6 @@
         "strict-uri-encode": "^2.0.0"
       }
     },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g=="
-    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -24348,6 +24277,7 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
       "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -24502,7 +24432,8 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "safe-regex": {
       "version": "2.1.1",
@@ -24761,6 +24692,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -25040,6 +24972,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
       "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -25050,6 +24983,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
       "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -25576,6 +25510,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
       "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -25792,35 +25727,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-        }
-      }
-    },
-    "util": {
-      "version": "0.12.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
-      "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
-      "requires": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "safe-buffer": "^5.1.2",
-        "which-typed-array": "^1.1.2"
-      }
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -26088,6 +25994,14 @@
         }
       }
     },
+    "vue-github-button": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz",
+      "integrity": "sha512-O2Kv5HxRMn1qqgt2sSy8N7y2C6WGOeICzgGj6y+JFcnLjorTTzNR8vY5abiPOYDiW03WZ/9hUIn7Gm9CG9pIuA==",
+      "requires": {
+        "github-buttons": "^2.21.1"
+      }
+    },
     "vue-i18n": {
       "version": "9.1.10",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
@@ -26295,6 +26209,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
       "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
       "requires": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -26303,19 +26218,6 @@
         "is-symbol": "^1.0.3"
       }
     },
-    "which-typed-array": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
-      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0",
-        "is-typed-array": "^1.1.9"
-      }
-    },
     "wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 61948750c0..cca8e10ace 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -27,9 +27,8 @@
     "socket.io-client": "^4.5.1",
     "sortablejs": "^1.15.0",
     "unique-names-generator": "^4.7.1",
-    "url": "^0.11.0",
-    "util": "^0.12.4",
     "vue-dompurify-html": "^3.0.0",
+    "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.1.10",
     "vuedraggable": "^4.1.0",
     "vuetify": "^3.0.0-alpha.13",
@@ -45,13 +44,12 @@
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/ri": "^1.1.3",
-    "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
     "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
     "@types/sortablejs": "^1.13.0",
-    "@vitejs/plugin-vue": "^2.3.3",
     "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index d2e6d3d68c..24883c6944 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -1,16 +1,31 @@
 <script setup lang="ts">
-import { navigateTo, onKeyStroke, provideSidebar, ref, useProject, useRoute, useTabs, useUIPermission } from '#imports'
+import { message } from 'ant-design-vue'
+import {
+  navigateTo,
+  onKeyStroke,
+  openLink,
+  provideSidebar,
+  ref,
+  useClipboard,
+  useElementHover,
+  useProject,
+  useRoute,
+  useTabs,
+  useUIPermission,
+} from '#imports'
 import { TabType } from '~/composables'
-import { openLink } from '~/utils'
-
 const route = useRoute()
 
-const { project, loadProject, loadTables, isSharedBase } = useProject()
+const { appInfo, token } = useGlobal()
+
+const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
 
 const { addTab, clearTabs } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
+const { copy } = useClipboard()
+
 // create a new sidebar state
 const { isOpen, toggle } = provideSidebar({ isOpen: true })
 
@@ -20,6 +35,9 @@ const openDialogKey = ref<string>()
 
 const dropdownOpen = ref(false)
 
+/** Sidebar ref */
+const sidebar = ref()
+
 onKeyStroke(
   'Escape',
   () => {
@@ -42,12 +60,40 @@ function toggleDialog(value?: boolean, key?: string) {
 await loadProject()
 
 await loadTables()
+
+const isHovered = useElementHover(sidebar)
+
+const copyProjectInfo = async () => {
+  try {
+    await loadProjectMetaInfo()
+    copy(
+      Object.entries(projectMetaInfo.value!)
+        .map(([k, v]) => `${k}: **${v}**`)
+        .join('\n'),
+    )
+    message.info('Copied project info to clipboard')
+  } catch (e: any) {
+    console.log(e)
+    message.error(e.message)
+  }
+}
+
+const copyAuthToken = async () => {
+  try {
+    copy(token.value!)
+    message.info('Copied auth token to clipboard')
+  } catch (e: any) {
+    console.log(e)
+    message.error(e.message)
+  }
+}
 </script>
 
 <template>
   <NuxtLayout id="content" class="flex">
     <template #sidebar>
       <a-layout-sider
+        ref="sidebar"
         :collapsed="!isOpen"
         width="250"
         collapsed-width="50"
@@ -56,7 +102,11 @@ await loadTables()
         collapsible
         theme="light"
       >
-        <div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 pl-5 gap-2">
+        <div
+          style="height: var(--header-height)"
+          :class="isOpen ? 'pl-6' : ''"
+          class="flex items-center !bg-primary text-white px-1 gap-2"
+        >
           <div
             v-if="isOpen && !isSharedBase"
             class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"
@@ -64,6 +114,7 @@ await loadTables()
           >
             <img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </div>
+
           <a
             v-if="isOpen && isSharedBase"
             class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"
@@ -77,6 +128,7 @@ await loadTables()
             <template v-if="isOpen">
               <div class="text-xl font-semibold truncate">{{ project.title }}</div>
             </template>
+
             <template v-else>
               <MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
             </template>
@@ -111,6 +163,7 @@ await loadTables()
 
                         <div class="flex items-center gap-1">
                           <div class="group-hover:(!text-primary)">ID:</div>
+
                           <div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div>
                         </div>
                       </div>
@@ -118,7 +171,7 @@ await loadTables()
                   </template>
 
                   <a-menu-item key="copy">
-                    <div class="nc-project-menu-item group">
+                    <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
                       <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
                       Copy Project Info
                     </div>
@@ -129,13 +182,20 @@ await loadTables()
                       v-if="isUIAllowed('apiDocs')"
                       v-t="['e:api-docs']"
                       class="nc-project-menu-item group"
-                      @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`)"
+                      @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                     >
                       <MdiApi class="group-hover:text-pink-500 nc-swagger-api-docs" />
                       Swagger: Rest APIs
                     </div>
                   </a-menu-item>
 
+                  <a-menu-item key="copy">
+                    <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                      <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
+                      Copy Auth Token
+                    </div>
+                  </a-menu-item>
+
                   <a-menu-divider />
 
                   <a-menu-item key="teamAndAuth">
@@ -212,24 +272,27 @@ await loadTables()
           </a-dropdown>
         </div>
 
-        <a-tooltip placement="right">
+        <a-tooltip :mouse-enter-delay="1" placement="right">
           <template #title> Toggle table list </template>
 
-          <div
-            class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
-          >
-            <MaterialSymbolsChevronLeftRounded
-              v-if="isOpen"
-              class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-              @click="toggle(false)"
-            />
-
-            <MaterialSymbolsChevronRightRounded
-              v-else
-              class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-              @click="toggle(true)"
-            />
-          </div>
+          <Transition name="glow">
+            <div
+              v-show="!isOpen || isHovered"
+              class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
+            >
+              <MaterialSymbolsChevronLeftRounded
+                v-if="isOpen"
+                class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                @click="toggle(false)"
+              />
+
+              <MaterialSymbolsChevronRightRounded
+                v-else
+                class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                @click="toggle(true)"
+              />
+            </div>
+          </Transition>
         </a-tooltip>
 
         <DashboardTreeView v-show="isOpen" />
@@ -237,6 +300,7 @@ await loadTables()
     </template>
 
     <dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />
+
     <NuxtPage />
 
     <GeneralPreviewAs float />
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index f659ea0410..693549d18b 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -1,15 +1,8 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
 import { TabType } from '~/composables'
-import { TabMetaInj } from '~/context'
-import { useTabs, useUIPermission } from '#imports'
-import MdiPlusIcon from '~icons/mdi/plus'
-import MdiTableIcon from '~icons/mdi/table'
-import MdiCsvIcon from '~icons/mdi/file-document-outline'
-import MdiExcelIcon from '~icons/mdi/file-excel'
-import MdiJSONIcon from '~icons/mdi/code-json'
+import { TabMetaInj, useTabs, useUIPermission } from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
-import MdiRequestDataSourceIcon from '~icons/mdi/open-in-new'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
@@ -46,7 +39,7 @@ const icon = (tab: TabItem) => {
   <div class="h-full w-full nc-container pt-[9px]">
     <div class="h-full w-full flex flex-col">
       <div>
-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab(activeTabIndex)">
           <a-tab-pane v-for="(tab, i) in tabs" :key="i">
             <template #tab>
               <div class="flex align-center gap-2">
@@ -61,19 +54,21 @@ const icon = (tab: TabItem) => {
               <a-sub-menu key="addORImport">
                 <template #title>
                   <div class="text-sm flex items-center gap-2 pt-[8px] pb-3">
-                    <MdiPlusIcon />
+                    <MdiPlusBoxOutline />
                     Add / Import
                   </div>
                 </template>
+
                 <a-menu-item-group v-if="isUIAllowed('addTable')">
                   <a-menu-item key="add-new-table" v-t="['a:actions:create-table']" @click="tableCreateDialog = true">
                     <span class="flex items-center gap-2">
-                      <MdiTableIcon class="text-primary" />
+                      <MdiTable class="text-primary" />
                       <!-- Add new table -->
                       {{ $t('tooltip.addTable') }}
                     </span>
                   </a-menu-item>
                 </a-menu-item-group>
+
                 <a-menu-item-group title="QUICK IMPORT FROM">
                   <a-menu-item
                     v-if="isUIAllowed('airtableImport')"
@@ -82,7 +77,7 @@ const icon = (tab: TabItem) => {
                     @click="airtableImportDialog = true"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiAirTableIcon class="text-primary" />
+                      <MdiTableLarge class="text-primary" />
                       <!-- TODO: i18n -->
                       Airtable
                     </span>
@@ -94,11 +89,12 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('csv')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiCsvIcon class="text-primary" />
+                      <MdiFileDocumentOutline class="text-primary" />
                       <!-- TODO: i18n -->
                       CSV file
                     </span>
                   </a-menu-item>
+
                   <a-menu-item
                     v-if="isUIAllowed('jsonImport')"
                     key="quick-import-json"
@@ -106,11 +102,12 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('json')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiJSONIcon class="text-primary" />
+                      <MdiCodeJson class="text-primary" />
                       <!-- TODO: i18n -->
                       JSON file
                     </span>
                   </a-menu-item>
+
                   <a-menu-item
                     v-if="isUIAllowed('excelImport')"
                     key="quick-import-excel"
@@ -118,13 +115,15 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('excel')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiExcelIcon class="text-primary" />
+                      <MdiFileExcel class="text-primary" />
                       <!-- TODO: i18n -->
                       Microsoft Excel
                     </span>
                   </a-menu-item>
                 </a-menu-item-group>
-                <a-divider class="ma-0 mb-2" />
+
+                <a-menu-divider class="ma-0 mb-2" />
+
                 <a-menu-item
                   v-if="isUIAllowed('importRequest')"
                   key="add-new-table"
@@ -133,7 +132,7 @@ const icon = (tab: TabItem) => {
                 >
                   <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank" class="prose-sm pa-0">
                     <span class="flex items-center gap-2">
-                      <MdiRequestDataSourceIcon class="text-primary" />
+                      <MdiOpenInNew class="text-primary" />
                       <!-- TODO: i18n -->
                       Request a data source you need?
                     </span>
@@ -150,7 +149,9 @@ const icon = (tab: TabItem) => {
     </div>
 
     <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
+
     <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" :import-type="importType" />
+
     <DlgAirtableImport v-if="airtableImportDialog" v-model="airtableImportDialog" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
new file mode 100644
index 0000000000..aa46ab0e85
--- /dev/null
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj, useRoute } from '#imports'
+
+definePageMeta({
+  requiresAuth: false,
+})
+
+const route = useRoute()
+
+const reloadEventHook = createEventHook<void>()
+const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
+
+await loadSharedView(route.params.viewId as string)
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, formColumns)
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex">
+    <div class="nc-container flex flex-col h-full mt-2 px-6">
+      <SharedViewForm />
+    </div>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
new file mode 100644
index 0000000000..2be1b26654
--- /dev/null
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ReadonlyInj, ReloadViewDataHookInj, useRoute } from '#imports'
+
+definePageMeta({
+  requiresAuth: false,
+  layout: 'shared-view',
+})
+
+const route = useRoute()
+
+const reloadEventHook = createEventHook<void>()
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(ReadonlyInj, ref(true))
+
+const { loadSharedView } = useSharedView()
+const showPassword = ref(false)
+
+try {
+  await loadSharedView(route.params.viewId as string)
+} catch (e) {
+  showPassword.value = true
+}
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex" name="shared-view">
+    <div v-if="showPassword">
+      <SharedViewAskPassword v-model="showPassword" />
+    </div>
+    <SharedViewGrid v-else />
+  </NuxtLayout>
+</template>
diff --git a/packages/nc-gui-v2/pages/forgot-password.vue b/packages/nc-gui-v2/pages/forgot-password.vue
index d2c5360c67..6dc766cc9d 100644
--- a/packages/nc-gui-v2/pages/forgot-password.vue
+++ b/packages/nc-gui-v2/pages/forgot-password.vue
@@ -63,10 +63,10 @@ function resetError() {
       ref="formValidator"
       layout="vertical"
       :model="form"
-      class="bg-primary/5 forgot-password h-full min-h-[600px] flex justify-center items-center"
+      class="bg-primary/5 forgot-password h-full flex justify-center items-center nc-form-signin"
       @finish="resetPassword"
     >
-      <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
+      <div class="h-full w-full flex flex-col items-center justify-center pt-[50px]">
         <div
           class="color-transition bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
         >
@@ -96,7 +96,7 @@ function resetError() {
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
                 <MaterialSymbolsWarning />
-                <div style="flex: 0 0 auto" class="break-words">{{ error }}</div>
+                <div class="break-words">{{ error }}</div>
               </div>
             </div>
           </Transition>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index fd8706442c..c12ae11436 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -1,15 +1,17 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import { navigateTo } from '#app'
-import { computed, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
-import MdiDeleteOutline from '~icons/mdi/delete-outline'
-import MdiEditOutline from '~icons/mdi/edit-outline'
-import MdiRefresh from '~icons/mdi/refresh'
-import MdiMenuDown from '~icons/mdi/menu-down'
-import MdiPlus from '~icons/mdi/plus'
-import MdiDatabaseOutline from '~icons/mdi/database-outline'
+import {
+  computed,
+  extractSdkResponseErrorMsg,
+  navigateTo,
+  onMounted,
+  ref,
+  useApi,
+  useNuxtApp,
+  useSidebar,
+  useUIPermission,
+} from '#imports'
 
 const { $e } = useNuxtApp()
 
@@ -61,97 +63,120 @@ onMounted(() => {
 
 <template>
   <NuxtLayout>
-    <a-card class="mx-auto mt-10 !max-w-[600px] shadow-lg">
-      <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
-        <!-- My Projects -->
-        <b>{{ $t('title.myProject') }}</b>
-
-        <MdiRefresh
-          v-t="['a:project:refresh']"
-          class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
-          @click="loadProjects"
-        ></MdiRefresh>
-      </h1>
-
-      <div class="flex mb-6">
-        <a-input-search
-          v-model:value="filterQuery"
-          class="max-w-[200px] nc-project-page-search"
-          :placeholder="$t('activity.searchProject')"
-        ></a-input-search>
-        <div class="flex-grow"></div>
-
-        <a-dropdown v-if="isUIAllowed('projectCreate', true)" @click.stop>
-          <a-button class="nc-new-project-menu !shadow">
-            <div class="flex align-center">
-              {{ $t('title.newProj') }}
-              <MdiMenuDown class="menu-icon" />
-            </div>
-          </a-button>
-
-          <template #overlay>
-            <a-menu>
-              <div
-                v-t="['c:project:create:xcdb']"
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
-                @click="navigateTo('/project/create')"
-              >
-                <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
-                <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
-              </div>
-              <div
-                v-t="['c:project:create:extdb']"
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
-                @click="navigateTo('/project/create-external')"
-              >
-                <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
-                <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
-              </div>
-            </a-menu>
-          </template>
-        </a-dropdown>
+    <div class="flex flex-col md:flex-row flex-wrap gap-6 py-6 px-12">
+      <div class="hidden xl:(block)">
+        <GeneralSponsors />
       </div>
 
-      <div v-if="isLoading">
-        <a-skeleton />
+      <div class="min-w-2/4 flex-auto">
+        <a-card :loading="isLoading" class="!rounded-lg shadow">
+          <h1 class="text-center text-4xl p-2 nc-project-page-title flex items-center justify-center gap-2 text-gray-600">
+            <!-- My Projects -->
+            <b>{{ $t('title.myProject') }}</b>
+
+            <MdiRefresh
+              v-t="['a:project:refresh']"
+              class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
+              @click="loadProjects"
+            />
+          </h1>
+
+          <div class="order-1 flex mb-6">
+            <a-input-search
+              v-model:value="filterQuery"
+              class="max-w-[200px] nc-project-page-search"
+              :placeholder="$t('activity.searchProject')"
+            />
+
+            <div class="flex-grow" />
+
+            <a-dropdown v-if="isUIAllowed('projectCreate', true)" @click.stop>
+              <a-button class="nc-new-project-menu !shadow">
+                <div class="flex align-center">
+                  {{ $t('title.newProj') }}
+                  <MdiMenuDown class="menu-icon" />
+                </div>
+              </a-button>
+
+              <template #overlay>
+                <a-menu>
+                  <div
+                    v-t="['c:project:create:xcdb']"
+                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
+                    @click="navigateTo('/project/create')"
+                  >
+                    <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+
+                    <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
+                  </div>
+
+                  <div
+                    v-t="['c:project:create:extdb']"
+                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
+                    @click="navigateTo('/project/create-external')"
+                  >
+                    <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+
+                    <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
+                  </div>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+
+          <div v-if="isLoading">
+            <a-skeleton />
+          </div>
+
+          <a-table
+            v-else
+            :custom-row="
+              (record) => ({
+                onClick: () => {
+                  $e('a:project:open')
+                  navigateTo(`/nc/${record.id}`)
+                },
+              })
+            "
+            :data-source="filteredProjects"
+            :pagination="{ position: ['bottomCenter'] }"
+          >
+            <!-- Title -->
+            <a-table-column key="title" :title="$t('general.title')" data-index="title">
+              <template #default="{ text }">
+                <div
+                  class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row"
+                  :title="text"
+                >
+                  {{ text }}
+                </div>
+              </template>
+            </a-table-column>
+            <!-- Actions -->
+            <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
+              <template #default="{ text, record }">
+                <div class="flex align-center">
+                  <MdiEditOutline
+                    v-t="['c:project:edit:rename']"
+                    class="nc-action-btn"
+                    @click.stop="navigateTo(`/project/${text}`)"
+                  />
+                  <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
+                </div>
+              </template>
+            </a-table-column>
+          </a-table>
+        </a-card>
       </div>
 
-      <a-table
-        v-else
-        :custom-row="
-          (record) => ({
-            onClick: () => {
-              $e('a:project:open')
-              navigateTo(`/nc/${record.id}`)
-            },
-          })
-        "
-        :data-source="filteredProjects"
-        :pagination="{ position: ['bottomCenter'] }"
-      >
-        <!-- Title -->
-        <a-table-column key="title" :title="$t('general.title')" data-index="title">
-          <template #default="{ text }">
-            <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row" :title="text">
-              {{ text }}
-            </div>
-          </template>
-        </a-table-column>
-        <!-- Actions -->
-        <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
-          <template #default="{ text, record }">
-            <div class="flex align-center">
-              <MdiEditOutline
-                v-t="['c:project:edit:rename']"
-                class="nc-action-btn"
-                @click.stop="navigateTo(`/project/${text}`)"
-              />
-              <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
-            </div>
-          </template>
-        </a-table-column>
-      </a-table>
-    </a-card>
+      <div class="flex gap-6 md:block">
+        <GeneralSocialCard />
+
+        <div class="block mt-0 md:(!mt-6) xl:hidden">
+          <GeneralSponsors />
+        </div>
+      </div>
+    </div>
   </NuxtLayout>
 </template>
 
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index f1e5543724..58b4c02508 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -84,10 +84,10 @@ function resetError() {
       ref="formValidator"
       :model="form"
       layout="vertical"
-      class="bg-primary/5 signin h-full min-h-[600px] flex justify-center items-center nc-form-signin"
+      class="bg-primary/5 signin h-full flex justify-center items-center nc-form-signin"
       @finish="signIn"
     >
-      <div class="h-full w-full flex flex-col flex-wrap items-center pt-[100px]">
+      <div class="h-full w-full flex flex-col items-center justify-center pt-[50px]">
         <div
           class="bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
         >
@@ -102,7 +102,7 @@ function resetError() {
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
                 <MaterialSymbolsWarning />
-                <div style="flex: 0 0 auto" class="break-words">{{ error }}</div>
+                <div class="break-words">{{ error }}</div>
               </div>
             </div>
           </Transition>
diff --git a/packages/nc-gui-v2/pages/signup/[[token]].vue b/packages/nc-gui-v2/pages/signup/[[token]].vue
index ede398ef9e..02f68f250f 100644
--- a/packages/nc-gui-v2/pages/signup/[[token]].vue
+++ b/packages/nc-gui-v2/pages/signup/[[token]].vue
@@ -114,7 +114,7 @@ function resetError() {
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
                 <MaterialSymbolsWarning />
-                <div style="flex: 0 0 auto" class="break-words">{{ error }}</div>
+                <div class="break-words">{{ error }}</div>
               </div>
             </div>
           </Transition>
diff --git a/packages/nc-gui-v2/plugins/a.dayjs.ts b/packages/nc-gui-v2/plugins/a.dayjs.ts
index 235852f82d..261c3d5fda 100644
--- a/packages/nc-gui-v2/plugins/a.dayjs.ts
+++ b/packages/nc-gui-v2/plugins/a.dayjs.ts
@@ -1,8 +1,9 @@
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-import duration from 'dayjs/plugin/duration'
-import utc from 'dayjs/plugin/utc'
+import relativeTime from 'dayjs/plugin/relativeTime.js'
+import customParseFormat from 'dayjs/plugin/customParseFormat.js'
+import duration from 'dayjs/plugin/duration.js'
+import utc from 'dayjs/plugin/utc.js'
+import weekday from 'dayjs/plugin/weekday.js'
 import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin(() => {
@@ -10,4 +11,5 @@ export default defineNuxtPlugin(() => {
   dayjs.extend(relativeTime)
   dayjs.extend(customParseFormat)
   dayjs.extend(duration)
+  dayjs.extend(weekday)
 })
diff --git a/packages/nc-gui-v2/utils/columnUtils.ts b/packages/nc-gui-v2/utils/columnUtils.ts
index 96d3fecddb..70c07d7827 100644
--- a/packages/nc-gui-v2/utils/columnUtils.ts
+++ b/packages/nc-gui-v2/utils/columnUtils.ts
@@ -147,7 +147,7 @@ const uiTypes = [
   },
 ]
 
-const getUIDTIcon = (uidt: UITypes) => {
+const getUIDTIcon = (uidt: UITypes | string) => {
   return (
     [
       ...uiTypes,
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index 6c70227061..5272df19de 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -1,6 +1,4 @@
 import dayjs from 'dayjs'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-dayjs.extend(customParseFormat)
 
 export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index ac9d7fc0f4..95c3aeb41a 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -24,6 +24,7 @@ export const isValidURL = (str: string) => {
   return !!pattern.test(str)
 }
 
-export const openLink = (url: string, target = '_blank') => {
-  window.open(url, target)
+export const openLink = (path: string, baseURL: string, target = '_blank') => {
+  const url = new URL(path, baseURL)
+  window.open(url.href, target)
 }
diff --git a/packages/nc-gui-v2/vue-color-shims.d.ts b/packages/nc-gui-v2/vue-color-shims.d.ts
index 63fe35c76e..75f77909c4 100644
--- a/packages/nc-gui-v2/vue-color-shims.d.ts
+++ b/packages/nc-gui-v2/vue-color-shims.d.ts
@@ -1,4 +1,5 @@
 declare module '@ckpack/vue-color' {
   import type { Component } from '@vue/runtime-core'
   const Sketch: Component
+  const Chrome: Component
 }