diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index d543d592c7..9fae66cc85 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const columnMeta = inject(ColumnInj, null)!
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 let isDateInvalid = $ref(false)
 
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index fb192cfc8c..d444494c8c 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 let isDateInvalid = $ref(false)
 
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 832ddb7ff4..53e7aa02b1 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, inject, useVModel } from '#imports'
+import { EditModeInj, ReadonlyInj, inject, ref, useVModel } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -12,6 +12,8 @@ const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
+const readonly = inject(ReadonlyInj, ref(false))
+
 const vModel = useVModel(props, 'modelValue', emits)
 
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
@@ -19,7 +21,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readonly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="h-full w-full outline-none bg-transparent"
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index ea39b148f8..0844c73065 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 let isTimeInvalid = $ref(false)
 
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 284abb6be7..d22386a538 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -10,7 +10,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 let isYearInvalid = $ref(false)
 
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index b96f2fba7d..b041945553 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -33,7 +33,7 @@ interface AttachmentProps extends File {
 
 export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
   (updateModelValue: (data: string | Record<string, any>[]) => void) => {
-    const isReadonly = inject(ReadonlyInj, false)
+    const isReadonly = inject(ReadonlyInj, ref(false))
 
     const isPublic = inject(IsPublicInj, ref(false))
 
diff --git a/packages/nc-gui/components/shared-view/Gallery.vue b/packages/nc-gui/components/shared-view/Gallery.vue
index 7d7bbb5e2c..363001839e 100644
--- a/packages/nc-gui/components/shared-view/Gallery.vue
+++ b/packages/nc-gui/components/shared-view/Gallery.vue
@@ -7,7 +7,7 @@ const reloadEventHook = createEventHook()
 
 provide(ReloadViewDataHookInj, reloadEventHook)
 
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 
 provide(MetaInj, meta)
 
diff --git a/packages/nc-gui/components/shared-view/Grid.vue b/packages/nc-gui/components/shared-view/Grid.vue
index 2d51c958a8..03d7068f51 100644
--- a/packages/nc-gui/components/shared-view/Grid.vue
+++ b/packages/nc-gui/components/shared-view/Grid.vue
@@ -28,7 +28,7 @@ useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
 const reloadEventHook = createEventHook()
 
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
 provide(FieldsInj, ref(meta.value?.columns || []))
diff --git a/packages/nc-gui/components/shared-view/Kanban.vue b/packages/nc-gui/components/shared-view/Kanban.vue
index 8dd6b4e96a..f595c85b32 100644
--- a/packages/nc-gui/components/shared-view/Kanban.vue
+++ b/packages/nc-gui/components/shared-view/Kanban.vue
@@ -15,7 +15,7 @@ const reloadEventHook = createEventHook()
 
 provide(ReloadViewDataHookInj, reloadEventHook)
 
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 
 provide(MetaInj, meta)
 
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 2ed187af22..bf562f6e6c 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -8,6 +8,7 @@ import {
   IsFormInj,
   IsLockedInj,
   IsPublicInj,
+  ReadonlyInj,
   computed,
   inject,
   provide,
@@ -47,7 +48,7 @@ provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 provide(ActiveCellInj, active)
 
 if (readOnly?.value) {
-  provide(ReadonlyInj, readOnly.value)
+  provide(ReadonlyInj, readOnly)
 }
 
 const isForm = inject(IsFormInj, ref(false))
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index b20c35f4b6..1ce19714f2 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -58,7 +58,6 @@ provide(IsGalleryInj, ref(true))
 provide(IsGridInj, ref(false))
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
-provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 const fields = inject(FieldsInj, ref([]))
 
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 0099866538..bd1d4622ec 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -33,6 +33,7 @@ import {
   useI18n,
   useMetas,
   useMultiSelect,
+  useRoles,
   useRoute,
   useSmartsheetStoreOrThrow,
   useUIPermission,
@@ -51,12 +52,13 @@ const view = inject(ActiveViewInj, ref())
 // 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, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 const isLocked = inject(IsLockedInj, ref(false))
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
+const { hasRole } = useRoles()
 const { isUIAllowed } = useUIPermission()
 const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
 
@@ -225,8 +227,6 @@ provide(PaginationDataInj, paginationData)
 
 provide(ChangePageInj, changePage)
 
-provide(ReadonlyInj, !hasEditPermission)
-
 const disableUrlOverlay = ref(false)
 provide(CellUrlDisableOverlayInj, disableUrlOverlay)
 
@@ -564,7 +564,12 @@ watch(
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+
+                      <div
+                        v-if="(!readOnly || hasRole('commenter', true) || hasRole('viewer', true)) && !isLocked"
+                        class="nc-expand"
+                        :class="{ 'nc-comment': row.rowMeta?.commentCount }"
+                      >
                         <a-spin v-if="row.rowMeta.saving" class="!flex items-center" />
                         <template v-else>
                           <span
@@ -627,7 +632,7 @@ watch(
                         "
                         :row-index="rowIndex"
                         :active="selected.col === colIndex && selected.row === rowIndex"
-                        @update:edit-enabled="editEnabled = false"
+                        @update:edit-enabled="editEnabled = $event"
                         @save="updateOrSaveRow(row, columnObj.title, state)"
                         @navigate="onNavigate"
                         @cancel="editEnabled = false"
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 4a805a9441..fa9a931619 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -85,8 +85,6 @@ provide(IsGridInj, ref(false))
 
 provide(IsKanbanInj, ref(true))
 
-provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
-
 const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
 
 const fields = inject(FieldsInj, ref([]))
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
new file mode 100644
index 0000000000..def9be7748
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useExpandedFormDetached } from '#imports'
+
+const { states, close } = useExpandedFormDetached()
+
+const shouldClose = (isVisible: boolean, i: number) => {
+  if (!isVisible) close(i)
+}
+</script>
+
+<template>
+  <template v-for="(state, i) of states" :key="`expanded-form-${i}`">
+    <LazySmartsheetExpandedForm
+      v-model="state.isOpen"
+      :row="state.row"
+      :load-row="state.loadRow"
+      :meta="state.meta"
+      :row-id="state.rowId"
+      :state="state.state"
+      :use-meta-fields="state.useMetaFields"
+      :view="state.view"
+      @update:model-value="shouldClose($event, i)"
+      @cancel="close(i)"
+    />
+  </template>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 3dbb20469f..a3acbd571b 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -9,6 +9,8 @@ import {
   MetaInj,
   ReloadRowDataHookInj,
   computedInject,
+  createEventHook,
+  inject,
   message,
   provide,
   ref,
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index db6aad701d..392fa50c43 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -7,6 +7,7 @@ import {
   IsLockedInj,
   MetaInj,
   OpenNewRecordFormHookInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
   ReloadViewMetaHookInj,
   TabMetaInj,
@@ -18,6 +19,7 @@ import {
   useMetas,
   useProvideKanbanViewStore,
   useProvideSmartsheetStore,
+  useUIPermission,
 } from '#imports'
 import type { TabItem } from '~/lib'
 
@@ -25,6 +27,8 @@ const props = defineProps<{
   activeTab: TabItem
 }>()
 
+const { isUIAllowed } = useUIPermission()
+
 const { metas } = useMetas()
 
 const activeTab = toRef(props, 'activeTab')
@@ -55,6 +59,10 @@ provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
 provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
 provide(TabMetaInj, activeTab)
+provide(
+  ReadonlyInj,
+  computed(() => !isUIAllowed('xcDatatableEditable')),
+)
 </script>
 
 <template>
@@ -79,6 +87,8 @@ provide(TabMetaInj, activeTab)
       </Transition>
     </div>
 
+    <LazySmartsheetExpandedFormDetached />
+
     <!-- Lazy loading the sidebar causes issues when deleting elements, i.e. it appears as if multiple elements are removed when they are not -->
     <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
   </div>
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index e7f14fd3d4..8a2eaed14f 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -31,7 +31,7 @@ const row = inject(RowInj)!
 
 const active = inject(ActiveCellInj)!
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index c4f063ea03..82d7cbbb06 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -27,7 +27,7 @@ const reloadRowTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
 const isForm = inject(IsFormInj)
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const isLocked = inject(IsLockedInj)
 
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 5f2530d9f2..789ff99187 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -17,7 +17,7 @@ import {
 
 const { metas, getMeta } = useMetas()
 
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 
 const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>
 
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index 30fdbe9f7f..3464471789 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -28,7 +28,7 @@ const reloadRowTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
 const isForm = inject(IsFormInj)
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const isLocked = inject(IsLockedInj)
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
index fe11b08950..6665dd9187 100644
--- a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
@@ -1,5 +1,15 @@
 <script lang="ts" setup>
-import { ActiveCellInj, IsFormInj, IsLockedInj, ReadonlyInj, inject, ref, useLTARStoreOrThrow, useUIPermission } from '#imports'
+import {
+  ActiveCellInj,
+  IsFormInj,
+  IsLockedInj,
+  ReadonlyInj,
+  inject,
+  ref,
+  useExpandedFormDetached,
+  useLTARStoreOrThrow,
+  useUIPermission,
+} from '#imports'
 
 interface Props {
   value?: string | number | boolean
@@ -14,7 +24,7 @@ const { relatedTableMeta } = useLTARStoreOrThrow()!
 
 const { isUIAllowed } = useUIPermission()
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -22,7 +32,19 @@ const isForm = inject(IsFormInj)!
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const expandedFormDlg = ref(false)
+const { open } = useExpandedFormDetached()
+
+function openExpandedForm() {
+  if (!readOnly && !isLocked.value) {
+    open({
+      isOpen: true,
+      row: { row: item, rowMeta: {}, oldRow: { ...item } },
+      meta: relatedTableMeta.value,
+      loadRow: true,
+      useMetaFields: true,
+    })
+  }
+}
 </script>
 
 <script lang="ts">
@@ -35,24 +57,13 @@ export default {
   <div
     class="chip group py-1 px-2 mr-1 my-1 flex items-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
     :class="{ active }"
-    @click="expandedFormDlg = true"
+    @click="openExpandedForm"
   >
     <span class="name">{{ value }}</span>
 
     <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
-
-    <Suspense>
-      <SmartsheetExpandedForm
-        v-if="!readOnly && !isLocked && expandedFormDlg"
-        v-model="expandedFormDlg"
-        :row="{ row: item, rowMeta: {}, oldRow: { ...item } }"
-        :meta="relatedTableMeta"
-        load-row
-        use-meta-fields
-      />
-    </Suspense>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 507dd9ca3e..2d7ef011a5 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -29,7 +29,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const column = inject(ColumnInj)
 
-const readonly = inject(ReadonlyInj, false)
+const readonly = inject(ReadonlyInj, ref(false))
 
 const {
   childrenList,
@@ -181,7 +181,7 @@ watch(
       <LazySmartsheetExpandedForm
         v-if="expandedFormRow && expandedFormDlg"
         v-model="expandedFormDlg"
-        :row="{ row: expandedFormRow }"
+        :row="{ row: expandedFormRow, oldRow: expandedFormRow, rowMeta: {} }"
         :meta="relatedTableMeta"
         load-row
         use-meta-fields
diff --git a/packages/nc-gui/composables/useDialog/index.ts b/packages/nc-gui/composables/useDialog/index.ts
index efa883c805..2acf55dd1e 100644
--- a/packages/nc-gui/composables/useDialog/index.ts
+++ b/packages/nc-gui/composables/useDialog/index.ts
@@ -1,17 +1,22 @@
-import type { VNode } from '@vue/runtime-dom'
-import { isVNode, render } from '@vue/runtime-dom'
+import type { AppContext, VNode } from '@vue/runtime-dom'
+import { Suspense, isVNode, render } from '@vue/runtime-dom'
 import type { ComponentPublicInstance } from '@vue/runtime-core'
 import type { MaybeRef } from '@vueuse/core'
 import { isClient } from '@vueuse/core'
 import { createEventHook, h, ref, toReactive, tryOnScopeDispose, unref, useNuxtApp, watch } from '#imports'
 
+interface UseDialogOptions {
+  target: MaybeRef<HTMLElement | ComponentPublicInstance>
+  context: Partial<AppContext>
+}
+
 /**
  * Programmatically create a component and attach it to the body (or a specific mount target), like a dialog or modal.
  * This composable is not SSR friendly - it should be used only on the client.
  *
  * @param componentOrVNode The component to create and attach. Can be a VNode or a component definition.
  * @param props The props to pass to the component.
- * @param mountTarget The target to attach the component to. Defaults to the document body
+ * @param options Additional options to use {@see UseDialogOptions}
  *
  * @example
  * import { useDialog } from '#imports'
@@ -39,7 +44,7 @@ import { createEventHook, h, ref, toReactive, tryOnScopeDispose, unref, useNuxtA
 export function useDialog(
   componentOrVNode: any,
   props: NonNullable<Parameters<typeof h>[1]> = {},
-  mountTarget?: MaybeRef<Element | ComponentPublicInstance>,
+  { target, context }: Partial<UseDialogOptions> = {},
 ) {
   if (typeof document === 'undefined' || !isClient) {
     console.warn('[useDialog]: Cannot use outside of browser!')
@@ -54,24 +59,36 @@ export function useDialog(
 
   const vNodeRef = ref<VNode>()
 
-  let _mountTarget = unref(mountTarget)
-
-  _mountTarget = _mountTarget ? ('$el' in _mountTarget ? (_mountTarget.$el as HTMLElement) : _mountTarget) : document.body
-
-  /** if specified, append vnode to mount target instead of document.body */
-  _mountTarget.appendChild(domNode)
+  const mountTarget = ref<HTMLElement>()
 
   /** When props change, we want to re-render the element with the new prop values */
   const stop = watch(
     toReactive(props),
     (reactiveProps) => {
+      const _mountTarget = unref(target)
+
+      /**
+       * If it's a component instance, use the instance's root element (`$el`), otherwise use the element itself
+       * If no target is specified, use the document body
+       */
+      mountTarget.value = _mountTarget
+        ? '$el' in _mountTarget
+          ? (_mountTarget.$el as HTMLElement)
+          : _mountTarget
+        : document.body
+
+      /** if specified, append vnode to mount target instead of document.body */
+      mountTarget.value.appendChild(domNode)
+
+      // if it's a vnode, just render it, otherwise wrap in `h` to create a vnode
       const vNode = isVNode(componentOrVNode) ? componentOrVNode : h(componentOrVNode, reactiveProps)
 
-      vNode.appContext = useNuxtApp().vueApp._context
+      vNode.appContext = { ...useNuxtApp().vueApp._context, ...context }
 
       vNodeRef.value = vNode
 
-      render(vNode, domNode)
+      // wrap in suspense to resolve potential promises
+      render(h(Suspense, vNode), domNode)
 
       if (!isMounted) mountedHook.trigger()
     },
@@ -90,7 +107,7 @@ export function useDialog(
 
       setTimeout(() => {
         try {
-          ;(_mountTarget as HTMLElement)?.removeChild(domNode)
+          ;(mountTarget.value as HTMLElement)?.removeChild(domNode)
         } catch (e) {}
       }, 100)
 
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
new file mode 100644
index 0000000000..2aef11da08
--- /dev/null
+++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
@@ -0,0 +1,44 @@
+import type { TableType, ViewType } from 'nocodb-sdk'
+import { createEventHook, ref, useInjectionState } from '#imports'
+import type { Row } from '~/lib'
+
+interface UseExpandedFormDetachedProps {
+  'isOpen'?: boolean
+  'row': Row | null
+  'state'?: Record<string, any> | null
+  'meta': TableType
+  'loadRow'?: boolean
+  'useMetaFields'?: boolean
+  'rowId'?: string
+  'view'?: ViewType
+  'onCancel'?: Function
+  'onUpdate:modelValue'?: Function
+}
+
+const [setup, use] = useInjectionState(() => {
+  return ref<UseExpandedFormDetachedProps[]>([])
+})
+
+export function useExpandedFormDetached() {
+  let states = use()!
+
+  if (!states) {
+    states = setup()
+  }
+
+  const closeHook = createEventHook<void>()
+
+  const index = ref(-1)
+
+  const open = (props: UseExpandedFormDetachedProps) => {
+    states.value.push(props)
+    index.value = states.value.length - 1
+  }
+
+  const close = (i?: number) => {
+    states.value.splice(i || index.value, 1)
+    if (index.value === i || !i) closeHook.trigger()
+  }
+
+  return { states, open, close, onClose: closeHook.on }
+}
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index bfa8fd4e1f..5ff33adf23 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -12,7 +12,7 @@ import type { ProjectRole, Role, Roles } from '~/lib'
  * * `loadProjectRoles` - a function to load the project roles for a specific project (by id)
  */
 export const useRoles = createSharedComposable(() => {
-  const { user } = useGlobal()
+  const { user, previewAs } = useGlobal()
 
   const { api } = useApi()
 
@@ -57,7 +57,11 @@ export const useRoles = createSharedComposable(() => {
     }
   }
 
-  function hasRole(role: Role | ProjectRole | string) {
+  function hasRole(role: Role | ProjectRole | string, includePreviewRoles = false) {
+    if (previewAs.value && includePreviewRoles) {
+      return previewAs.value === role
+    }
+
     return allRoles.value[role]
   }
 
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index e56434931f..21278b9876 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -20,7 +20,7 @@ export const IsKanbanInj: InjectionKey<Ref<boolean>> = Symbol('is-kanban-injecti
 export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injection')
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
-export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
+export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injection')
 /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
 export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index 90104d00e4..cdd6ada9c3 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -127,7 +127,7 @@ hooks.hook('page:finish', () => {
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>
 
-        <LazyGeneralLanguage v-if="!signedIn" class="nc-lang-btn" />
+        <LazyGeneralLanguage v-if="!signedIn && !route.params.projectId" class="nc-lang-btn" />
       </a-tooltip>
 
       <div class="w-full h-full overflow-hidden">
diff --git a/packages/nc-gui/pages/[projectType]/view/[viewId].vue b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
index 987eb4bec7..0801ea6c89 100644
--- a/packages/nc-gui/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
@@ -1,16 +1,5 @@
 <script setup lang="ts">
-import {
-  ReadonlyInj,
-  ReloadViewDataHookInj,
-  createEventHook,
-  definePageMeta,
-  extractSdkResponseErrorMsg,
-  message,
-  provide,
-  ref,
-  useRoute,
-  useSharedView,
-} from '#imports'
+import { definePageMeta, extractSdkResponseErrorMsg, message, ref, useRoute, useSharedView } from '#imports'
 
 definePageMeta({
   public: true,
@@ -20,11 +9,6 @@ definePageMeta({
 
 const route = useRoute()
 
-const reloadEventHook = createEventHook()
-
-provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, true)
-
 const { loadSharedView } = useSharedView()
 
 const showPassword = ref(false)
diff --git a/scripts/cypress/integration/common/1a_table_operations.js b/scripts/cypress/integration/common/1a_table_operations.js
index 962e206eec..3891da4841 100644
--- a/scripts/cypress/integration/common/1a_table_operations.js
+++ b/scripts/cypress/integration/common/1a_table_operations.js
@@ -43,33 +43,37 @@ export const genTest = (apiType, dbType) => {
       return cy.get("tbody > tr").eq(row).find("td.ant-table-cell").eq(col);
     };
 
-    it("Open Audit tab", () => {
-      // http://localhost:8080/api/v1/db/meta/projects/p_bxp57hmks0n5o2/audits?offset=0&limit=25
-      cy.intercept("/**/audits?offset=*&limit=*").as("waitForPageLoad");
-
-      // mainPage.navigationDraw(mainPage.AUDIT).click();
-      settingsPage.openMenu(settingsPage.AUDIT);
-      // wait for column headers to appear
-      //
-      cy.get("thead > tr > th.ant-table-cell").should("have.length", 5);
-
-      cy.wait("@waitForPageLoad");
-
-      // Audit table entries
-      //  [Header] Operation Type, Operation Sub Type, Description, User, Created
-      //  [0] TABLE, DELETED, delete table table-x, user@nocodb.com, ...
-      //  [1] TABLE, Created, created table table-x, user@nocodb.com, ...
-
-      getAuditCell(0, 0).contains("TABLE").should("exist");
-      getAuditCell(0, 1).contains("DELETED").should("exist");
-      getAuditCell(0, 3).contains("user@nocodb.com").should("exist");
-
-      getAuditCell(1, 0).contains("TABLE").should("exist");
-      getAuditCell(1, 1).contains("CREATED").should("exist");
-      getAuditCell(1, 3).contains("user@nocodb.com").should("exist");
-
-      settingsPage.closeMenu();
-    });
+    describe("Check Audit Tab Cells", () => {
+      it("Open Audit tab", () => {
+        // http://localhost:8080/api/v1/db/meta/projects/p_bxp57hmks0n5o2/audits?offset=0&limit=25
+        cy.intercept("/**/audits?offset=*&limit=*").as("waitForPageLoad");
+
+        // mainPage.navigationDraw(mainPage.AUDIT).click();
+        settingsPage.openMenu(settingsPage.AUDIT);
+        // wait for column headers to appear
+        //
+        cy.get("thead > tr > th.ant-table-cell").should("have.length", 5);
+
+        cy.wait("@waitForPageLoad");
+
+        // Audit table entries
+        //  [Header] Operation Type, Operation Sub Type, Description, User, Created
+        //  [0] TABLE, DELETED, delete table table-x, user@nocodb.com, ...
+        //  [1] TABLE, Created, created table table-x, user@nocodb.com, ...
+
+        getAuditCell(0, 0).contains("TABLE").should("exist");
+        getAuditCell(0, 1).contains("DELETED").should("exist");
+        getAuditCell(0, 3).contains("user@nocodb.com").should("exist");
+
+        getAuditCell(1, 0).contains("TABLE").should("exist");
+        getAuditCell(1, 1).contains("CREATED").should("exist");
+        getAuditCell(1, 3).contains("user@nocodb.com").should("exist");
+      });
+
+      after(() => {
+        settingsPage.closeMenu();
+      })
+    })
 
     it("Table Rename operation", () => {
       cy.get(".nc-project-tree-tbl-City").should("exist").click();
diff --git a/scripts/cypress/integration/common/1b_table_column_operations.js b/scripts/cypress/integration/common/1b_table_column_operations.js
index 5c0bab0826..0e6bdc78f6 100644
--- a/scripts/cypress/integration/common/1b_table_column_operations.js
+++ b/scripts/cypress/integration/common/1b_table_column_operations.js
@@ -36,11 +36,6 @@ export const genTest = (apiType, dbType) => {
     const randVal = "Test@1234.com";
     const updatedRandVal = "Updated@1234.com";
 
-    // before(() => {
-    //     cy.restoreLocalStorage();
-    //     cy.createTable(name);
-    // })
-
     beforeEach(() => {
       cy.restoreLocalStorage();
     });
@@ -49,11 +44,6 @@ export const genTest = (apiType, dbType) => {
       cy.saveLocalStorage();
     });
 
-    // // delete table
-    // after(() => {
-    //     cy.deleteTable(name, dbType);
-    // });
-
     it("Create Table Column", () => {
       cy.createTable(name);
       mainPage.addColumn(colName, name);
@@ -138,8 +128,9 @@ export const genTest = (apiType, dbType) => {
         .find(".nc-row-no")
         .should("exist")
         .eq(0)
-        .trigger("mouseover", { force: true });
-      cy.get(".nc-row-expand").click({ force: true });
+        .trigger("mouseover", { force: true })
+        .get(".nc-row-expand")
+        .click({ force: true });
 
       // wait for page render to complete
       cy.get('button:contains("Save row"):visible').should("exist");
diff --git a/scripts/cypress/integration/common/2b_table_with_m2m_column.js b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
index bfc7735b92..55cd26636a 100644
--- a/scripts/cypress/integration/common/2b_table_with_m2m_column.js
+++ b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
@@ -49,8 +49,7 @@ export const genTest = (apiType, dbType) => {
         .getCell("Film List", 1)
         .should("exist")
         .trigger("mouseover")
-        .click();
-      cy.get(".nc-action-icon").eq(0).should("exist").click({ force: true });
+        .get(".nc-action-icon").eq(0).should("exist").click({ force: true });
 
       // GUI-v2 Kludge:
       // validations
@@ -73,22 +72,22 @@ export const genTest = (apiType, dbType) => {
         .then(() => {
           // Link record form validation
           cy.getActiveModal(".nc-modal-link-record")
-            .contains("Link record")
-            .should("exist");
+              .contains("Link record")
+              .should("exist");
           cy.getActiveModal(".nc-modal-link-record")
-            .find(".nc-reload")
-            .should("exist");
+              .find(".nc-reload")
+              .should("exist");
           cy.getActiveModal(".nc-modal-link-record")
-            .find('button:contains("Add new record")')
-            .should("exist");
+              .find('button:contains("Add new record")')
+              .should("exist");
           cy.getActiveModal(".nc-modal-link-record")
-            .find(".ant-card")
-            .eq(0)
-            .contains("ACE GOLDFINGER")
-            .should("exist");
+              .find(".ant-card")
+              .eq(0)
+              .contains("ACE GOLDFINGER")
+              .should("exist");
           cy.getActiveModal(".nc-modal-link-record")
-            .find("button.ant-modal-close")
-            .click();
+              .find("button.ant-modal-close")
+              .click();
         });
     });
 
@@ -98,8 +97,7 @@ export const genTest = (apiType, dbType) => {
         .getCell("Film List", 1)
         .should("exist")
         .trigger("mouseover")
-        .click();
-      cy.get(".nc-action-icon").eq(0).should("exist").click({ force: true });
+        .get(".nc-action-icon").eq(0).should("exist").click({ force: true });
 
       cy.getActiveModal(".nc-modal-child-list")
         .find(".ant-card")