diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 793a7529e2..88ada17810 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -8,10 +8,10 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
-    AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
@@ -20,7 +20,6 @@ declare module '@vue/runtime-core' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
@@ -46,20 +45,17 @@ declare module '@vue/runtime-core' {
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
-    ASpace: typeof import('ant-design-vue/es')['Space']
+    ASkeletonImage: typeof import('ant-design-vue/es')['SkeletonImage']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
-    ATableColumnGroup: typeof import('ant-design-vue/es')['TableColumnGroup']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
-    ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/nc-gui-v2/components/cell/Attachment.vue b/packages/nc-gui-v2/components/cell/Attachment.vue
deleted file mode 100644
index 52180b6cbb..0000000000
--- a/packages/nc-gui-v2/components/cell/Attachment.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<script setup lang="ts">
-import { useToast } from 'vue-toastification'
-import { inject, ref, useProject, watchEffect } from '#imports'
-import { useNuxtApp } from '#app'
-import { ColumnInj, MetaInj } from '~/context'
-import { NOCO } from '~/lib'
-import { isImage } from '~/utils'
-import MaterialPlusIcon from '~icons/mdi/plus'
-import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
-
-interface Props {
-  modelValue: string | any[] | null
-}
-
-const { modelValue } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
-
-const isPublicForm = inject<boolean>('isPublicForm', false)
-const isForm = inject<boolean>('isForm', false)
-const meta = inject(MetaInj)
-const column = inject(ColumnInj)
-const editEnabled = inject<boolean>('editEnabled', false)
-
-const localFilesState = reactive([])
-const attachments = ref([])
-const uploading = ref(false)
-const fileInput = ref<HTMLInputElement>()
-
-const { $api } = useNuxtApp()
-const { project } = useProject()
-const toast = useToast()
-
-watchEffect(() => {
-  if (modelValue) {
-    attachments.value = ((typeof modelValue === 'string' ? JSON.parse(modelValue) : modelValue) || []).filter(Boolean)
-  }
-})
-
-const selectImage = (file: any, i: unknown) => {
-  // todo: implement
-}
-
-const openUrl = (url: string, target = '_blank') => {
-  window.open(url, target)
-}
-
-const addFile = () => {
-  fileInput.value?.click()
-}
-
-const onFileSelection = async (e: unknown) => {
-  // if (this.isPublicGrid) {
-  //   return
-  // }
-  // if (!this.$refs.file.files || !this.$refs.file.files.length) {
-  //   return
-  // }
-
-  // if (this.isPublicForm) {
-  //   this.localFilesState.push(...Array.from(this.$refs.file.files).map((file) => {
-  //     const res = { file, title: file.name }
-  //     if (isImage(file.name, file.mimetype)) {
-  //       const reader = new FileReader()
-  //       reader.onload = (e) => {
-  //         this.$set(res, 'data', e.target.result)
-  //       }
-  //       reader.readAsDataURL(file)
-  //     }
-  //     return res
-  //   }))
-  //
-  //   this.$emit('input', this.localFilesState.map(f => f.file))
-  //   return
-  // }
-
-  // todo : move to com
-  uploading.value = true
-  const newAttachments = []
-  for (const file of fileInput.value?.files ?? []) {
-    try {
-      const data = await $api.storage.upload(
-        {
-          path: [NOCO, project.value.title, meta?.value?.title, column?.title].join('/'),
-        },
-        {
-          files: file,
-          json: '{}',
-        },
-      )
-      newAttachments.push(...data)
-    } catch (e: any) {
-      toast.error(e.message || 'Some internal error occurred')
-      uploading.value = false
-      return
-    }
-  }
-  uploading.value = false
-  emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
-
-  // this.$emit('input', JSON.stringify(this.localState))
-  // this.$emit('update')
-}
-</script>
-
-<template>
-  <div class="main h-100">
-    <div class="d-flex align-center img-container">
-      <div class="d-flex no-overflow">
-        <div
-          v-for="(item, i) in isPublicForm ? localFilesState : attachments"
-          :key="item.url || item.title"
-          class="thumbnail align-center justify-center d-flex"
-        >
-          <!--          <v-tooltip bottom> -->
-          <!--            <template #activator="{ on }"> -->
-          <!--              <v-img
-                          v-if="isImage(item.title, item.mimetype)"
-                          lazy-src="https://via.placeholder.com/60.png?text=Loading..."
-                          alt="#"
-                          max-height="99px"
-                          contain
-                          :src="item.url || item.data"
-                          v-on="on"
-                          @click="selectImage(item.url || item.data, i)"
-                        >             -->
-          <img
-            v-if="isImage(item.title, item.mimetype)"
-            alt="#"
-            style="max-height: 30px; max-width: 30px"
-            :src="item.url || item.data"
-            @click="selectImage(item.url || item.data, i)"
-          />
-          <!--                <template #placeholder> -->
-          <!--                  <v-skeleton-loader type="image" :height="active ? 33 : 22" :width="active ? 33 : 22" /> -->
-          <!--                </template> -->
-          <v-icon v-else-if="item.icon" :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')">
-            {{ item.icon }}
-          </v-icon>
-          <v-icon v-else :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')"> mdi-file </v-icon>
-          <!--            </template> -->
-          <!--            <span>{{ item.title }}</span> -->
-          <!--          </v-tooltip> -->
-        </div>
-      </div>
-      <!--      todo: hide or toggle based on ancestor -->
-      <div class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
-        <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner"> mdi-loading mdi-spin</v-icon>
-        <!--        <v-btn v-else-if="isForm" outlined x-small color="" text class="nc-attachment-add-btn">
-          <v-icon x-small color="" icon="MaterialPlusIcon"> mdi-plus </v-icon>
-          Attachment
-        </v-btn>
-        <v-icon  small color="primary nc-attachment-add-icon">
-          mdi-plus
-        </v-icon> -->
-        <MaterialPlusIcon />
-      </div>
-
-      <v-spacer />
-
-      <MaterialArrowExpandIcon @click.stop="dialog = true" />
-      <!--      <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true"> mdi-arrow-expand </v-icon> -->
-    </div>
-
-    <input ref="fileInput" type="file" multiple class="d-none" @change="onFileSelection" />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.thumbnail {
-  height: 30px;
-  width: 30px;
-  margin: 2px;
-  border-radius: 4px;
-
-  img {
-    max-height: 33px;
-    max-width: 33px;
-  }
-}
-
-.expand-icon {
-  margin-left: 8px;
-  border-radius: 2px;
-  transition: 0.3s background-color;
-}
-
-.expand-icon:hover {
-  background-color: var(--v-primary-lighten4);
-}
-
-/*.img-container {
-  margin: 0 -2px;
-}
-
-.no-overflow {
-  overflow: hidden;
-}
-
-.add {
-  transition: 0.2s background-color;
-  !*background-color: #666666ee;*!
-  border-radius: 4px;
-  height: 33px;
-  margin: 5px 2px;
-}
-
-.add:hover {
-  !*background-color: #66666699;*!
-}
-
-.thumbnail {
-  height: 99px;
-  width: 99px;
-  margin: 2px;
-  border-radius: 4px;
-}
-
-.thumbnail img {
-  !*max-height: 33px;*!
-  max-width: 99px;
-}
-
-.main {
-  min-height: 20px;
-  position: relative;
-  height: auto;
-}
-
-.expand-icon {
-  margin-left: 8px;
-  border-radius: 2px;
-  !*opacity: 0;*!
-  transition: 0.3s background-color;
-}
-
-.expand-icon:hover {
-  !*opacity: 1;*!
-  background-color: var(--v-primary-lighten4);
-}
-
-.modal-thumbnail img {
-  height: 50px;
-  max-width: 100%;
-  border-radius: 4px;
-}
-
-.modal-thumbnail {
-  position: relative;
-  margin: 10px 10px;
-}
-
-.remove-icon {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-}
-
-.modal-thumbnail-card {
-  .download-icon {
-    position: absolute;
-    bottom: 5px;
-    right: 5px;
-    opacity: 0;
-    transition: 0.4s opacity;
-  }
-
-  &:hover .download-icon {
-    opacity: 1;
-  }
-}
-
-.image-overlay-container {
-  max-height: 100vh;
-  overflow-y: auto;
-  position: relative;
-}
-
-.image-overlay-container .close-icon {
-  position: fixed;
-  top: 15px;
-  right: 15px;
-}
-
-.overlay-thumbnail {
-  transition: 0.4s transform, 0.4s opacity;
-  opacity: 0.5;
-}
-
-.overlay-thumbnail.active {
-  transform: scale(1.4);
-  opacity: 1;
-}
-
-.overlay-thumbnail:hover {
-  opacity: 1;
-}
-
-.modal-title {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-}
-
-.modal-thumbnail-card {
-  transition: 0.4s transform;
-}
-
-.modal-thumbnail-card:hover {
-  transform: scale(1.05);
-}
-
-.drop-overlay {
-  z-index: 5;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 5px;
-  background: #aaaaaa44;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
-
-.expand-icon {
-  opacity: 0;
-  transition: 0.4s opacity;
-}
-
-.main:hover .expand-icon {
-  opacity: 1;
-}*/
-</style>
diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index 84db28f405..fe99200482 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { computed, inject, ref, useVModel } from '#imports'
+import { ColumnInj, EditModeInj } from '~/context'
 
-const { modelValue: value } = defineProps<Props>()
+interface Props {
+  modelValue: number
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
-interface Props {
-  modelValue: number
-}
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emit)
 
 const currencyMeta = computed(() => {
   return {
@@ -29,22 +27,20 @@ const currencyMeta = computed(() => {
 })
 const currency = computed(() => {
   try {
-    return isNaN(value)
-      ? value
+    return isNaN(vModel.value)
+      ? vModel.value
       : new Intl.NumberFormat(currencyMeta?.value?.currency_locale || 'en-US', {
           style: 'currency',
           currency: currencyMeta?.value?.currency_code || 'USD',
-        }).format(value)
+        }).format(vModel.value)
   } catch (e) {
-    return value
+    return vModel.value
   }
 })
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
-  <span v-else-if="value">{{ currency }}</span>
+  <input v-if="editEnabled" ref="root" v-model="vModel" />
+  <span v-else-if="vModel">{{ currency }}</span>
   <span v-else />
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index f743c5d3f5..33407812bd 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed } from '#imports'
+import { computed, inject, useVModel } from '#imports'
 import { isEmail } from '~/utils'
+import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 interface Emits {
@@ -14,13 +15,13 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const root = ref<HTMLInputElement>()
-
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
 const validEmail = computed(() => isEmail(vModel.value))
+
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 58355b5c20..6e029c67de 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number
@@ -13,21 +14,17 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 54ea12127b..3c9e5dd9d4 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
+
 interface Props {
   modelValue: number
 }
@@ -11,15 +14,11 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = useVModel(props, 'modelValue', emit)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el?.focus()
 
 function onKeyDown(evt: KeyboardEvent) {
   return evt.key === '.' && evt.preventDefault()
@@ -29,7 +28,7 @@ function onKeyDown(evt: KeyboardEvent) {
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
index 9f9e2e00e8..acf815fc54 100644
--- a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
+++ b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue'
-import { inject } from '#imports'
+import { computed, inject } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any>
@@ -11,7 +12,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue', 'cancel'])
 
-const editEnabled = inject('editEnabled')
+const editEnabled = inject(EditModeInj)
 
 let expand = $ref(false)
 
@@ -19,7 +20,7 @@ let isValid = $ref(true)
 
 let error = $ref()
 
-const localState = computed({
+const vModel = computed({
   get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue),
   set: (val) => {
     if (props.isForm) {
@@ -30,7 +31,7 @@ const localState = computed({
 
 function save() {
   expand = false
-  emits('update:modelValue', JSON.stringify(props.modelValue))
+  emits('update:modelValue', JSON.stringify(vModel.value))
 }
 
 function validate(n: boolean, e: any) {
@@ -69,14 +70,14 @@ export default {
     </div>
     <MonacoJsonObjectEditor
       v-if="expand"
-      v-model="localState"
+      v-model="vModel"
       class="text-left caption"
       style="width: 300px; min-height: min(600px, 80vh); min-width: 100%"
       @validate="validate"
     />
     <MonacoJsonObjectEditor
       v-else
-      v-model="localState"
+      v-model="vModel"
       class="text-left caption"
       style="width: 300px; min-height: 200px; min-width: 100%"
       @validate="validate"
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index e66f11c5de..fffc9f347c 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 
@@ -24,56 +24,6 @@ const localState = computed({
     emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(','))
   },
 })
-
-/* import colors from '@/components/project/spreadsheet/helpers/colors'
-
-export default {
-  name: 'SetListCheckboxCell',
-  props: {
-    value: String,
-    column: Object,
-    values: Array,
-  },
-  data() {},
-  computed: {
-    colors() {
-      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
-    },
-    localState: {
-      get() {
-        return (this.value && this.value.split(',')) || []
-      },
-      set(val) {
-        this.$emit('input', val.join(','))
-        this.$emit('update')
-      },
-    },
-    setValues() {
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map((v) => v.replace(/^'|'$/g, ''))
-      }
-      return this.values || []
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-    const event = document.createEvent('MouseEvents')
-    event.initMouseEvent('mousedown', true, true, window)
-    this.$el.dispatchEvent(event)
-  },
-} */
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 112e26f4b7..66570ef61c 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -12,45 +12,18 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
-const localState = computed({
+const vModel = computed({
   get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
   set: (val) => emit('update:modelValue', val),
 })
 
 const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
-
-/* import colors from '@/mixins/colors'
-
-export default {
-  name: 'EnumListEditableCell',
-  mixins: [colors],
-
-  props: {
-    value: String,
-    column: Object,
-    isForm: Boolean,
-  },
-  computed: {
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-} */
 </script>
 
 <template>
-  <v-select v-model="localState" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
+  <v-select v-model="vModel" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
     <!--    v-on="parentListeners"
     <template #selection="{ item }">
       <div
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 653842a105..396b169969 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,28 +1,23 @@
 <script setup lang="ts">
-import { inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: any
+  modelValue: string
 }
 
 const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject<boolean>('editEnabled', false)
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const onSetRef = (el: HTMLInputElement) => {
-  el.focus()
-}
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" />
   <span v-else>{{ vModel }}</span>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index e02de3d753..bd7427b760 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue?: string
@@ -9,19 +10,17 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const onSetRef = (el: HTMLInputElement) => {
-  el.focus()
-}
+const focus = (el: HTMLTextAreaElement) => el?.focus()
 </script>
 
 <template>
   <textarea
     v-if="editEnabled"
-    :ref="onSetRef"
+    :ref="focus"
     v-model="vModel"
     rows="4"
     class="h-full w-full min-h-[60px] outline-none"
@@ -30,9 +29,3 @@ const onSetRef = (el: HTMLInputElement) => {
   />
   <span v-else>{{ vModel }}</span>
 </template>
-
-<style scoped>
-textarea:focus {
-  @apply ring-transparent;
-}
-</style>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 760f93955a..46bb61dd3e 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref } from '#imports'
-import { ColumnInj } from '~/context'
-import { isValidURL } from '~/utils/urlUtils'
+import { computed, inject, onMounted, ref } from '#imports'
+import { ColumnInj, EditModeInj } from '~/context'
+import { isValidURL } from '~/utils'
 
 interface Props {
   modelValue: string
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = computed({
   get: () => value,
@@ -26,21 +26,15 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const root = ref<HTMLInputElement>()
-
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" />
   <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
   <span v-else>{{ value }}</span>
 </template>
 
-<style scoped></style>
-
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
new file mode 100644
index 0000000000..cc92d6daf5
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import { useAttachmentCell } from './utils'
+import { isImage } from '~/utils'
+import { computed, onClickOutside, ref, watch } from '#imports'
+import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
+import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
+import MdiCloseCircle from '~icons/mdi/close-circle'
+
+const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
+
+const carouselRef = ref()
+
+const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
+
+/** navigate to previous image on button click */
+onKeyDown(
+  (e) => ['Left', 'ArrowLeft', 'A'].includes(e.key),
+  () => {
+    if (carouselRef.value) carouselRef.value.prev()
+  },
+)
+
+/** navigate to next image on button click */
+onKeyDown(
+  (e) => ['Right', 'ArrowRight', 'D'].includes(e.key),
+  () => {
+    if (carouselRef.value) carouselRef.value.next()
+  },
+)
+
+/** set our selected image when slide changes */
+function onSlideChange(index: number) {
+  selectedImage.value = imageItems.value[index]
+}
+
+/** set our carousel ref and move to initial slide  */
+const setCarouselRef = (el: Element) => {
+  carouselRef.value = el
+
+  carouselRef.value?.goTo(
+    imageItems.value.findIndex((item) => item === selectedImage.value),
+    true,
+  )
+}
+
+/** close overlay view when clicking outside of image */
+onClickOutside(carouselRef, () => {
+  selectedImage.value = false
+})
+</script>
+
+<template>
+  <general-overlay v-model="selectedImage">
+    <template v-if="selectedImage">
+      <div class="overflow-hidden p-12 text-center relative">
+        <div class="text-white group absolute top-5 right-5">
+          <MdiCloseCircle class="group-hover:text-red-500 cursor-pointer text-4xl" @click.stop="selectedImage = false" />
+        </div>
+
+        <div
+          class="select-none group hover:ring active:ring-pink-500 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
+          @click.stop="downloadFile(selectedImage)"
+        >
+          <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
+        </div>
+
+        <a-carousel
+          v-if="!!selectedImage"
+          :ref="setCarouselRef"
+          dots-class="slick-dots slick-thumb"
+          :after-change="onSlideChange"
+          arrows
+        >
+          <template #prevArrow>
+            <div class="custom-slick-arrow left-2 z-1">
+              <MaterialSymbolsArrowCircleLeftRounded class="bg-white rounded-full" />
+            </div>
+          </template>
+
+          <template #nextArrow>
+            <div class="custom-slick-arrow !right-2 z-1">
+              <MaterialSymbolsArrowCircleRightRounded class="bg-white rounded-full" />
+            </div>
+          </template>
+
+          <template #customPaging="props">
+            <a>
+              <nuxt-img
+                class="!block"
+                :alt="imageItems[props.i].title || `#${props.i}`"
+                :src="imageItems[props.i].url || imageItems[props.i].data"
+              />
+            </a>
+          </template>
+
+          <div v-for="item of imageItems" :key="item.url">
+            <div
+              :style="{ backgroundImage: `url('${item.url}')` }"
+              class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
+            />
+          </div>
+        </a-carousel>
+      </div>
+    </template>
+  </general-overlay>
+</template>
+
+<style scoped>
+.ant-carousel :deep(.slick-dots) {
+  @apply relative mt-4;
+}
+
+.ant-carousel :deep(.slick-slide) {
+  @apply w-full;
+}
+
+.ant-carousel :deep(.slick-slide img) {
+  @apply border-1 m-auto;
+}
+
+.ant-carousel :deep(.slick-thumb) {
+  @apply bottom-2;
+}
+
+.ant-carousel :deep(.slick-thumb li) {
+  @apply w-[60px] h-[45px];
+}
+
+.ant-carousel :deep(.slick-thumb li img) {
+  @apply w-full h-full block;
+  filter: grayscale(100%);
+}
+
+.ant-carousel :deep .slick-thumb li.slick-active img {
+  filter: grayscale(0%);
+}
+
+.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
+  @apply text-4xl text-white hover:text-primary active:text-pink-500 opacity-100 cursor-pointer z-1;
+}
+.ant-carousel :deep(.custom-slick-arrow:before) {
+  display: none;
+}
+.ant-carousel :deep(.custom-slick-arrow:hover) {
+  opacity: 0.5;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
new file mode 100644
index 0000000000..5e7e2b70ac
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import { useAttachmentCell } from './utils'
+import { useSortable } from './sort'
+import { ref, useDropZone, useUIPermission } from '#imports'
+import { isImage, openLink } from '~/utils'
+import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
+import MdiCloseCircle from '~icons/mdi/close-circle'
+import MdiDownload from '~icons/mdi/download'
+import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+
+const { isUIAllowed } = useUIPermission()
+
+const {
+  open,
+  isLoading,
+  isPublicGrid,
+  isForm,
+  isReadonly,
+  visibleItems,
+  modalVisible,
+  column,
+  FileIcon,
+  removeFile,
+  onDrop,
+  downloadFile,
+  updateModelValue,
+  selectedImage,
+} = useAttachmentCell()!
+
+// todo: replace placeholder var
+const isLocked = ref(false)
+
+const dropZoneRef = ref<HTMLDivElement>()
+
+const sortableRef = ref<HTMLDivElement>()
+
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
+
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+onKeyDown('Escape', () => {
+  modalVisible.value = false
+  isOverDropZone.value = false
+})
+</script>
+
+<template>
+  <a-modal v-model:visible="modalVisible" class="nc-attachment-modal" width="80%" :footer="null">
+    <template #title>
+      <div class="flex gap-4">
+        <div
+          v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
+          class="nc-attach-file group"
+          @click="open"
+        >
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+          Attach File
+        </div>
+
+        <div class="flex items-center gap-2">
+          <div v-if="isReadonly" class="text-gray-400">[Readonly]</div>
+          Viewing Attachments of
+          <div class="font-semibold underline">{{ column.title }}</div>
+        </div>
+      </div>
+    </template>
+
+    <div ref="dropZoneRef">
+      <template v-if="!isReadonly && !dragging">
+        <general-overlay
+          v-model="isOverDropZone"
+          inline
+          class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+        >
+          <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
+          <div class="text-white text-3xl">Drop here</div>
+        </general-overlay>
+      </template>
+
+      <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
+        <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
+          <a-card class="nc-attachment-item group">
+            <a-tooltip v-if="!isReadonly">
+              <template #title> Remove File </template>
+
+              <MdiCloseCircle
+                v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
+                class="nc-attachment-remove"
+                @click.stop="removeFile(i)"
+              />
+            </a-tooltip>
+
+            <a-tooltip placement="bottom">
+              <template #title> Download file </template>
+
+              <div class="nc-attachment-download group-hover:(opacity-100)">
+                <MdiDownload @click.stop="downloadFile(item)" />
+              </div>
+            </a-tooltip>
+
+            <div
+              :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
+              class="nc-attachment h-full w-full flex items-center justify-center"
+            >
+              <div
+                v-if="isImage(item.title, item.mimetype)"
+                :style="{ backgroundImage: `url('${item.url}')` }"
+                class="w-full h-full bg-contain bg-center bg-no-repeat"
+                @click.stop="() => (selectedImage = item) && (modalVisible = false)"
+              />
+
+              <component
+                :is="FileIcon(item.icon)"
+                v-else-if="item.icon"
+                height="150"
+                width="150"
+                @click.stop="openLink(item.url || item.data)"
+              />
+
+              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" />
+            </div>
+          </a-card>
+
+          <div class="truncate" :title="item.title">
+            {{ item.title }}
+          </div>
+        </div>
+
+        <div v-if="isLoading" class="flex flex-col gap-1">
+          <a-card class="nc-attachment-item group">
+            <div class="nc-attachment h-full w-full flex items-center justify-center">
+              <a-skeleton-image class />
+            </div>
+          </a-card>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<style lang="scss">
+.nc-attachment-modal {
+  .nc-attach-file {
+    @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
+    @apply hover:(bg-primary/10 text-primary ring);
+    @apply active:(ring-pink-500 bg-primary/20);
+  }
+
+  .nc-attachment-item {
+    @apply !h-2/3 !min-h-[200px] flex items-center justify-center relative;
+
+    @supports (-moz-appearance: none) {
+      @apply hover:border-0;
+    }
+
+    &::after {
+      @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
+      content: '';
+    }
+
+    @supports (-moz-appearance: none) {
+      &:hover::after {
+        @apply ring shadow transform scale-103;
+      }
+
+      &:active::after {
+        @apply ring ring-pink-500 shadow transform scale-103;
+      }
+    }
+  }
+
+  .nc-attachment-download {
+    @apply bg-white absolute bottom-2 right-2;
+    @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
+    @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
+    @apply active:(ring border-0 ring-pink-500);
+  }
+
+  .nc-attachment-remove {
+    @apply absolute top-2 right-2 bg-white;
+    @apply hover:(ring ring-red-500);
+    @apply cursor-pointer rounded-full border-2;
+    @apply active:(ring border-0 ring-red-500);
+  }
+
+  .ant-card-body {
+    @apply !p-2 w-full h-full;
+  }
+
+  .ant-modal-body {
+    @apply !p-0;
+  }
+
+  .ghost,
+  .ghost > * {
+    @apply !pointer-events-none;
+  }
+
+  .dragging {
+    .nc-attachment-item {
+      @apply !pointer-events-none;
+    }
+
+    .ant-tooltip {
+      @apply !hidden;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
new file mode 100644
index 0000000000..d629504a5c
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
+import { useProvideAttachmentCell } from './utils'
+import Modal from './Modal.vue'
+import { useSortable } from './sort'
+import Carousel from './Carousel.vue'
+import { onMounted, ref, useDropZone, watch } from '#imports'
+import { isImage, openLink } from '~/utils'
+import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
+import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
+import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
+import MdiReload from '~icons/mdi/reload'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+
+interface Props {
+  modelValue: string | Record<string, any>[] | null
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: string | Record<string, any>): void
+}
+
+const { modelValue } = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const dropZoneRef = ref<HTMLTableDataCellElement>()
+
+const sortableRef = ref<HTMLDivElement>()
+
+const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
+  useProvideAttachmentCell(updateModelValue)
+
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
+
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+/** on new value, reparse our stored attachments */
+watch(
+  () => modelValue,
+  (nextModel) => {
+    if (nextModel) {
+      attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+    }
+  },
+  { immediate: true },
+)
+
+/** updates attachments array for autosave */
+function updateModelValue(data: string | Record<string, any>) {
+  emits('update:modelValue', typeof data !== 'string' ? JSON.stringify(data) : data)
+}
+
+/** Close modal on escape press, disable dropzone as well */
+onKeyDown('Escape', () => {
+  modalVisible.value = false
+  isOverDropZone.value = false
+})
+
+/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
+onMounted(() => {
+  if (typeof document !== 'undefined') {
+    dropZoneRef.value = document.querySelector(`td[data-col="${column.id}"]`) as HTMLTableDataCellElement
+  }
+})
+</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 && dropZoneRef">
+      <general-overlay
+        v-model="isOverDropZone"
+        inline
+        :target="`td[data-col='${column.id}']`"
+        class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+      >
+        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+      </general-overlay>
+    </template>
+
+    <div
+      v-if="!isReadonly"
+      :class="{ 'mx-auto px-4': !visibleItems.length }"
+      class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
+      @click.stop="open"
+    >
+      <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+
+      <a-tooltip v-else placement="bottom">
+        <template #title> Click or drop a file into cell </template>
+
+        <div class="flex items-center gap-2">
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+
+          <div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div>
+        </div>
+      </a-tooltip>
+    </div>
+
+    <template v-if="visibleItems.length">
+      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 p-1 scrollbar-thin-primary">
+        <div
+          v-for="(item, i) of visibleItems"
+          :id="item.url"
+          :key="item.url || item.title"
+          style="flex: 1 1 50px"
+          :class="isImage(item.title, item.mimetype) ? '' : 'border-1 rounded'"
+          class="nc-attachment flex items-center justify-center"
+        >
+          <a-tooltip placement="bottom">
+            <template #title>
+              <div class="text-center w-full">{{ item.title }}</div>
+            </template>
+
+            <nuxt-img
+              v-if="isImage(item.title, item.mimetype)"
+              placeholder
+              width="150"
+              height="150"
+              :alt="item.title || `#${i}`"
+              :src="item.url || item.data"
+              class="ring-1 ring-gray-300 rounded"
+              @click="selectedImage = item"
+            />
+
+            <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
+
+            <IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
+          </a-tooltip>
+        </div>
+      </div>
+
+      <div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+
+        <a-tooltip v-else placement="bottom">
+          <template #title> View attachments </template>
+
+          <MaterialArrowExpandIcon
+            class="select-none transform group-hover:(text-pink-500 scale-120)"
+            @click.stop="modalVisible = true"
+          />
+        </a-tooltip>
+      </div>
+    </template>
+
+    <Modal />
+  </div>
+</template>
+
+<style lang="scss">
+.nc-cell {
+  .nc-attachment-cell {
+    .ghost,
+    .ghost > * {
+      @apply !pointer-events-none;
+    }
+
+    .dragging {
+      .ant-tooltip {
+        @apply !hidden;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/sort.ts b/packages/nc-gui-v2/components/cell/attachment/sort.ts
new file mode 100644
index 0000000000..c7931205b4
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/sort.ts
@@ -0,0 +1,65 @@
+import type { SortableEvent } from 'sortablejs'
+import Sortable from 'sortablejs'
+import type { MaybeRef } from '@vueuse/core'
+import { watchPostEffect } from '@vue/runtime-core'
+import { unref } from '#imports'
+
+export function useSortable(
+  element: MaybeRef<HTMLElement | undefined>,
+  items: MaybeRef<any[]>,
+  updateModelValue: (data: string | Record<string, any>[]) => void,
+  isReadonly: MaybeRef<boolean> = false,
+) {
+  let dragging = $ref(false)
+
+  function onSortStart(evt: SortableEvent) {
+    evt.stopImmediatePropagation()
+    evt.preventDefault()
+    dragging = true
+  }
+
+  async function onSortEnd(evt: SortableEvent) {
+    evt.stopImmediatePropagation()
+    evt.preventDefault()
+    dragging = false
+
+    const _items = unref(items)
+
+    if (_items.length < 2) return
+
+    const { newIndex = 0, oldIndex = 0 } = evt
+
+    if (newIndex === oldIndex) return
+
+    _items.splice(newIndex, 0, ..._items.splice(oldIndex, 1))
+
+    updateModelValue(_items)
+  }
+
+  let sortable: Sortable
+
+  // todo: replace with vuedraggable
+  const initSortable = (el: HTMLElement) => {
+    sortable = new Sortable(el, {
+      handle: '.nc-attachment',
+      ghostClass: 'ghost',
+      onStart: onSortStart,
+      onEnd: onSortEnd,
+    })
+  }
+
+  watchPostEffect((onCleanup) => {
+    const _element = unref(element)
+
+    onCleanup(() => {
+      if (_element && sortable) sortable.destroy()
+    })
+
+    if (_element && !unref(isReadonly)) initSortable(_element)
+  })
+
+  return {
+    dragging: $$(dragging),
+    initSortable,
+  }
+}
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
new file mode 100644
index 0000000000..e97275449a
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -0,0 +1,157 @@
+import { notification } 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 { isImage } from '~/utils'
+import { NOCO } from '~/lib'
+import MdiPdfBox from '~icons/mdi/pdf-box'
+import MdiFileWordOutline from '~icons/mdi/file-word-outline'
+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'
+
+export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
+  (updateModelValue: (data: string | Record<string, any>[]) => void) => {
+    const isReadonly = inject(ReadonlyInj, false)
+
+    const isPublicForm = inject('isPublicForm', false)
+
+    const isForm = inject('isForm', false)
+
+    // todo: replace placeholder var
+    const isPublicGrid = $ref(false)
+
+    const meta = inject(MetaInj)!
+
+    const column = inject(ColumnInj)!
+
+    const editEnabled = inject(EditModeInj, ref(false))
+
+    const storedFiles = ref<{ title: string; file: File }[]>([])
+
+    const attachments = ref<File[]>([])
+
+    const modalVisible = ref(false)
+
+    const selectedImage = ref()
+
+    const { project } = useProject()
+
+    const { api, isLoading } = useApi()
+
+    const { files, open } = useFileDialog()
+
+    /** remove a file from our stored attachments (either locally stored or saved ones) */
+    function removeFile(i: number) {
+      if (isPublicForm) {
+        storedFiles.value.splice(i, 1)
+
+        updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+      } else {
+        attachments.value.splice(i, 1)
+        updateModelValue(attachments.value)
+      }
+    }
+
+    /** save a file on select / drop, either locally (in-memory) or in the db */
+    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
+          }),
+        )
+
+        return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+      }
+
+      const newAttachments = []
+
+      for (const file of selectedFiles) {
+        try {
+          const data = await api.storage.upload(
+            {
+              path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
+            },
+            {
+              files: file,
+              json: '{}',
+            },
+          )
+
+          newAttachments.push(...data)
+        } catch (e: any) {
+          notification.error({
+            message: e.message || 'Some internal error occurred',
+          })
+        }
+      }
+
+      updateModelValue([...attachments.value, ...newAttachments])
+    }
+
+    /** save files on drop */
+    async function onDrop(droppedFiles: File[] | null) {
+      if (droppedFiles) {
+        // set files
+        await onFileSelect(droppedFiles)
+      }
+    }
+
+    /** download a file */
+    async function downloadFile(item: Record<string, any>) {
+      FileSaver.saveAs(item.url || item.data, item.title)
+    }
+
+    const FileIcon = (icon: string) => {
+      switch (icon) {
+        case 'mdi-pdf-box':
+          return MdiPdfBox
+        case 'mdi-file-word-outline':
+          return MdiFileWordOutline
+        case 'mdi-file-powerpoint-box':
+          return MdiFilePowerpointBox
+        case 'mdi-file-excel-outline':
+          return MdiFileExcelOutline
+        default:
+          return IcOutlineInsertDriveFile
+      }
+    }
+
+    /** 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[]))
+
+    watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
+
+    return {
+      attachments,
+      storedFiles,
+      visibleItems,
+      isPublicForm,
+      isForm,
+      isPublicGrid,
+      isReadonly,
+      meta,
+      column,
+      editEnabled,
+      isLoading,
+      api,
+      open,
+      onDrop,
+      modalVisible,
+      FileIcon,
+      removeFile,
+      downloadFile,
+      updateModelValue,
+      selectedImage,
+    }
+  },
+  'attachmentCell',
+)
diff --git a/packages/nc-gui-v2/components/general/Overlay.vue b/packages/nc-gui-v2/components/general/Overlay.vue
new file mode 100644
index 0000000000..cebc59432e
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/Overlay.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import type { TeleportProps } from '@vue/runtime-core'
+import { useVModel, watch } from '#imports'
+
+interface Props {
+  modelValue?: any
+  /** if true, overlay will use `position: absolute` instead of `position: fixed` */
+  inline?: boolean
+  /** target to teleport to */
+  target?: TeleportProps['to']
+  teleportDisabled?: TeleportProps['disabled']
+  transition?: boolean
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'close'): void
+  (event: 'open'): void
+}
+
+const { transition = true, teleportDisabled = false, inline = false, target, ...rest } = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const vModel = useVModel(rest, 'modelValue', emits)
+
+onKeyDown('Escape', () => {
+  vModel.value = false
+})
+
+watch(vModel, (nextVal) => {
+  if (nextVal) emits('open')
+  else emits('close')
+})
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'">
+    <div
+      v-bind="$attrs"
+      :class="[
+        vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
+        inline ? 'absolute' : 'fixed',
+        transition ? 'transition-opacity duration-200 ease-in-out' : '',
+      ]"
+      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+    >
+      <slot :is-open="vModel" />
+    </div>
+  </teleport>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 44ff43c52f..e41018b4d9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -1,30 +1,25 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from 'vue'
-import { computed, useColumn } from '#imports'
+import { useColumn, useVModel } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
   column: ColumnType
   modelValue: any
-  editEnabled: boolean
 }
 
-const { column, modelValue: value, editEnabled } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', value: any): void
+}
 
-const emit = defineEmits(['update:modelValue'])
+const { column, ...rest } = defineProps<Props>()
 
-provide(ColumnInj, column)
+const emit = defineEmits<Emits>()
 
-provide(
-  'editEnabled',
-  computed(() => editEnabled),
-)
+provide(ColumnInj, column)
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(rest, 'modelValue', emit)
 
 const {
   isURL,
@@ -53,155 +48,27 @@ const {
 
 <template>
   <div class="nc-cell" @keydown.stop.left @keydown.stop.right @keydown.stop.up @keydown.stop.down>
-    <!--
-todo :
- JSONCell
--->
-
-    <!--    <RatingCell -->
-    <!--      v-if="isRating" -->
-    <!--      /> -->
-    <!--      v-model="localState"
-          :active="active"
-          :is-form="isForm"
-          :column="column"
-          :is-public-grid="isPublic && !isForm"
-          :is-public-form="isPublic && isForm"
-          :is-locked="isLocked"
-          v-on="$listeners"
-        /> -->
-
-    <!--    <DurationCell -->
-    <!--      v-else-if="isDuration" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :active="active" -->
-    <!--      :is-form="isForm" -->
-    <!--      :column="column" -->
-    <!--      :is-locked="isLocked" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <DatePickerCell -->
-    <!--      v-else-if="isDate" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <TimePickerCell -->
-    <!--      v-else-if="isTime" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--      @save="$emit('save')" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <DateTimePickerCell -->
-    <!--      v-else-if="isDateTime" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      ignore-focus -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <EnumCell -->
-    <!--      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-    <!--    <EnumListCell -->
-    <!--      v-else-if="isEnum" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      :is-form="isForm"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      :column="column"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      v-on="parentListeners"&ndash;&gt; -->
-    <!-- &lt;!&ndash;    />&ndash;&gt; -->
-
-    <!--    <JsonEditableCell -->
-    <!--      v-else-if="isJSON" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :is-form="isForm" -->
-    <!--      v-on="parentListeners" -->
-    <!--      @input="$emit('save')" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <SetListEditableCell -->
-    <!--      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-    <!--    <SetListCell -->
-    <!--      v-else-if="isSet" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <UrlCell v-else-if="isURL" -->
-    <!--                     /> -->
-    <!-- &lt;!&ndash;                     v-model="localState" v-on="parentListeners" &ndash;&gt; -->
-    <!-- &lt;!&ndash;    />&ndash;&gt; -->
-
-    <CellTextArea v-if="isTextArea" v-model="localState" />
-    <!--      v-model="localState"
-          :is-form="isForm"
-          v-on="parentListeners"
-        /> -->
-    <CellCheckbox v-else-if="isBoolean" v-model="localState" />
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      :is-form="isForm" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <CellAttachment v-else-if="isAttachment" v-model="localState" />
-    <CellSingleSelect v-else-if="isSingleSelect" v-model="localState" />
-    <CellMultiSelect v-else-if="isMultiSelect" v-model="localState" />
-    <CellDatePicker v-else-if="isDate" v-model="localState" />
-    <CellYearPicker v-else-if="isYear" v-model="localState" />
-    <CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
-    <CellTimePicker v-else-if="isTime" v-model="localState" />
-    <CellRating v-else-if="isRating" v-model="localState" />
-    <!--      v-model="localState"
-          :active="active"
-          :db-alias="dbAlias"
-          :meta="meta"
-          :is-form="isForm"
-          :column="column"
-          :is-public-grid="isPublic && !isForm"
-          :is-public-form="isPublic && isForm"
-          :view-id="viewId"
-          :is-locked="isLocked"
-          v-on="$listeners"
-        /> -->
-    <CellDuration v-else-if="isDuration" v-model="localState" />
-    <CellEmail v-else-if="isEmail" v-model="localState" />
-    <CellUrl v-else-if="isURL" v-model="localState" />
-    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="localState" />
-    <!-- v-on="parentListeners"
-        />
-    -->
-    <CellCurrency v-else-if="isCurrency" v-model="localState" />
-    <CellDecimal v-else-if="isDecimal" v-model="localState" />
-    <CellInteger v-else-if="isInt" v-model="localState" />
-    <CellFloat v-else-if="isFloat" v-model="localState" />
-    <CellText v-else-if="isString" v-model="localState" />
-    <!-- v-on="parentListeners"
-        />
-    -->
-    <CellPercent v-else-if="isPercent" v-model="localState" />
-    <CellText v-else v-model="localState" />
-    <!--  v-on="$listeners"   <span v-if="hint" class="nc-hint">{{ hint }}</span> -->
-
-    <!--    <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" /> -->
+    <CellTextArea v-if="isTextArea" v-model="vModel" />
+    <CellCheckbox v-else-if="isBoolean" v-model="vModel" />
+    <CellAttachment v-else-if="isAttachment" v-model="vModel" />
+    <CellSingleSelect v-else-if="isSingleSelect" v-model="vModel" />
+    <CellMultiSelect v-else-if="isMultiSelect" v-model="vModel" />
+    <CellDatePicker v-else-if="isDate" v-model="vModel" />
+    <CellYearPicker v-else-if="isYear" v-model="vModel" />
+    <CellDateTimePicker v-else-if="isDateTime" v-model="vModel" />
+    <CellTimePicker v-else-if="isTime" v-model="vModel" />
+    <CellRating v-else-if="isRating" v-model="vModel" />
+    <CellDuration v-else-if="isDuration" v-model="vModel" />
+    <CellEmail v-else-if="isEmail" v-model="vModel" />
+    <CellUrl v-else-if="isURL" v-model="vModel" />
+    <CellPhoneNumber v-else-if="isPhoneNumber" 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" />
+    <CellText v-else v-model="vModel" />
   </div>
 </template>
 
@@ -222,7 +89,9 @@ div {
 }
 
 .nc-cell {
-  position: relative;
+  @apply relative h-full;
+  width: inherit;
+  display: inherit;
 }
 
 .nc-locked-overlay {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index bae3fbbf1e..e4fb52653d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -12,6 +12,7 @@ import {
 import {
   ActiveViewInj,
   ChangePageInj,
+  EditModeInj,
   FieldsInj,
   IsFormInj,
   IsGridInj,
@@ -44,6 +45,7 @@ provide(IsFormInj, false)
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
+provide(EditModeInj, editEnabled)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 reloadViewDataHook?.on(() => {
@@ -142,68 +144,6 @@ if (meta) useProvideColumnCreateStore(meta)
               @click="selectCell(rowIndex, colIndex)"
               @dblclick="editEnabled = true"
             >
-              <!--          @contextmenu=" -->
-              <!--            showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) -->
-              <!--          " -->
-              <!--        > -->
-              <!--          <virtual-cell -->
-              <!--            v-if="isVirtualCol(columnObj)" -->
-              <!--            :password="password" -->
-              <!--            :is-public="isPublicView" -->
-              <!--            :metas="metas" -->
-              <!--            :is-locked="isLocked" -->
-              <!--            :column="columnObj" -->
-              <!--            :row="rowObj" -->
-              <!--            :nodes="nodes" -->
-              <!--            :meta="meta" -->
-              <!--            :api="api" -->
-              <!--            :active="selected.col === col && selected.row === row" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            :is-new="rowMeta.new" -->
-              <!--            v-on="$listeners" -->
-              <!--            @updateCol=" -->
-              <!--              (...args) => -->
-              <!--                updateCol( -->
-              <!--                  ...args, -->
-              <!--                  columnObj.bt -->
-              <!--                    && meta.columns.find( -->
-              <!--                      (c) => c.column_name === columnObj.bt.column_name, -->
-              <!--                    ), -->
-              <!--                  col, -->
-              <!--                  row, -->
-              <!--                ) -->
-              <!--            " -->
-              <!--            @saveRow="onCellValueChange(col, row, columnObj, true)" -->
-              <!--          /> -->
-
-              <!--          <editable-cell -->
-              <!--            v-else-if=" -->
-              <!--              ((isPkAvail || rowMeta.new) -->
-              <!--                && !isView -->
-              <!--                && !isLocked -->
-              <!--                && !isPublicView -->
-              <!--                && editEnabled.col === col -->
-              <!--                && editEnabled.row === row) -->
-              <!--                || enableEditable(columnObj) -->
-              <!--            " -->
-              <!--            v-model="rowObj[columnObj.title]" -->
-              <!--            :column="columnObj" -->
-              <!--            :meta="meta" -->
-              <!--            :active="selected.col === col && selected.row === row" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            :db-alias="nodes.dbAlias" -->
-              <!--            :is-locked="isLocked" -->
-              <!--            :is-public="isPublicView" -->
-              <!--            :view-id="viewId" -->
-              <!--            @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" -->
-              <!--            @cancel="editEnabled = {}" -->
-              <!--            @update="onCellValueChange(col, row, columnObj, false)" -->
-              <!--            @blur="onCellValueChange(col, row, columnObj, true)" -->
-              <!--            @input="unsaved = true" -->
-              <!--            @navigateToNext="navigateToNext" -->
-              <!--            @navigateToPrev="navigateToPrev" -->
-              <!--          /> -->
-
               <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
 
               <SmartsheetCell
@@ -213,20 +153,6 @@ if (meta) useProvideColumnCreateStore(meta)
                 :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
                 @update:model-value="updateRowProperty(row, columnObj.title)"
               />
-
-              <!--          <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
-              <!-- :selected="selected.col === col && selected.row === row" -->
-              <!--        :is-locked="isLocked" -->
-              <!--            :column="columnObj" -->
-              <!--            :meta="meta" -->
-              <!--            :db-alias="nodes.dbAlias" -->
-              <!--            :value="rowObj[columnObj.title]" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            @enableedit=" -->
-              <!--              makeSelected(col, row); -->
-              <!--              makeEditable(col, row, columnObj.ai, rowMeta); -->
-              <!--            " -->
-              <!--          /> -->
             </td>
           </tr>
         </tbody>
@@ -249,10 +175,6 @@ if (meta) useProvideColumnCreateStore(meta)
     height: 41px !important;
     position: relative;
     padding: 0 5px;
-
-    & > * {
-      @apply flex align-center h-auto;
-    }
     overflow: hidden;
   }
 
@@ -287,7 +209,7 @@ if (meta) useProvideColumnCreateStore(meta)
 
   // todo: replace with css variable
   td.active::after {
-    border: 2px solid #0040bc; /*var(--v-primary-lighten1);*/
+    @apply border-2 border-solid border-primary;
   }
 
   td.active::before {
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 450d737b29..ef794e1431 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -28,23 +28,30 @@ export function useViewColumns(
     if (!meta || !view) return
 
     let order = 1
-    if (view?.value?.id) {
-      const data = await $api.dbViewColumn.list(view?.value?.id as string)
-      const fieldById: Record<string, any> = data.reduce((o: Record<string, any>, f: any) => {
-        f.show = !!f.show
+    if (view.value?.id) {
+      const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
+
+      const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
+        curr.show = !!curr.show
+
         return {
-          ...o,
-          [f.fk_column_id as string]: f,
+          ...acc,
+          [curr.fk_column_id]: curr,
         }
       }, {})
-      fields.value = meta.value?.columns
-        ?.map((c) => ({
-          title: c.title,
-          fk_column_id: c.id,
-          ...(fieldById[c.id as string] ? fieldById[c.id as string] : {}),
-          order: (fieldById[c.id as string] && fieldById[c.id as string].order) || order++,
-          system: isSystemColumn(fieldById[c.fk_model_id as string]?.type as ColumnType),
-        }))
+
+      fields.value = meta.value.columns
+        ?.map((column) => {
+          const currentColumnField = fieldById[column.id!] || {}
+
+          return {
+            title: column.title,
+            fk_column_id: column.id,
+            ...currentColumnField,
+            order: currentColumnField.order || order++,
+            system: isSystemColumn(currentColumnField.type || false),
+          }
+        })
         .sort((a, b) => a.order - b.order)
     } else if (isPublic) {
       fields.value = meta.value.columns as any
@@ -52,32 +59,37 @@ export function useViewColumns(
   }
 
   const showAll = async () => {
-    await $api.dbView.showAllColumn(view?.value?.id as string)
+    if (view?.value?.id) await $api.dbView.showAllColumn(view.value.id)
+
     await loadViewColumns()
     reloadData?.()
   }
   const hideAll = async () => {
-    await $api.dbView.hideAllColumn(view?.value?.id as string)
+    if (view?.value?.id) await $api.dbView.hideAllColumn(view.value.id)
+
     await loadViewColumns()
     reloadData?.()
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
-    if (field.id) {
-      await $api.dbViewColumn.update(view?.value?.id as string, field.id, field)
-    } else {
-      if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view?.value?.id as string, field)) as any
+    if (field.id && view?.value?.id) {
+      await $api.dbViewColumn.update(view.value.id, field.id, field)
+    } else if (view?.value?.id) {
+      if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view.value.id, field)) as any
     }
+
     reloadData?.()
   }
 
   const metaColumnById = computed(() => {
-    return meta?.value?.columns?.reduce<Record<string, ColumnType>>((o: Record<string, any>, c: any) => {
-      return {
-        ...o,
-        [c.id]: c,
-      }
-    }, {})
+    return (
+      meta.value.columns?.reduce<Record<string, ColumnType>>((acc, curr) => {
+        return {
+          ...acc,
+          [curr.id!]: curr,
+        }
+      }, {}) || {}
+    )
   })
 
   const showSystemFields = computed({
@@ -86,28 +98,27 @@ export function useViewColumns(
       return (view?.value as any)?.show_system_fields || false
     },
     set(v) {
-      if (view?.value) {
-        $api.dbView.update(
-          view?.value?.id as string,
-          {
-            // todo: update swagger
-            show_system_fields: v,
-          } as any,
-        )
+      if (view?.value?.id) {
+        $api.dbView.update(view.value.id, {
+          // todo: update swagger
+          show_system_fields: v,
+        } as any)
         ;(view.value as any).show_system_fields = v
       }
     },
   })
 
   const filteredFieldList = computed(() => {
-    return fields.value?.filter((field) => {
-      // hide system columns if not enabled
-      if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id as string])) {
-        return false
-      }
+    return (
+      fields.value?.filter((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())
-    })
+        return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
+      }) || {}
+    )
   })
 
   const sortedAndFilteredFields = computed<ColumnType[]>(() => {
@@ -117,15 +128,15 @@ export function useViewColumns(
         if (
           !showSystemFields.value &&
           metaColumnById.value &&
-          metaColumnById?.value?.[c.fk_column_id as string] &&
-          isSystemColumn(metaColumnById?.value?.[c.fk_column_id as string])
+          metaColumnById?.value?.[c.fk_column_id!] &&
+          isSystemColumn(metaColumnById.value?.[c.fk_column_id!])
         ) {
           return false
         }
         return c.show
       })
-      ?.sort((c1, c2) => c1.order - c2.order)
-      ?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) || []) as ColumnType[]
+      ?.sort((a, b) => a.order - b.order)
+      ?.map((c) => metaColumnById?.value?.[c.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 d5213f89b0..809c3ee5cd 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -21,3 +21,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
 
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
+export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 745d4136e7..18ff65ac2b 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -8,7 +8,7 @@ import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  modules: ['@vueuse/nuxt', 'nuxt-windicss'],
+  modules: ['@vueuse/nuxt', 'nuxt-windicss', '@nuxt/image-edge'],
 
   ssr: false,
 
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index c4bf6ed57a..082fb125b8 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -6,9 +6,9 @@
     "": {
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
-        "@vueuse/core": "^8.7.5",
-        "@vueuse/integrations": "^8.9.1",
-        "ant-design-vue": "^3.1.0-rc.6",
+        "@vueuse/core": "^9.0.2",
+        "@vueuse/integrations": "^9.0.2",
+        "ant-design-vue": "^3.2.10",
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "jwt-decode": "^3.1.2",
@@ -35,14 +35,16 @@
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+        "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
+        "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
         "@vitejs/plugin-vue": "^2.3.3",
         "@vitest/ui": "^0.18.0",
         "@vue/compiler-sfc": "^3.2.37",
         "@vue/test-utils": "^2.0.2",
-        "@vueuse/nuxt": "^8.6.0",
+        "@vueuse/nuxt": "^9.0.2",
         "@windicss/plugin-animations": "^1.0.9",
         "@windicss/plugin-question-mark": "^0.1.1",
         "@windicss/plugin-scrollbar": "^1.2.3",
@@ -1563,29 +1565,52 @@
       "integrity": "sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==",
       "dev": true
     },
+    "node_modules/@nuxt/image-edge": {
+      "version": "1.0.0-27657146.da85542",
+      "resolved": "https://registry.npmjs.org/@nuxt/image-edge/-/image-edge-1.0.0-27657146.da85542.tgz",
+      "integrity": "sha512-iMDB1KR4D/2smyShDTJ2Jf1FMj42elYOWDpkHgFZvSIf7eZcg8TVGW45lTjlp7VbQ/TgC1I0kYZBEFdc1AGXrw==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.0.0-rc.4",
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "h3": "^0.7.10",
+        "image-meta": "^0.1.1",
+        "node-fetch-native": "^0.1.4",
+        "ohash": "^0.1.0",
+        "pathe": "^0.3.2",
+        "ufo": "^0.8.5"
+      },
+      "engines": {
+        "node": ">=14.20.0"
+      },
+      "optionalDependencies": {
+        "ipx": "^0.9.10"
+      }
+    },
     "node_modules/@nuxt/kit": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.4.tgz",
-      "integrity": "sha512-ZBSeHFy3fPUx0equCtyP6eVUAZQWwRqTp2YnHSFqM5+yhN5aTGo8gBlfwttVBr4yhFBpGFRHhQj/iNPqrCeTnQ==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.6.tgz",
+      "integrity": "sha512-+lxSd6dSWlAzMXfGOPcY4856xnMF1Ck1rycFUZ+K2QYiDXphq/fiW2eMaWLVvqgPyL2Box2WzVDZJ6C5ceptcw==",
       "dev": true,
       "dependencies": {
-        "@nuxt/schema": "^3.0.0-rc.4",
-        "c12": "^0.2.7",
+        "@nuxt/schema": "^3.0.0-rc.6",
+        "c12": "^0.2.8",
         "consola": "^2.15.3",
         "defu": "^6.0.0",
         "globby": "^13.1.2",
         "hash-sum": "^2.0.0",
         "ignore": "^5.2.0",
-        "jiti": "^1.13.0",
+        "jiti": "^1.14.0",
         "knitwork": "^0.1.2",
         "lodash.template": "^4.5.0",
-        "mlly": "^0.5.2",
-        "pathe": "^0.3.0",
-        "pkg-types": "^0.3.2",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3",
         "scule": "^0.2.1",
         "semver": "^7.3.7",
         "unctx": "^1.1.4",
-        "unimport": "^0.2.7",
+        "unimport": "^0.4.5",
         "untyped": "^0.4.4"
       },
       "engines": {
@@ -1593,27 +1618,27 @@
       }
     },
     "node_modules/@nuxt/kit/node_modules/unimport": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-      "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+      "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.2.1",
         "escape-string-regexp": "^5.0.0",
         "fast-glob": "^3.2.11",
-        "local-pkg": "^0.4.1",
+        "local-pkg": "^0.4.2",
         "magic-string": "^0.26.2",
-        "mlly": "^0.5.3",
-        "pathe": "^0.3.0",
+        "mlly": "^0.5.5",
+        "pathe": "^0.3.2",
         "scule": "^0.2.1",
         "strip-literal": "^0.4.0",
-        "unplugin": "^0.7.0"
+        "unplugin": "^0.7.2"
       }
     },
     "node_modules/@nuxt/kit/node_modules/unplugin": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-      "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+      "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.7.1",
@@ -1643,48 +1668,48 @@
       }
     },
     "node_modules/@nuxt/schema": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.4.tgz",
-      "integrity": "sha512-5yjfKvPJ/NboevQYZLyO1SS9nJW6KHtdd7Ei61D19gYGtnN+aOpxOnUX08A1rZMb3G2Cw5JRxVeF9+AfBYefJg==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.6.tgz",
+      "integrity": "sha512-BcD5YtWRhn+jU2DlzuI1TeITFeOt5x6qm2KeaU/d5jzJ0oZDzmZwKsAimLtRbHwyU6/kKa+zFbK6pp5obm1XLg==",
       "dev": true,
       "dependencies": {
-        "c12": "^0.2.7",
+        "c12": "^0.2.8",
         "create-require": "^1.1.1",
         "defu": "^6.0.0",
-        "jiti": "^1.13.0",
-        "pathe": "^0.3.0",
+        "jiti": "^1.14.0",
+        "pathe": "^0.3.2",
         "postcss-import-resolver": "^2.0.0",
         "scule": "^0.2.1",
         "std-env": "^3.1.1",
-        "ufo": "^0.8.4",
-        "unimport": "^0.2.7"
+        "ufo": "^0.8.5",
+        "unimport": "^0.4.5"
       },
       "engines": {
         "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@nuxt/schema/node_modules/unimport": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-      "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+      "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.2.1",
         "escape-string-regexp": "^5.0.0",
         "fast-glob": "^3.2.11",
-        "local-pkg": "^0.4.1",
+        "local-pkg": "^0.4.2",
         "magic-string": "^0.26.2",
-        "mlly": "^0.5.3",
-        "pathe": "^0.3.0",
+        "mlly": "^0.5.5",
+        "pathe": "^0.3.2",
         "scule": "^0.2.1",
         "strip-literal": "^0.4.0",
-        "unplugin": "^0.7.0"
+        "unplugin": "^0.7.2"
       }
     },
     "node_modules/@nuxt/schema/node_modules/unplugin": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-      "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+      "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.7.1",
@@ -2265,6 +2290,12 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "node_modules/@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -2367,9 +2398,9 @@
       "dev": true
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
-      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
+      "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.30.0",
@@ -2830,58 +2861,23 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.7.5.tgz",
-      "integrity": "sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.7.5",
-        "@vueuse/shared": "8.7.5",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.7.5.tgz",
-      "integrity": "sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.0.2.tgz",
+      "integrity": "sha512-kOIqaQPSs7OSByWg1ulEKRUJbsq3FmbJiUr0RhEKpt3O1Uhl4DrDj85DUbQBABVYgPvSaY6AE/fP3/FOcRIOoQ==",
       "dependencies": {
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -2913,12 +2909,12 @@
       }
     },
     "node_modules/@vueuse/integrations": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-8.9.1.tgz",
-      "integrity": "sha512-xeApqTnMBUzlrpJacCdaFqUfTEf7NZUgHKJTsK9I41ISf2+pywgwpfjVk6KVSKk+GuE2MB1c945lul5jA5IcwA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-9.0.2.tgz",
+      "integrity": "sha512-Z7xwgjSaG7FeBDfFhwXbspLrLKdvjFkI/AfDJ/jz9bez73nkg3Pqnz7jD4rZ6o3lOBJ6cNLizCF5E2qEXtSLJw==",
       "dependencies": {
-        "@vueuse/core": "8.9.1",
-        "@vueuse/shared": "8.9.1",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "funding": {
@@ -2969,67 +2965,60 @@
         }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/core": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.1.tgz",
-      "integrity": "sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.9.1",
-        "@vueuse/shared": "8.9.1",
-        "vue-demi": "*"
+    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
+      "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.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
       },
       "peerDependenciesMeta": {
         "@vue/composition-api": {
           "optional": true
-        },
-        "vue": {
-          "optional": true
         }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/metadata": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.1.tgz",
-      "integrity": "sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA==",
+    "node_modules/@vueuse/metadata": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.0.2.tgz",
+      "integrity": "sha512-TRh+TNUYXiodatSAxd0xZc7sh4RfktVVgNFIN7TCQXKyancbCAcWfHvKfgdlX8LcqSBxKoHVa90n0XdUbboTkw==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/shared": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.1.tgz",
-      "integrity": "sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==",
+    "node_modules/@vueuse/nuxt": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-9.0.2.tgz",
+      "integrity": "sha512-1NYT3DC58fZ0YxFGaGZ4V0uAd3E4YMMnalKd1K1HBvrW3exB9zcBW52spKMspZL9dnNlxyv3TauH52b94fMxqg==",
+      "dev": true,
       "dependencies": {
+        "@nuxt/kit": "^3.0.0-rc.6",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/metadata": "9.0.2",
+        "local-pkg": "^0.4.2",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
+    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
       "version": "0.13.2",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
       "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -3051,35 +3040,21 @@
         }
       }
     },
-    "node_modules/@vueuse/metadata": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.7.5.tgz",
-      "integrity": "sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/nuxt": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-8.7.5.tgz",
-      "integrity": "sha512-e+JSiNCdWaKyTiBtM856uNJaXeCw8Ka423AGsuvq+D+GXXQe0RhHzqqLS6pQutjWuftNRBRCOiITOzhtjMP+gA==",
-      "dev": true,
+    "node_modules/@vueuse/shared": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.0.2.tgz",
+      "integrity": "sha512-KwBDefK2ljLESpt0ffe2w8EGUCb3IaMfTzeytB/uHHjHOGOEIHLHHyn8W2C48uGQEvoe5iwaW4Bfp8cRUM6IFA==",
       "dependencies": {
-        "@nuxt/kit": "^3.0.0-rc.4",
-        "@vueuse/core": "8.7.5",
-        "@vueuse/metadata": "8.7.5",
-        "local-pkg": "^0.4.1",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
-      "dev": true,
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -4016,26 +3991,20 @@
       }
     },
     "node_modules/c12": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.7.tgz",
-      "integrity": "sha512-ih1nuHbZ6Ltf8Wss96JH6YvKIW5+9+uLAA08LUQAoDrFPGSyvPvQv/QBIRE+dCBWOK4PcwH0ylRkSa9huI1Acw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.8.tgz",
+      "integrity": "sha512-JomSyVwGnqndRdVVW6SGnHUeHIfJFQNe/4zPFK6zLKPQm8US+hNr4kZP7xeNnzjn3jnQUsBbPdT85fm8K5Pr4A==",
       "dev": true,
       "dependencies": {
         "defu": "^6.0.0",
-        "dotenv": "^16.0.0",
+        "dotenv": "^16.0.1",
         "gittar": "^0.1.1",
-        "jiti": "^1.12.14",
-        "mlly": "^0.5.1",
-        "pathe": "^0.2.0",
-        "rc9": "^1.2.1"
+        "jiti": "^1.14.0",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "rc9": "^1.2.2"
       }
     },
-    "node_modules/c12/node_modules/pathe": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-      "dev": true
-    },
     "node_modules/cac": {
       "version": "6.7.12",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.12.tgz",
@@ -4550,6 +4519,20 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4568,6 +4551,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -4890,6 +4884,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/cssnano": {
       "version": "5.1.12",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
@@ -5131,6 +5132,22 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
@@ -5143,6 +5160,16 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -6910,6 +6937,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -7501,6 +7538,13 @@
         "git-up": "^4.0.0"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/gittar": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/gittar/-/gittar-0.1.1.tgz",
@@ -7967,6 +8011,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-meta": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.1.1.tgz",
+      "integrity": "sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.18.0"
+      }
+    },
     "node_modules/image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -8147,6 +8200,29 @@
         "url": "https://opencollective.com/ioredis"
       }
     },
+    "node_modules/ipx": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-0.9.10.tgz",
+      "integrity": "sha512-HymTmXe2QBiPMgsJg1EQtUYgTXfIB9ha7j8tHCQqYGDS7bTYMNWyq/fBdI3S+wc9ic+hbPlTim+uf8QgZcEykQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "destr": "^1.1.1",
+        "etag": "^1.8.1",
+        "image-meta": "^0.1.1",
+        "listhen": "^0.2.13",
+        "ohmyfetch": "^0.4.18",
+        "pathe": "^0.3.2",
+        "sharp": "^0.30.7",
+        "ufo": "^0.8.5",
+        "xss": "^1.0.13"
+      },
+      "bin": {
+        "ipx": "bin/ipx.mjs"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -9021,9 +9097,9 @@
       }
     },
     "node_modules/local-pkg": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.1.tgz",
-      "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz",
+      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
       "dev": true,
       "engines": {
         "node": ">=14"
@@ -9431,6 +9507,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -9495,22 +9584,23 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/mlly": {
+    "node_modules/mkdirp-classic": {
       "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.3.tgz",
-      "integrity": "sha512-im69tuLD9EJh9fc9TZRpJEFvsBcGMez7glUCWDcHWWCKzhvPmNvyaYjp/+h0qJJN/Xovrs//GzGjOOKmFw4Gog==",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/mlly": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
+      "integrity": "sha512-2R4JT/SxRDPexomw4rmHYY/gWAGmL9Kkq1OR76Ua6w+P340a1aBDTWzKo2kAlxzrG82OdXs5VB9Lmcmyit0Obg==",
       "dev": true,
       "dependencies": {
-        "pathe": "^0.2.0",
-        "pkg-types": "^0.3.2"
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3"
       }
     },
-    "node_modules/mlly/node_modules/pathe": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-      "dev": true
-    },
     "node_modules/monaco-editor": {
       "version": "0.33.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
@@ -9561,6 +9651,13 @@
       "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.1.0.tgz",
       "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
     },
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -9744,6 +9841,26 @@
       "resolved": "../nocodb-sdk",
       "link": true
     },
+    "node_modules/node-abi": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.23.0.tgz",
+      "integrity": "sha512-XWte/uvq7hmgY27WesfxLUAPejKUlkEbikhBFaIhxe+XkHa57rXBwYqGjsIyfVXaU8kC0Wp2p/qQroauDKs1XA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.0.0.tgz",
+      "integrity": "sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -9782,9 +9899,9 @@
       }
     },
     "node_modules/node-fetch-native": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.3.tgz",
-      "integrity": "sha512-Jf1IQZdovUIv9E+5avmN6Sf+bND+rnMlODnBQhdE2VRyuWP9WgqZb/KEgPekh19DAN1X2C4vbS1VCOaz2OH19g==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.4.tgz",
+      "integrity": "sha512-10EKpOCQPXwZVFh3U1ptOMWBgKTbsN7Vvo6WVKt5pw4hp8zbv6ZVBZPlXw+5M6Tyi1oc1iD4/sNPd71KYA16tQ==",
       "dev": true
     },
     "node_modules/node-forge": {
@@ -10580,9 +10697,9 @@
       }
     },
     "node_modules/pathe": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.0.tgz",
-      "integrity": "sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.3.tgz",
+      "integrity": "sha512-x3nrPvG0HDSDzUiJ0WqtzhN4MD+h5B+dFJ3/qyxVuARlr4Y3aJv8gri2cZzp9Z8sGs2a+aG9gNbKngh3gme57A==",
       "dev": true
     },
     "node_modules/pathval": {
@@ -11273,6 +11390,33 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -11379,6 +11523,17 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -11465,6 +11620,32 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rc9": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.2.tgz",
@@ -12174,6 +12355,30 @@
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
       "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
     },
+    "node_modules/sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -12215,6 +12420,70 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/sirv": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
@@ -12726,6 +12995,19 @@
         "node": ">=4.5"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
     "node_modules/tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -13086,6 +13368,19 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -13141,9 +13436,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.4.tgz",
-      "integrity": "sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.5.tgz",
+      "integrity": "sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==",
       "dev": true
     },
     "node_modules/unbox-primitive": {
@@ -14386,6 +14681,30 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/xss": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz",
+      "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
@@ -15620,54 +15939,72 @@
       "integrity": "sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==",
       "dev": true
     },
+    "@nuxt/image-edge": {
+      "version": "1.0.0-27657146.da85542",
+      "resolved": "https://registry.npmjs.org/@nuxt/image-edge/-/image-edge-1.0.0-27657146.da85542.tgz",
+      "integrity": "sha512-iMDB1KR4D/2smyShDTJ2Jf1FMj42elYOWDpkHgFZvSIf7eZcg8TVGW45lTjlp7VbQ/TgC1I0kYZBEFdc1AGXrw==",
+      "dev": true,
+      "requires": {
+        "@nuxt/kit": "^3.0.0-rc.4",
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "h3": "^0.7.10",
+        "image-meta": "^0.1.1",
+        "ipx": "^0.9.10",
+        "node-fetch-native": "^0.1.4",
+        "ohash": "^0.1.0",
+        "pathe": "^0.3.2",
+        "ufo": "^0.8.5"
+      }
+    },
     "@nuxt/kit": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.4.tgz",
-      "integrity": "sha512-ZBSeHFy3fPUx0equCtyP6eVUAZQWwRqTp2YnHSFqM5+yhN5aTGo8gBlfwttVBr4yhFBpGFRHhQj/iNPqrCeTnQ==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.6.tgz",
+      "integrity": "sha512-+lxSd6dSWlAzMXfGOPcY4856xnMF1Ck1rycFUZ+K2QYiDXphq/fiW2eMaWLVvqgPyL2Box2WzVDZJ6C5ceptcw==",
       "dev": true,
       "requires": {
-        "@nuxt/schema": "^3.0.0-rc.4",
-        "c12": "^0.2.7",
+        "@nuxt/schema": "^3.0.0-rc.6",
+        "c12": "^0.2.8",
         "consola": "^2.15.3",
         "defu": "^6.0.0",
         "globby": "^13.1.2",
         "hash-sum": "^2.0.0",
         "ignore": "^5.2.0",
-        "jiti": "^1.13.0",
+        "jiti": "^1.14.0",
         "knitwork": "^0.1.2",
         "lodash.template": "^4.5.0",
-        "mlly": "^0.5.2",
-        "pathe": "^0.3.0",
-        "pkg-types": "^0.3.2",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3",
         "scule": "^0.2.1",
         "semver": "^7.3.7",
         "unctx": "^1.1.4",
-        "unimport": "^0.2.7",
+        "unimport": "^0.4.5",
         "untyped": "^0.4.4"
       },
       "dependencies": {
         "unimport": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-          "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+          "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
           "dev": true,
           "requires": {
             "@rollup/pluginutils": "^4.2.1",
             "escape-string-regexp": "^5.0.0",
             "fast-glob": "^3.2.11",
-            "local-pkg": "^0.4.1",
+            "local-pkg": "^0.4.2",
             "magic-string": "^0.26.2",
-            "mlly": "^0.5.3",
-            "pathe": "^0.3.0",
+            "mlly": "^0.5.5",
+            "pathe": "^0.3.2",
             "scule": "^0.2.1",
             "strip-literal": "^0.4.0",
-            "unplugin": "^0.7.0"
+            "unplugin": "^0.7.2"
           }
         },
         "unplugin": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-          "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+          "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
           "dev": true,
           "requires": {
             "acorn": "^8.7.1",
@@ -15679,45 +16016,45 @@
       }
     },
     "@nuxt/schema": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.4.tgz",
-      "integrity": "sha512-5yjfKvPJ/NboevQYZLyO1SS9nJW6KHtdd7Ei61D19gYGtnN+aOpxOnUX08A1rZMb3G2Cw5JRxVeF9+AfBYefJg==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.6.tgz",
+      "integrity": "sha512-BcD5YtWRhn+jU2DlzuI1TeITFeOt5x6qm2KeaU/d5jzJ0oZDzmZwKsAimLtRbHwyU6/kKa+zFbK6pp5obm1XLg==",
       "dev": true,
       "requires": {
-        "c12": "^0.2.7",
+        "c12": "^0.2.8",
         "create-require": "^1.1.1",
         "defu": "^6.0.0",
-        "jiti": "^1.13.0",
-        "pathe": "^0.3.0",
+        "jiti": "^1.14.0",
+        "pathe": "^0.3.2",
         "postcss-import-resolver": "^2.0.0",
         "scule": "^0.2.1",
         "std-env": "^3.1.1",
-        "ufo": "^0.8.4",
-        "unimport": "^0.2.7"
+        "ufo": "^0.8.5",
+        "unimport": "^0.4.5"
       },
       "dependencies": {
         "unimport": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-          "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+          "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
           "dev": true,
           "requires": {
             "@rollup/pluginutils": "^4.2.1",
             "escape-string-regexp": "^5.0.0",
             "fast-glob": "^3.2.11",
-            "local-pkg": "^0.4.1",
+            "local-pkg": "^0.4.2",
             "magic-string": "^0.26.2",
-            "mlly": "^0.5.3",
-            "pathe": "^0.3.0",
+            "mlly": "^0.5.5",
+            "pathe": "^0.3.2",
             "scule": "^0.2.1",
             "strip-literal": "^0.4.0",
-            "unplugin": "^0.7.0"
+            "unplugin": "^0.7.2"
           }
         },
         "unplugin": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-          "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+          "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
           "dev": true,
           "requires": {
             "acorn": "^8.7.1",
@@ -16193,6 +16530,12 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -16295,9 +16638,9 @@
       "dev": true
     },
     "@types/web-bluetooth": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
-      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
+      "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
     },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.30.0",
@@ -16642,28 +16985,20 @@
       }
     },
     "@vueuse/core": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.7.5.tgz",
-      "integrity": "sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.0.2.tgz",
+      "integrity": "sha512-kOIqaQPSs7OSByWg1ulEKRUJbsq3FmbJiUr0RhEKpt3O1Uhl4DrDj85DUbQBABVYgPvSaY6AE/fP3/FOcRIOoQ==",
       "requires": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.7.5",
-        "@vueuse/shared": "8.7.5",
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "dependencies": {
-        "@vueuse/shared": {
-          "version": "8.7.5",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.7.5.tgz",
-          "integrity": "sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==",
-          "requires": {
-            "vue-demi": "*"
-          }
-        },
         "vue-demi": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-          "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
           "requires": {}
         }
       }
@@ -16676,62 +17011,38 @@
       "requires": {}
     },
     "@vueuse/integrations": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-8.9.1.tgz",
-      "integrity": "sha512-xeApqTnMBUzlrpJacCdaFqUfTEf7NZUgHKJTsK9I41ISf2+pywgwpfjVk6KVSKk+GuE2MB1c945lul5jA5IcwA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-9.0.2.tgz",
+      "integrity": "sha512-Z7xwgjSaG7FeBDfFhwXbspLrLKdvjFkI/AfDJ/jz9bez73nkg3Pqnz7jD4rZ6o3lOBJ6cNLizCF5E2qEXtSLJw==",
       "requires": {
-        "@vueuse/core": "8.9.1",
-        "@vueuse/shared": "8.9.1",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "dependencies": {
-        "@vueuse/core": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.1.tgz",
-          "integrity": "sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==",
-          "requires": {
-            "@types/web-bluetooth": "^0.0.14",
-            "@vueuse/metadata": "8.9.1",
-            "@vueuse/shared": "8.9.1",
-            "vue-demi": "*"
-          }
-        },
-        "@vueuse/metadata": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.1.tgz",
-          "integrity": "sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA=="
-        },
-        "@vueuse/shared": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.1.tgz",
-          "integrity": "sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==",
-          "requires": {
-            "vue-demi": "*"
-          }
-        },
         "vue-demi": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-          "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
           "requires": {}
         }
       }
     },
     "@vueuse/metadata": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.7.5.tgz",
-      "integrity": "sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg=="
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.0.2.tgz",
+      "integrity": "sha512-TRh+TNUYXiodatSAxd0xZc7sh4RfktVVgNFIN7TCQXKyancbCAcWfHvKfgdlX8LcqSBxKoHVa90n0XdUbboTkw=="
     },
     "@vueuse/nuxt": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-8.7.5.tgz",
-      "integrity": "sha512-e+JSiNCdWaKyTiBtM856uNJaXeCw8Ka423AGsuvq+D+GXXQe0RhHzqqLS6pQutjWuftNRBRCOiITOzhtjMP+gA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-9.0.2.tgz",
+      "integrity": "sha512-1NYT3DC58fZ0YxFGaGZ4V0uAd3E4YMMnalKd1K1HBvrW3exB9zcBW52spKMspZL9dnNlxyv3TauH52b94fMxqg==",
       "dev": true,
       "requires": {
-        "@nuxt/kit": "^3.0.0-rc.4",
-        "@vueuse/core": "8.7.5",
-        "@vueuse/metadata": "8.7.5",
-        "local-pkg": "^0.4.1",
+        "@nuxt/kit": "^3.0.0-rc.6",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/metadata": "9.0.2",
+        "local-pkg": "^0.4.2",
         "vue-demi": "*"
       },
       "dependencies": {
@@ -16744,6 +17055,22 @@
         }
       }
     },
+    "@vueuse/shared": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.0.2.tgz",
+      "integrity": "sha512-KwBDefK2ljLESpt0ffe2w8EGUCb3IaMfTzeytB/uHHjHOGOEIHLHHyn8W2C48uGQEvoe5iwaW4Bfp8cRUM6IFA==",
+      "requires": {
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
+          "requires": {}
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -17466,26 +17793,18 @@
       }
     },
     "c12": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.7.tgz",
-      "integrity": "sha512-ih1nuHbZ6Ltf8Wss96JH6YvKIW5+9+uLAA08LUQAoDrFPGSyvPvQv/QBIRE+dCBWOK4PcwH0ylRkSa9huI1Acw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.8.tgz",
+      "integrity": "sha512-JomSyVwGnqndRdVVW6SGnHUeHIfJFQNe/4zPFK6zLKPQm8US+hNr4kZP7xeNnzjn3jnQUsBbPdT85fm8K5Pr4A==",
       "dev": true,
       "requires": {
         "defu": "^6.0.0",
-        "dotenv": "^16.0.0",
+        "dotenv": "^16.0.1",
         "gittar": "^0.1.1",
-        "jiti": "^1.12.14",
-        "mlly": "^0.5.1",
-        "pathe": "^0.2.0",
-        "rc9": "^1.2.1"
-      },
-      "dependencies": {
-        "pathe": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-          "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-          "dev": true
-        }
+        "jiti": "^1.14.0",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "rc9": "^1.2.2"
       }
     },
     "cac": {
@@ -17853,6 +18172,17 @@
       "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
       "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
     },
+    "color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      }
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -17868,6 +18198,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -18132,6 +18473,13 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true,
+      "optional": true
+    },
     "cssnano": {
       "version": "5.1.12",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
@@ -18324,6 +18672,16 @@
       "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
       "dev": true
     },
+    "decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "mimic-response": "^3.1.0"
+      }
+    },
     "deep-eql": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
@@ -18333,6 +18691,13 @@
         "type-detect": "^4.0.0"
       }
     },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "optional": true
+    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -19548,6 +19913,13 @@
       "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
       "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
     },
+    "expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "optional": true
+    },
     "external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -19994,6 +20366,13 @@
         "git-up": "^4.0.0"
       }
     },
+    "github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "optional": true
+    },
     "gittar": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/gittar/-/gittar-0.1.1.tgz",
@@ -20334,6 +20713,12 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "image-meta": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.1.1.tgz",
+      "integrity": "sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==",
+      "dev": true
+    },
     "image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -20475,6 +20860,26 @@
         "standard-as-callback": "^2.1.0"
       }
     },
+    "ipx": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-0.9.10.tgz",
+      "integrity": "sha512-HymTmXe2QBiPMgsJg1EQtUYgTXfIB9ha7j8tHCQqYGDS7bTYMNWyq/fBdI3S+wc9ic+hbPlTim+uf8QgZcEykQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "destr": "^1.1.1",
+        "etag": "^1.8.1",
+        "image-meta": "^0.1.1",
+        "listhen": "^0.2.13",
+        "ohmyfetch": "^0.4.18",
+        "pathe": "^0.3.2",
+        "sharp": "^0.30.7",
+        "ufo": "^0.8.5",
+        "xss": "^1.0.13"
+      }
+    },
     "is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -21122,9 +21527,9 @@
       }
     },
     "local-pkg": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.1.tgz",
-      "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz",
+      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
       "dev": true
     },
     "locale-codes": {
@@ -21454,6 +21859,13 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "optional": true
+    },
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -21511,22 +21923,21 @@
         "minimist": "^1.2.6"
       }
     },
-    "mlly": {
+    "mkdirp-classic": {
       "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.3.tgz",
-      "integrity": "sha512-im69tuLD9EJh9fc9TZRpJEFvsBcGMez7glUCWDcHWWCKzhvPmNvyaYjp/+h0qJJN/Xovrs//GzGjOOKmFw4Gog==",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "optional": true
+    },
+    "mlly": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
+      "integrity": "sha512-2R4JT/SxRDPexomw4rmHYY/gWAGmL9Kkq1OR76Ua6w+P340a1aBDTWzKo2kAlxzrG82OdXs5VB9Lmcmyit0Obg==",
       "dev": true,
       "requires": {
-        "pathe": "^0.2.0",
-        "pkg-types": "^0.3.2"
-      },
-      "dependencies": {
-        "pathe": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-          "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-          "dev": true
-        }
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3"
       }
     },
     "monaco-editor": {
@@ -21567,6 +21978,13 @@
       "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.1.0.tgz",
       "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
     },
+    "napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "dev": true,
+      "optional": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -21744,6 +22162,23 @@
         "typescript": "^4.0.2"
       }
     },
+    "node-abi": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.23.0.tgz",
+      "integrity": "sha512-XWte/uvq7hmgY27WesfxLUAPejKUlkEbikhBFaIhxe+XkHa57rXBwYqGjsIyfVXaU8kC0Wp2p/qQroauDKs1XA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "semver": "^7.3.5"
+      }
+    },
+    "node-addon-api": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.0.0.tgz",
+      "integrity": "sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==",
+      "dev": true,
+      "optional": true
+    },
     "node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -21762,9 +22197,9 @@
       }
     },
     "node-fetch-native": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.3.tgz",
-      "integrity": "sha512-Jf1IQZdovUIv9E+5avmN6Sf+bND+rnMlODnBQhdE2VRyuWP9WgqZb/KEgPekh19DAN1X2C4vbS1VCOaz2OH19g==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.4.tgz",
+      "integrity": "sha512-10EKpOCQPXwZVFh3U1ptOMWBgKTbsN7Vvo6WVKt5pw4hp8zbv6ZVBZPlXw+5M6Tyi1oc1iD4/sNPd71KYA16tQ==",
       "dev": true
     },
     "node-forge": {
@@ -22370,9 +22805,9 @@
       "dev": true
     },
     "pathe": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.0.tgz",
-      "integrity": "sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.3.tgz",
+      "integrity": "sha512-x3nrPvG0HDSDzUiJ0WqtzhN4MD+h5B+dFJ3/qyxVuARlr4Y3aJv8gri2cZzp9Z8sGs2a+aG9gNbKngh3gme57A==",
       "dev": true
     },
     "pathval": {
@@ -22833,6 +23268,27 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -22912,6 +23368,17 @@
       "optional": true,
       "peer": true
     },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -22966,6 +23433,28 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "dev": true
     },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "rc9": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.2.tgz",
@@ -23518,6 +24007,23 @@
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
       "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
     },
+    "sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -23550,6 +24056,44 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "optional": true
+    },
+    "simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "sirv": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
@@ -23955,6 +24499,19 @@
         }
       }
     },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
     "tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -24220,6 +24777,16 @@
         }
       }
     },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -24256,9 +24823,9 @@
       "peer": true
     },
     "ufo": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.4.tgz",
-      "integrity": "sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.5.tgz",
+      "integrity": "sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==",
       "dev": true
     },
     "unbox-primitive": {
@@ -25115,6 +25682,26 @@
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
       "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
     },
+    "xss": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz",
+      "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 2d692891f0..30894765ad 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",
-    "@vueuse/core": "^8.7.5",
-    "@vueuse/integrations": "^8.9.1",
-    "ant-design-vue": "^3.1.0-rc.6",
+    "@vueuse/core": "^9.0.2",
+    "@vueuse/integrations": "^9.0.2",
+    "ant-design-vue": "^3.2.10",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "jwt-decode": "^3.1.2",
@@ -41,14 +41,16 @@
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+    "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
+    "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
     "@types/sortablejs": "^1.13.0",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
-    "@vueuse/nuxt": "^8.6.0",
+    "@vueuse/nuxt": "^9.0.2",
     "@windicss/plugin-animations": "^1.0.9",
     "@windicss/plugin-question-mark": "^0.1.1",
     "@windicss/plugin-scrollbar": "^1.2.3",
diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 6bbf573fc6..1d982c384f 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -59,7 +59,7 @@ const validators = computed(() => {
           'dataSource.connection.database': [fieldRequiredValidator],
           ...([ClientType.PG, ClientType.MSSQL].includes(formState.dataSource.client)
             ? {
-                'dataSource.connection.searchPath.0': [fieldRequiredValidator],
+                'dataSource.searchPath.0': [fieldRequiredValidator],
               }
             : {}),
         }),
@@ -288,11 +288,11 @@ onMounted(() => {
         </a-form-item>
         <!-- Schema name -->
         <a-form-item
-          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client)"
+          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath"
           :label="$t('labels.schemaName')"
-          v-bind="validateInfos['dataSource.connection.searchPath.0']"
+          v-bind="validateInfos['dataSource.searchPath.0']"
         >
-          <a-input v-model:value="formState.dataSource.connection.searchPath[0]" size="small" />
+          <a-input v-model:value="formState.dataSource.searchPath[0]" size="small" />
         </a-form-item>
 
         <a-collapse ghost expand-icon-position="right" class="mt-6">
diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json
index 20e024fba7..7815bfba85 100644
--- a/packages/nc-gui-v2/tsconfig.json
+++ b/packages/nc-gui-v2/tsconfig.json
@@ -15,7 +15,8 @@
       "vue-i18n",
       "unplugin-icons/types/vue",
       "nuxt-windicss",
-      "vite/client"
+      "vite/client",
+      "@nuxt/image-edge"
     ]
   },
   "exclude": [
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index 0acc5a0f31..7dbcc44a61 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -12,7 +12,6 @@ export interface ProjectCreateForm {
           password: string
           port: number | string
           ssl?: Record<string, string>
-          searchPath?: string[]
         }
       | {
           client?: ClientType.SQLITE
@@ -22,6 +21,7 @@ export interface ProjectCreateForm {
           }
           useNullAsDefault?: boolean
         }
+    searchPath?: string[]
   }
   inflection: {
     inflectionColumn?: string
@@ -73,7 +73,6 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
     user: 'postgres',
     password: 'password',
     database: '_test',
-    searchPath: ['public'],
     ssl: {
       ca: '',
       key: '',
@@ -110,7 +109,6 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
     user: 'sa',
     password: 'Password123.',
     database: '_test',
-    searchPath: ['dbo'],
     ssl: {
       ca: '',
       key: '',
@@ -203,6 +201,11 @@ export const getDefaultConnectionConfig = (client: ClientType): ProjectCreateFor
   return {
     client,
     connection: sampleConnectionData[client],
+    searchPath: [ClientType.PG, ClientType.MSSQL].includes(client)
+      ? client === ClientType.PG
+        ? ['public']
+        : ['dbo']
+      : undefined,
   }
 }
 
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index 5f71c720a1..5f9427c98b 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -27,3 +27,7 @@ export const isValidURL = (str: string) => {
     /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)(?:\.(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)*(?:\.(?:[a-z\u00A1-\uFFFF]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
   return !!pattern.test(str)
 }
+
+export const openLink = (url: string, target = '_blank') => {
+  window.open(url, target)
+}
diff --git a/packages/nc-gui/components/utils/Language.vue b/packages/nc-gui/components/utils/Language.vue
index e3e6e075be..d73bbe59b8 100644
--- a/packages/nc-gui/components/utils/Language.vue
+++ b/packages/nc-gui/components/utils/Language.vue
@@ -2,7 +2,9 @@
   <div>
     <v-menu top offset-y>
       <template #activator="{ on }">
-        <v-icon size="20" class="ml-2 nc-menu-translate" v-on="on"> mdi-translate </v-icon>
+        <v-icon size="20" class="ml-2 nc-menu-translate" v-on="on">
+          mdi-translate
+        </v-icon>
       </template>
       <v-list dense class="nc-language-list">
         <v-list-item-group v-model="language">
@@ -40,104 +42,106 @@ export default {
   name: 'Language',
   data: () => ({
     labels: {
+      bn: 'বাংলা',
+      da: 'Dansk',
       de: 'Deutsch',
       en: 'English',
       es: 'Español',
       fa: 'فارسی',
+      fi: 'Suomalainen',
       fr: 'Français',
+      hi: 'हिन्दी',
+      hr: 'Hrvatski',
       id: 'Bahasa Indonesia',
-      ja: '日本語',
       it_IT: 'Italiano',
+      iw: 'עִברִית',
+      ja: '日本語',
       ko: '한국인',
       lv: 'Latviešu',
       nl: 'Nederlandse',
+      no: 'Norsk',
+      pt_BR: 'Português (Brasil)',
       ru: 'Pусский',
-      zh_CN: '大陆简体',
-      zh_HK: '香港繁體',
-      zh_TW: '臺灣正體',
+      sl: 'Slovenščina',
       sv: 'Svenska',
+      th: 'ไทย',
       tr: 'Turkish',
-      da: 'Dansk',
-      vi: 'Tiếng Việt',
-      no: 'Norsk',
-      iw: 'עִברִית',
-      fi: 'Suomalainen',
       uk: 'Українська',
-      hr: 'Hrvatski',
-      th: 'ไทย',
-      sl: 'Slovenščina',
-      pt_BR: 'Português (Brasil)',
-    },
+      vi: 'Tiếng Việt',
+      zh_CN: '大陆简体',
+      zh_HK: '香港繁體',
+      zh_TW: '臺灣正體'
+    }
   }),
   computed: {
     languages() {
-      return ((this.$i18n && this.$i18n.availableLocales) || ['en']).sort();
+      return ((this.$i18n && this.$i18n.availableLocales) || ['en']).sort()
     },
     language: {
       get() {
-        return this.$store.state.settings.language;
+        return this.$store.state.settings.language
       },
       set(val) {
-        this.$store.commit('settings/MutLanguage', val);
-        this.applyDirection();
-      },
-    },
+        this.$store.commit('settings/MutLanguage', val)
+        this.applyDirection()
+      }
+    }
   },
   mounted() {
-    this.applyDirection();
+    this.applyDirection()
   },
   methods: {
     applyDirection() {
-      const targetDirection = this.isRtlLang() ? 'rtl' : 'ltr';
-      const oppositeDirection = targetDirection == 'ltr' ? 'rtl' : 'ltr';
-      document.body.classList.remove(oppositeDirection);
-      document.body.classList.add(targetDirection);
-      document.body.style.direction = targetDirection;
+      const targetDirection = this.isRtlLang() ? 'rtl' : 'ltr'
+      const oppositeDirection = targetDirection == 'ltr' ? 'rtl' : 'ltr'
+      document.body.classList.remove(oppositeDirection)
+      document.body.classList.add(targetDirection)
+      document.body.style.direction = targetDirection
     },
     isRtlLang() {
-      return ['fa'].includes(this.language);
+      return ['fa'].includes(this.language)
     },
     changeLan(lan) {
-      this.language = lan;
-      const count = 200;
+      this.language = lan
+      const count = 200
       const defaults = {
-        origin: { y: 0.7 },
-      };
+        origin: { y: 0.7 }
+      }
 
       function fire(particleRatio, opts) {
         window.confetti(
           Object.assign({}, defaults, opts, {
-            particleCount: Math.floor(count * particleRatio),
+            particleCount: Math.floor(count * particleRatio)
           })
-        );
+        )
       }
 
       fire(0.25, {
         spread: 26,
-        startVelocity: 55,
-      });
+        startVelocity: 55
+      })
       fire(0.2, {
-        spread: 60,
-      });
+        spread: 60
+      })
       fire(0.35, {
         spread: 100,
         decay: 0.91,
-        scalar: 0.8,
-      });
+        scalar: 0.8
+      })
       fire(0.1, {
         spread: 120,
         startVelocity: 25,
         decay: 0.92,
-        scalar: 1.2,
-      });
+        scalar: 1.2
+      })
       fire(0.1, {
         spread: 120,
-        startVelocity: 45,
-      });
-      this.$e('c:navbar:lang', { lang: lan });
-    },
-  },
-};
+        startVelocity: 45
+      })
+      this.$e('c:navbar:lang', { lang: lan })
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/lang/bn.json b/packages/nc-gui/lang/bn.json
new file mode 100644
index 0000000000..7e11cae1f5
--- /dev/null
+++ b/packages/nc-gui/lang/bn.json
@@ -0,0 +1,522 @@
+{
+  "general": {
+    "home": "বাড়ি",
+    "load": "ভার",
+    "open": "খোলা",
+    "close": "বন্ধ",
+    "yes": "হ্যাঁ",
+    "no": "না",
+    "ok": "ঠিক আছে",
+    "and": "এবং",
+    "or": "বা",
+    "add": "যোগ করুন",
+    "edit": "সম্পাদনা",
+    "remove": "অপসারণ",
+    "save": "সংরক্ষণ",
+    "cancel": "বাতিল",
+    "submit": "জমা দিন",
+    "create": "সৃষ্টি",
+    "insert": "Insert",
+    "delete": "মুছে ফেলা",
+    "update": "হালনাগাদ",
+    "rename": "নাম পরিবর্তন",
+    "reload": "পুনরায় লোড",
+    "reset": "রিসেট",
+    "install": "ইনস্টল করুন",
+    "show": "শো",
+    "hide": "লুকান",
+    "showAll": "সব দেখাও",
+    "hideAll": "সব লুকাও",
+    "showMore": "আরো দেখুন",
+    "showOptions": "বিকল্পগুলি দেখান",
+    "hideOptions": "বিকল্পগুলি লুকান",
+    "showMenu": "মেনু দেখান",
+    "hideMenu": "মেনু লুকান",
+    "addAll": "সব যোগ কর",
+    "removeAll": "সব মুছে ফেলুন",
+    "signUp": "নিবন্ধন করুন",
+    "signIn": "সাইন ইন করুন",
+    "signOut": "সাইন আউট",
+    "required": "প্রয়োজনীয়",
+    "preferred": "পছন্দসই",
+    "mandatory": "বাধ্যতামূলক",
+    "loading": "লোড হচ্ছে ...",
+    "title": "শিরোনাম",
+    "upload": "আপলোড করুন",
+    "download": "ডাউনলোড করুন",
+    "default": "Default",
+    "more": "আরও",
+    "less": "কম",
+    "event": "ঘটনা",
+    "condition": "অবস্থা",
+    "after": "পরে",
+    "before": "আগে",
+    "search": "Search",
+    "notification": "বিজ্ঞপ্তি",
+    "reference": "প্রসঙ্গ",
+    "function": "নির্দিষ্ট কর্ম"
+  },
+  "objects": {
+    "project": "প্রকল্প",
+    "projects": "প্রকল্প",
+    "table": "টেবিল",
+    "tables": "টেবিল",
+    "field": "ক্ষেত্র",
+    "fields": "ক্ষেত্র",
+    "column": "কলাম",
+    "columns": "কলাম",
+    "page": "পৃষ্ঠা",
+    "pages": "পৃষ্ঠাগুলি",
+    "record": "রেকর্ড",
+    "records": "রেকর্ড",
+    "webhook": "Webhook",
+    "webhooks": "ওয়েবহুকস",
+    "view": "দেখুন",
+    "views": "ভিউ",
+    "viewType": {
+      "grid": "গ্রিড",
+      "gallery": "গ্যালারী",
+      "form": "ফর্ম",
+      "kanban": "কানবান",
+      "calendar": "ক্যালেন্ডার"
+    },
+    "user": "ব্যবহারকারী",
+    "users": "ব্যবহারকারীরা",
+    "role": "ভূমিকা",
+    "roles": "ভূমিকা",
+    "roleType": {
+      "owner": "মালিক",
+      "creator": "স্রষ্টা",
+      "editor": "সম্পাদক",
+      "commenter": "মন্তব্যকারী",
+      "viewer": "দর্শক"
+    }
+  },
+  "datatype": {
+    "ID": "আইডি",
+    "ForeignKey": "বিদেশী চাবি",
+    "SingleLineText": "একক লাইন পাঠ্য",
+    "LongText": "দীর্ঘ পাঠ্য",
+    "Attachment": "সংযুক্তি",
+    "Checkbox": "চেকবক্স",
+    "MultiSelect": "মাল্টি নির্বাচন করুন",
+    "SingleSelect": "একক নির্বাচন",
+    "Collaborator": "সহযোগী",
+    "Date": "তারিখ",
+    "Year": "বছর",
+    "Time": "সময়",
+    "PhoneNumber": "ফোন নম্বর",
+    "Email": "ইমেল",
+    "URL": "Url",
+    "Number": "সংখ্যা",
+    "Decimal": "দশমিক",
+    "Currency": "মুদ্রা",
+    "Percent": "শতাংশ",
+    "Duration": "সময়কাল",
+    "Rating": "রেটিং",
+    "Formula": "সূত্র",
+    "Rollup": "রোলআপ",
+    "Count": "গণনা",
+    "Lookup": "খুঁজে দেখো",
+    "DateTime": "তারিখ সময়",
+    "CreateTime": "সময় তৈরি করুন",
+    "LastModifiedTime": "শেষ পরিবর্তিত সময়",
+    "AutoNumber": "অটো নম্বর",
+    "Barcode": "বারকোড",
+    "Button": "বোতাম",
+    "Password": "পাসওয়ার্ড",
+    "relationProperties": {
+      "noAction": "No Action",
+      "cascade": "Cascade",
+      "restrict": "रोके",
+      "setNull": "NULL সেট করুন",
+      "setDefault": "ডিফল্ট সেট করুন"
+    }
+  },
+  "filterOperation": {
+    "isEqual": "সমান",
+    "isNotEqual": "সমান নয়",
+    "isLike": "মত হয়",
+    "isNot like": "পছন্দ হয় না",
+    "isEmpty": "খালি",
+    "isNotEmpty": "খালি না",
+    "isNull": "নাল",
+    "isNotNull": "নাল নয়"
+  },
+  "title": {
+    "newProj": "নতুন প্রকল্প",
+    "myProject": "আমার প্রকল্প",
+    "formTitle": "ফর্ম শিরোনাম",
+    "collabView": "সহযোগী দর্শন",
+    "lockedView": "লক ভিউ",
+    "personalView": "ব্যক্তিগত দৃশ্য",
+    "appStore": "অ্যাপ স্টোর",
+    "teamAndAuth": "দল ও আথ",
+    "rolesUserMgmt": "ভূমিকা এবং ব্যবহারকারী পরিচালনা",
+    "userMgmt": "ব্যবহারকারী পরিচালনা",
+    "apiTokenMgmt": "এপিআই টোকেন পরিচালনা",
+    "rolesMgmt": "ভূমিকা পরিচালনা",
+    "projMeta": "প্রকল্প মেটাডেটা",
+    "metaMgmt": "মেটা পরিচালনা",
+    "metadata": "মেটাডেটা",
+    "exportImportMeta": "রফতানি / আমদানি মেটাডেটা",
+    "uiACL": "UI অ্যাক্সেস কন্ট্রোল",
+    "metaOperations": "মেটাডেটা অপারেশনস",
+    "audit": "নিরীক্ষা",
+    "auditLogs": "হিসাবনিকাশের বিবরণ",
+    "sqlMigrations": "এসকিউএল মাইগ্রেশন",
+    "dbCredentials": "ডাটাবেস শংসাপত্র",
+    "advancedParameters": "এসএসএল এবং উন্নত পরামিতি",
+    "headCreateProject": "প্রকল্প তৈরি করুন | নোকডিবি",
+    "headLogin": "লগ ইন | নোকডিবি",
+    "resetPassword": "আপনার পাসওয়ার্ড পুনরায় সেট করুন",
+    "teamAndSettings": "দল এবং সেটিংস",
+    "apiDocs": "API Docs",
+    "importFromAirtable": "এয়ারটেবল থেকে আমদানি করুন"
+  },
+  "labels": {
+    "notifyVia": "এর মাধ্যমে অবহিত করুন",
+    "projName": "প্রকল্পের নাম",
+    "tableName": "Table name",
+    "viewName": "নাম দেখুন",
+    "viewLink": "লিঙ্ক দেখুন",
+    "columnName": "কলামের নাম",
+    "columnType": "কলাম প্রকার",
+    "roleName": "নামভূমিকা",
+    "roleDescription": "ভূমিকা বর্ণনা",
+    "databaseType": "ডাটাবেস টাইপ করুন",
+    "lengthValue": "দৈর্ঘ্য/ মান",
+    "dbType": "ডাটাবেস প্রকার",
+    "sqliteFile": "স্ক্লাইট ফাইল",
+    "hostAddress": "হোস্ট ঠিকানা",
+    "port": "পোর্ট নাম্বার",
+    "username": "ব্যবহারকারীর নাম",
+    "password": "পাসওয়ার্ড",
+    "schemaName": "স্কিমার নাম",
+    "action": "কর্ম",
+    "actions": "ক্রিয়া",
+    "operation": "অপারেশন",
+    "operationType": "অপারেশন টাইপ",
+    "operationSubType": "অপারেশন সাব-টাইপ",
+    "description": "বর্ণনা",
+    "authentication": "প্রমাণীকরণ",
+    "token": "টোকেন",
+    "where": "কোথায়",
+    "cache": "ক্যাশে",
+    "chat": "চ্যাট",
+    "email": "ই-মেইল",
+    "storage": "স্টোরেজ",
+    "uiAcl": "UI-ACL",
+    "models": "মডেল",
+    "syncState": "সিঙ্ক স্টেট",
+    "created": "তৈরি",
+    "sqlOutput": "এসকিউএল আউটপুট",
+    "addOption": "বিকল্প যোগ করুন",
+    "aggregateFunction": "সামগ্রিক ফাংশন",
+    "database": "তথ্যশালা",
+    "dbCreateIfNotExists": "ডাটাবেস: উপস্থিত না থাকলে তৈরি করুন",
+    "clientKey": "ক্লায়েন্ট কী",
+    "clientCert": "ক্লায়েন্ট সার্ট",
+    "serverCA": "সার্ভার সিএ",
+    "requriedCa": "প্রয়োজনীয়-সিএ",
+    "requriedIdentity": "প্রয়োজনীয়-পরিচয়",
+    "inflection": {
+      "tableName": "প্রতিচ্ছবি - টেবিলের নাম",
+      "columnName": "প্রতিচ্ছবি - কলামের নাম"
+    },
+    "community": {
+      "starUs1": "তারা",
+      "starUs2": "আমাদের গিথুবে",
+      "bookDemo": "একটি বিনামূল্যে ডেমো বুক করুন",
+      "getAnswered": "আপনার প্রশ্নের উত্তর পান",
+      "joinDiscord": "ডিসকর্ডে যোগ দিন",
+      "joinCommunity": "NocoDB কমিউনিটিতে যোগ দিন",
+      "joinReddit": "/r/NocoDB-এ যোগ দিন",
+      "followNocodb": "NocoDB অনুসরণ করুন"
+    },
+    "docReference": "Document Reference",
+    "selectUserRole": "ব্যবহারকারীর ভূমিকা নির্বাচন করুন",
+    "childTable": "Child table",
+    "childColumn": "Child column",
+    "onUpdate": "আপডেটে",
+    "onDelete": "ডিলিটএ"
+  },
+  "activity": {
+    "createProject": "প্রকল্প তৈরি করুন",
+    "importProject": "আমদানি প্রকল্প",
+    "searchProject": "অনুসন্ধান প্রকল্প",
+    "editProject": "প্রকল্প সম্পাদনা করুন",
+    "stopProject": "প্রকল্প বন্ধ করুন",
+    "startProject": "প্রকল্প শুরু করুন",
+    "restartProject": "প্রকল্প পুনরায় চালু করুন",
+    "deleteProject": "প্রকল্প মুছুন",
+    "refreshProject": "রিফ্রেশ প্রকল্পগুলি",
+    "saveProject": "সংরক্ষণ প্রকল্প",
+    "createProjectExtended": {
+      "extDB": "একটি বাহ্যিক ডাটাবেসে <br> সংযুক্ত করে তৈরি করুন",
+      "excel": "এক্সেল থেকে প্রকল্প তৈরি করুন",
+      "template": "টেমপ্লেট থেকে প্রকল্প তৈরি করুন"
+    },
+    "OkSaveProject": "ঠিক আছে এবং প্রকল্প সংরক্ষণ করুন",
+    "upgrade": {
+      "available": "পর্যাপ্ত উন্নত সংস্করণ",
+      "releaseNote": "অব্যাহতি পত্র",
+      "howTo": "কিভাবে আপগ্রেড করবেন?"
+    },
+    "translate": "অনুবাদ করতে সহায়তা করুন",
+    "account": {
+      "authToken": "অনুলিপি আথ টোকেন",
+      "swagger": "সোয়াগার এপিস ডক",
+      "projInfo": "প্রকল্পের তথ্য অনুলিপি করুন",
+      "themes": "থিম"
+    },
+    "sort": "সাজান",
+    "addSort": "সাজানোর বিকল্প যুক্ত করুন",
+    "filter": "ছাঁকনি",
+    "addFilter": "ফিল্টার যুক্ত করুন",
+    "share": "শেয়ার",
+    "shareBase": {
+      "disable": "ভাগ করা বেস অক্ষম করুন",
+      "enable": "লিঙ্ক সহ যে কেউ",
+      "link": "ভাগ করা বেস লিঙ্ক"
+    },
+    "invite": "আমন্ত্রণ",
+    "inviteMore": "আরও আমন্ত্রণ",
+    "inviteTeam": "দলকে আমন্ত্রণ করুন",
+    "inviteToken": "টোকেনকে আমন্ত্রণ করুন",
+    "newUser": "নতুন ব্যবহারকারী",
+    "editUser": "ব্যবহারকারী সম্পাদনা করুন",
+    "deleteUser": "প্রকল্প থেকে ব্যবহারকারী সরান",
+    "resendInvite": "आमंत्रण ईमेल दोबारा भेजे",
+    "copyInviteURL": "অনুলিপি ইউআরএল আমন্ত্রণ করুন",
+    "newRole": "নতুন ভূমিকা",
+    "reloadRoles": "পুনরায় লোড ভূমিকা",
+    "nextPage": "পরবর্তী পৃষ্ঠা",
+    "prevPage": "আগের পৃষ্ঠা",
+    "nextRecord": "পরবর্তী রেকর্ড",
+    "previousRecord": "পূর্ববর্তী রেকর্ড",
+    "copyApiURL": "অনুলিপি এপিআই ইউআরএল",
+    "createTable": "টেবিল তৈরি",
+    "refreshTable": "টেবিল রিফ্রেশ",
+    "renameTable": "টেবিল নাম পরিবর্তন",
+    "deleteTable": "टेबल मिटाये",
+    "addField": "এই টেবিলে নতুন ক্ষেত্র যুক্ত করুন",
+    "setPrimary": "প্রাথমিক মান হিসাবে সেট করুন",
+    "addRow": "নতুন সারি যুক্ত করুন",
+    "saveRow": "সারি সংরক্ষণ করুন",
+    "insertRow": "নতুন সারি ঢোকান",
+    "deleteRow": "সারি মুছুন",
+    "deleteSelectedRow": "নির্বাচিত সারিগুলি মুছুন",
+    "importExcel": "এক্সেল আমদানি করুন",
+    "importCSV": "Import CSV",
+    "downloadCSV": "সিএসভি হিসাবে ডাউনলোড করুন",
+    "uploadCSV": "সিএসভি আপলোড করুন",
+    "import": "আমদানি",
+    "importMetadata": "আমদানি মেটাডেটা",
+    "exportMetadata": "রফতানি মেটাডেটা",
+    "clearMetadata": "পরিষ্কার মেটাডেটা",
+    "exportToFile": "ফাইল রফতানি",
+    "changePwd": "পাসওয়ার্ড পরিবর্তন করুন",
+    "createView": "একটি দৃশ্য তৈরি করুন",
+    "shareView": "শেয়ার ভিউ",
+    "listSharedView": "ভাগ করা ভিউ তালিকা",
+    "ListView": "ভিউ তালিকা",
+    "copyView": "অনুলিপি দেখুন",
+    "renameView": "ভিউ নামকরণ",
+    "deleteView": "দৃশ্য মুছুন",
+    "createGrid": "গ্রিড ভিউ তৈরি করুন",
+    "createGallery": "গ্যালারী ভিউ তৈরি করুন",
+    "createCalendar": "ক্যালেন্ডার ভিউ তৈরি করুন",
+    "createKanban": "কানবান ভিউ তৈরি করুন",
+    "createForm": "ফর্ম ভিউ তৈরি করুন",
+    "showSystemFields": "সিস্টেম ক্ষেত্রগুলি দেখান",
+    "copyUrl": "কপি ইউআরএল",
+    "openTab": "নতুন ট্যাব খুলুন",
+    "iFrame": "এম্বেডযোগ্য এইচটিএমএল কোড অনুলিপি করুন",
+    "addWebhook": "নতুন ওয়েবহুক যুক্ত করুন",
+    "newToken": "নতুন টোকেন যুক্ত করুন",
+    "exportZip": "রফতানি জিপ",
+    "importZip": "আমদানি জিপ",
+    "metaSync": "এখন সিঙ্ক",
+    "settings": "সেটিংস",
+    "previewAs": "পূর্বরূপ হিসাবে",
+    "resetReview": "পূর্বরূপ পুনরায় সেট করুন",
+    "testDbConn": "টেস্ট ডাটাবেস সংযোগ",
+    "removeDbFromEnv": "পরিবেশ থেকে ডাটাবেস সরান",
+    "editConnJson": "সংযোগ json সম্পাদনা",
+    "sponsorUs": "আমাদের স্পনসর",
+    "sendEmail": "ইমেইল পাঠান"
+  },
+  "tooltip": {
+    "saveChanges": "परिवर्तनों को सुरक्षित करें",
+    "xcDB": "একটি নতুন প্রকল্প তৈরি করুন",
+    "extDB": "মাইএসকিউএল, পোস্টগ্রেসকিউএল, এসকিউএল সার্ভার এবং এসকিউএলাইট সমর্থন করে",
+    "apiRest": "REST API এর মাধ্যমে অ্যাক্সেসযোগ্য",
+    "apiGQL": "গ্রাফকিউএল এপিআইয়ের মাধ্যমে অ্যাক্সেসযোগ্য",
+    "theme": {
+      "dark": "এটি কালোতে আসে (^⇧b)",
+      "light": "এটা কি কালো আসে? (^⇧b)"
+    },
+    "addTable": "নতুন টেবিল যুক্ত করুন",
+    "inviteMore": "আরও ব্যবহারকারীদের আমন্ত্রণ করুন",
+    "toggleNavDraw": "টগল নেভিগেশন ড্রয়ার",
+    "reloadApiToken": "এপিআই টোকেনগুলি পুনরায় লোড করুন",
+    "generateNewApiToken": "নতুন এপিআই টোকেন তৈরি করুন",
+    "addRole": "নতুন ভূমিকা যুক্ত করুন",
+    "reloadList": "পুনরায় লোড তালিকা",
+    "metaSync": "সিঙ্ক মেটাডেটা",
+    "sqlMigration": "স্থানান্তর পুনরায় লোড",
+    "updateRestart": "আপডেট এবং পুনরায় চালু করুন",
+    "cancelReturn": "বাতিল এবং ফিরে",
+    "exportMetadata": "মেটা টেবিলগুলি থেকে মেটা ডিরেক্টরিতে সমস্ত মেটাডেটা রফতানি করুন।",
+    "importMetadata": "মেটা ডিরেক্টরি থেকে মেটা টেবিলগুলিতে সমস্ত মেটাডেটা আমদানি করুন।",
+    "clearMetadata": "মেটা টেবিলগুলি থেকে সমস্ত মেটাডেটা সাফ করুন।",
+    "clientKey": ".key ফাইল নির্বাচন করুন",
+    "clientCert": ".cert ফাইল নির্বাচন করুন",
+    "clientCA": "সিএ ফাইল নির্বাচন করুন"
+  },
+  "placeholder": {
+    "projName": "প্রকল্পের নাম লিখুন",
+    "password": {
+      "enter": "পাসওয়ার্ড লিখুন",
+      "current": "বর্তমান পাসওয়ার্ড",
+      "new": "নতুন পাসওয়ার্ড",
+      "save": "পাসওয়ার্ড সংরক্ষণ",
+      "confirm": "নিশ্চিত কর নতুন গোপননম্বর"
+    },
+    "searchProjectTree": "টেবিল অনুসন্ধান করুন",
+    "searchFields": "ক্ষেত্র অনুসন্ধান করুন",
+    "searchColumn": "অনুসন্ধান {অনুসন্ধান} কলাম",
+    "searchApps": "অনুসন্ধান অ্যাপ্লিকেশন",
+    "searchModels": "অনুসন্ধান মডেল",
+    "noItemsFound": "কোনও আইটেম পাওয়া যায় নি",
+    "defaultValue": "ডিফল্ট মান",
+    "filterByEmail": "ই-মেইল দ্বারা ফিল্টার"
+  },
+  "msg": {
+    "info": {
+      "footerInfo": "প্রতি পৃষ্ঠায় সারি",
+      "upload": "আপলোড করতে ফাইল নির্বাচন করুন",
+      "upload_sub": "অথবা ফাইল টেনে আনুন",
+      "excelSupport": "সমর্থিত: .xls, .xlsx, .xlsm, .ods, .ots",
+      "excelURL": "এক্সেল ফাইল ইউআরএল লিখুন",
+      "csvURL": "CSV ফাইলের URL লিখুন",
+      "footMsg": "# সারিগুলির জন্য ডেটাটাইপটি অনুমান করতে পার্স",
+      "excelImport": "শীট (গুলি) আমদানির জন্য উপলব্ধ",
+      "exportMetadata": "আপনি কি মেটা টেবিলগুলি থেকে মেটাডেটা রফতানি করতে চান?",
+      "importMetadata": "আপনি কি মেটা টেবিলগুলি থেকে মেটাডেটা আমদানি করতে চান?",
+      "clearMetadata": "আপনি কি মেটা টেবিলগুলি থেকে মেটাডেটা সাফ করতে চান?",
+      "projectEmptyMessage": "একটি নতুন প্রকল্প তৈরি করে শুরু করুন",
+      "stopProject": "আপনি কি প্রকল্পটি বন্ধ করতে চান?",
+      "startProject": "আপনি কি প্রকল্পটি শুরু করতে চান?",
+      "restartProject": "আপনি কি প্রকল্পটি পুনরায় চালু করতে চান?",
+      "deleteProject": "আপনি কি প্রকল্পটি মুছতে চান?",
+      "shareBasePrivate": "সর্বজনীনভাবে ভাগযোগ্য পঠনযোগ্য বেস উত্পন্ন করুন",
+      "shareBasePublic": "এই লিঙ্কটি সহ ইন্টারনেটে যে কেউ দেখতে পারেন",
+      "userInviteNoSMTP": "দেখে মনে হচ্ছে আপনি এখনও মেলার কনফিগার করেন নি! উপরের আমন্ত্রণ লিঙ্কটি অনুলিপি করুন এবং এটি প্রেরণ করুন",
+      "dragDropHide": "লুকানোর জন্য এখানে টেনে আনুন এবং ড্রপ করুন",
+      "formInput": "ফর্ম ইনপুট লেবেল প্রবেশ করান",
+      "formHelpText": "কিছু সহায়তা পাঠ্য যুক্ত করুন",
+      "onlyCreator": "কেবল স্রষ্টার কাছে দৃশ্যমান",
+      "formDesc": "ফর্ম বর্ণনা যোগ করুন",
+      "beforeEnablePwd": "একটি পাসওয়ার্ড দিয়ে অ্যাক্সেস সীমাবদ্ধ করুন",
+      "afterEnablePwd": "অ্যাক্সেস পাসওয়ার্ড সীমাবদ্ধ",
+      "privateLink": "এই ভিউটি একটি ব্যক্তিগত লিঙ্কের মাধ্যমে ভাগ করা হয়েছে",
+      "privateLinkAdditionalInfo": "ব্যক্তিগত লিঙ্কযুক্ত লোকেরা কেবল এই দৃশ্যে কোষগুলি দৃশ্যমান দেখতে পারে",
+      "afterFormSubmitted": "ফর্ম জমা দেওয়ার পরে",
+      "apiOptions": "মাধ্যমে অ্যাক্সেস প্রকল্প",
+      "submitAnotherForm": "অন্য ফর্ম জমা দিন' বোতামটি দেখান",
+      "showBlankForm": "5 সেকেন্ড পরে একটি ফাঁকা ফর্ম দেখান",
+      "emailForm": "আমাকে ইমেল করুন",
+      "showSysFields": "সিস্টেম ক্ষেত্রগুলি দেখান",
+      "filterAutoApply": "অটো প্রয়োগ",
+      "showMessage": "এই বার্তাটি দেখান",
+      "viewNotShared": "বর্তমান ভিউ ভাগ করা হয় না!",
+      "showAllViews": "এই টেবিলের সমস্ত ভাগ করা দর্শন দেখান",
+      "collabView": "সম্পাদনা অনুমতি বা উচ্চতর সহ সহযোগীরা ভিউ কনফিগারেশন পরিবর্তন করতে পারে।",
+      "lockedView": "এটি আনলক না হওয়া পর্যন্ত কেউ ভিউ কনফিগারেশন সম্পাদনা করতে পারে না।",
+      "personalView": "কেবলমাত্র আপনি ভিউ কনফিগারেশন সম্পাদনা করতে পারেন। অন্যান্য সহযোগীদের ব্যক্তিগত মতামত ডিফল্টরূপে লুকানো থাকে।",
+      "ownerDesc": "স্রষ্টা যুক্ত/অপসারণ করতে পারেন। এবং সম্পূর্ণ সম্পাদনা ডাটাবেস স্ট্রাকচার এবং ক্ষেত্রগুলি।",
+      "creatorDesc": "ডাটাবেস কাঠামো এবং মানগুলি সম্পূর্ণরূপে সম্পাদনা করতে পারে।",
+      "editorDesc": "রেকর্ডগুলি সম্পাদনা করতে পারে তবে ডাটাবেস/ক্ষেত্রগুলির কাঠামো পরিবর্তন করতে পারে না।",
+      "commenterDesc": "রেকর্ডগুলি দেখতে এবং মন্তব্য করতে পারে তবে কিছু সম্পাদনা করতে পারে না",
+      "viewerDesc": "রেকর্ডগুলি দেখতে পারে তবে কিছু সম্পাদনা করতে পারে না",
+      "addUser": "নতুন ব্যবহারকারী যুক্ত করুন",
+      "staticRoleInfo": "সিস্টেম সংজ্ঞায়িত ভূমিকা সম্পাদনা করা যায় না",
+      "exportZip": "জিপ ফাইল এবং ডাউনলোডে প্রকল্প মেটা রফতানি করুন।",
+      "importZip": "প্রকল্প মেটা জিপ ফাইল আমদানি করুন এবং পুনরায় চালু করুন।",
+      "importText": "মেটাডেটা জিপ ফাইল আপলোড করে নোকডিবি প্রকল্পটি আমদানি করুন",
+      "metaNoChange": "কোনও পরিবর্তন চিহ্নিত করা হয়নি",
+      "sqlMigration": "স্কিমা মাইগ্রেশনগুলি স্বয়ংক্রিয়ভাবে তৈরি করা হবে। একটি টেবিল তৈরি করুন এবং এই পৃষ্ঠাটি রিফ্রেশ করুন।",
+      "dbConnectionStatus": "পরিবেশ বৈধ",
+      "dbConnected": "সংযোগ সফল ছিল",
+      "notifications": {
+        "no_new": "কোনও নতুন বিজ্ঞপ্তি নেই",
+        "clear": "স্পষ্ট"
+      },
+      "sponsor": {
+        "header": "আপনি আমাদের সাহায্য করতে পারেন!",
+        "message": "আমরা নোকোডিবিকে ওপেন সোর্স করার জন্য পুরো সময় কাজ করছি এমন একটি ক্ষুদ্র দল। আমরা বিশ্বাস করি যে নোকোডিবির মতো একটি সরঞ্জাম ইন্টারনেটে প্রতিটি সমস্যা সমাধানকারীকে অবাধে উপলব্ধ হওয়া উচিত।"
+      },
+      "loginMsg": "Nocodb এ লগ ইন করুন",
+      "passwordRecovery": {
+        "message_1": "আপনি সাইন আপ করার সময় দয়া করে আপনি যে ইমেল ঠিকানাটি ব্যবহার করেছেন তা সরবরাহ করুন।",
+        "message_2": "আমরা আপনার পাসওয়ার্ডটি পুনরায় সেট করতে একটি লিঙ্ক সহ একটি ইমেল প্রেরণ করব।",
+        "success": "পাসওয়ার্ডটি পুনরায় সেট করতে আপনার ইমেলটি পরীক্ষা করুন"
+      },
+      "signUp": {
+        "superAdmin": "আপনি 'সুপার অ্যাডমিন' হবেন",
+        "alreadyHaveAccount": "ইতিমধ্যে একটি সদস্যপদ আছে ?",
+        "workEmail": "আপনার কাজের ইমেল লিখুন",
+        "enterPassword": "আপনার পাসওয়ার্ড লিখুন",
+        "forgotPassword": "আপনি কি পাসওয়ার্ড ভুলে গেছেন ?",
+        "dontHaveAccount": "অ্যাকাউন্ট নেই?"
+      },
+      "addView": {
+        "grid": "গ্রিড ভিউ যুক্ত করুন",
+        "gallery": "গ্যালারী ভিউ যুক্ত করুন",
+        "form": "ফর্ম ভিউ যোগ করুন",
+        "kanban": "কানবান ভিউ যুক্ত করুন",
+        "calendar": "ক্যালেন্ডার ভিউ যুক্ত করুন"
+      },
+      "tablesMetadataInSync": "টেবিলের মেটাডেটা সিঙ্ক করা আছে",
+      "addMultipleUsers": "आप एकाधिक COMMA (,) द्वारा अलग ईमेल जोड़ सकते है",
+      "enterTableName": "টেবিলের নাম লিখুন",
+      "addDefaultColumns": "ডিফল্ট কলাম যোগ করুন",
+      "tableNameInDb": "ডাটাবেসে সংরক্ষিত টেবিলের নাম"
+    },
+    "error": {
+      "searchProject": "আপনার অনুসন্ধান {search} এর জন্য কোনও ফলাফল পাওয়া যায় নি",
+      "invalidChar": "ফোল্ডার পথে অবৈধ চরিত্র।",
+      "invalidDbCredentials": "অবৈধ ডাটাবেস শংসাপত্রগুলি।",
+      "unableToConnectToDb": "ডাটাবেসের সাথে সংযোগ করতে অক্ষম, অনুগ্রহ করে পরীক্ষা করুন আপনার ডাটাবেস আপ আছে।",
+      "userDoesntHaveSufficientPermission": "ব্যবহারকারীর অস্তিত্ব নেই বা স্কিমা তৈরি করার জন্য পর্যাপ্ত অনুমতি নেই।",
+      "dbConnectionStatus": "অবৈধ ডাটাবেস পরামিতি",
+      "dbConnectionFailed": "সংযোগ বিচ্ছিন্ন:",
+      "signUpRules": {
+        "emailReqd": "ই-মেইল প্রয়োজন",
+        "emailInvalid": "ইমেল বৈধ হতে হবে",
+        "passwdRequired": "পাসওয়ার্ড প্রয়োজন",
+        "passwdLength": "আপনার পাসওয়ার্ড অবশ্যই কমপক্ষে 8 টি অক্ষর হতে হবে",
+        "passwdMismatch": "পাসওয়ার্ড মিলছে না"
+      }
+    },
+    "toast": {
+      "exportMetadata": "প্রকল্প মেটাডেটা সফলভাবে রফতানি করেছে",
+      "importMetadata": "প্রকল্প মেটাডেটা সফলভাবে আমদানি করেছে",
+      "clearMetadata": "প্রকল্প মেটাডেটা সফলভাবে সাফ করেছে",
+      "stopProject": "প্রকল্প সফলভাবে বন্ধ",
+      "startProject": "প্রকল্প সফলভাবে শুরু হয়েছিল",
+      "restartProject": "প্রকল্প সফলভাবে পুনরায় চালু হয়েছে",
+      "deleteProject": "প্রকল্প সফলভাবে মুছে ফেলা হয়েছে",
+      "authToken": "ক্লিপবোর্ডে AUTH টোকেন কে কপি করা হয়েছে",
+      "projInfo": "ক্লিপবোর্ডে প্রজেক্ট সম্বন্ধে তথ্য কপি করা হয়েছে",
+      "inviteUrlCopy": "আমণ্ত্রণের url ক্লিপবোর্ডে কপি করা হয়েছে",
+      "createView": "দৃশ্য সফলভাবে তৈরি করা হয়েছে",
+      "formEmailSMTP": "ইমেল বিজ্ঞপ্তি সক্ষম করার জন্য দয়া করে অ্যাপ স্টোরে এসএমটিপি প্লাগইনটি সক্রিয় করুন",
+      "collabView": "সফলভাবে সহযোগী ভিউতে স্যুইচ করা",
+      "lockedView": "সফলভাবে লক ভিউতে স্যুইচ করা",
+      "futureRelease": "শীঘ্রই আসছে!"
+    }
+  }
+}
diff --git a/packages/nc-gui/lang/hi.json b/packages/nc-gui/lang/hi.json
new file mode 100644
index 0000000000..446a4c685f
--- /dev/null
+++ b/packages/nc-gui/lang/hi.json
@@ -0,0 +1,522 @@
+{
+  "general": {
+    "home": "घर",
+    "load": "भार",
+    "open": "खुला हुआ",
+    "close": "बंद करना",
+    "yes": "हाँ",
+    "no": "नहीं",
+    "ok": "ठीक है",
+    "and": "और",
+    "or": "या",
+    "add": "जोड़ें",
+    "edit": "संपादन करना",
+    "remove": "हटाना",
+    "save": "बचाना",
+    "cancel": "रद्द करना",
+    "submit": "प्रस्तुत करना",
+    "create": "सृजन करना",
+    "insert": "Insert",
+    "delete": "मिटाना",
+    "update": "अद्यतन",
+    "rename": "नाम बदलें",
+    "reload": "पुनः लोड करें",
+    "reset": "रीसेट",
+    "install": "स्थापित करना",
+    "show": "प्रदर्शन",
+    "hide": "छिपाना",
+    "showAll": "सब दिखाएं",
+    "hideAll": "सभी को छिपाएं",
+    "showMore": "और दिखाओ",
+    "showOptions": "विकल्प दिखाएं",
+    "hideOptions": "विकल्प छिपाएं",
+    "showMenu": "मेनू दिखाओ",
+    "hideMenu": "मेनू छिपाएं",
+    "addAll": "सभी को जोड़ो",
+    "removeAll": "सभी हटाएं",
+    "signUp": "साइन अप करें",
+    "signIn": "साइन इन करें",
+    "signOut": "साइन आउट",
+    "required": "आवश्यक",
+    "preferred": "पसंदीदा",
+    "mandatory": "अनिवार्य",
+    "loading": "लोड हो रहा है ...",
+    "title": "शीर्षक",
+    "upload": "डालना",
+    "download": "निकालना",
+    "default": "Default",
+    "more": "ज्यादा",
+    "less": "कम",
+    "event": "घटना",
+    "condition": "शर्त",
+    "after": "बाद में",
+    "before": "पहले",
+    "search": "खोजे",
+    "notification": "सूचित करी",
+    "reference": "संदर्भ",
+    "function": "समारोह"
+  },
+  "objects": {
+    "project": "परियोजना",
+    "projects": "परियोजनाओं",
+    "table": "मेज",
+    "tables": "टेबल",
+    "field": "खेत",
+    "fields": "खेत",
+    "column": "कॉलम",
+    "columns": "कॉलम",
+    "page": "पृष्ठ",
+    "pages": "पृष्ठों",
+    "record": "अभिलेख",
+    "records": "अभिलेख",
+    "webhook": "Webhook",
+    "webhooks": "Webhooks",
+    "view": "राय",
+    "views": "विचारों",
+    "viewType": {
+      "grid": "जाल",
+      "gallery": "गेलरी",
+      "form": "प्रपत्र",
+      "kanban": "Kanban",
+      "calendar": "पंचांग"
+    },
+    "user": "उपयोगकर्ता",
+    "users": "उपयोगकर्ताओं",
+    "role": "भूमिका",
+    "roles": "भूमिकाएँ",
+    "roleType": {
+      "owner": "स्वामी",
+      "creator": "बनाने वाला",
+      "editor": "संपादक",
+      "commenter": "टिप्पणीकार",
+      "viewer": "दर्शक"
+    }
+  },
+  "datatype": {
+    "ID": "पहचान",
+    "ForeignKey": "विदेशी कुंजी",
+    "SingleLineText": "एकल पंक्ति पाठ",
+    "LongText": "लंबे पाठ",
+    "Attachment": "अनुरक्ति",
+    "Checkbox": "चेक बॉक्स",
+    "MultiSelect": "बहु का चयन",
+    "SingleSelect": "एकल चयन",
+    "Collaborator": "सहयोगी",
+    "Date": "दिनांक",
+    "Year": "साल",
+    "Time": "समय",
+    "PhoneNumber": "फ़ोन नंबर",
+    "Email": "ईमेल",
+    "URL": "यूआरएल",
+    "Number": "संख्या",
+    "Decimal": "दशमलव",
+    "Currency": "मुद्रा",
+    "Percent": "प्रतिशत",
+    "Duration": "अवधि",
+    "Rating": "रेटिंग",
+    "Formula": "सूत्र",
+    "Rollup": "जमना",
+    "Count": "गिनती करना",
+    "Lookup": "देखो",
+    "DateTime": "दिनांक और समय",
+    "CreateTime": "निर्माण का समय",
+    "LastModifiedTime": "अंतिम संशोधित समय",
+    "AutoNumber": "वाहन नंबर",
+    "Barcode": "बारकोड",
+    "Button": "बटन",
+    "Password": "पासवर्ड",
+    "relationProperties": {
+      "noAction": "No Action",
+      "cascade": "Cascade",
+      "restrict": "रोके",
+      "setNull": "Set NULL",
+      "setDefault": "Set Default"
+    }
+  },
+  "filterOperation": {
+    "isEqual": "बराबर है",
+    "isNotEqual": "समान नहीं है",
+    "isLike": "के समान ही",
+    "isNot like": "पसंद नहीं है",
+    "isEmpty": "खाली है",
+    "isNotEmpty": "खाली नहीं है",
+    "isNull": "शून्य है",
+    "isNotNull": "निरर्थक नहीं है"
+  },
+  "title": {
+    "newProj": "नया काम",
+    "myProject": "मेरी परियोजनाएं",
+    "formTitle": "प्रपत्र शीर्षक",
+    "collabView": "सहयोगात्मक दृश्य",
+    "lockedView": "बंद दृश्य",
+    "personalView": "व्यक्तिगत दृष्टिकोण",
+    "appStore": "ऐप स्टोर",
+    "teamAndAuth": "टीम और प्रामाणिक",
+    "rolesUserMgmt": "भूमिकाएँ और उपयोगकर्ता प्रबंधन",
+    "userMgmt": "उपयोगकर्ता प्रबंधन",
+    "apiTokenMgmt": "एपीआई टोकन प्रबंधन",
+    "rolesMgmt": "भूमिका प्रबंधन",
+    "projMeta": "प्रोजेक्ट मेटाडेटा",
+    "metaMgmt": "मेटा प्रबंधन",
+    "metadata": "मेटाडाटा",
+    "exportImportMeta": "निर्यात मेटाडेटा",
+    "uiACL": "UI Access Control",
+    "metaOperations": "मेटाडेटा संचालन",
+    "audit": "अंकेक्षण",
+    "auditLogs": "हिसाब सूचि",
+    "sqlMigrations": "SQL प्रवासन",
+    "dbCredentials": "डेटाबेस साख",
+    "advancedParameters": "SSL और उन्नत पैरामीटर",
+    "headCreateProject": "प्रोजेक्ट बनाएँ | नोकोडब",
+    "headLogin": "लॉग इन | नोकोडब",
+    "resetPassword": "अपना पासवर्ड रीसेट करें",
+    "teamAndSettings": "दल एवं सेटिंग्स",
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
+  },
+  "labels": {
+    "notifyVia": "Notify Via",
+    "projName": "परियोजना का नाम",
+    "tableName": "Table name",
+    "viewName": "नाम देखें",
+    "viewLink": "लिंक देखें",
+    "columnName": "आम नाम",
+    "columnType": "स्तंभ प्रकार",
+    "roleName": "भूमिका का नाम",
+    "roleDescription": "भूमिका विवरण",
+    "databaseType": "डेटाबेस में टाइप करें",
+    "lengthValue": "लंबाई/ मूल्य",
+    "dbType": "डेटाबेस प्रकार",
+    "sqliteFile": "Sqlite फ़ाइल",
+    "hostAddress": "मेज़बान का पता",
+    "port": "पोर्ट संख्या",
+    "username": "उपयोगकर्ता नाम",
+    "password": "पासवर्ड",
+    "schemaName": "Schema name",
+    "action": "गतिविधि",
+    "actions": "कार्रवाई",
+    "operation": "संचालन",
+    "operationType": "प्रचालन प्रकार",
+    "operationSubType": "प्रचालन उप-प्रकार",
+    "description": "विवरण",
+    "authentication": "प्रमाणीकरण",
+    "token": "टोकन",
+    "where": "कहाँ पे",
+    "cache": "कैश",
+    "chat": "बात करना",
+    "email": "ईमेल",
+    "storage": "भंडारण",
+    "uiAcl": "UI-ACL",
+    "models": "मॉडल",
+    "syncState": "सिंक अवस्था",
+    "created": "बनाया था",
+    "sqlOutput": "SQL आउटपुट",
+    "addOption": "विकल्प जोड़े",
+    "aggregateFunction": "कुल समारोह",
+    "database": "डेटाबेस",
+    "dbCreateIfNotExists": "डेटाबेस: बनाएं यदि मौजूद नहीं है",
+    "clientKey": "ग्राहक कुंजी",
+    "clientCert": "ग्राहक प्रमाण पत्र",
+    "serverCA": "सर्वर सीए",
+    "requriedCa": "आवश्यक सीए",
+    "requriedIdentity": "अपेक्षित-पहचान",
+    "inflection": {
+      "tableName": "विभक्ति - तालिका का नाम",
+      "columnName": "विभक्ति - स्तंभ नाम"
+    },
+    "community": {
+      "starUs1": "सितारा",
+      "starUs2": "हमें GitHub पर",
+      "bookDemo": "एक मुफ्त डेमो बुक करें",
+      "getAnswered": "अपने सवालों के जवाब दें",
+      "joinDiscord": "डिस्कोर्ड में शामिल हों",
+      "joinCommunity": "NocoDB के समुदाय से जुड़े",
+      "joinReddit": "/r/NocoDB में जुड़े",
+      "followNocodb": "NocoDB से जुड़े"
+    },
+    "docReference": "Document Reference",
+    "selectUserRole": "Select User Role",
+    "childTable": "Child table",
+    "childColumn": "Child column",
+    "onUpdate": "On Update",
+    "onDelete": "On Delete"
+  },
+  "activity": {
+    "createProject": "प्रोजेक्ट बनाएं",
+    "importProject": "आयात परियोजना",
+    "searchProject": "खोज परियोजना",
+    "editProject": "प्रोजेक्ट संपादित करें",
+    "stopProject": "बंद प्रोजेक्ट",
+    "startProject": "प्रोजेक्ट शुरू करें",
+    "restartProject": "प्रोजेक्ट को पुनरारंभ करना",
+    "deleteProject": "प्रोजेक्ट हटाएं",
+    "refreshProject": "ताज़ा प्रोजेक्ट्स",
+    "saveProject": "परियोजना को सुरक्षित करो",
+    "createProjectExtended": {
+      "extDB": "बाहरी डेटाबेस से <br> कनेक्ट करके बनाएँ",
+      "excel": "एक्सेल से प्रोजेक्ट बनाएं",
+      "template": "टेम्पलेट से प्रोजेक्ट बनाएं"
+    },
+    "OkSaveProject": "ठीक है और प्रोजेक्ट सहेजें",
+    "upgrade": {
+      "available": "अपग्रेड उपलब्द है",
+      "releaseNote": "रिलीज नोट्स",
+      "howTo": "अपग्रेड कैसे करें?"
+    },
+    "translate": "अनुवाद करने में मदद करें",
+    "account": {
+      "authToken": "कॉपी प्रामाणिक टोकन",
+      "swagger": "स्वैगर एपीआईएस डॉक",
+      "projInfo": "कॉपी प्रोजेक्ट जानकारी",
+      "themes": "विषयों"
+    },
+    "sort": "क्रम से लगाना",
+    "addSort": "सॉर्ट विकल्प जोड़ें",
+    "filter": "फ़िल्टर",
+    "addFilter": "फ़िल्टर जोड़ें",
+    "share": "शेयर करना",
+    "shareBase": {
+      "disable": "साझा आधार अक्षम करें",
+      "enable": "कोई भी व्यक्ति जिसके पास लिंक हो",
+      "link": "साझा आधार लिंक"
+    },
+    "invite": "आमंत्रित करना",
+    "inviteMore": "अधिक आमंत्रित करें",
+    "inviteTeam": "टीम को आमंत्रित करें",
+    "inviteToken": "टोकन को आमंत्रित करें",
+    "newUser": "नया उपयोगकर्ता",
+    "editUser": "यूजर को संपादित करो",
+    "deleteUser": "परियोजना से उपयोगकर्ता निकालें",
+    "resendInvite": "आमंत्रण ईमेल दोबारा भेजे",
+    "copyInviteURL": "कॉपी आमंत्रित URL",
+    "newRole": "नयी भूमिका",
+    "reloadRoles": "पुनः लोड भूमिकाएँ",
+    "nextPage": "अगला पृष्ठ",
+    "prevPage": "पिछला पृष्ठ",
+    "nextRecord": "अगला रिकॉर्ड",
+    "previousRecord": "पिछला रिकॉर्ड",
+    "copyApiURL": "API URL कॉपी करें",
+    "createTable": "तालिका बनाएं",
+    "refreshTable": "टेबल्स रिफ्रेश",
+    "renameTable": "तालिका का नाम",
+    "deleteTable": "टेबल मिटाये",
+    "addField": "इस तालिका में नया फ़ील्ड जोड़ें",
+    "setPrimary": "प्राथमिक मूल्य के रूप में सेट करें",
+    "addRow": "नई पंक्ति जोड़ें",
+    "saveRow": "पंक्ति सहेजें",
+    "insertRow": "नई पंक्ति डालें",
+    "deleteRow": "पंक्ति को हटाएं",
+    "deleteSelectedRow": "चयनित पंक्तियों को हटा दें",
+    "importExcel": "आयात एक्सेल",
+    "importCSV": "Import CSV",
+    "downloadCSV": "CSV के रूप में डाउनलोड करें",
+    "uploadCSV": "CSV अपलोड करें",
+    "import": "आयात",
+    "importMetadata": "आयात मेटाडेटा",
+    "exportMetadata": "निर्यात मेटाडेटा",
+    "clearMetadata": "स्पष्ट मेटाडेटा",
+    "exportToFile": "फ़ाइल को निर्यात",
+    "changePwd": "पासवर्ड बदलें",
+    "createView": "एक दृश्य बनाएं",
+    "shareView": "शेयर दृश्य",
+    "listSharedView": "साझा दृश्य सूची",
+    "ListView": "दृश्य सूची",
+    "copyView": "प्रतिलिपि दृश्य",
+    "renameView": "नाम बदलें",
+    "deleteView": "डिलीट व्यू",
+    "createGrid": "ग्रिड व्यू बनाएं",
+    "createGallery": "गैलरी दृश्य बनाएं",
+    "createCalendar": "कैलेंडर दृश्य बनाएं",
+    "createKanban": "कनबान व्यू बनाएं",
+    "createForm": "फॉर्म व्यू बनाएं",
+    "showSystemFields": "सिस्टम फ़ील्ड दिखाएं",
+    "copyUrl": "यूआरएल कॉपी करें",
+    "openTab": "नया टैब खोलें",
+    "iFrame": "एम्बेडेबल HTML कोड कॉपी करें",
+    "addWebhook": "नया वेबहूक जोड़ें",
+    "newToken": "नया टोकन जोड़ें",
+    "exportZip": "निर्यात ज़िप",
+    "importZip": "आयात ज़िप",
+    "metaSync": "अभी सिंक करें",
+    "settings": "समायोजन",
+    "previewAs": "के रूप में पूर्वावलोकन",
+    "resetReview": "रीसेट पूर्वावलोकन",
+    "testDbConn": "परीक्षण डेटाबेस कनेक्शन",
+    "removeDbFromEnv": "पर्यावरण से डेटाबेस निकालें",
+    "editConnJson": "कनेक्शन JSON संपादित करें",
+    "sponsorUs": "हमें प्रायोजित करें",
+    "sendEmail": "ईमेल भेजें"
+  },
+  "tooltip": {
+    "saveChanges": "परिवर्तनों को सुरक्षित करें",
+    "xcDB": "एक नया प्रोजेक्ट बनाएं",
+    "extDB": "MySQL, PostgreSQL, SQL सर्वर और SQLite का समर्थन करता है",
+    "apiRest": "रेस्ट एपीआई के माध्यम से सुलभ",
+    "apiGQL": "ग्राफक्ल एपीआई के माध्यम से सुलभ",
+    "theme": {
+      "dark": "यह काले रंग में आता है (^⇧B)",
+      "light": "क्या यह काले रंग में आता है? (^⇧b)"
+    },
+    "addTable": "नई तालिका जोड़ें",
+    "inviteMore": "अधिक उपयोगकर्ताओं को आमंत्रित करें",
+    "toggleNavDraw": "नेविगेशन दराज को टॉगल करें",
+    "reloadApiToken": "एपीआई टोकन को पुनः लोड करें",
+    "generateNewApiToken": "नया एपीआई टोकन उत्पन्न करें",
+    "addRole": "नई भूमिका जोड़ें",
+    "reloadList": "पुनः लोड सूची",
+    "metaSync": "सिंक मेटाडेटा",
+    "sqlMigration": "पुनर्जीवित पलायन",
+    "updateRestart": "अद्यतन और पुनरारंभ करें",
+    "cancelReturn": "रद्द करें और वापस लौटें",
+    "exportMetadata": "मेटा टेबल से सभी मेटाडेटा को मेटा निर्देशिका में निर्यात करें।",
+    "importMetadata": "मेटा निर्देशिका से मेटा टेबल तक सभी मेटाडेटा आयात करें।",
+    "clearMetadata": "मेटा टेबल से सभी मेटाडेटा को साफ करें।",
+    "clientKey": ".Key फ़ाइल का चयन करें",
+    "clientCert": ".Cert फ़ाइल का चयन करें",
+    "clientCA": "सीए फ़ाइल का चयन करें"
+  },
+  "placeholder": {
+    "projName": "प्रोजेक्ट नाम दर्ज करें",
+    "password": {
+      "enter": "पासवर्ड दर्ज करे",
+      "current": "वर्तमान पासवर्ड",
+      "new": "नया पासवर्ड",
+      "save": "पासवर्ड को बचाओ",
+      "confirm": "नए पासवर्ड की पुष्टि करें"
+    },
+    "searchProjectTree": "खोज टेबल",
+    "searchFields": "खोज फ़ील्ड",
+    "searchColumn": "खोज {खोज} कॉलम",
+    "searchApps": "खोज एप्लिकेशन",
+    "searchModels": "खोज मॉडल",
+    "noItemsFound": "कुछ नहीं मिला",
+    "defaultValue": "डिफ़ॉल्ट मान",
+    "filterByEmail": "ई-मेल द्वारा फ़िल्टर"
+  },
+  "msg": {
+    "info": {
+      "footerInfo": "प्रति पृष्ठ पंक्तियाँ",
+      "upload": "अपलोड करने के लिए फ़ाइल का चयन करें",
+      "upload_sub": "या ड्रैग एंड ड्रॉप फाइल",
+      "excelSupport": "समर्थित: .xls, .xlsx, .xlsm, .ods, .ots",
+      "excelURL": "Excel फ़ाइल URL दर्ज करें",
+      "csvURL": "csv फाइल का url दर्ज करे",
+      "footMsg": "# पंक्तियों को हीन डेटाटाइप करने के लिए पार्स करने के लिए",
+      "excelImport": "शीट आयात के लिए उपलब्ध हैं",
+      "exportMetadata": "क्या आप मेटा टेबल से मेटाडेटा निर्यात करना चाहते हैं?",
+      "importMetadata": "क्या आप मेटा टेबल से मेटाडेटा आयात करना चाहते हैं?",
+      "clearMetadata": "क्या आप मेटा टेबल से मेटाडेटा को साफ करना चाहते हैं?",
+      "projectEmptyMessage": "एक नई परियोजना बनाकर आरंभ करें",
+      "stopProject": "क्या आप परियोजना को रोकना चाहते हैं?",
+      "startProject": "क्या आप प्रोजेक्ट शुरू करना चाहते हैं?",
+      "restartProject": "क्या आप परियोजना को फिर से शुरू करना चाहते हैं?",
+      "deleteProject": "क्या आप परियोजना को हटाना चाहते हैं?",
+      "shareBasePrivate": "सार्वजनिक रूप से साझा करने योग्य रीडोनली बेस उत्पन्न करें",
+      "shareBasePublic": "इस लिंक के साथ इंटरनेट पर कोई भी व्यक्ति देख सकता है",
+      "userInviteNoSMTP": "लगता है कि आपने अभी तक मेलर को कॉन्फ़िगर नहीं किया है! कृपया ऊपर दिए गए लिंक के ऊपर कॉपी करें और इसे भेजें",
+      "dragDropHide": "छिपाने के लिए यहां फ़ील्ड को खींचें और ड्रॉप करें",
+      "formInput": "फॉर्म इनपुट लेबल दर्ज करें",
+      "formHelpText": "कुछ सहायता पाठ जोड़ें",
+      "onlyCreator": "केवल निर्माता को दिखाई देता है",
+      "formDesc": "फॉर्म विवरण जोड़ें",
+      "beforeEnablePwd": "एक पासवर्ड के साथ पहुंच को प्रतिबंधित करें",
+      "afterEnablePwd": "एक्सेस पासवर्ड प्रतिबंधित है",
+      "privateLink": "यह दृश्य एक निजी लिंक के माध्यम से साझा किया गया है",
+      "privateLinkAdditionalInfo": "निजी लिंक वाले लोग केवल इस दृश्य में दिखाई देने वाली कोशिकाओं को देख सकते हैं",
+      "afterFormSubmitted": "फॉर्म के बाद प्रस्तुत किया जाता है",
+      "apiOptions": "के माध्यम से प्रोजेक्ट",
+      "submitAnotherForm": "एक और फॉर्म सबमिट करें' बटन दिखाएं",
+      "showBlankForm": "5 सेकंड के बाद एक खाली फॉर्म दिखाएं",
+      "emailForm": "मुझे ई-मेल करें",
+      "showSysFields": "सिस्टम फ़ील्ड दिखाएं",
+      "filterAutoApply": "ऑटो लागू करें",
+      "showMessage": "यह संदेश दिखाएं",
+      "viewNotShared": "वर्तमान दृश्य साझा नहीं है!",
+      "showAllViews": "इस तालिका के सभी साझा विचार दिखाएं",
+      "collabView": "संपादन अनुमतियों या उच्चतर के साथ सहयोगी दृश्य कॉन्फ़िगरेशन को बदल सकते हैं।",
+      "lockedView": "कोई भी दृश्य कॉन्फ़िगरेशन को तब तक संपादित नहीं कर सकता है जब तक कि यह अनलॉक न हो जाए।",
+      "personalView": "केवल आप दृश्य कॉन्फ़िगरेशन को संपादित कर सकते हैं। अन्य सहयोगियों के व्यक्तिगत विचार डिफ़ॉल्ट रूप से छिपे हुए हैं।",
+      "ownerDesc": "रचनाकारों को जोड़/हटा सकते हैं। और पूर्ण संपादन डेटाबेस संरचनाएं और फ़ील्ड।",
+      "creatorDesc": "डेटाबेस संरचना और मानों को पूरी तरह से संपादित कर सकते हैं।",
+      "editorDesc": "रिकॉर्ड को संपादित कर सकते हैं लेकिन डेटाबेस/फ़ील्ड की संरचना को नहीं बदल सकते हैं।",
+      "commenterDesc": "रिकॉर्ड देख सकते हैं और टिप्पणी कर सकते हैं लेकिन कुछ भी संपादित नहीं कर सकते",
+      "viewerDesc": "रिकॉर्ड देख सकते हैं लेकिन कुछ भी संपादित नहीं कर सकते",
+      "addUser": "नई उपयोगकर्ता को जोड़ना",
+      "staticRoleInfo": "सिस्टम परिभाषित भूमिकाओं को संपादित नहीं किया जा सकता है",
+      "exportZip": "फाइल और डाउनलोड करने के लिए प्रोजेक्ट मेटा निर्यात करें।",
+      "importZip": "आयात परियोजना मेटा ज़िप फ़ाइल और पुनरारंभ।",
+      "importText": "मेटाडेटा ज़िप फ़ाइल अपलोड करके NOCODB परियोजना आयात करें",
+      "metaNoChange": "कोई परिवर्तन नहीं की पहचान",
+      "sqlMigration": "स्कीमा माइग्रेशन स्वचालित रूप से बनाए जाएंगे। एक तालिका बनाएं और इस पृष्ठ को ताज़ा करें।",
+      "dbConnectionStatus": "मान्य पर्यावरण",
+      "dbConnected": "कनेक्शन सफल रहा",
+      "notifications": {
+        "no_new": "कोई नए संदेश नहीं",
+        "clear": "साफ़"
+      },
+      "sponsor": {
+        "header": "आप हमारी मदद कर सकते हैं!",
+        "message": "हम एक छोटी टीम हैं जो NOCODB को ओपन-सोर्स बनाने के लिए पूरा समय काम कर रही हैं। हमारा मानना ​​है कि एनओसीओडीबी जैसे उपकरण को इंटरनेट पर हर समस्या के लिए स्वतंत्र रूप से उपलब्ध होना चाहिए।"
+      },
+      "loginMsg": "NoCODB में लॉग इन करें",
+      "passwordRecovery": {
+        "message_1": "जब आप साइन अप करते हैं तो कृपया आपके द्वारा उपयोग किए गए ईमेल पते को प्रदान करें।",
+        "message_2": "हम आपको अपना पासवर्ड रीसेट करने के लिए एक लिंक के साथ एक ईमेल भेजेंगे।",
+        "success": "कृपया पासवर्ड रीसेट करने के लिए अपना ईमेल देखें"
+      },
+      "signUp": {
+        "superAdmin": "आप 'सुपर एडमिन' होंगे",
+        "alreadyHaveAccount": "क्या आपके पास पहले से एक खाता मौजूद है ?",
+        "workEmail": "अपना काम ईमेल दर्ज करें",
+        "enterPassword": "अपना पासवर्ड डालें",
+        "forgotPassword": "पासवर्ड भूल गए हैं ?",
+        "dontHaveAccount": "कोई खाता नहीं है?"
+      },
+      "addView": {
+        "grid": "ग्रिड दृश्य जोड़ें",
+        "gallery": "गैलरी दृश्य जोड़ें",
+        "form": "फॉर्म व्यू जोड़ें",
+        "kanban": "कनबान दृश्य जोड़ें",
+        "calendar": "कैलेंडर दृश्य जोड़ें"
+      },
+      "tablesMetadataInSync": "टेबल के मेटाडेटा SYNC है",
+      "addMultipleUsers": "आप एकाधिक COMMA (,) द्वारा अलग ईमेल जोड़ सकते है",
+      "enterTableName": "टेबल का नाम लिखे",
+      "addDefaultColumns": "डिफ़ॉल्ट कॉलम जोड़े",
+      "tableNameInDb": "डेटाबेस में टेबल का नाम बचाया गया है"
+    },
+    "error": {
+      "searchProject": "{search} के लिए आपकी खोज कोई परिणाम नहीं मिला",
+      "invalidChar": "फ़ोल्डर पथ में अमान्य चरित्र।",
+      "invalidDbCredentials": "अमान्य डेटाबेस क्रेडेंशियल्स।",
+      "unableToConnectToDb": "डेटाबेस से कनेक्ट करने में असमर्थ, कृपया जांच करें कि आपका डेटाबेस ऊपर है।",
+      "userDoesntHaveSufficientPermission": "उपयोगकर्ता मौजूद नहीं है या स्कीमा बनाने के लिए पर्याप्त अनुमति है।",
+      "dbConnectionStatus": "अमान्य डेटाबेस पैरामीटर",
+      "dbConnectionFailed": "कनेक्शन विफलता:",
+      "signUpRules": {
+        "emailReqd": "ईमेल की जरूरत है",
+        "emailInvalid": "ईमेल मान्य होना चाहिए",
+        "passwdRequired": "पासवर्ड की आवश्यकता है",
+        "passwdLength": "आप पासवर्ड कम से कम 8 वर्ण होना चाहिए",
+        "passwdMismatch": "पासवर्ड मेल नहीं खाते"
+      }
+    },
+    "toast": {
+      "exportMetadata": "परियोजना मेटाडेटा सफलतापूर्वक निर्यात की गई",
+      "importMetadata": "परियोजना मेटाडेटा सफलतापूर्वक आयात की गई",
+      "clearMetadata": "प्रोजेक्ट मेटाडेटा सफलतापूर्वक मंजूरी दे दी",
+      "stopProject": "परियोजना सफलतापूर्वक बंद हो गई",
+      "startProject": "परियोजना सफलतापूर्वक शुरू हुई",
+      "restartProject": "परियोजना को सफलतापूर्वक फिर से शुरू किया गया",
+      "deleteProject": "परियोजना को सफलतापूर्वक हटा दिया गया",
+      "authToken": "क्लिपबोर्ड में AUTH टोकन को कॉपी किया गया है",
+      "projInfo": "क्लिपबोर्ड में प्रोजेक्ट की जानकारी कॉपी की गयी है",
+      "inviteUrlCopy": "आमंत्रण url को क्लिपबोर्ड में कॉपी किया गया है",
+      "createView": "व्यू सफलतापूर्वक बनाया गया",
+      "formEmailSMTP": "कृपया ईमेल अधिसूचना को सक्षम करने के लिए ऐप स्टोर में SMTP प्लगइन को सक्रिय करें",
+      "collabView": "सफलतापूर्वक सहयोगी दृश्य पर स्विच किया गया",
+      "lockedView": "सफलतापूर्वक लॉक किए गए दृश्य पर स्विच किया गया",
+      "futureRelease": "जल्द आ रहा है!"
+    }
+  }
+}
diff --git a/packages/nc-gui/plugins/i18n.js b/packages/nc-gui/plugins/i18n.js
index 9da0c390a9..197d886ff9 100644
--- a/packages/nc-gui/plugins/i18n.js
+++ b/packages/nc-gui/plugins/i18n.js
@@ -44,7 +44,9 @@ export default ({ app, store }) => {
       sl: require('~/lang/sl.json'),
       pt_BR: require('~/lang/pt_BR.json'),
       fa: require('~/lang/fa.json'),
-      tr: require('~/lang/tr.json')
+      tr: require('~/lang/tr.json'),
+      hi: require('~/lang/hi.json'),
+      bn: require('~/lang/bn.json')
     }
   })
 
diff --git a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
index e9a165efec..e7f1bed118 100644
--- a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
@@ -945,7 +945,10 @@ export default async (
           nestedLookupTbl[0].typeOptions.foreignTableRollupColumnId
         );
 
-        if (ncLookupColumnId === undefined) {
+        if (
+          ncLookupColumnId === undefined ||
+          ncRelationColumnId === undefined
+        ) {
           continue;
         }
 
@@ -1146,7 +1149,7 @@ export default async (
         nestedLookupTbl[0].typeOptions.foreignTableRollupColumnId
       );
 
-      if (ncLookupColumnId === undefined) {
+      if (ncLookupColumnId === undefined || ncRelationColumnId === undefined) {
         continue;
       }
 
diff --git a/scripts/cypress/integration/common/6d_language_validation.js b/scripts/cypress/integration/common/6d_language_validation.js
index bc0aef203c..0123ddd010 100644
--- a/scripts/cypress/integration/common/6d_language_validation.js
+++ b/scripts/cypress/integration/common/6d_language_validation.js
@@ -44,6 +44,7 @@ export const genTest = (apiType, dbType) => {
         };
 
         let langMenu = [
+            "bn.json",
             "da.json",
             "de.json",
             "en.json",
@@ -51,6 +52,7 @@ export const genTest = (apiType, dbType) => {
             "fa.json",
             "fi.json",
             "fr.json",
+            "hi.json",
             "hr.json",
             "id.json",
             "it_IT.json",