diff --git a/packages/nc-gui-v2/.eslintrc.js b/packages/nc-gui-v2/.eslintrc.js
index 140e59ec6a..f7291c452f 100644
--- a/packages/nc-gui-v2/.eslintrc.js
+++ b/packages/nc-gui-v2/.eslintrc.js
@@ -2,6 +2,11 @@ const baseRules = {
   'vue/no-setup-props-destructure': 0,
   'no-console': 0,
   'antfu/if-newline': 0,
+  'no-unused-vars': 0,
+  '@typescript-eslint/no-unused-vars': [
+    'error',
+    { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
+  ],
   'prettier/prettier': ['error', {}, { usePrettierrc: true }],
 }
 
diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 3fe585a1a1..28c63b040c 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -1,96 +1,5 @@
-<script lang="ts" setup>
-import { navigateTo } from '#app'
-import { useGlobal } from '#imports'
-
-const state = useGlobal()
-
-const sidebar = ref<HTMLDivElement>()
-
-const email = computed(() => state.user.value?.email ?? '---')
-
-const signOut = () => {
-  state.signOut()
-  navigateTo('/signin')
-}
-
-const sidebarCollapsed = computed({
-  get: () => !state.sidebarOpen.value,
-  set: (val) => (state.sidebarOpen.value = !val),
-})
-
-const toggleSidebar = () => {
-  sidebarCollapsed.value = !sidebarCollapsed.value
-}
-</script>
-
 <template>
-  <a-layout class="min-h-[100vh]">
-    <a-layout-header class="flex !bg-primary items-center text-white px-4 shadow-md">
-      <material-symbols-menu v-if="state.signedIn.value" class="text-xl cursor-pointer" @click="toggleSidebar" />
-
-      <div class="flex-1" />
-
-      <div class="ml-4 flex justify-center shrink">
-        <div class="flex items-center gap-2 cursor-pointer nc-noco-brand-icon" @click="navigateTo('/')">
-          <img width="35" src="~/assets/img/icons/512x512-trans.png" />
-          <span class="prose-xl">NocoDB</span>
-        </div>
-      </div>
-
-      <div class="flex-1 text-left">
-        <div v-show="state.isLoading.value" class="flex items-center gap-2 ml-3">
-          {{ $t('general.loading') }}
-          <mdi-reload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
-        </div>
-      </div>
-
-      <div class="flex justify-end gap-4">
-        <general-language class="mr-3" />
-
-        <template v-if="state.signedIn.value">
-          <a-dropdown :trigger="['click']">
-            <mdi-dots-vertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
-
-            <template #overlay>
-              <a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
-                <a-menu-item key="0" class="!rounded-t">
-                  <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
-                    <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
-                    <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
-                  </nuxt-link>
-                </a-menu-item>
-
-                <a-menu-divider class="!m-0" />
-
-                <a-menu-item key="1" class="!rounded-b">
-                  <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
-                    <mdi-logout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
-
-                    <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
-                      {{ $t('general.signOut') }}
-                    </span>
-                  </div>
-                </a-menu-item>
-              </a-menu>
-            </template>
-          </a-dropdown>
-        </template>
-      </div>
-    </a-layout-header>
-
-    <a-layout>
-      <a-layout-sider
-        v-model:collapsed="sidebarCollapsed"
-        width="300"
-        collapsed-width="0"
-        class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
-        :trigger="null"
-        collapsible
-      >
-        <div id="sidebar" ref="sidebar" class="w-full h-full" />
-      </a-layout-sider>
-
-      <NuxtPage />
-    </a-layout>
-  </a-layout>
+  <NuxtLayout name="base">
+    <NuxtPage />
+  </NuxtLayout>
 </template>
diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 462ee5f05b..9bc1f12ce1 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -2,7 +2,7 @@
 @import 'ant-design-vue/dist/antd.min.css';
 
 :root {
-  --header-height: 56px;
+  --header-height: 50px;
 }
 
 .ant-layout-header {
@@ -18,7 +18,7 @@ main {
 }
 
 main {
-  @apply flex-0 w-full relative scrollbar-thin-primary;
+  @apply flex-0 w-full relative scrollbar-thin-dull;
   overflow-x: hidden;
 }
 
@@ -75,7 +75,7 @@ html {
 
 // menu item styling
 .nc-menu-item {
-  @apply cursor-pointer text-xs flex align-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0  w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
+  @apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
 }
 
 .nc-sidebar-right-item {
@@ -106,5 +106,5 @@ html {
 }
 
 .ant-modal-wrap {
-  @apply !scrollbar-thin-primary;
+  @apply !scrollbar-thin-dull;
 }
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 0e5864cd54..208e7f88ab 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
@@ -40,14 +41,12 @@ declare module '@vue/runtime-core' {
     AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
-    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
-    ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
     ASkeletonImage: typeof import('ant-design-vue/es')['SkeletonImage']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
@@ -61,12 +60,68 @@ declare module '@vue/runtime-core' {
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
+    CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
+    CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
+    IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
+    IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
+    MaterialSymbolsArrowBackRounded: typeof import('~icons/material-symbols/arrow-back-rounded')['default']
+    MaterialSymbolsArrowForwardRounded: typeof import('~icons/material-symbols/arrow-forward-rounded')['default']
+    MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
+    MaterialSymbolsChevronLeftRounded: typeof import('~icons/material-symbols/chevron-left-rounded')['default']
+    MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
+    MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
+    MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
+    MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
+    MdiApi: typeof import('~icons/mdi/api')['default']
+    MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
+    MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
+    MdiCalculator: typeof import('~icons/mdi/calculator')['default']
+    MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
+    MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
+    MdiChat: typeof import('~icons/mdi/chat')['default']
+    MdiCheck: typeof import('~icons/mdi/check')['default']
+    MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
+    MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    MdiContentSave: typeof import('~icons/mdi/content-save')['default']
+    MdiDatabase: typeof import('~icons/mdi/database')['default']
+    MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    MdiDownload: typeof import('~icons/mdi/download')['default']
+    MdiDrag: typeof import('~icons/mdi/drag')['default']
+    MdiEmail: typeof import('~icons/mdi/email')['default']
+    MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
+    MdiFlag: typeof import('~icons/mdi/flag')['default']
+    MdiFolder: typeof import('~icons/mdi/folder')['default']
+    MdiFunction: typeof import('~icons/mdi/function')['default']
+    MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
+    MdiHeart: typeof import('~icons/mdi/heart')['default']
+    MdiHook: typeof import('~icons/mdi/hook')['default']
+    MdiInformation: typeof import('~icons/mdi/information')['default']
+    MdiLink: typeof import('~icons/mdi/link')['default']
+    MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
+    MdiMagnify: typeof import('~icons/mdi/magnify')['default']
+    MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
+    MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
+    MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
+    MdiNotebookCheckOutline: typeof import('~icons/mdi/notebook-check-outline')['default']
+    MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiPlus: typeof import('~icons/mdi/plus')['default']
+    MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
-    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
+    MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
+    MdiSlack: typeof import('~icons/mdi/slack')['default']
+    MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiStore: typeof import('~icons/mdi/store')['default']
+    MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
+    MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
+    MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
+    MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
+    MdiXml: typeof import('~icons/mdi/xml')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index 54bfdc53d2..85cdd3cf63 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { VNodeRef } from '@vue/runtime-core'
 import { computed, inject, ref, useVModel } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
@@ -10,35 +11,34 @@ const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj, ref(false))
 
-const root = ref<HTMLInputElement>()
-
 const vModel = useVModel(props, 'modelValue', emit)
 
 const currencyMeta = computed(() => {
   return {
     currency_locale: 'en-US',
     currency_code: 'USD',
-    ...(column?.value?.meta ? column?.value?.meta : {}),
+    ...(column.value.meta ? column.value.meta : {}),
   }
 })
+
 const currency = computed(() => {
   try {
-    return isNaN(vModel.value)
+    return !vModel.value || isNaN(vModel.value)
       ? vModel.value
-      : new Intl.NumberFormat(currencyMeta?.value?.currency_locale || 'en-US', {
+      : new Intl.NumberFormat(currencyMeta.value.currency_locale || 'en-US', {
           style: 'currency',
-          currency: currencyMeta?.value?.currency_code || 'USD',
+          currency: currencyMeta.value.currency_code || 'USD',
         }).format(vModel.value)
   } catch (e) {
     return vModel.value
   }
 })
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index 7f1ef4c114..92a1c1b52f 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref } from '#imports'
+import type { VNodeRef } from '@vue/runtime-core'
+import { inject, ref, useVModel } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
@@ -14,13 +15,11 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>(EditModeInj)
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index ab10f0aebb..aeaf37fa1f 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, useVModel } from '#imports'
+import type { VNodeRef } from '@vue/runtime-core'
+import { computed, inject, ref, useVModel } from '#imports'
 import { isEmail } from '~/utils'
 import { EditModeInj } from '~/context'
 
@@ -19,13 +20,13 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const validEmail = computed(() => isEmail(vModel.value))
+const validEmail = computed(() => vModel.value && isEmail(vModel.value))
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" @blur="editEnabled = false" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none prose-sm" @blur="editEnabled = false" />
   <a v-else-if="validEmail" class="prose-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
   </a>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index ff836dcad5..12db66e6a6 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { VNodeRef } from '@vue/runtime-core'
 import { inject, ref, useVModel } from '#imports'
 import { EditModeInj } from '~/context'
 
@@ -18,7 +19,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index f62ef8e345..0e2af500f0 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { VNodeRef } from '@vue/runtime-core'
 import { inject, ref, useVModel } from '#imports'
 import { EditModeInj } from '~/context'
 
@@ -18,7 +19,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 function onKeyDown(evt: KeyboardEvent) {
   return evt.key === '.' && evt.preventDefault()
diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index cf98c46c49..98b8944b29 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
-import FullScreenIcon from '~icons/cil/fullscreen'
-import FullScreenExitIcon from '~icons/cil/fullscreen-exit'
-import { inject } from '#imports'
+import { computed, inject, ref, useVModel, watch } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
@@ -20,27 +18,29 @@ const emits = defineEmits<Emits>()
 
 const editEnabled = inject(EditModeInj, ref(false))
 
-let vModel = $(useVModel(props, 'modelValue', emits))
+const vModel = useVModel(props, 'modelValue', emits)
 
-let localValueState = $ref<string | undefined>(undefined)
-let localValue = $(
-  computed<string | undefined>({
-    get: () => localValueState,
-    set: (val: undefined | string | Record<string, any>) => {
-      localValueState = typeof val === 'object' ? JSON.stringify(val, null, 2) : val
-    },
-  }),
-)
+const localValueState = ref<string | undefined>()
+
+const localValue = computed<string | Record<string, any> | undefined>({
+  get: () => localValueState.value,
+  set: (val: undefined | string | Record<string, any>) => {
+    localValueState.value = typeof val === 'object' ? JSON.stringify(val, null, 2) : val
+  },
+})
+
+let error = $ref<string | undefined>()
 
-let error = $ref<string | undefined>(undefined)
 let isExpanded = $ref(false)
 
 const clear = () => {
   error = undefined
+
   isExpanded = false
+
   editEnabled.value = false
 
-  localValue = vModel
+  localValue.value = vModel.value
 }
 
 const formatJson = (json: string) => {
@@ -53,22 +53,26 @@ const formatJson = (json: string) => {
 
 const onSave = () => {
   isExpanded = false
+
   editEnabled.value = false
-  localValue = localValue ? formatJson(localValue) : localValue
-  vModel = localValue
+
+  localValue.value = localValue ? formatJson(localValue.value as string) : localValue
+
+  vModel.value = localValue.value
 }
 
 watch(
-  $$(vModel),
+  vModel,
   (val) => {
-    localValue = val
+    localValue.value = val
   },
   { immediate: true },
 )
 
-watch($$(localValue), (val) => {
+watch(localValue, (val) => {
   try {
-    JSON.parse(val)
+    JSON.parse(val as string)
+
     error = undefined
   } catch (e: any) {
     error = e
@@ -77,7 +81,8 @@ watch($$(localValue), (val) => {
 
 watch(editEnabled, () => {
   isExpanded = false
-  localValue = vModel
+
+  localValue.value = vModel.value
 })
 </script>
 
@@ -86,16 +91,20 @@ watch(editEnabled, () => {
     <div v-if="editEnabled" class="flex flex-col w-full">
       <div class="flex flex-row justify-between pt-1 pb-2">
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">
-          <FullScreenExitIcon v-if="isExpanded" class="h-2.5" />
-          <FullScreenIcon v-else class="h-2.5" />
+          <CilFullscreenExit v-if="isExpanded" class="h-2.5" />
+
+          <CilFullscreen v-else class="h-2.5" />
         </a-button>
+
         <div class="flex flex-row">
           <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
+
           <a-button type="primary" size="small" :disabled="!!error || localValue === vModel">
             <div class="text-xs" :onclick="onSave">Save</div>
           </a-button>
         </div>
       </div>
+
       <Editor
         :model-value="localValue"
         class="min-w-full w-80"
@@ -104,10 +113,12 @@ watch(editEnabled, () => {
         :disable-deep-compare="true"
         @update:model-value="localValue = $event"
       />
+
       <span v-if="error" class="text-xs w-full py-1 text-red-500">
         {{ error.toString() }}
       </span>
     </div>
+
     <span v-else>{{ vModel }}</span>
   </component>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index cc23e23db1..4974c2e4d0 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -1,22 +1,17 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
 import { ColumnInj } from '~/context'
-import MdiStarIcon from '~icons/mdi/star'
-import MdiHeartIcon from '~icons/mdi/heart'
-import MdiMoonFullIcon from '~icons/mdi/moon-full'
-import MdiThumbUpIcon from '~icons/mdi/thumb-up'
-import MdiFlagIcon from '~icons/mdi/flag'
 
 interface Props {
   modelValue?: number | null
   readOnly?: boolean
 }
 
-const props = defineProps<Props>()
+const { modelValue, readOnly } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
 const ratingMeta = computed(() => {
   return {
@@ -26,21 +21,24 @@ const ratingMeta = computed(() => {
     },
     color: '#fcb401',
     max: 5,
-    ...(column?.value?.meta || {}),
+    ...(column.value?.meta || {}),
   }
 })
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = computed({
+  get: () => modelValue ?? NaN,
+  set: (val) => emits('update:modelValue', val),
+})
 </script>
 
 <template>
-  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="props.readOnly">
+  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="readOnly">
     <template #character>
-      <MdiStarIcon v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
-      <MdiHeartIcon v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />
-      <MdiMoonFullIcon v-if="ratingMeta.icon.full === 'mdi-moon-full'" class="text-sm" />
-      <MdiThumbUpIcon v-if="ratingMeta.icon.full === 'mdi-thumb-up'" class="text-sm" />
-      <MdiFlagIcon v-if="ratingMeta.icon.full === 'mdi-flag'" class="text-sm" />
+      <MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
+      <MdiHeart v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />
+      <MdiMoonFull v-if="ratingMeta.icon.full === 'mdi-moon-full'" class="text-sm" />
+      <MdiThumbUp v-if="ratingMeta.icon.full === 'mdi-thumb-up'" class="text-sm" />
+      <MdiFlag v-if="ratingMeta.icon.full === 'mdi-flag'" class="text-sm" />
     </template>
   </a-rate>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 2511d3404a..75821474b8 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, EditModeInj } from '~/context'
+import { ColumnInj } from '~/context'
 
 interface Props {
   modelValue: string | null
@@ -10,16 +10,14 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)
-const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject(EditModeInj, ref(false))
+const column = inject(ColumnInj)!
 
 const vModel = computed({
   get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
   set: (val) => emit('update:modelValue', val),
 })
 
-const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => column.value.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index ccd0bca0c7..c259124dbb 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { VNodeRef } from '@vue/runtime-core'
 import { inject, ref, useVModel } from '#imports'
 import { EditModeInj } from '~/context'
 
@@ -14,7 +15,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index c27933fe56..765d8d61e2 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
-import { inject, ref, useVModel } from '#imports'
+import type { VNodeRef } from '@vue/runtime-core'
+import { computed, inject, ref } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null
 }
 
-const props = defineProps<Props>()
+const { modelValue } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = computed({
+  get: () => modelValue ?? '',
+  set: (value) => emits('update:modelValue', value),
+})
 
-const focus = (el: HTMLTextAreaElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 1bfcdb39df..a5686bfef2 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import type { VNodeRef } from '@vue/runtime-core'
+import { computed, inject, ref } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 import { isValidURL } from '~/utils'
 
@@ -11,14 +12,14 @@ const { modelValue: value } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = computed({
   get: () => value,
   set: (val) => {
-    if (!column?.value?.meta?.validate || isValidURL(val)) {
+    if (!column.value.meta?.validate || (val && isValidURL(val))) {
       emit('update:modelValue', val)
     }
   },
@@ -26,12 +27,12 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
   <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" @blur="editEnabled = false" />
-  <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
+  <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>
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 5e7e2b70ac..c17763bdce 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -4,11 +4,6 @@ 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()
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index d629504a5c..d1a385c2c9 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -60,7 +60,7 @@ onKeyDown('Escape', () => {
 /** 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
+    dropZoneRef.value = document.querySelector(`td[data-col="${column.value.id}"]`) as HTMLTableDataCellElement
   }
 })
 </script>
@@ -100,14 +100,14 @@ onMounted(() => {
     </div>
 
     <template v-if="visibleItems.length">
-      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 p-1 scrollbar-thin-primary">
+      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 p-1 scrollbar-thin-dull">
         <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"
+          class="nc-attachment flex items-center justify-center min-h-[50px]"
         >
           <a-tooltip placement="bottom">
             <template #title>
@@ -116,9 +116,8 @@ onMounted(() => {
 
             <nuxt-img
               v-if="isImage(item.title, item.mimetype)"
+              quality="75"
               placeholder
-              width="150"
-              height="150"
               :alt="item.title || `#${i}`"
               :src="item.url || item.data"
               class="ring-1 ring-gray-300 rounded"
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 9969bacf2a..1d897f9975 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -2,10 +2,8 @@
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { useToast } from 'vue-toastification'
-import SettingsModal from './settings/SettingsModal.vue'
-import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
+import { useProject, useTable, useTabs, watchEffect } from '#imports'
 import { useNuxtApp, useRoute } from '#app'
-import MdiSettingIcon from '~icons/mdi/cog'
 import MdiTable from '~icons/mdi/table'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
@@ -13,15 +11,17 @@ import MdiMenuDown from '~icons/mdi/chevron-down'
 import MdiPlus from '~icons/mdi/plus-circle-outline'
 import MdiDrag from '~icons/mdi/drag-vertical'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
-import MdiAPIDocIcon from '~icons/mdi/open-in-new'
 
 const { addTab } = useTabs()
+
 const toast = useToast()
+
 const { $api, $e } = useNuxtApp()
-const { isUIAllowed } = useUIPermission()
+
 const route = useRoute()
+
 const { tables, loadTables } = useProject(route.params.projectId as string)
-const { closeTab } = useTabs()
+
 const { deleteTable } = useTable()
 
 const tablesById = $computed<Record<string, TableType>>(() =>
@@ -31,12 +31,14 @@ const tablesById = $computed<Record<string, TableType>>(() =>
   }, {}),
 )
 
-const settingsDlg = ref(false)
 const showTableList = ref(true)
+
 const tableCreateDlg = ref(false)
-const tableDeleteDlg = ref(false)
+
 const menuRef = $ref<HTMLLIElement>()
+
 let key = $ref(0)
+
 let sortable: Sortable
 
 // todo: replace with vuedraggable
@@ -103,21 +105,14 @@ const icon = (table: TableType) => {
   }
 }
 
-const apiLink = computed(
-  () =>
-    // new URL(
-    `/api/v1/db/meta/projects/${route.params.projectId}/swagger`,
-  // todo: get siteUrl
-  // this.$store.state.project.appInfo && this.$store.state.project.appInfo.ncSiteUrl
-  // ),
-)
-
 const filterQuery = $ref('')
+
 const filteredTables = $computed(() => {
   return tables?.value?.filter((table) => !filterQuery || table?.title.toLowerCase()?.includes(filterQuery.toLowerCase()))
 })
 
 const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
+
 const setMenuContext = (type: 'table' | 'main', value?: any) => {
   contextMenuTarget.type = type
   contextMenuTarget.value = value
@@ -125,16 +120,20 @@ const setMenuContext = (type: 'table' | 'main', value?: any) => {
 }
 
 const renameTableDlg = ref(false)
+
 const renameTableMeta = ref()
+
 const showRenameTableDlg = (table: TableType, rightClick = false) => {
   $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
   renameTableMeta.value = table
   renameTableDlg.value = true
 }
+
 const reloadTables = async () => {
   $e('a:table:refresh:navdraw')
   await loadTables()
 }
+
 const addTableTab = (table: TableType) => {
   $e('a:table:open')
   addTab({ title: table.title, id: table.id, type: table.type as any })
@@ -142,8 +141,8 @@ const addTableTab = (table: TableType) => {
 </script>
 
 <template>
-  <div class="nc-treeview-container flex flex-column">
-    <div class="px-3 py-2">
+  <div class="nc-treeview-container flex flex-col">
+    <div class="px-2 py-[11.75px] border-b-1">
       <a-input-search
         v-model:value="filterQuery"
         size="small"
@@ -153,47 +152,73 @@ const addTableTab = (table: TableType) => {
     </div>
 
     <a-dropdown :trigger="['contextmenu']">
-      <div class="p-1 flex-1 overflow-y-auto flex flex-column scrollbar-thin-primary">
+      <div class="p-1 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull" style="direction: rtl">
         <div
+          style="direction: ltr"
           class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
           @click="showTableList = !showTableList"
           @contextmenu="setMenuContext('main')"
         >
           <MdiTable class="mr-1 text-gray-500" />
-          <span class="flex-grow text-bold nc-project-tree"
-            >{{ $t('objects.tables') }} <template v-if="tables?.length">({{ tables.length }})</template></span
-          >
-          <MdiPlus v-t="['c:table:create:navdraw']" class="text-gray-500 nc-btn-tbl-add" @click.stop="tableCreateDlg = true" />
+
+          <span class="flex-grow text-bold nc-project-tree">
+            {{ $t('objects.tables') }}
+
+            <template v-if="tables?.length"> ({{ tables.length }}) </template>
+          </span>
+
+          <MdiPlus
+            v-t="['c:table:create:navdraw']"
+            class="transform text-gray-500 hover:(text-pink-500 scale-105) nc-btn-tbl-add"
+            @click.stop="tableCreateDlg = true"
+          />
+
           <MdiMenuDown
-            class="transition-transform !duration-100 text-gray-500"
+            class="transition-transform !duration-100 text-gray-500 hover:text-pink-500"
             :class="{ 'transform rotate-180': showTableList }"
           />
         </div>
-        <div class="flex-1">
+        <div style="direction: ltr" class="flex-1">
           <div class="transition-height duration-200 overflow-hidden" :class="{ 'h-100': showTableList, 'h-0': !showTableList }">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
               <div
-                v-for="table in tables"
+                v-for="table of tables"
                 :key="table.id"
                 v-t="['a:table:open']"
-                :class="[{ hidden: !filteredTables?.includes(table) }, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`]"
-                class="!pl-1 py-1 !h-[28px] !my-0 text-sm cursor-pointer group"
+                :class="[
+                  { hidden: !filteredTables?.includes(table) },
+                  `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                  route.params.title && route.params.title.includes(table.title) ? 'bg-blue-500/15' : '',
+                ]"
+                class="pl-5 pr-3 py-2 text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
                 @click="addTableTab(table)"
               >
-                <div class="flex align-center gap-1 h-full" @contextmenu="setMenuContext('table', table)">
-                  <MdiDrag
-                    :class="`transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move nc-child-draggable-icon-${table.title}`"
-                  />
-                  <component :is="icon(table)" class="text-[10px] text-gray-500" />
+                <div class="flex align-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+                  <div class="flex w-auto">
+                    <MdiDrag
+                      :class="`nc-child-draggable-icon-${table.title}`"
+                      class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                      @click.stop.prevent
+                    />
+
+                    <component
+                      :is="icon(table)"
+                      :class="route.params.title && route.params.title.includes(table.title) ? 'text-pink-500' : 'text-gray-500'"
+                      class="nc-view-icon group-hover:hidden text-xs"
+                    />
+                  </div>
+
+                  <div class="nc-tbl-title text-xs flex-1">{{ table.title }}</div>
 
-                  <span class="nc-tbl-title text-xs flex-1 ml-2">{{ table.title }}</span>
                   <a-dropdown :trigger="['click']" @click.stop>
                     <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
+
                     <template #overlay>
                       <a-menu class="cursor-pointer">
                         <a-menu-item v-t="" class="!text-xs" @click="showRenameTableDlg(table)"><div>Rename</div></a-menu-item>
+
                         <a-menu-item class="!text-xs" @click="deleteTable(table)"> Delete</a-menu-item>
                       </a-menu>
                     </template>
@@ -223,28 +248,13 @@ const addTableTab = (table: TableType) => {
         </a-menu>
       </template>
     </a-dropdown>
-    <div class="w-full h-[1px] bg-gray-200" />
-    <a v-if="isUIAllowed('apiDocs')" v-t="['e:api-docs']" class="nc-treeview-footer-item" :href="apiLink" target="_blank">
-      <MdiAPIDocIcon class="mr-2" />
-      <span> {{ $t('title.apiDocs') }}</span>
-    </a>
-    <div
-      v-if="isUIAllowed('settings')"
-      v-t="['c:navdraw:project-settings']"
-      class="nc-treeview-footer-item nc-team-settings"
-      @click="settingsDlg = true"
-    >
-      <MdiSettingIcon class="mr-2" />
-      <span> {{ $t('title.teamAndSettings') }}</span>
-    </div>
 
-    <SettingsModal :show="settingsDlg" @closed="settingsDlg = false" />
     <DlgTableCreate v-if="tableCreateDlg" v-model="tableCreateDlg" />
     <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .nc-treeview-container {
   @apply h-[calc(100vh_-_var(--header-height))];
 }
@@ -264,4 +274,29 @@ const addTableTab = (table: TableType) => {
 :deep(.ant-input-group-addon:last-child) {
   @apply top-[-0.5px];
 }
+
+.nc-treeview-container {
+  .ghost,
+  .ghost > * {
+    @apply !pointer-events-none;
+  }
+
+  &.dragging {
+    .nc-icon {
+      @apply !hidden;
+    }
+
+    .nc-view-icon {
+      @apply !block;
+    }
+  }
+
+  .ant-menu-item:not(.sortable-chosen) {
+    @apply color-transition hover:!bg-transparent;
+  }
+
+  .sortable-chosen {
+    @apply !bg-primary/25 text-primary;
+  }
+}
 </style>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
similarity index 74%
rename from packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
rename to packages/nc-gui-v2/components/dashboard/settings/Modal.vue
index 7484162ef8..1e9f6b268c 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
@@ -10,9 +10,11 @@ import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
 import NootbookOutline from '~icons/mdi/notebook-outline'
+import { useVModel, watch } from '#imports'
 
 interface Props {
-  show: boolean
+  modelValue: boolean
+  openKey?: string
 }
 
 interface SubTabGroup {
@@ -30,9 +32,11 @@ interface TabGroup {
   }
 }
 
-const { show } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emits = defineEmits(['closed'])
+const emits = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(props, 'modelValue', emits)
 
 const tabsInfo: TabGroup = {
   teamAndAuth: {
@@ -41,11 +45,11 @@ const tabsInfo: TabGroup = {
     subTabs: {
       usersManagement: {
         title: 'Users Management',
-        body: () => UserManagement,
+        body: UserManagement,
       },
       apiTokenManagement: {
         title: 'API Token Management',
-        body: () => ApiTokenManagement,
+        body: ApiTokenManagement,
       },
     },
   },
@@ -55,7 +59,7 @@ const tabsInfo: TabGroup = {
     subTabs: {
       new: {
         title: 'Apps',
-        body: () => AppStore,
+        body: AppStore,
       },
     },
   },
@@ -65,11 +69,11 @@ const tabsInfo: TabGroup = {
     subTabs: {
       metaData: {
         title: 'Metadata',
-        body: () => Metadata,
+        body: Metadata,
       },
       acl: {
         title: 'UI Access Control',
-        body: () => UIAcl,
+        body: UIAcl,
       },
     },
   },
@@ -79,7 +83,7 @@ const tabsInfo: TabGroup = {
     subTabs: {
       audit: {
         title: 'Audit',
-        body: () => AuditTab,
+        body: AuditTab,
       },
     },
   },
@@ -88,7 +92,7 @@ const tabsInfo: TabGroup = {
 const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
 
 // Array of keys of tabs which are selected. In our case will be only one.
-const selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
+let selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
 const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
 
 let selectedSubTabKeys = $ref<string[]>([firstKeyOfObject(selectedTab.subTabs)])
@@ -100,18 +104,27 @@ watch(
     selectedSubTabKeys = [firstKeyOfObject(tabsInfo[newTabKey].subTabs)]
   },
 )
+
+watch(
+  () => props.openKey,
+  (nextOpenKey) => {
+    selectedTabKeys = [Object.keys(tabsInfo).find((key) => key === nextOpenKey) || firstKeyOfObject(tabsInfo)]
+  },
+)
 </script>
 
 <template>
-  <a-modal :footer="null" :visible="show" width="max(90vw, 600px)" @cancel="emits('closed')">
+  <a-modal v-model:visible="vModel" :footer="null" width="max(90vw, 600px)" @cancel="emits('update:modelValue', false)">
     <a-typography-title class="ml-4 mb-2 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
-    <a-layout class="mt-3 modal-body">
+
+    <a-layout class="mt-3 modal-body flex">
       <!-- Side tabs -->
       <a-layout-sider theme="light">
-        <a-menu v-model:selectedKeys="selectedTabKeys" class="h-full" mode="inline" :open-keys="[]">
+        <a-menu v-model:selected-keys="selectedTabKeys" class="h-full" mode="inline" :open-keys="[]">
           <a-menu-item v-for="(tab, key) of tabsInfo" :key="key">
             <div class="flex flex-row items-center space-x-2">
               <component :is="tab.icon" class="flex" />
+
               <div class="flex select-none">
                 {{ tab.title }}
               </div>
@@ -121,14 +134,14 @@ watch(
       </a-layout-sider>
 
       <!-- Sub Tabs -->
-      <a-layout-content class="h-full px-4 scrollbar-thumb-gray-500">
+      <a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
         <a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal">
           <a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="select-none">
             {{ tab.title }}
           </a-menu-item>
         </a-menu>
 
-        <component :is="selectedSubTab.body()" class="px-2 py-6" />
+        <component :is="selectedSubTab.body" class="px-2 py-6" />
       </a-layout-content>
     </a-layout>
   </a-modal>
@@ -136,6 +149,6 @@ watch(
 
 <style scoped>
 .modal-body {
-  @apply h-[70vh];
+  @apply min-h-[75vh];
 }
 </style>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 41c4d41f93..e5f17f339e 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { viewIcons } from '~/utils/viewUtils'
-import { h, useNuxtApp, useProject } from '#imports'
-import MdiReload from '~icons/mdi/reload'
-import MdiContentSave from '~icons/mdi/content-save'
-import MdiMagnify from '~icons/mdi/magnify'
+import { viewIcons } from '~/utils'
+import { computed, h, useNuxtApp, useProject } from '#imports'
 
 const { $api, $e } = useNuxtApp()
+
 const { project } = useProject()
+
 const toast = useToast()
 
 const roles = $ref<string[]>(['editor', 'commenter', 'viewer'])
+
 let isLoading = $ref(false)
+
 let tables = $ref<any[]>([])
+
 const searchInput = $ref('')
 
 const filteredTables = computed(() =>
@@ -30,7 +32,7 @@ async function loadTableList() {
     isLoading = true
     // TODO includeM2M
     tables = await $api.project.modelVisibilityList(project.value?.id, {
-      includeM2M: '',
+      includeM2M: true,
     })
   } catch (e) {
     console.error(e)
diff --git a/packages/nc-gui-v2/components/general/Language.vue b/packages/nc-gui-v2/components/general/Language.vue
index db7dbed349..682f58002f 100644
--- a/packages/nc-gui-v2/components/general/Language.vue
+++ b/packages/nc-gui-v2/components/general/Language.vue
@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import MaterialSymbolsTranslate from '~icons/material-symbols/translate'
-import { Language } from '~/lib/enums'
+import { Language } from '~/lib'
+import { useNuxtApp } from '#imports'
 
 const { $e, $state } = useNuxtApp()
 
 const { availableLocales = ['en'], locale } = useI18n()
 
-const languages = $computed(() => {
-  return availableLocales.sort()
-})
+const languages = $computed(() => availableLocales.sort())
 
 const isRtlLang = $computed(() => ['fa'].includes($state.lang.value))
 
@@ -36,12 +34,13 @@ onMounted(() => {
 <template>
   <v-menu class="select-none">
     <template #activator="{ props }">
-      <MaterialSymbolsTranslate class="md:text-xl cursor-pointer nc-menu-translate" @click="props.onClick" />
+      <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" @click="props.onClick" />
     </template>
+
     <v-list class="scrollbar min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
       <v-list-item
         v-for="lang of languages"
-        :key="lang.value"
+        :key="lang"
         :class="lang === locale ? '!bg-primary/10 text-primary dark:(!bg-gray-700 !text-secondary)' : ''"
         class="!min-h-8 group"
         :value="lang"
diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
new file mode 100644
index 0000000000..ff218455c4
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import { breakpointsTailwind } from '@vueuse/core'
+import { navigateTo } from '#app'
+import { computed, useBreakpoints, useGlobal, useProject, useRoute, useSidebar } from '#imports'
+
+/** get current breakpoints (for enabling sidebar) */
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const { signOut, signedIn, isLoading, user } = useGlobal()
+
+const { isOpen } = useSidebar({ isOpen: true })
+
+const { project } = useProject()
+
+const route = useRoute()
+
+const email = computed(() => user.value?.email ?? '---')
+
+const logout = () => {
+  signOut()
+  navigateTo('/signin')
+}
+</script>
+
+<template>
+  <a-layout-sider
+    :collapsed="isOpen"
+    width="50"
+    collapsed-width="0"
+    class="nc-mini-sidebar !bg-primary h-full"
+    :trigger="null"
+    collapsible
+    theme="light"
+  >
+    <a-dropdown placement="bottom" :trigger="['click']">
+      <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105">
+        <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+      </div>
+
+      <template v-if="signedIn" #overlay>
+        <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded">
+          <a-menu-item-group title="User Settings">
+            <a-menu-item key="email" class="!rounded-t">
+              <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
+                <MdiAt class="mt-1 group-hover:text-success" />
+                &nbsp;
+                <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
+              </nuxt-link>
+            </a-menu-item>
+
+            <a-menu-divider class="!m-0" />
+
+            <a-menu-item key="signout" class="!rounded-b">
+              <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
+                <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
+                <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
+                  {{ $t('general.signOut') }}
+                </span>
+              </div>
+            </a-menu-item>
+          </a-menu-item-group>
+        </a-menu>
+      </template>
+    </a-dropdown>
+
+    <div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
+      <a-dropdown :trigger="['contextmenu']" placement="right">
+        <div :class="[route.name === 'index' ? 'active' : '']" class="nc-mini-sidebar-item" @click="navigateTo('/')">
+          <MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
+        </div>
+
+        <template #overlay>
+          <a-menu class="mt-6 select-none !py-0 min-w-32 leading-8 !rounded">
+            <a-menu-item-group>
+              <template #title>
+                <span class="cursor-pointer prose-sm text-gray-500 hover:text-primary" @click="navigateTo('/')">
+                  {{ $t('objects.projects') }}
+                </span>
+              </template>
+
+              <a-menu-item class="active:(ring ring-pink-500)">
+                <div
+                  v-t="['c:project:create:xcdb']"
+                  class="group flex items-center gap-2 py-2 hover:text-primary"
+                  @click="navigateTo('/project/create')"
+                >
+                  <MdiPlus class="text-lg group-hover:text-pink-500" />
+                  {{ $t('activity.createProject') }}
+                </div>
+              </a-menu-item>
+
+              <a-menu-item class="rounded-b active:(ring ring-pink-500)">
+                <div
+                  v-t="['c:project:create:extdb']"
+                  class="group flex items-center gap-2 py-2 hover:text-primary"
+                  @click="navigateTo('/project/create-external')"
+                >
+                  <MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
+                  <div v-html="$t('activity.createProjectExtended.extDB')" />
+                </div>
+              </a-menu-item>
+            </a-menu-item-group>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
+      <a-tooltip placement="right">
+        <template v-if="project" #title>{{ project.title }}</template>
+
+        <div
+          :class="[route.name.includes('nc-projectId') ? 'active' : 'pointer-events-none !text-gray-400']"
+          class="nc-mini-sidebar-item"
+          @click="navigateTo(`/nc/${route.params.projectId}`)"
+        >
+          <MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
+        </div>
+      </a-tooltip>
+    </div>
+  </a-layout-sider>
+</template>
+
+<style lang="scss" scoped>
+.nc-mini-sidebar {
+  :deep(.ant-layout-sider-children) {
+    @apply flex flex-col items-center;
+  }
+
+  .nc-mini-sidebar-item {
+    @apply flex w-full justify-center items-center h-12 group p-2;
+
+    &.active {
+      @apply bg-pink-500 border-t-1 border-b-1;
+    }
+  }
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
index 85d1378b55..6a952ccf67 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { useColumnCreateStoreOrThrow } from '#imports'
+import type { UITypes } from 'nocodb-sdk'
+import { computed, useColumnCreateStoreOrThrow } from '#imports'
 
-const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+const { formState, validateInfos, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()!
 
-const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(formState))
+// todo: 2nd argument of `getDataTypeListForUiType` is missing!
+const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(formState.value as { uidt: UITypes }, '' as any))
 
 // to avoid type error with checkbox
 formState.value.rqd = !!formState.value.rqd
@@ -21,7 +23,7 @@ formState.value.au = !!formState.value.au
           v-model:checked="formState.rqd"
           :disabled="formState.pk || !sqlUi.columnEditable(formState)"
           size="small"
-          class="nc-column-name-input"
+          class="nc-column-checkbox-NN"
           @change="onAlter"
         />
       </a-form-item>
@@ -30,7 +32,7 @@ formState.value.au = !!formState.value.au
           v-model:checked="formState.pk"
           :disabled="!sqlUi.columnEditable(formState)"
           size="small"
-          class="nc-column-name-input"
+          class="nc-column-checkbox-PK"
           @change="onAlter"
         />
       </a-form-item>
@@ -39,7 +41,7 @@ formState.value.au = !!formState.value.au
           v-model:checked="formState.ai"
           :disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
           size="small"
-          class="nc-column-name-input"
+          class="nc-column-checkbox-AI"
           @change="onAlter"
         />
       </a-form-item>
@@ -48,14 +50,14 @@ formState.value.au = !!formState.value.au
         :disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
         @change="onAlter"
       >
-        <a-checkbox v-model:checked="formState.un" size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.un" size="small" class="nc-column-checkbox-UN" />
       </a-form-item>
       <a-form-item
         label="AU"
         :disabled="sqlUi.colPropAuDisabled(formState) || !sqlUi.columnEditable(formState)"
         @change="onAlter"
       >
-        <a-checkbox v-model:checked="formState.au" size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.au" size="small" class="nc-column-checkbox-AU" />
       </a-form-item>
     </div>
     <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
@@ -82,5 +84,3 @@ formState.value.au = !!formState.value.au
     </a-form-item>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
index 1d2d4c3864..c407b1cd25 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
@@ -3,7 +3,7 @@ import { Sketch } from '@ckpack/vue-color'
 import { useColumnCreateStoreOrThrow } from '#imports'
 import { enumColor, getMdiIcon } from '@/utils'
 
-const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+const { formState } = useColumnCreateStoreOrThrow()
 
 // cater existing v1 cases
 const iconList = [
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index edd3350798..07ba7b0491 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -113,7 +113,7 @@ watch(
           v-model:value="formState.uidt"
           show-search
           size="small"
-          class="nc-column-name-input"
+          class="nc-column-type-input"
           @change="onUidtOrIdTypeChange"
         >
           <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 0acfc5732b..b804ba5fef 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -4,7 +4,7 @@ import type { ListItem as AntListItem } from 'ant-design-vue'
 import jsep from 'jsep'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
-import { useColumnCreateStoreOrThrow, useDebounceFn } from '#imports'
+import { onMounted, useColumnCreateStoreOrThrow, useDebounceFn } from '#imports'
 import { MetaInj } from '~/context'
 import {
   NcAutocompleteTree,
@@ -16,8 +16,6 @@ import {
   insertAtCursor,
   validateDateWithUnknownFormat,
 } from '@/utils'
-import MdiFunctionIcon from '~icons/mdi/function'
-import MdiOperatorIcon from '~icons/mdi/calculator'
 
 enum JSEPNode {
   COMPOUND = 'Compound',
@@ -31,8 +29,7 @@ enum JSEPNode {
   ARRAY_EXP = 'ArrayExpression',
 }
 
-const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter, column } =
-  useColumnCreateStoreOrThrow()
+const { formState, validateInfos, setAdditionalValidations, sqlUi, column } = useColumnCreateStoreOrThrow()
 
 const meta = inject(MetaInj)
 
@@ -72,8 +69,6 @@ const wordToComplete = ref<string | undefined>('')
 
 const selected = ref(0)
 
-const tooltip = ref(true)
-
 const sortOrder: Record<string, number> = {
   column: 0,
   function: 1,
@@ -95,7 +90,7 @@ const suggestionsList = computed(() => {
     ...columns.value
       .filter(
         (c: Record<string, any>) =>
-          !column || (column.id !== c.id && !(c.uidt === UITypes.LinkToAnotherRecord && c.system === 1)),
+          !column || (column.value.id !== c.id && !(c.uidt === UITypes.LinkToAnotherRecord && c.system === 1)),
       )
       .map((c: any) => ({
         text: c.title,
@@ -230,7 +225,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
   } else if (parsedTree.type === JSEPNode.IDENTIFIER) {
     if (
       columns.value
-        .filter((c: Record<string, any>) => !column || column.id !== c.id)
+        .filter((c: Record<string, any>) => !column || column.value.id !== c.id)
         .every((c: Record<string, any>) => c.title !== parsedTree.name)
     ) {
       errors.add(`Column '${parsedTree.name}' is not available`)
@@ -241,7 +236,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
 
     // get all formula columns excluding itself
     const formulaPaths = columns.value
-      .filter((c: Record<string, any>) => c.id !== column?.id && c.uidt === UITypes.Formula)
+      .filter((c: Record<string, any>) => c.id !== column?.value.id && c.uidt === UITypes.Formula)
       .reduce((res: Record<string, any>[], c: Record<string, any>) => {
         // in `formula`, get all the target neighbours
         // i.e. all column id (e.g. cl_xxxxxxxxxxxxxx) with formula type
@@ -256,9 +251,10 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
       }, [])
     // include target formula column (i.e. the one to be saved if applicable)
     const targetFormulaCol = columns.value.find((c: ColumnType) => c.title === parsedTree.name && c.uidt === UITypes.Formula)
-    if (targetFormulaCol) {
+
+    if (targetFormulaCol && column?.value.id) {
       formulaPaths.push({
-        [column.id]: [targetFormulaCol.id],
+        [column.value.id]: [targetFormulaCol.id],
       })
     }
     const vertices = formulaPaths.length
@@ -267,6 +263,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
       const adj = new Map()
       const inDegrees = new Map()
       // init adjacency list & indegree
+
       for (const [_, v] of Object.entries(formulaPaths)) {
         const src = Object.keys(v)[0]
         const neighbours = v[src]
@@ -346,12 +343,14 @@ function validateAgainstType(parsedTree: any, expectedType: string, func: any, t
       }
     }
   } else if (parsedTree.type === JSEPNode.IDENTIFIER) {
-    const col = columns.value.find((c) => c.title === parsedTree.name) as Record<string, any>
+    const col = columns.value.find((c) => c.title === parsedTree.name)
+
     if (col === undefined) {
       return
     }
+
     if (col.uidt === UITypes.Formula) {
-      const foundType = getRootDataType(jsep(col?.formula_raw))
+      const foundType = getRootDataType(jsep((col as any).formula_raw))
       if (foundType === 'N/A') {
         typeErrors.add(`Not supported to reference column ${col.title}`)
       } else if (expectedType !== foundType) {
@@ -594,7 +593,7 @@ function getFormulaTypeName(type: string) {
 }
 
 // set default value
-formState.value.formula_raw = (column?.colOptions as Record<string, any>)?.formula_raw || ''
+formState.value.formula_raw = (column?.value?.colOptions as Record<string, any>)?.formula_raw || ''
 
 // set additional validations
 setAdditionalValidations({
@@ -659,19 +658,24 @@ onMounted(() => {
                   <div>({{ idx + 1 }}): {{ example }}</div>
                 </div>
               </template>
+
               <template #title>
                 <div class="flex">
                   <div class="flex-1">
                     {{ item.text }}
                   </div>
+
                   <div class="">
                     {{ getFormulaTypeName(item.type) }}
                   </div>
                 </div>
               </template>
+
               <template #avatar>
-                <MdiFunctionIcon v-if="item.type === 'function'" class="text-lg" />
-                <MdiOperatorIcon v-if="item.type === 'op'" class="text-lg" />
+                <MdiFunction v-if="item.type === 'function'" class="text-lg" />
+
+                <MdiCalculator v-if="item.type === 'op'" class="text-lg" />
+
                 <component :is="item.icon" v-if="item.type === 'column'" class="text-lg" />
               </template>
             </a-list-item-meta>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
index 620405f5b6..4865158f7e 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { TableType } from 'nocodb-sdk'
 import { ModelTypes, MssqlUi, SqliteUi } from 'nocodb-sdk'
-import { useColumnCreateStoreOrThrow } from '#imports'
+import { inject, useColumnCreateStoreOrThrow, useProject } from '#imports'
 import { MetaInj } from '~/context'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
 const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
 const { tables, sqlUi } = $(useProject())
-const meta: TableType = $(inject(MetaInj))
+const meta = $(inject(MetaInj)!)
 
 setAdditionalValidations({
   childId: [{ required: true, message: 'Required' }],
@@ -103,5 +102,3 @@ const refTables = $computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
index 6724440fdd..441ad7636f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
@@ -5,7 +5,7 @@ import { MetaInj } from '~/context'
 
 const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
 const { tables } = $(useProject())
-const meta = $(inject(MetaInj))
+const meta = $(inject(MetaInj)!)
 const { metas } = $(useMetas())
 
 setAdditionalValidations({
@@ -27,14 +27,17 @@ const refTables = $computed(() => {
     return []
   }
 
-  return meta.columns
-    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
-    .map((c) => ({
-      col: c.colOptions,
-      column: c,
-      ...tables.find((t) => t.id === c.colOptions.fk_related_model_id),
-    }))
-    .filter((table) => table.col.fk_related_model_id === table.id && !table.mm)
+  // todo: type issues with ColumnType so we have to cast to any
+  return (
+    meta.columns
+      ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions?.type !== 'bt' && !c.system)
+      .map((c) => ({
+        col: c.colOptions,
+        column: c,
+        ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
+      }))
+      .filter((table: any) => table.col?.fk_related_model_id === table.id && !table.mm) ?? []
+  )
 })
 
 const columns = $computed(() => {
@@ -43,7 +46,7 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c) => !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c: any) => !isSystemColumn(c))
 })
 </script>
 
@@ -52,14 +55,16 @@ const columns = $computed(() => {
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
         <a-select v-model:value="formState.fk_relation_column_id" size="small" @change="onDataTypeChange">
-          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+          <a-select-option v-for="(table, index) of refTables" :key="index" :value="table.col.fk_column_id">
             <div class="flex flex-row items-center space-x-0.5 h-full">
               <div class="font-weight-bold text-[0.7rem]">{{ table.column.title }}</div>
+
               <div class="text-[0.5rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
             </div>
           </a-select-option>
         </a-select>
       </a-form-item>
+
       <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id">
         <a-select
           v-model:value="formState.fk_lookup_column_id"
@@ -67,7 +72,7 @@ const columns = $computed(() => {
           size="small"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="(column, index) in columns" :key="index" :value="column.id">
+          <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
             {{ column.title }}
           </a-select-option>
         </a-select>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
index e3fa65240d..8273973062 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import { useColumnCreateStoreOrThrow } from '#imports'
+import { inject, useColumnCreateStoreOrThrow, useMetas, useProject } from '#imports'
 import { MetaInj } from '~/context'
 
 const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
+
 const { tables } = $(useProject())
-const meta = $(inject(MetaInj))
+
+const meta = $(inject(MetaInj)!)
+
 const { metas } = $(useMetas())
 
 setAdditionalValidations({
@@ -40,22 +43,25 @@ const refTables = $computed(() => {
     return []
   }
 
-  return meta.columns
-    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
-    .map((c) => ({
-      col: c.colOptions,
-      column: c,
-      ...tables.find((t) => t.id === c.colOptions.fk_related_model_id),
-    }))
+  return (
+    meta.columns
+      ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
+      .map((c) => ({
+        col: c.colOptions,
+        column: c,
+        ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
+      })) ?? []
+  )
 })
 
 const columns = $computed(() => {
   const selectedTable = refTables.find((t) => t.column.id === formState.fk_relation_column_id)
+
   if (!selectedTable?.id) {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c) => !isVirtualCol(c.uidt) && !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c: any) => !isVirtualCol(c.uidt) && !isSystemColumn(c))
 })
 </script>
 
@@ -64,7 +70,7 @@ const columns = $computed(() => {
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
         <a-select v-model:value="formState.fk_relation_column_id" size="small" @change="onDataTypeChange">
-          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+          <a-select-option v-for="(table, index) of refTables" :key="index" :value="table.col.fk_column_id">
             <div class="flex flex-row items-center space-x-0.5">
               <div class="font-weight-bold text-xs">{{ table.column.title }}</div>
               <div class="text-[0.45rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
@@ -79,7 +85,7 @@ const columns = $computed(() => {
           size="small"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="(column, index) in columns" :key="index" :value="column.id">
+          <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
             {{ column.title }}
           </a-select-option>
         </a-select>
@@ -87,12 +93,10 @@ const columns = $computed(() => {
     </div>
     <a-form-item label="Aggregate function" v-bind="validateInfos.rollup_function">
       <a-select v-model:value="formState.rollup_function" size="small" @change="onDataTypeChange">
-        <a-select-option v-for="(func, index) in aggrFunctionsList" :key="index" :value="func.value">
+        <a-select-option v-for="(func, index) of aggrFunctionsList" :key="index" :value="func.value">
           {{ func.text }}
         </a-select-option>
       </a-select>
     </a-form-item>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 54427dbf32..29bc87909f 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -2,20 +2,15 @@
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { inject, toRef } from 'vue'
-import { ColumnInj, IsFormInj, MetaInj } from '~/context'
+import { ColumnInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
-interface Props {
-  required?: boolean
-  column: ColumnType
-}
+const props = defineProps<{ column: ColumnType & { meta: any }; required: boolean; hideMenu?: boolean }>()
 
-const props = defineProps<{ column: ColumnType & { meta: any }; required: boolean }>()
+const hideMenu = toRef(props, 'hideMenu')
 
 const meta = inject(MetaInj)
 
-const isForm = inject(IsFormInj)
-
 const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
@@ -30,8 +25,10 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
 
-    <div class="flex-1" />
-    <SmartsheetHeaderMenu v-if="!isForm" />
+    <template v-if="!hideMenu">
+      <div class="flex-1" />
+      <SmartsheetHeaderMenu />
+    </template>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 83c4a5ac87..bc73968e60 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -65,7 +65,7 @@ function onVisibleChange() {
     </template>
   </a-dropdown>
   <a-dropdown :trigger="['hover']">
-    <MdiMenuDownIcon class="text-grey" />
+    <MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" />
     <template #overlay>
       <div class="shadow bg-white">
         <div class="nc-column-edit nc-menu-item" @click="editColumnDropdown = true">
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 7e25049fe2..c30ee25992 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -8,11 +8,9 @@ import { useMetas } from '~/composables'
 import { ColumnInj, IsFormInj, MetaInj } from '~/context'
 import { provide, useProvideColumnCreateStore } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; required: boolean }>()
-
-const isForm = inject(IsFormInj)
-
+const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required: boolean }>()
 const column = toRef(props, 'column')
+const hideMenu = toRef(props, 'hideMenu')
 
 provide(ColumnInj, column)
 
@@ -102,9 +100,11 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
     <!--    <span class="caption" v-html="tooltipMsg" /> -->
 
     <!--    </v-tooltip> -->
-    <v-spacer />
+    <template v-if="!hideMenu">
+      <v-spacer />
 
-    <SmartsheetHeaderMenu v-if="!isForm" :virtual="true" />
+      <SmartsheetHeaderMenu :virtual="true" />
+    </template>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 8cc8d66b30..1de9644763 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -289,6 +289,6 @@ defineExpose({
 }
 
 :deep(.ant-select-item-option) {
-  @apply "!min-w-min";
+  @apply "!min-w-full";
 }
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index ff4ec2a87e..74c592ba37 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -1,21 +1,11 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
 import Draggable from 'vuedraggable'
 import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
-import { useViewColumns } from '#imports'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
-import MdiEyeIcon from '~icons/mdi/eye-off-outline'
-import MdiDragIcon from '~icons/mdi/drag'
-
-const { fieldsOrder, coverImageField, modelValue } = defineProps<{
-  coverImageField?: string
-  fieldsOrder?: string[]
-  modelValue?: Record<string, boolean>
-}>()
-
-const meta = inject(MetaInj)
-const activeView = inject(ActiveViewInj)
-const reloadDataHook = inject(ReloadViewDataHookInj)
+import { computed, inject, useNuxtApp, useViewColumns, watch } from '#imports'
+
+const meta = inject(MetaInj)!
+const activeView = inject(ActiveViewInj)!
+const reloadDataHook = inject(ReloadViewDataHookInj)!
 const rootFields = inject(FieldsInj)
 const isLocked = inject(IsLockedInj)
 
@@ -31,46 +21,45 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
-  // sortedFields,
-} = useViewColumns(activeView, meta, false, () => reloadDataHook?.trigger())
+} = useViewColumns(activeView, meta, false, () => reloadDataHook.trigger())
 
 watch(
-  () => (activeView?.value as any)?.id,
+  () => (activeView.value as any)?.id,
   async (newVal, oldVal) => {
-    if (newVal !== oldVal && meta?.value) {
+    if (newVal !== oldVal && meta.value) {
       await loadViewColumns()
     }
   },
   { immediate: true },
 )
+
 watch(
-  () => sortedAndFilteredFields.value,
+  sortedAndFilteredFields,
   (v) => {
     if (rootFields) rootFields.value = v || []
   },
   { immediate: true },
 )
 
-const isAnyFieldHidden = computed(() => {
-  return fields?.value?.some((f) => !(!showSystemFields && f.system) && !f.show)
-})
+const isAnyFieldHidden = computed(() => fields.value?.some((field) => !(!showSystemFields && field.system) && !field.show))
 
 const onMove = (event: { moved: { newIndex: number } }) => {
   // todo : sync with server
-  if (!fields?.value) return
+  if (!fields.value) return
 
   if (fields.value.length < 2) return
 
-  if (fields?.value.length - 1 === event.moved.newIndex) {
+  if (fields.value.length - 1 === event.moved.newIndex) {
     fields.value[event.moved.newIndex].order = (fields.value[event.moved.newIndex - 1].order || 1) + 1
   } else if (event.moved.newIndex === 0) {
-    fields.value[event.moved.newIndex].order = (fields?.value[1].order || 1) / 2
+    fields.value[event.moved.newIndex].order = (fields.value[1].order || 1) / 2
   } else {
     fields.value[event.moved.newIndex].order =
-      ((fields?.value[event.moved.newIndex - 1].order || 1) + (fields?.value[event.moved.newIndex + 1].order || 1)) / 2
-    // );
+      ((fields.value[event.moved.newIndex - 1].order || 1) + (fields.value[event.moved.newIndex + 1].order || 1)) / 2
   }
+
   saveOrUpdate(fields.value[event.moved.newIndex], event.moved.newIndex)
+
   $e('a:fields:reorder')
 }
 </script>
@@ -80,11 +69,12 @@ const onMove = (event: { moved: { newIndex: number } }) => {
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
-          <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
-          <MdiEyeIcon class="text-grey"></MdiEyeIcon>
+          <MdiEyeOffOutline class="text-grey" />
+
           <!-- Fields -->
           <span class="text-xs text-capitalize">{{ $t('objects.fields') }}</span>
-          <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
+
+          <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
     </div>
@@ -101,7 +91,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
                   <span class="text-xs">{{ field.title }}</span>
                 </a-checkbox>
                 <div class="flex-1" />
-                <MdiDragIcon class="cursor-move" />
+                <MdiDrag class="cursor-move" />
               </div>
             </template>
           </Draggable>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 3648b6450d..51031561d1 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
-import { MetaInj, ReloadViewDataHookInj } from '~/context'
-import MdiSearchIcon from '~icons/mdi/magnify'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
+import { computed, inject, ref, useSmartsheetStoreOrThrow } from '#imports'
+import { ReloadViewDataHookInj } from '~/context'
+
+const reloadData = inject(ReloadViewDataHookInj)!
 
-const reloadData = inject(ReloadViewDataHookInj)
 const { search, meta } = useSmartsheetStoreOrThrow()
 
+// todo: where is this value supposed to come from? it's not in the store
+const isDropdownOpen = ref(false)
+
 const columns = computed(() =>
-  meta?.value?.columns?.map((c) => ({
+  meta.value?.columns?.map((c) => ({
     value: c.id,
     label: c.title,
   })),
@@ -21,12 +23,13 @@ const columns = computed(() =>
     size="small"
     class="max-w-[200px]"
     placeholder="Filter query"
-    @press-enter="reloadData.trigger()"
+    @press-enter="reloadData.trigger(null)"
   >
     <template #addonBefore>
       <div class="flex align-center relative" @click="isDropdownOpen = true">
-        <MdiSearchIcon class="text-grey" />
-        <MdiMenuDownIcon class="text-grey" />
+        <MdiMagnify class="text-grey" />
+        <MdiMenuDown class="text-grey" />
+
         <a-select
           v-model:value="search.field"
           size="small"
@@ -39,5 +42,3 @@ const columns = computed(() =>
     </template>
   </a-input>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index f3173664b3..144fa1b2f6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, provide, useViewData } from '#imports'
-import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context'
+import { ActiveViewInj, ChangePageInj, FieldsInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context'
+import ImageIcon from '~icons/mdi/file-image-box'
+
+interface Attachment {
+  url: string
+}
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
@@ -12,7 +17,7 @@ const isPublicView = false
 const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
 
-const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view as any)
+const { loadData, paginationData, formattedData: data, loadGalleryData, galleryData, changePage } = useViewData(meta, view as any)
 
 provide(IsFormInj, false)
 provide(IsGridInj, false)
@@ -20,227 +25,85 @@ provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 provide(ReadonlyInj, true)
 
+const fields = inject(FieldsInj, ref([]))
+
+const coverImageColumn = $(computed(() => fields.value.find((col) => col.id === galleryData.value?.fk_cover_image_col_id)))
+
 watch(
   [meta, view],
   async () => {
     if (meta?.value && view?.value) {
       await loadData()
+      await loadGalleryData()
     }
   },
   { immediate: true },
 )
+
+const isRowEmpty = (record: any, col: any) => {
+  const val = record.row[col.title]
+  if (!val) return true
+
+  return Array.isArray(val) && val.length === 0
+}
+
+const attachments = (record: any): Array<Attachment> => {
+  try {
+    return JSON.parse(record.row[coverImageColumn?.title]) ?? []
+  } catch (e) {
+    return []
+  }
+}
 </script>
 
+<!-- TODO: Fix scrolling -->
 <template>
-  <v-container fluid class="nc-gallery-container">
-    <!--    <v-row class="align-stretch">
-      <v-col v-for="({ row }, rowIndex) in data" :key="rowIndex"
-             md="4"
-             lg="3"
-             sm="6"
-             xs="12"> -->
-
-    <!--        <v-hover v-slot="{hover}"> -->
-
-    <div class="flex flex-wrap gap-4 justify-center">
-      <div v-for="({ row }, rowIndex) in data" :key="rowIndex" class="md:w-[300px] lg:w-[400px] xl:w-[500px]">
-        <v-card class="h-100">
-          <!--     :elevation="hover ? 4 : 1"
-                 :ripple="!isLocked"
-                 @click="!isLocked && $emit('expandForm', {row,rowIndex,rowMeta})"
-               > -->
-          <!--          <v-carousel
-                v-if="attachmentColumn"
-                :continuous="false"
-                :cycle="true"
-                :show-arrows="false"
-                hide-delimiter-background
-                delimiter-icon="mdi-minus"
-                height="200"
-              >
-                <v-carousel-item
-                  v-for="(cover, i) in getCovers(row)"
-                  :key="i"
-                >
-                  <v-img
-                    height="200"
-                    :src="cover.url"
-                    :alt="cover.title"
-                  />
-                </v-carousel-item>
-              </v-carousel> -->
-
-          <!--            <v-card-title -->
-          <!--              class="text-capitalize" -->
-          <!--              v-text="row[primaryValueColumn]" -->
-          <!--            /> -->
-          <v-card-text>
-            <v-container fluid>
-              <!--              <v-row class="">
-                    <v-col v-for="col in meta.columns" :key="col.title"
-                           class="col-12"> -->
-              <div v-for="col in meta.columns" :key="col.title" class="my-8">
-                <!--                <v-col v-for="col in fields" v-show="showFields[col.title]" :key="col.title" class="col-12 mt-1 mb-2"> -->
-                <!--
-    todo:header cell
-    -->
-                <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text">
-                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
-                  <SmartsheetHeaderCell v-else :column="col" />
-                  <!--                    <virtual-header-cell
-                          v-if="isVirtualCol(col)"
-                          :column="col"
-                          :nodes="nodes"
-                          :is-form="true"
-                          :meta="meta"
-                        />
-                        <header-cell
-                          v-else
-                          :is-form="true"
-                          :value="col.title"
-                          :column="col"
-                        /> -->
-                </label>
-                <div class="mt-2">
-                  <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row[col.title]" :edit-enabled="false" :column="col" />
-
-                  <SmartsheetCell
-                    v-else
-                    v-model="row[col.title]"
-                    :edit-enabled="false"
-                    :column="col"
-                    @update:model-value="updateRowProperty(row, col.title)"
-                  />
-                </div>
-                <!--                  <virtual-cell
-                        v-if="isVirtualCol(col)"
-                        ref="virtual"
-                        :column="col"
-                        :row="row"
-                        :nodes="nodes"
-                        :meta="meta"
-                      />
-                      <table-cell
-                        v-else
-                        :value="row[col.title]"
-                        :column="col"
-                        :sql-ui="sqlUi"
-                        :is-locked="isLocked"
-                        class="xc-input body-2"
-                        :meta="meta"
-                      /> -->
-                <!--                </v-col> -->
-                <!--              </v-row> -->
+  <div class="flex flex-col h-full min-h-0 w-full">
+    <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-4 my-4 px-3">
+      <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
+        <a-card hoverable class="!rounded-lg h-full">
+          <template #cover>
+            <a-carousel v-if="attachments(record).length !== 0" autoplay>
+              <img
+                v-for="(attachment, index) in attachments(record)"
+                :key="index"
+                class="h-52 rounded-t-lg"
+                :src="attachment.url"
+              />
+            </a-carousel>
+            <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
+          </template>
+
+          <div
+            v-for="(col, colIndex) in fields"
+            :key="colIndex"
+            class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
+          >
+            <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
+              <div class="w-full text-gray-600">
+                <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+                <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
               </div>
-            </v-container>
-          </v-card-text>
-        </v-card>
+            </div>
+
+            <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+              <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
+              <template v-else>
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="record.row[col.title]" :column="col" />
+                <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" />
+              </template>
+            </div>
+          </div>
+        </a-card>
       </div>
     </div>
-
-    <!--        </v-hover> -->
-    <!--      </v-col>
-    </v-row> -->
-  </v-container>
+    <SmartsheetPagination />
+  </div>
 </template>
 
-<!--
-<script>
-import { isVirtualCol } from "nocodb-sdk";
-import VirtualHeaderCell from "../components/VirtualHeaderCell";
-import HeaderCell from "../components/HeaderCell";
-import VirtualCell from "../components/VirtualCell";
-import TableCell from "../components/Cell";
-
-export default {
-  name: "GalleryView",
-  components: {
-    TableCell,
-    VirtualCell,
-    HeaderCell,
-    VirtualHeaderCell
-  },
-  props: [
-    "nodes",
-    "table",
-    "showFields",
-    "availableColumns",
-    "meta",
-    "data",
-    "primaryValueColumn",
-    "showSystemFields",
-    "sqlUi",
-    "coverImageField",
-    "viewId",
-    "isLocked"
-  ],
-  data() {
-    return {
-      galleryView: {}
-    };
-  },
-  computed: {
-    attachmentColumn() {
-      return this.coverImageField && this.meta && this.meta.columns && this.meta.columns.find(c => c.id === this.coverImageField);
-    },
-    fields() {
-      if (this.availableColumns) {
-        return this.availableColumns;
-      }
-
-      const hideCols = ["created_at", "updated_at"];
-
-      if (this.showSystemFields) {
-        return this.meta.columns || [];
-      } else {
-        return this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.title) &&
-          !((this.meta.v || []).some(v => v.bt && v.bt.title === c.title))
-        ) || [];
-      }
-    }
-  },
-  watch: {
-    async coverImageField(v) {
-      if (this.galleryView && v !== this.galleryView.fk_cover_image_col_id) {
-        (await this.$api.dbView.galleryUpdate(this.viewId, {
-          ...this.galleryView,
-          fk_cover_image_col_id: v
-        }));
-      }
-    }
-  },
-  created() {
-    this.loadView();
-  },
-  methods: {
-    isVirtualCol,
-    async loadView() {
-      this.galleryView = (await this.$api.dbView.galleryRead(this.viewId));
-      this.$emit("update:coverImageField", this.galleryView.fk_cover_image_col_id);
-    },
-    getCovers(row) {
-      if (this.attachmentColumn &&
-        row[this.attachmentColumn.title] && row[this.attachmentColumn.title][0] &&
-        row[this.attachmentColumn.title]) {
-        try {
-          return JSON.parse(row[this.attachmentColumn.title]);
-        } catch (e) {
-
-        }
-      }
-      return [{ url: "https://via.placeholder.com/700?text=No%20image%20found" }];
-    }
-  }
-};
-</script>
-
-<style scoped>
-
-</style>
--->
 <style scoped>
 .nc-gallery-container {
-  height: calc(100vh - 160px);
+  height: calc(100vh - 250px);
   overflow: auto;
 }
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 6a060b1d17..ab3f79a9dd 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -25,8 +25,6 @@ import {
   ReloadViewDataHookInj,
 } from '~/context'
 import { NavigateDir } from '~/lib'
-import MdiArrowExpandIcon from '~icons/mdi/arrow-expand'
-import MdiPlusIcon from '~icons/mdi/plus'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
@@ -40,7 +38,6 @@ const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
 let editEnabled = $ref(false)
-const { sqlUi } = useProject()
 const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow()
 const addColumnDropdown = ref(false)
 const contextMenu = ref(false)
@@ -254,7 +251,7 @@ const onNavigate = (dir: NavigateDir) => {
 
 <template>
   <div class="flex flex-col h-100 min-h-0 w-100">
-    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
+    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
@@ -276,6 +273,7 @@ const onNavigate = (dir: NavigateDir) => {
                 :key="col.title"
                 v-xc-ver-resize
                 :data-col="col.id"
+                :data-title="col.title"
                 @xcresize="onresize(col.id, $event)"
                 @xcresizing="onXcResizing(col.title, $event)"
                 @xcresized="resizingCol = null"
@@ -287,7 +285,7 @@ const onNavigate = (dir: NavigateDir) => {
               <th v-t="['c:column:add']" @click="addColumnDropdown = true">
                 <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
                   <div class="h-full w-[60px] flex align-center justify-center">
-                    <MdiPlusIcon class="text-sm" />
+                    <MdiPlus class="text-sm" />
                   </div>
                   <template #overlay>
                     <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
@@ -297,22 +295,23 @@ const onNavigate = (dir: NavigateDir) => {
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
-              <td key="row-index" class="caption nc-grid-cell">
-                <div class="align-center flex w-[80px]">
+            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row">
+              <td key="row-index" class="caption nc-grid-cell group">
+                <div class="flex items-center w-[80px]">
                   <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
                   <div
                     :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                    class="group-hover:flex w-full align-center"
+                    class="group-hover:flex w-full items-center justify-between p-1"
                   >
                     <a-checkbox v-model:checked="row.rowMeta.selected" />
-                    <span class="flex-1" />
-                    <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
+                    <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                      <MdiArrowExpand class="select-none transform hover:(text-pink-500 scale-120)" />
+                    </div>
                   </div>
                 </div>
               </td>
               <td
-                v-for="(columnObj, colIndex) in fields"
+                v-for="(columnObj, colIndex) of fields"
                 :key="rowIndex + columnObj.title"
                 class="cell pointer nc-grid-cell"
                 :class="{
@@ -355,17 +354,13 @@ const onNavigate = (dir: NavigateDir) => {
                 class="text-left pointer nc-grid-add-new-cell"
                 @click="addEmptyRow()"
               >
-                <a-tooltip top left>
-                  <div class="w-min flex align-center">
-                    <MdiPlusIcon class="text-pint-500 text-xs" />
-                    <span class="ml-1 caption grey--text">
-                      {{ $t('activity.addRow') }}
-                    </span>
-                  </div>
-                  <template #title>
-                    <span class="caption"> Add new row</span>
-                  </template>
-                </a-tooltip>
+                <div class="px-2 w-full flex items-center">
+                  <MdiPlus class="text-pint-500 text-xs" />
+
+                  <span class="ml-1">
+                    {{ $t('activity.addRow') }}
+                  </span>
+                </div>
               </td>
             </tr>
           </tbody>
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 8fecc8d81e..5742f258bd 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -15,37 +15,10 @@ const page = computed({
   get: () => paginatedData?.value?.page ?? 1,
   set: (p) => changePage?.(p),
 })
-/*
-export default {
-  name: 'Pagination',
-  props: {
-    count: [Number, String],
-    value: [Number, String],
-    size: [Number, String],
-  },
-  data: () => ({
-    page: 1,
-  }),
-  watch: {
-    value(v) {
-      this.page = v
-    },
-    count(c) {
-      const page = Math.max(1, Math.min(this.page, Math.ceil(c / this.size)))
-      if (this.value !== page) {
-        this.$emit('input', page)
-      }
-    },
-  },
-  mounted() {
-    this.page = this.value
-  },
-}
-*/
 </script>
 
 <template>
-  <div class="flex items-center mb-2">
+  <div class="flex items-center">
     <span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
 
     <div class="flex-1" />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 3a52b19c63..477ee96354 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -2,11 +2,6 @@
 import { ViewTypes } from 'nocodb-sdk'
 import { ref, useNuxtApp } from '#imports'
 import { viewIcons } from '~/utils'
-import MdiPlusIcon from '~icons/mdi/plus'
-import MdiXml from '~icons/mdi/xml'
-import MdiHook from '~icons/mdi/hook'
-import MdiHeartsCard from '~icons/mdi/cards-heart'
-import MdiShieldLockOutline from '~icons/mdi/shield-lock-outline'
 
 interface Emits {
   (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@@ -53,7 +48,7 @@ function onOpenModal(type: ViewTypes, title = '') {
 
           <div class="flex-1" />
 
-          <MdiPlusIcon class="group-hover:text-primary" />
+          <MdiPlus class="group-hover:text-primary" />
         </div>
       </a-tooltip>
     </a-menu-item>
@@ -71,7 +66,7 @@ function onOpenModal(type: ViewTypes, title = '') {
 
           <div class="flex-1" />
 
-          <MdiPlusIcon class="group-hover:text-primary" />
+          <MdiPlus class="group-hover:text-primary" />
         </div>
       </a-tooltip>
     </a-menu-item>
@@ -89,7 +84,7 @@ function onOpenModal(type: ViewTypes, title = '') {
 
           <div class="flex-1" />
 
-          <MdiPlusIcon class="group-hover:text-primary" />
+          <MdiPlus class="group-hover:text-primary" />
         </div>
       </a-tooltip>
     </a-menu-item>
@@ -137,7 +132,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           class="group flex items-center gap-2 w-full mx-3 px-4 py-2 rounded-l !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg !opacity-100) transition duration-150 ease"
           @click.stop
         >
-          <MdiHeartsCard class="text-red-500" />
+          <MdiCardsHeart class="text-red-500" />
           {{ $t('activity.sponsorUs') }}
         </a>
       </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 621e618b2f..911da6e0d3 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -6,9 +6,9 @@ import { notification } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import Sortable from 'sortablejs'
 import RenameableMenuItem from './RenameableMenuItem.vue'
-import { inject, onMounted, ref, useApi, useTabs, watch } from '#imports'
+import { inject, onMounted, ref, useApi, useRoute, useRouter, watch } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
-import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
+import { ActiveViewInj, ViewListInj } from '~/context'
 
 interface Emits {
   (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@@ -22,14 +22,12 @@ const activeView = inject(ActiveViewInj, ref())
 
 const views = inject<Ref<any[]>>(ViewListInj, ref([]))
 
-const meta = inject(MetaInj)
-
-const { addTab } = useTabs()
-
 const { api } = useApi()
 
 const router = useRouter()
 
+const route = useRoute()
+
 /** Selected view(s) for menu */
 const selected = ref<string[]>([])
 
@@ -123,7 +121,6 @@ async function onSortEnd(evt: SortableEvent) {
 
 let sortable: Sortable
 
-// todo: replace with vuedraggable
 const initSortable = (el: HTMLElement) => {
   if (sortable) sortable.destroy()
 
@@ -197,7 +194,10 @@ function onDeleted() {
       :key="view.id"
       :view="view"
       class="transition-all ease-in duration-300"
-      :class="[isMarked === view.id ? 'bg-gray-200' : '']"
+      :class="[
+        isMarked === view.id ? 'bg-gray-200' : '',
+        route.params.viewTitle && route.params.viewTitle.includes(view.title) ? 'active' : '',
+      ]"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
       @delete="onDelete"
@@ -210,7 +210,7 @@ function onDeleted() {
 
 <style lang="scss">
 .nc-views-menu {
-  @apply flex-1 max-h-[20vh] overflow-y-scroll scrollbar-thin-primary;
+  @apply flex-1 max-h-[30vh] overflow-y-scroll scrollbar-thin-dull;
 
   .ghost,
   .ghost > * {
@@ -234,5 +234,13 @@ function onDeleted() {
   .sortable-chosen {
     @apply !bg-primary/25 text-primary;
   }
+
+  .active {
+    @apply bg-blue-500/15;
+
+    .nc-icon {
+      @apply !text-pink-500;
+    }
+  }
 }
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index bfb05263c9..0435093b31 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -2,9 +2,6 @@
 import type { ViewTypes } from 'nocodb-sdk'
 import { viewIcons } from '~/utils'
 import { useDebounceFn, useNuxtApp, useVModel } from '#imports'
-import MdiTrashCan from '~icons/mdi/trash-can'
-import MdiContentCopy from '~icons/mdi/content-copy'
-import MdiDrag from '~icons/mdi/drag-vertical'
 
 interface Props {
   view: Record<string, any>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 6f8de8eac4..ec8682807f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -5,8 +5,6 @@ import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
 import { computed, inject, provide, ref, useApi, useRoute, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
-import MdiXml from '~icons/mdi/xml'
-import MdiHook from '~icons/mdi/hook'
 
 const meta = inject(MetaInj, ref())
 
@@ -73,10 +71,29 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     collapsiple
     collapsed-width="50"
     width="250"
-    class="shadow !mt-[-9px]"
-    style="height: calc(100% + 9px)"
+    class="relative shadow-md h-full"
     theme="light"
   >
+    <a-tooltip placement="left">
+      <template #title> Toggle sidebar </template>
+
+      <div
+        class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
+      >
+        <MaterialSymbolsChevronRightRounded
+          v-if="sidebarOpen"
+          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+          @click="sidebarOpen = false"
+        />
+
+        <MaterialSymbolsChevronLeftRounded
+          v-else
+          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+          @click="sidebarOpen = true"
+        />
+      </div>
+    </a-tooltip>
+
     <Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
 
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
index c75481f2a8..71f6456c87 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import MdiAddIcon from '~icons/mdi/plus-outline'
 import { inject, ref } from '#imports'
 import { RightSidebarInj } from '~/context'
 
@@ -13,7 +12,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(true))
     <template #title> {{ $t('activity.addRow') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">
-      <MdiAddIcon class="group-hover:(!text-white)" @click="emits('addRow')" />
+      <MdiPlusOutline class="group-hover:(!text-white)" @click="emits('addRow')" />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
index 6f0cdd5a8b..e029ae982c 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { inject, ref, useTable } from '#imports'
 import { MetaInj, RightSidebarInj } from '~/context'
-import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj)!
 
 const { deleteTable } = useTable()
 
@@ -15,7 +14,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(true))
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
-      <MdiDeleteIcon class="group-hover:(!text-white)" @click="deleteTable(meta)" />
+      <MdiDeleteOutline class="group-hover:(!text-white)" @click="deleteTable(meta)" />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
index cfa3b57038..5b69fe2c9b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-import { computed } from '@vue/reactivity'
 import { useToast } from 'vue-toastification'
-import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { computed, useSmartsheetStoreOrThrow } from '#imports'
+import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
-import MdiCheckIcon from '~icons/mdi/check-bold'
 
 enum LockType {
   Personal = 'personal',
@@ -25,19 +23,19 @@ function changeLockType(type: LockType) {
     return toast.info('Coming soon', { timeout: 3000 })
   }
   try {
-    view.value.lock_type = type
+    ;(view.value as any).lock_type = type
     $api.dbView.update(view.value.id as string, {
       lock_type: type,
     })
 
     toast.success(`Successfully Switched to ${type} view`, { timeout: 3000 })
-  } catch (e) {
+  } catch (e: any) {
     toast.error(extractSdkResponseErrorMsg(e))
   }
 }
 
 const Icon = computed(() => {
-  switch (view?.value?.lock_type) {
+  switch ((view.value as any)?.lock_type) {
     case LockType.Personal:
       return MdiAccountIcon
     case LockType.Locked:
@@ -60,7 +58,7 @@ const Icon = computed(() => {
         <div>
           <div class="nc-menu-item" @click="changeLockType(LockType.Collaborative)">
             <div>
-              <MdiCheckIcon v-if="!view?.lock_type || view?.lock_type === LockType.Collaborative" />
+              <MdiCheck v-if="!view?.lock_type || view?.lock_type === LockType.Collaborative" />
               <span v-else />
               <div>
                 <MdiAccountGroupIcon />
@@ -71,7 +69,7 @@ const Icon = computed(() => {
           </div>
           <div class="nc-menu-item" @click="changeLockType(LockType.Locked)">
             <div>
-              <MdiCheckIcon v-if="view.lock_type === LockType.Locked" />
+              <MdiCheck v-if="view.lock_type === LockType.Locked" />
               <span v-else />
               <div>
                 <MdiLockOutlineIcon />
@@ -82,7 +80,7 @@ const Icon = computed(() => {
           </div>
           <div class="nc-menu-item" @click="changeLockType(LockType.Personal)">
             <div>
-              <MdiCheckIcon v-if="view.lock_type === LockType.Personal" />
+              <MdiCheck v-if="view.lock_type === LockType.Personal" />
               <span v-else />
               <div>
                 <MdiAccountIcon />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
index fc68b3d577..4228733169 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ReloadViewDataHookInj, RightSidebarInj } from '~/context'
-import MdiReloadIcon from '~icons/mdi/reload'
 import { inject, ref } from '#imports'
 
-const reloadTri = inject(ReloadViewDataHookInj)
+const reloadHook = inject(ReloadViewDataHookInj)!
 
 const sidebarOpen = inject(RightSidebarInj, ref(true))
+
+const onClick = () => reloadHook.trigger()
 </script>
 
 <template>
@@ -13,9 +14,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(true))
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-green-500 group">
-      <MdiReloadIcon class="group-hover:(!text-white)" @click="reloadTri.trigger()" />
+      <MdiReload class="group-hover:(!text-white)" @click="onClick" />
     </div>
   </a-tooltip>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
deleted file mode 100644
index 4f0c3adf44..0000000000
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import MdiUnfoldMoreVertical from '~icons/mdi/unfold-more-vertical'
-import MdiUnfoldLessVertical from '~icons/mdi/unfold-less-vertical'
-import { inject, ref } from '#imports'
-import { RightSidebarInj } from '~/context'
-
-const sidebarOpen = inject(RightSidebarInj, ref(false))
-</script>
-
-<template>
-  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
-    <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
-
-    <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">
-      <MdiUnfoldLessVertical v-if="sidebarOpen" class="group-hover:(!text-white)" @click="sidebarOpen = false" />
-      <MdiUnfoldMoreVertical v-else class="group-hover:(!text-white)" @click="sidebarOpen = true" />
-    </div>
-  </a-tooltip>
-</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index ee85df548f..efa831f786 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -3,7 +3,6 @@ import AddRow from './AddRow.vue'
 import DeleteTable from './DeleteTable.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
-import ToggleDrawer from './ToggleDrawer.vue'
 </script>
 
 <template>
@@ -24,10 +23,6 @@ import ToggleDrawer from './ToggleDrawer.vue'
 
     <DeleteTable />
 
-    <div class="dot" />
-
-    <ToggleDrawer />
-
     <slot name="end" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 7882ed2a5f..744559aa1a 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -60,7 +60,7 @@ watch(tabMeta, async (newTabMeta, oldTabMeta) => {
           </div>
         </div>
 
-        <teleport to="#sidebar-right">
+        <teleport to="#content">
           <SmartsheetSidebar />
         </teleport>
       </template>
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
index db4d128caf..cdd6506c1c 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { useClipboard } from '@vueuse/core'
-import OpenInNewIcon from '~icons/mdi/open-in-new'
-import { dashboardUrl } from '~/utils/urlUtils'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import MdiReload from '~icons/mdi/reload'
-import DownIcon from '~icons/ic/round-keyboard-arrow-down'
-import ContentCopyIcon from '~icons/mdi/content-copy'
-import MdiXmlIcon from '~icons/mdi/xml'
+import { onMounted, useClipboard, useNuxtApp, useProject } from '#imports'
+import { dashboardUrl, extractSdkResponseErrorMsg } from '~/utils'
+
 const toast = useToast()
 
 interface ShareBase {
@@ -22,9 +17,13 @@ enum ShareBaseRole {
 }
 
 const { $api, $e } = useNuxtApp()
+
 let base = $ref<null | ShareBase>(null)
+
 const showEditBaseDropdown = $ref(false)
+
 const { project } = useProject()
+
 const { copy } = useClipboard()
 
 const url = $computed(() => (base && base.uuid ? `${dashboardUrl()}#/nc/base/${base.uuid}` : null))
@@ -33,7 +32,8 @@ const loadBase = async () => {
   try {
     if (!project.value.id) return
 
-    const res = await $api.project.sharedBaseGet(project.value.id)
+    // todo: result is missing roles in return-type
+    const res: any = await $api.project.sharedBaseGet(project.value.id)
     base = {
       uuid: res.uuid,
       url: res.url,
@@ -41,6 +41,7 @@ const loadBase = async () => {
     }
   } catch (e: any) {
     console.error(e)
+
     toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -49,16 +50,19 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
   try {
     if (!project.value.id) return
 
-    const res = await $api.project.sharedBaseUpdate(project.value.id, {
+    // todo: returns void?
+    const res: any = await $api.project.sharedBaseUpdate(project.value.id, {
       roles: role,
     })
 
-    base = res || {}
-    base.role = role
+    base = res ?? {}
+    base!.role = role
   } catch (e: any) {
     console.error(e)
+
     toast.error(await extractSdkResponseErrorMsg(e))
   }
+
   $e('a:shared-base:enable', { role })
 }
 
@@ -83,10 +87,13 @@ const recreate = async () => {
     const sharedBase = await $api.project.sharedBaseCreate(project.value.id, {
       roles: base?.role || ShareBaseRole.Viewer,
     })
+
     const newBase = sharedBase || {}
+
     base = { ...newBase, role: base?.role }
   } catch (e: any) {
     console.error(e)
+
     toast.error(await extractSdkResponseErrorMsg(e))
   }
 
@@ -96,7 +103,8 @@ const recreate = async () => {
 const copyUrl = async () => {
   if (!url) return
 
-  copy(url)
+  await copy(url)
+
   toast.success('Copied shareable base url to clipboard!')
 
   $e('c:shared-base:copy-url')
@@ -135,7 +143,8 @@ onMounted(() => {
 <template>
   <div class="flex flex-col w-full">
     <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
-      <OpenInNewIcon />
+      <MdiOpenInNew />
+
       <div class="text-xs">Shared Base Link</div>
     </div>
     <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
@@ -157,7 +166,7 @@ onMounted(() => {
           </template>
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="copyUrl">
             <template #icon>
-              <ContentCopyIcon class="flex mx-auto text-gray-600" />
+              <MdiContentCopy class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -167,7 +176,7 @@ onMounted(() => {
           </template>
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="navigateToSharedBase">
             <template #icon>
-              <OpenInNewIcon class="flex mx-auto text-gray-600" />
+              <MdiOpenInNew class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -177,7 +186,7 @@ onMounted(() => {
           </template>
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="generateEmbeddableIframe">
             <template #icon>
-              <MdiXmlIcon class="flex mx-auto text-gray-600" />
+              <MdiXml class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -190,7 +199,7 @@ onMounted(() => {
           <div class="flex flex-row items-center space-x-2">
             <div v-if="base?.uuid">Anyone with the link</div>
             <div v-else>Disable shared base</div>
-            <DownIcon class="h-[1rem]" />
+            <IcRoundKeyboardArrowDown class="h-[1rem]" />
           </div>
         </a-button>
 
@@ -207,7 +216,7 @@ onMounted(() => {
       <a-select v-if="base?.uuid" v-model:value="base.role" class="flex">
         <template #suffixIcon>
           <div class="flex flex-row">
-            <DownIcon class="text-black -mt-0.5 h-[1rem]" />
+            <IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
           </div>
         </template>
         <a-select-option
@@ -225,5 +234,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 54acdc9264..330393b5aa 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -3,39 +3,44 @@ import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
-import { useProvideLTARStore } from '#imports'
+import { inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
-import MdiExpandIcon from '~icons/mdi/arrow-expand'
 
 const column = inject(ColumnInj)
-const reloadTrigger = inject(ReloadViewDataHookInj)
-const cellValue = inject(CellValueInj)
+
+const reloadTrigger = inject(ReloadViewDataHookInj)!
+
+const cellValue = inject(CellValueInj, ref<any>(null))
+
 const row = inject(RowInj)
+
 const active = false
-const localState = null
+
 const listItemsDlg = ref(false)
 
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
-  () => reloadTrigger?.trigger(),
+  reloadTrigger.trigger,
 )
+
 await loadRelatedTableMeta()
 </script>
 
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
-      <template v-if="cellValue || localState">
-        <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue || localState)" />
+      <template v-if="cellValue">
+        <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue)" />
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-      <MdiExpandIcon
+      <MdiArrowExpand
         class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
         @click="listItemsDlg = true"
       />
     </div>
+
     <ListItems v-model="listItemsDlg" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/Count.vue b/packages/nc-gui-v2/components/virtual-cell/Count.vue
index 29d0c7176a..3f7002bde7 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Count.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Count.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// TODO: wait for Count Column implementation
+// To be implemented
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index bcdf61776d..5265409d61 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { computed, useProject } from '#imports'
+import { computed, inject, ref, useProject } from '#imports'
 import { CellValueInj, ColumnInj } from '~/context'
-import { handleTZ } from '~/utils/dateTimeUtils'
-import { replaceUrlsWithLink } from '~/utils/urlUtils'
+import { handleTZ, replaceUrlsWithLink } from '~/utils'
 
-const column = inject(ColumnInj)
+// todo: column type doesn't have required property `error` - throws in typecheck
+const column: any = inject(ColumnInj)
 
 const value = inject(CellValueInj)
 
@@ -14,6 +14,7 @@ const showEditFormulaWarning = ref(false)
 
 const showEditFormulaWarningMessage = () => {
   showEditFormulaWarning.value = true
+
   setTimeout(() => {
     showEditFormulaWarning.value = false
   }, 3000)
@@ -32,6 +33,7 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
       </template>
       <span>ERR!</span>
     </a-tooltip>
+
     <div class="pa-2" @dblclick="showEditFormulaWarningMessage">
       <div v-if="urls" v-html="urls" />
       <div v-else>{{ result }}</div>
@@ -42,5 +44,3 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
     </div>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 151a9d374a..38598dcae0 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -4,41 +4,57 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { useProvideLTARStore } from '#imports'
+import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
-import MdiExpandIcon from '~icons/mdi/arrow-expand'
-import MdiPlusIcon from '~icons/mdi/plus'
 
-const column = inject(ColumnInj)
-const cellValue = inject(CellValueInj)
-const row = inject(RowInj)
-const reloadTrigger = inject(ReloadViewDataHookInj)
+const column = inject(ColumnInj)!
+
+const cellValue = inject(CellValueInj)!
+
+const row = inject(RowInj)!
+
+const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const listItemsDlg = ref(false)
+
 const childListDlg = ref(false)
 
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
-  () => reloadTrigger?.trigger(),
+  reloadTrigger.trigger,
 )
+
 await loadRelatedTableMeta()
+
+const cells = computed(() =>
+  cellValue.value.reduce((acc: any[], curr: any) => {
+    if (!relatedTablePrimaryValueProp.value) return acc
+
+    const value = curr[relatedTablePrimaryValueProp.value]
+
+    if (!value) return acc
+
+    return [...acc, { value, item: curr }]
+  }, [] as any[]),
+)
 </script>
 
 <template>
   <div class="flex align-center items-center gap-1 w-full chips-wrapper">
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="cellValue">
-        <ItemChip v-for="(ch, i) in cellValue" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
+        <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
+
         <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
     <div class="flex-grow flex justify-end gap-1 min-h-[30px] align-center">
-      <MdiExpandIcon
+      <MdiArrowExpand
         class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
         @click="childListDlg = true"
       />
-      <MdiPlusIcon class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index 1807f0a773..15f99e9913 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
@@ -1,26 +1,35 @@
 <script lang="ts" setup>
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { useColumn } from '~/composables'
+import type { Ref } from 'vue'
 import { CellValueInj, ColumnInj, MetaInj, ReadonlyInj } from '~/context'
+import { computed, inject, provide, useColumn, useMetas } from '#imports'
 
 const { metas, getMeta } = useMetas()
 
 provide(ReadonlyInj, true)
 
-const column = inject(ColumnInj) as ColumnType & { colOptions: LookupType }
+const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>
 const meta = inject(MetaInj)
 const value = inject(CellValueInj)
 const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]))
 
-const relationColumn = meta?.value.columns?.find((c) => c.id === column.colOptions.fk_relation_column_id) as ColumnType & {
+const relationColumn = meta?.value.columns?.find((c) => c.id === column.value.colOptions?.fk_relation_column_id) as ColumnType & {
   colOptions: LinkToAnotherRecordType
 }
-await getMeta(relationColumn.colOptions.fk_related_model_id as string)
-const lookupTableMeta = metas?.value[relationColumn.colOptions.fk_related_model_id as string]
-const lookupColumn = lookupTableMeta?.columns?.find((c) => c.id === column.colOptions.fk_lookup_column_id) as ColumnType
 
-provide(MetaInj, ref(lookupTableMeta))
+await getMeta(relationColumn.colOptions.fk_related_model_id!)
+
+const lookupTableMeta = computed(() => metas.value[relationColumn.colOptions.fk_related_model_id!])
+
+const lookupColumn = computed(
+  () =>
+    lookupTableMeta.value.columns?.find(
+      (c: Record<string, any>) => c.id === column.value.colOptions?.fk_lookup_column_id,
+    ) as ColumnType,
+)
+
+provide(MetaInj, lookupTableMeta)
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index a08a3c80d9..aa05726fc0 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -4,43 +4,60 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { useProvideLTARStore } from '#imports'
+import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
-import MdiExpandIcon from '~icons/mdi/arrow-expand'
-import MdiPlusIcon from '~icons/mdi/plus'
 
-const column = inject(ColumnInj)
-const row = inject(RowInj)
-const cellValue = inject(CellValueInj)
-const reloadTrigger = inject(ReloadViewDataHookInj)
+const column = inject(ColumnInj)!
+
+const row = inject(RowInj)!
+
+const cellValue = inject(CellValueInj)!
+
+const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const listItemsDlg = ref(false)
+
 const childListDlg = ref(false)
 
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
-  () => reloadTrigger?.trigger(),
+  reloadTrigger.trigger,
 )
 
 await loadRelatedTableMeta()
+
+const cells = computed(() =>
+  cellValue.value.reduce((acc: any[], curr: any) => {
+    if (!relatedTablePrimaryValueProp.value) return acc
+
+    const value = curr[relatedTablePrimaryValueProp.value]
+
+    if (!value) return acc
+
+    return [...acc, { value, item: curr }]
+  }, [] as any[]),
+)
 </script>
 
 <template>
   <div class="flex align-center gap-1 w-full h-full chips-wrapper">
-    <!--    <template v-if="!isForm"> -->
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="cellValue">
-        <ItemChip v-for="(ch, i) in cellValue" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
+        <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
 
         <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
+
     <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-      <MdiExpandIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
-      <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+
+      <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
+
     <ListItems v-model="listItemsDlg" />
+
     <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 5307d7be70..5364d09b76 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -4,13 +4,12 @@ import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
 interface Props {
   value?: string | number | boolean
-  item?: any
 }
 
-const { value, item } = defineProps<Props>()
+const { value } = defineProps<Props>()
 const emit = defineEmits(['unlink'])
 const readonly = inject(ReadonlyInj, false)
-const active = inject(ActiveCellInj, false)
+const active = inject(ActiveCellInj, ref(false))
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index df612cc0ae..7064741c0a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import { useLTARStoreOrThrow, useVModel } from '#imports'
-import MdiReloadIcon from '~icons/mdi/reload'
-import MdiDeleteIcon from '~icons/mdi/delete-outline'
-import MdiUnlinkIcon from '~icons/mdi/link-variant-remove'
+import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
+
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
@@ -20,14 +18,15 @@ const {
   getRelatedTableRowId,
 } = useLTARStoreOrThrow()
 
-watch(vModel, () => {
-  if (vModel.value) {
+watch(vModel, (nextVal) => {
+  if (nextVal) {
     loadChildrenList()
   }
 })
 
 const unlinkRow = async (row: Record<string, any>) => {
   await unlink(row)
+
   await loadChildrenList()
 }
 </script>
@@ -36,12 +35,14 @@ const unlinkRow = async (row: Record<string, any>) => {
   <a-modal v-model:visible="vModel" :footer="null" title="Child list">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
       <div class="flex mb-4 align-center gap-2">
-        <!-- <a-input v-model:value="childrenListPagination.query" class="max-w-[200px]" size="small"></a-input> -->
         <div class="flex-1" />
-        <MdiReloadIcon class="cursor-pointer text-gray-500" @click="loadChildrenList" />
+
+        <MdiReload class="cursor-pointer text-gray-500" @click="loadChildrenList" />
+
         <a-button type="primary" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
-            <MdiUnlinkIcon class="text-xs text-white" @click="unlinkRow(row)" />
+            <!-- todo: row is not defined? @click="unlinkRow(row)" -->
+            <MdiLinkVariantRemove class="text-xs text-white" />
             Link to '{{ meta.title }}'
           </div>
         </a-button>
@@ -56,8 +57,8 @@ const unlinkRow = async (row: Record<string, any>) => {
               </div>
               <div class="flex-1"></div>
               <div class="flex gap-2">
-                <MdiUnlinkIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
-                <MdiDeleteIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="deleteRelatedRow(row)" />
+                <MdiLinkVariantRemove class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
+                <MdiDeleteOutline class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="deleteRelatedRow(row)" />
               </div>
             </div>
           </a-card>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index c4d92762bf..82ae0ae503 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { useLTARStoreOrThrow, useVModel } from '#imports'
-import MdiReloadIcon from '~icons/mdi/reload'
+import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
 const props = defineProps<{ modelValue: boolean }>()
-const emit = defineEmits(['update:modelValue'])
+
+const emit = defineEmits(['update:modelValue', 'addNewRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
@@ -16,8 +16,8 @@ const {
   getRelatedTableRowId,
 } = useLTARStoreOrThrow()
 
-watch(vModel, () => {
-  if (vModel.value) {
+watch(vModel, (nextVal) => {
+  if (nextVal) {
     loadChildrenExcludedList()
   }
 })
@@ -25,7 +25,6 @@ watch(vModel, () => {
 const linkRow = async (row: Record<string, any>) => {
   await link(row)
   vModel.value = false
-  // await loadChildrenExcludedList()
 }
 </script>
 
@@ -40,7 +39,7 @@ const linkRow = async (row: Record<string, any>) => {
           size="small"
         ></a-input>
         <div class="flex-1" />
-        <MdiReloadIcon class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
+        <MdiReload class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
         <a-button type="primary" size="small" @click="emit('addNewRecord')">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 1539e62a71..62501ede07 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -2,20 +2,8 @@
 import { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
 import { MetaInj } from '~/context'
-import MdiContentSaveIcon from '~icons/mdi/content-save'
-import MdiLinkIcon from '~icons/mdi/link'
-import MdiEmailIcon from '~icons/mdi/email'
-import MdiSlackIcon from '~icons/mdi/slack'
-import MdiMicrosoftTeamsIcon from '~icons/mdi/microsoft-teams'
-import MdiDiscordIcon from '~icons/mdi/discord'
-import MdiChatIcon from '~icons/mdi/chat'
-import MdiWhatsAppIcon from '~icons/mdi/whatsapp'
-import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
-import MdiGestureDoubleTapIcon from '~icons/mdi/gesture-double-tap'
-import MdiInformationIcon from '~icons/mdi/information'
-import MdiArrowLeftBoldIcon from '~icons/mdi/arrow-left-bold'
-import { fieldRequiredValidator } from '~/utils/validation'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
+import { inject, reactive, useApi, useNuxtApp } from '#imports'
 
 interface Option {
   label: string
@@ -24,7 +12,9 @@ interface Option {
 
 const emit = defineEmits(['backToList', 'editOrAdd'])
 
-const { $state, $api, $e } = useNuxtApp()
+const { $e } = useNuxtApp()
+
+const { api, isLoading: loading } = useApi()
 
 const toast = useToast()
 
@@ -32,12 +22,12 @@ const meta = inject(MetaInj)
 
 const useForm = Form.useForm
 
-const hook = reactive({
+const hook = reactive<Record<string, any>>({
   id: '',
   title: '',
   event: '',
   operation: '',
-  eventOperation: undefined,
+  eventOperation: '',
   notification: {
     type: 'URL',
     payload: {
@@ -45,7 +35,7 @@ const hook = reactive({
       body: '{{ json data }}',
       headers: [{}],
       parameters: [{}],
-    } as any,
+    },
   },
   condition: false,
 })
@@ -64,8 +54,6 @@ const discordChannels = ref<Record<string, any>[]>([])
 
 const mattermostChannels = ref<Record<string, any>[]>([])
 
-const loading = ref(false)
-
 const filters = ref([])
 
 const formInput = ref({
@@ -218,7 +206,7 @@ const validators = computed(() => {
     }),
   }
 })
-const { resetFields, validate, validateInfos } = useForm(hook, validators)
+const { validate, validateInfos } = useForm(hook, validators)
 
 function onNotTypeChange() {
   hook.notification.payload = {} as any
@@ -258,7 +246,7 @@ function setHook(newHook: any) {
 }
 
 async function onEventChange() {
-  const { notification: { payload = {}, type = {} } = {}, ...rest } = hook
+  const { notification: { payload = {}, type = {} } = {} } = hook
 
   Object.assign(hook, {
     ...hook,
@@ -305,7 +293,7 @@ async function onEventChange() {
 
 async function loadPluginList() {
   try {
-    const plugins = (await $api.plugin.list()).list as any
+    const plugins = (await api.plugin.list()).list as any
     apps.value = plugins.reduce((o: Record<string, any>[], p: Record<string, any>) => {
       p.tags = p.tags ? p.tags.split(',') : []
       p.parsedInput = p.input && JSON.parse(p.input)
@@ -327,31 +315,30 @@ async function saveHooks() {
     await validate()
   } catch (_: any) {
     toast.error('Invalid Form')
+
     loading.value = false
+
     return
   }
 
   try {
     let res
     if (hook.id) {
-      res = await $api.dbTableWebhook.update(hook.id, {
+      res = await api.dbTableWebhook.update(hook.id, {
         ...hook,
         notification: {
           ...hook.notification,
           payload: hook.notification.payload,
         },
-      } as any)
+      })
     } else {
-      res = await $api.dbTableWebhook.create(
-        meta?.value.id as string,
-        {
-          ...hook,
-          notification: {
-            ...hook.notification,
-            payload: hook.notification.payload,
-          },
-        } as any,
-      )
+      res = await api.dbTableWebhook.create(meta!.value.id!, {
+        ...hook,
+        notification: {
+          ...hook.notification,
+          payload: hook.notification.payload,
+        },
+      } as any)
     }
 
     if (!hook.id && res) {
@@ -371,6 +358,7 @@ async function saveHooks() {
   } finally {
     loading.value = false
   }
+
   $e('a:webhook:add', {
     operation: hook.operation,
     condition: hook.condition,
@@ -389,7 +377,9 @@ defineExpose({
 
 watch(
   () => hook.eventOperation,
-  (v) => {
+  () => {
+    if (!hook.eventOperation) return
+
     const [event, operation] = hook.eventOperation.split(' ')
     hook.event = event
     hook.operation = operation
@@ -405,21 +395,21 @@ onMounted(() => {
   <div class="mb-4">
     <div class="float-left mt-2">
       <div class="flex items-center">
-        <MdiArrowLeftBoldIcon class="mr-3 text-xl cursor-pointer" @click="emit('backToList')" />
+        <MdiArrowLeftBold class="mr-3 text-xl cursor-pointer" @click="emit('backToList')" />
         <span class="inline text-xl font-bold">{{ meta.title }} : {{ hook.title || 'Webhooks' }} </span>
       </div>
     </div>
     <div class="float-right mb-5">
       <a-button class="mr-3" size="large" @click="testWebhook">
         <div class="flex items-center">
-          <MdiGestureDoubleTapIcon class="mr-2" />
+          <MdiGestureDoubleTap class="mr-2" />
           <!-- TODO: i18n -->
           Test Webhook
         </div>
       </a-button>
       <a-button type="primary" size="large" @click.prevent="saveHooks">
         <div class="flex items-center">
-          <MdiContentSaveIcon class="mr-2" />
+          <MdiContentSave class="mr-2" />
           <!-- Save -->
           {{ $t('general.save') }}
         </div>
@@ -456,14 +446,22 @@ onMounted(() => {
             >
               <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
                 <div class="flex items-center">
-                  <MdiLinkIcon v-if="notificationOption.type === 'URL'" class="mr-2" />
-                  <MdiEmailIcon v-if="notificationOption.type === 'Email'" class="mr-2" />
-                  <MdiSlackIcon v-if="notificationOption.type === 'Slack'" class="mr-2" />
-                  <MdiMicrosoftTeamsIcon v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" />
-                  <MdiDiscordIcon v-if="notificationOption.type === 'Discord'" class="mr-2" />
-                  <MdiChatIcon v-if="notificationOption.type === 'Mattermost'" class="mr-2" />
-                  <MdiWhatsAppIcon v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" />
-                  <MdiCellPhoneMessageIcon v-if="notificationOption.type === 'Twilio'" class="mr-2" />
+                  <MdiLink v-if="notificationOption.type === 'URL'" class="mr-2" />
+
+                  <MdiEmail v-if="notificationOption.type === 'Email'" class="mr-2" />
+
+                  <MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" />
+
+                  <MdiMicrosoftTeams v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" />
+
+                  <MdiDiscord v-if="notificationOption.type === 'Discord'" class="mr-2" />
+
+                  <MdiChat v-if="notificationOption.type === 'Mattermost'" class="mr-2" />
+
+                  <MdiWhatsapp v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" />
+
+                  <MdiCellphoneMessage v-if="notificationOption.type === 'Twilio'" class="mr-2" />
+
                   {{ notificationOption.type }}
                 </div>
               </a-select-option>
@@ -471,17 +469,20 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
+
       <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
         <a-col :span="6">
           <a-select v-model:value="hook.notification.payload.method" size="large">
             <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
           </a-select>
         </a-col>
+
         <a-col :span="18">
           <a-form-item v-bind="validateInfos['notification.payload.path']">
             <a-input v-model:value="hook.notification.payload.path" size="large" placeholder="http://example.com" />
           </a-form-item>
         </a-col>
+
         <a-col :span="24">
           <a-tabs v-model:activeKey="urlTabKey" centered>
             <a-tab-pane key="body" tab="Body">
@@ -503,6 +504,7 @@ onMounted(() => {
           </a-tabs>
         </a-col>
       </a-row>
+
       <a-row v-if="hook.notification.type === 'Slack'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
@@ -516,6 +518,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
+
       <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
@@ -529,6 +532,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
+
       <a-row v-if="hook.notification.type === 'Discord'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
@@ -542,6 +546,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
+
       <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
@@ -555,6 +560,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
+
       <a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex">
         <a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
           <a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]">
@@ -565,6 +571,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
+
       <a-row class="mb-5" type="flex">
         <a-col :span="24">
           <a-card>
@@ -573,6 +580,7 @@ onMounted(() => {
           </a-card>
         </a-col>
       </a-row>
+
       <a-row>
         <a-col :span="24">
           <div class="text-gray-600">
@@ -582,7 +590,7 @@ onMounted(() => {
               <template #title>
                 <span> <strong>data</strong> : Row data <br /> </span>
               </template>
-              <MdiInformationIcon class="ml-2" />
+              <MdiInformation class="ml-2" />
             </a-tooltip>
 
             <div class="mt-3">
diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index dace3b59d0..f231508c2f 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { onMounted } from '@vue/runtime-core'
 import { MetaInj } from '~/context'
-import MdiHookIcon from '~icons/mdi/hook'
-import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
+import { inject, onMounted, ref, useNuxtApp } from '#imports'
 
 const emit = defineEmits(['edit'])
 
@@ -75,7 +73,7 @@ onMounted(() => {
               </template>
               <template #avatar>
                 <div class="mt-4">
-                  <MdiHookIcon class="text-xl" />
+                  <MdiHook class="text-xl" />
                 </div>
               </template>
             </a-list-item-meta>
@@ -84,7 +82,7 @@ onMounted(() => {
                 <!-- Notify Via -->
                 <div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div>
                 <div class="float-right pt-2 pr-1">
-                  <MdiDeleteOutlineIcon class="text-xl" @click.stop="deleteHook(item, index)" />
+                  <MdiDeleteOutline class="text-xl" @click.stop="deleteHook(item, index)" />
                 </div>
               </div>
             </template>
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index 5dc112f605..6ab481b787 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -1,6 +1,7 @@
 export * from './useApi'
 export * from './useGlobal'
 export * from './useInjectionState'
+export * from './useSidebar'
 export * from './useUIPermission'
 export * from './useAttachment'
 export * from './useColors'
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 1bcaa7b237..2376636a24 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -31,7 +31,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     // state
     // todo: give proper type - ColumnType
-    const formState = ref<Partial<Record<string, any>>>({
+    const formState = ref<Record<string, any>>({
       title: 'title',
       uidt: UITypes.SingleLineText,
       ...(column?.value || {}),
@@ -168,6 +168,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       formState.value.altered = formState.value.altered || 2
     }
 
+    // todo: type of onAlter is wrong, the first argument is `CheckboxChangeEvent` not a number.
     const onAlter = (val = 2, cdf = false) => {
       formState.value.altered = formState.value.altered || val
       if (cdf) formState.value.cdf = formState.value.cdf || null
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 83f493fb0f..5de2635183 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -74,9 +74,6 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
   /** reactive token payload */
   const { payload } = useJwt<JwtPayload & User>(token)
 
-  /** is sidebar open */
-  const sidebarOpen = ref(false)
-
   /** currently running requests */
   const runningRequests = useCounter()
 
@@ -88,7 +85,6 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     storage,
     token,
     jwtPayload: payload,
-    sidebarOpen,
     timestamp,
     runningRequests,
     error,
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index e35310ad0d..8d0823a47c 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -24,7 +24,6 @@ export type State = ToRefs<Omit<StoredState, 'token'>> & {
   storage: Ref<StoredState>
   token: WritableComputedRef<StoredState['token']>
   jwtPayload: ComputedRef<(JwtPayload & User) | null>
-  sidebarOpen: Ref<boolean>
   timestamp: Ref<number>
   runningRequests: ReturnType<typeof useCounter>
   error: Ref<any>
diff --git a/packages/nc-gui-v2/composables/useInjectionState/index.ts b/packages/nc-gui-v2/composables/useInjectionState/index.ts
index a714fd5f3c..d96955c07f 100644
--- a/packages/nc-gui-v2/composables/useInjectionState/index.ts
+++ b/packages/nc-gui-v2/composables/useInjectionState/index.ts
@@ -14,7 +14,7 @@ export function useInjectionState<Arguments extends any[], Return>(
     return providedState
   }
 
-  const useInjectedState = () => inject(key)
+  const useInjectedState = () => inject(key, undefined)
 
   return [useProvidingState, useInjectedState]
 }
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 8366cf13e7..327c01d335 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -160,7 +160,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
-      } catch (e) {
+      } catch (e: any) {
         notification.error({
           message: 'Unlink failed',
           description: await extractSdkResponseErrorMsg(e),
@@ -198,7 +198,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
-      } catch (e) {
+      } catch (e: any) {
         notification.error({
           message: 'Linking failed',
           description: await extractSdkResponseErrorMsg(e),
diff --git a/packages/nc-gui-v2/composables/useSidebar/index.ts b/packages/nc-gui-v2/composables/useSidebar/index.ts
new file mode 100644
index 0000000000..bcfa661452
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSidebar/index.ts
@@ -0,0 +1,58 @@
+import { useInjectionState, useToggle, watch } from '#imports'
+
+interface UseSidebarProps {
+  hasSidebar?: boolean
+  isOpen?: boolean
+}
+
+/**
+ * Injection state for sidebars
+ *
+ * Use `provideSidebar` to provide the injection state on current component level (will affect all children injections)
+ * Use `useSidebar` to use the injection state on current component level
+ *
+ * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no injection state can be found
+ */
+const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => {
+  const [isOpen, toggle] = useToggle(props.isOpen ?? false)
+  const [hasSidebar, toggleHasSidebar] = useToggle(props.hasSidebar ?? true)
+
+  watch(
+    hasSidebar,
+    (nextHasSidebar) => {
+      if (!nextHasSidebar) toggle(false)
+    },
+    { immediate: true },
+  )
+
+  watch(
+    isOpen,
+    (nextIsOpen) => {
+      if (nextIsOpen && !hasSidebar.value) toggleHasSidebar(true)
+    },
+    { immediate: true },
+  )
+
+  return {
+    isOpen,
+    toggle,
+    hasSidebar,
+    toggleHasSidebar,
+  }
+}, 'useSidebar')
+
+export const provideSidebar = setup
+
+export function useSidebar(props: UseSidebarProps = {}) {
+  const state = use()
+
+  if (!state) {
+    return setup(props)
+  } else {
+    // set state if props were passed
+    if (typeof props.isOpen !== 'undefined') state.isOpen.value = props.isOpen
+    if (typeof props.hasSidebar !== 'undefined') state.hasSidebar.value = props.hasSidebar
+  }
+
+  return state
+}
diff --git a/packages/nc-gui-v2/composables/useTableCreate.ts b/packages/nc-gui-v2/composables/useTableCreate.ts
deleted file mode 100644
index eba3318570..0000000000
--- a/packages/nc-gui-v2/composables/useTableCreate.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { TableType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
-import { useProject } from './useProject'
-import { useNuxtApp } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-
-export function useTableCreate(onTableCreate?: (tableMeta: TableType) => void) {
-  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
-    title: '',
-    table_name: '',
-    columns: {
-      id: true,
-      title: true,
-      created_at: true,
-      updated_at: true,
-    },
-  })
-
-  const { sqlUi, project, tables } = useProject()
-
-  const toast = useToast()
-
-  const { $api } = useNuxtApp()
-
-  const createTable = async () => {
-    try {
-      if (!sqlUi?.value) return
-      const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
-        if (col.column_name === 'id' && table.columns.id_ag) {
-          Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
-          col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
-          col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
-          return true
-        }
-        return !!table.columns[col.column_name]
-      })
-
-      const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
-        ...table,
-        columns,
-      })
-
-      onTableCreate?.(tableMeta)
-    } catch (e: any) {
-      toast.error(await extractSdkResponseErrorMsg(e))
-    }
-  }
-
-  watch(
-    () => table.title,
-    (title) => {
-      table.table_name = `${project?.value?.prefix || ''}${title}`
-    },
-  )
-
-  const generateUniqueTitle = () => {
-    let c = 1
-    while (tables?.value?.some((t) => t.title === `Sheet${c}`)) {
-      c++
-    }
-    table.title = `Sheet${c}`
-  }
-
-  return { table, createTable, generateUniqueTitle, tables, project }
-}
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index d58b328017..080b42abd5 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,4 +1,4 @@
-import type { Api, FormType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { Api, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { notification } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
@@ -28,6 +28,7 @@ export function useViewData(
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const formColumnData = ref<FormType | undefined>(undefined)
   const formViewData = ref<FormType | undefined>(undefined)
+  const galleryData = ref<GalleryType | undefined>(undefined)
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
@@ -60,6 +61,13 @@ export function useViewData(
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
   }
+
+  const loadGalleryData = async () => {
+    if (!viewMeta?.value?.id) return
+
+    galleryData.value = await $api.dbView.galleryRead(viewMeta.value.id)
+  }
+
   const insertRow = async (row: Record<string, any>, rowIndex = formattedData.value?.length) => {
     try {
       const insertObj = meta?.value?.columns?.reduce((o: any, col) => {
@@ -297,6 +305,8 @@ export function useViewData(
     updateOrSaveRow,
     selectedAllRecords,
     syncCount,
+    galleryData,
+    loadGalleryData,
     loadFormView,
     formColumnData,
     formViewData,
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
new file mode 100644
index 0000000000..a8c2b5e131
--- /dev/null
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { breakpointsTailwind } from '@vueuse/core'
+import { navigateTo } from '#app'
+import { computed, useBreakpoints, useGlobal, useProject, useRoute } from '#imports'
+
+/** get current breakpoints (for enabling sidebar) */
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const { signOut, signedIn, isLoading, user } = useGlobal()
+
+const { project } = useProject()
+
+const route = useRoute()
+
+const email = computed(() => user.value?.email ?? '---')
+
+const logout = () => {
+  signOut()
+  navigateTo('/signin')
+}
+</script>
+
+<template>
+  <a-layout id="nc-app" has-sider>
+    <div id="nc-sidebar-left" />
+
+    <a-layout class="!flex-col">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-1 pr-4 shadow-lg">
+        <div
+          v-if="route.name === 'index'"
+          class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"
+          @click="navigateTo('/')"
+        >
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
+
+        <div class="flex justify-center">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3">
+            {{ $t('general.loading') }}
+
+            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+          </div>
+        </div>
+
+        <div class="flex-1" />
+
+        <a-tooltip placement="left">
+          <template #title> Switch language </template>
+
+          <div class="flex pr-4 items-center">
+            <GeneralLanguage class="cursor-pointer text-2xl" />
+          </div>
+        </a-tooltip>
+
+        <template v-if="signedIn">
+          <a-dropdown :trigger="['click']">
+            <MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
+
+            <template #overlay>
+              <a-menu class="!py-0 nc-user-menu dark:(!bg-gray-800) leading-8 !rounded">
+                <a-menu-item key="0" class="!rounded-t">
+                  <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
+                    <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
+
+                    <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
+                  </nuxt-link>
+                </a-menu-item>
+
+                <a-menu-divider class="!m-0" />
+
+                <a-menu-item key="1" class="!rounded-b">
+                  <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
+                    <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
+
+                    <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
+                      {{ $t('general.signOut') }}
+                    </span>
+                  </div>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </template>
+      </a-layout-header>
+
+      <div class="w-full" style="height: calc(100% - var(--header-height))">
+        <slot />
+      </div>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+</style>
diff --git a/packages/nc-gui-v2/layouts/default.vue b/packages/nc-gui-v2/layouts/default.vue
index e77419b96e..dce2aae15c 100644
--- a/packages/nc-gui-v2/layouts/default.vue
+++ b/packages/nc-gui-v2/layouts/default.vue
@@ -18,11 +18,13 @@ export default {
 </script>
 
 <template>
-  <a-layout-content class="pl-2 pt-2">
-    <teleport v-if="$slots.sidebar" to="#sidebar">
+  <div class="w-full h-full">
+    <teleport v-if="$slots.sidebar" to="#nc-sidebar-left">
       <slot name="sidebar" />
     </teleport>
 
-    <slot />
-  </a-layout-content>
+    <a-layout-content>
+      <slot />
+    </a-layout-content>
+  </div>
 </template>
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index c2060d7c0b..192dc0d9f6 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -101,4 +101,8 @@ export default defineNuxtConfig({
       },
     },
   },
+
+  image: {
+    dir: 'assets/',
+  },
 })
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 0588364b3a..5d95e21cac 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -27,7 +27,7 @@
         "xlsx": "^0.17.3"
       },
       "devDependencies": {
-        "@antfu/eslint-config": "^0.25.2",
+        "@antfu/eslint-config": "^0.26.0",
         "@iconify-json/cil": "^1.1.2",
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/eva": "^1.1.2",
@@ -55,7 +55,7 @@
         "happy-dom": "^6.0.3",
         "less": "^4.1.3",
         "nuxt": "3.0.0-rc.4",
-        "nuxt-windicss": "^2.4.2",
+        "nuxt-windicss": "^2.5.0",
         "prettier": "^2.7.1",
         "sass": "^1.53.0",
         "unplugin-icons": "^0.14.7",
@@ -140,76 +140,76 @@
       }
     },
     "node_modules/@antfu/eslint-config": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config/-/eslint-config-0.25.2.tgz",
-      "integrity": "sha512-dIqxqBa6ALqaBQyErMnYLpyn4xpwp1YefbYxDMgNFM8MzY/ShJgaBWAGlywFeDwyAR44jaaVY8wRwDxODF8bPg==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config/-/eslint-config-0.26.0.tgz",
+      "integrity": "sha512-3f+JKBYPZZot5cdS4gkZxuiytUTfHWhsKS1UmNhqEn11G5BmzYSu1LRf0K/n10hb/u+GUtZJwKAovu6qnQBM9w==",
       "dev": true,
       "dependencies": {
-        "@antfu/eslint-config-react": "0.25.2",
-        "@antfu/eslint-config-vue": "0.25.2",
-        "@typescript-eslint/eslint-plugin": "^5.26.0",
-        "@typescript-eslint/parser": "^5.26.0",
+        "@antfu/eslint-config-react": "0.26.0",
+        "@antfu/eslint-config-vue": "0.26.0",
+        "@typescript-eslint/eslint-plugin": "^5.32.0",
+        "@typescript-eslint/parser": "^5.32.0",
         "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-html": "^6.2.0",
+        "eslint-plugin-html": "^7.1.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsonc": "^2.2.1",
-        "eslint-plugin-n": "^15.2.0",
+        "eslint-plugin-jsonc": "^2.3.1",
+        "eslint-plugin-n": "^15.2.4",
         "eslint-plugin-promise": "^6.0.0",
-        "eslint-plugin-unicorn": "^42.0.0",
-        "eslint-plugin-vue": "^9.0.1",
-        "eslint-plugin-yml": "^1.0.0",
+        "eslint-plugin-unicorn": "^43.0.2",
+        "eslint-plugin-vue": "^9.3.0",
+        "eslint-plugin-yml": "^1.1.0",
         "jsonc-eslint-parser": "^2.1.0",
-        "yaml-eslint-parser": "^1.0.1"
+        "yaml-eslint-parser": "^1.1.0"
       },
       "peerDependencies": {
         "eslint": ">=7.4.0"
       }
     },
     "node_modules/@antfu/eslint-config-basic": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-basic/-/eslint-config-basic-0.25.2.tgz",
-      "integrity": "sha512-D81jE90B7cujMmU2mKEaUcRsKRAfVX4PniEoaD0c3HiqprqghfBjuv3B6p1+tG9uJQAgLBVsK+G92Y+AAgFaOA==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-basic/-/eslint-config-basic-0.26.0.tgz",
+      "integrity": "sha512-l/Omn5HuI3VgHPGJ13pqdGEdF7D7HSzN85KF0HaR/jm24QzL2kkFeZJuglv+YSXyVDI1eAbzF52TlJUz1cxqzQ==",
       "dev": true,
       "dependencies": {
-        "eslint-plugin-antfu": "0.25.2",
+        "eslint-plugin-antfu": "0.26.0",
         "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-html": "^6.2.0",
+        "eslint-plugin-html": "^7.1.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsonc": "^2.2.1",
-        "eslint-plugin-markdown": "^2.2.1",
-        "eslint-plugin-n": "^15.2.0",
+        "eslint-plugin-jsonc": "^2.3.1",
+        "eslint-plugin-markdown": "^3.0.0",
+        "eslint-plugin-n": "^15.2.4",
         "eslint-plugin-promise": "^6.0.0",
-        "eslint-plugin-unicorn": "^42.0.0",
-        "eslint-plugin-yml": "^1.0.0",
+        "eslint-plugin-unicorn": "^43.0.2",
+        "eslint-plugin-yml": "^1.1.0",
         "jsonc-eslint-parser": "^2.1.0",
-        "yaml-eslint-parser": "^1.0.1"
+        "yaml-eslint-parser": "^1.1.0"
       },
       "peerDependencies": {
         "eslint": ">=7.4.0"
       }
     },
     "node_modules/@antfu/eslint-config-react": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-react/-/eslint-config-react-0.25.2.tgz",
-      "integrity": "sha512-jGol7/UTUa9z55p4Oy/K5yGgY179fj1kl0kdo3bRnFjzUZQuDGuxw5HiZdYx333pjBdizkPl6cMJ8M6sc3PzFg==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-react/-/eslint-config-react-0.26.0.tgz",
+      "integrity": "sha512-QkRhzivKAtTVtLMFXt7Sl+hBM/LCAU+EUpIxTqw/h0uufYmzIrbdVwkxPntZaXl5p/qLZqQOZG3Iu7oek+MNeA==",
       "dev": true,
       "dependencies": {
-        "@antfu/eslint-config-ts": "0.25.2",
-        "eslint-plugin-react": "^7.30.0"
+        "@antfu/eslint-config-ts": "0.26.0",
+        "eslint-plugin-react": "^7.30.1"
       },
       "peerDependencies": {
         "eslint": ">=7.4.0"
       }
     },
     "node_modules/@antfu/eslint-config-ts": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-ts/-/eslint-config-ts-0.25.2.tgz",
-      "integrity": "sha512-Dpp4r3CaDZVh73lMxhW0sVGsPwUf1YTpYV5JefmBtgEZKOAc+QqYbLjFZ6QGRUpdPLldRvD+xTFpax6t8NKgyA==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-ts/-/eslint-config-ts-0.26.0.tgz",
+      "integrity": "sha512-LnJgBP+XAsGijfmjAZk6BDxlt7UYGiXyCIviLDgg8bmPaLAX3I+i0wmj9DwhDIYeXForeP/Io+dBT63k5BheBw==",
       "dev": true,
       "dependencies": {
-        "@antfu/eslint-config-basic": "0.25.2",
-        "@typescript-eslint/eslint-plugin": "^5.26.0",
-        "@typescript-eslint/parser": "^5.26.0"
+        "@antfu/eslint-config-basic": "0.26.0",
+        "@typescript-eslint/eslint-plugin": "^5.32.0",
+        "@typescript-eslint/parser": "^5.32.0"
       },
       "peerDependencies": {
         "eslint": ">=7.4.0",
@@ -217,13 +217,13 @@
       }
     },
     "node_modules/@antfu/eslint-config-vue": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-vue/-/eslint-config-vue-0.25.2.tgz",
-      "integrity": "sha512-ObZOzvQvLe/qETq5miVmFWRgjNwWAE/P1I2YhKyDFK7KHquM7bKysfnmkoPpm2HkOpseMILoc+5UKo/w3L7GHg==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-vue/-/eslint-config-vue-0.26.0.tgz",
+      "integrity": "sha512-a4ov8vzOzV5WPBSXIwg1oDnpSEOaxpvqz9cZK/lwqDsS+tk2QAI6yfcxwbhMIDUy3pA3u9B62K9tP+9HhqncIw==",
       "dev": true,
       "dependencies": {
-        "@antfu/eslint-config-ts": "0.25.2",
-        "eslint-plugin-vue": "^9.0.1"
+        "@antfu/eslint-config-ts": "0.26.0",
+        "eslint-plugin-vue": "^9.3.0"
       },
       "peerDependencies": {
         "eslint": ">=7.4.0"
@@ -608,9 +608,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+      "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -2414,14 +2414,14 @@
       "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.0.tgz",
-      "integrity": "sha512-lvhRJ2pGe2V9MEU46ELTdiHgiAFZPKtLhiU5wlnaYpMc2+c1R8fh8i80ZAa665drvjHKUJyRRGg3gEm1If54ow==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.33.0.tgz",
+      "integrity": "sha512-jHvZNSW2WZ31OPJ3enhLrEKvAZNyAFWZ6rx9tUwaessTc4sx9KmgMNhVcqVAl1ETnT5rU5fpXTLmY9YvC1DCNg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.30.0",
-        "@typescript-eslint/type-utils": "5.30.0",
-        "@typescript-eslint/utils": "5.30.0",
+        "@typescript-eslint/scope-manager": "5.33.0",
+        "@typescript-eslint/type-utils": "5.33.0",
+        "@typescript-eslint/utils": "5.33.0",
         "debug": "^4.3.4",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.2.0",
@@ -2447,14 +2447,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.0.tgz",
-      "integrity": "sha512-2oYYUws5o2liX6SrFQ5RB88+PuRymaM2EU02/9Ppoyu70vllPnHVO7ioxDdq/ypXHA277R04SVjxvwI8HmZpzA==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.33.0.tgz",
+      "integrity": "sha512-cgM5cJrWmrDV2KpvlcSkelTBASAs1mgqq+IUGKJvFxWrapHpaRy5EXPQz9YaKF3nZ8KY18ILTiVpUtbIac86/w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.30.0",
-        "@typescript-eslint/types": "5.30.0",
-        "@typescript-eslint/typescript-estree": "5.30.0",
+        "@typescript-eslint/scope-manager": "5.33.0",
+        "@typescript-eslint/types": "5.33.0",
+        "@typescript-eslint/typescript-estree": "5.33.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2474,13 +2474,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.0.tgz",
-      "integrity": "sha512-3TZxvlQcK5fhTBw5solQucWSJvonXf5yua5nx8OqK94hxdrT7/6W3/CS42MLd/f1BmlmmbGEgQcTHHCktUX5bQ==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.33.0.tgz",
+      "integrity": "sha512-/Jta8yMNpXYpRDl8EwF/M8It2A9sFJTubDo0ATZefGXmOqlaBffEw0ZbkbQ7TNDK6q55NPHFshGBPAZvZkE8Pw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.30.0",
-        "@typescript-eslint/visitor-keys": "5.30.0"
+        "@typescript-eslint/types": "5.33.0",
+        "@typescript-eslint/visitor-keys": "5.33.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2491,12 +2491,12 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.0.tgz",
-      "integrity": "sha512-GF8JZbZqSS+azehzlv/lmQQ3EU3VfWYzCczdZjJRxSEeXDQkqFhCBgFhallLDbPwQOEQ4MHpiPfkjKk7zlmeNg==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.33.0.tgz",
+      "integrity": "sha512-2zB8uEn7hEH2pBeyk3NpzX1p3lF9dKrEbnXq1F7YkpZ6hlyqb2yZujqgRGqXgRBTHWIUG3NGx/WeZk224UKlIA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/utils": "5.30.0",
+        "@typescript-eslint/utils": "5.33.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -2517,9 +2517,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.0.tgz",
-      "integrity": "sha512-vfqcBrsRNWw/LBXyncMF/KrUTYYzzygCSsVqlZ1qGu1QtGs6vMkt3US0VNSQ05grXi5Yadp3qv5XZdYLjpp8ag==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.33.0.tgz",
+      "integrity": "sha512-nIMt96JngB4MYFYXpZ/3ZNU4GWPNdBbcB5w2rDOCpXOVUkhtNlG2mmm8uXhubhidRZdwMaMBap7Uk8SZMU/ppw==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2530,13 +2530,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.0.tgz",
-      "integrity": "sha512-hDEawogreZB4n1zoqcrrtg/wPyyiCxmhPLpZ6kmWfKF5M5G0clRLaEexpuWr31fZ42F96SlD/5xCt1bT5Qm4Nw==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.33.0.tgz",
+      "integrity": "sha512-tqq3MRLlggkJKJUrzM6wltk8NckKyyorCSGMq4eVkyL5sDYzJJcMgZATqmF8fLdsWrW7OjjIZ1m9v81vKcaqwQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.30.0",
-        "@typescript-eslint/visitor-keys": "5.30.0",
+        "@typescript-eslint/types": "5.33.0",
+        "@typescript-eslint/visitor-keys": "5.33.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2586,15 +2586,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.0.tgz",
-      "integrity": "sha512-0bIgOgZflLKIcZsWvfklsaQTM3ZUbmtH0rJ1hKyV3raoUYyeZwcjQ8ZUJTzS7KnhNcsVT1Rxs7zeeMHEhGlltw==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.33.0.tgz",
+      "integrity": "sha512-JxOAnXt9oZjXLIiXb5ZIcZXiwVHCkqZgof0O8KPgz7C7y0HS42gi75PdPlqh1Tf109M0fyUw45Ao6JLo7S5AHw==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.30.0",
-        "@typescript-eslint/types": "5.30.0",
-        "@typescript-eslint/typescript-estree": "5.30.0",
+        "@typescript-eslint/scope-manager": "5.33.0",
+        "@typescript-eslint/types": "5.33.0",
+        "@typescript-eslint/typescript-estree": "5.33.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       },
@@ -2610,12 +2610,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.0.tgz",
-      "integrity": "sha512-6WcIeRk2DQ3pHKxU1Ni0qMXJkjO/zLjBymlYBy/53qxe7yjEFSvzKLDToJjURUhSl2Fzhkl4SMXQoETauF74cw==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.33.0.tgz",
+      "integrity": "sha512-/XsqCzD4t+Y9p5wd9HZiptuGKBlaZO5showwqODii5C0nZawxWLF+Q6k5wYHBrQv96h6GYKyqqMHCSTqta8Kiw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.30.0",
+        "@typescript-eslint/types": "5.33.0",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -3264,9 +3264,9 @@
       }
     },
     "node_modules/@windicss/config": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@windicss/config/-/config-1.8.6.tgz",
-      "integrity": "sha512-WVS41qUJtd44g2iWzTAE8tpgk8gD0yAr1RwwaWi7FAECKm3LVNMLOoToum9R/QKFE2n64EUVJpIvSUNby8rlhg==",
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/@windicss/config/-/config-1.8.7.tgz",
+      "integrity": "sha512-8n+/Y36j5L3rw2tgMdLjeGRuNV7VYfKoHoraLK6Bk9OJ1MTPd5vv7pekof/uOPWVV7WWjVeZ6CTO8SDbDDW3iw==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -3296,13 +3296,13 @@
       "dev": true
     },
     "node_modules/@windicss/plugin-utils": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.8.6.tgz",
-      "integrity": "sha512-YY6EcUsgkosaQkIseFiIoHfU1H5boOAs/l74QWLI6ryNeHLMq2e04QVsFz+Rt+U8b8PRNxXPC8ADbxE05X7I7g==",
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.8.7.tgz",
+      "integrity": "sha512-dfj95olNZyGFDPFMBvE5oq8hA5f0ooUJZjVdWlthS4ek4W1/xNOHDxB6ygWR8LE9zCOXZykApjt1LOhy9Ky2QA==",
       "dev": true,
       "dependencies": {
         "@antfu/utils": "^0.5.2",
-        "@windicss/config": "1.8.6",
+        "@windicss/config": "1.8.7",
         "debug": "^4.3.4",
         "fast-glob": "^3.2.11",
         "magic-string": "^0.26.2",
@@ -4353,25 +4353,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/cheerio/node_modules/htmlparser2": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
-      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
-      "dev": true,
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "domutils": "^3.0.1",
-        "entities": "^4.3.0"
-      }
-    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4417,9 +4398,9 @@
       }
     },
     "node_modules/ci-info": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz",
-      "integrity": "sha512-SXgeMX9VwDe7iFFaEWkA5AstuER9YKqy4EhHqr4DVqkwmD9rpVimkMKWHdjn30Ja45txyjhSn63lVX69eVCckg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz",
+      "integrity": "sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==",
       "dev": true
     },
     "node_modules/clean-regexp": {
@@ -6245,12 +6226,12 @@
       }
     },
     "node_modules/eslint-plugin-antfu": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-antfu/-/eslint-plugin-antfu-0.25.2.tgz",
-      "integrity": "sha512-yRhuFMwUKhSYm8BWTZsW4ymYnFPCJWZb2LzjG+mQb7JbKflk73JIFMCREPOaV4nWwc4YJEPhym75QsC7AFbqSw==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-antfu/-/eslint-plugin-antfu-0.26.0.tgz",
+      "integrity": "sha512-hc5Bb6EH6zM/Vjy0scOQydlG9I1DDocG4AikyUfqjSFneWv6eNItej9LHYTXEGc0iGosCysNS4tPUAPuhBHkCA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/utils": "^5.26.0"
+        "@typescript-eslint/utils": "^5.32.0"
       }
     },
     "node_modules/eslint-plugin-es": {
@@ -6325,12 +6306,12 @@
       }
     },
     "node_modules/eslint-plugin-html": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.2.0.tgz",
-      "integrity": "sha512-vi3NW0E8AJombTvt8beMwkL1R/fdRWl4QSNRNMhVQKWm36/X0KF0unGNAY4mqUF06mnwVWZcIcerrCnfn9025g==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-7.1.0.tgz",
+      "integrity": "sha512-fNLRraV/e6j8e3XYOC9xgND4j+U7b1Rq+OygMlLcMg+wI/IpVbF+ubQa3R78EjKB9njT6TQOlcK5rFKBVVtdfg==",
       "dev": true,
       "dependencies": {
-        "htmlparser2": "^7.1.2"
+        "htmlparser2": "^8.0.1"
       }
     },
     "node_modules/eslint-plugin-import": {
@@ -6388,9 +6369,9 @@
       "dev": true
     },
     "node_modules/eslint-plugin-jsonc": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.3.0.tgz",
-      "integrity": "sha512-QqHj7Chw8vsALsCOhFxecRIepxpbcpmMon9yA1+GaYk1Am0GanHAwnTkeVX+/ysAb4QTkeGMZ+ZPK4TKrZ/VSw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.3.1.tgz",
+      "integrity": "sha512-8sgWGWiVRMFL6xGawRymrE4RjZJgiU0rXYgFFb71wvdwuUkPgWSvfFtc8jfwcgjjqFjis8vzCUFsg7SciMEDWw==",
       "dev": true,
       "dependencies": {
         "eslint-utils": "^3.0.0",
@@ -6408,24 +6389,24 @@
       }
     },
     "node_modules/eslint-plugin-markdown": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
-      "integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-3.0.0.tgz",
+      "integrity": "sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==",
       "dev": true,
       "dependencies": {
         "mdast-util-from-markdown": "^0.8.5"
       },
       "engines": {
-        "node": "^8.10.0 || ^10.12.0 || >= 12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "eslint": ">=6.0.0"
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/eslint-plugin-n": {
-      "version": "15.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.2.3.tgz",
-      "integrity": "sha512-H+KC7U5R+3IWTeRnACm/4wlqLvS1Q7M6t7BGhn89qXDkZan8HTAEv3ouIONA0ifDwc2YzPFmyPzHuNLddNK4jw==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.2.4.tgz",
+      "integrity": "sha512-tjnVMv2fiXYMnuiIFI8QMtyUFI42SckEEWvi8h68SWGWshfqO6SSCASy24dGMGAiy7NUk6DZt90DM0iNUsmQ5w==",
       "dev": true,
       "dependencies": {
         "builtins": "^5.0.1",
@@ -6556,13 +6537,13 @@
       }
     },
     "node_modules/eslint-plugin-unicorn": {
-      "version": "42.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-42.0.0.tgz",
-      "integrity": "sha512-ixBsbhgWuxVaNlPTT8AyfJMlhyC5flCJFjyK3oKE8TRrwBnaHvUbuIkCM1lqg8ryYrFStL/T557zfKzX4GKSlg==",
+      "version": "43.0.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-43.0.2.tgz",
+      "integrity": "sha512-DtqZ5mf/GMlfWoz1abIjq5jZfaFuHzGBZYIeuJfEoKKGWRHr2JiJR+ea+BF7Wx2N1PPRoT/2fwgiK1NnmNE3Hg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.15.7",
-        "ci-info": "^3.3.0",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "ci-info": "^3.3.2",
         "clean-regexp": "^1.0.0",
         "eslint-utils": "^3.0.0",
         "esquery": "^1.4.0",
@@ -6573,23 +6554,23 @@
         "read-pkg-up": "^7.0.1",
         "regexp-tree": "^0.1.24",
         "safe-regex": "^2.1.1",
-        "semver": "^7.3.5",
+        "semver": "^7.3.7",
         "strip-indent": "^3.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=14.18"
       },
       "funding": {
         "url": "https://github.com/sindresorhus/eslint-plugin-unicorn?sponsor=1"
       },
       "peerDependencies": {
-        "eslint": ">=8.8.0"
+        "eslint": ">=8.18.0"
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz",
-      "integrity": "sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.3.0.tgz",
+      "integrity": "sha512-iscKKkBZgm6fGZwFt6poRoWC0Wy2dQOlwUPW++CiPoQiw1enctV2Hj5DBzzjJZfyqs+FAXhgzL4q0Ww03AgSmQ==",
       "dev": true,
       "dependencies": {
         "eslint-utils": "^3.0.0",
@@ -6608,15 +6589,15 @@
       }
     },
     "node_modules/eslint-plugin-yml": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-yml/-/eslint-plugin-yml-1.0.0.tgz",
-      "integrity": "sha512-0RVoUFh5vpznE2DIP5agSpWO/nU8GgAWwoTAHWopU2X+1SCB5ykHU6DwS0GrZ5Hvejtk6CcADQllpQQJB4C5QA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-yml/-/eslint-plugin-yml-1.1.0.tgz",
+      "integrity": "sha512-64g3vWwolk9d+FykuqxXGLn3oGEK2ZecIAyfIEsyuSHBQkR8utp5h8e75R6tGph1IRggoGl27QQ2oi2M1IF1Vw==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.2",
         "lodash": "^4.17.21",
         "natural-compare": "^1.4.0",
-        "yaml-eslint-parser": "^1.0.0"
+        "yaml-eslint-parser": "^1.1.0"
       },
       "engines": {
         "node": "^14.17.0 || >=16.0.0"
@@ -7659,15 +7640,15 @@
       }
     },
     "node_modules/h3": {
-      "version": "0.7.10",
-      "resolved": "https://registry.npmjs.org/h3/-/h3-0.7.10.tgz",
-      "integrity": "sha512-HcUQxlOocG2uf6PQLu3Bxk0KSXcTuxSF6kRclFBDO7y74Ml0wCwTvmoN5zmrzoxbNHecDNUrcGr8qSNGcOqAHQ==",
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/h3/-/h3-0.7.13.tgz",
+      "integrity": "sha512-3rs+iokAwin4GnToWc+4JeASAYPujojMWicaTgv5WMucED94cFVVGctlk7N6iJfQ7SZ2N5CtmQ2C3L2aDFpd2w==",
       "dev": true,
       "dependencies": {
         "cookie-es": "^0.5.0",
         "destr": "^1.1.1",
         "radix3": "^0.1.2",
-        "ufo": "^0.8.4"
+        "ufo": "^0.8.5"
       }
     },
     "node_modules/happy-dom": {
@@ -7843,9 +7824,9 @@
       }
     },
     "node_modules/htmlparser2": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
-      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
       "dev": true,
       "funding": [
         "https://github.com/fb55/htmlparser2?sponsor=1",
@@ -7855,16 +7836,59 @@
         }
       ],
       "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.2",
-        "domutils": "^2.8.0",
-        "entities": "^3.0.1"
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
       }
     },
-    "node_modules/htmlparser2/node_modules/entities": {
+    "node_modules/htmlparser2/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domutils": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.3.1.tgz",
+      "integrity": "sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==",
       "dev": true,
       "engines": {
         "node": ">=0.12"
@@ -8884,9 +8908,9 @@
       }
     },
     "node_modules/jsx-ast-utils": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.1.tgz",
-      "integrity": "sha512-pxrjmNpeRw5wwVeWyEAk7QJu2GnBO3uzPFmHCKJJFPKK2Cy0cWL23krGtLdnMmbIi6/FjlrQpPyfQI19ByPOhQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.2.tgz",
+      "integrity": "sha512-4ZCADZHRkno244xlNnn4AOG6sRQ7iBZ5BbgZ4vW4y5IZw7cVUD1PPeblm1xx/nfmMxPdt/LHsXZW8z/j58+l9Q==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.5",
@@ -9061,9 +9085,9 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -10120,54 +10144,26 @@
       }
     },
     "node_modules/nuxt-windicss": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/nuxt-windicss/-/nuxt-windicss-2.4.2.tgz",
-      "integrity": "sha512-coHvXGw4CqkRqG47aJqNKbQKMO17ZGXFVyeOKGaRnvsS4FcdfKtYKukpDgJm0sCIG57z8CljfX3nBy71+vu3mg==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/nuxt-windicss/-/nuxt-windicss-2.5.0.tgz",
+      "integrity": "sha512-h5Wh1Pj5OrYvbQmfarOxi6I366xyPxYVlUIZhu5OPGn0uUaoQIOl5ASR1QD3eR/BH3kdpM/r8wyjikDoW7oSbg==",
       "dev": true,
       "dependencies": {
-        "@nuxt/kit": "3.0.0-rc.3",
-        "@windicss/plugin-utils": "^1.8.4",
+        "@nuxt/kit": "3.0.0-rc.6",
+        "@windicss/config": "^1.8.7",
+        "@windicss/plugin-utils": "^1.8.7",
         "consola": "^2.15.3",
         "defu": "^6.0.0",
         "fs-extra": "^10.1.0",
-        "h3": "^0.7.8",
-        "listhen": "^0.2.11",
-        "pathe": "^0.3.0",
+        "h3": "^0.7.12",
+        "listhen": "^0.2.13",
+        "pathe": "^0.3.2",
         "read-cache": "^1.0.0",
         "sirv": "^2.0.2",
-        "vite-plugin-windicss": "^1.8.4",
-        "windicss": "^3.5.4",
+        "vite-plugin-windicss": "^1.8.7",
+        "windicss": "^3.5.6",
         "windicss-analysis": "^0.3.5",
-        "windicss-webpack-plugin": "^1.7.3"
-      }
-    },
-    "node_modules/nuxt-windicss/node_modules/@nuxt/kit": {
-      "version": "3.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.3.tgz",
-      "integrity": "sha512-aD993HKXZ76cwxkM2LCwWRQaOI3RjLCg/kj+8ZS6qN4VrpwrZp4xM59YYIYs3/Vze4OG3D4+0gr0u5zdgf8v8g==",
-      "dev": true,
-      "dependencies": {
-        "@nuxt/schema": "^3.0.0-rc.3",
-        "c12": "^0.2.7",
-        "consola": "^2.15.3",
-        "defu": "^6.0.0",
-        "globby": "^13.1.1",
-        "hash-sum": "^2.0.0",
-        "ignore": "^5.2.0",
-        "jiti": "^1.13.0",
-        "knitwork": "^0.1.1",
-        "lodash.template": "^4.5.0",
-        "mlly": "^0.5.2",
-        "pathe": "^0.3.0",
-        "pkg-types": "^0.3.2",
-        "scule": "^0.2.1",
-        "semver": "^7.3.7",
-        "unctx": "^1.1.4",
-        "unimport": "^0.1.9",
-        "untyped": "^0.4.4"
-      },
-      "engines": {
-        "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0"
+        "windicss-webpack-plugin": "^1.7.5"
       }
     },
     "node_modules/nuxt/node_modules/unimport": {
@@ -10256,14 +10252,14 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.3.tgz",
+      "integrity": "sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -13980,12 +13976,12 @@
       }
     },
     "node_modules/vite-plugin-windicss": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.6.tgz",
-      "integrity": "sha512-D4G4qmumgklPiPrq/ZALqq8Mby6krskFVShbmb5c+0VCSsLUN96qyFRTwi81rNIHwFvlbpqflgh+BpUM/9VjQg==",
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.7.tgz",
+      "integrity": "sha512-/zwQ8+RV+MSkbG0IGqsEma6r2R01NzN/aNpNjJD7VVAkxAptNznqDXOObFTskkWfZ+9m6KJZCOuCPgAFtQIzEA==",
       "dev": true,
       "dependencies": {
-        "@windicss/plugin-utils": "1.8.6",
+        "@windicss/plugin-utils": "1.8.7",
         "debug": "^4.3.4",
         "kolorist": "^1.5.1",
         "windicss": "^3.5.6"
@@ -13994,7 +13990,7 @@
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "vite": "^2.0.1"
+        "vite": "^2.0.1 || ^3.0.0"
       }
     },
     "node_modules/vitest": {
@@ -14556,19 +14552,19 @@
       }
     },
     "node_modules/windicss-webpack-plugin": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/windicss-webpack-plugin/-/windicss-webpack-plugin-1.7.3.tgz",
-      "integrity": "sha512-vESTMEUqzNlvOmnOCCxeqDkj1q2u69FfKMQHyTF9Y9tLJbWttEHgt+qSJZ3cYndUHRxbz06INanEyL08dQr79A==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/windicss-webpack-plugin/-/windicss-webpack-plugin-1.7.5.tgz",
+      "integrity": "sha512-+DwZwFcjgYrD/UU1UEs1TOTo4ijAwRkXEgJMttPd05NSC3ULvguvNKL5kNxrCTYs4OMJn68qbCfkjpI0mir4cQ==",
       "dev": true,
       "dependencies": {
-        "@windicss/plugin-utils": "^1.8.4",
+        "@windicss/plugin-utils": "^1.8.7",
         "debug": "^4.3.4",
         "get-port": "^6.1.2",
         "loader-utils": "^2.0.0",
         "lodash": "^4.17.21",
         "pathe": "^0.2.0",
         "webpack-virtual-modules": "^0.4.3",
-        "windicss": "^3.5.4"
+        "windicss": "^3.5.6"
       }
     },
     "node_modules/windicss-webpack-plugin/node_modules/pathe": {
@@ -14758,9 +14754,9 @@
       }
     },
     "node_modules/yaml-eslint-parser": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-1.0.1.tgz",
-      "integrity": "sha512-acQYWneSXwnJgPQbTyJvDxWx9zlJ/rq267p/zzQMSCE7ljJxQ8elefsQase1gEIJMo+pIqmLRczoo7fPt6VbKQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-1.1.0.tgz",
+      "integrity": "sha512-b464Q1fYiX1oYx2kE8k4mEp6S9Prk+tfDsY/IPxQ0FCjEuj3AKko5Skf3/yQJeYTTDyjDE+aWIJemnv29HvEWQ==",
       "dev": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.0.0",
@@ -14871,77 +14867,77 @@
       }
     },
     "@antfu/eslint-config": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config/-/eslint-config-0.25.2.tgz",
-      "integrity": "sha512-dIqxqBa6ALqaBQyErMnYLpyn4xpwp1YefbYxDMgNFM8MzY/ShJgaBWAGlywFeDwyAR44jaaVY8wRwDxODF8bPg==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config/-/eslint-config-0.26.0.tgz",
+      "integrity": "sha512-3f+JKBYPZZot5cdS4gkZxuiytUTfHWhsKS1UmNhqEn11G5BmzYSu1LRf0K/n10hb/u+GUtZJwKAovu6qnQBM9w==",
       "dev": true,
       "requires": {
-        "@antfu/eslint-config-react": "0.25.2",
-        "@antfu/eslint-config-vue": "0.25.2",
-        "@typescript-eslint/eslint-plugin": "^5.26.0",
-        "@typescript-eslint/parser": "^5.26.0",
+        "@antfu/eslint-config-react": "0.26.0",
+        "@antfu/eslint-config-vue": "0.26.0",
+        "@typescript-eslint/eslint-plugin": "^5.32.0",
+        "@typescript-eslint/parser": "^5.32.0",
         "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-html": "^6.2.0",
+        "eslint-plugin-html": "^7.1.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsonc": "^2.2.1",
-        "eslint-plugin-n": "^15.2.0",
+        "eslint-plugin-jsonc": "^2.3.1",
+        "eslint-plugin-n": "^15.2.4",
         "eslint-plugin-promise": "^6.0.0",
-        "eslint-plugin-unicorn": "^42.0.0",
-        "eslint-plugin-vue": "^9.0.1",
-        "eslint-plugin-yml": "^1.0.0",
+        "eslint-plugin-unicorn": "^43.0.2",
+        "eslint-plugin-vue": "^9.3.0",
+        "eslint-plugin-yml": "^1.1.0",
         "jsonc-eslint-parser": "^2.1.0",
-        "yaml-eslint-parser": "^1.0.1"
+        "yaml-eslint-parser": "^1.1.0"
       }
     },
     "@antfu/eslint-config-basic": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-basic/-/eslint-config-basic-0.25.2.tgz",
-      "integrity": "sha512-D81jE90B7cujMmU2mKEaUcRsKRAfVX4PniEoaD0c3HiqprqghfBjuv3B6p1+tG9uJQAgLBVsK+G92Y+AAgFaOA==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-basic/-/eslint-config-basic-0.26.0.tgz",
+      "integrity": "sha512-l/Omn5HuI3VgHPGJ13pqdGEdF7D7HSzN85KF0HaR/jm24QzL2kkFeZJuglv+YSXyVDI1eAbzF52TlJUz1cxqzQ==",
       "dev": true,
       "requires": {
-        "eslint-plugin-antfu": "0.25.2",
+        "eslint-plugin-antfu": "0.26.0",
         "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-html": "^6.2.0",
+        "eslint-plugin-html": "^7.1.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsonc": "^2.2.1",
-        "eslint-plugin-markdown": "^2.2.1",
-        "eslint-plugin-n": "^15.2.0",
+        "eslint-plugin-jsonc": "^2.3.1",
+        "eslint-plugin-markdown": "^3.0.0",
+        "eslint-plugin-n": "^15.2.4",
         "eslint-plugin-promise": "^6.0.0",
-        "eslint-plugin-unicorn": "^42.0.0",
-        "eslint-plugin-yml": "^1.0.0",
+        "eslint-plugin-unicorn": "^43.0.2",
+        "eslint-plugin-yml": "^1.1.0",
         "jsonc-eslint-parser": "^2.1.0",
-        "yaml-eslint-parser": "^1.0.1"
+        "yaml-eslint-parser": "^1.1.0"
       }
     },
     "@antfu/eslint-config-react": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-react/-/eslint-config-react-0.25.2.tgz",
-      "integrity": "sha512-jGol7/UTUa9z55p4Oy/K5yGgY179fj1kl0kdo3bRnFjzUZQuDGuxw5HiZdYx333pjBdizkPl6cMJ8M6sc3PzFg==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-react/-/eslint-config-react-0.26.0.tgz",
+      "integrity": "sha512-QkRhzivKAtTVtLMFXt7Sl+hBM/LCAU+EUpIxTqw/h0uufYmzIrbdVwkxPntZaXl5p/qLZqQOZG3Iu7oek+MNeA==",
       "dev": true,
       "requires": {
-        "@antfu/eslint-config-ts": "0.25.2",
-        "eslint-plugin-react": "^7.30.0"
+        "@antfu/eslint-config-ts": "0.26.0",
+        "eslint-plugin-react": "^7.30.1"
       }
     },
     "@antfu/eslint-config-ts": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-ts/-/eslint-config-ts-0.25.2.tgz",
-      "integrity": "sha512-Dpp4r3CaDZVh73lMxhW0sVGsPwUf1YTpYV5JefmBtgEZKOAc+QqYbLjFZ6QGRUpdPLldRvD+xTFpax6t8NKgyA==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-ts/-/eslint-config-ts-0.26.0.tgz",
+      "integrity": "sha512-LnJgBP+XAsGijfmjAZk6BDxlt7UYGiXyCIviLDgg8bmPaLAX3I+i0wmj9DwhDIYeXForeP/Io+dBT63k5BheBw==",
       "dev": true,
       "requires": {
-        "@antfu/eslint-config-basic": "0.25.2",
-        "@typescript-eslint/eslint-plugin": "^5.26.0",
-        "@typescript-eslint/parser": "^5.26.0"
+        "@antfu/eslint-config-basic": "0.26.0",
+        "@typescript-eslint/eslint-plugin": "^5.32.0",
+        "@typescript-eslint/parser": "^5.32.0"
       }
     },
     "@antfu/eslint-config-vue": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-vue/-/eslint-config-vue-0.25.2.tgz",
-      "integrity": "sha512-ObZOzvQvLe/qETq5miVmFWRgjNwWAE/P1I2YhKyDFK7KHquM7bKysfnmkoPpm2HkOpseMILoc+5UKo/w3L7GHg==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@antfu/eslint-config-vue/-/eslint-config-vue-0.26.0.tgz",
+      "integrity": "sha512-a4ov8vzOzV5WPBSXIwg1oDnpSEOaxpvqz9cZK/lwqDsS+tk2QAI6yfcxwbhMIDUy3pA3u9B62K9tP+9HhqncIw==",
       "dev": true,
       "requires": {
-        "@antfu/eslint-config-ts": "0.25.2",
-        "eslint-plugin-vue": "^9.0.1"
+        "@antfu/eslint-config-ts": "0.26.0",
+        "eslint-plugin-vue": "^9.3.0"
       }
     },
     "@antfu/install-pkg": {
@@ -15225,9 +15221,9 @@
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+      "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
       "dev": true
     },
     "@babel/helper-validator-option": {
@@ -16671,14 +16667,14 @@
       "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.0.tgz",
-      "integrity": "sha512-lvhRJ2pGe2V9MEU46ELTdiHgiAFZPKtLhiU5wlnaYpMc2+c1R8fh8i80ZAa665drvjHKUJyRRGg3gEm1If54ow==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.33.0.tgz",
+      "integrity": "sha512-jHvZNSW2WZ31OPJ3enhLrEKvAZNyAFWZ6rx9tUwaessTc4sx9KmgMNhVcqVAl1ETnT5rU5fpXTLmY9YvC1DCNg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.30.0",
-        "@typescript-eslint/type-utils": "5.30.0",
-        "@typescript-eslint/utils": "5.30.0",
+        "@typescript-eslint/scope-manager": "5.33.0",
+        "@typescript-eslint/type-utils": "5.33.0",
+        "@typescript-eslint/utils": "5.33.0",
         "debug": "^4.3.4",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.2.0",
@@ -16688,52 +16684,52 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.0.tgz",
-      "integrity": "sha512-2oYYUws5o2liX6SrFQ5RB88+PuRymaM2EU02/9Ppoyu70vllPnHVO7ioxDdq/ypXHA277R04SVjxvwI8HmZpzA==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.33.0.tgz",
+      "integrity": "sha512-cgM5cJrWmrDV2KpvlcSkelTBASAs1mgqq+IUGKJvFxWrapHpaRy5EXPQz9YaKF3nZ8KY18ILTiVpUtbIac86/w==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.30.0",
-        "@typescript-eslint/types": "5.30.0",
-        "@typescript-eslint/typescript-estree": "5.30.0",
+        "@typescript-eslint/scope-manager": "5.33.0",
+        "@typescript-eslint/types": "5.33.0",
+        "@typescript-eslint/typescript-estree": "5.33.0",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.0.tgz",
-      "integrity": "sha512-3TZxvlQcK5fhTBw5solQucWSJvonXf5yua5nx8OqK94hxdrT7/6W3/CS42MLd/f1BmlmmbGEgQcTHHCktUX5bQ==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.33.0.tgz",
+      "integrity": "sha512-/Jta8yMNpXYpRDl8EwF/M8It2A9sFJTubDo0ATZefGXmOqlaBffEw0ZbkbQ7TNDK6q55NPHFshGBPAZvZkE8Pw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.30.0",
-        "@typescript-eslint/visitor-keys": "5.30.0"
+        "@typescript-eslint/types": "5.33.0",
+        "@typescript-eslint/visitor-keys": "5.33.0"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.0.tgz",
-      "integrity": "sha512-GF8JZbZqSS+azehzlv/lmQQ3EU3VfWYzCczdZjJRxSEeXDQkqFhCBgFhallLDbPwQOEQ4MHpiPfkjKk7zlmeNg==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.33.0.tgz",
+      "integrity": "sha512-2zB8uEn7hEH2pBeyk3NpzX1p3lF9dKrEbnXq1F7YkpZ6hlyqb2yZujqgRGqXgRBTHWIUG3NGx/WeZk224UKlIA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/utils": "5.30.0",
+        "@typescript-eslint/utils": "5.33.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.0.tgz",
-      "integrity": "sha512-vfqcBrsRNWw/LBXyncMF/KrUTYYzzygCSsVqlZ1qGu1QtGs6vMkt3US0VNSQ05grXi5Yadp3qv5XZdYLjpp8ag==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.33.0.tgz",
+      "integrity": "sha512-nIMt96JngB4MYFYXpZ/3ZNU4GWPNdBbcB5w2rDOCpXOVUkhtNlG2mmm8uXhubhidRZdwMaMBap7Uk8SZMU/ppw==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.0.tgz",
-      "integrity": "sha512-hDEawogreZB4n1zoqcrrtg/wPyyiCxmhPLpZ6kmWfKF5M5G0clRLaEexpuWr31fZ42F96SlD/5xCt1bT5Qm4Nw==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.33.0.tgz",
+      "integrity": "sha512-tqq3MRLlggkJKJUrzM6wltk8NckKyyorCSGMq4eVkyL5sDYzJJcMgZATqmF8fLdsWrW7OjjIZ1m9v81vKcaqwQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.30.0",
-        "@typescript-eslint/visitor-keys": "5.30.0",
+        "@typescript-eslint/types": "5.33.0",
+        "@typescript-eslint/visitor-keys": "5.33.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -16764,26 +16760,26 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.0.tgz",
-      "integrity": "sha512-0bIgOgZflLKIcZsWvfklsaQTM3ZUbmtH0rJ1hKyV3raoUYyeZwcjQ8ZUJTzS7KnhNcsVT1Rxs7zeeMHEhGlltw==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.33.0.tgz",
+      "integrity": "sha512-JxOAnXt9oZjXLIiXb5ZIcZXiwVHCkqZgof0O8KPgz7C7y0HS42gi75PdPlqh1Tf109M0fyUw45Ao6JLo7S5AHw==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.30.0",
-        "@typescript-eslint/types": "5.30.0",
-        "@typescript-eslint/typescript-estree": "5.30.0",
+        "@typescript-eslint/scope-manager": "5.33.0",
+        "@typescript-eslint/types": "5.33.0",
+        "@typescript-eslint/typescript-estree": "5.33.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.0.tgz",
-      "integrity": "sha512-6WcIeRk2DQ3pHKxU1Ni0qMXJkjO/zLjBymlYBy/53qxe7yjEFSvzKLDToJjURUhSl2Fzhkl4SMXQoETauF74cw==",
+      "version": "5.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.33.0.tgz",
+      "integrity": "sha512-/XsqCzD4t+Y9p5wd9HZiptuGKBlaZO5showwqODii5C0nZawxWLF+Q6k5wYHBrQv96h6GYKyqqMHCSTqta8Kiw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.30.0",
+        "@typescript-eslint/types": "5.33.0",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -17276,9 +17272,9 @@
       }
     },
     "@windicss/config": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@windicss/config/-/config-1.8.6.tgz",
-      "integrity": "sha512-WVS41qUJtd44g2iWzTAE8tpgk8gD0yAr1RwwaWi7FAECKm3LVNMLOoToum9R/QKFE2n64EUVJpIvSUNby8rlhg==",
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/@windicss/config/-/config-1.8.7.tgz",
+      "integrity": "sha512-8n+/Y36j5L3rw2tgMdLjeGRuNV7VYfKoHoraLK6Bk9OJ1MTPd5vv7pekof/uOPWVV7WWjVeZ6CTO8SDbDDW3iw==",
       "dev": true,
       "requires": {
         "debug": "^4.3.4",
@@ -17305,13 +17301,13 @@
       "dev": true
     },
     "@windicss/plugin-utils": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.8.6.tgz",
-      "integrity": "sha512-YY6EcUsgkosaQkIseFiIoHfU1H5boOAs/l74QWLI6ryNeHLMq2e04QVsFz+Rt+U8b8PRNxXPC8ADbxE05X7I7g==",
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.8.7.tgz",
+      "integrity": "sha512-dfj95olNZyGFDPFMBvE5oq8hA5f0ooUJZjVdWlthS4ek4W1/xNOHDxB6ygWR8LE9zCOXZykApjt1LOhy9Ky2QA==",
       "dev": true,
       "requires": {
         "@antfu/utils": "^0.5.2",
-        "@windicss/config": "1.8.6",
+        "@windicss/config": "1.8.7",
         "debug": "^4.3.4",
         "fast-glob": "^3.2.11",
         "magic-string": "^0.26.2",
@@ -18006,18 +18002,6 @@
           "resolved": "https://registry.npmjs.org/entities/-/entities-4.3.1.tgz",
           "integrity": "sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==",
           "dev": true
-        },
-        "htmlparser2": {
-          "version": "8.0.1",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
-          "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.3.0",
-            "domhandler": "^5.0.2",
-            "domutils": "^3.0.1",
-            "entities": "^4.3.0"
-          }
         }
       }
     },
@@ -18118,9 +18102,9 @@
       "peer": true
     },
     "ci-info": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz",
-      "integrity": "sha512-SXgeMX9VwDe7iFFaEWkA5AstuER9YKqy4EhHqr4DVqkwmD9rpVimkMKWHdjn30Ja45txyjhSn63lVX69eVCckg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz",
+      "integrity": "sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==",
       "dev": true
     },
     "clean-regexp": {
@@ -19530,12 +19514,12 @@
       }
     },
     "eslint-plugin-antfu": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-antfu/-/eslint-plugin-antfu-0.25.2.tgz",
-      "integrity": "sha512-yRhuFMwUKhSYm8BWTZsW4ymYnFPCJWZb2LzjG+mQb7JbKflk73JIFMCREPOaV4nWwc4YJEPhym75QsC7AFbqSw==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-antfu/-/eslint-plugin-antfu-0.26.0.tgz",
+      "integrity": "sha512-hc5Bb6EH6zM/Vjy0scOQydlG9I1DDocG4AikyUfqjSFneWv6eNItej9LHYTXEGc0iGosCysNS4tPUAPuhBHkCA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/utils": "^5.26.0"
+        "@typescript-eslint/utils": "^5.32.0"
       }
     },
     "eslint-plugin-es": {
@@ -19584,12 +19568,12 @@
       }
     },
     "eslint-plugin-html": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.2.0.tgz",
-      "integrity": "sha512-vi3NW0E8AJombTvt8beMwkL1R/fdRWl4QSNRNMhVQKWm36/X0KF0unGNAY4mqUF06mnwVWZcIcerrCnfn9025g==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-7.1.0.tgz",
+      "integrity": "sha512-fNLRraV/e6j8e3XYOC9xgND4j+U7b1Rq+OygMlLcMg+wI/IpVbF+ubQa3R78EjKB9njT6TQOlcK5rFKBVVtdfg==",
       "dev": true,
       "requires": {
-        "htmlparser2": "^7.1.2"
+        "htmlparser2": "^8.0.1"
       }
     },
     "eslint-plugin-import": {
@@ -19640,9 +19624,9 @@
       }
     },
     "eslint-plugin-jsonc": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.3.0.tgz",
-      "integrity": "sha512-QqHj7Chw8vsALsCOhFxecRIepxpbcpmMon9yA1+GaYk1Am0GanHAwnTkeVX+/ysAb4QTkeGMZ+ZPK4TKrZ/VSw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.3.1.tgz",
+      "integrity": "sha512-8sgWGWiVRMFL6xGawRymrE4RjZJgiU0rXYgFFb71wvdwuUkPgWSvfFtc8jfwcgjjqFjis8vzCUFsg7SciMEDWw==",
       "dev": true,
       "requires": {
         "eslint-utils": "^3.0.0",
@@ -19651,18 +19635,18 @@
       }
     },
     "eslint-plugin-markdown": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
-      "integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-3.0.0.tgz",
+      "integrity": "sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==",
       "dev": true,
       "requires": {
         "mdast-util-from-markdown": "^0.8.5"
       }
     },
     "eslint-plugin-n": {
-      "version": "15.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.2.3.tgz",
-      "integrity": "sha512-H+KC7U5R+3IWTeRnACm/4wlqLvS1Q7M6t7BGhn89qXDkZan8HTAEv3ouIONA0ifDwc2YzPFmyPzHuNLddNK4jw==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.2.4.tgz",
+      "integrity": "sha512-tjnVMv2fiXYMnuiIFI8QMtyUFI42SckEEWvi8h68SWGWshfqO6SSCASy24dGMGAiy7NUk6DZt90DM0iNUsmQ5w==",
       "dev": true,
       "requires": {
         "builtins": "^5.0.1",
@@ -19748,13 +19732,13 @@
       }
     },
     "eslint-plugin-unicorn": {
-      "version": "42.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-42.0.0.tgz",
-      "integrity": "sha512-ixBsbhgWuxVaNlPTT8AyfJMlhyC5flCJFjyK3oKE8TRrwBnaHvUbuIkCM1lqg8ryYrFStL/T557zfKzX4GKSlg==",
+      "version": "43.0.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-43.0.2.tgz",
+      "integrity": "sha512-DtqZ5mf/GMlfWoz1abIjq5jZfaFuHzGBZYIeuJfEoKKGWRHr2JiJR+ea+BF7Wx2N1PPRoT/2fwgiK1NnmNE3Hg==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.15.7",
-        "ci-info": "^3.3.0",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "ci-info": "^3.3.2",
         "clean-regexp": "^1.0.0",
         "eslint-utils": "^3.0.0",
         "esquery": "^1.4.0",
@@ -19765,14 +19749,14 @@
         "read-pkg-up": "^7.0.1",
         "regexp-tree": "^0.1.24",
         "safe-regex": "^2.1.1",
-        "semver": "^7.3.5",
+        "semver": "^7.3.7",
         "strip-indent": "^3.0.0"
       }
     },
     "eslint-plugin-vue": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz",
-      "integrity": "sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.3.0.tgz",
+      "integrity": "sha512-iscKKkBZgm6fGZwFt6poRoWC0Wy2dQOlwUPW++CiPoQiw1enctV2Hj5DBzzjJZfyqs+FAXhgzL4q0Ww03AgSmQ==",
       "dev": true,
       "requires": {
         "eslint-utils": "^3.0.0",
@@ -19785,15 +19769,15 @@
       }
     },
     "eslint-plugin-yml": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-yml/-/eslint-plugin-yml-1.0.0.tgz",
-      "integrity": "sha512-0RVoUFh5vpznE2DIP5agSpWO/nU8GgAWwoTAHWopU2X+1SCB5ykHU6DwS0GrZ5Hvejtk6CcADQllpQQJB4C5QA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-yml/-/eslint-plugin-yml-1.1.0.tgz",
+      "integrity": "sha512-64g3vWwolk9d+FykuqxXGLn3oGEK2ZecIAyfIEsyuSHBQkR8utp5h8e75R6tGph1IRggoGl27QQ2oi2M1IF1Vw==",
       "dev": true,
       "requires": {
         "debug": "^4.3.2",
         "lodash": "^4.17.21",
         "natural-compare": "^1.4.0",
-        "yaml-eslint-parser": "^1.0.0"
+        "yaml-eslint-parser": "^1.1.0"
       }
     },
     "eslint-scope": {
@@ -20477,15 +20461,15 @@
       }
     },
     "h3": {
-      "version": "0.7.10",
-      "resolved": "https://registry.npmjs.org/h3/-/h3-0.7.10.tgz",
-      "integrity": "sha512-HcUQxlOocG2uf6PQLu3Bxk0KSXcTuxSF6kRclFBDO7y74Ml0wCwTvmoN5zmrzoxbNHecDNUrcGr8qSNGcOqAHQ==",
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/h3/-/h3-0.7.13.tgz",
+      "integrity": "sha512-3rs+iokAwin4GnToWc+4JeASAYPujojMWicaTgv5WMucED94cFVVGctlk7N6iJfQ7SZ2N5CtmQ2C3L2aDFpd2w==",
       "dev": true,
       "requires": {
         "cookie-es": "^0.5.0",
         "destr": "^1.1.1",
         "radix3": "^0.1.2",
-        "ufo": "^0.8.4"
+        "ufo": "^0.8.5"
       }
     },
     "happy-dom": {
@@ -20613,21 +20597,52 @@
       "dev": true
     },
     "htmlparser2": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
-      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
       "dev": true,
       "requires": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.2",
-        "domutils": "^2.8.0",
-        "entities": "^3.0.1"
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
       },
       "dependencies": {
-        "entities": {
+        "dom-serializer": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "entities": "^4.2.0"
+          }
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        },
+        "domutils": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+          "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^2.0.0",
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.1"
+          }
+        },
+        "entities": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.3.1.tgz",
+          "integrity": "sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==",
           "dev": true
         }
       }
@@ -21371,9 +21386,9 @@
       }
     },
     "jsx-ast-utils": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.1.tgz",
-      "integrity": "sha512-pxrjmNpeRw5wwVeWyEAk7QJu2GnBO3uzPFmHCKJJFPKK2Cy0cWL23krGtLdnMmbIi6/FjlrQpPyfQI19ByPOhQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.2.tgz",
+      "integrity": "sha512-4ZCADZHRkno244xlNnn4AOG6sRQ7iBZ5BbgZ4vW4y5IZw7cVUD1PPeblm1xx/nfmMxPdt/LHsXZW8z/j58+l9Q==",
       "dev": true,
       "requires": {
         "array-includes": "^3.1.5",
@@ -21514,9 +21529,9 @@
       }
     },
     "lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
       "dev": true
     },
     "lines-and-columns": {
@@ -22418,53 +22433,26 @@
       }
     },
     "nuxt-windicss": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/nuxt-windicss/-/nuxt-windicss-2.4.2.tgz",
-      "integrity": "sha512-coHvXGw4CqkRqG47aJqNKbQKMO17ZGXFVyeOKGaRnvsS4FcdfKtYKukpDgJm0sCIG57z8CljfX3nBy71+vu3mg==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/nuxt-windicss/-/nuxt-windicss-2.5.0.tgz",
+      "integrity": "sha512-h5Wh1Pj5OrYvbQmfarOxi6I366xyPxYVlUIZhu5OPGn0uUaoQIOl5ASR1QD3eR/BH3kdpM/r8wyjikDoW7oSbg==",
       "dev": true,
       "requires": {
-        "@nuxt/kit": "3.0.0-rc.3",
-        "@windicss/plugin-utils": "^1.8.4",
+        "@nuxt/kit": "3.0.0-rc.6",
+        "@windicss/config": "^1.8.7",
+        "@windicss/plugin-utils": "^1.8.7",
         "consola": "^2.15.3",
         "defu": "^6.0.0",
         "fs-extra": "^10.1.0",
-        "h3": "^0.7.8",
-        "listhen": "^0.2.11",
-        "pathe": "^0.3.0",
+        "h3": "^0.7.12",
+        "listhen": "^0.2.13",
+        "pathe": "^0.3.2",
         "read-cache": "^1.0.0",
         "sirv": "^2.0.2",
-        "vite-plugin-windicss": "^1.8.4",
-        "windicss": "^3.5.4",
+        "vite-plugin-windicss": "^1.8.7",
+        "windicss": "^3.5.6",
         "windicss-analysis": "^0.3.5",
-        "windicss-webpack-plugin": "^1.7.3"
-      },
-      "dependencies": {
-        "@nuxt/kit": {
-          "version": "3.0.0-rc.3",
-          "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.3.tgz",
-          "integrity": "sha512-aD993HKXZ76cwxkM2LCwWRQaOI3RjLCg/kj+8ZS6qN4VrpwrZp4xM59YYIYs3/Vze4OG3D4+0gr0u5zdgf8v8g==",
-          "dev": true,
-          "requires": {
-            "@nuxt/schema": "^3.0.0-rc.3",
-            "c12": "^0.2.7",
-            "consola": "^2.15.3",
-            "defu": "^6.0.0",
-            "globby": "^13.1.1",
-            "hash-sum": "^2.0.0",
-            "ignore": "^5.2.0",
-            "jiti": "^1.13.0",
-            "knitwork": "^0.1.1",
-            "lodash.template": "^4.5.0",
-            "mlly": "^0.5.2",
-            "pathe": "^0.3.0",
-            "pkg-types": "^0.3.2",
-            "scule": "^0.2.1",
-            "semver": "^7.3.7",
-            "unctx": "^1.1.4",
-            "unimport": "^0.1.9",
-            "untyped": "^0.4.4"
-          }
-        }
+        "windicss-webpack-plugin": "^1.7.5"
       }
     },
     "nwsapi": {
@@ -22494,14 +22482,14 @@
       "dev": true
     },
     "object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.3.tgz",
+      "integrity": "sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       }
     },
@@ -25205,12 +25193,12 @@
       }
     },
     "vite-plugin-windicss": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.6.tgz",
-      "integrity": "sha512-D4G4qmumgklPiPrq/ZALqq8Mby6krskFVShbmb5c+0VCSsLUN96qyFRTwi81rNIHwFvlbpqflgh+BpUM/9VjQg==",
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.7.tgz",
+      "integrity": "sha512-/zwQ8+RV+MSkbG0IGqsEma6r2R01NzN/aNpNjJD7VVAkxAptNznqDXOObFTskkWfZ+9m6KJZCOuCPgAFtQIzEA==",
       "dev": true,
       "requires": {
-        "@windicss/plugin-utils": "1.8.6",
+        "@windicss/plugin-utils": "1.8.7",
         "debug": "^4.3.4",
         "kolorist": "^1.5.1",
         "windicss": "^3.5.6"
@@ -25613,19 +25601,19 @@
       }
     },
     "windicss-webpack-plugin": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/windicss-webpack-plugin/-/windicss-webpack-plugin-1.7.3.tgz",
-      "integrity": "sha512-vESTMEUqzNlvOmnOCCxeqDkj1q2u69FfKMQHyTF9Y9tLJbWttEHgt+qSJZ3cYndUHRxbz06INanEyL08dQr79A==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/windicss-webpack-plugin/-/windicss-webpack-plugin-1.7.5.tgz",
+      "integrity": "sha512-+DwZwFcjgYrD/UU1UEs1TOTo4ijAwRkXEgJMttPd05NSC3ULvguvNKL5kNxrCTYs4OMJn68qbCfkjpI0mir4cQ==",
       "dev": true,
       "requires": {
-        "@windicss/plugin-utils": "^1.8.4",
+        "@windicss/plugin-utils": "^1.8.7",
         "debug": "^4.3.4",
         "get-port": "^6.1.2",
         "loader-utils": "^2.0.0",
         "lodash": "^4.17.21",
         "pathe": "^0.2.0",
         "webpack-virtual-modules": "^0.4.3",
-        "windicss": "^3.5.4"
+        "windicss": "^3.5.6"
       },
       "dependencies": {
         "pathe": {
@@ -25763,9 +25751,9 @@
       "dev": true
     },
     "yaml-eslint-parser": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-1.0.1.tgz",
-      "integrity": "sha512-acQYWneSXwnJgPQbTyJvDxWx9zlJ/rq267p/zzQMSCE7ljJxQ8elefsQase1gEIJMo+pIqmLRczoo7fPt6VbKQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-1.1.0.tgz",
+      "integrity": "sha512-b464Q1fYiX1oYx2kE8k4mEp6S9Prk+tfDsY/IPxQ0FCjEuj3AKko5Skf3/yQJeYTTDyjDE+aWIJemnv29HvEWQ==",
       "dev": true,
       "requires": {
         "eslint-visitor-keys": "^3.0.0",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 5fa76f2658..43f7ec27a7 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -33,7 +33,7 @@
     "xlsx": "^0.17.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.25.2",
+    "@antfu/eslint-config": "^0.26.0",
     "@iconify-json/cil": "^1.1.2",
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/eva": "^1.1.2",
@@ -61,7 +61,7 @@
     "happy-dom": "^6.0.3",
     "less": "^4.1.3",
     "nuxt": "3.0.0-rc.4",
-    "nuxt-windicss": "^2.4.2",
+    "nuxt-windicss": "^2.5.0",
     "prettier": "^2.7.1",
     "sass": "^1.53.0",
     "unplugin-icons": "^0.14.7",
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 62ad1ffd1b..e49addf435 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -3,7 +3,7 @@ import { Modal } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
 import { navigateTo } from '#app'
-import { computed, onMounted } from '#imports'
+import { computed, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiDeleteOutline from '~icons/mdi/delete-outline'
 import MdiEditOutline from '~icons/mdi/edit-outline'
@@ -12,30 +12,31 @@ import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
-const { $api, $state, $e } = useNuxtApp()
+const { $e } = useNuxtApp()
+
+const { api, isLoading } = useApi()
+
+useSidebar({ hasSidebar: true, isOpen: true })
+
 const toast = useToast()
 
 const filterQuery = ref('')
-const loading = ref(true)
+
 const projects = ref<ProjectType[]>()
 
 const loadProjects = async () => {
-  loading.value = true
-  const response = await $api.project.list({})
+  const response = await api.project.list({})
   projects.value = response.list
-  loading.value = false
 }
 
-const filteredProjects = computed(() => {
-  return (
+const filteredProjects = computed(
+  () =>
     projects.value?.filter(
       (project) => !filterQuery.value || project.title?.toLowerCase?.().includes(filterQuery.value.toLowerCase()),
-    ) ?? []
-  )
-})
+    ) ?? [],
+)
 
 const deleteProject = (project: ProjectType) => {
-  $e('c:project:delete')
   Modal.confirm({
     title: `Do you want to delete '${project.title}' project?`,
     okText: 'Yes',
@@ -45,9 +46,9 @@ const deleteProject = (project: ProjectType) => {
       try {
         $e('c:project:delete')
         await $api.project.delete(project.id as string)
-        projects.value?.splice(projects.value.indexOf(project), 1)
-      } catch (e) {
-        toast.error(await extractSdkResponseErrorMsg(e))
+        return projects.value?.splice(projects.value.indexOf(project), 1)
+      } catch (e: any) {
+        return toast.error(await extractSdkResponseErrorMsg(e))
       }
     },
   })
@@ -56,9 +57,6 @@ const deleteProject = (project: ProjectType) => {
 onMounted(() => {
   loadProjects()
 })
-
-// hide sidebar
-$state.sidebarOpen.value = false
 </script>
 
 <template>
@@ -114,7 +112,7 @@ $state.sidebarOpen.value = false
         </a-dropdown>
       </div>
 
-      <div v-if="loading">
+      <div v-if="isLoading">
         <a-skeleton />
       </div>
 
diff --git a/packages/nc-gui-v2/pages/index/user/index.vue b/packages/nc-gui-v2/pages/index/user/index.vue
index f8ec84f3a4..28af9beac1 100644
--- a/packages/nc-gui-v2/pages/index/user/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index.vue
@@ -6,50 +6,10 @@ import MdiFolderOutline from '~icons/mdi/folder-outline'
 const { $api } = useNuxtApp()
 
 const route = useRoute()
-
-const navDrawerOptions = [
-  {
-    title: 'My NocoDB',
-    route: '/',
-    icon: MdiFolderOutline,
-  },
-  {
-    title: 'Settings',
-    route: '/user',
-    icon: MdiAccountCog,
-  },
-]
-
-const selectedKey = computed(() => [navDrawerOptions.findIndex((opt) => opt.route === route.path)])
 </script>
 
 <template>
   <NuxtLayout>
-    <template #sidebar>
-      <div class="flex flex-col h-full">
-        <a-menu :selected-keys="selectedKey" class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
-          <a-menu-item
-            v-for="(option, index) in navDrawerOptions"
-            :key="index"
-            class="!rounded-r-lg"
-            @click="navigateTo(option.route)"
-          >
-            <div class="flex items-center gap-4">
-              <component :is="option.icon" />
-
-              <span class="font-semibold">
-                {{ option.title }}
-              </span>
-            </div>
-          </a-menu-item>
-        </a-menu>
-
-        <general-social />
-
-        <general-sponsors :nav="true" />
-      </div>
-    </template>
-
     <NuxtPage />
   </NuxtLayout>
 </template>
diff --git a/packages/nc-gui-v2/pages/index/user/index/index.vue b/packages/nc-gui-v2/pages/index/user/index/index.vue
index 9a09c5d434..06ed2d8c12 100644
--- a/packages/nc-gui-v2/pages/index/user/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index/index.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { useNuxtApp } from '#app'
-import { reactive, ref } from '#imports'
+import { extractSdkResponseErrorMsg } from '~/utils'
+import { reactive, ref, useApi } from '#imports'
 import MaterialSymbolsWarning from '~icons/material-symbols/warning'
 import MdiKeyChange from '~icons/mdi/key-change'
 
-const { $api, $state } = useNuxtApp()
+const { api, isLoading } = useApi()
 
 const { t } = useI18n()
 
@@ -52,7 +51,7 @@ const passwordChange = async () => {
 
   error = null
   try {
-    const { msg } = await $api.auth.passwordChange({
+    const { msg } = await api.auth.passwordChange({
       currentPassword: form.currentPassword,
       newPassword: form.password,
     })
@@ -70,60 +69,61 @@ const resetError = () => {
 </script>
 
 <template>
-  <a-form ref="formValidator" layout="vertical" :model="form" class="change-password h-full w-full" @finish="passwordChange">
-    <div
-      class="md:relative flex flex-col gap-2 w-full h-full p-8 lg:(max-w-1/2)"
-      :class="{ 'mx-auto': !$state.sidebarOpen.value }"
-    >
-      <h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</h1>
-
-      <Transition name="layout">
-        <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
-          <div class="flex items-center gap-2 justify-center"><MaterialSymbolsWarning /> {{ error }}</div>
+  <div class="mt-4 w-1/2 mx-auto">
+    <a-form ref="formValidator" layout="vertical" :model="form" class="change-password" @finish="passwordChange">
+      <div class="md:relative flex flex-col gap-2 w-full h-full p-8 w-full">
+        <h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</h1>
+
+        <Transition name="layout">
+          <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
+            <div class="flex items-center gap-2 justify-center"><MaterialSymbolsWarning /> {{ error }}</div>
+          </div>
+        </Transition>
+
+        <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
+          <a-input-password
+            v-model:value="form.currentPassword"
+            size="large"
+            class="password"
+            :placeholder="$t('placeholder.password.current')"
+            @focus="resetError"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password">
+          <a-input-password
+            v-model:value="form.password"
+            size="large"
+            class="password"
+            :placeholder="$t('placeholder.password.new')"
+            @focus="resetError"
+          />
+        </a-form-item>
+
+        <a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat">
+          <a-input-password
+            v-model:value="form.passwordRepeat"
+            size="large"
+            class="password"
+            :placeholder="$t('placeholder.password.confirm')"
+            @focus="resetError"
+          />
+        </a-form-item>
+
+        <div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
+          <button class="submit" type="submit">
+            <span class="flex items-center gap-2"><MdiKeyChange /> {{ $t('activity.changePwd') }}</span>
+          </button>
         </div>
-      </Transition>
-
-      <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
-        <a-input-password
-          v-model:value="form.currentPassword"
-          size="large"
-          class="password"
-          :placeholder="$t('placeholder.password.current')"
-          @focus="resetError"
-        />
-      </a-form-item>
-
-      <a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password">
-        <a-input-password
-          v-model:value="form.password"
-          size="large"
-          class="password"
-          :placeholder="$t('placeholder.password.new')"
-          @focus="resetError"
-        />
-      </a-form-item>
-
-      <a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat">
-        <a-input-password
-          v-model:value="form.passwordRepeat"
-          size="large"
-          class="password"
-          :placeholder="$t('placeholder.password.confirm')"
-          @focus="resetError"
-        />
-      </a-form-item>
-
-      <div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
-        <button class="submit" type="submit">
-          <span class="flex items-center gap-2"><MdiKeyChange /> {{ $t('activity.changePwd') }}</span>
-        </button>
       </div>
-    </div>
-  </a-form>
+    </a-form>
+  </div>
 </template>
 
 <style lang="scss">
 .change-password {
+  @apply border-1 shadow-md rounded;
+
   .ant-input-affix-wrapper,
   .ant-input {
     @apply dark:(!bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index 824e1eb099..aed18c85ed 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -1,29 +1,234 @@
 <script setup lang="ts">
-import { useTabs } from '#imports'
+import { navigateTo, provideSidebar, ref, useProject, useRoute, useSidebar, useTabs, useUIPermission } from '#imports'
 import { TabType } from '~/composables'
+import { openLink } from '~/utils'
 
 const route = useRoute()
-const { loadProject, loadTables } = useProject(route.params.projectId as string)
+
+const { project, loadProject, loadTables } = useProject(route.params.projectId as string)
+
 const { addTab, clearTabs } = useTabs()
-const { $state } = useNuxtApp()
+
+const { isUIAllowed } = useUIPermission()
+
+// set old sidebar state
+useSidebar({ isOpen: true })
+
+// create a new sidebar state
+const { isOpen, toggle } = provideSidebar({ isOpen: true })
+
+const dialogOpen = ref(false)
+
+const openDialogKey = ref<string>()
 
 clearTabs()
+
 if (!route.params.type) {
   addTab({ type: TabType.AUTH, title: 'Team & Auth' })
 }
 
+function toggleDialog(value?: boolean, key?: string) {
+  dialogOpen.value = value ?? !dialogOpen.value
+  openDialogKey.value = key
+}
+
 await loadProject(route.params.projectId as string)
-await loadTables()
 
-$state.sidebarOpen.value = true
+await loadTables()
 </script>
 
 <template>
-  <NuxtLayout>
+  <NuxtLayout id="content" class="flex">
     <template #sidebar>
-      <DashboardTreeView />
+      <a-layout-sider
+        :collapsed="!isOpen"
+        width="250"
+        collapsed-width="50"
+        class="relative shadow-md h-full z-1"
+        :trigger="null"
+        collapsible
+        theme="light"
+      >
+        <div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 gap-2">
+          <div
+            v-if="isOpen"
+            class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"
+            @click="navigateTo('/')"
+          >
+            <img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+          </div>
+
+          <a-dropdown :trigger="['click']">
+            <div
+              :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
+              :class="[isOpen ? '' : 'justify-center']"
+              class="group cursor-pointer flex gap-4 items-center"
+            >
+              <template v-if="isOpen">
+                <div class="text-xl font-semibold truncate">{{ project.title }}</div>
+
+                <MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
+              </template>
+
+              <template v-else>
+                <MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
+              </template>
+            </div>
+
+            <template #overlay>
+              <a-menu class="ml-6 !w-[300px] !text-sm !p-0 !rounded">
+                <a-menu-item-group>
+                  <template #title>
+                    <div class="group select-none flex items-center gap-4 py-1">
+                      <MdiFolder class="group-hover:text-pink-500 text-xl" />
+
+                      <div class="flex flex-col">
+                        <div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div>
+
+                        <div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div>
+                      </div>
+                    </div>
+                  </template>
+
+                  <a-menu-item key="copy">
+                    <div class="nc-project-menu-item group">
+                      <MdiContentCopy class="group-hover:text-pink-500" />
+                      Copy Project Info
+                    </div>
+                  </a-menu-item>
+
+                  <a-menu-item key="api">
+                    <div
+                      v-if="isUIAllowed('apiDocs')"
+                      v-t="['e:api-docs']"
+                      class="nc-project-menu-item group"
+                      @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`)"
+                    >
+                      <MdiApi class="group-hover:text-pink-500" />
+                      Swagger: Rest APIs
+                    </div>
+                  </a-menu-item>
+
+                  <a-menu-divider />
+
+                  <a-menu-item key="teamAndAuth">
+                    <div
+                      v-if="isUIAllowed('settings')"
+                      v-t="['c:navdraw:project-settings']"
+                      class="nc-project-menu-item group"
+                      @click="toggleDialog(true, 'teamAndAuth')"
+                    >
+                      <MdiAccountGroup class="group-hover:text-pink-500" />
+                      Team & Auth
+                    </div>
+                  </a-menu-item>
+
+                  <a-menu-item key="appStore">
+                    <div
+                      v-if="isUIAllowed('settings')"
+                      v-t="['c:navdraw:project-settings']"
+                      class="nc-project-menu-item group"
+                      @click="toggleDialog(true, 'appStore')"
+                    >
+                      <MdiStore class="group-hover:text-pink-500" />
+                      App Store
+                    </div>
+                  </a-menu-item>
+
+                  <a-menu-item key="metaData">
+                    <div
+                      v-if="isUIAllowed('settings')"
+                      v-t="['c:navdraw:project-settings']"
+                      class="nc-project-menu-item group"
+                      @click="toggleDialog(true, 'metaData')"
+                    >
+                      <MdiTableBorder class="group-hover:text-pink-500" />
+                      Project Metadata
+                    </div>
+                  </a-menu-item>
+
+                  <a-menu-item key="audit">
+                    <div
+                      v-if="isUIAllowed('settings')"
+                      v-t="['c:navdraw:project-settings']"
+                      class="nc-project-menu-item group"
+                      @click="toggleDialog(true, 'audit')"
+                    >
+                      <MdiNotebookCheckOutline class="group-hover:text-pink-500" />
+                      Audit
+                    </div>
+                  </a-menu-item>
+
+                  <a-menu-divider />
+
+                  <a-sub-menu key="preview-as">
+                    <template #title>
+                      <div class="nc-project-menu-item group">
+                        <MdiContentCopy class="group-hover:text-pink-500" />
+                        Preview Project As
+
+                        <div class="flex-1" />
+
+                        <MaterialSymbolsChevronRightRounded
+                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                        />
+                      </div>
+                    </template>
+
+                    <template #expandIcon></template>
+
+                    <a-menu-item> Foo </a-menu-item>
+                  </a-sub-menu>
+                </a-menu-item-group>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </div>
+
+        <a-tooltip placement="right">
+          <template #title> Toggle table list </template>
+
+          <div
+            class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
+          >
+            <MaterialSymbolsChevronLeftRounded
+              v-if="isOpen"
+              class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+              @click="toggle(false)"
+            />
+
+            <MaterialSymbolsChevronRightRounded
+              v-else
+              class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+              @click="toggle(true)"
+            />
+          </div>
+        </a-tooltip>
+
+        <DashboardTreeView v-show="isOpen" />
+      </a-layout-sider>
     </template>
 
+    <dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />
+
     <NuxtPage />
   </NuxtLayout>
 </template>
+
+<style lang="scss" scoped>
+.nc-project-menu-item {
+  @apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+
+:deep(.ant-dropdown-menu-item) {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index b7c54f9937..fc64b769e1 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -34,9 +34,9 @@ function openQuickImportDialog(type: string) {
 </script>
 
 <template>
-  <div class="flex w-full h-full">
-    <div class="nc-container flex flex-col">
-      <div>
+  <div class="h-full w-full nc-container pt-[9px]">
+    <div class="h-full w-full flex flex-col">
+      <div class="px-2">
         <a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab">
           <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
 
@@ -129,23 +129,18 @@ function openQuickImportDialog(type: string) {
         </a-tabs>
       </div>
 
-      <div class="flex-1 min-h-0">
-        <NuxtPage />
-      </div>
-
-      <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
-      <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" :import-type="importType" />
-      <DlgAirtableImport v-if="airtableImportDialog" v-model="airtableImportDialog" />
+      <NuxtPage class="px-4 pt-2" />
     </div>
 
-    <div id="sidebar-right" class="h-full" />
+    <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
+    <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" :import-type="importType" />
+    <DlgAirtableImport v-if="airtableImportDialog" v-model="airtableImportDialog" />
   </div>
 </template>
 
 <style scoped>
 .nc-container {
-  height: calc(100vh - var(--header-height) - 8px);
-  @apply overflow-hidden;
+  height: calc(100% - var(--header-height));
   flex: 1 1 100%;
 }
 
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index 84e3739ad9..cbf745bd24 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -8,11 +8,14 @@ import { navigateTo, useNuxtApp, useRoute } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { projectTitleValidator } from '~/utils/validation'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
+import { nextTick, reactive, useSidebar } from '#imports'
 
-const loading = ref(false)
+const { api, isLoading } = useApi()
+
+useSidebar({ hasSidebar: false })
 
-const { $api, $state } = useNuxtApp()
 const toast = useToast()
+
 const route = useRoute()
 
 const nameValidationRules = [
@@ -35,27 +38,24 @@ const getProject = async () => {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
 const renameProject = async () => {
-  loading.value = true
   try {
-    await $api.project.update(route.params.id as string, formState)
+    await api.project.update(route.params.id as string, formState)
 
     navigateTo(`/nc/${route.params.id}`)
   } catch (e: any) {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
-  loading.value = false
 }
 
 const form = ref<typeof Form>()
 
-// hide sidebar
-$state.sidebarOpen.value = false
-
 // select and focus title field on load
 onMounted(async () => {
   await getProject()
-  nextTick(() => {
+
+  await nextTick(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
       const input = form.value?.$el?.querySelector('input[type=text]')
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 1d982c384f..ac605b4ca5 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -3,7 +3,7 @@ import { onMounted } from '@vue/runtime-core'
 import { Form, Modal } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
-import { ref } from '#imports'
+import { computed, ref, useSidebar, watch } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { ClientType } from '~/lib'
 import type { ProjectCreateForm } from '~/utils'
@@ -23,8 +23,12 @@ const useForm = Form.useForm
 const loading = ref(false)
 const testSuccess = ref(false)
 
-const { $api, $e, $state } = useNuxtApp()
+const { $api, $e } = useNuxtApp()
+
+useSidebar({ hasSidebar: false })
+
 const toast = useToast()
+
 const { t } = useI18n()
 
 const formState = $ref<ProjectCreateForm>({
@@ -66,7 +70,7 @@ const validators = computed(() => {
   }
 })
 
-const { resetFields, validate, validateInfos } = useForm(formState, validators)
+const { validate, validateInfos } = useForm(formState, validators)
 
 const onClientChange = () => {
   formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
@@ -192,9 +196,6 @@ const testConnection = async () => {
   }
 }
 
-// hide sidebar
-$state.sidebarOpen.value = false
-
 // reset test status on config change
 watch(
   () => formState.dataSource,
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index f98f9bcaa5..9e9289aed1 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -2,17 +2,22 @@
 import { onMounted, onUpdated } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
-import { nextTick, ref } from '#imports'
+import { nextTick, reactive, ref, useApi, useSidebar } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { projectTitleValidator } from '~/utils/validation'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
 const name = ref('')
-const loading = ref(false)
+
 const valid = ref(false)
 
-const { $api, $state, $e } = useNuxtApp()
+const { $e } = useNuxtApp()
+
+const { api, isLoading } = useApi()
+
+useSidebar({ hasSidebar: false })
+
 const toast = useToast()
 
 const nameValidationRules = [
@@ -29,9 +34,8 @@ const formState = reactive({
 
 const createProject = async () => {
   $e('a:project:create:xcdb')
-  loading.value = true
   try {
-    const result = await $api.project.create({
+    const result = await api.project.create({
       title: formState.title,
     })
 
@@ -39,17 +43,13 @@ const createProject = async () => {
   } catch (e: any) {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
-  loading.value = false
 }
 
 const form = ref<typeof Form>()
 
-// hide sidebar
-$state.sidebarOpen.value = false
-
 // select and focus title field on load
 onMounted(async () => {
-  nextTick(() => {
+  await nextTick(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
       const input = form.value?.$el?.querySelector('input[type=text]')
@@ -61,7 +61,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
+  <a-card :loading="isLoading" class="w-[500px] mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
     <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="createProject">
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index ed05fb53d7..e1eef56585 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import type { RuleObject } from 'ant-design-vue/es/form'
-import { definePageMeta } from '#imports'
+import { definePageMeta, useSidebar } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { navigateTo, useNuxtApp } from '#app'
 import { isEmail } from '~/utils/validation'
@@ -12,6 +12,8 @@ const { $api, $state } = $(useNuxtApp())
 
 const { t } = useI18n()
 
+useSidebar({ hasSidebar: false })
+
 definePageMeta({
   requiresAuth: false,
   title: 'title.headLogin',
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index ea7f61ce38..21220bf6da 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -1,6 +1,5 @@
-import { breakpointsTailwind } from '@vueuse/core'
 import { defineNuxtPlugin } from '#app'
-import { useBreakpoints, useDark, useGlobal, watch } from '#imports'
+import { useDark, useGlobal, watch } from '#imports'
 
 /**
  * Initialize global state and watches for changes
@@ -19,9 +18,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   const darkMode = useDark()
 
-  /** get current breakpoints (for enabling sidebar) */
-  const breakpoints = useBreakpoints(breakpointsTailwind)
-
   /** set i18n locale to stored language */
   nuxtApp.vueApp.i18n.locale.value = state.lang.value
 
@@ -33,7 +29,4 @@ export default defineNuxtPlugin((nuxtApp) => {
     },
     { immediate: true },
   )
-
-  /** is initial sidebar open */
-  state.sidebarOpen.value = state.signedIn.value && breakpoints.greater('md').value
 })
diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json
index 7815bfba85..00a959cd82 100644
--- a/packages/nc-gui-v2/tsconfig.json
+++ b/packages/nc-gui-v2/tsconfig.json
@@ -11,6 +11,7 @@
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "types": [
+      "@nuxt/types",
       "@intlify/vite-plugin-vue-i18n/client",
       "vue-i18n",
       "unplugin-icons/types/vue",
diff --git a/packages/nc-gui-v2/utils/viewUtils.ts b/packages/nc-gui-v2/utils/viewUtils.ts
index c44a7964ae..53df82bb51 100644
--- a/packages/nc-gui-v2/utils/viewUtils.ts
+++ b/packages/nc-gui-v2/utils/viewUtils.ts
@@ -9,7 +9,6 @@ import MdiEyeIcon from '~icons/mdi/eye-circle-outline'
 
 export const viewIcons = {
   [ViewTypes.GRID]: { icon: MdiGridIcon, color: 'blue' },
-  // [ViewTypes.GRID]: { icon: "mdi-grid-large", color: "blue" },
   [ViewTypes.FORM]: { icon: MdiFormIcon, color: 'pink' },
   calendar: { icon: MdiCalendarIcon, color: 'purple' },
   [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' },
diff --git a/packages/nc-gui-v2/vue-color-shims.d.ts b/packages/nc-gui-v2/vue-color-shims.d.ts
new file mode 100644
index 0000000000..63fe35c76e
--- /dev/null
+++ b/packages/nc-gui-v2/vue-color-shims.d.ts
@@ -0,0 +1,4 @@
+declare module '@ckpack/vue-color' {
+  import type { Component } from '@vue/runtime-core'
+  const Sketch: Component
+}
diff --git a/packages/nc-gui-v2/windi.config.ts b/packages/nc-gui-v2/windi.config.ts
index 942bb33e35..da391a88a8 100644
--- a/packages/nc-gui-v2/windi.config.ts
+++ b/packages/nc-gui-v2/windi.config.ts
@@ -44,6 +44,8 @@ export default defineConfig({
     'color-transition': 'transition-color duration-100 ease-in',
     'scrollbar-thin-primary':
       'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white dark:(!scrollbar-track-black)',
+    'scrollbar-thin-dull':
+      'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 scrollbar-track-white dark:(!scrollbar-track-black)',
   },
 
   theme: {
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 46532d4ebf..abcb80c9a8 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -294,6 +294,7 @@ export interface FormulaType {
   virtual?: boolean;
   fk_column_id?: string;
   formula?: string;
+  formula_raw?: string;
   deleted?: string;
   order?: string;
 }
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index 63aeaad20e..a5dfd8c282 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -51,7 +51,7 @@ export function isVirtualCol(
     UITypes.Formula,
     UITypes.Rollup,
     UITypes.Lookup,
-    UITypes.Count,
+    // UITypes.Count,
   ].includes(<UITypes>(typeof col === 'object' ? col?.uidt : col));
 }