diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 28c63b040c..241f5f526c 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -1,5 +1,11 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const disableBaseLayout = $computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
+</script>
+
 <template>
-  <NuxtLayout name="base">
+  <NuxtLayout :name="disableBaseLayout ? false : 'base'">
     <NuxtPage />
   </NuxtLayout>
 </template>
diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index c719affffa..24452b4569 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -17,6 +17,10 @@ main {
   @apply m-0 h-full w-full bg-white dark:(bg-black text-white);
 }
 
+html {
+  overflow-y: auto !important;
+}
+
 main {
   @apply flex-0 w-full relative scrollbar-thin-dull;
   overflow-x: hidden;
@@ -43,11 +47,6 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   @apply color-transition;
 }
 
-html {
-  overflow-y: auto !important;
-}
-
-
 // menu item styling
 .nc-menu-item {
   @apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
@@ -57,6 +56,16 @@ html {
   }
 }
 
+.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));
+
+  &:hover {
+    .nc-icon {
+      @apply text-pink-500;
+    }
+  }
+}
+
 .nc-sidebar-right-item {
   @apply relative flex items-center;
 
@@ -152,9 +161,9 @@ html {
   @apply transition-opacity duration-300 ease-in-out;
 }
 
-.page-enter,
+.page-enter-active,
 .page-leave-active,
-.layout-enter,
+.layout-enter-active,
 .layout-leave-active {
   @apply opacity-0;
 }
@@ -182,4 +191,22 @@ html {
 .glow-enter,
 .glow-leave-active {
   @apply opacity-0;
+}
+
+.scaling-btn {
+  @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+
+  &::after {
+    @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+    content: '';
+    z-index: -1;
+  }
+
+  &:hover::after {
+    @apply transform scale-110 ring ring-pink-500;
+  }
+
+  &:active::after {
+    @apply ring ring-pink-500;
+  }
 }
\ 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 fabc254fa9..c033344d42 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -103,6 +103,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
+    MdiCloseBox: typeof import('~icons/mdi/close-box')['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']
@@ -134,6 +135,7 @@ declare module '@vue/runtime-core' {
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
     MdiGithub: typeof import('~icons/mdi/github')['default']
+    MdiGridLarge: typeof import('~icons/mdi/grid-large')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -154,6 +156,7 @@ declare module '@vue/runtime-core' {
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiPlusRoundedOutline: typeof import('~icons/mdi/plus-rounded-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']
diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index 9dce776a1a..0705a02495 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/packages/nc-gui-v2/components/cell/Checkbox.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ColumnInj, IsFormInj, getMdiIcon, inject } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject } from '#imports'
 
 interface Props {
   modelValue?: boolean | undefined | number
@@ -20,7 +19,7 @@ const column = inject(ColumnInj)
 
 const isForm = inject(IsFormInj)
 
-const editEnabled = inject(EditModeInj)
+const readOnly = inject(ReadonlyInj)
 
 const checkboxMeta = $computed(() => {
   return {
@@ -34,14 +33,17 @@ const checkboxMeta = $computed(() => {
 })
 
 function onClick() {
-  if (editEnabled) {
+  if (!readOnly) {
     vModel = !vModel
   }
 }
 </script>
 
 <template>
-  <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
+  <div
+    class="flex"
+    :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel && !readOnly, 'opacity-0': readOnly && !vModel }"
+  >
     <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="onClick">
       <component
         :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
index a47b8c1bbb..e2a240ac9b 100644
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/packages/nc-gui-v2/components/cell/Percent.vue
@@ -1,69 +1,76 @@
 <script setup lang="ts">
-import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, inject } from '#imports'
 
 interface Props {
   modelValue: number | string | null | undefined
 }
 
-const { modelValue } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
+const props = defineProps<Props>()
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
-const column = inject(ColumnInj)
-
-const percent = ref()
-
-const isEdited = ref(false)
-
-const percentType = computed(() => column?.value?.meta?.precision || 0)
-
-const percentStep = computed(() => getPercentStep(percentType.value))
-
-const localState = computed({
-  get: () => {
-    return renderPercent(modelValue, percentType.value, !isEdited.value)
-  },
-  set: (val) => {
-    if (val === null) val = 0
-    if (isValidPercent(val, column?.value?.meta?.negative)) {
-      percent.value = val / 100
-    }
-  },
-})
-
-function onKeyDown(evt: KeyboardEvent) {
-  isEdited.value = true
-  return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
-}
-
-function onBlur() {
-  if (isEdited.value) {
-    emit('update:modelValue', percent.value)
-    isEdited.value = false
-  }
-}
-
-function onKeyDownEnter() {
-  if (isEdited.value) {
-    emit('update:modelValue', percent.value)
-    isEdited.value = false
-  }
-}
+const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <input
-    v-if="isEdited"
-    v-model="localState"
-    type="number"
-    :step="percentStep"
-    @keydown="onKeyDown"
-    @blur="onBlur"
-    @keydown.enter="onKeyDownEnter"
-  />
-  <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
-  <span v-else>{{ localState }}</span>
+  <input v-if="editEnabled" v-model="vModel" type="number" />
+  <span v-else>{{ vModel }}</span>
 </template>
+
+<!-- <script setup lang="ts">
+ import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
+ import { EditModeInj } from '~/context'
+ interface Props {
+   modelValue: number | string | null | undefined
+ }
+ const { modelValue } = defineProps<Props>()
+ const emit = defineEmits(['update:modelValue'])
+ const editEnabled = inject(EditModeInj)
+ const column = inject(ColumnInj)
+ const percent = ref()
+ const isEdited = ref(false)
+ const percentType = computed(() => column?.value?.meta?.precision || 0)
+ const percentStep = computed(() => getPercentStep(percentType.value))
+ const localState = computed({
+   get: () => {
+     return renderPercent(modelValue, percentType.value, !isEdited.value)
+   },
+   set: (val) => {
+     if (val === null) val = 0
+     if (isValidPercent(val, column?.value?.meta?.negative)) {
+       percent.value = val / 100
+     }
+   },
+ })
+ function onKeyDown(evt: KeyboardEvent) {
+   isEdited.value = true
+   return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
+ }
+ function onBlur() {
+   if (isEdited.value) {
+     emit('update:modelValue', percent.value)
+     isEdited.value = false
+   }
+ }
+ function onKeyDownEnter() {
+   if (isEdited.value) {
+     emit('update:modelValue', percent.value)
+     isEdited.value = false
+   }
+ }
+ </script>
+
+ <template>
+   <input
+     v-if="isEdited"
+     v-model="localState"
+     type="number"
+     :step="percentStep"
+     @keydown="onKeyDown"
+     @blur="onBlur"
+     @keydown.enter="onKeyDownEnter"
+   />
+   <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
+   <span v-else>{{ localState }}</span>
+ </template> -->
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index 902cb57153..e57c41520a 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -92,7 +92,7 @@ onClickOutside(carouselRef, () => {
 
           <div v-for="item of imageItems" :key="item.url">
             <div
-              :style="{ backgroundImage: `url('${item.url}')` }"
+              :style="{ backgroundImage: `url('${item.url || item.data}')` }"
               class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
             />
           </div>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 7ffec69130..58d6117ff6 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -10,7 +10,6 @@ const {
   open,
   isLoading,
   isPublicGrid,
-  isForm,
   isReadonly,
   visibleItems,
   modalVisible,
@@ -34,6 +33,8 @@ const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, is
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
+const { isSharedForm } = useSmartsheetStoreOrThrow()
+
 onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
@@ -61,7 +62,7 @@ function onClick(item: Record<string, any>) {
     <template #title>
       <div class="flex gap-4">
         <div
-          v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
+          v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
           class="nc-attach-file group"
           @click="open"
         >
@@ -78,7 +79,7 @@ function onClick(item: Record<string, any>) {
     </template>
 
     <div ref="dropZoneRef">
-      <template v-if="!isReadonly && !dragging">
+      <template v-if="isSharedForm || (!isReadonly && !dragging)">
         <general-overlay
           v-model="isOverDropZone"
           inline
@@ -94,9 +95,8 @@ function onClick(item: Record<string, any>) {
           <a-card class="nc-attachment-item group">
             <a-tooltip v-if="!isReadonly">
               <template #title> Remove File </template>
-
               <MdiCloseCircle
-                v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
+                v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
                 class="nc-attachment-remove"
                 @click.stop="removeFile(i)"
               />
@@ -116,7 +116,7 @@ function onClick(item: Record<string, any>) {
             >
               <div
                 v-if="isImage(item.title, item.mimetype)"
-                :style="{ backgroundImage: `url('${item.url}')` }"
+                :style="{ backgroundImage: `url('${item.url || item.data}')` }"
                 class="w-full h-full bg-contain bg-center bg-no-repeat"
                 @click.stop="onClick(item)"
               />
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 33db7c7b83..f2e47339b7 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -4,7 +4,16 @@ import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
+import {
+  computed,
+  isImage,
+  openLink,
+  ref,
+  useDropZone,
+  useSmartsheetRowStoreOrThrow,
+  useSmartsheetStoreOrThrow,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
@@ -23,13 +32,26 @@ const sortableRef = ref<HTMLDivElement>()
 
 const { cellRefs } = useSmartsheetStoreOrThrow()!
 
-const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
-  useProvideAttachmentCell(updateModelValue)
+const {
+  column,
+  modalVisible,
+  attachments,
+  visibleItems,
+  onDrop,
+  isLoading,
+  open,
+  FileIcon,
+  selectedImage,
+  isReadonly,
+  storedFiles,
+} = useProvideAttachmentCell(updateModelValue)
 
 const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
 
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
+const { state: rowState } = useSmartsheetRowStoreOrThrow()
+
 const { isOverDropZone } = useDropZone(currentCellRef, onDrop)
 
 /** on new value, reparse our stored attachments */
@@ -37,7 +59,11 @@ watch(
   () => modelValue,
   (nextModel) => {
     if (nextModel) {
-      attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+      try {
+        attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+      } catch {
+        attachments.value = []
+      }
     }
   },
   { immediate: true },
@@ -53,13 +79,23 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
+
+/** sync storedFiles state with row state */
+watch(
+  () => storedFiles.value.length || 0,
+  () => {
+    rowState.value[column.value.title!] = storedFiles.value
+  },
+)
+
+const { isSharedForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
   <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
-    <template v-if="!isReadonly && !dragging && !!currentCellRef">
+    <template v-if="isSharedForm || (!isReadonly && !dragging && !!currentCellRef)">
       <general-overlay
         v-model="isOverDropZone"
         inline
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index ed0aab1982..d547633bd1 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -1,7 +1,7 @@
 import { message } from 'ant-design-vue'
 import FileSaver from 'file-saver'
 import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
-import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context'
+import { ColumnInj, EditModeInj, IsPublicInj, MetaInj, ReadonlyInj } from '~/context'
 import { isImage } from '~/utils'
 import { NOCO } from '~/lib'
 import MdiPdfBox from '~icons/mdi/pdf-box'
@@ -10,11 +10,17 @@ import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
 import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
+interface AttachmentProps {
+  data?: any
+  file: File
+  title: string
+}
+
 export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
   (updateModelValue: (data: string | Record<string, any>[]) => void) => {
     const isReadonly = inject(ReadonlyInj, false)
 
-    const isPublicForm = inject('isPublicForm', false)
+    const isPublic = inject(IsPublicInj, ref(false))
 
     const isForm = inject('isForm', false)
 
@@ -27,7 +33,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const editEnabled = inject(EditModeInj, ref(false))
 
-    const storedFiles = ref<{ title: string; file: File }[]>([])
+    /** keep user selected files data (in base encoded string format) and meta details */
+    const storedFilesData = ref<{ title: string; file: File }[]>([])
+
+    /** keep user selected File object */
+    const storedFiles = ref<File[]>([])
 
     const attachments = ref<File[]>([])
 
@@ -43,10 +53,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     /** remove a file from our stored attachments (either locally stored or saved ones) */
     function removeFile(i: number) {
-      if (isPublicForm) {
+      if (isPublic.value) {
+        storedFilesData.value.splice(i, 1)
         storedFiles.value.splice(i, 1)
 
-        updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+        updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
       } else {
         attachments.value.splice(i, 1)
         updateModelValue(attachments.value)
@@ -57,19 +68,33 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     async function onFileSelect(selectedFiles: FileList | File[]) {
       if (!selectedFiles.length || isPublicGrid) return
 
-      if (isPublicForm) {
-        storedFiles.value.push(
-          ...Array.from(selectedFiles).map((file) => {
-            const res = { file, title: file.name }
-            if (isImage(file.name, (file as any).mimetype)) {
-              const reader = new FileReader()
-              reader.readAsDataURL(file)
-            }
-            return res
-          }),
+      if (isPublic.value) {
+        storedFiles.value.push(...selectedFiles)
+        storedFilesData.value.push(
+          ...(await Promise.all<AttachmentProps>(
+            Array.from(selectedFiles).map(
+              (file) =>
+                new Promise<AttachmentProps>((resolve) => {
+                  const res: AttachmentProps = { file, title: file.name }
+                  if (isImage(file.name, (file as any).mimetype)) {
+                    const reader = new FileReader()
+                    reader.onload = (e: any) => {
+                      res.data = e.target?.result
+                      resolve(res)
+                    }
+                    reader.onerror = () => {
+                      resolve(res)
+                    }
+                    reader.readAsDataURL(file)
+                  } else {
+                    resolve(res)
+                  }
+                }),
+            ),
+          )),
         )
 
-        return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+        return updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
       }
 
       const newAttachments = []
@@ -124,15 +149,15 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     }
 
     /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
-    const visibleItems = computed<any[]>(() => (isPublicForm ? storedFiles.value : attachments.value) || ([] as any[]))
+    const visibleItems = computed<any[]>(() => (isPublic.value ? storedFilesData.value : attachments.value) || ([] as any[]))
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
 
     return {
       attachments,
-      storedFiles,
+      storedFilesData,
       visibleItems,
-      isPublicForm,
+      isPublic,
       isForm,
       isPublicGrid,
       isReadonly,
@@ -149,6 +174,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       downloadFile,
       updateModelValue,
       selectedImage,
+      storedFiles,
     }
   },
   'useAttachmentCell',
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
index e280c7c8cb..c49dac6d65 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
@@ -13,6 +13,7 @@ import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
 import NootbookOutline from '~icons/mdi/notebook-outline'
 import { useUIPermission, useVModel, watch } from '#imports'
+import MdiCloseIcon from '~icons/mdi/close'
 
 interface Props {
   modelValue: boolean
@@ -130,8 +131,21 @@ watch(
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" width="max(90vw, 600px)" @cancel="emits('update:modelValue', false)">
-    <a-typography-title class="ml-4 mb-2 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
+  <a-modal
+    v-model:visible="vModel"
+    :footer="null"
+    width="max(90vw, 600px)"
+    :closable="false"
+    @cancel="emits('update:modelValue', false)"
+  >
+    <div class="flex flex-row justify-between w-full items-center mb-1">
+      <a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
+      <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false">
+        <template #icon>
+          <MdiCloseIcon class="cursor-pointer mt-1" />
+        </template>
+      </a-button>
+    </div>
 
     <a-layout class="mt-3 modal-body flex">
       <!-- Side tabs -->
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index 2ac4a21ef2..5e1e300e7c 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -7,6 +7,7 @@ import MdiEyeOutline from '~icons/mdi/eye-outline'
 import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
 
 const { float } = defineProps<{ float?: boolean }>()
+
 const position = useState('preview-as-position', () => ({
   y: `${window.innerHeight - 100}px`,
   x: `${window.innerWidth / 2 - 250}px`,
@@ -98,10 +99,6 @@ 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/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 2a73cd22f5..75ada2d142 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { FieldsInj, MetaInj } from '#imports'
+import { useSharedFormStoreOrThrow } 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 }), {}))
+const {
+  sharedFormView,
+  submitForm,
+  v$,
+  formState,
+  notFound,
+  formColumns,
+  submitted,
+  secondsRemain,
+  passwordDlg,
+  password,
+  loadSharedView,
+} = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -15,7 +23,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     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<
+    columnObj = formColumns.value?.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
       string,
       any
     >
@@ -23,60 +31,129 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
   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 nc-share-form-title" :level="1">
-          {{ sharedView.view.heading }}
-        </a-typography-title>
-        <a-typography class="pl-1 text-sm nc-share-form-desc">{{ sharedView.view.subheading }}</a-typography>
-      </div>
+  <div class="bg-primary/100 !h-[100vh] overflow-auto w-100 flex flex-col">
+    <div>
+      <img src="~/assets/img/icons/512x512-trans.png" width="30" class="mx-4 mt-2" />
+    </div>
+    <div class="m-4 mt-2 bg-white rounded p-2 flex-1">
+      <a-alert v-if="notFound" type="warning" class="mx-auto mt-10 max-w-[300px]" message="Not found"> </a-alert>
 
-      <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"
-            />
+      <template v-else-if="submitted">
+        <div class="flex justify-center">
+          <div v-if="sharedFormView" style="min-width: 350px" class="mt-3">
+            <a-alert type="success" outlined :message="sharedFormView.success_msg || 'Successfully submitted form data'">
+            </a-alert>
+            <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+              New form will be loaded after {{ secondsRemain }} seconds
+            </p>
+            <div v-if="sharedFormView.submit_another_form" class="text-center">
+              <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+            </div>
           </div>
-          <a-form-item
-            v-if="isVirtualCol(field)"
-            class="ma-0 gap-0 pa-0"
-            :class="`nc-form-field-${field.title}`"
-            :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"
-            :class="`nc-form-field-${field.title}`"
-            :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>
+      </template>
+      <div v-else-if="sharedFormView" class="">
+        <a-row class="justify-center">
+          <a-col :md="20">
+            <div>
+              <div class="h-full ma-0 rounded-b-0">
+                <div
+                  class="nc-form-wrapper pb-10 rounded shadow-xl"
+                  style="background: linear-gradient(180deg, #dbdbdb 0, #dbdbdb 200px, white 200px)"
+                >
+                  <div class="mt-10 flex items-center justify-center flex-col">
+                    <div class="nc-form-banner backgroundColor darken-1 flex-column justify-center d-flex">
+                      <div class="flex items-center justify-center grow h-[100px]">
+                        <img src="~/assets/img/icon.png" width="50" class="mx-4" />
+                        <span class="text-4xl font-weight-bold">NocoDB</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="mx-auto nc-form bg-white shadow-lg pa-2 mb-10 max-w-[600px] mx-auto rounded">
+                    <h2 class="mt-4 text-4xl font-weight-bold text-left mx-4 mb-3 px-1">
+                      {{ sharedFormView.heading }}
+                    </h2>
+
+                    <div class="text-lg text-left mx-4 py-2 px-1 text-gray-500">
+                      {{ sharedFormView.subheading }}
+                    </div>
+                    <div class="h-100">
+                      <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col mt-4 px-4 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>
+                        <div v-if="isVirtualCol(field)" class="mt-0">
+                          <SmartsheetVirtualCell class="mt-0 nc-input" :column="field" />
+                          <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+                          <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
+                            <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
+                              {{ error.$message }}
+                            </div>
+                          </template>
+                        </div>
+                        <div v-else class="mt-0">
+                          <SmartsheetCell
+                            v-model="formState[field.title]"
+                            class="nc-input"
+                            :column="field"
+                            :edit-enabled="true"
+                          />
+                          <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+                          <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
+                            <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
+                              {{ error.$message }}
+                            </div>
+                          </template>
+                        </div>
+                      </div>
+
+                      <div class="text-center my-9">
+                        <a-button type="primary" size="large" @click="submitForm(formState, additionalState)"> Submit</a-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
     </div>
+
+    <a-modal
+      v-model:visible="passwordDlg"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      :mask-closable="false"
+      @close="passwordDlg = 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="{ password }" class="mt-2" @finish="loadSharedView">
+          <a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]">
+            <a-input-password v-model:value="password" placeholder="Enter password" />
+          </a-form-item>
+          <a-button type="primary" html-type="submit">Unlock</a-button>
+        </a-form>
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -84,4 +161,8 @@ const formRef = ref()
 .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;
 }
+
+.nc-form-wrapper {
+  @apply my-0 mx-auto max-w-[800px];
+}
 </style>
diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
index 7a39c09f98..3320f0551c 100644
--- a/packages/nc-gui-v2/components/shared-view/Grid.vue
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -4,23 +4,23 @@ import type { TableType } from 'nocodb-sdk'
 
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
-const { sharedView, meta, columns } = useSharedView()
+const { sharedView, meta } = useSharedView()
 
 const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, ref(true))
+provide(ReadonlyInj, true)
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
-provide(FieldsInj, columns)
+provide(FieldsInj, ref(meta.value.columns as any[]))
 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">
+  <div class="nc-container flex flex-col h-full mt-1.5 px-12">
     <SmartsheetToolbar />
-    <SmartsheetGrid class="px-3" />
+    <SmartsheetGrid />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 743e9c7d8f..e6fbc713b9 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -99,7 +99,7 @@ useEventListener(document, 'click', handleClose)
 </script>
 
 <template>
-  <div ref="editOrAddRef" class="min-w-[400px] max-h-[95vh] bg-white shadow p-6 overflow-auto" @click.stop>
+  <div ref="editOrAddRef" class="min-w-[400px] max-h-[95vh] bg-gray-50 shadow-lg p-6 overflow-auto !border" @click.stop>
     <a-form v-if="formState" v-model="formState" name="column-create-or-edit" layout="vertical">
       <div class="flex flex-col gap-2">
         <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
@@ -132,7 +132,6 @@ useEventListener(document, 'click', handleClose)
           v-model:value="formState"
         />
         <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
-        <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
         <SmartsheetColumnSelectOptions
           v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
           v-model:value="formState"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue
index f1d3e6a6c0..eab97e43be 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue
@@ -1,3 +1,5 @@
+<!-- File not in use for now -->
+
 <script setup lang="ts">
 import { precisions } from '@/utils/percentUtils'
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 09231feb10..a7e38d73f8 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -2,31 +2,42 @@
 import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
-import { useNuxtApp } from '#app'
-import { inject, useViewFilters } from '#imports'
-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,
-  hookId = null,
-  modelValue,
-} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string; modelValue?: Filter[] }>()
+import {
+  ActiveViewInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  comparisonOpList,
+  computed,
+  inject,
+  ref,
+  useNuxtApp,
+  useViewFilters,
+  watch,
+} from '#imports'
+import type { Filter } from '~/lib'
+
+interface Props {
+  nested?: boolean
+  parentId?: string
+  autoSave: boolean
+  hookId?: string
+  modelValue?: Filter[]
+}
+
+const { nested = false, parentId, autoSave = true, hookId = null, modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:filtersLength'])
 
-const meta = inject(MetaInj)
+const logicalOps = [
+  { value: 'and', text: 'AND' },
+  { value: 'or', text: 'OR' },
+]
 
-const activeView = inject(ActiveViewInj)
+const meta = inject(MetaInj)!
 
-const reloadDataHook = inject(ReloadViewDataHookInj)
+const activeView = inject(ActiveViewInj)!
 
-// todo: replace with inject or get from state
+const reloadDataHook = inject(ReloadViewDataHookInj)!
 
 const { $e } = useNuxtApp()
 
@@ -35,11 +46,13 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   parentId,
   computed(() => autoSave),
   () => {
-    reloadDataHook?.trigger()
+    reloadDataHook.trigger()
   },
   modelValue,
 )
 
+const nestedFilters = ref()
+
 const filterUpdateCondition = (filter: FilterType, i: number) => {
   saveOrUpdate(filter, i)
   $e('a:filter:update', {
@@ -63,12 +76,14 @@ const filterUpdateCondition = (filter: FilterType, i: number) => {
 //     return true
 //   })
 
-const columns = computed(() => meta?.value?.columns)
+const columns = computed(() => meta.value?.columns)
+
 const types = computed(() => {
-  if (!meta?.value?.columns?.length) {
+  if (!meta.value?.columns?.length) {
     return {}
   }
-  return meta?.value?.columns?.reduce((obj: any, col: any) => {
+
+  return meta.value?.columns?.reduce((obj: any, col: any) => {
     switch (col.uidt) {
       case UITypes.Number:
       case UITypes.Decimal:
@@ -83,22 +98,15 @@ const types = computed(() => {
 })
 
 watch(
-  () => (activeView?.value as any)?.id,
+  () => activeView.value?.id,
   (n, o) => {
     if (n !== o) loadFilters(hookId as string)
   },
   { immediate: true },
 )
 
-const nestedFilters = ref()
-
-const logicalOps = [
-  { value: 'and', text: 'AND' },
-  { value: 'or', text: 'OR' },
-]
-
 watch(
-  () => filters?.value?.length,
+  () => filters.value.length,
   (length) => {
     emit('update:filtersLength', length ?? 0)
   },
@@ -106,7 +114,10 @@ watch(
 
 const applyChanges = async (hookId?: string) => {
   await sync(hookId)
-  for (const nestedFilter of nestedFilters?.value || []) {
+
+  if (!nestedFilters.value.length) return
+
+  for (const nestedFilter of nestedFilters.value) {
     if (nestedFilter.parentId) {
       await nestedFilter.applyChanges(hookId, true)
     }
@@ -128,7 +139,7 @@ defineExpose({
       <template v-for="(filter, i) in filters" :key="filter.id || i">
         <template v-if="filter.status !== 'delete'">
           <template v-if="filter.is_group">
-            <MdiDeleteIcon
+            <MdiCloseBox
               v-if="!filter.readOnly"
               :key="i"
               small
@@ -174,7 +185,7 @@ defineExpose({
                                       mdi-close-box
                                     </v-icon> -->
 
-            <MdiDeleteIcon
+            <MdiCloseBox
               v-if="!filter.readOnly"
               class="nc-filter-item-remove-btn text-grey align-self-center"
               @click.stop="deleteFilter(filter, i)"
@@ -260,7 +271,7 @@ defineExpose({
       <a-button class="elevation-0 text-capitalize" type="primary" ghost @click.stop="addFilter">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
-          <MdiAddIcon />
+          <MdiPlus />
           <!-- Add Filter -->
           {{ $t('activity.addFilter') }}
         </div>
@@ -268,7 +279,7 @@ defineExpose({
       <a-button class="text-capitalize !text-gray-500" @click.stop="addFilterGroup">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
-          <MdiAddIcon />
+          <MdiPlus />
           Add Filter Group
           <!--     todo: add i18n {{ $t('activity.addFilterGroup') }} -->
         </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index abd0573159..47d2634586 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, FieldsInj, IsLockedInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import { computed, inject, useNuxtApp, useViewColumns, watch } from '#imports'
 
 const meta = inject(MetaInj)!
@@ -8,6 +8,7 @@ const activeView = inject(ActiveViewInj)!
 const reloadDataHook = inject(ReloadViewDataHookInj)!
 const rootFields = inject(FieldsInj)
 const isLocked = inject(IsLockedInj)
+const isPublic = inject(IsPublicInj)
 
 const { $e } = useNuxtApp()
 
@@ -49,14 +50,10 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 
   if (fields.value.length < 2) return
 
-  if (fields.value.length - 1 === event.moved.newIndex) {
-    fields.value[event.moved.newIndex].order = (fields.value[event.moved.newIndex - 1].order || 1) + 1
-  } else if (event.moved.newIndex === 0) {
-    fields.value[event.moved.newIndex].order = (fields.value[1].order || 1) / 2
-  } else {
-    fields.value[event.moved.newIndex].order =
-      ((fields.value[event.moved.newIndex - 1].order || 1) + (fields.value[event.moved.newIndex + 1].order || 1)) / 2
-  }
+  fields.value.map((field, index) => {
+    field.order = index + 1
+    return field
+  })
 
   saveOrUpdate(fields.value[event.moved.newIndex], event.moved.newIndex)
 
@@ -87,10 +84,10 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
         <div class="nc-fields-list py-1">
-          <Draggable :list="fields" item-key="id" @change="onMove($event)">
-            <template #item="{ element: field }">
+          <Draggable v-model="fields" item-key="id" @change="onMove($event)">
+            <template #item="{ element: field, index: index }">
               <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
-                <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">
+                <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, index)">
                   <span class="">{{ field.title }}</span>
                 </a-checkbox>
                 <div class="flex-1" />
@@ -101,7 +98,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
         </div>
         <v-divider class="my-2" />
 
-        <div class="p-2 py-1 flex" @click.stop>
+        <div v-if="!isPublic" class="p-2 py-1 flex" @click.stop>
           <a-checkbox v-model:checked="showSystemFields">
             <span class="text-xs"> {{ $t('activity.showSystemFields') }}</span>
           </a-checkbox>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 1b621f3da8..40d50deb48 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -111,16 +111,16 @@ const exportFile = async (exportType: ExportTypes) => {
       </a-button>
 
       <template #overlay>
-        <div class="bg-white shadow-lg !border">
+        <div class="bg-gray-50 py-2 shadow-lg !border">
           <div>
             <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
-              <MdiDownloadOutline />
+              <MdiDownloadOutline class="text-gray-500" />
               <!-- Download as CSV -->
               {{ $t('activity.downloadCSV') }}
             </div>
 
             <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
-              <MdiDownloadOutline />
+              <MdiDownloadOutline class="text-gray-500" />
               <!-- Download as XLSX -->
               {{ $t('activity.downloadExcel') }}
             </div>
@@ -132,7 +132,7 @@ const exportFile = async (exportType: ExportTypes) => {
               :class="{ disabled: isLocked }"
               @click="!isLocked ? (quickImportDialog = true) : {}"
             >
-              <MdiUploadOutline />
+              <MdiUploadOutline class="text-gray-500" />
               <!-- Upload CSV -->
               {{ $t('activity.uploadCSV') }}
             </div>
@@ -143,7 +143,7 @@ const exportFile = async (exportType: ExportTypes) => {
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
             >
-              <MdiViewListOutline />
+              <MdiViewListOutline class="text-gray-500" />
               <!-- Shared View List -->
               {{ $t('activity.listSharedView') }}
             </div>
@@ -154,7 +154,7 @@ const exportFile = async (exportType: ExportTypes) => {
               class="nc-menu-item"
               @click="showWebhookDrawer = true"
             >
-              <MdiHook />
+              <MdiHook class="text-gray-500" />
               {{ $t('objects.webhooks') }}
             </div>
           </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index c1918667f3..a12f810cd5 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -21,7 +21,7 @@ const { isUIAllowed } = useUIPermission()
 
 let showShareModel = $ref(false)
 
-const passwordProtected = $ref(false)
+let passwordProtected = $ref(false)
 
 const shared = ref()
 
@@ -100,6 +100,20 @@ const copyLink = () => {
   copy(sharedViewUrl?.value as string)
   message.success('Copied to clipboard')
 }
+
+watch(
+  () => passwordProtected,
+  (value) => {
+    if (!value) {
+      shared.value.password = ''
+      saveShareLinkPassword()
+    }
+  },
+)
+
+onMounted(() => {
+  if (shared.value?.password?.length) passwordProtected = true
+})
 </script>
 
 <template>
@@ -133,7 +147,6 @@ const copyLink = () => {
         <a-collapse-panel key="1" header="More Options">
           <div class="mb-2">
             <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
-            <!--           todo: add password toggle -->
             <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
               <a-input
                 v-model:value="shared.password"
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index e60b7fc827..211101bc4c 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -23,6 +23,7 @@ interface Props {
   editEnabled: boolean
   rowIndex?: number
   active?: boolean
+  virtual?: boolean
 }
 
 const props = defineProps<Props>()
@@ -33,6 +34,8 @@ const column = toRef(props, 'column')
 
 const active = toRef(props, 'active', false)
 
+const virtual = toRef(props, 'virtual', false)
+
 provide(ColumnInj, column)
 
 provide(EditModeInj, useVModel(props, 'editEnabled', emit))
@@ -73,10 +76,6 @@ const isManualSaved = $computed(() => {
   return [UITypes.Currency, UITypes.Duration].includes(column?.value?.uidt as UITypes)
 })
 
-const isPrimary = computed(() => {
-  return column?.value?.pv
-})
-
 const vModel = computed({
   get: () => props.modelValue,
   set: (val) => {
@@ -94,6 +93,7 @@ const vModel = computed({
 })
 
 const {
+  isPrimary,
   isURL,
   isEmail,
   isJSON,
@@ -118,7 +118,7 @@ const {
 } = useColumn(column)
 
 const syncAndNavigate = (dir: NavigateDir) => {
-  if (isJSON) return
+  if (isJSON.value) return
 
   if (changed) {
     emit('save')
@@ -131,7 +131,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 <template>
   <div
     class="nc-cell w-full h-full"
-    :class="{ 'text-blue-600': isPrimary }"
+    :class="{ 'text-blue-600': isPrimary && !virtual }"
     @keydown.stop.left
     @keydown.stop.right
     @keydown.stop.up
@@ -153,12 +153,12 @@ const syncAndNavigate = (dir: NavigateDir) => {
     <CellEmail v-else-if="isEmail" v-model="vModel" />
     <CellUrl v-else-if="isURL" v-model="vModel" />
     <CellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
+    <CellPercent v-else-if="isPercent" v-model="vModel" />
     <CellCurrency v-else-if="isCurrency" v-model="vModel" />
     <CellDecimal v-else-if="isDecimal" v-model="vModel" />
     <CellInteger v-else-if="isInt" v-model="vModel" />
     <CellFloat v-else-if="isFloat" v-model="vModel" />
     <CellText v-else-if="isString" v-model="vModel" />
-    <CellPercent v-else-if="isPercent" v-model="vModel" />
     <CellJson v-else-if="isJSON" v-model="vModel" />
     <CellText v-else v-model="vModel" />
     <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" @click.stop.prevent />
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 608839559c..a6aaf8a503 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -41,7 +41,7 @@ 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 readOnly = inject(ReadonlyInj, false)
 const isLocked = inject(IsLockedInj, false)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
@@ -59,7 +59,15 @@ const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow()
 
 const addColumnDropdown = ref(false)
 
-const contextMenu = ref(false)
+const _contextMenu = ref(false)
+const contextMenu = computed({
+  get: () => _contextMenu.value,
+  set: (val) => {
+    if (!readOnly) {
+      _contextMenu.value = val
+    }
+  },
+})
 
 const contextMenuTarget = ref(false)
 const expandedFormDlg = ref(false)
@@ -272,11 +280,15 @@ const onNavigate = (dir: NavigateDir) => {
     case NavigateDir.NEXT:
       if (selected.row < data.value.length - 1) {
         selected.row++
+      } else {
+        editEnabled = false
       }
       break
     case NavigateDir.PREV:
       if (selected.row > 0) {
         selected.row--
+      } else {
+        editEnabled = false
       }
       break
   }
@@ -302,15 +314,20 @@ const expandForm = (row: Row, state: Record<string, any>) => {
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
                 <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
-                  <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
-                  <div
-                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                    class="nc-check-all w-full align-center"
-                  >
-                    <a-checkbox v-model:checked="selectedAllRecords" />
+                  <template v-if="!readOnly">
+                    <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
+                    <div
+                      :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                      class="nc-check-all w-full align-center"
+                    >
+                      <a-checkbox v-model:checked="selectedAllRecords" />
 
-                    <span class="flex-1" />
-                  </div>
+                      <span class="flex-1" />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="text-gray-500">#</div>
+                  </template>
                 </div>
               </th>
               <th
@@ -324,12 +341,11 @@ 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" :hide-menu="readonly" />
+                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
 
-                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readonly" />
+                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
                 </div>
               </th>
-              <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
               <th
                 v-if="!readonly && !isLocked && isUIAllowed('add-column')"
                 v-t="['c:column:add']"
@@ -368,7 +384,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         {{ rowIndex + 1 }}
                       </div>
                       <div
-                        v-if="!readonly"
+                        v-if="!readOnly"
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index ef95924993..7b44225452 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -14,13 +14,13 @@ const ManyToMany = defineAsyncComponent(() => import('../virtual-cell/ManyToMany
 
 const BelongsTo = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
 
-const Rollup = defineAsyncComponent(() => import('../virtual-cell/HasMany.vue'))
+const Rollup = defineAsyncComponent(() => import('../virtual-cell/Rollup.vue') as any)
 
 const Formula = defineAsyncComponent(() => import('../virtual-cell/Formula.vue'))
 
-const Count = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
+const Count = defineAsyncComponent(() => import('../virtual-cell/Count.vue'))
 
-const Lookup = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
+const Lookup = defineAsyncComponent(() => import('../virtual-cell/Lookup.vue') as any)
 
 interface Props {
   column: ColumnType
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index b6fc41c5b3..c26f60440e 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -133,7 +133,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
           <template #title> {{ $t('objects.webhooks') }}</template>
 
           <div class="nc-sidebar-right-item hover:after:bg-gray-300">
-            <MdiHook />
+            <MdiHook @click.stop />
           </div>
         </a-tooltip>
 
@@ -143,7 +143,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
           <template #title> Get API Snippet</template>
 
           <div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
-            <MdiXml class="group-hover:(!text-white)" />
+            <MdiXml class="group-hover:(!text-white)" @click.stop />
           </div>
         </a-tooltip>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index dea7579e40..f03af228e8 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
@@ -64,7 +64,7 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
           :key="i"
           :class="{ 'bg-gray-100 px-2 rounded-full': !lookupColumnMetaProps.isAttachment }"
         >
-          <SmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" />
+          <SmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" :virtual="true" />
         </div>
       </template>
     </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 bf938dd849..7b987eddde 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -11,6 +11,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { IsPublicInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
 
@@ -22,6 +23,8 @@ const vModel = useVModel(props, 'modelValue', emit)
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const column = inject(ColumnInj)
 
 const readonly = inject(ReadonlyInj, false)
@@ -117,7 +120,7 @@ const expandedFormRow = ref()
                   @click.stop="unlinkRow(row)"
                 />
                 <MdiDeleteOutline
-                  v-if="!readonly"
+                  v-if="!readonly && !isPublic"
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   @click.stop="deleteRelatedRow(row, unlinkIfNewRow)"
                 />
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 f7a5d1863e..11deb22faa 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -13,6 +13,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { IsPublicInj } from '~/context'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -38,6 +39,8 @@ const {
 
 const { addLTARRef, isNew } = useSmartsheetRowStoreOrThrow()
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const linkRow = async (row: Record<string, any>) => {
   if (isNew.value) {
     addLTARRef(row, column?.value as ColumnType)
@@ -105,7 +108,7 @@ const newRowState = computed(() => {
         ></a-input>
         <div class="flex-1" />
         <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
-        <a-button type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
+        <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0">
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index b8a5c6339d..a242896d05 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -21,3 +21,4 @@ export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'
 export * from './useLTARStore'
 export * from './useExpandedFormStore'
+export * from './useSharedFormViewStore'
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 47baba15ec..217b836592 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -56,10 +56,14 @@ export function useColumn(column: Ref<ColumnType>) {
   const isManualSaved = computed(() =>
     [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(uiDatatype.value),
   )
+  const isPrimary = computed(() => {
+    return column?.value?.pv
+  })
 
   return {
     abstractType,
     dataTypeLow,
+    isPrimary,
     isBoolean,
     isString,
     isTextArea,
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 6904f9f43f..d9055d6c5a 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -2,6 +2,7 @@ import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } fr
 import type { ComputedRef, Ref } from 'vue'
 import { Modal, message } from 'ant-design-vue'
 import {
+  IsPublicInj,
   NOCO,
   computed,
   extractSdkResponseErrorMsg,
@@ -13,6 +14,7 @@ import {
   useProject,
 } from '#imports'
 import type { Row } from '~/composables'
+import { SharedViewPasswordInj } from '~/context'
 
 interface DataApiResponse {
   list: Record<string, any>
@@ -26,6 +28,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
     const { $api } = useNuxtApp()
+    const sharedViewPassword = inject(SharedViewPasswordInj, ref(null))
     const childrenExcludedList = ref<DataApiResponse | undefined>()
     const childrenList = ref<DataApiResponse | undefined>()
     const childrenExcludedListPagination = reactive({
@@ -39,6 +42,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       size: 10,
     })
 
+    const isPublic: boolean = $(inject(IsPublicInj, ref(false)))
+
     const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
 
     // getters
@@ -79,8 +84,29 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const loadChildrenExcludedList = async () => {
       try {
-        /** if new row load all records */
-        if (isNewRow?.value) {
+        if (isPublic) {
+          const route = useRoute()
+          childrenExcludedList.value = await $api.public.dataRelationList(
+            route.params.viewId as string,
+            column?.value?.id,
+            {},
+            {
+              headers: {
+                'xc-password': sharedViewPassword.value,
+              },
+              query: {
+                limit: childrenExcludedListPagination.size,
+                offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+                where:
+                  childrenExcludedListPagination.query &&
+                  `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+                fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
+              } as any,
+            },
+          )
+
+          /** if new row load all records */
+        } else if (isNewRow?.value) {
           childrenExcludedList.value = await $api.dbTableRow.list(
             NOCO,
             project.value.id as string,
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
new file mode 100644
index 0000000000..902405b41c
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -0,0 +1,197 @@
+import useVuelidate from '@vuelidate/core'
+import { minLength, required } from '@vuelidate/validators'
+import { message } from 'ant-design-vue'
+import type { ColumnType, FormType, LinkToAnotherRecordType, TableType, ViewType } from 'nocodb-sdk'
+import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { SharedViewPasswordInj } from '~/context'
+import { extractSdkResponseErrorMsg } from '~/utils'
+import { useInjectionState, useMetas } from '#imports'
+
+const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((sharedViewId: string) => {
+  const progress = ref(false)
+  const notFound = ref(false)
+  const submitted = ref(false)
+  const passwordDlg = ref(false)
+  const password = ref<string | null>(null)
+  const secondsRemain = ref(0)
+
+  provide(SharedViewPasswordInj, password)
+
+  const sharedView = ref<ViewType>()
+  const sharedFormView = ref<FormType>()
+  const meta = ref<TableType>()
+  const columns = ref<(ColumnType & { required?: boolean; show?: boolean })[]>()
+
+  const { $api } = useNuxtApp()
+  const { metas, setMeta } = useMetas()
+  const formState = ref({})
+
+  const { state: additionalState } = useProvideSmartsheetRowStore(
+    meta as Ref<TableType>,
+    ref({
+      row: formState,
+      rowMeta: { new: true },
+      oldRow: {},
+    }),
+  )
+
+  const formColumns = computed(() =>
+    columns?.value?.filter((c) => c.show)?.filter((col) => !isVirtualCol(col) || col.uidt === UITypes.LinkToAnotherRecord),
+  )
+  const loadSharedView = async () => {
+    try {
+      const viewMeta = await $api.public.sharedViewMetaGet(sharedViewId, {
+        headers: {
+          'xc-password': password.value,
+        },
+      })
+
+      passwordDlg.value = false
+
+      sharedView.value = viewMeta
+      sharedFormView.value = viewMeta.view
+      meta.value = viewMeta.model
+      columns.value = viewMeta.model?.columns
+
+      setMeta(viewMeta.model)
+
+      const relatedMetas = { ...viewMeta.relatedMetas }
+      Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
+    } catch (e: any) {
+      if (e.response && e.response.status === 404) {
+        notFound.value = true
+      } else if ((await extractSdkResponseErrorMsg(e)) === ErrorMessages.INVALID_SHARED_VIEW_PASSWORD) {
+        passwordDlg.value = true
+      }
+    }
+  }
+
+  const validators = computed(() => {
+    const obj: any = {
+      localState: {},
+      virtual: {},
+    }
+    for (const column of formColumns?.value ?? []) {
+      if (
+        !isVirtualCol(column) &&
+        ((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || (column as any).required)
+      ) {
+        obj.localState[column.title!] = { required }
+      } else if (
+        column.uidt === UITypes.LinkToAnotherRecord &&
+        column.colOptions &&
+        (column.colOptions as LinkToAnotherRecordType).type === RelationTypes.BELONGS_TO
+      ) {
+        const col = columns.value?.find((c) => c.id === (column?.colOptions as LinkToAnotherRecordType)?.fk_child_column_id)
+
+        if ((col && col.rqd && !col.cdf) || column.required) {
+          if (col) {
+            obj.virtual[column.title!] = { required }
+          }
+        }
+      } else if (isVirtualCol(column) && column.required) {
+        obj.virtual[column.title!] = {
+          minLength: minLength(1),
+          required,
+        }
+      }
+    }
+
+    return obj
+  })
+
+  const v$ = useVuelidate(
+    validators,
+    computed(() => ({ localState: formState?.value, virtual: additionalState?.value })),
+  )
+
+  const submitForm = async () => {
+    try {
+      if (!(await v$.value?.$validate())) {
+        return
+      }
+
+      progress.value = true
+      const data: Record<string, any> = { ...(formState?.value ?? {}), ...(additionalState?.value || {}) }
+      const attachment: Record<string, any> = {}
+
+      for (const col of metas?.value?.[sharedView?.value?.fk_model_id as string]?.columns ?? []) {
+        if (col.uidt === UITypes.Attachment) {
+          attachment[`_${col.title}`] = data[col.title!]
+          delete data[col.title!]
+        }
+      }
+
+      await $api.public.dataCreate(
+        sharedView?.value?.uuid as string,
+        {
+          data,
+          ...attachment,
+        },
+        {
+          headers: {
+            'xc-password': password.value,
+          },
+        },
+      )
+
+      submitted.value = true
+      progress.value = false
+
+      await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
+    } catch (e: any) {
+      console.log(e)
+      await message.error(await extractSdkResponseErrorMsg(e))
+    }
+    progress.value = false
+  }
+
+  /** reset form if show_blank_form is true */
+  watch(submitted, (nextVal: boolean) => {
+    if (nextVal && sharedFormView.value?.show_blank_form) {
+      secondsRemain.value = 5
+      const intvl = setInterval(() => {
+        secondsRemain.value = secondsRemain.value - 1
+        if (secondsRemain.value < 0) {
+          submitted.value = false
+          clearInterval(intvl)
+        }
+      }, 1000)
+    }
+
+    /** reset form state and validation */
+    if (!nextVal) {
+      additionalState.value = {}
+      formState.value = {}
+      v$.value?.$reset()
+    }
+  })
+
+  return {
+    sharedView,
+    sharedFormView,
+    loadSharedView,
+    columns,
+    submitForm,
+    progress,
+    meta,
+    validators,
+    v$,
+    formColumns,
+    formState,
+    notFound,
+    password,
+    submitted,
+    secondsRemain,
+    passwordDlg,
+  }
+}, 'expanded-form-store')
+
+export { useProvideSharedFormStore }
+
+export function useSharedFormStoreOrThrow() {
+  const sharedFormStore = useSharedFormStore()
+  if (sharedFormStore == null) throw new Error('Please call `useProvideSharedFormStore` on the appropriate parent component')
+  return sharedFormStore
+}
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index ce8faa3d5c..e86f89e6b6 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -13,11 +13,10 @@ export function useSharedView() {
   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 meta = useState<TableType>('meta')
   const formColumns = computed(
     () =>
-      columns.value
+      meta.value.columns
         .filter(
           (f: Record<string, any>) =>
             f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
@@ -39,10 +38,14 @@ export function useSharedView() {
     allowCSVDownload.value = JSON.parse(viewMeta.meta).allowCSVDownload
 
     if (localPassword) password.value = localPassword
-    sharedView.value = viewMeta
+    sharedView.value = { ...viewMeta }
+    meta.value = { ...viewMeta.model }
 
-    meta.value = viewMeta.model
-    columns.value = viewMeta.model.columns
+    let order = 1
+    meta.value.columns = [...viewMeta.model.columns]
+      .filter((c) => c.show)
+      .map((c) => ({ ...c, order: order++ }))
+      .sort((a, b) => a.order - b.order)
 
     setMeta(viewMeta.model)
 
@@ -96,7 +99,6 @@ export function useSharedView() {
     sharedView,
     loadSharedView,
     meta,
-    columns,
     nestedFilters,
     fetchSharedViewData,
     paginationData,
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index f75856e3c6..11d355e563 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -3,53 +3,58 @@ import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
-const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
-  const { $api } = useNuxtApp()
-  const { sqlUi } = useProject()
-
-  const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
-
-  // state
-  // todo: move to grid view store
-  const search = reactive({
-    field: '',
-    query: '',
-  })
-
-  // getters
-  const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
-  const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
-  const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
-  const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
-  const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
-  const xWhere = computed(() => {
-    let where
-    const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
-    if (!col) return
-
-    if (!search.query.trim()) return
-    if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
-      where = `(${col.title},like,%${search.query.trim()}%)`
-    } else {
-      where = `(${col.title},eq,${search.query.trim()})`
+const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
+  (view: Ref<ViewType>, meta: Ref<TableType>, shared = false) => {
+    const { $api } = useNuxtApp()
+    const { sqlUi } = useProject()
+
+    const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
+
+    // state
+    // todo: move to grid view store
+    const search = reactive({
+      field: '',
+      query: '',
+    })
+
+    // getters
+    const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
+    const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
+    const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
+    const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
+    const isSharedForm = computed(() => isForm?.value && shared)
+    const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
+    const xWhere = computed(() => {
+      let where
+      const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
+      if (!col) return
+
+      if (!search.query.trim()) return
+      if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
+        where = `(${col.title},like,%${search.query.trim()}%)`
+      } else {
+        where = `(${col.title},eq,${search.query.trim()})`
+      }
+      return where
+    })
+
+    return {
+      view,
+      meta,
+      isLocked,
+      $api,
+      search,
+      xWhere,
+      isPkAvail,
+      isForm,
+      isGrid,
+      isGallery,
+      cellRefs,
+      isSharedForm,
     }
-    return where
-  })
-
-  return {
-    view,
-    meta,
-    isLocked,
-    $api,
-    search,
-    xWhere,
-    isPkAvail,
-    isForm,
-    isGrid,
-    isGallery,
-    cellRefs,
-  }
-}, 'smartsheet-store')
+  },
+  'smartsheet-store',
+)
 
 export { useProvideSmartsheetStore }
 
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index c775d36dc3..45e7df3f53 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -4,18 +4,11 @@ import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
 import { IsPublicInj } from '#imports'
+import type { Field } from '~/lib'
 
 export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
   const isPublic = inject(IsPublicInj, ref(false))
-  const fields = ref<
-    {
-      order: number
-      show: number | boolean
-      title: string
-      fk_column_id?: string
-      system?: boolean
-    }[]
-  >()
+  const fields = ref<Field[]>()
 
   const filterQuery = ref('')
 
@@ -39,7 +32,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
         }
       }, {})
       fields.value = meta.value?.columns
-        ?.map((column) => {
+        ?.map((column: ColumnType) => {
           const currentColumnField = fieldById[column.id!] || {}
 
           return {
@@ -50,13 +43,13 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
             system: isSystemColumn(currentColumnField.type || false),
           }
         })
-        .sort((a, b) => a.order - b.order)
+        .sort((a: Field, b: Field) => a.order - b.order)
     }
   }
 
   const showAll = async (ignoreIds?: any) => {
     if (isPublic.value) {
-      fields.value = fields.value?.map((field) => ({
+      fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: true,
       }))
@@ -79,7 +72,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
   const hideAll = async (ignoreIds?: any) => {
     if (isPublic.value) {
-      fields.value = fields.value?.map((field) => ({
+      fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: false,
       }))
@@ -101,9 +94,9 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
-    if (isPublic && fields.value) {
+    if (isPublic.value && fields.value) {
       fields.value[index] = field
-      meta.value.columns = meta.value?.columns?.map((column) => {
+      meta.value.columns = meta.value?.columns?.map((column: ColumnType) => {
         if (column.id === field.fk_column_id) {
           return {
             ...column,
@@ -128,14 +121,15 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     reloadData?.()
   }
 
-  const metaColumnById = computed(() => {
-    return (
-      meta.value?.columns?.reduce<Record<string, ColumnType>>((acc, curr) => {
-        return {
-          ...acc,
-          [curr.id!]: curr,
-        }
-      }, {}) || {}
+  const metaColumnById = computed<Record<string, ColumnType>>(() => {
+    if (!meta.value?.columns) return {}
+
+    return meta.value?.columns?.reduce(
+      (acc: ColumnType, curr: ColumnType) => ({
+        ...acc,
+        [curr.id!]: curr,
+      }),
+      {} as any,
     )
   })
 
@@ -160,33 +154,37 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
 
   const filteredFieldList = computed(() => {
     return (
-      fields.value?.filter((field) => {
+      fields.value?.filter((field: Field) => {
         // hide system columns if not enabled
         if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {
           return false
         }
 
-        return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
-      }) || {}
+        if (filterQuery.value === '') {
+          return true
+        } else {
+          return field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
+        }
+      }) || []
     )
   })
 
   const sortedAndFilteredFields = computed<ColumnType[]>(() => {
     return (fields?.value
-      ?.filter((c) => {
+      ?.filter((field: Field) => {
         // hide system columns if not enabled
         if (
           !showSystemFields.value &&
           metaColumnById.value &&
-          metaColumnById?.value?.[c.fk_column_id!] &&
-          isSystemColumn(metaColumnById.value?.[c.fk_column_id!])
+          metaColumnById?.value?.[field.fk_column_id!] &&
+          isSystemColumn(metaColumnById.value?.[field.fk_column_id!])
         ) {
           return false
         }
-        return c.show && metaColumnById?.value?.[c.fk_column_id!]
+        return field.show && metaColumnById?.value?.[field.fk_column_id!]
       })
-      ?.sort((a, b) => a.order - b.order)
-      ?.map((c) => metaColumnById?.value?.[c.fk_column_id!]) || []) as ColumnType[]
+      ?.sort((a: Field, b: Field) => a.order - b.order)
+      ?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[]
   })
 
   // reload view columns when table meta changes
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index fa1562d33f..1e984a4194 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -24,3 +24,4 @@ export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('relo
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
+export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 1ce866ad42..d46b05c9bd 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -22,7 +22,10 @@ const logout = () => {
 
     <a-layout class="!flex-col">
       <Transition name="layout">
-        <a-layout-header v-if="signedIn" class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg">
+        <a-layout-header
+          v-if="!route.meta.public && signedIn"
+          class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
+        >
           <div
             v-if="
               route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
@@ -48,7 +51,7 @@ const logout = () => {
           <GeneralShareBaseButton />
 
           <a-tooltip placement="bottom">
-            <template #title> Switch language </template>
+            <template #title> Switch language</template>
 
             <div class="flex pr-4 items-center">
               <GeneralLanguage class="cursor-pointer text-2xl" />
@@ -88,7 +91,7 @@ const logout = () => {
       </Transition>
 
       <a-tooltip placement="bottom">
-        <template #title> Switch language </template>
+        <template #title> Switch language</template>
 
         <Transition name="layout">
           <div v-if="!signedIn" class="nc-lang-btn">
diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
index a6d2aef876..b18c242f92 100644
--- a/packages/nc-gui-v2/layouts/shared-view.vue
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { navigateTo } from '#app'
+const { isLoading } = useGlobal()
+const { sharedView } = useSharedView()
 </script>
 
 <script lang="ts">
@@ -10,12 +12,25 @@ export default {
 
 <template>
   <a-layout id="nc-app">
-    <a-layout class="!flex-col">
+    <a-layout class="!flex-col bg-white">
       <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>
+          <div class="flex justify-center items-center">
+            <div class="flex items-center gap-2 ml-3">
+              <template v-if="isLoading">
+                {{ $t('general.loading') }}
 
+                <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+              </template>
+              <div v-else class="text-xl font-semibold truncate">
+                {{ sharedView?.title }}
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="flex-1" />
       </a-layout-header>
 
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index 7b006d67f7..b0ce7a09ee 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -21,6 +21,14 @@ export interface ProjectMetaInfo {
   PackageVersion?: string
 }
 
+export interface Field {
+  order: number
+  show: number | boolean
+  title: string
+  fk_column_id?: string
+  system?: boolean
+}
+
 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/middleware/auth.global.ts b/packages/nc-gui-v2/middleware/auth.global.ts
index 740514cbb2..8c85c53571 100644
--- a/packages/nc-gui-v2/middleware/auth.global.ts
+++ b/packages/nc-gui-v2/middleware/auth.global.ts
@@ -23,9 +23,14 @@ import { useGlobal } from '#imports'
 export default defineNuxtRouteMiddleware((to, from) => {
   const state = useGlobal()
 
+  /** if public allow */
+  if (to.meta.public) return
+
   /** if shred base allow without validating */
   if (to.params?.projectType === 'base') return
 
+  if (to.meta.public) return
+
   /** if auth is required or unspecified (same as required) and user is not signed in, redirect to signin page */
   if ((to.meta.requiresAuth || typeof to.meta.requiresAuth === 'undefined') && !state.signedIn.value) {
     return navigateTo('/signin')
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index c9bc82fe4c..6f084d334f 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -6,6 +6,8 @@
     "": {
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
+        "@vuelidate/core": "^2.0.0-alpha.44",
+        "@vuelidate/validators": "^2.0.0-alpha.31",
         "@vueuse/core": "^9.0.2",
         "@vueuse/integrations": "^9.0.2",
         "ant-design-vue": "^3.2.10",
@@ -2862,6 +2864,72 @@
         "vue": "^3.0.1"
       }
     },
+    "node_modules/@vuelidate/core": {
+      "version": "2.0.0-alpha.44",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.44.tgz",
+      "integrity": "sha512-3DlCe3E0RRXbB+OfPacUetKhLmXzmnjeHkzjnbkc03p06mKm6h9pXR5pd6Mv4s4tus4sieuKDb2YWNmKK6rQeA==",
+      "dependencies": {
+        "vue-demi": "^0.13.4"
+      }
+    },
+    "node_modules/@vuelidate/core/node_modules/vue-demi": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+      "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/validators": {
+      "version": "2.0.0-alpha.31",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz",
+      "integrity": "sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==",
+      "dependencies": {
+        "vue-demi": "^0.13.4"
+      }
+    },
+    "node_modules/@vuelidate/validators/node_modules/vue-demi": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+      "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vuetify/loader-shared": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.5.0.tgz",
@@ -17366,6 +17434,38 @@
       "dev": true,
       "requires": {}
     },
+    "@vuelidate/core": {
+      "version": "2.0.0-alpha.44",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.44.tgz",
+      "integrity": "sha512-3DlCe3E0RRXbB+OfPacUetKhLmXzmnjeHkzjnbkc03p06mKm6h9pXR5pd6Mv4s4tus4sieuKDb2YWNmKK6rQeA==",
+      "requires": {
+        "vue-demi": "^0.13.4"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.8",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+          "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+          "requires": {}
+        }
+      }
+    },
+    "@vuelidate/validators": {
+      "version": "2.0.0-alpha.31",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz",
+      "integrity": "sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==",
+      "requires": {
+        "vue-demi": "^0.13.4"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.8",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+          "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+          "requires": {}
+        }
+      }
+    },
     "@vuetify/loader-shared": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.5.0.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index cca8e10ace..295b3e94d3 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",
+    "@vuelidate/core": "^2.0.0-alpha.44",
+    "@vuelidate/validators": "^2.0.0-alpha.31",
     "@vueuse/core": "^9.0.2",
     "@vueuse/integrations": "^9.0.2",
     "ant-design-vue": "^3.2.10",
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index bae08d8ac4..03f682306c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -9,12 +9,14 @@ import {
   ref,
   useClipboard,
   useElementHover,
+  useGlobal,
   useProject,
   useRoute,
   useTabs,
   useUIPermission,
 } from '#imports'
 import { TabType } from '~/composables'
+
 const route = useRoute()
 
 const { appInfo, token } = useGlobal()
@@ -71,11 +73,13 @@ const isHovered = useElementHover(sidebar)
 const copyProjectInfo = async () => {
   try {
     await loadProjectMetaInfo()
-    copy(
+
+    await 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)
@@ -85,7 +89,8 @@ const copyProjectInfo = async () => {
 
 const copyAuthToken = async () => {
   try {
-    copy(token.value!)
+    await copy(token.value!)
+
     message.info('Copied auth token to clipboard')
   } catch (e: any) {
     console.log(e)
@@ -143,7 +148,7 @@ const copyAuthToken = async () => {
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
-              class="group cursor-pointer flex gap-4 items-center nc-project-menu"
+              class="group cursor-pointer flex gap-4 items-center nc-project-menu overflow-hidden"
             >
               <template v-if="isOpen">
                 <div class="text-xl font-semibold truncate">{{ project.title }}</div>
@@ -279,10 +284,6 @@ const copyAuthToken = async () => {
 </template>
 
 <style lang="scss" 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));
-}
-
 :deep(.ant-dropdown-menu-item-group-title) {
   @apply border-b-1;
 }
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index d40f82d345..8f65f3122b 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -1,17 +1,3 @@
-<script>
-export default {
-  name: 'Index',
-}
-</script>
-
 <template>
-  <div class="nc-main-tab">
-    <span>Welcome to NocoDB!</span>
-  </div>
+  <div class="h-full w-full prose text-3xl text-gray-400 flex items-center justify-center">Welcome to NocoDB!</div>
 </template>
-
-<style scoped>
-.nc-main-tab {
-  @apply w-full text-3xl text-gray-400 flex align-center justify-center;
-}
-</style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index aa46ab0e85..b3590c30bb 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -1,39 +1,31 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk'
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj, useRoute } from '#imports'
+import type { TableType } from 'nocodb-sdk/build/main'
+import { useProvideSharedFormStore } from '~/composables/useSharedFormViewStore'
+import { IsFormInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { createEventHook, definePageMeta, provide, ref, useProvideSmartsheetStore, useRoute } from '#imports'
 
 definePageMeta({
-  requiresAuth: false,
+  public: true,
 })
 
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
-const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
 
-await loadSharedView(route.params.viewId as string)
+const { loadSharedView, sharedView, meta, notFound } = useProvideSharedFormStore(route.params.viewId as string)
 
-provide(ReloadViewDataHookInj, reloadEventHook)
-provide(MetaInj, meta)
-provide(ActiveViewInj, sharedView)
-provide(FieldsInj, formColumns)
-provide(IsPublicInj, ref(true))
+await loadSharedView()
+if (!notFound.value) {
+  provide(ReloadViewDataHookInj, reloadEventHook)
+  provide(MetaInj, meta)
+  provide(IsPublicInj, ref(true))
+  provide(IsFormInj, ref(true))
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>, true)
+}
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex">
-    <div class="nc-container flex flex-col h-full mt-2 px-6">
-      <SharedViewForm />
-    </div>
-  </NuxtLayout>
+  <SharedViewForm />
 </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
index 2be1b26654..6187bce03c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,7 +1,19 @@
 <script setup lang="ts">
-import { ReadonlyInj, ReloadViewDataHookInj, useRoute } from '#imports'
+import { message } from 'ant-design-vue'
+import {
+  ReadonlyInj,
+  ReloadViewDataHookInj,
+  createEventHook,
+  definePageMeta,
+  extractSdkResponseErrorMsg,
+  provide,
+  ref,
+  useRoute,
+  useSharedView,
+} from '#imports'
 
 definePageMeta({
+  public: true,
   requiresAuth: false,
   layout: 'shared-view',
 })
@@ -10,15 +22,20 @@ const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, ref(true))
+provide(ReadonlyInj, true)
 
 const { loadSharedView } = useSharedView()
 const showPassword = ref(false)
 
 try {
   await loadSharedView(route.params.viewId as string)
-} catch (e) {
-  showPassword.value = true
+} catch (e: any) {
+  if (e?.response?.status === 403) {
+    showPassword.value = true
+  } else {
+    console.error(e)
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
 }
 </script>
 
@@ -27,6 +44,7 @@ try {
     <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 6dc766cc9d..7f4e124ddc 100644
--- a/packages/nc-gui-v2/pages/forgot-password.vue
+++ b/packages/nc-gui-v2/pages/forgot-password.vue
@@ -129,7 +129,7 @@ function resetError() {
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
 
     &::after {
       @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index c12ae11436..92ad0b4a6f 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -69,103 +69,119 @@ onMounted(() => {
       </div>
 
       <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">
+        <a-card class="transition-all duration-300 ease-out !rounded-lg shadow">
+          <h1 class="flex items-center justify-center gap-2 leading-8 mb-8">
             <!-- 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"
-            />
+            <span class="text-4xl">{{ $t('title.myProject') }}</span>
+
+            <a-tooltip title="Reload projects">
+              <span
+                class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-pink-500) rounded-full mt-1"
+                :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
+              >
+                <MdiRefresh
+                  v-t="['a:project:refresh']"
+                  class="text-xl text-gray-500 group-hover:text-pink-500 cursor-pointer"
+                  :class="isLoading ? '!text-primary' : ''"
+                  @click="loadProjects"
+                />
+              </span>
+            </a-tooltip>
           </h1>
 
           <div class="order-1 flex mb-6">
             <a-input-search
               v-model:value="filterQuery"
-              class="max-w-[200px] nc-project-page-search"
+              class="max-w-[250px] nc-project-page-search rounded"
               :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">
+            <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']">
+              <button class="nc-new-project-menu">
+                <div class="flex items-center w-full">
                   {{ $t('title.newProj') }}
                   <MdiMenuDown class="menu-icon" />
                 </div>
-              </a-button>
+              </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-item>
+                    <div
+                      v-t="['c:project:create:xcdb']"
+                      class="nc-project-menu-item gap-4"
+                      @click="navigateTo('/project/create')"
+                    >
+                      <MdiPlusOutline class="text-lg" />
+
+                      <div>{{ $t('activity.createProject') }}</div>
+                    </div>
+                  </a-menu-item>
+
+                  <a-menu-item>
+                    <div
+                      v-t="['c:project:create:extdb']"
+                      class="nc-project-menu-item gap-4"
+                      @click="navigateTo('/project/create-external')"
+                    >
+                      <MdiDatabaseOutline class="text-lg" />
+
+                      <div v-html="$t('activity.createProjectExtended.extDB')" />
+                    </div>
+                  </a-menu-item>
                 </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>
+          <TransitionGroup name="layout" mode="out-in">
+            <div v-if="isLoading">
+              <a-skeleton />
+            </div>
+
+            <a-table
+              v-else
+              :custom-row="
+                (record) => ({
+                  onClick: () => {
+                    $e('a:project:open')
+                    navigateTo(`/nc/${record.id}`)
+                  },
+                  class: ['group'],
+                })
+              "
+              :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 color-transition group-hover:text-pink-500 !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
+                  >
+                    {{ 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 items-center gap-2">
+                    <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>
+          </TransitionGroup>
         </a-card>
       </div>
 
@@ -182,7 +198,25 @@ onMounted(() => {
 
 <style scoped>
 .nc-action-btn {
-  @apply text-gray-500 hover:text-primary mr-2 cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+  @apply text-gray-500 hover:(text-pink-500 ring) active:(ring ring-pink-500) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+}
+
+.nc-new-project-menu {
+  @apply cursor-pointer z-1 relative color-transition rounded-md px-3 py-2 text-white;
+
+  &::after {
+    @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+    content: '';
+    z-index: -1;
+  }
+
+  &:hover::after {
+    @apply transform scale-110 ring ring-pink-500;
+  }
+
+  &:active::after {
+    @apply ring ring-pink-500;
+  }
 }
 
 :deep(.ant-table-cell) {
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index 58b4c02508..86eb53b19f 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -167,7 +167,7 @@ function resetError() {
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
 
     &::after {
       @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
diff --git a/packages/nc-gui-v2/pages/signup/[[token]].vue b/packages/nc-gui-v2/pages/signup/[[token]].vue
index 02f68f250f..7181d09818 100644
--- a/packages/nc-gui-v2/pages/signup/[[token]].vue
+++ b/packages/nc-gui-v2/pages/signup/[[token]].vue
@@ -162,7 +162,7 @@ function resetError() {
 
       <div class="prose-sm mt-4 text-gray-500">
         By signing up, you agree to the
-        <a class="prose-sm text-pink-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb">Terms of Service</a>
+        <a class="prose-sm text-gray-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb">Terms of Service</a>
       </div>
     </div>
   </NuxtLayout>
@@ -186,7 +186,7 @@ function resetError() {
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
 
     &::after {
       @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index d916b3839b..748b959145 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -130,6 +130,7 @@ export interface ViewType {
   order?: number;
   fk_model_id?: string;
   slug?: string;
+  uuid?: string;
   show_system_fields?: boolean;
   lock_type?: 'collaborative' | 'locked' | 'personal';
 }
@@ -3062,32 +3063,41 @@ export class Api<
       }),
 
     /**
-     * No description
+     * @description Read project details
      *
      * @tags Public
-     * @name SharedViewMetaGet
-     * @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
-     * @response `200` `object` OK
+     * @name SharedBaseGet
+     * @request GET:/api/v1/db/public/shared-base/{sharedBaseUuid}/meta
+     * @response `200` `{ project_id?: string }` OK
      */
-    sharedViewMetaGet: (sharedViewUuid: string, params: RequestParams = {}) =>
-      this.request<object, any>({
-        path: `/api/v1/db/public/shared-view/${sharedViewUuid}/meta`,
+    sharedBaseGet: (sharedBaseUuid: string, params: RequestParams = {}) =>
+      this.request<{ project_id?: string }, any>({
+        path: `/api/v1/db/public/shared-base/${sharedBaseUuid}/meta`,
         method: 'GET',
         format: 'json',
         ...params,
       }),
 
     /**
-     * @description Read project details
+     * No description
      *
      * @tags Public
-     * @name SharedBaseGet
-     * @request GET:/api/v1/db/public/shared-base/{sharedBaseUuid}/meta
-     * @response `200` `{ project_id?: string }` OK
+     * @name SharedViewMetaGet
+     * @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
+     * @response `200` `(ViewType & { relatedMetas?: any, client?: string, columns?: ((GridColumnType | FormColumnType | GalleryColumnType) & ColumnType), model?: TableType } & { view?: (FormType | GridType | GalleryType) })` OK
      */
-    sharedBaseGet: (sharedBaseUuid: string, params: RequestParams = {}) =>
-      this.request<{ project_id?: string }, any>({
-        path: `/api/v1/db/public/shared-base/${sharedBaseUuid}/meta`,
+    sharedViewMetaGet: (sharedViewUuid: string, params: RequestParams = {}) =>
+      this.request<
+        ViewType & {
+          relatedMetas?: any;
+          client?: string;
+          columns?: (GridColumnType | FormColumnType | GalleryColumnType) &
+            ColumnType;
+          model?: TableType;
+        } & { view?: FormType | GridType | GalleryType },
+        any
+      >({
+        path: `/api/v1/db/public/shared-view/${sharedViewUuid}/meta`,
         method: 'GET',
         format: 'json',
         ...params,
diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index 6c20ec4089..a87241315d 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -1552,8 +1552,9 @@ class BaseModelSqlv2 {
           switch (colOptions.type) {
             case RelationTypes.BELONGS_TO:
               {
-                const parentCol = await colOptions.getChildColumn();
-                insertObj[parentCol.column_name] =
+                const childCol = await colOptions.getChildColumn();
+                const parentCol = await colOptions.getParentColumn();
+                insertObj[childCol.column_name] =
                   nestedData?.[parentCol.title];
               }
               break;
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index b3e60d58f3..dae305d759 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -4363,28 +4363,22 @@
         "description": ""
       }
     },
-    "/api/v1/db/public/shared-view/{sharedViewUuid}/meta": {
+    "/api/v1/db/public/shared-base/{sharedBaseUuid}/meta": {
       "parameters": [
         {
           "schema": {
             "type": "string"
           },
-          "name": "sharedViewUuid",
+          "name": "sharedBaseUuid",
           "in": "path",
           "required": true
-        },
-        {
-          "schema": {
-            "type": "string"
-          },
-          "in": "header",
-          "name": "xc-password",
-          "description": "Shared view password"
         }
       ],
       "get": {
         "summary": "",
-        "operationId": "public-shared-view-meta-get",
+        "operationId": "public-shared-base-get",
+        "description": "Read project details",
+        "parameters": [],
         "responses": {
           "200": {
             "description": "OK",
@@ -4392,58 +4386,117 @@
               "application/json": {
                 "schema": {
                   "type": "object",
-                  "properties": {}
+                  "properties": {
+                    "project_id": {
+                      "type": "string"
+                    }
+                  }
                 }
-              },
-              "application/xml": {
-                "schema": {}
               }
             }
           }
         },
         "tags": [
           "Public"
-        ],
-        "description": "",
-        "parameters": []
+        ]
       }
     },
-    "/api/v1/db/public/shared-base/{sharedBaseUuid}/meta": {
+    "/api/v1/db/public/shared-view/{sharedViewUuid}/meta": {
       "parameters": [
         {
           "schema": {
             "type": "string"
           },
-          "name": "sharedBaseUuid",
+          "name": "sharedViewUuid",
           "in": "path",
           "required": true
+        },
+        {
+          "schema": {
+            "type": "string"
+          },
+          "in": "header",
+          "name": "xc-password",
+          "description": "Shared view password"
         }
       ],
       "get": {
         "summary": "",
-        "operationId": "public-shared-base-get",
-        "description": "Read project details",
-        "parameters": [],
+        "operationId": "public-shared-view-meta-get",
         "responses": {
           "200": {
             "description": "OK",
             "content": {
               "application/json": {
                 "schema": {
-                  "type": "object",
-                  "properties": {
-                    "project_id": {
-                      "type": "string"
+                  "allOf": [
+                    {
+                      "$ref": "#/components/schemas/View"
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "relatedMetas": {},
+                        "client": {
+                          "type": "string"
+                        },
+                        "columns": {
+                          "allOf": [
+                            {
+                              "oneOf": [
+                                {
+                                  "$ref": "#/components/schemas/GridColumn"
+                                },
+                                {
+                                  "$ref": "#/components/schemas/FormColumn"
+                                },
+                                {
+                                  "$ref": "#/components/schemas/GalleryColumn"
+                                }
+                              ]
+                            },
+                            {
+                              "$ref": "#/components/schemas/Column"
+                            }
+                          ]
+                        },
+                        "model": {
+                          "$ref": "#/components/schemas/Table"
+                        }
+                      }
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "view": {
+                          "oneOf": [
+                            {
+                              "$ref": "#/components/schemas/Form"
+                            },
+                            {
+                              "$ref": "#/components/schemas/Grid"
+                            },
+                            {
+                              "$ref": "#/components/schemas/Gallery"
+                            }
+                          ]
+                        }
+                      }
                     }
-                  }
+                  ]
                 }
+              },
+              "application/xml": {
+                "schema": {}
               }
             }
           }
         },
         "tags": [
           "Public"
-        ]
+        ],
+        "description": "",
+        "parameters": []
       }
     },
     "/api/v1/db/meta/audits/comments": {
@@ -6093,6 +6146,9 @@
           "slug": {
             "type": "string"
           },
+          "uuid": {
+            "type": "string"
+          },
           "show_system_fields": {
             "type": "boolean"
           },