diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 241f5f526c..46c1784d71 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import { computed, provideTheme, useRoute } from '#imports'
+
 const route = useRoute()
 
-const disableBaseLayout = $computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
+const disableBaseLayout = computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
+
+provideTheme()
 </script>
 
 <template>
-  <NuxtLayout :name="disableBaseLayout ? false : 'base'">
-    <NuxtPage />
-  </NuxtLayout>
+  <a-config-provider>
+    <NuxtLayout :name="disableBaseLayout ? false : 'base'">
+      <NuxtPage />
+    </NuxtLayout>
+  </a-config-provider>
 </template>
diff --git a/packages/nc-gui-v2/assets/css/color.css b/packages/nc-gui-v2/assets/css/color.css
deleted file mode 100644
index 4788c60656..0000000000
--- a/packages/nc-gui-v2/assets/css/color.css
+++ /dev/null
@@ -1,4 +0,0 @@
-:root {
-	--primary: #00b786;
-	--secondary: #8ceaf6;
-}
diff --git a/packages/nc-gui-v2/assets/css/global.css b/packages/nc-gui-v2/assets/css/global.css
index fe1fd47c04..530ad1ccb5 100644
--- a/packages/nc-gui-v2/assets/css/global.css
+++ b/packages/nc-gui-v2/assets/css/global.css
@@ -1,4 +1,3 @@
-@import './color.css';
 html {
 	font-size: 16px;
 	word-spacing: 1px;
@@ -8,30 +7,10 @@ html {
 	-webkit-font-smoothing: antialiased;
 	box-sizing: border-box;
 }
+
 body {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Vazirmatn, sans-serif;
 }
-*, *:before, *:after {
-	box-sizing: border-box;
-	margin: 0;
-}
-.btn, .pointer {
-	cursor: pointer;
-}
-.primary {
-	color: var(--primary);
-}
-.secondary {
-	color: var(--secondary);
-}
-.btn-primary {
-	background-color: var(--primary);
-	color: #fff;
-}
-.btn-secondary {
-	background-color: var(--secondary);
-	color: #000;
-}
 
 /* 
 Apply Vazirmatn for rtl
diff --git a/packages/nc-gui-v2/assets/style.css b/packages/nc-gui-v2/assets/style.css
deleted file mode 100644
index 5feb4e1631..0000000000
--- a/packages/nc-gui-v2/assets/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-::-webkit-scrollbar {
-  width: .7em;
-  height: .7em
-}
-
-::-webkit-scrollbar-button {
-  background: #77777722
-}
-
-::-webkit-scrollbar-track-piece {
-  background: #66666622
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: .7em;
-  border: .15em solid #00000000;
-  background-clip: padding-box;
-}
diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style.scss
similarity index 84%
rename from packages/nc-gui-v2/assets/style-v2.scss
rename to packages/nc-gui-v2/assets/style.scss
index 2ff1b5e33b..6cd7093b8f 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style.scss
@@ -1,9 +1,9 @@
 @import 'ant-design-vue/dist/antd.variable.min.css';
-@import 'ant-design-vue/dist/antd.min.css';
 
 :root {
   --header-height: 50px;
   --toolbar-height: 48px;
+  --tw-text-opacity: 1;
 }
 
 .ant-layout-header {
@@ -27,21 +27,8 @@ main {
   overflow-x: hidden;
 }
 
-nav,
-nav .v-list {
-  @apply dark:(!bg-gray-900 text-white)
-}
-
-.v-divider {
-  @apply dark:bg-white
-}
-
 a {
-  @apply prose text-primary underline hover:opacity-75 dark:(text-secondary);
-}
-
-h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
-  @apply dark:(!text-white);
+  @apply !text-primary !underline hover:!text-accent;
 }
 
 .nc-icon {
@@ -62,7 +49,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 
   &:hover {
     .nc-icon {
-      @apply text-pink-500;
+      @apply text-accent;
     }
   }
 }
@@ -99,7 +86,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 
 // for highlighting toolbar menu item
 .nc-active-btn > .ant-btn{
-  @apply bg-primary/20 hover:(bg-primary/20);
+  @apply bg-primary bg-opacity-20 hover:(bg-primary bg-opacity-20);
 }
 
 .nc-locked-overlay {
@@ -159,25 +146,23 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 .page-leave-active,
 .layout-enter-active,
 .layout-leave-active {
-  @apply transition-opacity duration-300 ease-in-out;
+  @apply transition-all duration-200 ease;
 }
 
-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
+.page-enter-from,
+.page-leave-to,
+.layout-enter-from,
+.layout-leave-to {
   @apply opacity-0;
 }
 
 .slide-enter-active,
 .slide-leave-active {
   @apply transition-all duration-200 ease-in-out;
-  transform: translate(100%, 0);
 }
 
-.slide-enter,
-
-.slide-leave-active {
+.slide-enter-from,
+.slide-leave-to {
   transform: translate(-100%, 0);
 }
 
@@ -190,8 +175,8 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   @apply ring ring-xl;
 }
 
-.glow-enter,
-.glow-leave-active {
+.glow-enter-from,
+.glow-leave-to {
   @apply opacity-0;
 }
 
@@ -205,11 +190,11 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-pink-500;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
-    @apply ring ring-pink-500;
+    @apply ring ring-accent;
   }
 }
 
@@ -246,10 +231,14 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 }
 
 .ant-dropdown-menu-item, .ant-menu-item {
-  @apply !py-0 active:(ring ring-pink-500);
+  @apply !py-0 active:(ring ring-accent);
 }
 
 .ant-dropdown-menu-title-content,
 .ant-menu-title-content {
   @apply !py-0;
 }
+
+.ant-dropdown-menu-submenu-title{
+  @apply !pr-2;
+}
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 81c6f68b43..9b0fa75f45 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -15,9 +15,11 @@ declare module '@vue/runtime-core' {
     ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
@@ -32,6 +34,7 @@ declare module '@vue/runtime-core' {
     AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
+    ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AList: typeof import('ant-design-vue/es')['List']
@@ -69,6 +72,9 @@ declare module '@vue/runtime-core' {
     BiFiletypeXlsx: typeof import('~icons/bi/filetype-xlsx')['default']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
     CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
+    ClarityColorPickerLine: typeof import('~icons/clarity/color-picker-line')['default']
+    ClarityColorPickerSolid: typeof import('~icons/clarity/color-picker-solid')['default']
+    ClarityImageLine: typeof import('~icons/clarity/image-line')['default']
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
@@ -76,6 +82,9 @@ declare module '@vue/runtime-core' {
     IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
     IcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default']
+    LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default']
+    LogosSwagger: typeof import('~icons/logos/swagger')['default']
     MaterialSymbolsArrowCircleLeftRounded: typeof import('~icons/material-symbols/arrow-circle-left-rounded')['default']
     MaterialSymbolsArrowCircleRightRounded: typeof import('~icons/material-symbols/arrow-circle-right-rounded')['default']
     MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
@@ -90,7 +99,10 @@ declare module '@vue/runtime-core' {
     MdiAccount: typeof import('~icons/mdi/account')['default']
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
+    MdiAccountGroupIcon: typeof import('~icons/mdi/account-group-icon')['default']
+    MdiAccountIcon: typeof import('~icons/mdi/account-icon')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
+    MdiAccountPlus: typeof import('~icons/mdi/account-plus')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
     MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
@@ -99,6 +111,8 @@ declare module '@vue/runtime-core' {
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiBackburger: typeof import('~icons/mdi/backburger')['default']
+    MdiBookOpenOutline: typeof import('~icons/mdi/book-open-outline')['default']
+    MdiBookOpenPageVariantOutline: typeof import('~icons/mdi/book-open-page-variant-outline')['default']
     MdiBugOutline: typeof import('~icons/mdi/bug-outline')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
@@ -108,6 +122,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDoubleLeft: typeof import('~icons/mdi/chevron-double-left')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
@@ -115,6 +130,7 @@ declare module '@vue/runtime-core' {
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
     MdiCog: typeof import('~icons/mdi/cog')['default']
+    MdiCommentTextOutline: typeof import('~icons/mdi/comment-text-outline')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
@@ -147,10 +163,12 @@ declare module '@vue/runtime-core' {
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
     MdiGithub: typeof import('~icons/mdi/github')['default']
+    MdiGmail: typeof import('~icons/mdi/gmail')['default']
     MdiGridLarge: typeof import('~icons/mdi/grid-large')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
+    MdiJson: typeof import('~icons/mdi/json')['default']
     MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     MdiKeyPlus: typeof import('~icons/mdi/key-plus')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']
@@ -158,6 +176,7 @@ declare module '@vue/runtime-core' {
     MdiLinkVariant: typeof import('~icons/mdi/link-variant')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLoading: typeof import('~icons/mdi/loading')['default']
+    MdiLockOutlineIcon: typeof import('~icons/mdi/lock-outline-icon')['default']
     MdiLogin: typeof import('~icons/mdi/login')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
@@ -194,6 +213,7 @@ declare module '@vue/runtime-core' {
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiTwitter: typeof import('~icons/mdi/twitter')['default']
+    MdiUpload: typeof import('~icons/mdi/upload')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index 8b5c2db0ec..42c37612ee 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -27,7 +27,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none pa-0 border-none w-full h-full prose-sm"
+    class="outline-none p-0 border-none w-full h-full prose-sm"
     type="number"
     step="0.1"
     @blur="editEnabled = false"
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 4a4f4f724f..69e35c19fe 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -27,7 +27,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none pa-0 border-none w-full h-full prose-sm"
+    class="outline-none p-0 border-none w-full h-full prose-sm"
     type="number"
     step="0.1"
     @blur="editEnabled = false"
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index ba6c1cd2e4..25d67997b9 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -31,7 +31,7 @@ function onKeyDown(evt: KeyboardEvent) {
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none pa-0 border-none w-full h-full prose-sm"
+    class="outline-none p-0 border-none w-full h-full prose-sm"
     type="number"
     @blur="editEnabled = false"
     @keydown="onKeyDown"
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 3ae7cbc189..2c8e54d0d7 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -19,6 +19,12 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" @blur="editEnabled = false" />
+  <input
+    v-if="editEnabled"
+    :ref="focus"
+    v-model="vModel"
+    class="h-full w-full outline-none bg-transparent"
+    @blur="editEnabled = false"
+  />
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index e57c41520a..74fcf8deb9 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -55,7 +55,7 @@ onClickOutside(carouselRef, () => {
         </div>
 
         <div
-          class="select-none group hover:ring active:ring-pink-500 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
+          class="select-none group hover:ring active:ring-accent cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
           @click.stop="downloadFile(selectedImage)"
         >
           <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
@@ -133,7 +133,7 @@ onClickOutside(carouselRef, () => {
 }
 
 .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
-  @apply text-4xl text-white hover:text-primary active:text-pink-500 opacity-100 cursor-pointer z-1;
+  @apply text-4xl text-white hover:text-primary active:text-accent opacity-100 cursor-pointer z-1;
 }
 .ant-carousel :deep(.custom-slick-arrow:before) {
   display: none;
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 58d6117ff6..8b754b4bfd 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -66,7 +66,7 @@ function onClick(item: Record<string, any>) {
           class="nc-attach-file group"
           @click="open"
         >
-          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120)" />
           Attach File
         </div>
 
@@ -83,9 +83,9 @@ function onClick(item: Record<string, any>) {
         <general-overlay
           v-model="isOverDropZone"
           inline
-          class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+          class="text-white ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
         >
-          <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
+          <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
           <div class="text-white text-3xl">Drop here</div>
         </general-overlay>
       </template>
@@ -154,8 +154,8 @@ function onClick(item: Record<string, any>) {
 .nc-attachment-modal {
   .nc-attach-file {
     @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
-    @apply hover:(bg-primary/10 text-primary ring);
-    @apply active:(ring-pink-500 bg-primary/20);
+    @apply hover:(bg-primary bg-opacity-10 text-primary ring);
+    @apply active:(ring-accent bg-primary bg-opacity-20);
   }
 
   .nc-attachment-item {
@@ -176,7 +176,7 @@ function onClick(item: Record<string, any>) {
       }
 
       &:active::after {
-        @apply ring ring-pink-500 shadow transform scale-103;
+        @apply ring ring-accent shadow transform scale-103;
       }
     }
   }
@@ -185,7 +185,7 @@ function onClick(item: Record<string, any>) {
     @apply bg-white absolute bottom-2 right-2;
     @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
     @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
-    @apply active:(ring border-0 ring-pink-500);
+    @apply active:(ring border-0 ring-accent);
   }
 
   .nc-attachment-remove {
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index f2e47339b7..7d534b761a 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -100,16 +100,16 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         v-model="isOverDropZone"
         inline
         :target="currentCellRef"
-        class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+        class="text-white text-lg ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
       >
-        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+        <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here
       </general-overlay>
     </template>
 
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
+      class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:(bg-primary bg-opacity-10)"
       @click.stop="open"
     >
       <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
@@ -118,7 +118,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         <template #title> Click or drop a file into cell </template>
 
         <div class="flex items-center gap-2">
-          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120) text-gray-500 text-[10px]" />
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120) text-gray-500 text-[10px]" />
 
           <div v-if="!visibleItems.length" class="group-hover:text-primary text-gray-500 text-xs">Add file(s)</div>
         </div>
@@ -160,14 +160,14 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         </div>
       </div>
 
-      <div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+      <div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)">
         <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments </template>
 
           <MdiArrowExpand
-            class="select-none transform group-hover:(text-pink-500 scale-120) text-[10px] text-gray-500"
+            class="select-none transform group-hover:(text-accent scale-120) text-[10px] text-gray-500"
             @click.stop="modalVisible = true"
           />
         </a-tooltip>
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 4e2827f107..74e081dedb 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -220,12 +220,9 @@ function openTableCreateDialog() {
 <template>
   <div class="nc-treeview-container flex flex-col">
     <a-dropdown :trigger="['contextmenu']">
-      <div
-        class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
-        :class="{ 'mb-[20px]': isSharedBase }"
-      >
-        <div class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
-          <span class="flex-grow text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
+      <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
+        <div class="py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
+          <span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
             {{ $t('objects.tables') }}
 
             <template v-if="tables?.length"> ({{ tables.length }}) </template>
@@ -234,6 +231,7 @@ function openTableCreateDialog() {
 
         <div class="flex-1">
           <div
+            v-if="isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog"
           >
@@ -241,7 +239,7 @@ function openTableCreateDialog() {
 
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1">{{ $t('tooltip.addTable') }}</span>
 
-            <a-dropdown :trigger="['click']" @click.stop>
+            <a-dropdown v-if="!isSharedBase" :trigger="['click']" @click.stop>
               <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
 
               <template #overlay>
@@ -253,7 +251,7 @@ function openTableCreateDialog() {
                       @click="openAirtableImportDialog"
                     >
                       <div class="color-transition nc-project-menu-item group">
-                        <MdiTableLarge class="group-hover:text-pink-500" />
+                        <MdiTableLarge class="group-hover:text-accent" />
                         <!-- TODO: i18n -->
                         Airtable
                       </div>
@@ -261,7 +259,7 @@ function openTableCreateDialog() {
 
                     <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
                       <div class="color-transition nc-project-menu-item group">
-                        <MdiFileDocumentOutline class="group-hover:text-pink-500" />
+                        <MdiFileDocumentOutline class="group-hover:text-accent" />
                         <!-- TODO: i18n -->
                         CSV file
                       </div>
@@ -269,7 +267,7 @@ function openTableCreateDialog() {
 
                     <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
                       <div class="color-transition nc-project-menu-item group">
-                        <MdiCodeJson class="group-hover:text-pink-500" />
+                        <MdiCodeJson class="group-hover:text-accent" />
                         <!-- TODO: i18n -->
                         JSON file
                       </div>
@@ -281,7 +279,7 @@ function openTableCreateDialog() {
                       @click="openQuickImportDialog('excel')"
                     >
                       <div class="color-transition nc-project-menu-item group">
-                        <MdiFileExcel class="group-hover:text-pink-500" />
+                        <MdiFileExcel class="group-hover:text-accent" />
                         <!-- TODO: i18n -->
                         Microsoft Excel
                       </div>
@@ -297,7 +295,7 @@ function openTableCreateDialog() {
                       target="_blank"
                       class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
                     >
-                      <MdiOpenInNew class="group-hover:text-pink-500" />
+                      <MdiOpenInNew class="group-hover:text-accent" />
                       <!-- TODO: i18n -->
                       Request a data source you need?
                     </a>
@@ -322,7 +320,7 @@ function openTableCreateDialog() {
                 :data-id="table.id"
                 @click="addTableTab(table)"
               >
-                <div class="flex align-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+                <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                   <div class="flex w-auto">
                     <MdiDrag
                       v-if="isUIAllowed('treeview-drag-n-drop')"
@@ -341,7 +339,7 @@ function openTableCreateDialog() {
                   <div class="nc-tbl-title flex-1">{{ table.title }}</div>
 
                   <a-dropdown
-                    v-if="!isLocked && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+                    v-if="!isSharedBase && !isLocked && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
                     :trigger="['click']"
                     @click.stop
                   >
@@ -355,7 +353,7 @@ function openTableCreateDialog() {
                           </div>
                         </a-menu-item>
 
-                        <a-menu-item v-if="isUIAllowed('table-delete')" @click="() => $e('c:table:delete') && deleteTable(table)">
+                        <a-menu-item v-if="isUIAllowed('table-delete')" @click="deleteTable(table)">
                           <div class="nc-project-menu-item">
                             {{ $t('general.delete') }}
                           </div>
@@ -368,19 +366,13 @@ function openTableCreateDialog() {
             </div>
           </div>
 
-          <a-card v-else class="mt-4 mx-4 !bg-gray-50">
-            <div class="flex flex-col align-center">
-              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
-
-              <a-button type="primary" @click.stop="openTableCreateDialog">
-                {{ $t('tooltip.addTable') }}
-              </a-button>
-            </div>
-          </a-card>
+          <div v-else class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50">
+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+          </div>
         </div>
       </div>
 
-      <template v-if="!isLocked" #overlay>
+      <template v-if="!isLocked && !isSharedBase" #overlay>
         <a-menu class="!py-0 rounded text-sm">
           <template v-if="contextMenuTarget.type === 'table'">
             <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(contextMenuTarget.value)">
@@ -389,10 +381,7 @@ function openTableCreateDialog() {
               </div>
             </a-menu-item>
 
-            <a-menu-item
-              v-if="isUIAllowed('table-delete')"
-              @click="() => $e('c:table:delete') && deleteTable(contextMenuTarget.value)"
-            >
+            <a-menu-item v-if="isUIAllowed('table-delete')" @click="deleteTable(contextMenuTarget.value)">
               <div class="nc-project-menu-item">
                 {{ $t('general.delete') }}
               </div>
@@ -410,10 +399,14 @@ function openTableCreateDialog() {
       </template>
     </a-dropdown>
 
-    <a-divider class="mt-0 mb-0" />
+    <a-divider class="!my-0" />
+
+    <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
+      <GeneralShareBaseButton class="py-1.5 px-2 text-primary font-bold cursor-pointer select-none" />
+
+      <GeneralHelpAndSupport class="px-2 text-gray-500 cursor-pointer select-none" />
 
-    <div class="items-center flex justify-center p-2">
-      <GeneralShareBaseButton class="!mr-0" />
+      <DashboardGithubStarButton class="ml-2 py-1" />
     </div>
   </div>
 </template>
@@ -424,7 +417,7 @@ function openTableCreateDialog() {
 }
 
 .nc-treeview-footer-item {
-  @apply cursor-pointer px-4 py-2 flex align-center hover:bg-gray-200/20 text-xs text-current;
+  @apply cursor-pointer px-4 py-2 flex items-center hover:bg-gray-200/20 text-xs text-current;
 }
 
 :deep(.nc-filter-input input::placeholder) {
@@ -460,7 +453,7 @@ function openTableCreateDialog() {
   }
 
   .sortable-chosen {
-    @apply !bg-primary/25 text-primary;
+    @apply !bg-primary bg-opacity-25 text-primary;
   }
 }
 
@@ -469,20 +462,20 @@ function openTableCreateDialog() {
 }
 
 .nc-tree-item svg {
-  @apply text-primary/60;
+  @apply text-primary text-opacity-60;
 }
 
 .nc-tree-item.active {
-  @apply !text-primary font-weight-bold after:(!opacity-20);
-  @apply border-r-3 border-indigo-500;
+  @apply text-primary font-weight-bold after:(!opacity-20);
+  @apply border-r-3 border-primary;
 
   svg {
-    @apply !text-primary;
+    @apply text-primary !text-opacity-100;
   }
 }
 
 .nc-tree-item:hover {
-  @apply !text-grey after:(!opacity-5);
+  @apply text-primary after:(!opacity-5);
 }
 
 :deep(.nc-filter-input) {
@@ -508,7 +501,7 @@ function openTableCreateDialog() {
 }
 
 :deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
+  @apply !py-0 active:(ring ring-accent);
 }
 
 :deep(.ant-dropdown-menu-title-content) {
diff --git a/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue b/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
index b649427120..327080ccf1 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
@@ -130,7 +130,7 @@ onMounted(async () => {
           />
           <div v-else />
         </div>
-        <div class="flex flex-col flex-grow-1 w-3/5 pl-3">
+        <div class="flex flex-col flex-1 w-3/5 pl-3">
           <a-typography-title :level="5">{{ app.title }}</a-typography-title>
           {{ app.description }}
         </div>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
index 909fcad2a3..085dbaba52 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
@@ -6,7 +6,7 @@ import MdiDatabaseSync from '~icons/mdi/database-sync'
 import { extractSdkResponseErrorMsg } from '~/utils'
 
 const { $api } = useNuxtApp()
-const { project } = useProject()
+const { project, loadTables } = useProject()
 
 let isLoading = $ref(false)
 let isDifferent = $ref(false)
@@ -39,6 +39,7 @@ async function syncMetaDiff() {
     isLoading = true
     await $api.project.metaDiffSync(project.value.id)
     message.info('Table metadata recreated successfully')
+    await loadTables()
     await loadMetaDiff()
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -58,8 +59,9 @@ const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gra
 const columns = [
   {
     title: tableHeaderRenderer('Models'),
-    dataIndex: 'title',
-    key: 'title',
+    key: 'table_name',
+    customRender: ({ record }: { record: { table_name: string; title?: string } }) =>
+      h('div', {}, record.title || record.table_name),
   },
   {
     title: tableHeaderRenderer('Sync State'),
@@ -73,7 +75,7 @@ const columns = [
 
 <template>
   <div class="flex flex-row w-full">
-    <div class="flex flex-column w-3/5">
+    <div class="flex flex-col w-3/5">
       <div class="flex flex-row justify-end items-center w-full mb-4">
         <a-button class="self-start nc-btn-metasync-reload" @click="loadMetaDiff">
           <div class="flex items-center gap-2 text-gray-600 font-light">
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Misc.vue b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
index 117d48f186..7d9cde4f08 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
@@ -7,7 +7,7 @@ watch(includeM2M, async () => await loadTables())
 
 <template>
   <div class="flex flex-row w-full">
-    <div class="flex flex-column w-full">
+    <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <a-checkbox v-model:checked="includeM2M">Show M2M Tables</a-checkbox>
       </div>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 381f1cfaf8..f588b4e2b5 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -32,8 +32,7 @@ async function loadTableList() {
     isLoading = true
 
     tables = await $api.project.modelVisibilityList(project.value?.id, {
-      // FIXME: type
-      includeM2M: includeM2M.value || '',
+      includeM2M: includeM2M.value,
     })
   } catch (e) {
     console.error(e)
@@ -99,7 +98,7 @@ const columns = [
 
 <template>
   <div class="flex flex-row w-full">
-    <div class="flex flex-column w-full">
+    <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <a-input v-model:value="searchInput" placeholder="Search models" class="nc-acl-search">
           <template #prefix>
@@ -137,7 +136,7 @@ const columns = [
           <template #bodyCell="{ record, column }">
             <div v-if="column.name === 'table_name'">{{ record._ptn }}</div>
             <div v-if="column.name === 'view_name'">
-              <div class="flex align-center">
+              <div class="flex items-center">
                 <component :is="viewIcons[record.type].icon" :class="`text-${viewIcons[record.type].color} mr-1`" />
                 {{ record.title }}
               </div>
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index a62bd57e37..9a33b64d73 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -229,7 +229,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" class="pa-2" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" class="p-2" @keydown.esc="dialogShow = false">
     <div class="px-5">
       <div class="mt-5 prose-xl font-weight-bold">QUICK IMPORT - AIRTABLE</div>
 
@@ -245,7 +245,7 @@ onBeforeUnmount(() => {
           </a>
         </div>
 
-        <a-form ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0">
+        <a-form ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="m-0">
           <a-form-item v-bind="validateInfos['details.apiKey']">
             <a-input-password
               v-model:value="syncSource.details.apiKey"
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index d1963b552d..a3d76f9bc4 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -45,6 +45,11 @@ const validators = computed(() => {
 })
 const { validateInfos } = useForm(table, validators)
 
+const systemColumnsCheckboxInfo = SYSTEM_COLUMNS.map((c, index) => ({
+  value: c,
+  disabled: index === 0,
+}))
+
 onMounted(() => {
   generateUniqueTitle()
 
@@ -53,7 +58,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" centered @keydown.esc="dialogShow = false">
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
@@ -78,8 +83,8 @@ onMounted(() => {
           />
         </a-form-item>
 
-        <div class="flex justify-end">
-          <div class="pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
+        <div class="flex justify-end items-center">
+          <div class="pointer flex flex-row items-center gap-x-1" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
             {{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more
 
             <MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
@@ -95,32 +100,29 @@ onMounted(() => {
           </a-form-item>
 
           <div>
-            <div class="mb-5">
+            <div class="mb-1">
               <!-- Add Default Columns -->
               {{ $t('msg.info.addDefaultColumns') }}
             </div>
 
             <a-row>
-              <a-col :span="6">
-                <a-tooltip placement="top">
-                  <template #title>
-                    <span>ID column is required, you can rename this later if required.</span>
-                  </template>
-                  <a-checkbox v-model:checked="table.columns.id" disabled>ID</a-checkbox>
-                </a-tooltip>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.created_at"> created_at </a-checkbox>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.updated_at"> updated_at </a-checkbox>
-              </a-col>
+              <a-checkbox-group
+                v-model:value="table.columns"
+                :options="systemColumnsCheckboxInfo"
+                class="!flex flex-row justify-between w-full"
+              >
+                <template #label="{ value }">
+                  <a-tooltip v-if="value === 'id'" placement="top" class="!flex">
+                    <template #title>
+                      <span>ID column is required, you can rename this later if required.</span>
+                    </template>
+                    ID
+                  </a-tooltip>
+                  <div v-else class="flex">
+                    {{ value }}
+                  </div>
+                </template>
+              </a-checkbox-group>
             </a-row>
           </div>
         </div>
diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
index d0d810a522..5306830b8f 100644
--- a/packages/nc-gui-v2/components/general/ColorPicker.vue
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { Chrome } from '@ckpack/vue-color'
-import { enumColor } from '@/utils'
-import { computed, ref, watch } from '#imports'
+import { computed, enumColor, ref, watch } from '#imports'
 
 interface Props {
   modelValue?: string | any
diff --git a/packages/nc-gui-v2/components/general/HelpAndSupport.vue b/packages/nc-gui-v2/components/general/HelpAndSupport.vue
new file mode 100644
index 0000000000..1a4766c6a0
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/HelpAndSupport.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { useGlobal, useProject } from '#imports'
+
+const showDrawer = ref(false)
+
+const { appInfo } = useGlobal()
+
+const { project } = useProject()
+
+const route = useRoute()
+
+const openSwaggerLink = () => {
+  openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.value.ncSiteUrl)
+}
+</script>
+
+<template>
+  <div
+    class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)"
+    @click="showDrawer = true"
+  >
+    <MdiCommentTextOutline class="mr-1 nc-share-base" />
+    <!-- todo: i18n -->
+    <div>APIs & Support</div>
+  </div>
+
+  <a-drawer
+    v-model:visible="showDrawer"
+    class="h-full relative"
+    placement="right"
+    size="small"
+    :closable="false"
+    :body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
+  >
+    <div class="flex flex-col w-full h-full p-4 pb-0">
+      <!-- todo: i18n -->
+      <a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title>
+
+      <GeneralSocialCard show-swagger-link class="!w-full nc-social-card">
+        <template #before>
+          <a-list-item v-if="project">
+            <nuxt-link
+              v-t="['e:docs']"
+              class="text-primary !no-underline !text-current py-4 font-weight-medium"
+              target="_blank"
+              @click="openSwaggerLink"
+            >
+              <div class="ml-3 flex items-center text-sm">
+                <LogosSwagger />
+                <!--            todo:  i18n -->
+                <span class="ml-3">{{ project.title }} : Swagger Documentation</span>
+              </div>
+            </nuxt-link>
+          </a-list-item>
+        </template>
+      </GeneralSocialCard>
+
+      <div class="flex-1 my-2"></div>
+
+      <GeneralSponsors class="!w-full" />
+
+      <div class="min-h-10 w-full" />
+    </div>
+  </a-drawer>
+</template>
+
+<style scoped lang="scss">
+/* Social card style */
+.nc-social-card {
+  @apply !shadow-none !border-0 bg-transparent;
+
+  :deep(.ant-spin-container) {
+    @apply !gap-3;
+
+    .ant-list-item {
+      @apply mb-2 border-1 bg-white border-gray-200;
+      &:last-child {
+        @apply !border-solid;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
index 17e38b8901..8237b9c85f 100644
--- a/packages/nc-gui-v2/components/general/MiniSidebar.vue
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -48,7 +48,7 @@ const logout = () => {
 
             <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;
+                <MdiLogout class="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>
@@ -74,24 +74,24 @@ const logout = () => {
                 </span>
               </template>
 
-              <a-menu-item class="active:(ring ring-pink-500)">
+              <a-menu-item class="active:(ring ring-accent)">
                 <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" />
+                  <MdiPlus class="text-lg group-hover:text-accent" />
                   {{ $t('activity.createProject') }}
                 </div>
               </a-menu-item>
 
-              <a-menu-item class="rounded-b active:(ring ring-pink-500)">
+              <a-menu-item class="rounded-b active:(ring ring-accent)">
                 <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" />
+                  <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
                   <div v-html="$t('activity.createProjectExtended.extDB')" />
                 </div>
               </a-menu-item>
@@ -125,7 +125,7 @@ const logout = () => {
     @apply flex w-full justify-center items-center h-12 group p-2;
 
     &.active {
-      @apply bg-pink-500 border-t-1 border-b-1;
+      @apply bg-accent border-t-1 border-b-1;
     }
   }
 }
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index c64a053bdb..2470447fd2 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -58,7 +58,8 @@ watch(previewAs, () => window.location.reload())
     <div class="divider" />
 
     <div class="pointer flex items-center gap-4">
-      <span>Preview as:</span>
+      <!-- Preview as -->
+      <span>{{ $t('activity.previewAs') }}</span>
 
       <a-radio-group v-model:value="previewAs" name="radioGroup">
         <a-radio v-for="role of roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
@@ -79,7 +80,7 @@ watch(previewAs, () => window.location.reload())
     <template v-for="role of roleList" :key="role.title">
       <a-menu-item @click="previewAs = role.title">
         <div class="nc-project-menu-item group">
-          <component :is="roleIcon[role.title]" class="group-hover:text-pink-500" />
+          <component :is="roleIcon[role.title]" class="group-hover:text-accent" />
 
           <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">
             {{ role.title }}
@@ -91,7 +92,7 @@ watch(previewAs, () => window.location.reload())
     <template v-if="previewAs">
       <a-menu-item @click="previewAs = null">
         <div class="nc-project-menu-item group">
-          <MdiClose class="group-hover:text-pink-500" />
+          <MdiClose class="group-hover:text-accent" />
           <!-- Reset Preview -->
           <span class="text-capitalize text-xs whitespace-nowrap">
             {{ $t('activity.resetReview') }}
diff --git a/packages/nc-gui-v2/components/general/ReleaseInfo.vue b/packages/nc-gui-v2/components/general/ReleaseInfo.vue
index 7f42fd24dc..fccb4cc566 100644
--- a/packages/nc-gui-v2/components/general/ReleaseInfo.vue
+++ b/packages/nc-gui-v2/components/general/ReleaseInfo.vue
@@ -36,7 +36,7 @@ onMounted(async () => await fetchReleaseInfo())
   <div v-if="releaseAlert" class="flex items-center">
     <a-dropdown :trigger="['click']" placement="bottom">
       <a-button class="bg-primary border-none">
-        <div class="flex gap-1 align-center text-white">
+        <div class="flex gap-1 items-center text-white">
           <span class="text-sm font-weight-medium">{{ $t('activity.upgrade.available') }}</span>
           <mdi-menu-down />
         </div>
@@ -56,7 +56,7 @@ onMounted(async () => await fetchReleaseInfo())
               {{ $t('activity.upgrade.howTo') }}
             </div>
           </nuxt-link>
-          <a-divider class="ma-0" />
+          <a-divider class="m-0" />
           <div class="nc-menu-item" @click="latestRelease = null">
             <mdi-close />
             <!-- Hide menu -->
diff --git a/packages/nc-gui-v2/components/general/ShareBaseButton.vue b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
index 5861ee1996..260a15096a 100644
--- a/packages/nc-gui-v2/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
@@ -9,8 +9,8 @@ const { isUIAllowed } = useUIPermission()
 </script>
 
 <template>
-  <div class="flex items-center">
-    <a-button
+  <div class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)">
+    <div
       v-if="
         isUIAllowed('newUser') &&
         route.name !== 'index' &&
@@ -18,16 +18,14 @@ const { isUIAllowed } = useUIPermission()
         route.name !== 'project-index-create-external' &&
         route.name !== 'index-user-index'
       "
-      size="middle"
-      type="primary"
-      class="rounded"
       @click="showUserModal = true"
     >
       <div class="flex items-center space-x-1">
-        <mdi-account-supervisor-outline class="mr-1 nc-share-base" />
-        <div>{{ $t('activity.share') }}</div>
+        <MdiAccountPlusOutline class="mr-1 nc-share-base" />
+        <!-- todo: i18n       <div>{{ $t('activity.share') }}</div> -->
+        <div>{{ $t('activity.inviteTeam') }}</div>
       </div>
-    </a-button>
+    </div>
     <TabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/general/SocialCard.vue b/packages/nc-gui-v2/components/general/SocialCard.vue
index 6ca98e0114..cf65d424fe 100644
--- a/packages/nc-gui-v2/components/general/SocialCard.vue
+++ b/packages/nc-gui-v2/components/general/SocialCard.vue
@@ -7,10 +7,40 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
 </script>
 
 <template>
-  <a-card :body-style="{ padding: '0' }" class="w-[300px] shadow-sm rounded-lg">
+  <a-card :body-style="{ padding: '0px' }" class="w-[300px] shadow-sm !rounded-lg">
     <a-list class="w-full" dense>
+      <slot name="before" />
+
+      <a-list-item>
+        <nuxt-link
+          v-t="['e:docs']"
+          class="text-primary !no-underline !text-current"
+          target="_blank"
+          to="https://docs.nocodb.com/"
+        >
+          <div class="ml-3 flex items-center text-sm">
+            <MdiBookOpenOutline class="text-lg text-accent" />
+            <!--            todo:  i18n -->
+            <span class="ml-3">Documentation</span>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link
+          v-t="['e:docs']"
+          class="text-primary !no-underline !text-current"
+          target="_blank"
+          to="https://apis.nocodb.com/"
+        >
+          <div class="ml-3 flex items-center text-sm">
+            <MdiJson class="text-lg text-green-500" />
+            <!--            todo:  i18n -->
+            <span class="ml-3">API Documentation</span>
+          </div>
+        </nuxt-link>
+      </a-list-item>
       <a-list-item>
-        <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
+        <nuxt-link class="text-primary !no-underline !text-current" to="https://github.com/nocodb/nocodb" target="_blank">
           <div class="flex items-center text-sm">
             <mdi-github class="mx-3 text-lg" />
             <div v-if="isRtlLang">
@@ -23,7 +53,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
             <div v-else class="flex items-center">
               <!-- Star -->
               {{ $t('labels.community.starUs1') }}
-              <mdi-star-outline class="mx-1" />
+              {{ ' ' }}
               <!-- us on Github -->
               {{ $t('labels.community.starUs2') }}
             </div>
@@ -31,7 +61,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
         </nuxt-link>
       </a-list-item>
       <a-list-item>
-        <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
+        <nuxt-link class="!no-underline !text-current" to="https://calendly.com/nocodb-meeting" target="_blank">
           <div class="flex items-center text-sm">
             <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
             <!-- Book a Free DEMO -->
@@ -42,7 +72,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
         </nuxt-link>
       </a-list-item>
       <a-list-item>
-        <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
+        <nuxt-link class="!no-underline !text-current" to="https://discord.gg/5RgZmkW" target="_blank">
           <div class="flex items-center text-sm">
             <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
             <!-- Get your questions answered -->
@@ -53,7 +83,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
         </nuxt-link>
       </a-list-item>
       <a-list-item>
-        <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
+        <nuxt-link class="!no-underline !text-current" to="https://twitter.com/NocoDB" target="_blank">
           <div class="flex items-center text-sm">
             <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
             <!-- Follow NocoDB -->
@@ -63,10 +93,19 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
-      <a-list-item v-t="['e:hiring']">
-        <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
+      <a-list-item>
+        <nuxt-link v-t="['e:hiring']" class="!no-underline !text-current" target="_blank" to="http://careers.nocodb.com">
           <div class="flex items-center text-sm">
-            <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
+            <!--            todo:  i18n -->
+            <div class="ml-3">🚀 <span class="ml-3">We are Hiring!!!</span></div>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link v-t="['e:reddit']" class="!no-underline !text-current" target="_blank" to="https://www.reddit.com/r/NocoDB/">
+          <div class="ml-3 flex items-center text-sm">
+            <LogosRedditIcon />
+            <span class="ml-4">/r/NocoDB/</span>
           </div>
         </nuxt-link>
       </a-list-item>
diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue
index 8700a04108..0f47a53cf2 100644
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@@ -7,9 +7,9 @@ const { nav = false } = defineProps<Props>()
 </script>
 
 <template>
-  <a-card class="w-[300px] shadow-sm rounded-lg">
+  <a-card class="w-[300px] shadow-sm !rounded-lg">
     <template #cover>
-      <img class="max-h-[180px] rounded-t-lg" alt="cover" src="/ants-leaf-cutter.jpeg" />
+      <img class="max-h-[180px] !rounded-t-lg" alt="cover" src="/ants-leaf-cutter.jpeg" />
     </template>
 
     <a-card-meta>
diff --git a/packages/nc-gui-v2/components/general/language/Menu.vue b/packages/nc-gui-v2/components/general/language/Menu.vue
index 7bbf6208f9..c3e20b12a4 100644
--- a/packages/nc-gui-v2/components/general/language/Menu.vue
+++ b/packages/nc-gui-v2/components/general/language/Menu.vue
@@ -39,7 +39,7 @@ onMounted(() => {
   <a-menu-item
     v-for="lang of languages"
     :key="lang"
-    :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
+    :class="lang === locale ? '!bg-primary bg-opacity-10 text-primary' : ''"
     class="group"
     :value="lang"
     @click="changeLanguage(lang)"
diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 75ada2d142..61c5fe3685 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -34,7 +34,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 </script>
 
 <template>
-  <div class="bg-primary/100 !h-[100vh] overflow-auto w-100 flex flex-col">
+  <div class="bg-primary !h-[100vh] overflow-auto w-full flex flex-col">
     <div>
       <img src="~/assets/img/icons/512x512-trans.png" width="30" class="mx-4 mt-2" />
     </div>
@@ -59,21 +59,21 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         <a-row class="justify-center">
           <a-col :md="20">
             <div>
-              <div class="h-full ma-0 rounded-b-0">
+              <div class="h-full m-0 rounded-b-0">
                 <div
                   class="nc-form-wrapper pb-10 rounded shadow-xl"
                   style="background: linear-gradient(180deg, #dbdbdb 0, #dbdbdb 200px, white 200px)"
                 >
                   <div class="mt-10 flex items-center justify-center flex-col">
-                    <div class="nc-form-banner backgroundColor darken-1 flex-column justify-center d-flex">
-                      <div class="flex items-center justify-center grow h-[100px]">
+                    <div class="nc-form-banner backgroundColor darken-1 flex-col justify-center flex">
+                      <div class="flex items-center justify-center flex-1 h-[100px]">
                         <img src="~/assets/img/icon.png" width="50" class="mx-4" />
                         <span class="text-4xl font-weight-bold">NocoDB</span>
                       </div>
                     </div>
                   </div>
 
-                  <div class="mx-auto nc-form bg-white shadow-lg pa-2 mb-10 max-w-[600px] mx-auto rounded">
+                  <div class="mx-auto nc-form bg-white shadow-lg p-2 mb-10 max-w-[600px] mx-auto rounded">
                     <h2 class="mt-4 text-4xl font-weight-bold text-left mx-4 mb-3 px-1">
                       {{ sharedFormView.heading }}
                     </h2>
@@ -81,7 +81,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                     <div class="text-lg text-left mx-4 py-2 px-1 text-gray-500">
                       {{ sharedFormView.subheading }}
                     </div>
-                    <div class="h-100">
+                    <div class="h-full">
                       <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col mt-4 px-4 space-y-2">
                         <div class="flex">
                           <SmartsheetHeaderVirtualCell
@@ -159,7 +159,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <style scoped lang="scss">
 .nc-input {
-  @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex align-center border-solid border-1 border-primary;
+  @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex items-center border-solid border-1 border-primary;
 }
 
 .nc-form-wrapper {
diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
index 3320f0551c..59f5310c5e 100644
--- a/packages/nc-gui-v2/components/shared-view/Grid.vue
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -4,7 +4,7 @@ import type { TableType } from 'nocodb-sdk'
 
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
-const { sharedView, meta } = useSharedView()
+const { sharedView, meta, sorts, nestedFilters } = useSharedView()
 
 const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -14,7 +14,7 @@ provide(ActiveViewInj, sharedView)
 provide(FieldsInj, ref(meta.value.columns as any[]))
 provide(IsPublicInj, ref(true))
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta, true, sorts, nestedFilters)
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index e6fbc713b9..77df6bac23 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -99,7 +99,12 @@ useEventListener(document, 'click', handleClose)
 </script>
 
 <template>
-  <div ref="editOrAddRef" class="min-w-[400px] max-h-[95vh] bg-gray-50 shadow-lg p-6 overflow-auto !border" @click.stop>
+  <div
+    ref="editOrAddRef"
+    class="w-[400px] max-h-[95vh] bg-gray-50 shadow-lg p-6 overflow-auto !border"
+    :class="{ '!w-[600px]': formState.uidt === UITypes.Formula }"
+    @click.stop
+  >
     <a-form v-if="formState" v-model="formState" name="column-create-or-edit" layout="vertical">
       <div class="flex flex-col gap-2">
         <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
@@ -112,7 +117,7 @@ useEventListener(document, 'click', handleClose)
         >
           <a-select v-model:value="formState.uidt" show-search 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">
-              <div class="flex gap-1 align-center">
+              <div class="flex gap-1 items-center">
                 <component :is="opt.icon" class="text-grey" />
                 {{ opt.name }}
               </div>
@@ -139,7 +144,7 @@ useEventListener(document, 'click', handleClose)
       </div>
       <div
         v-if="!isVirtualCol(formState.uidt)"
-        class="text-xs cursor-pointer text-grey nc-more-options mb-1 mt-4 flex align-center gap-1 justify-end"
+        class="text-xs cursor-pointer text-grey nc-more-options mb-1 mt-4 flex items-center gap-1 justify-end"
         @click="advancedOptions = !advancedOptions"
       >
         {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
@@ -192,7 +197,7 @@ useEventListener(document, 'click', handleClose)
 }
 
 :deep(.ant-select-selection-item) {
-  @apply flex align-center;
+  @apply flex items-center;
 }
 
 :deep(.ant-form-item-explain-error) {
diff --git a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
index 8d8ef2b132..e0711a6fae 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -68,7 +68,7 @@ const refTables = $computed(() => {
     </div>
 
     <div
-      class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end"
+      class="text-xs cursor-pointer text-grey nc-more-options my-2 flex items-center gap-1 justify-end"
       @click="advancedOptions = !advancedOptions"
     >
       {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
diff --git a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
index 788e8c87d1..15e54cc04a 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
@@ -95,7 +95,7 @@ watch(inputs, () => {
   <div class="w-full">
     <Draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
       <template #item="{ element, index }">
-        <div class="flex py-1 align-center">
+        <div class="flex py-1 items-center">
           <MdiDragIcon small class="nc-child-draggable-icon handle" />
           <a-dropdown v-model:visible="colorMenus[index]" :trigger="['click']">
             <template #overlay>
@@ -109,7 +109,7 @@ watch(inputs, () => {
       </template>
       <template #footer>
         <a-button type="dashed" class="w-full caption mt-2" @click="addNewOption()">
-          <div class="flex align-center"><MdiPlusIcon /><span class="flex-auto">Add option</span></div>
+          <div class="flex items-center"><MdiPlusIcon /><span class="flex-auto">Add option</span></div>
         </a-button>
       </template>
     </Draggable>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 15a53e5515..5301ba8079 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -38,7 +38,7 @@ const icon = computed(() => {
     case UITypes.LinkToAnotherRecord:
       switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: MMIcon, color: 'text-pink-500' }
+          return { icon: MMIcon, color: 'text-accent' }
         case RelationTypes.HAS_MANY:
           return { icon: HMIcon, color: 'text-yellow-500' }
         case RelationTypes.BELONGS_TO:
@@ -52,7 +52,7 @@ const icon = computed(() => {
     case UITypes.Lookup:
       switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: TableColumnPlusBefore, color: 'text-pink-500' }
+          return { icon: TableColumnPlusBefore, color: 'text-accent' }
         case RelationTypes.HAS_MANY:
           return { icon: TableColumnPlusBefore, color: 'text-yellow-500' }
         case RelationTypes.BELONGS_TO:
@@ -62,7 +62,7 @@ const icon = computed(() => {
     case UITypes.Rollup:
       switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: RollupIcon, color: 'text-pink-500' }
+          return { icon: RollupIcon, color: 'text-accent' }
         case RelationTypes.HAS_MANY:
           return { icon: RollupIcon, color: 'text-yellow-500' }
         case RelationTypes.BELONGS_TO:
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
new file mode 100644
index 0000000000..aa124f9f75
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { OpenNewRecordFormHookInj, inject } from '#imports'
+
+const isLocked = inject(IsLockedInj)
+
+const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)!
+
+const onClick = () => {
+  if (!isLocked?.value) openNewRecordFormHook.trigger()
+}
+</script>
+
+<template>
+  <a-tooltip placement="bottom">
+    <template #title> {{ $t('activity.addRow') }} </template>
+    <div :class="{ 'group': !isLocked, 'disabled-ring': isLocked }" class="nc-add-row flex align-center">
+      <MdiPlusOutline
+        :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"
+        @click="onClick"
+      />
+    </div>
+  </a-tooltip>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index a7e38d73f8..edf6929e5c 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -41,6 +41,7 @@ const reloadDataHook = inject(ReloadViewDataHookInj)!
 
 const { $e } = useNuxtApp()
 
+const { nestedFilters } = useSmartsheetStoreOrThrow()
 const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
   activeView,
   parentId,
@@ -48,10 +49,11 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   () => {
     reloadDataHook.trigger()
   },
-  modelValue,
+  modelValue || nestedFilters.value,
+  !modelValue,
 )
 
-const nestedFilters = ref()
+const localNestedFilters = ref()
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
   saveOrUpdate(filter, i)
@@ -115,9 +117,9 @@ watch(
 const applyChanges = async (hookId?: string) => {
   await sync(hookId)
 
-  if (!nestedFilters.value.length) return
+  if (!localNestedFilters.value?.length) return
 
-  for (const nestedFilter of nestedFilters.value) {
+  for (const nestedFilter of localNestedFilters.value) {
     if (nestedFilter.parentId) {
       await nestedFilter.applyChanges(hookId, true)
     }
@@ -148,7 +150,7 @@ defineExpose({
             />
             <span v-else :key="`${i}dummy`" />
 
-            <div :key="`${i}nested`" class="d-flex">
+            <div :key="`${i}nested`" class="flex">
               <a-select
                 v-model:value="filter.logical_op"
                 :dropdown-match-select-width="false"
@@ -166,7 +168,7 @@ defineExpose({
             <div class="col-span-5">
               <SmartsheetToolbarColumnFilter
                 v-if="filter.id || filter.children"
-                ref="nestedFilters"
+                ref="localNestedFilters"
                 v-model="filter.children"
                 :parent-id="filter.id"
                 nested
@@ -187,7 +189,7 @@ defineExpose({
 
             <MdiCloseBox
               v-if="!filter.readOnly"
-              class="nc-filter-item-remove-btn text-grey align-self-center"
+              class="nc-filter-item-remove-btn text-grey self-center"
               @click.stop="deleteFilter(filter, i)"
             />
             <span v-else />
@@ -269,7 +271,7 @@ defineExpose({
 
     <div class="flex gap-2 mb-2 mt-4">
       <a-button class="elevation-0 text-capitalize" type="primary" ghost @click.stop="addFilter">
-        <div class="flex align-center gap-1">
+        <div class="flex items-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiPlus />
           <!-- Add Filter -->
@@ -277,7 +279,7 @@ defineExpose({
         </div>
       </a-button>
       <a-button class="text-capitalize !text-gray-500" @click.stop="addFilterGroup">
-        <div class="flex align-center gap-1">
+        <div class="flex items-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiPlus />
           Add Filter Group
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 851548b2aa..0687a34a94 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -12,11 +12,15 @@ const { filterAutoSave } = useGlobal()
 
 const filterComp = ref<typeof ColumnFilter>()
 
+const { nestedFilters } = useSmartsheetStoreOrThrow()
 // todo: avoid duplicate api call by keeping a filter store
 const { filters, loadFilters } = useViewFilters(
   activeView,
   undefined,
-  computed(() => false),
+  computed(() => true),
+  () => false,
+  nestedFilters.value,
+  true,
 )
 
 const filtersLength = ref(0)
@@ -36,10 +40,10 @@ const applyChanges = async () => await filterComp.value?.applyChanges()
   <a-dropdown :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
-        <div class="flex align-center gap-1">
+        <div class="flex items-center gap-1">
           <MdiFilterOutline />
           <!-- Filter -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span>
           <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
@@ -51,7 +55,7 @@ const applyChanges = async () => await filterComp.value?.applyChanges()
         :auto-save="filterAutoSave"
         @update:filters-length="filtersLength = $event"
       >
-        <div v-if="!isPublic" class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
+        <div v-if="!isPublic" class="flex items-end mt-2 min-h-[30px]" @click.stop>
           <a-checkbox id="col-filter-checkbox" v-model:checked="filterAutoSave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index c98836d163..019aeaec14 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -86,7 +86,7 @@ const filterOption = (input: string, option: any) => {
     :filter-option="filterOption"
   >
     <a-select-option v-for="option in options" :key="option.value" :value="option.value">
-      <div class="flex gap-2 items-center align-center h-full">
+      <div class="flex gap-2 items-center items-center h-full">
         <component :is="option.icon" class="min-w-5 !mx-0" />
         <span class="min-w-0"> {{ option.label }}</span>
       </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index a10436551e..36cfbf6417 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ColumnType } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
 import Draggable from 'vuedraggable'
 import {
   ActiveViewInj,
@@ -14,6 +16,8 @@ import {
   useViewColumns,
   watch,
 } from '#imports'
+import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
+import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
 
 const meta = inject(MetaInj)!
 
@@ -39,6 +43,7 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
+  metaColumnById,
 } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
@@ -76,17 +81,22 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 
   $e('a:fields:reorder')
 }
+
+const getIcon = (c: ColumnType) =>
+  h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
+    columnMeta: c,
+  })
 </script>
 
 <template>
   <a-dropdown :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
-        <div class="flex align-center gap-1">
+        <div class="flex items-center gap-1">
           <MdiEyeOffOutline />
 
           <!-- Fields -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('objects.fields') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span>
 
           <MdiMenuDown class="text-grey" />
         </div>
@@ -103,9 +113,12 @@ const onMove = (event: { moved: { newIndex: number } }) => {
         <div class="nc-fields-list py-1">
           <Draggable v-model="fields" item-key="id" @change="onMove($event)">
             <template #item="{ element: field, index: index }">
-              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
-                <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, index)">
-                  <span class="">{{ field.title }}</span>
+              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex items-center" @click.stop>
+                <a-checkbox v-model:checked="field.show" class="shrink" @change="saveOrUpdate(field, index)">
+                  <div class="flex items-center">
+                    <component :is="getIcon(metaColumnById[field.fk_column_id])" />
+                    <span>{{ field.title }}</span>
+                  </div>
                 </a-checkbox>
                 <div class="flex-1" />
                 <MdiDrag class="cursor-move" />
@@ -113,7 +126,8 @@ const onMove = (event: { moved: { newIndex: number } }) => {
             </template>
           </Draggable>
         </div>
-        <v-divider class="my-2" />
+
+        <a-divider class="!my-2" />
 
         <div v-if="!isPublic" class="p-2 py-1 flex" @click.stop>
           <a-checkbox v-model:checked="showSystemFields">
@@ -139,4 +153,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 :deep(.ant-checkbox-inner) {
   @apply transform scale-60;
 }
+:deep(.ant-checkbox) {
+  @apply top-auto;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
new file mode 100644
index 0000000000..a95fe662cd
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
+import MdiAccountIcon from '~icons/mdi/account'
+import MdiAccountGroupIcon from '~icons/mdi/account-group'
+
+import { LockType } from '~/lib'
+
+const { type, hideTick } = defineProps<{ hideTick?: boolean; type: LockType }>()
+
+const emit = defineEmits(['select'])
+
+const types = {
+  [LockType.Personal]: {
+    title: 'title.personalView',
+    icon: MdiAccountIcon,
+    subtitle: 'Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.',
+  },
+  [LockType.Collaborative]: {
+    title: 'title.collabView',
+    icon: MdiAccountGroupIcon,
+    subtitle: 'Collaborators with edit permissions or higher can change the view configuration.',
+  },
+  [LockType.Locked]: {
+    title: 'title.lockedView',
+    icon: MdiLockOutlineIcon,
+    subtitle: 'No one can edit the view configuration until it is unlocked.',
+  },
+}
+
+const selectedView = inject(ActiveViewInj)
+</script>
+
+<template>
+  <div class="nc-locked-menu-item" @click="emit('select', type)">
+    <div :class="{ 'show-tick': !hideTick }">
+      <template v-if="!hideTick">
+        <MdiCheck v-if="selectedView?.lock_type === type" />
+        <span v-else />
+      </template>
+      <div>
+        <component :is="types[type].icon" class="text-gray-500" />
+        {{ $t(types[type].title) }}
+        <div class="nc-subtitle whitespace-normal">
+          {{ types[type].subtitle }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nc-locked-menu-item > div {
+  @apply p-2 items-center min-w-[350px] max-w-[350px];
+
+  &.show-tick {
+    @apply grid gap-2  grid-cols-[30px,auto];
+  }
+
+  .nc-subtitle {
+    @apply text-xs text-gray-500 font-weight-light;
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index c8e43546d8..28f9e72c18 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -92,7 +92,7 @@ const exportFile = async (exportType: ExportTypes) => {
   <div>
     <a-dropdown>
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
-        <div class="flex gap-1 align-center">
+        <div class="flex gap-1 items-center">
           <MdiFlashOutline />
 
           <!-- More -->
@@ -130,7 +130,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
 
             <div
-              v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
+              v-if="isUIAllowed('sharedViewList') && !isView && !isPublicView"
               v-t="['a:actions:shared-view-list']"
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
@@ -139,7 +139,6 @@ const exportFile = async (exportType: ExportTypes) => {
               <!-- Shared View List -->
               {{ $t('activity.listSharedView') }}
             </div>
-
             <div
               v-if="isUIAllowed('webhook') && !isView && !isPublicView"
               v-t="['c:actions:webhook']"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
similarity index 51%
rename from packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
rename to packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
index 9125b33b6e..5c780b1c16 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
@@ -3,17 +3,15 @@ import { ReloadViewDataHookInj, inject } from '#imports'
 
 const reloadHook = inject(ReloadViewDataHookInj)!
 
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
-
 const onClick = () => reloadHook.trigger()
 </script>
 
 <template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
+  <a-tooltip placement="bottom">
     <template #title> {{ $t('general.reload') }} </template>
 
-    <div class="nc-sidebar-right-item hover:after:bg-green-500 group">
-      <MdiReload class="cursor-pointer group-hover:(!text-white)" @click="onClick" />
+    <div class="group flex align-center">
+      <MdiReload class="cursor-pointer text-gray-500 group-hover:(text-primary)" @click="onClick" />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index cf08d019e1..440254da2b 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -8,6 +8,8 @@ const { search, meta } = useSmartsheetStoreOrThrow()
 
 // todo: where is this value supposed to come from? it's not in the store
 const isDropdownOpen = ref(false)
+const searchDropdown = ref(null)
+onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
 
 const columns = computed(() =>
   meta.value?.columns?.map((c) => ({
@@ -22,21 +24,36 @@ function onPressEnter() {
 </script>
 
 <template>
-  <a-input v-model:value="search.query" size="small" class="max-w-[200px]" placeholder="Filter query" @press-enter="onPressEnter">
-    <template #addonBefore>
-      <div class="flex align-center relative" @click="isDropdownOpen = true">
-        <MdiMagnify class="text-grey" />
-        <MdiMenuDown class="text-grey" />
+  <div class="flex flex-row border-1 rounded-sm">
+    <div
+      ref="searchDropdown"
+      class="flex items-center relative bg-gray-50 px-2 cursor-pointer border-r-1"
+      :class="{ '!bg-gray-100 ': isDropdownOpen }"
+      @click="isDropdownOpen = !isDropdownOpen"
+    >
+      <MdiMagnify class="text-grey" />
+      <MdiMenuDown class="text-grey" />
 
-        <a-select
-          v-model:value="search.field"
-          size="small"
-          :dropdown-match-select-width="false"
-          :options="columns"
-          class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
-        >
-        </a-select>
-      </div>
-    </template>
-  </a-input>
+      <a-select
+        v-model:value="search.field"
+        :open="isDropdownOpen"
+        size="small"
+        :dropdown-match-select-width="false"
+        :options="columns"
+        dropdown-class-name="!py-0 !rounded"
+        class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
+      >
+      </a-select>
+    </div>
+    <a-input
+      v-model:value="search.query"
+      size="small"
+      class="max-w-[200px]"
+      placeholder="Filter query"
+      :bordered="false"
+      @press-enter="onPressEnter"
+    >
+      <template #addonBefore> </template>
+    </a-input>
+  </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index a12f810cd5..ea16354a6a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -1,11 +1,8 @@
 <script lang="ts" setup>
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
-import { computed } from 'vue'
 import { message } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { useSmartsheetStoreOrThrow } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { computed, extractSdkResponseErrorMsg, useNuxtApp, useProject, useSmartsheetStoreOrThrow } from '#imports'
 import MdiOpenInNewIcon from '~icons/mdi/open-in-new'
 import MdiCopyIcon from '~icons/mdi/content-copy'
 
@@ -19,6 +16,8 @@ const { dashboardUrl } = useDashboard()
 
 const { isUIAllowed } = useUIPermission()
 
+const { isSharedBase } = useProject()
+
 let showShareModel = $ref(false)
 
 let passwordProtected = $ref(false)
@@ -118,11 +117,16 @@ onMounted(() => {
 
 <template>
   <div>
-    <a-button v-if="isUIAllowed('share-view')" v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn">
-      <div class="flex align-center gap-1" @click="genShareLink">
+    <a-button
+      v-if="isUIAllowed('share-view') && !isSharedBase"
+      v-t="['c:view:share']"
+      outlined
+      class="nc-btn-share-view nc-toolbar-btn"
+    >
+      <div class="flex items-center gap-1" @click="genShareLink">
         <MdiOpenInNewIcon />
         <!-- Share View -->
-        <span class="!text-sm font-weight-medium"> {{ $t('activity.shareView') }}</span>
+        <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>
       </div>
     </a-button>
 
@@ -173,7 +177,7 @@ onMounted(() => {
 
 <style scoped>
 .share-link-box {
-  @apply flex p-2 w-full items-center align-center gap-1 bg-gray-100 rounded;
+  @apply flex p-2 w-full items-center items-center gap-1 bg-gray-100 rounded;
 }
 
 :deep(.ant-collapse-header) {
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 91dfc5fb82..513f7429bb 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -110,7 +110,7 @@ const deleteLink = async (id: string) => {
       <!-- Password -->
       <a-table-column key="password" :title="$t('labels.password')" data-index="title">
         <template #default="{ record }">
-          <div class="flex align-center items-center gap-1">
+          <div class="flex items-center items-center gap-1">
             <template v-if="record.password">
               <span class="h-min">{{ record.showPassword ? record.password : '***************************' }}</span>
               <component
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index d26d503b68..b91c78f768 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -37,10 +37,10 @@ watch(
   <a-dropdown offset-y class="" :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-t="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
-        ><div class="flex align-center gap-1">
+        ><div class="flex items-center gap-1">
           <MdiSortIcon />
           <!-- Sort -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
@@ -49,12 +49,8 @@ watch(
       <div class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border">
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">
-            <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
-            <MdiDeleteIcon
-              class="nc-sort-item-remove-btn text-grey align-self-center"
-              small
-              @click.stop="deleteSort(sort, i)"
-            ></MdiDeleteIcon>
+            <MdiDeleteIcon class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
+
             <FieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"
               class="caption nc-sort-field-select"
@@ -63,12 +59,13 @@ watch(
               @click.stop
               @update:model-value="saveOrUpdate(sort, i)"
             />
+
             <a-select
               v-model:value="sort.direction"
-              class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select !text-xs"
+              class="shrink grow-0 nc-sort-dir-select !text-xs"
               :label="$t('labels.operation')"
               @click.stop
-              @update:value="saveOrUpdate(sort, i)"
+              @select="saveOrUpdate(sort, i)"
             >
               <a-select-option
                 v-for="(option, j) in getSortDirectionOptions(columnByID[sort.fk_column_id]?.uidt)"
@@ -78,14 +75,10 @@ watch(
                 <span>{{ option.text }}</span>
               </a-select-option>
             </a-select>
-            <!--            <template #item="{ item }"> -->
-            <!--              <span class="caption font-weight-regular">{{ item.text }}</span> -->
-            <!--            </template> -->
-            <!--          </v-select> -->
           </template>
         </div>
         <a-button class="text-capitalize mb-1 mt-4" type="primary" ghost @click.stop="addSort">
-          <div class="flex gap-1 align-center">
+          <div class="flex gap-1 items-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->
             {{ $t('activity.addSort') }}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
new file mode 100644
index 0000000000..d77b3227bc
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
@@ -0,0 +1,280 @@
+<script lang="ts" setup>
+import * as XLSX from 'xlsx'
+import { ExportTypes } from 'nocodb-sdk'
+import FileSaver from 'file-saver'
+import { message } from 'ant-design-vue'
+import { LockType } from '~/lib'
+import { viewIcons } from '~/utils'
+import {
+  ActiveViewInj,
+  FieldsInj,
+  IsLockedInj,
+  IsPublicInj,
+  MetaInj,
+  extractSdkResponseErrorMsg,
+  inject,
+  ref,
+  useNuxtApp,
+  useProject,
+  useUIPermission,
+} from '#imports'
+import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
+import MdiAccountIcon from '~icons/mdi/account'
+import MdiAccountGroupIcon from '~icons/mdi/account-group'
+
+const sharedViewListDlg = ref(false)
+
+const isPublicView = inject(IsPublicInj, ref(false))
+
+const isView = false
+
+const { project } = useProject()
+
+const { $api, $e } = useNuxtApp()
+
+const meta = inject(MetaInj)
+
+const fields = inject(FieldsInj, ref([]))
+
+const selectedView = inject(ActiveViewInj)
+
+const isLocked = inject(IsLockedInj)
+
+const showWebhookDrawer = ref(false)
+
+const quickImportDialog = ref(false)
+
+const { isUIAllowed } = useUIPermission()
+
+const exportFile = async (exportType: ExportTypes) => {
+  let offset = 0
+  let c = 1
+  const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
+
+  try {
+    while (!isNaN(offset) && offset > -1) {
+      let res
+      if (isPublicView.value) {
+        const { exportFile: sharedViewExportFile } = useSharedView()
+        res = await sharedViewExportFile(fields.value, offset, exportType, responseType)
+      } else {
+        res = await $api.dbViewRow.export(
+          'noco',
+          project?.value.title as string,
+          meta?.value.title as string,
+          selectedView?.value.title as string,
+          exportType,
+          {
+            responseType,
+            query: {
+              offset,
+            },
+          } as any,
+        )
+      }
+      const { data, headers } = res
+      if (exportType === ExportTypes.EXCEL) {
+        const workbook = XLSX.read(data, { type: 'base64' })
+        XLSX.writeFile(workbook, `${meta?.value.title}_exported_${c++}.xlsx`)
+      } else if (exportType === ExportTypes.CSV) {
+        const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
+        FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
+      }
+      offset = +headers['nc-export-offset']
+      if (offset > -1) {
+        message.info('Downloading more files')
+      } else {
+        message.success('Successfully exported all table data')
+      }
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const Icon = computed(() => {
+  switch ((selectedView?.value as any)?.lock_type) {
+    case LockType.Personal:
+      return MdiAccountIcon
+    case LockType.Locked:
+      return MdiLockOutlineIcon
+    case LockType.Collaborative:
+    default:
+      return MdiAccountGroupIcon
+  }
+})
+
+async function changeLockType(type: LockType) {
+  $e('a:grid:lockmenu', { lockType: type })
+
+  if (!selectedView?.value) return
+
+  if (type === 'personal') {
+    return message.info('Coming soon')
+  }
+  try {
+    ;(selectedView.value as any).lock_type = type
+    $api.dbView.update(selectedView.value.id as string, {
+      lock_type: type,
+    })
+
+    message.success(`Successfully Switched to ${type} view`)
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+</script>
+
+<template>
+  <div>
+    <a-dropdown :trigger="['click']">
+      <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+        <div class="flex gap-2 items-center">
+          <component
+            :is="viewIcons[selectedView?.type].icon"
+            class="nc-view-icon group-hover:hidden"
+            :style="{ color: viewIcons[selectedView?.type].color }"
+          />
+          <span class="!text-sm font-weight-normal">{{ selectedView?.title }}</span>
+          <component :is="Icon" class="text-gray-500" />
+          <MdiMenuDown class="text-grey" />
+        </div>
+      </a-button>
+
+      <template #overlay>
+        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded">
+          <a-menu-item-group>
+            <a-sub-menu
+              v-if="isUIAllowed('view-type')"
+              key="lock-type"
+              class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"
+            >
+              <template #title>
+                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
+                  <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
+
+                  <MaterialSymbolsChevronRightRounded
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                  />
+                </div>
+              </template>
+
+              <template #expandIcon></template>
+              <a-menu-item @click="changeLockType(LockType.Collaborative)">
+                <SmartsheetToolbarLockType :type="LockType.Collaborative" />
+              </a-menu-item>
+              <a-menu-item @click="changeLockType(LockType.Locked)">
+                <SmartsheetToolbarLockType :type="LockType.Locked" />
+              </a-menu-item>
+              <a-menu-item @click="changeLockType(LockType.Personal)">
+                <SmartsheetToolbarLockType :type="LockType.Personal" />
+              </a-menu-item>
+            </a-sub-menu>
+            <a-menu-divider />
+            <a-sub-menu key="download">
+              <template #title>
+                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                  <MdiDownload class="group-hover:text-accent text-gray-500" />
+                  Download
+                  <div class="flex-1" />
+
+                  <MaterialSymbolsChevronRightRounded
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                  />
+                </div>
+              </template>
+
+              <template #expandIcon></template>
+              <a-menu-item>
+                <div v-t="['a:actions:download-csv']" class="nc-project-menu-item" @click="exportFile(ExportTypes.CSV)">
+                  <MdiDownloadOutline class="text-gray-500" />
+                  <!-- Download as CSV -->
+                  {{ $t('activity.downloadCSV') }}
+                </div>
+              </a-menu-item>
+              <a-menu-item>
+                <div v-t="['a:actions:download-excel']" class="nc-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+                  <MdiDownloadOutline class="text-gray-500" />
+                  <!-- Download as XLSX -->
+                  {{ $t('activity.downloadExcel') }}
+                </div>
+              </a-menu-item>
+            </a-sub-menu>
+            <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
+              <a-sub-menu key="upload">
+                <template #title>
+                  <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                    <MdiUpload class="group-hover:text-accent text-gray-500" />
+                    Upload
+                    <div class="flex-1" />
+
+                    <MaterialSymbolsChevronRightRounded
+                      class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                    />
+                  </div>
+                </template>
+
+                <template #expandIcon></template>
+                <a-menu-item>
+                  <div
+                    v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
+                    v-t="['a:actions:upload-csv']"
+                    class="nc-project-menu-item"
+                    :class="{ disabled: isLocked }"
+                    @click="!isLocked ? (quickImportDialog = true) : {}"
+                  >
+                    <MdiUploadOutline class="text-gray-500" />
+                    <!-- Upload CSV -->
+                    {{ $t('activity.uploadCSV') }}
+                  </div>
+                </a-menu-item>
+              </a-sub-menu>
+            </template>
+            <a-menu-divider />
+            <a-menu-item>
+              <div
+                v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
+                v-t="['a:actions:shared-view-list']"
+                class="py-2 flex gap-2 items-center"
+                @click="sharedViewListDlg = true"
+              >
+                <MdiViewListOutline class="text-gray-500" />
+                <!-- Shared View List -->
+                {{ $t('activity.listSharedView') }}
+              </div>
+            </a-menu-item>
+            <a-menu-item>
+              <div
+                v-if="isUIAllowed('webhook') && !isView && !isPublicView"
+                v-t="['c:actions:webhook']"
+                class="py-2 flex gap-2 items-center"
+                @click="showWebhookDrawer = true"
+              >
+                <MdiHook class="text-gray-500" />
+                {{ $t('objects.webhooks') }}
+              </div>
+            </a-menu-item>
+          </a-menu-item-group>
+        </a-menu>
+      </template>
+    </a-dropdown>
+
+    <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
+
+    <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
+
+    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
+      <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
+    </a-modal>
+  </div>
+</template>
+
+<style scoped>
+:deep(.ant-dropdown-menu-submenu-title) {
+  @apply py-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply hidden;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 62ae5c7f72..79d1478466 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -357,7 +357,7 @@ onMounted(async () => {
 <template>
   <a-row v-if="submitted" class="h-full">
     <a-col :span="24">
-      <div v-if="formViewData" class="align-center justify-center text-center mt-2">
+      <div v-if="formViewData" class="items-center justify-center text-center mt-2">
         <a-alert type="success">
           <template #message>
             <div class="text-center">{{ formViewData.success_msg || 'Successfully submitted form data' }}</div>
@@ -376,7 +376,7 @@ onMounted(async () => {
     <a-col
       v-if="isEditable"
       :span="8"
-      class="bg-[#f7f7f7] shadow-md pa-5 h-full overflow-auto scrollbar-thin-primary nc-form-left-drawer"
+      class="bg-[#f7f7f7] shadow-md p-5 h-full overflow-auto scrollbar-thin-primary nc-form-left-drawer"
     >
       <div class="flex">
         <div class="flex flex-row flex-1 text-lg">
@@ -412,7 +412,7 @@ onMounted(async () => {
         <template #item="{ element }">
           <a-card
             size="small"
-            class="ma-0 pa-0 cursor-pointer item mb-2"
+            class="m-0 p-0 cursor-pointer item mb-2"
             @mousedown="moved = false"
             @mousemove="moved = false"
             @mouseup="handleMouseUp(element)"
@@ -470,7 +470,7 @@ onMounted(async () => {
         <!-- for future implementation of cover image -->
       </div>
       <a-card
-        class="h-full ma-0 rounded-b-0 pa-4 border-none"
+        class="h-full m-0 rounded-b-0 p-4 border-none"
         :body-style="{
           maxWidth: '700px',
           margin: '0 auto',
@@ -478,9 +478,9 @@ onMounted(async () => {
         }"
       >
         <a-form ref="formRef" :model="formState" class="nc-form">
-          <a-card class="rounded ma-2 py-10 px-5">
+          <a-card class="rounded m-2 py-10 px-5">
             <!-- Header -->
-            <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
+            <a-form-item v-if="isEditable" class="m-0 gap-0 p-0">
               <a-input
                 v-model:value="formViewData.heading"
                 class="w-full text-bold text-h3"
@@ -496,7 +496,7 @@ onMounted(async () => {
             <div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div>
 
             <!-- Sub Header -->
-            <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
+            <a-form-item v-if="isEditable" class="m-0 gap-0 p-0">
               <a-input
                 v-model:value="formViewData.subheading"
                 class="w-full"
@@ -518,7 +518,7 @@ onMounted(async () => {
               item-key="fk_column_id"
               draggable=".item"
               group="form-inputs"
-              class="h-100"
+              class="h-full"
               :move="onMoveCallback"
               @change="onMove($event)"
               @start="drag = true"
@@ -526,7 +526,7 @@ onMounted(async () => {
             >
               <template #item="{ element, index }">
                 <div
-                  class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3"
+                  class="nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10) p-3"
                   :class="`nc-form-drag-${element.title.replaceAll(' ', '')}`"
                   @click="activeRow = element.title"
                 >
@@ -555,7 +555,7 @@ onMounted(async () => {
 
                   <a-form-item
                     v-if="isVirtualCol(element)"
-                    class="ma-0 gap-0 pa-0"
+                    class="m-0 gap-0 p-0"
                     :name="element.title"
                     :rules="[{ required: element.required, message: `${element.title} is required` }]"
                   >
@@ -570,7 +570,7 @@ onMounted(async () => {
 
                   <a-form-item
                     v-else
-                    class="ma-0 gap-0 pa-0"
+                    class="m-0 gap-0 p-0"
                     :name="element.title"
                     :rules="[{ required: element.required, message: `${element.title} is required` }]"
                   >
@@ -710,7 +710,7 @@ onMounted(async () => {
 }
 
 .nc-input {
-  @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex align-center border-solid border-1 border-primary;
+  @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex items-center border-solid border-1 border-primary;
 }
 
 .form-meta-input::placeholder {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 4d3bb67078..aff46ce8f7 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -3,6 +3,19 @@ import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
+  ActiveViewInj,
+  ChangePageInj,
+  FieldsInj,
+  IsFormInj,
+  IsGridInj,
+  IsLockedInj,
+  IsPublicInj,
+  MetaInj,
+  OpenNewRecordFormHookInj,
+  PaginationDataInj,
+  ReadonlyInj,
+  ReloadViewDataHookInj,
+  enumColor,
   inject,
   onClickOutside,
   onMounted,
@@ -12,25 +25,12 @@ import {
   useEventListener,
   useGridViewColumnWidth,
   useSmartsheetStoreOrThrow,
+  useUIPermission,
   useViewData,
   watch,
 } from '#imports'
 import type { Row } from '~/composables'
-import {
-  ActiveViewInj,
-  ChangePageInj,
-  FieldsInj,
-  IsFormInj,
-  IsGridInj,
-  IsLockedInj,
-  IsPublicInj,
-  MetaInj,
-  PaginationDataInj,
-  ReadonlyInj,
-  ReloadViewDataHookInj,
-} from '~/context'
 import { NavigateDir } from '~/lib'
-import { enumColor } from '~/utils'
 
 const meta = inject(MetaInj)
 
@@ -42,7 +42,7 @@ const isPublicView = inject(IsPublicInj, ref(false))
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
 const readOnly = inject(ReadonlyInj, false)
-const isLocked = inject(IsLockedInj, false)
+const isLocked = inject(IsLockedInj, ref(false))
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)
@@ -87,7 +87,6 @@ const {
   deleteRow,
   deleteSelectedRows,
   selectedAllRecords,
-  loadAggCommentsCount,
   removeLastEmptyRow,
 } = useViewData(meta, view as any, xWhere)
 
@@ -106,7 +105,6 @@ provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
   await loadData()
-  loadAggCommentsCount()
 })
 
 const expandForm = (row: Row, state?: Record<string, any>) => {
@@ -128,7 +126,7 @@ const selectCell = (row: number, col: number) => {
 watch(
   () => (view?.value as any)?.id,
   async (n?: string, o?: string) => {
-    if (n && n !== o) {
+    if (n && o && n !== o) {
       await loadData()
     }
   },
@@ -309,12 +307,12 @@ const onNavigate = (dir: NavigateDir) => {
 </script>
 
 <template>
-  <div class="flex flex-col h-100 min-h-0 w-100">
+  <div class="flex flex-col h-full min-h-0 w-full">
     <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 !h-auto"
+          class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
           @contextmenu.prevent="contextMenu = true"
         >
           <thead>
@@ -325,7 +323,7 @@ const onNavigate = (dir: NavigateDir) => {
                     <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                     <div
                       :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                      class="nc-check-all w-full align-center"
+                      class="nc-check-all w-full items-center"
                     >
                       <a-checkbox v-model:checked="selectedAllRecords" />
 
@@ -360,7 +358,7 @@ const onNavigate = (dir: NavigateDir) => {
                 @click.stop="addColumnDropdown = true"
               >
                 <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
-                  <div class="h-full w-[60px] flex align-center justify-center">
+                  <div class="h-full w-[60px] flex items-center justify-center">
                     <MdiPlus class="text-sm nc-column-add" />
                   </div>
 
@@ -382,7 +380,7 @@ const onNavigate = (dir: NavigateDir) => {
               <template #default="{ state }">
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
-                    <div class="align-center flex gap-1 min-w-[55px]">
+                    <div class="items-center flex gap-1 min-w-[55px]">
                       <div
                         v-if="!readOnly && !isLocked"
                         class="nc-row-no text-xs text-gray-500"
@@ -407,9 +405,12 @@ const onNavigate = (dir: NavigateDir) => {
                         >
                           {{ row.rowMeta.commentCount }}
                         </span>
-                        <div v-else class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                        <div
+                          v-else
+                          class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
+                        >
                           <MdiArrowExpand
-                            class="select-none transform hover:(text-pink-500 scale-120) nc-row-expand"
+                            class="select-none transform hover:(text-accent scale-120) nc-row-expand"
                             @click="expandForm(row, state)"
                           />
                         </div>
@@ -472,11 +473,11 @@ const onNavigate = (dir: NavigateDir) => {
               <td
                 v-t="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"
-                class="text-left pointer nc-grid-add-new-cell"
+                class="text-left pointer nc-grid-add-new-cell cursor-pointer"
                 @click="addEmptyRow()"
               >
                 <div class="px-2 w-full flex items-center text-gray-500">
-                  <MdiPlus class="text-pint-500 text-xs ml-2" />
+                  <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
 
                   <span class="ml-1">
                     {{ $t('activity.addRow') }}
@@ -486,17 +487,32 @@ const onNavigate = (dir: NavigateDir) => {
             </tr>
           </tbody>
         </table>
-        <template v-if="!isLocked" #overlay>
-          <a-menu class="bg-white shadow" @click="contextMenu = false">
-            <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)"
-              ><span class="text-xs">Delete row</span></a-menu-item
-            >
-            <a-menu-item @click="deleteSelectedRows"><span class="text-xs">Delete all selected rows</span></a-menu-item>
-            <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)"
-              ><span class="text-xs">Clear cell</span>
+
+        <template v-if="!isLocked && isUIAllowed('xcDatatableEditable')" #overlay>
+          <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
+            <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)">
+              <div class="nc-project-menu-item">
+                <!-- Delete Row -->
+                {{ $t('activity.deleteRow') }}
+              </div>
+            </a-menu-item>
+
+            <a-menu-item @click="deleteSelectedRows">
+              <div class="nc-project-menu-item">
+                <!-- Delete Selected Rows -->
+                {{ $t('activity.deleteSelectedRow') }}
+              </div>
+            </a-menu-item>
+
+            <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)">
+              <div class="nc-project-menu-item">Clear cell</div>
             </a-menu-item>
+
             <a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)">
-              <span class="text-xs">Insert new row</span>
+              <div class="nc-project-menu-item">
+                <!-- Insert New Row -->
+                {{ $t('activity.insertRow') }}
+              </div>
             </a-menu-item>
           </a-menu>
         </template>
@@ -529,7 +545,7 @@ const onNavigate = (dir: NavigateDir) => {
 
   td:not(:first-child) > div {
     overflow: hidden;
-    @apply flex align-center h-auto px-1;
+    @apply flex items-center h-auto px-1;
   }
 
   table,
@@ -561,7 +577,7 @@ const onNavigate = (dir: NavigateDir) => {
   }
 
   td.active::before {
-    @apply bg-primary/5;
+    @apply bg-primary bg-opacity-5;
   }
 }
 
@@ -619,4 +635,8 @@ const onNavigate = (dir: NavigateDir) => {
     }
   }
 }
+
+tbody tr:hover {
+  @apply bg-gray-100 bg-opacity-50;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index d4470540f9..f219f8dbbb 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -34,7 +34,7 @@ const page = computed({
       show-less-items
       :show-size-changer="false"
     />
-    <div v-else class="mx-auto d-flex align-center mt-n1" style="max-width: 250px">
+    <div v-else class="mx-auto flex items-center mt-n1" style="max-width: 250px">
       <span class="text-xs" style="white-space: nowrap"> Change page:</span>
       <a-input :value="page" size="small" class="ml-1 !text-xs" type="number" @keydown.enter="changePage(page)">
         <template #suffix>
@@ -49,12 +49,14 @@ const page = computed({
 
 <style scoped>
 :deep(.ant-pagination-item a) {
-  @apply text-sm !leading-[21px];
+  @apply text-sm !leading-[21px] !no-underline;
 }
+
 :deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
   line-height: 21px !important;
-  @apply text-sm text-gray-500;
+  @apply text-sm !text-gray-500;
 }
+
 :deep(.ant-pagination-item-link) {
   @apply text-gray-500;
 }
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 7f7a7718e7..01260b88b3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,13 +1,25 @@
 <script setup lang="ts">
 import { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
+import ToggleDrawer from '~/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
-const { allowCSVDownload } = useSharedView()
 const isPublic = inject(IsPublicInj, ref(false))
+const { allowCSVDownload } = useSharedView()
+
+const { isOpen } = useSidebar()
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b" style="z-index: 7">
+  <div
+    class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
+    style="z-index: 7"
+  >
+    <SmartsheetToolbarViewActions
+      v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)"
+      :show-system-fields="false"
+      class="ml-1"
+    />
+
     <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
@@ -16,9 +28,14 @@ const isPublic = inject(IsPublicInj, ref(false))
 
     <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
-    <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
     <div class="flex-1" />
-    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2" />
+
+    <SmartsheetToolbarReload class="mx-1" />
+    <SmartsheetToolbarAddRow class="mx-1" />
+
+    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
+
+    <ToggleDrawer v-if="!isOpen" class="mr-2" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
index 26f8074539..1064a9fc8f 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -24,13 +24,14 @@ watch(
 
 <template>
   <div class="h-full flex flex-col w-full bg-[#eceff1] p-2">
-    <div ref="commentsWrapperEl" class="flex-grow-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2 space-y-2">
+    <div ref="commentsWrapperEl" class="flex-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2 space-y-2">
       <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
 
       <template v-else>
         <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
           <MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
-          <div class="flex-grow">
+
+          <div class="flex-1">
             <p class="mb-1 caption edited-text text-[10px] text-gray-500">
               {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
               {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
@@ -59,7 +60,7 @@ watch(
           ><span class="text-[11px] text-gray-500">Comments only</span>
         </a-checkbox>
       </div>
-      <div class="flex-shrink-1 mt-2 d-flex">
+      <div class="shrink mt-2 flex">
         <a-input
           v-model:value="comment"
           class="!text-xs nc-comment-box"
@@ -70,7 +71,7 @@ watch(
           @keyup.enter.prevent="saveComment"
         >
           <template #addonBefore>
-            <div class="flex align-center">
+            <div class="flex items-center">
               <mdi-account-circle class="text-lg text-pink-300" small @click="saveComment" />
             </div>
           </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
index ec4fe294c5..9fc8063eea 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -35,8 +35,8 @@ const iconColor = '#1890ff'
 </script>
 
 <template>
-  <div class="flex p-2 align-center gap-2 p-4">
-    <h5 class="text-lg font-weight-medium flex align-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate">
+  <div class="flex p-2 items-center gap-2 p-4">
+    <h5 class="text-lg font-weight-medium flex items-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate">
       <mdi-table-arrow-right :style="{ color: iconColor }" />
 
       <template v-if="meta">
@@ -51,16 +51,24 @@ const iconColor = '#1890ff'
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
 
-    <div class="flex-grow" />
-
-    <mdi-reload class="cursor-pointer select-none" />
-
-    <component
-      :is="drawerToggleIcon"
-      v-if="isUIAllowed('rowComments')"
-      class="cursor-pointer select-none nc-toggle-comments"
-      @click="commentsDrawer = !commentsDrawer"
-    />
+    <div class="flex-1" />
+    <a-tooltip placement="bottom">
+      <template #title>
+        <div class="text-center w-full">Reload</div>
+      </template>
+      <mdi-reload class="cursor-pointer select-none" />
+    </a-tooltip>
+    <a-tooltip placement="bottom">
+      <template #title>
+        <div class="text-center w-full">Toggle comments draw</div>
+      </template>
+      <component
+        :is="drawerToggleIcon"
+        v-if="isUIAllowed('rowComments') && !isNew"
+        class="cursor-pointer select-none nc-toggle-comments"
+        @click="commentsDrawer = !commentsDrawer"
+      />
+    </a-tooltip>
 
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index a9f2a74419..4661d8d931 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
-import { isVirtualCol } from 'nocodb-sdk'
+import { isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import Cell from '../Cell.vue'
 import VirtualCell from '../VirtualCell.vue'
@@ -46,14 +46,14 @@ const meta = toRef(props, 'meta')
 
 const fields = computedInject(FieldsInj, (_fields) => {
   if (props.useMetaFields) {
-    return meta.value.columns ?? []
+    return (meta.value.columns ?? []).filter((col) => !isSystemColumn(col))
   }
   return _fields?.value ?? []
 })
 
 provide(MetaInj, meta)
 
-const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
+const { commentsDrawer, changedColumns, state: rowState, isNew } = useProvideExpandedFormStore(meta, row)
 
 const { $api } = useNuxtApp()
 
@@ -109,13 +109,14 @@ export default {
     <Header @cancel="onClose" />
     <div class="!bg-gray-100 rounded">
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
-        <div class="flex-grow overflow-auto scrollbar-thin-primary">
+        <div class="flex-1 overflow-auto scrollbar-thin-primary">
           <div class="w-[500px] mx-auto">
             <div v-for="col of fields" :key="col.title" class="mt-2 py-2" :class="`nc-expand-col-${col.title}`">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+
               <SmartsheetHeaderCell v-else :column="col" />
 
-              <div class="!bg-white rounded px-1 min-h-[35px] flex align-center mt-2">
+              <div class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2">
                 <VirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
 
                 <Cell
@@ -130,7 +131,7 @@ export default {
           </div>
         </div>
 
-        <div class="nc-comments-drawer min-w-0 min-h-full max-h-full" :class="{ active: commentsDrawer }">
+        <div v-if="!isNew" class="nc-comments-drawer min-w-0 min-h-full max-h-full" :class="{ active: commentsDrawer }">
           <div class="h-full">
             <Comments v-if="commentsDrawer" />
           </div>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 53608f516a..7e82bfc530 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
-import { ref, useNuxtApp } from '#imports'
+import { ref } from '#imports'
 import { viewIcons } from '~/utils'
 
 interface Emits {
@@ -9,33 +9,20 @@ interface Emits {
 
 const emits = defineEmits<Emits>()
 
-const { $e } = useNuxtApp()
-
 const { isUIAllowed } = useUIPermission()
 
 const isView = ref(false)
 
-let showApiSnippet = $ref(false)
-
 const showWebhookDrawer = ref(false)
 
-function onApiSnippet() {
-  // get API snippet
-  showApiSnippet = true
-  $e('a:view:api-snippet')
-}
-
-function onWebhooks() {
-  showWebhookDrawer.value = true
-}
-
 function onOpenModal(type: ViewTypes, title = '') {
   emits('openModal', { type, title })
 }
 </script>
 
 <template>
-  <a-menu :selected-keys="[]" class="flex-1 flex flex-col">
+  <a-menu :selected-keys="[]" class="flex flex-col">
+    <div class="flex-1"></div>
     <div v-if="isUIAllowed('virtualViewsCreateOrEdit')">
       <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
         {{ $t('activity.createView') }}
@@ -52,7 +39,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" />
+            <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
 
             <div>{{ $t('objects.viewType.grid') }}</div>
 
@@ -74,7 +61,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" />
+            <component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" />
 
             <div>{{ $t('objects.viewType.gallery') }}</div>
 
@@ -97,7 +84,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" />
+            <component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" />
 
             <div>{{ $t('objects.viewType.form') }}</div>
 
@@ -107,28 +94,13 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
-    </div>
-
-    <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
 
-    <div class="flex-auto justify-end flex flex-col gap-3 mt-3">
-      <button
-        v-if="isUIAllowed('virtualViewsCreateOrEdit')"
-        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs nc-webhook-btn"
-        @click="onWebhooks"
-      >
-        <mdi-hook />{{ $t('objects.webhooks') }}
-      </button>
-
-      <button
-        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
-        @click="onApiSnippet"
-      >
-        <mdi-xml />Get API Snippet
-      </button>
+      <div class="w-full h-4"></div>
     </div>
 
-    <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
+    <!--
+       todo: bring back later
+       <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
       <template #front>
         <div class="flex h-full w-full gap-6 flex-col">
           <general-social />
@@ -148,7 +120,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </template>
 
       <template #back>
-        <!-- todo: add project cost -->
+        &lt;!&ndash; todo: add project cost &ndash;&gt;
         <a
           href="https://github.com/sponsors/nocodb"
           target="_blank"
@@ -159,7 +131,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           {{ $t('activity.sponsorUs') }}
         </a>
       </template>
-    </general-flipping-card>
+    </general-flipping-card> -->
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
   </a-menu>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 1ba2093a0c..de95825c27 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { ViewType, ViewTypes } from 'nocodb-sdk'
+import type { ViewType } from 'nocodb-sdk'
+import { ViewTypes } from 'nocodb-sdk'
 import type { SortableEvent } from 'sortablejs'
 import type { Menu as AntMenu } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
@@ -18,6 +19,12 @@ interface Emits {
 
 const emits = defineEmits<Emits>()
 
+const viewTypeAlias = {
+  [ViewTypes.GRID as any]: 'grid',
+  [ViewTypes.FORM as any]: 'form',
+  [ViewTypes.GALLERY as any]: 'gallery',
+}
+
 const activeView = inject(ActiveViewInj, ref())
 
 const views = inject<Ref<any[]>>(ViewListInj, ref([]))
@@ -137,6 +144,10 @@ onMounted(() => menuRef && initSortable(menuRef.$el))
 /** Navigate to view by changing url param */
 function changeView(view: { id: string; alias?: string; title?: string; type: ViewTypes }) {
   router.push({ params: { viewTitle: view.title || '' } })
+  if (view.type === 1 && selected.value[0] === view.id) {
+    // reload the page if the same form view is clicked
+    router.go(0)
+  }
 }
 
 /** Rename a view */
@@ -170,21 +181,20 @@ function onDeleted() {
 </script>
 
 <template>
-  <h3 class="pt-3 px-3 text-xs text-gray-500 font-semibold">{{ $t('objects.views') }}</h3>
-
-  <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu" :selected-keys="selected">
+  <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected">
     <RenameableMenuItem
-      v-for="view of views"
+      v-for="(view, index) of views"
       :id="view.id"
       :key="view.id"
       :view="view"
       :on-validate="validate"
       class="transition-all ease-in duration-300"
-      :class="[
-        isMarked === view.id ? 'bg-gray-200' : '',
-        route.params.viewTitle && route.params.viewTitle.includes(view.title) ? 'active' : '',
-        `nc-view-item nc-${view.type}-view-item`,
-      ]"
+      :class="{
+        'bg-gray-100': isMarked === view.id,
+        'active':
+          (route.params.viewTitle && route.params.viewTitle === view.title) || (route.params.viewTitle === '' && index === 0),
+        [`nc-view-item nc-${viewTypeAlias[view.type] || view.type}-view-item`]: true,
+      }"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
       @delete="onDelete"
@@ -197,7 +207,7 @@ function onDeleted() {
 
 <style lang="scss">
 .nc-views-menu {
-  @apply flex-1 max-h-[30vh] overflow-y-scroll scrollbar-thin-dull;
+  @apply flex-1 min-h-[100px] overflow-y-scroll scrollbar-thin-dull;
 
   .ghost,
   .ghost > * {
@@ -219,11 +229,11 @@ function onDeleted() {
   }
 
   .sortable-chosen {
-    @apply !bg-primary/25 text-primary;
+    @apply !bg-primary bg-opacity-25 text-primary;
   }
 
   .active {
-    @apply bg-primary/20 text-primary font-medium;
+    @apply bg-primary bg-opacity-25 text-primary font-medium;
   }
 }
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index ba9bfeb33c..5d00d5d02a 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -160,7 +160,7 @@ function onStopEdit() {
         <component
           :is="viewIcons[vModel.type].icon"
           class="nc-view-icon group-hover:hidden"
-          :class="`text-${viewIcons[vModel.type].color}`"
+          :style="{ color: viewIcons[vModel?.type]?.color }"
         />
       </div>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 896ad62a4a..243642228b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
+import type { ViewType, ViewTypes } from 'nocodb-sdk'
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
@@ -81,7 +81,7 @@ function openModal({ type, title = '', copyViewId }: { type: ViewTypes; title: s
 }
 
 /** Handle view creation */
-function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
+function onCreate(view: ViewType) {
   views.value.push(view)
   activeView.value = view
   router.push({ params: { viewTitle: view.title || '' } })
@@ -104,35 +104,12 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
       :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }"
     />
-
-    <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
-      <template #start>
-        <a-tooltip v-if="isUIAllowed('virtualViewsCreateOrEdit')" placement="left">
-          <template #title> {{ $t('objects.webhooks') }}</template>
-
-          <div class="nc-sidebar-right-item hover:after:bg-gray-300 nc-webhook-icon">
-            <MdiHook @click.stop />
-          </div>
-        </a-tooltip>
-
-        <div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="dot" />
-
-        <a-tooltip placement="left">
-          <template #title> Get API Snippet</template>
-
-          <div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
-            <MdiXml class="group-hover:(!text-white)" @click.stop />
-          </div>
-        </a-tooltip>
-
-        <div v-if="!isForm" class="dot" />
-      </template>
-    </Toolbar>
-
-    <div v-if="isOpen" class="flex-1 flex flex-col">
+    <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 
-      <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" />
+      <div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="px-3">
+        <div class="!my-3 w-full border-b-1 border-dashed" />
+      </div>
 
       <MenuBottom @open-modal="openModal" />
     </div>
@@ -156,8 +133,4 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 :deep(.ant-layout-sider-children) {
   @apply flex flex-col;
 }
-
-.dot {
-  @apply w-[3px] h-[3px] bg-gray-300 rounded-full;
-}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
deleted file mode 100644
index a97812e527..0000000000
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { OpenNewRecordFormHookInj, inject } from '#imports'
-
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
-const isLocked = inject(IsLockedInj)
-
-const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)!
-
-const onClick = () => {
-  if (!isLocked?.value) openNewRecordFormHook.trigger()
-}
-</script>
-
-<template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
-    <template #title> {{ $t('activity.addRow') }} </template>
-    <div
-      :class="{ 'hover:after:bg-primary/75 group': !isLocked, 'disabled-ring': isLocked }"
-      class="nc-sidebar-right-item nc-sidebar-add-row"
-    >
-      <MdiPlusOutline :class="{ 'cursor-pointer group-hover:(!text-white)': !isLocked, 'disabled': isLocked }" @click="onClick" />
-    </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
deleted file mode 100644
index e3b4404a7c..0000000000
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts" setup>
-import { message } from 'ant-design-vue'
-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'
-
-enum LockType {
-  Personal = 'personal',
-  Locked = 'locked',
-  Collaborative = 'collaborative',
-}
-
-const { view, $api } = useSmartsheetStoreOrThrow()
-
-const { $e } = useNuxtApp()
-
-async function changeLockType(type: LockType) {
-  $e('a:grid:lockmenu', { lockType: type })
-
-  if (type === 'personal') {
-    return message.info('Coming soon')
-  }
-  try {
-    ;(view.value as any).lock_type = type
-    $api.dbView.update(view.value.id as string, {
-      lock_type: type,
-    })
-
-    message.success(`Successfully Switched to ${type} view`)
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const Icon = computed(() => {
-  switch ((view.value as any)?.lock_type) {
-    case LockType.Personal:
-      return MdiAccountIcon
-    case LockType.Locked:
-      return MdiLockOutlineIcon
-    case LockType.Collaborative:
-    default:
-      return MdiAccountGroupIcon
-  }
-})
-</script>
-
-<template>
-  <a-dropdown max-width="350" :trigger="['click']">
-    <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group nc-sidebar-lock-menu">
-      <Icon class="cursor-pointer group-hover:(!text-white)" />
-    </div>
-
-    <template #overlay>
-      <div class="min-w-[350px] max-w-[500px] shadow bg-white">
-        <div>
-          <div class="nc-menu-item" @click="changeLockType(LockType.Collaborative)">
-            <div>
-              <MdiCheck v-if="!view?.lock_type || view?.lock_type === LockType.Collaborative" />
-              <span v-else />
-              <div>
-                <MdiAccountGroupIcon />
-                Collaborative view
-                <div class="nc-subtitle">Collaborators with edit permissions or higher can change the view configuration.</div>
-              </div>
-            </div>
-          </div>
-          <div class="nc-menu-item" @click="changeLockType(LockType.Locked)">
-            <div>
-              <MdiCheck v-if="view.lock_type === LockType.Locked" />
-              <span v-else />
-              <div>
-                <MdiLockOutlineIcon />
-                Locked View
-                <div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div>
-              </div>
-            </div>
-          </div>
-          <div class="nc-menu-item" @click="changeLockType(LockType.Personal)">
-            <div>
-              <MdiCheck v-if="view.lock_type === LockType.Personal" />
-              <span v-else />
-              <div>
-                <MdiAccountIcon />
-                Personal view
-                <div class="nc-subtitle">
-                  Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </a-dropdown>
-</template>
-
-<style scoped>
-.nc-menu-item > div {
-  @apply grid grid-cols-[30px,auto] gap-2  p-2 align-center;
-}
-
-.nc-menu-item > div > svg {
-  align-self: center;
-}
-
-.nc-menu-option > :first-child {
-  @apply align-self-center;
-}
-
-.nc-subtitle {
-  @apply font-size-sm font-weight-light;
-}
-</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
index d09808f387..25ce4945c6 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@@ -4,15 +4,12 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'" :mouse-enter-delay="0.8">
-    <template #title> Toggle sidebar</template>
-
-    <div class="nc-sidebar-right-item hover:after:bg-primary/75 group nc-sidebar-add-row">
-      <MdiChevronDoubleLeft
-        class="cursor-pointer group-hover:(!text-white) transform transition-transform"
-        :class="{ 'rotate-180': isOpen }"
-        @click="toggle(!isOpen)"
-      />
-    </div>
-  </a-tooltip>
+  <div :class="{ 'nc-active-btn': isOpen }">
+    <a-button size="small" @click="toggle(!isOpen)">
+      <div class="flex items-center gap-1 text-xs" :class="{ 'text-gray-500': !isOpen }">
+        <MdiMenu class="!text-xs" />
+        Views
+      </div>
+    </a-button>
+  </div>
 </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 bcf68ba916..5e9440d2bf 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -1,28 +1,21 @@
 <script lang="ts" setup>
-import AddRow from './AddRow.vue'
-import LockMenu from './LockMenu.vue'
-import Reload from './Reload.vue'
 import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
 import DebugMeta from './DebugMeta.vue'
 import ToggleDrawer from './ToggleDrawer.vue'
 import { IsFormInj } from '#imports'
 
-const { isUIAllowed } = useUIPermission()
-
 const isForm = inject(IsFormInj)
 
 const debug = $ref(false)
 
 const clickCount = $ref(0)
-
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
   <div
     v-if="!isForm"
-    class="flex gap-2"
+    class="flex gap-2 justify-start"
     @click="
       () => {
         clickCount = clickCount + 1
@@ -31,7 +24,8 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
     "
   >
     <slot name="start" />
-
+    <ToggleDrawer />
+    <span></span>
     <template v-if="debug">
       <ExportCache />
 
@@ -46,20 +40,6 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
       <div class="dot" />
     </template>
 
-    <LockMenu v-if="isUIAllowed('view-type')" @click.stop />
-
-    <div v-if="isUIAllowed('view-type')" class="dot" />
-
-    <Reload @click.stop />
-
-    <div class="dot" />
-
-    <AddRow v-if="isUIAllowed('xcDatatableEditable')" @click.stop />
-
-    <div :class="{ 'w-[calc(100%_+_16px)] h-[1px] bg-gray-200 mt-1 -ml-1': !isOpen, 'dot': isOpen }" />
-
-    <ToggleDrawer />
-
     <slot name="end" />
   </div>
   <div v-else>
diff --git a/packages/nc-gui-v2/components/tabs/Auth.vue b/packages/nc-gui-v2/components/tabs/Auth.vue
index 7777451325..bddf636f78 100644
--- a/packages/nc-gui-v2/components/tabs/Auth.vue
+++ b/packages/nc-gui-v2/components/tabs/Auth.vue
@@ -26,7 +26,7 @@ const selectedTab = $computed(() => tabsInfo[selectedTabKey])
 
 <template>
   <div>
-    <a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs mx-6">
+    <a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs !mx-6">
       <a-tab-pane v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
         <template #tab>
           <span>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 245a568b7b..ca045fc415 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -76,7 +76,7 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
 
       <template v-if="meta">
         <div class="flex flex-1 min-h-0">
-          <div v-if="activeView" class="h-full flex-grow min-w-0 min-h-0">
+          <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
             <SmartsheetGrid v-if="isGrid" :ref="el" />
 
             <SmartsheetGallery v-else-if="isGallery" />
@@ -86,7 +86,12 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
         </div>
       </template>
     </div>
-
-    <SmartsheetSidebar v-if="meta" />
+    <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
   </div>
 </template>
+
+<style scoped>
+:deep(.nc-right-sidebar.ant-layout-sider-collapsed) {
+  @apply !w-0 !max-w-0 !min-w-0 overflow-x-hidden;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 0c7d6819e5..ef3620f802 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -700,7 +700,7 @@ onMounted(() => {
 
                 <a-button class="group" @click="addNewColumnRow(table, 'Number')">
                   <div class="flex items-center">
-                    <mdi-numeric class="group-hover:!text-pink-500 flex text-lg" />
+                    <mdi-numeric class="group-hover:!text-accent flex text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -713,7 +713,7 @@ onMounted(() => {
 
                 <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center">
-                    <mdi-alpha-a class="group-hover:!text-pink-500 text-lg" />
+                    <mdi-alpha-a class="group-hover:!text-accent text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -726,7 +726,7 @@ onMounted(() => {
 
                 <a-button class="group" @click="addNewColumnRow(table, 'LongText')">
                   <div class="flex items-center">
-                    <mdi-text class="group-hover:!text-pink-500 text-lg" />
+                    <mdi-text class="group-hover:!text-accent text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -739,7 +739,7 @@ onMounted(() => {
 
                 <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center gap-1">
-                    <mdi-plus class="group-hover:!text-pink-500 text-lg" />
+                    <mdi-plus class="group-hover:!text-accent text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -761,7 +761,7 @@ onMounted(() => {
     @apply bg-white;
   }
   :deep(.template-form-row) > td {
-    @apply pa-0 mb-0;
+    @apply p-0 mb-0;
     .ant-form-item {
       @apply mb-0;
     }
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index b9da198501..5f8b570e1f 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -13,6 +13,7 @@ import {
   ref,
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
+  useUIPermission,
 } from '#imports'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
@@ -31,13 +32,16 @@ const row = inject(RowInj)!
 
 const active = inject(ActiveCellInj)!
 
-const readonly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, false)
 
 const isLocked = inject(IsLockedInj)
 
+const { isUIAllowed } = useUIPermission()
+
 const listItemsDlg = ref(false)
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
+
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
@@ -68,13 +72,16 @@ const unlinkRef = async (rec: Record<string, any>) => {
 </script>
 
 <template>
-  <div class="flex w-full chips-wrapper align-center" :class="{ active }">
-    <div class="chips d-flex align-center flex-grow">
+  <div class="flex w-full chips-wrapper items-center" :class="{ active }">
+    <div class="chips flex items-center flex-1">
       <template v-if="value && relatedTablePrimaryValueProp">
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
-    <div v-if="!readonly || !isLocked" class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
+    <div
+      v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')"
+      class="flex justify-end gap-1 min-h-[30px] items-center"
+    >
       <component
         :is="addIcon"
         class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500) nc-plus"
diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index bc2bda47b4..6482e996e1 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -32,7 +32,7 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
       <span>ERR!</span>
     </a-tooltip>
 
-    <div class="pa-2" @dblclick="showEditFormulaWarningMessage">
+    <div class="p-2" @dblclick="showEditFormulaWarningMessage">
       <div v-if="urls" v-html="urls" />
       <div v-else>{{ result }}</div>
       <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100]">
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 7710c7e4e2..dd04ea45a9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -15,6 +15,7 @@ import {
   ref,
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
+  useUIPermission,
 } from '#imports'
 
 const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
@@ -33,7 +34,7 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const readonly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, false)
 
 const isLocked = inject(IsLockedInj)
 
@@ -41,7 +42,10 @@ const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
+const { isUIAllowed } = useUIPermission()
+
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
+
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
@@ -81,9 +85,9 @@ const unlinkRef = async (rec: Record<string, any>) => {
 </script>
 
 <template>
-  <div class="flex align-center items-center gap-1 w-full chips-wrapper">
+  <div class="flex items-center items-center gap-1 w-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">
+      <div class="chips flex items-center img-container flex-1 hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
           <ItemChip v-for="(cell, i) of cells" :key="i" :item="cell.item" :value="cell.value" @unlink="unlinkRef(cell.item)" />
           <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">
@@ -91,13 +95,13 @@ const unlinkRef = async (rec: Record<string, any>) => {
           </span>
         </template>
       </div>
-      <div v-if="!isLocked" class="flex-grow flex justify-end gap-1 min-h-[30px] align-center">
+      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex justify-end gap-1 min-h-[30px] items-center">
         <MdiArrowExpand
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click="childListDlg = true"
         />
         <MdiPlus
-          v-if="!readonly"
+          v-if="!readOnly"
           class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
           @click="listItemsDlg = true"
         />
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index ea5ec4a5eb..cbc9bdd0ae 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -14,6 +14,7 @@ import {
   ref,
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
+  useUIPermission,
 } from '#imports'
 
 const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
@@ -32,7 +33,7 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const readonly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, false)
 
 const isLocked = inject(IsLockedInj)
 
@@ -40,6 +41,8 @@ const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
+const { isUIAllowed } = useUIPermission()
+
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
@@ -81,9 +84,9 @@ const unlinkRef = async (rec: Record<string, any>) => {
 </script>
 
 <template>
-  <div class="flex align-center gap-1 w-full h-full chips-wrapper">
+  <div class="flex items-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">
+      <div class="chips flex items-center img-container flex-1 hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
           <ItemChip v-for="(cell, i) of cells" :key="i" :item="cell.item" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
@@ -91,14 +94,14 @@ const unlinkRef = async (rec: Record<string, any>) => {
         </template>
       </div>
 
-      <div v-if="!isLocked" class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
+      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex justify-end gap-1 min-h-[30px] items-center">
         <MdiArrowExpand
           class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click="childListDlg = true"
         />
 
         <MdiPlus
-          v-if="!readonly"
+          v-if="!readOnly"
           class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
           @click="listItemsDlg = true"
         />
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 a98f18b660..4cb81f0865 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,5 +1,14 @@
 <script lang="ts" setup>
-import { ActiveCellInj, IsFormInj, ReadonlyInj, defineAsyncComponent, inject, ref, useLTARStoreOrThrow } from '#imports'
+import {
+  ActiveCellInj,
+  IsFormInj,
+  ReadonlyInj,
+  defineAsyncComponent,
+  inject,
+  ref,
+  useLTARStoreOrThrow,
+  useUIPermission,
+} from '#imports'
 
 interface Props {
   value?: string | number | boolean
@@ -14,7 +23,9 @@ const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/ex
 
 const { relatedTableMeta } = useLTARStoreOrThrow()!
 
-const readonly = inject(ReadonlyInj, false)
+const { isUIAllowed } = useUIPermission()
+
+const readOnly = inject(ReadonlyInj, false)
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -33,21 +44,21 @@ export default {
 
 <template>
   <div
-    class="group py-1 px-2 mr-1 my-1 flex align-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
+    class="chip group py-1 px-2 mr-1 my-1 flex items-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
     :class="{ active }"
     @click="expandedFormDlg = true"
   >
     <span class="name">{{ value }}</span>
 
-    <div v-show="active || isForm" v-if="!readonly && !isLocked" class="flex align-center">
+    <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
     <Suspense>
       <ExpandedForm
-        v-if="!readonly && !isLocked && expandedFormDlg"
+        v-if="!readOnly && !isLocked && expandedFormDlg"
         v-model="expandedFormDlg"
-        :row="{ row: item }"
+        :row="{ row: item, rowMeta: {}, oldRow: { ...item } }"
         :meta="relatedTableMeta"
         load-row
         use-meta-fields
@@ -63,6 +74,7 @@ export default {
   .name {
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 }
 </style>
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 7b987eddde..58db09fc73 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -81,26 +81,26 @@ const expandedFormRow = ref()
 </script>
 
 <template>
-  <component :is="container" 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">
+  <component :is="container" v-model:visible="vModel" :footer="null" title="Child list" :body-style="{ padding: 0 }">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
+      <div class="flex mb-4 items-center gap-2 px-12">
         <div class="flex-1" />
 
         <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
         <a-button v-if="!readonly" type="primary" ghost class="!text-xs" size="small" @click="emit('attachRecord')">
-          <div class="flex align-center gap-1">
+          <div class="flex items-center gap-1">
             <MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
             Link to '{{ meta.title }}'
           </div>
         </a-button>
       </div>
       <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
-        <div class="flex-1 overflow-auto min-h-0">
+        <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12">
           <a-card
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
-            class="ma-2 hover:(!bg-gray-200/50 shadow-md)"
+            class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
             @click="
               () => {
                 expandedFormRow = row
@@ -108,12 +108,11 @@ const expandedFormRow = ref()
               }
             "
           >
-            <div class="flex align-center">
-              <div class="flex-grow overflow-hidden min-w-0">
+            <div class="flex items-center">
+              <div class="flex-1 overflow-hidden min-w-0">
                 {{ row[relatedTablePrimaryValueProp] }}
                 <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
-              <div class="flex-1"></div>
               <div v-if="!readonly" class="flex gap-2">
                 <MdiLinkVariantRemove
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
@@ -128,15 +127,18 @@ const expandedFormRow = ref()
             </div>
           </a-card>
         </div>
-        <a-pagination
-          v-if="!isNew && childrenList?.pageInfo"
-          v-model:current="childrenListPagination.page"
-          v-model:page-size="childrenListPagination.size"
-          class="mt-2 mx-auto"
-          size="small"
-          :total="childrenList.pageInfo.totalRows"
-          show-less-items
-        />
+
+        <div class="flex justify-center mt-6">
+          <a-pagination
+            v-if="!isNew && childrenList?.pageInfo"
+            v-model:current="childrenListPagination.page"
+            v-model:page-size="childrenListPagination.size"
+            class="mt-2 mx-auto"
+            size="small"
+            :total="childrenList.pageInfo.totalRows"
+            show-less-items
+          />
+        </div>
       </template>
       <a-empty
         v-else
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 11deb22faa..ab5e7f9ba6 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -97,9 +97,9 @@ const newRowState = computed(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" title="Link Record">
-    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
-      <div class="flex mb-4 align-center gap-2">
+  <a-modal v-model:visible="vModel" :footer="null" title="Link Record" :body-style="{ padding: 0 }">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
+      <div class="flex mb-4 items-center gap-2 px-12">
         <a-input
           v-model:value="childrenExcludedListPagination.query"
           placeholder="Filter query"
@@ -111,11 +111,11 @@ const newRowState = computed(() => {
         <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
-        <div class="flex-1 overflow-auto min-h-0">
+        <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12">
           <a-card
             v-for="(refRow, i) in childrenExcludedList?.list ?? []"
             :key="i"
-            class="ma-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
+            class="!my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
             @click="linkRow(refRow)"
           >
             {{ refRow[relatedTablePrimaryValueProp]
@@ -124,15 +124,17 @@ const newRowState = computed(() => {
             >
           </a-card>
         </div>
-        <a-pagination
-          v-if="childrenExcludedList?.pageInfo"
-          v-model:current="childrenExcludedListPagination.page"
-          v-model:page-size="childrenExcludedListPagination.size"
-          class="mt-2 mx-auto !text-xs"
-          size="small"
-          :total="childrenExcludedList.pageInfo.totalRows"
-          show-less-items
-        />
+        <div class="flex justify-center mt-6">
+          <a-pagination
+            v-if="childrenExcludedList?.pageInfo"
+            v-model:current="childrenExcludedListPagination.page"
+            v-model:page-size="childrenExcludedListPagination.size"
+            class="mt-2 !text-xs"
+            size="small"
+            :total="childrenExcludedList.pageInfo.totalRows"
+            show-less-items
+          />
+        </div>
       </template>
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index ff55fe5b2f..c4ca9eb87c 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -28,17 +28,19 @@ async function editHook(hook: Record<string, any>) {
     :closable="false"
     placement="right"
     width="700px"
-    :body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '50px' }"
+    :body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '0px 0px', overflow: 'hidden' }"
     @keydown.esc="vModel = false"
   >
-    <div>
-      <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
-      <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
-    </div>
-    <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
-      <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
-        🚀 We are Hiring! 🚀
-      </a-button>
-    </div>
+    <a-layout class="">
+      <a-layout-content class="px-10 py-5 scrollbar-thin-primary">
+        <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
+        <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
+      </a-layout-content>
+      <a-layout-footer class="!bg-white flex">
+        <a-button v-t="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
+          🚀 We are Hiring! 🚀
+        </a-button>
+      </a-layout-footer>
+    </a-layout>
   </a-drawer>
 </template>
diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index e1711acff7..9d92a2b0fc 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -383,14 +383,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="mb-4">
-    <div class="float-left mt-2">
-      <div class="flex items-center">
+  <div class="flex">
+    <div class="flex-1">
+      <div class="flex items-center mt-2">
         <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">
+    <div>
       <a-button class="mr-3" size="large" @click="testWebhook">
         <div class="flex items-center">
           <MdiGestureDoubleTap class="mr-2" />
diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index e9f084d5a9..2fbdd8f8b2 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -49,22 +49,18 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-5/6">
-    <div class="mb-4">
+  <div class="">
+    <div class="mb-2">
       <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
       <a-button class="float-right" type="primary" size="large" @click="emit('add')">
         {{ $t('activity.addWebhook') }}
       </a-button>
     </div>
     <a-divider />
-    <div v-if="hooks.length">
-      <a-list
-        item-layout="horizontal"
-        :data-source="hooks"
-        class="cursor-pointer max-h-[75vh] overflow-y-auto scrollbar-thin-primary"
-      >
+    <div v-if="hooks.length" class="">
+      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer scrollbar-thin-primary">
         <template #renderItem="{ item, index }">
-          <a-list-item class="pa-2" @click="emit('edit', item)">
+          <a-list-item class="p-2" @click="emit('edit', item)">
             <a-list-item-meta>
               <template #description>
                 <span class="uppercase"> {{ item.event }} {{ item.operation }}</span>
@@ -93,8 +89,10 @@ onMounted(() => {
         </template>
       </a-list>
     </div>
-    <div v-else class="pa-4 bg-gray-100 text-gray-600">
-      Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
+    <div v-else class="min-h-[75vh]">
+      <div class="p-4 bg-gray-100 text-gray-600">
+        Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index 9c6f6a3010..cea4437711 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -3,6 +3,7 @@ export * from './useDialog'
 export * from './useGlobal'
 export * from './useInjectionState'
 export * from './useSidebar'
+export * from './useTheme'
 export * from './useUIPermission'
 export * from './useAttachment'
 export * from './useColors'
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 9132809a50..eefa9c87ef 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -121,7 +121,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         return obj
       }, {} as Record<string, any>)
 
-      if (row.value.rowMeta.new) {
+      if (row.value.rowMeta?.new) {
         data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
 
         /* todo:
@@ -133,11 +133,12 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
                 }
               }
             } */
-        row.value = {
+
+        Object.assign(row.value, {
           row: data,
           rowMeta: {},
           oldRow: { ...data },
-        }
+        })
 
         /// todo:
         // await this.reload();
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 31cf3e2eb7..90e418c622 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -18,6 +18,14 @@ export function useProject(projectId?: MaybeRef<string>) {
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
 
+  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || '')
+  const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType))
+  const isPg = computed(() => projectBaseType === 'pg')
+  const sqlUi = computed(
+    () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
+  )
+  const isSharedBase = computed(() => projectType === 'base')
+
   async function loadProjectMetaInfo(force?: boolean) {
     if (!projectMetaInfo.value || force) {
       const data = await $api.project.metaGet(project.value.id!, {}, {})
@@ -28,7 +36,17 @@ export function useProject(projectId?: MaybeRef<string>) {
   async function loadProjectRoles() {
     projectRoles.value = {}
 
-    if (project.value.id) {
+    if (isSharedBase.value) {
+      const user = await $api.auth.me(
+        {},
+        {
+          headers: {
+            'xc-shared-base-id': route.params.projectId,
+          },
+        },
+      )
+      projectRoles.value = user.roles
+    } else if (project.value.id) {
       const user = await $api.auth.me({ project_id: project.value.id })
       projectRoles.value = user.roles
     }
@@ -37,8 +55,7 @@ export function useProject(projectId?: MaybeRef<string>) {
   async function loadTables() {
     if (project.value.id) {
       const tablesResponse = await $api.dbTable.list(project.value.id, {
-        // FIXME: type
-        includeM2M: includeM2M.value || '',
+        includeM2M: includeM2M.value,
       })
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
@@ -58,15 +75,6 @@ export function useProject(projectId?: MaybeRef<string>) {
     await loadTables()
   }
 
-  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || '')
-
-  const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType))
-  const isPg = computed(() => projectBaseType === 'pg')
-  const sqlUi = computed(
-    () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
-  )
-  const isSharedBase = computed(() => projectType === 'base')
-
   return {
     project,
     tables,
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 11d355e563..69cfbbf0f3 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -1,10 +1,16 @@
 import { ViewTypes } from 'nocodb-sdk'
-import type { TableType, ViewType } from 'nocodb-sdk'
+import type { FilterType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
-  (view: Ref<ViewType>, meta: Ref<TableType>, shared = false) => {
+  (
+    view: Ref<ViewType>,
+    meta: Ref<TableType>,
+    shared = false,
+    initalSorts?: Ref<SortType[]>,
+    initialFilters?: Ref<FilterType[]>,
+  ) => {
     const { $api } = useNuxtApp()
     const { sqlUi } = useProject()
 
@@ -37,6 +43,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       }
       return where
     })
+    const sorts = initalSorts ?? ref<SortType[]>([])
+    const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])
 
     return {
       view,
@@ -51,6 +59,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       isGallery,
       cellRefs,
       isSharedForm,
+      sorts,
+      nestedFilters,
     }
   },
   'smartsheet-store',
diff --git a/packages/nc-gui-v2/composables/useTable.ts b/packages/nc-gui-v2/composables/useTable.ts
index 63ba8a2ce6..3da3c15639 100644
--- a/packages/nc-gui-v2/composables/useTable.ts
+++ b/packages/nc-gui-v2/composables/useTable.ts
@@ -1,16 +1,15 @@
 import { Modal, message } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { useProject } from './useProject'
-import { TabType } from '~/composables/useTabs'
-import { extractSdkResponseErrorMsg } from '~/utils'
 import { useNuxtApp } from '#app'
+import { TabType } from '~/composables/useTabs'
+import { SYSTEM_COLUMNS, extractSdkResponseErrorMsg, useProject } from '#imports'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const table = reactive<{ title: string; table_name: string; columns: string[] }>({
     title: '',
     table_name: '',
-    columns: ['id', 'title', 'created_at', 'updated_at'],
+    columns: SYSTEM_COLUMNS,
   })
 
   const { $e, $api } = useNuxtApp()
diff --git a/packages/nc-gui-v2/composables/useTheme/index.ts b/packages/nc-gui-v2/composables/useTheme/index.ts
new file mode 100644
index 0000000000..ded242762c
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useTheme/index.ts
@@ -0,0 +1,60 @@
+import { ConfigProvider } from 'ant-design-vue'
+import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
+import { useStorage } from '@vueuse/core'
+import { NOCO, hexToRGB, themeV2Colors, useCssVar, useInjectionState } from '#imports'
+
+interface ThemeConfig extends AntTheme {
+  primaryColor: string
+  accentColor: string
+}
+
+const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
+  const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null)
+  const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null)
+
+  /** current theme config */
+  const currentTheme = useStorage<ThemeConfig>(
+    `${NOCO}db-theme`,
+    {
+      primaryColor: themeV2Colors['royal-blue'].DEFAULT,
+      accentColor: themeV2Colors.pink['500'],
+    },
+    localStorage,
+    { mergeDefaults: true },
+  )
+
+  /** set initial config */
+  setTheme(config ?? currentTheme.value)
+
+  /** set theme (persists in localstorage) */
+  function setTheme(theme: Partial<ThemeConfig>) {
+    // convert hex colors to rgb values
+    if (theme.primaryColor) primaryColor.value = hexToRGB(theme.primaryColor)
+    if (theme.accentColor) accentColor.value = hexToRGB(theme.accentColor)
+
+    currentTheme.value = theme as ThemeConfig
+
+    ConfigProvider.config({
+      theme,
+    })
+  }
+
+  return {
+    theme: currentTheme,
+    setTheme,
+  }
+}, 'theme')
+
+export const provideTheme = setup
+
+export function useTheme(config?: Partial<ThemeConfig>) {
+  const theme = use()
+
+  if (!theme) {
+    return setup(config)
+  } else {
+    if (config) theme.setTheme(config)
+  }
+
+  return theme
+}
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index 9ac28afbe4..48e3caaae6 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -7,7 +7,7 @@ export function useUIPermission() {
 
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
-  const getRoles = (skipPreviewAs = false) => {
+  const baseRoles = computed(() => {
     let userRoles = user.value?.roles || {}
 
     // if string populate key-value paired object
@@ -19,24 +19,24 @@ export function useUIPermission() {
     }
 
     // merge user role and project specific user roles
-    let roles = {
+    const roles = {
       ...userRoles,
       ...projectRoles.value,
     }
 
+    return roles
+  })
+
+  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
+    let roles = baseRoles.value
     if (previewAs.value && !skipPreviewAs) {
       roles = {
         [previewAs.value]: true,
       }
     }
 
-    return roles
-  }
-
-  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    return Object.entries<boolean>(getRoles(skipPreviewAs)).some(([role, hasRole]) => {
+    return Object.entries<boolean>(roles).some(([role, hasRole]) => {
       const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
-
       return hasRole && (rolePermission === '*' || rolePermission?.[permission as Permission])
     })
   }
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 45e7df3f53..830e9651eb 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -8,6 +8,7 @@ import type { Field } from '~/lib'
 
 export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
   const isPublic = inject(IsPublicInj, ref(false))
+
   const fields = ref<Field[]>()
 
   const filterQuery = ref('')
@@ -16,10 +17,13 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
 
   const { isUIAllowed } = useUIPermission()
 
+  const { isSharedBase } = useProject()
+
   const loadViewColumns = async () => {
     if (!meta || !view) return
 
     let order = 1
+
     if (view.value?.id) {
       const data = (isPublic.value ? meta.value?.columns : await $api.dbViewColumn.list(view.value.id)) as any[]
 
@@ -48,7 +52,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
 
   const showAll = async (ignoreIds?: any) => {
-    if (isPublic.value) {
+    if (isPublic.value || isSharedBase.value) {
       fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: true,
@@ -71,7 +75,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     reloadData?.()
   }
   const hideAll = async (ignoreIds?: any) => {
-    if (isPublic.value) {
+    if (isPublic.value || isSharedBase.value) {
       fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: false,
@@ -140,7 +144,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     },
     set(v: boolean) {
       if (view?.value?.id) {
-        if (!isPublic.value) {
+        if (!isPublic.value && !isSharedBase.value) {
           $api.dbView
             .update(view.value.id, {
               show_system_fields: v,
@@ -200,5 +204,6 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     saveOrUpdate,
     sortedAndFilteredFields,
     showSystemFields,
+    metaColumnById,
   }
 }
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 70eac6ceda..a535935065 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -2,7 +2,7 @@ import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType,
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
-import { IsPublicInj, NOCO, extractPkFromRow, extractSdkResponseErrorMsg, useProject } from '#imports'
+import { IsPublicInj, NOCO, extractPkFromRow, extractSdkResponseErrorMsg, useProject, useUIPermission } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -39,9 +39,11 @@ export function useViewData(
   const formattedData = ref<Row[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
-  const { project } = useProject()
+  const { project, isSharedBase } = useProject()
   const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
+  const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
+  const { isUIAllowed } = useUIPermission()
 
   const paginationData = computed({
     get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
@@ -81,8 +83,7 @@ export function useViewData(
 
   /** load row comments count */
   const loadAggCommentsCount = async () => {
-    // todo: handle in public api
-    if (isPublic.value) return
+    if (isPublic.value || isSharedBase.value) return
 
     const ids = formattedData.value
       ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
@@ -90,7 +91,7 @@ export function useViewData(
         return extractPkFromRow(row, meta?.value?.columns as ColumnType[])
       })
 
-    if (!ids?.length) return
+    if (!ids?.length || ids?.some((id) => !id)) return
 
     aggCommentCount.value = await $api.utils.commentCount({
       ids,
@@ -109,6 +110,8 @@ export function useViewData(
     const response = !isPublic.value
       ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
           ...params,
+          ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+          ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
           where: where?.value,
         })
       : await fetchSharedViewData()
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 8a7f27cb86..eb07738131 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,14 +1,15 @@
 import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
+import { message } from 'ant-design-vue'
 import {
   IsPublicInj,
   ReloadViewDataHookInj,
   computed,
+  extractSdkResponseErrorMsg,
   inject,
   ref,
   useMetas,
   useNuxtApp,
-  useSharedView,
   useUIPermission,
   watch,
 } from '#imports'
@@ -19,13 +20,12 @@ export function useViewFilters(
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
-  siblingFilters?: Filter[],
+  currentFilters?: Filter[],
+  isNestedRoot?: boolean,
 ) {
-  const { nestedFilters } = useSharedView()
-
   const reloadHook = inject(ReloadViewDataHookInj)
 
-  const _filters = ref<Filter[]>([])
+  const { nestedFilters } = useSmartsheetStoreOrThrow()
 
   const isPublic = inject(IsPublicInj, ref(false))
 
@@ -34,21 +34,23 @@ export function useViewFilters(
   const { isUIAllowed } = useUIPermission()
 
   const { metas } = useMetas()
+  const _filters = ref<Filter[]>([])
+
+  const nestedMode = computed(() => isPublic.value || !isUIAllowed('filterSync' || !isUIAllowed('filterChildrenRead')))
+
+  const filters = computed<Filter[]>({
+    get: () => (nestedMode.value ? currentFilters! : _filters.value),
+    set: (value: Filter[]) => {
+      if (nestedMode.value) {
+        currentFilters = value
+        if (isNestedRoot) nestedFilters.value = value
 
-  const filters = computed({
-    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value) ?? [],
-    set: (value) => {
-      if (isPublic.value) {
-        if (siblingFilters) {
-          siblingFilters = value
-        } else {
-          nestedFilters.value = value
-        }
         nestedFilters.value = [...nestedFilters.value]
         reloadHook?.trigger()
-      } else {
-        _filters.value = value
+        return
       }
+
+      _filters.value = value
     },
   })
 
@@ -60,55 +62,65 @@ export function useViewFilters(
   }
 
   const loadFilters = async (hookId?: string) => {
-    if (isPublic.value) return
+    if (nestedMode.value) return
 
-    if (hookId) {
-      if (parentId) {
-        filters.value = await $api.dbTableFilter.childrenRead(parentId)
-      } else {
-        filters.value = (await $api.dbTableWebhookFilter.read(hookId as string)) as any
-      }
-    } else {
-      if (parentId) {
-        filters.value = await $api.dbTableFilter.childrenRead(parentId)
+    try {
+      if (hookId) {
+        if (parentId) {
+          filters.value = await $api.dbTableFilter.childrenRead(parentId)
+        } else {
+          filters.value = (await $api.dbTableWebhookFilter.read(hookId as string)) as any
+        }
       } else {
-        filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+        if (parentId) {
+          filters.value = await $api.dbTableFilter.childrenRead(parentId)
+        } else {
+          filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+        }
       }
+    } catch (e: any) {
+      console.log(e)
+      message.error(await extractSdkResponseErrorMsg(e))
     }
   }
 
   const sync = async (hookId?: string, _nested = false) => {
-    for (const [i, filter] of Object.entries(filters.value)) {
-      if (filter.status === 'delete') {
-        await $api.dbTableFilter.delete(filter.id as string)
-      } else if (filter.status === 'update') {
-        await $api.dbTableFilter.update(filter.id as string, {
-          ...filter,
-          fk_parent_id: parentId,
-        })
-      } else if (filter.status === 'create') {
-        if (hookId) {
-          filters.value[+i] = (await $api.dbTableWebhookFilter.create(hookId, {
-            ...filter,
-            fk_parent_id: parentId,
-          })) as any
-        } else {
-          filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+    try {
+      for (const [i, filter] of Object.entries(filters.value)) {
+        if (filter.status === 'delete') {
+          await $api.dbTableFilter.delete(filter.id as string)
+        } else if (filter.status === 'update') {
+          await $api.dbTableFilter.update(filter.id as string, {
             ...filter,
             fk_parent_id: parentId,
-          })) as any
+          })
+        } else if (filter.status === 'create') {
+          if (hookId) {
+            filters.value[+i] = (await $api.dbTableWebhookFilter.create(hookId, {
+              ...filter,
+              fk_parent_id: parentId,
+            })) as any
+          } else {
+            filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+              ...filter,
+              fk_parent_id: parentId,
+            })) as any
+          }
         }
       }
-    }
 
-    reloadData?.()
+      reloadData?.()
+    } catch (e: any) {
+      console.log(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 
   const deleteFilter = async (filter: Filter, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
-    if (isPublic.value || !isUIAllowed('filterSync')) {
+    if (nestedMode.value) {
       filters.value.splice(i, 1)
-
+      filters.value = [...filters.value]
       reloadData?.()
     } else {
       if (filter.id) {
@@ -117,11 +129,16 @@ export function useViewFilters(
           filter.status = 'delete'
           // if auto-apply enabled invoke delete api and remove from array
         } else {
-          await $api.dbTableFilter.delete(filter.id)
+          try {
+            await $api.dbTableFilter.delete(filter.id)
 
-          reloadData?.()
+            reloadData?.()
 
-          filters.value.splice(i, 1)
+            filters.value.splice(i, 1)
+          } catch (e: any) {
+            console.log(e)
+            message.error(await extractSdkResponseErrorMsg(e))
+          }
         }
         // if not synced yet remove it from array
       } else {
@@ -131,30 +148,29 @@ export function useViewFilters(
   }
 
   const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
-    if (isPublic.value) {
-      filters.value[i] = { ...filter }
-
-      filters.value = [...filters.value]
-
-      return
-    }
     if (!view?.value) return
 
-    if (!isUIAllowed('filterSync')) {
-      // skip
-    } else if (!autoApply?.value && !force) {
-      filter.status = filter.id ? 'update' : 'create'
-    } else if (filter.id) {
-      await $api.dbTableFilter.update(filter.id, {
-        ...filter,
-        fk_parent_id: parentId,
-      })
-    } else {
-      // todo: return type of dbTableFilter is void?
-      filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
-        ...filter,
-        fk_parent_id: parentId,
-      })) as any
+    try {
+      if (nestedMode.value) {
+        filters.value[i] = { ...filter }
+        filters.value = [...filters.value]
+      } else if (!autoApply?.value && !force) {
+        filter.status = filter.id ? 'update' : 'create'
+      } else if (filter.id) {
+        await $api.dbTableFilter.update(filter.id, {
+          ...filter,
+          fk_parent_id: parentId,
+        })
+      } else {
+        // todo: return type of dbTableFilter is void?
+        filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+          ...filter,
+          fk_parent_id: parentId,
+        })) as any
+      }
+    } catch (e: any) {
+      console.log(e)
+      message.error(await extractSdkResponseErrorMsg(e))
     }
 
     reloadData?.()
@@ -170,7 +186,7 @@ export function useViewFilters(
       logical_op: 'and',
     }
 
-    if (isPublic.value) placeHolderGroupFilter.children = [child]
+    if (nestedMode.value) placeHolderGroupFilter.children = [child]
 
     filters.value.push(placeHolderGroupFilter)
 
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index b6a3fa6bc0..044b181d41 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -1,32 +1,23 @@
 import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { IsPublicInj, ReloadViewDataHookInj, useNuxtApp } from '#imports'
+import { message } from 'ant-design-vue'
+import { IsPublicInj, ReloadViewDataHookInj, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
 
 export function useViewSorts(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   reloadData?: () => void,
 ) {
-  const _sorts = ref<SortType[]>([])
-  const { sorts: sharedViewSorts, sharedView } = useSharedView()
+  const { sharedView } = useSharedView()
+  const { sorts } = useSmartsheetStoreOrThrow()
 
   const reloadHook = inject(ReloadViewDataHookInj)
-  const isPublic = inject(IsPublicInj, ref(false))
 
-  const sorts = computed<SortType[]>({
-    get: () => (isPublic.value ? sharedViewSorts.value : _sorts.value),
-    set: (value) => {
-      if (isPublic.value) {
-        sharedViewSorts.value = value
-      } else {
-        _sorts.value = value
-      }
-      reloadHook?.trigger()
-    },
-  })
+  const isPublic = inject(IsPublicInj, ref(false))
 
   const { $api } = useNuxtApp()
 
   const { isUIAllowed } = useUIPermission()
+  const { isSharedBase } = useProject()
 
   const loadSorts = async () => {
     if (isPublic.value) {
@@ -34,27 +25,36 @@ export function useViewSorts(
       sorts.value = [...sharedSorts]
       return
     }
-    if (!view?.value) return
-    sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
+
+    try {
+      if (!view?.value) return
+      sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
+    } catch (e: any) {
+      console.error(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 
   const saveOrUpdate = async (sort: SortType, i: number) => {
-    // TODO:
-    // if (!this.shared && this._isUIAllowed('sortSync')) {
-    if (isPublic.value) {
+    if (isPublic.value || isSharedBase.value) {
       sorts.value[i] = sort
       sorts.value = [...sorts.value]
       return
     }
 
-    if (isUIAllowed('sortSync')) {
-      if (sort.id) {
-        await $api.dbTableSort.update(sort.id, sort)
-      } else {
-        sorts.value[i] = (await $api.dbTableSort.create(view?.value?.id as string, sort)) as any
+    try {
+      if (isUIAllowed('sortSync')) {
+        if (sort.id) {
+          await $api.dbTableSort.update(sort.id, sort)
+        } else {
+          sorts.value[i] = (await $api.dbTableSort.create(view?.value?.id as string, sort)) as any
+        }
       }
+      reloadData?.()
+    } catch (e: any) {
+      console.error(e)
+      message.error(await extractSdkResponseErrorMsg(e))
     }
-    reloadData?.()
   }
   const addSort = () => {
     sorts.value = [
@@ -66,14 +66,21 @@ export function useViewSorts(
   }
 
   const deleteSort = async (sort: SortType, i: number) => {
-    // TOOD:
-    // if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
-
-    if (isUIAllowed('sortSync') && sort.id && !isPublic.value) {
-      await $api.dbTableSort.delete(sort.id)
+    try {
+      if (isUIAllowed('sortSync') && sort.id && !isPublic.value && !isSharedBase.value) {
+        await $api.dbTableSort.delete(sort.id)
+      }
+      sorts.value.splice(i, 1)
+      sorts.value = [...sorts.value]
+    } catch (e: any) {
+      console.error(e)
+      message.error(await extractSdkResponseErrorMsg(e))
     }
-    sorts.value.splice(i, 1)
-    sorts.value = [...sorts.value]
   }
+
+  watch(sorts, () => {
+    reloadHook?.trigger()
+  })
+
   return { sorts, loadSorts, addSort, deleteSort, saveOrUpdate }
 }
diff --git a/packages/nc-gui-v2/lang/nl.json b/packages/nc-gui-v2/lang/nl.json
index 14eca36408..94ada0dbfa 100644
--- a/packages/nc-gui-v2/lang/nl.json
+++ b/packages/nc-gui-v2/lang/nl.json
@@ -447,7 +447,7 @@
       "importZip": "Import project meta zip-bestand en start opnieuw op.",
       "importText": "Import NocoDB-project door het uploaden van het metadata zip-bestand",
       "metaNoChange": "Geen verandering gevonden",
-      "sqlMigration": "Schema-migraties worden automatisch gemaakt. Maak een tabel en vernieuw deze pagina.",
+      "sqlMigration": "Schem-migraties worden automatisch gemaakt. Maak een tabel en vernieuw deze pagina.",
       "dbConnectionStatus": "Omgeving gevalideerd",
       "dbConnected": "Succesvolle verbinding",
       "notifications": {
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index cf74c2a025..d1d3a55cc0 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { navigateTo } from '#app'
-import { computed, useGlobal, useRoute } from '#imports'
+import { computed, navigateTo, ref, useGlobal, useNuxtApp, useProject, useRoute } from '#imports'
 
 const { signOut, signedIn, isLoading, user } = useGlobal()
 
@@ -10,85 +9,96 @@ const route = useRoute()
 
 const email = computed(() => user.value?.email ?? '---')
 
+const hasSider = ref(false)
+
+const sidebar = ref<HTMLDivElement>()
+
 const logout = () => {
   signOut()
   navigateTo('/signin')
 }
+
+const { hooks } = useNuxtApp()
+
+/** when page suspensions have finished, check if a sidebar element was teleported into the layout */
+hooks.hook('page:finish', () => {
+  if (sidebar.value) {
+    hasSider.value = sidebar.value?.children.length > 0
+  }
+})
 </script>
 
 <template>
   <a-layout id="nc-app" has-sider>
-    <div id="nc-sidebar-left" />
+    <Transition name="slide">
+      <div v-show="hasSider" id="nc-sidebar-left" ref="sidebar" />
+    </Transition>
 
     <a-layout class="!flex-col">
-      <Transition name="layout">
-        <a-layout-header
-          v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
-          class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
+      <a-layout-header
+        v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
+        class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
+      >
+        <div
+          v-if="route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'"
+          class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
+          @click="navigateTo('/')"
         >
-          <div
-            v-if="
-              route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
-            "
-            class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
-            @click="navigateTo('/')"
-          >
-            <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-          </div>
+          <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') }}
+        <div class="!text-white 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>
+            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
           </div>
+        </div>
 
-          <div class="flex-1" />
-
-          <GeneralReleaseInfo />
+        <div class="flex-1" />
 
-          <GeneralShareBaseButton />
+        <GeneralReleaseInfo />
 
-          <a-tooltip placement="bottom" :mouse-enter-delay="1">
-            <template #title> Switch language</template>
+        <GeneralShareBaseButton v-if="!isSharedBase" />
 
-            <div class="flex pr-4 items-center">
-              <GeneralLanguage class="cursor-pointer text-2xl hover:text-pink-500" />
-            </div>
-          </a-tooltip>
+        <a-tooltip placement="bottom" :mouse-enter-delay="1">
+          <template #title> Switch language</template>
 
-          <template v-if="signedIn && !isSharedBase">
-            <a-dropdown :trigger="['click']">
-              <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-pink-500 nc-menu-accounts" @click.prevent />
-
-              <template #overlay>
-                <a-menu class="!py-0 dark:(!bg-gray-800) leading-8 !rounded">
-                  <a-menu-item key="0" class="!rounded-t">
-                    <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
-                      <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
-
-                      <span class="prose group-hover:text-primary"> {{ email }}</span>
-                    </nuxt-link>
-                  </a-menu-item>
-
-                  <a-menu-divider class="!m-0" />
-
-                  <a-menu-item key="1" class="!rounded-b group">
-                    <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
-                      <MdiLogout class="group-hover:text-pink-500" />&nbsp;
-
-                      <span class="prose group-hover:text-primary">
-                        {{ $t('general.signOut') }}
-                      </span>
-                    </div>
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </template>
-        </a-layout-header>
-      </Transition>
+          <div class="flex pr-4 items-center text-white">
+            <GeneralLanguage class="cursor-pointer text-2xl hover:text-accent" />
+          </div>
+        </a-tooltip>
+
+        <template v-if="signedIn && !isSharedBase">
+          <a-dropdown :trigger="['click']">
+            <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white" @click.prevent />
+
+            <template #overlay>
+              <a-menu class="!py-0 leading-8 !rounded">
+                <a-menu-item key="0" class="!rounded-t">
+                  <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
+                    <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
+
+                    <span class="prose group-hover:text-primary"> {{ email }}</span>
+                  </nuxt-link>
+                </a-menu-item>
+
+                <a-menu-divider class="!m-0" />
+
+                <a-menu-item key="1" class="!rounded-b group">
+                  <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                    <MdiLogout class="group-hover:text-accent" />&nbsp;
+
+                    <span class="prose group-hover:text-primary">
+                      {{ $t('general.signOut') }}
+                    </span>
+                  </div>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </template>
+      </a-layout-header>
 
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>
@@ -109,7 +119,7 @@ const logout = () => {
 
 <style lang="scss" scoped>
 .nc-lang-btn {
-  @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-pink-500) hover:(ring ring-pink-500);
+  @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-accent) hover:(ring ring-accent);
 
   &::after {
     @apply rounded-full absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
@@ -118,11 +128,11 @@ const logout = () => {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-pink-500;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
-    @apply ring ring-pink-500;
+    @apply ring ring-accent;
   }
 }
 </style>
diff --git a/packages/nc-gui-v2/layouts/default.vue b/packages/nc-gui-v2/layouts/default.vue
index dce2aae15c..0b68f61af8 100644
--- a/packages/nc-gui-v2/layouts/default.vue
+++ b/packages/nc-gui-v2/layouts/default.vue
@@ -13,15 +13,15 @@ useHead({
 
 <script lang="ts">
 export default {
-  name: 'Default',
+  name: 'DefaultLayout',
 }
 </script>
 
 <template>
   <div class="w-full h-full">
-    <teleport v-if="$slots.sidebar" to="#nc-sidebar-left">
+    <Teleport to="#nc-sidebar-left">
       <slot name="sidebar" />
-    </teleport>
+    </Teleport>
 
     <a-layout-content>
       <slot />
diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
index edd38499c3..60141394c8 100644
--- a/packages/nc-gui-v2/layouts/shared-view.vue
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -25,7 +25,7 @@ export default {
 
                 <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
               </template>
-              <div v-else class="text-xl font-semibold truncate">
+              <div v-else class="text-xl font-semibold truncate text-white">
                 {{ sharedView?.title }}
               </div>
             </div>
diff --git a/packages/nc-gui-v2/lib/constants.ts b/packages/nc-gui-v2/lib/constants.ts
index 21806b0541..7b6465b2aa 100644
--- a/packages/nc-gui-v2/lib/constants.ts
+++ b/packages/nc-gui-v2/lib/constants.ts
@@ -1,2 +1,3 @@
 export const NOCO = 'noco'
 export const USER_PROJECT_ROLES = 'user_project_roles'
+export const SYSTEM_COLUMNS = ['id', 'title', 'created_at', 'updated_at']
diff --git a/packages/nc-gui-v2/lib/enums.ts b/packages/nc-gui-v2/lib/enums.ts
index bbe6239fe2..8bd979b8ce 100644
--- a/packages/nc-gui-v2/lib/enums.ts
+++ b/packages/nc-gui-v2/lib/enums.ts
@@ -54,3 +54,9 @@ export enum NavigateDir {
   NEXT,
   PREV,
 }
+
+export enum LockType {
+  Personal = 'personal',
+  Locked = 'locked',
+  Collaborative = 'collaborative',
+}
diff --git a/packages/nc-gui-v2/middleware/auth.global.ts b/packages/nc-gui-v2/middleware/auth.global.ts
index 8c85c53571..d5f35e2317 100644
--- a/packages/nc-gui-v2/middleware/auth.global.ts
+++ b/packages/nc-gui-v2/middleware/auth.global.ts
@@ -1,5 +1,6 @@
+import { message } from 'ant-design-vue'
 import { defineNuxtRouteMiddleware, navigateTo } from '#app'
-import { useGlobal } from '#imports'
+import { useApi, useGlobal } from '#imports'
 
 /**
  * Global auth middleware
@@ -10,7 +11,19 @@ import { useGlobal } from '#imports'
  * the user is redirected to the home page.
  *
  * By default, we assume that auth is required
- * If not required, mark the page as `requiresAuth: false` using `definePageMeta`
+ * If not required, mark the page as
+ * ```
+ * definePageMeta({
+ *   requiresAuth: false
+ * })
+ * ```
+ *
+ * If auth should be circumvented completely mark the page as public
+ * ```
+ * definePageMeta({
+ *   public: true
+ * })
+ * ```
  *
  * @example
  * ```
@@ -20,19 +33,25 @@ import { useGlobal } from '#imports'
  *  })
  * ```
  */
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware(async (to, from) => {
   const state = useGlobal()
 
-  /** if public allow */
+  /** if user isn't signed in and google auth is enabled, try to check if sign-in data is present */
+  if (!state.signedIn && state.appInfo.value.googleAuthEnabled) await tryGoogleAuth()
+
+  /** if public allow all visitors */
   if (to.meta.public) return
 
-  /** if shred base allow without validating */
+  /** if shared base allow without validating */
   if (to.params?.projectType === 'base') return
 
-  if (to.meta.public) return
-
   /** if auth is required or unspecified (same as required) and user is not signed in, redirect to signin page */
   if ((to.meta.requiresAuth || typeof to.meta.requiresAuth === 'undefined') && !state.signedIn.value) {
+    /** If this is the first usern navigate to signup page directly */
+    if (state.appInfo.value.firstUser) {
+      return navigateTo('/signup')
+    }
+
     return navigateTo('/signin')
   } else if (to.meta.requiresAuth === false && state.signedIn.value) {
     /**
@@ -48,3 +67,31 @@ export default defineNuxtRouteMiddleware((to, from) => {
     }
   }
 })
+
+/**
+ * If present, try using google auth data to sign user in before navigating to the next page
+ */
+async function tryGoogleAuth() {
+  const { signIn } = useGlobal()
+
+  const { api } = useApi()
+
+  if (window.location.search && /\bscope=|\bstate=/.test(window.location.search) && /\bcode=/.test(window.location.search)) {
+    try {
+      const {
+        data: { token },
+      } = await api.instance.post(
+        `/auth/${window.location.search.includes('state=github') ? 'github' : 'google'}/genTokenByCode${window.location.search}`,
+      )
+
+      signIn(token)
+    } catch (e: any) {
+      if (e.response && e.response.data && e.response.data.msg) {
+        message.error({ content: e.response.data.msg })
+      }
+    }
+
+    const newURL = window.location.href.split('?')[0]
+    window.history.pushState('object', document.title, newURL)
+  }
+}
diff --git a/packages/nc-gui-v2/nuxt-shim.d.ts b/packages/nc-gui-v2/nuxt-shim.d.ts
index 3f6e83f8df..0aa87c529e 100644
--- a/packages/nc-gui-v2/nuxt-shim.d.ts
+++ b/packages/nc-gui-v2/nuxt-shim.d.ts
@@ -29,5 +29,6 @@ declare module 'vue-router' {
   interface RouteMeta {
     requiresAuth?: boolean
     public?: boolean
+    hideHeader?: boolean
   }
 }
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index da1f361f7a..2cfb564a8b 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -6,7 +6,6 @@ import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor'
-import { themeColors } from './utils/colorsUtils'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
@@ -17,11 +16,9 @@ export default defineNuxtConfig({
   css: [
     'virtual:windi.css',
     'virtual:windi-devtools',
-    'vuetify/lib/styles/main.sass',
     '~/assets/style/fonts.css',
     '~/assets/css/global.css',
-    '~/assets/style.css',
-    '~/assets/style-v2.scss',
+    '~/assets/style.scss',
   ],
 
   meta: {
@@ -55,14 +52,6 @@ export default defineNuxtConfig({
         external: 'httpsnippet',
       },
     },
-    css: {
-      preprocessorOptions: {
-        less: {
-          modifyVars: { 'primary-color': themeColors.primary, 'text-color': 'rgba(61, 61, 61, 1)' },
-          javascriptEnabled: true,
-        },
-      },
-    },
     plugins: [
       vueI18n({
         include: path.resolve(__dirname, './lang'),
@@ -76,7 +65,8 @@ export default defineNuxtConfig({
       Components({
         resolvers: [
           AntDesignVueResolver({
-            importStyle: 'less',
+            importStyle: false,
+            resolveIcons: false,
           }),
           IconsResolver({
             prefix: false,
@@ -108,4 +98,13 @@ export default defineNuxtConfig({
     dirs: ['./context', './utils', './lib'],
     imports: [{ name: 'useI18n', from: 'vue-i18n' }],
   },
+
+  pageTransition: {
+    name: 'page',
+    mode: 'out-in',
+  },
+  layoutTransition: {
+    name: 'layout',
+    mode: 'out-in',
+  },
 })
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 311c840305..93cc11aef9 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -10,7 +10,7 @@
         "@vuelidate/validators": "^2.0.0-alpha.31",
         "@vueuse/core": "^9.0.2",
         "@vueuse/integrations": "^9.0.2",
-        "ant-design-vue": "^3.2.10",
+        "ant-design-vue": "^3.2.11",
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "jsep": "^1.3.6",
@@ -27,7 +27,6 @@
         "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.1.10",
         "vuedraggable": "^4.1.0",
-        "vuetify": "^3.0.0-alpha.13",
         "xlsx": "^0.17.3"
       },
       "devDependencies": {
@@ -37,6 +36,7 @@
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/eva": "^1.1.2",
         "@iconify-json/ic": "^1.1.7",
+        "@iconify-json/logos": "^1.1.14",
         "@iconify-json/lucide": "^1.1.36",
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
@@ -60,13 +60,12 @@
         "eslint-plugin-prettier": "^4.0.0",
         "happy-dom": "^6.0.3",
         "httpsnippet": "^2.0.0",
-        "less": "^4.1.3",
         "nuxt": "3.0.0-rc.4",
         "nuxt-windicss": "^2.5.0",
         "prettier": "^2.7.1",
         "sass": "^1.53.0",
         "unplugin-icons": "^0.14.7",
-        "unplugin-vue-components": "^0.21.1",
+        "unplugin-vue-components": "^0.22.4",
         "vite-plugin-monaco-editor": "^1.1.0",
         "vitest": "^0.18.0",
         "windicss": "^3.5.6"
@@ -932,7 +931,7 @@
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schem-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -956,9 +955,9 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+    "node_modules/@eslint/eslintrc/node_modules/json-schem-traverse": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true,
       "peer": true
@@ -993,7 +992,7 @@
     },
     "node_modules/@humanwhocodes/object-schema": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schem-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true,
       "peer": true
@@ -1043,6 +1042,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/logos": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.1.14.tgz",
+      "integrity": "sha512-SvSxKubQbP/7Wdb3loShUeRGv82ejkNo5gjzvJzQeauntuU4aZjDrx0mnkhFZgNYd3li/mxvzPn79Xc5SGVliw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/lucide": {
       "version": "1.1.38",
       "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.38.tgz",
@@ -1717,7 +1725,7 @@
     },
     "node_modules/@nuxt/schema": {
       "version": "3.0.0-rc.6",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.6.tgz",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schem-3.0.0-rc.6.tgz",
       "integrity": "sha512-BcD5YtWRhn+jU2DlzuI1TeITFeOt5x6qm2KeaU/d5jzJ0oZDzmZwKsAimLtRbHwyU6/kKa+zFbK6pp5obm1XLg==",
       "dev": true,
       "dependencies": {
@@ -2366,7 +2374,7 @@
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schem-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
@@ -2960,20 +2968,6 @@
         }
       }
     },
-    "node_modules/@vuetify/loader-shared": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.5.0.tgz",
-      "integrity": "sha512-Sc+CUZGtQfMLmXXdZ3fvYWkDwMm5zYvYgsAPWsvXNokCeE7WhNA/IETFMThfF8Nf9mnf+zX9+jdtVhKND3hBkQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "find-cache-dir": "^3.3.2",
-        "upath": "^2.0.1"
-      },
-      "peerDependencies": {
-        "vuetify": "^3.0.0-beta.4"
-      }
-    },
     "node_modules/@vueuse/core": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.0.2.tgz",
@@ -3447,9 +3441,9 @@
       "dev": true
     },
     "node_modules/acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -3549,7 +3543,7 @@
       "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
+        "json-schem-traverse": "^1.0.0",
         "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
@@ -3598,9 +3592,9 @@
       }
     },
     "node_modules/ant-design-vue": {
-      "version": "3.2.10",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.2.10.tgz",
-      "integrity": "sha512-aqa0kjJzVQ74MfVw5w7rTOdJQL2JN9V/O6Ro+VQQMq/tY7q91JiomhI9TRKAK3tFdBDXJpUoBCVOsosbbxMzRw==",
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.2.11.tgz",
+      "integrity": "sha512-QKCAcOY5EJF0PepiVGA4X5PzUetYUvG5qALmA+2TON40pc2+brOEiVTwr3kjF9N+f7q4MpyiLPu4pIErwoajOQ==",
       "dependencies": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons-vue": "^6.1.0",
@@ -4703,7 +4697,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/compress-commons": {
       "version": "4.1.1",
@@ -4832,6 +4826,8 @@
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
       "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "is-what": "^3.14.1"
       },
@@ -5744,7 +5740,7 @@
       "version": "0.14.47",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.47.tgz",
       "integrity": "sha512-wI4ZiIfFxpkuxB8ju4MHrGwGLyp1+awEHAHVpx6w7a+1pmYIq8T9FGEVVwFo0iFierDoMj++Xq69GXWYn2EiwA==",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -6775,7 +6771,7 @@
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schem-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -6866,9 +6862,9 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/json-schema-traverse": {
+    "node_modules/eslint/node_modules/json-schem-traverse": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true,
       "peer": true
@@ -6902,7 +6898,7 @@
     },
     "node_modules/esprima": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprim-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true,
       "optional": true,
@@ -7284,24 +7280,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
-      }
-    },
     "node_modules/find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -7507,7 +7485,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
@@ -7858,7 +7836,7 @@
     },
     "node_modules/har-schema": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schem-2.0.0.tgz",
       "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
       "dev": true,
       "engines": {
@@ -7887,7 +7865,7 @@
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schem-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -7895,9 +7873,9 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/har-validator/node_modules/json-schema-traverse": {
+    "node_modules/har-validator/node_modules/json-schem-traverse": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
@@ -7905,7 +7883,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -8410,6 +8388,7 @@
       "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "bin": {
         "image-size": "bin/image-size.js"
       },
@@ -8705,7 +8684,7 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
       "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -9009,7 +8988,9 @@
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
       "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/is-wsl": {
       "version": "2.2.0",
@@ -9213,9 +9194,9 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
-    "node_modules/json-schema-traverse": {
+    "node_modules/json-schem-traverse": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
@@ -9364,6 +9345,8 @@
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
       "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -9391,6 +9374,7 @@
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -9405,6 +9389,7 @@
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "bin": {
         "mime": "cli.js"
       },
@@ -9418,6 +9403,7 @@
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -9428,6 +9414,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -9438,6 +9425,7 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9737,7 +9725,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -9752,7 +9740,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -10104,6 +10092,7 @@
       "integrity": "sha512-gCE9weDhjVGCRqS8dwDR/D3GTAeyXLXuqp7I8EzH6DllZGXSUyxuqqLh+YX9rMAWaaTFyVAg6rHGL25dqvczKw==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "debug": "^3.2.6",
         "iconv-lite": "^0.6.3",
@@ -10122,6 +10111,7 @@
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "ms": "^2.1.1"
       }
@@ -10132,6 +10122,7 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -10971,6 +10962,8 @@
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
       "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 0.10"
       }
@@ -11091,7 +11084,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -11179,95 +11172,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/pkg-types": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-0.3.3.tgz",
@@ -12360,7 +12264,7 @@
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
       "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
@@ -12424,7 +12328,7 @@
       "version": "2.75.7",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
       "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -12570,7 +12474,8 @@
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true,
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/saxes": {
       "version": "6.0.0",
@@ -12586,9 +12491,9 @@
         "node": ">=v12.22.7"
       }
     },
-    "node_modules/schema-utils": {
+    "node_modules/schem-utils": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/schem-utils/-/schem-utils-3.1.1.tgz",
       "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
       "dev": true,
       "optional": true,
@@ -12606,7 +12511,7 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/schema-utils/node_modules/ajv": {
+    "node_modules/schem-utils/node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
@@ -12616,7 +12521,7 @@
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schem-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -12624,7 +12529,7 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/schema-utils/node_modules/ajv-keywords": {
+    "node_modules/schem-utils/node_modules/ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
@@ -12635,9 +12540,9 @@
         "ajv": "^6.9.1"
       }
     },
-    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+    "node_modules/schem-utils/node_modules/json-schem-traverse": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true,
       "optional": true,
@@ -13348,7 +13253,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -13549,7 +13454,7 @@
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.7",
         "jest-worker": "^27.4.5",
-        "schema-utils": "^3.1.1",
+        "schem-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
         "terser": "^5.7.2"
       },
@@ -14118,9 +14023,9 @@
       }
     },
     "node_modules/unplugin-vue-components": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.21.1.tgz",
-      "integrity": "sha512-8MhIT323q1EUu7rz6NfQeiHqDrZKtygy6s9jzcQAuuZUM2T38SHlPT5YJjBOZmM0Bau6YuNTKfBBX4iHzeusaQ==",
+      "version": "0.22.4",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.22.4.tgz",
+      "integrity": "sha512-2rRZcM9OnJGXnYxQNfaceEYuPeVACcWySIjy8WBwIiN3onr980TmA3XE5pRJFt8zoQrUA+c46oyIq96noLqrEQ==",
       "dev": true,
       "dependencies": {
         "@antfu/utils": "^0.5.2",
@@ -14128,11 +14033,11 @@
         "chokidar": "^3.5.3",
         "debug": "^4.3.4",
         "fast-glob": "^3.2.11",
-        "local-pkg": "^0.4.1",
+        "local-pkg": "^0.4.2",
         "magic-string": "^0.26.2",
         "minimatch": "^5.1.0",
         "resolve": "^1.22.1",
-        "unplugin": "^0.7.1"
+        "unplugin": "^0.9.0"
       },
       "engines": {
         "node": ">=14"
@@ -14172,12 +14077,12 @@
       }
     },
     "node_modules/unplugin-vue-components/node_modules/unplugin": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
-      "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.9.3.tgz",
+      "integrity": "sha512-GWXxizZG+tobNs8fuGTCeilerkkfZTZax2iivuE4pxLaF9wTnPJHOq8tbLKDb5ohVb+2BXNjrU9xx59yWTUnuw==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.7.1",
+        "acorn": "^8.8.0",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.4.4"
@@ -14233,17 +14138,6 @@
         "scule": "^0.2.1"
       }
     },
-    "node_modules/upath": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
-      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4",
-        "yarn": "*"
-      }
-    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -14289,7 +14183,7 @@
       "version": "2.9.12",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.12.tgz",
       "integrity": "sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "esbuild": "^0.14.27",
         "postcss": "^8.4.13",
@@ -14413,24 +14307,6 @@
         "monaco-editor": ">=0.33.0"
       }
     },
-    "node_modules/vite-plugin-vuetify": {
-      "version": "1.0.0-alpha.12",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.0-alpha.12.tgz",
-      "integrity": "sha512-DMb7oY6F67P1RTEU28xQePUnyZdm+sbeGgIF3exBrA5yLL8NKKPIahqJN4+MAWMXCJVwNKy7nsS6zVgOLtcoQg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@vuetify/loader-shared": "^1.5.0",
-        "debug": "^4.3.3"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "vite": "^2.7.0",
-        "vuetify": "^3.0.0-beta.4"
-      }
-    },
     "node_modules/vite-plugin-windicss": {
       "version": "1.8.7",
       "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.7.tgz",
@@ -14710,39 +14586,6 @@
       "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
       "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
     },
-    "node_modules/vuetify": {
-      "version": "3.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz",
-      "integrity": "sha512-mU+pO5ZAZOR2Z7eVBoPwZw6nePxT5Sdqpsa4++Q99TwVxXQ7jl76Cy97v72MkDYWfxjDjj8XvW6IqNPGrJpU8w==",
-      "engines": {
-        "node": "^12.20 || >=14.13"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/johnleider"
-      },
-      "peerDependencies": {
-        "@formatjs/intl": "^1.0.0 || ^2.0.0",
-        "vite-plugin-vuetify": "1.0.0-alpha.12",
-        "vue": "^3.2.0",
-        "vue-i18n": "^9.0.0",
-        "webpack-plugin-vuetify": "2.0.0-alpha.11"
-      },
-      "peerDependenciesMeta": {
-        "@formatjs/intl": {
-          "optional": true
-        },
-        "vite-plugin-vuetify": {
-          "optional": true
-        },
-        "vue-i18n": {
-          "optional": true
-        },
-        "webpack-plugin-vuetify": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -14842,7 +14685,7 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.0",
+        "schem-utils": "^3.1.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.1.3",
         "watchpack": "^2.3.1",
@@ -15926,7 +15769,7 @@
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
+            "json-schem-traverse": "^0.4.1",
             "uri-js": "^4.2.2"
           }
         },
@@ -15940,9 +15783,9 @@
             "type-fest": "^0.20.2"
           }
         },
-        "json-schema-traverse": {
+        "json-schem-traverse": {
           "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-0.4.1.tgz",
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true,
           "peer": true
@@ -15970,7 +15813,7 @@
     },
     "@humanwhocodes/object-schema": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schem-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true,
       "peer": true
@@ -16020,6 +15863,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/logos": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.1.14.tgz",
+      "integrity": "sha512-SvSxKubQbP/7Wdb3loShUeRGv82ejkNo5gjzvJzQeauntuU4aZjDrx0mnkhFZgNYd3li/mxvzPn79Xc5SGVliw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/lucide": {
       "version": "1.1.38",
       "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.38.tgz",
@@ -16535,7 +16387,7 @@
     },
     "@nuxt/schema": {
       "version": "3.0.0-rc.6",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.6.tgz",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schem-3.0.0-rc.6.tgz",
       "integrity": "sha512-BcD5YtWRhn+jU2DlzuI1TeITFeOt5x6qm2KeaU/d5jzJ0oZDzmZwKsAimLtRbHwyU6/kKa+zFbK6pp5obm1XLg==",
       "dev": true,
       "requires": {
@@ -17076,7 +16928,7 @@
     },
     "@types/json-schema": {
       "version": "7.0.11",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schem-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
@@ -17523,17 +17375,6 @@
         }
       }
     },
-    "@vuetify/loader-shared": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.5.0.tgz",
-      "integrity": "sha512-Sc+CUZGtQfMLmXXdZ3fvYWkDwMm5zYvYgsAPWsvXNokCeE7WhNA/IETFMThfF8Nf9mnf+zX9+jdtVhKND3hBkQ==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "find-cache-dir": "^3.3.2",
-        "upath": "^2.0.1"
-      }
-    },
     "@vueuse/core": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.0.2.tgz",
@@ -17872,9 +17713,9 @@
       "dev": true
     },
     "acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
       "dev": true
     },
     "acorn-globals": {
@@ -17948,7 +17789,7 @@
       "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
+        "json-schem-traverse": "^1.0.0",
         "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
@@ -17978,9 +17819,9 @@
       }
     },
     "ant-design-vue": {
-      "version": "3.2.10",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.2.10.tgz",
-      "integrity": "sha512-aqa0kjJzVQ74MfVw5w7rTOdJQL2JN9V/O6Ro+VQQMq/tY7q91JiomhI9TRKAK3tFdBDXJpUoBCVOsosbbxMzRw==",
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.2.11.tgz",
+      "integrity": "sha512-QKCAcOY5EJF0PepiVGA4X5PzUetYUvG5qALmA+2TON40pc2+brOEiVTwr3kjF9N+f7q4MpyiLPu4pIErwoajOQ==",
       "requires": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons-vue": "^6.1.0",
@@ -18784,7 +18625,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-      "devOptional": true
+      "dev": true
     },
     "compress-commons": {
       "version": "4.1.1",
@@ -18908,6 +18749,8 @@
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
       "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "is-what": "^3.14.1"
       }
@@ -19604,7 +19447,7 @@
       "version": "0.14.47",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.47.tgz",
       "integrity": "sha512-wI4ZiIfFxpkuxB8ju4MHrGwGLyp1+awEHAHVpx6w7a+1pmYIq8T9FGEVVwFo0iFierDoMj++Xq69GXWYn2EiwA==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "esbuild-android-64": "0.14.47",
         "esbuild-android-arm64": "0.14.47",
@@ -19919,7 +19762,7 @@
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
+            "json-schem-traverse": "^0.4.1",
             "uri-js": "^4.2.2"
           }
         },
@@ -19979,9 +19822,9 @@
             "type-fest": "^0.20.2"
           }
         },
-        "json-schema-traverse": {
+        "json-schem-traverse": {
           "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-0.4.1.tgz",
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true,
           "peer": true
@@ -20357,7 +20200,7 @@
     },
     "esprima": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprim-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true,
       "optional": true,
@@ -20658,18 +20501,6 @@
         }
       }
     },
-    "find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      }
-    },
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -20820,7 +20651,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "devOptional": true
+      "dev": true
     },
     "function.prototype.name": {
       "version": "1.1.5",
@@ -21087,7 +20918,7 @@
     },
     "har-schema": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schem-2.0.0.tgz",
       "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
       "dev": true
     },
@@ -21109,13 +20940,13 @@
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
+            "json-schem-traverse": "^0.4.1",
             "uri-js": "^4.2.2"
           }
         },
-        "json-schema-traverse": {
+        "json-schem-traverse": {
           "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-0.4.1.tgz",
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true
         }
@@ -21125,7 +20956,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -21498,7 +21329,8 @@
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
       "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
       "dev": true,
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "immutable": {
       "version": "4.1.0",
@@ -21723,7 +21555,7 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
       "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -21926,7 +21758,9 @@
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
       "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "is-wsl": {
       "version": "2.2.0",
@@ -22081,9 +21915,9 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
-    "json-schema-traverse": {
+    "json-schem-traverse": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
@@ -22211,6 +22045,8 @@
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
       "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "copy-anything": "^2.0.1",
         "errno": "^0.1.1",
@@ -22230,6 +22066,7 @@
           "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
           "dev": true,
           "optional": true,
+          "peer": true,
           "requires": {
             "pify": "^4.0.1",
             "semver": "^5.6.0"
@@ -22240,28 +22077,32 @@
           "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
           "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "peer": true
         },
         "pify": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
           "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "peer": true
         },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "peer": true
         },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -22517,7 +22358,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "semver": "^6.0.0"
       },
@@ -22526,7 +22367,7 @@
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "devOptional": true
+          "dev": true
         }
       }
     },
@@ -22806,6 +22647,7 @@
       "integrity": "sha512-gCE9weDhjVGCRqS8dwDR/D3GTAeyXLXuqp7I8EzH6DllZGXSUyxuqqLh+YX9rMAWaaTFyVAg6rHGL25dqvczKw==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "requires": {
         "debug": "^3.2.6",
         "iconv-lite": "^0.6.3",
@@ -22818,6 +22660,7 @@
           "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "dev": true,
           "optional": true,
+          "peer": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -22828,6 +22671,7 @@
           "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
           "dev": true,
           "optional": true,
+          "peer": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3.0.0"
           }
@@ -23486,7 +23330,9 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
       "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "parse-path": {
       "version": "4.0.4",
@@ -23578,7 +23424,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "devOptional": true
+      "dev": true
     },
     "path-type": {
       "version": "4.0.0",
@@ -23645,73 +23491,6 @@
         "pinkie": "^1.0.0"
       }
     },
-    "pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "find-up": "^4.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "p-try": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-          "optional": true,
-          "peer": true
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "pkg-types": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-0.3.3.tgz",
@@ -24474,7 +24253,7 @@
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
       "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
@@ -24516,7 +24295,7 @@
       "version": "2.75.7",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
       "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -24623,7 +24402,8 @@
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true,
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "saxes": {
       "version": "6.0.0",
@@ -24636,9 +24416,9 @@
         "xmlchars": "^2.2.0"
       }
     },
-    "schema-utils": {
+    "schem-utils": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/schem-utils/-/schem-utils-3.1.1.tgz",
       "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
       "dev": true,
       "optional": true,
@@ -24659,7 +24439,7 @@
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
+            "json-schem-traverse": "^0.4.1",
             "uri-js": "^4.2.2"
           }
         },
@@ -24672,9 +24452,9 @@
           "peer": true,
           "requires": {}
         },
-        "json-schema-traverse": {
+        "json-schem-traverse": {
           "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "resolved": "https://registry.npmjs.org/json-schem-traverse/-/json-schem-traverse-0.4.1.tgz",
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true,
           "optional": true,
@@ -25227,7 +25007,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "devOptional": true
+      "dev": true
     },
     "svg-tags": {
       "version": "1.0.0",
@@ -25390,7 +25170,7 @@
       "requires": {
         "@jridgewell/trace-mapping": "^0.3.7",
         "jest-worker": "^27.4.5",
-        "schema-utils": "^3.1.1",
+        "schem-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
         "terser": "^5.7.2"
       },
@@ -25789,9 +25569,9 @@
       }
     },
     "unplugin-vue-components": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.21.1.tgz",
-      "integrity": "sha512-8MhIT323q1EUu7rz6NfQeiHqDrZKtygy6s9jzcQAuuZUM2T38SHlPT5YJjBOZmM0Bau6YuNTKfBBX4iHzeusaQ==",
+      "version": "0.22.4",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.22.4.tgz",
+      "integrity": "sha512-2rRZcM9OnJGXnYxQNfaceEYuPeVACcWySIjy8WBwIiN3onr980TmA3XE5pRJFt8zoQrUA+c46oyIq96noLqrEQ==",
       "dev": true,
       "requires": {
         "@antfu/utils": "^0.5.2",
@@ -25799,11 +25579,11 @@
         "chokidar": "^3.5.3",
         "debug": "^4.3.4",
         "fast-glob": "^3.2.11",
-        "local-pkg": "^0.4.1",
+        "local-pkg": "^0.4.2",
         "magic-string": "^0.26.2",
         "minimatch": "^5.1.0",
         "resolve": "^1.22.1",
-        "unplugin": "^0.7.1"
+        "unplugin": "^0.9.0"
       },
       "dependencies": {
         "brace-expansion": {
@@ -25825,12 +25605,12 @@
           }
         },
         "unplugin": {
-          "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
-          "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
+          "version": "0.9.3",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.9.3.tgz",
+          "integrity": "sha512-GWXxizZG+tobNs8fuGTCeilerkkfZTZax2iivuE4pxLaF9wTnPJHOq8tbLKDb5ohVb+2BXNjrU9xx59yWTUnuw==",
           "dev": true,
           "requires": {
-            "acorn": "^8.7.1",
+            "acorn": "^8.8.0",
             "chokidar": "^3.5.3",
             "webpack-sources": "^3.2.3",
             "webpack-virtual-modules": "^0.4.4"
@@ -25868,13 +25648,6 @@
         "scule": "^0.2.1"
       }
     },
-    "upath": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
-      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
-      "optional": true,
-      "peer": true
-    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -25917,7 +25690,7 @@
       "version": "2.9.12",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.12.tgz",
       "integrity": "sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "esbuild": "^0.14.27",
         "fsevents": "~2.3.2",
@@ -25995,17 +25768,6 @@
       "dev": true,
       "requires": {}
     },
-    "vite-plugin-vuetify": {
-      "version": "1.0.0-alpha.12",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.0-alpha.12.tgz",
-      "integrity": "sha512-DMb7oY6F67P1RTEU28xQePUnyZdm+sbeGgIF3exBrA5yLL8NKKPIahqJN4+MAWMXCJVwNKy7nsS6zVgOLtcoQg==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "@vuetify/loader-shared": "^1.5.0",
-        "debug": "^4.3.3"
-      }
-    },
     "vite-plugin-windicss": {
       "version": "1.8.7",
       "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.7.tgz",
@@ -26202,12 +25964,6 @@
         }
       }
     },
-    "vuetify": {
-      "version": "3.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz",
-      "integrity": "sha512-mU+pO5ZAZOR2Z7eVBoPwZw6nePxT5Sdqpsa4++Q99TwVxXQ7jl76Cy97v72MkDYWfxjDjj8XvW6IqNPGrJpU8w==",
-      "requires": {}
-    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -26298,7 +26054,7 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.0",
+        "schem-utils": "^3.1.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.1.3",
         "watchpack": "^2.3.1",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index cf5ca7935b..cf1b4f1729 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -16,7 +16,7 @@
     "@vuelidate/validators": "^2.0.0-alpha.31",
     "@vueuse/core": "^9.0.2",
     "@vueuse/integrations": "^9.0.2",
-    "ant-design-vue": "^3.2.10",
+    "ant-design-vue": "^3.2.11",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "jsep": "^1.3.6",
@@ -33,7 +33,6 @@
     "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.1.10",
     "vuedraggable": "^4.1.0",
-    "vuetify": "^3.0.0-alpha.13",
     "xlsx": "^0.17.3"
   },
   "devDependencies": {
@@ -43,6 +42,7 @@
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/eva": "^1.1.2",
     "@iconify-json/ic": "^1.1.7",
+    "@iconify-json/logos": "^1.1.14",
     "@iconify-json/lucide": "^1.1.36",
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
@@ -66,13 +66,12 @@
     "eslint-plugin-prettier": "^4.0.0",
     "happy-dom": "^6.0.3",
     "httpsnippet": "^2.0.0",
-    "less": "^4.1.3",
     "nuxt": "3.0.0-rc.4",
     "nuxt-windicss": "^2.5.0",
     "prettier": "^2.7.1",
     "sass": "^1.53.0",
     "unplugin-icons": "^0.14.7",
-    "unplugin-vue-components": "^0.21.1",
+    "unplugin-vue-components": "^0.22.4",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vitest": "^0.18.0",
     "windicss": "^3.5.6"
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 5d7fbe927d..6b1d779ad4 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { Chrome } from '@ckpack/vue-color'
 import { message } from 'ant-design-vue'
 import {
+  computed,
+  definePageMeta,
   navigateTo,
   onKeyStroke,
   openLink,
@@ -12,10 +15,16 @@ import {
   useProject,
   useRoute,
   useTabs,
+  useTheme,
   useUIPermission,
+  watch,
 } from '#imports'
 import { TabType } from '~/composables'
 
+definePageMeta({
+  hideHeader: true,
+})
+
 const route = useRoute()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
@@ -41,16 +50,31 @@ const openDialogKey = ref<string>()
 
 const dropdownOpen = ref(false)
 
+/** Sidebar ref */
+const sidebar = ref()
+
+const pickedColor = ref<any>('#ffffff')
+
+let pickerActive = $ref<boolean | 'primary' | 'accent'>(false)
+
 const email = computed(() => user.value?.email ?? '---')
 
+const { setTheme, theme } = useTheme()
+
+watch(pickedColor, (nextColor) => {
+  if (pickerActive && nextColor.hex) {
+    setTheme({
+      primaryColor: pickerActive === 'primary' ? nextColor.hex : theme.value.primaryColor,
+      accentColor: pickerActive === 'accent' ? nextColor.hex : theme.value.accentColor,
+    })
+  }
+})
+
 const logout = () => {
   signOut()
   navigateTo('/signin')
 }
 
-/** Sidebar ref */
-const sidebar = ref()
-
 onKeyStroke(
   'Escape',
   () => {
@@ -61,10 +85,6 @@ onKeyStroke(
 
 clearTabs()
 
-if (!route.params.type && isUIAllowed('teamAndAuth')) {
-  addTab({ type: TabType.AUTH, title: 'Team & Auth' })
-}
-
 function toggleDialog(value?: boolean, key?: string) {
   dialogOpen.value = value ?? !dialogOpen.value
   openDialogKey.value = key
@@ -74,6 +94,10 @@ await loadProject()
 
 await loadTables()
 
+if (!route.params.type && isUIAllowed('teamAndAuth')) {
+  addTab({ type: TabType.AUTH, title: 'Team & Auth' })
+}
+
 const copyProjectInfo = async () => {
   try {
     await loadProjectMetaInfo()
@@ -102,9 +126,21 @@ const copyAuthToken = async () => {
   }
 }
 
-definePageMeta({
-  hideHeader: true,
-})
+const openColorPicker = (type: 'primary' | 'accent') => {
+  if (!pickerActive || pickerActive !== type) {
+    pickedColor.value = type === 'primary' ? theme.value.primaryColor : theme.value.accentColor
+    pickerActive = type
+  } else {
+    pickerActive = false
+  }
+}
+
+const onMenuClose = (visible: boolean) => {
+  if (!visible) {
+    pickedColor.value = '#ffffff'
+    pickerActive = false
+  }
+}
 </script>
 
 <template>
@@ -152,7 +188,7 @@ definePageMeta({
             </template>
           </div>
 
-          <a-dropdown v-else class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom">
+          <a-dropdown v-else class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom" @visible-change="onMenuClose">
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
@@ -167,7 +203,7 @@ definePageMeta({
                 </a-tooltip>
                 <div v-else class="text-lg font-semibold truncate">{{ project.title }}</div>
 
-                <MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
+                <MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
               </template>
 
               <template v-else>
@@ -180,7 +216,7 @@ definePageMeta({
                 <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" />
+                      <MdiFolder class="group-hover:text-accent text-xl" />
 
                       <div class="flex flex-col">
                         <div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div>
@@ -188,7 +224,7 @@ definePageMeta({
                         <div class="flex items-center gap-1">
                           <div class="group-hover:(!text-primary)">ID:</div>
 
-                          <div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div>
+                          <div class="text-xs group-hover:text-accent truncate font-italic">{{ project.id }}</div>
                         </div>
                       </div>
                     </div>
@@ -196,7 +232,7 @@ definePageMeta({
 
                   <a-menu-item key="copy">
                     <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
-                      <MdiContentCopy class="group-hover:text-pink-500" />
+                      <MdiContentCopy class="group-hover:text-accent" />
                       Copy Project Info
                     </div>
                   </a-menu-item>
@@ -210,14 +246,14 @@ definePageMeta({
                       class="nc-project-menu-item group"
                       @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                     >
-                      <MdiApi class="group-hover:text-pink-500" />
+                      <MdiApi class="group-hover:text-accent" />
                       Swagger: Rest APIs
                     </div>
                   </a-menu-item>
 
                   <a-menu-item key="copy">
                     <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
-                      <MdiScriptTextKeyOutline class="group-hover:text-pink-500" />
+                      <MdiScriptTextKeyOutline class="group-hover:text-accent" />
                       Copy Auth Token
                     </div>
                   </a-menu-item>
@@ -231,7 +267,7 @@ definePageMeta({
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'teamAndAuth')"
                     >
-                      <MdiCog class="group-hover:text-pink-500" />
+                      <MdiCog class="group-hover:text-accent" />
                       Team & Settings
                     </div>
                   </a-menu-item>
@@ -241,13 +277,13 @@ definePageMeta({
                   <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
                     <template #title>
                       <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                        <MdiFileEyeOutline class="group-hover:text-pink-500" />
+                        <MdiFileEyeOutline class="group-hover:text-accent" />
                         Preview Project As
 
                         <div class="flex-1" />
 
                         <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                         />
                       </div>
                     </template>
@@ -260,12 +296,12 @@ definePageMeta({
                   <a-sub-menu key="language" class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0">
                     <template #title>
                       <div class="nc-project-menu-item group">
-                        <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
+                        <MaterialSymbolsTranslate class="group-hover:text-accent nc-language" />
                         Language
                         <div class="flex-1" />
 
                         <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                         />
                       </div>
                     </template>
@@ -275,15 +311,15 @@ definePageMeta({
                   </a-sub-menu>
 
                   <template v-if="signedIn && !isSharedBase">
-                    <a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
+                    <a-sub-menu key="account">
                       <template #title>
                         <div class="nc-project-menu-item group">
-                          <MdiAccount class="group-hover:text-pink-500" />
+                          <MdiAccount class="group-hover:text-accent" />
                           Account
                           <div class="flex-1" />
 
                           <MaterialSymbolsChevronRightRounded
-                            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                            class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                           />
                         </div>
                       </template>
@@ -291,8 +327,8 @@ definePageMeta({
                       <template #expandIcon></template>
 
                       <a-menu-item key="0" class="!rounded-t">
-                        <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
-                          <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
+                        <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
+                          <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 
                           <span class="prose-sm">{{ email }}</span>
                         </nuxt-link>
@@ -300,7 +336,7 @@ definePageMeta({
 
                       <a-menu-item key="1" class="!rounded-b">
                         <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
-                          <MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
+                          <MdiLogout class="group-hover:(!text-accent)" />&nbsp;
 
                           <span class="prose-sm">
                             {{ $t('general.signOut') }}
@@ -309,12 +345,53 @@ definePageMeta({
                       </a-menu-item>
                     </a-sub-menu>
                   </template>
+
+                  <a-menu-divider />
+
+                  <a-sub-menu>
+                    <template #title>
+                      <div class="nc-project-menu-item group">
+                        <ClarityImageLine class="group-hover:text-accent" />
+                        Theme
+
+                        <div class="flex-1" />
+
+                        <MaterialSymbolsChevronRightRounded
+                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                        />
+                      </div>
+                    </template>
+
+                    <a-menu-item>
+                      <div class="nc-project-menu-item group" @click.stop="openColorPicker('primary')">
+                        <ClarityColorPickerSolid class="group-hover:text-accent" />
+                        Primary Color
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item>
+                      <div class="nc-project-menu-item group" @click.stop="openColorPicker('accent')">
+                        <ClarityColorPickerSolid class="group-hover:text-accent" />
+                        Accent Color
+                      </div>
+                    </a-menu-item>
+                  </a-sub-menu>
+
+                  <Chrome
+                    v-if="pickerActive"
+                    v-model="pickedColor"
+                    class="z-99 absolute right-[-225px]"
+                    @click.stop
+                    @blur="onMenuClose(false)"
+                  />
                 </a-menu-item-group>
               </a-menu>
             </template>
           </a-dropdown>
 
-          <div class="nc-sidebar-left-toggle-icon hover:after:bg-primary/75 group nc-sidebar-add-row flex align-center px-2">
+          <div
+            class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
+          >
             <MdiBackburger
               class="cursor-pointer transform transition-transform duration-500"
               :class="{ 'rotate-180': !isOpen }"
@@ -326,12 +403,11 @@ definePageMeta({
         <DashboardTreeView v-show="isOpen" />
       </a-layout-sider>
     </template>
-
-    <dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />
-
-    <NuxtPage />
-
-    <GeneralPreviewAs float />
+    <div :key="$route.fullPath">
+      <dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />
+      <NuxtPage />
+      <GeneralPreviewAs float />
+    </div>
   </NuxtLayout>
 </template>
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index c8e8805a4f..8471d52a37 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
-import { TabMetaInj, provide, useSidebar, useTabs } from '#imports'
-import { TabType, useGlobal } from '~/composables'
+import { TabType } from '~/composables'
+import { TabMetaInj, provide, useGlobal, useSidebar, useTabs } from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
@@ -24,13 +24,20 @@ const icon = (tab: TabItem) => {
 }
 
 const { isOpen, toggle } = useSidebar()
+
+function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
+  if (action === 'remove') closeTab(targetKey)
+}
 </script>
 
 <template>
   <div class="h-full w-full nc-container">
     <div class="h-full w-full flex flex-col">
-      <div class="flex items-end !min-h-[50px] bg-primary/100">
-        <div v-if="!isOpen" class="nc-sidebar-left-toggle-icon hover:after:bg-primary/75 group nc-sidebar-add-row py-2 px-3">
+      <div class="flex items-end !min-h-[50px] !bg-primary">
+        <div
+          v-if="!isOpen"
+          class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3"
+        >
           <MdiMenu
             class="cursor-pointer transform transition-transform duration-500 text-white"
             :class="{ 'rotate-180': !isOpen }"
@@ -38,10 +45,10 @@ const { isOpen, toggle } = useSidebar()
           />
         </div>
 
-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab(activeTabIndex)">
-          <a-tab-pane v-for="(tab, i) in tabs" :key="i">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
+          <a-tab-pane v-for="(tab, i) of tabs" :key="i">
             <template #tab>
-              <div class="flex align-center gap-2">
+              <div class="flex items-center gap-2">
                 <component :is="icon(tab)" class="text-sm" />
 
                 {{ tab.title }}
@@ -49,12 +56,14 @@ const { isOpen, toggle } = useSidebar()
             </template>
           </a-tab-pane>
         </a-tabs>
+
         <span class="flex-1" />
-        <div class="flex justify-center align-self-center mr-2 min-w-[115px]">
-          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-white">
+
+        <div class="flex justify-center self-center mr-2 min-w-[115px]">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200">
             {{ $t('general.loading') }}
 
-            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+            <MdiLoading :class="{ 'animate-infinite animate-spin': isLoading }" />
           </div>
         </div>
       </div>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index d6624356c8..08e1eb1467 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
-import { ref, useDialog, useDropZone, useFileDialog, useNuxtApp, watch } from '#imports'
+import { ref, useDialog, useDropZone, useFileDialog, useNuxtApp, useProject, watch } from '#imports'
 import DlgQuickImport from '~/components/dlg/QuickImport.vue'
+import DlgTableCreate from '~/components/dlg/TableCreate.vue'
 
 const dropZone = ref<HTMLDivElement>()
 
@@ -10,6 +11,8 @@ const { isOverDropZone } = useDropZone(dropZone, onDrop)
 
 const { files, open, reset } = useFileDialog()
 
+const { isSharedBase } = useProject()
+
 const { $e } = useNuxtApp()
 
 type QuickImportTypes = 'excel' | 'json' | 'csv'
@@ -103,29 +106,66 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
     reset()
   }
 }
+
+function openCreateTable() {
+  $e('a:table:open')
+
+  const isOpen = ref(true)
+  const { close } = useDialog(DlgTableCreate, {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+
+    reset()
+  }
+}
+
+function onDropZoneClick(e: MouseEvent) {
+  const elements = document.elementsFromPoint(e.clientX, e.clientY)
+  const isCreateTableBtnClicked = elements.some((element) => element.classList.contains('create-table-btn'))
+
+  if (isCreateTableBtnClicked) {
+    openCreateTable()
+    return
+  }
+
+  open()
+}
 </script>
 
 <template>
-  <div ref="dropZone" class="h-full w-full text-gray-600 flex items-center justify-center relative">
-    <general-overlay
-      :model-value="true"
-      :class="[isOverDropZone ? 'bg-gray-300/75 border-primary shadow' : 'bg-gray-100/25 border-gray-500 cursor-pointer']"
-      inline
-      style="top: 20%; left: 20%; right: 20%; bottom: 20%"
-      class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary"
-      @click="open"
-    >
-      <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here </template>
-    </general-overlay>
-
-    <div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center">
+  <div class="h-full w-full text-gray-600 flex items-center justify-center relative">
+    <div v-if="isSharedBase" class="flex flex-col gap-6 items-center justify-center mx-auto text-center">
       <div class="text-3xl">Welcome to NocoDB!</div>
-
-      <div class="flex items-center flex-wrap justify-center gap-2 prose-lg leading-8">
-        To get started, either drop a <span class="flex items-center gap-2"><PhFileCsv /> CSV</span>,
-        <span class="flex items-center gap-2"><BiFiletypeJson /> JSON</span> or
-        <span class="flex items-center gap-2"><BiFiletypeXlsx /> Excel</span> file here or click the button in the top-left of
-        this page.
+    </div>
+    <div v-else ref="dropZone">
+      <general-overlay
+        :model-value="true"
+        :class="[isOverDropZone ? 'bg-gray-300/75 border-primary shadow' : 'bg-gray-100/25 border-gray-500 cursor-pointer']"
+        inline
+        style="top: 20%; left: 20%; right: 20%; bottom: 20%"
+        class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary"
+        @click="onDropZoneClick"
+      >
+        <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here </template>
+      </general-overlay>
+
+      <div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center">
+        <div class="text-3xl">Welcome to NocoDB!</div>
+
+        <div class="flex items-center flex-wrap justify-center gap-2 prose-lg leading-8">
+          To get started, either drop a <span class="flex items-center gap-2"><PhFileCsv /> CSV,</span>
+          <span class="flex items-center gap-2"><BiFiletypeJson /> JSON</span> or
+          <span class="flex items-center gap-2"><BiFiletypeXlsx /> Excel file here or</span>
+        </div>
+        <a-button type="primary" ghost class="create-table-btn">
+          <span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">Create new table</span>
+        </a-button>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui-v2/pages/forgot-password.vue b/packages/nc-gui-v2/pages/forgot-password.vue
index 7f4e124ddc..dee4f2defd 100644
--- a/packages/nc-gui-v2/pages/forgot-password.vue
+++ b/packages/nc-gui-v2/pages/forgot-password.vue
@@ -59,39 +59,30 @@ function resetError() {
 
 <template>
   <NuxtLayout>
-    <a-form
-      ref="formValidator"
-      layout="vertical"
-      :model="form"
-      class="bg-primary/5 forgot-password h-full flex justify-center items-center nc-form-signin"
-      @finish="resetPassword"
-    >
-      <div class="h-full w-full flex flex-col items-center justify-center pt-[50px]">
-        <div
-          class="color-transition bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-        >
-          <general-noco-icon
-            class="color-transition hover:(ring ring-pink-500)"
-            :class="[isLoading ? 'animated-bg-gradient' : '']"
-          />
-
-          <div class="self-center flex flex-col justify-center items-center text-center gap-2">
-            <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
-
-            <template v-if="!success">
-              <div class="prose-sm">{{ $t('msg.info.passwordRecovery.message_1') }}</div>
-              <div class="prose-sm mb-4">{{ $t('msg.info.passwordRecovery.message_2') }}</div>
-            </template>
-
-            <template v-else>
-              <div class="prose-sm text-success flex items-center leading-8 gap-2">
-                {{ $t('msg.info.passwordRecovery.success') }} <ClaritySuccessLine />
-              </div>
+    <div class="md:bg-primary bg-opacity-5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center">
+      <div
+        class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+      >
+        <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+
+        <div class="self-center flex flex-col justify-center items-center text-center gap-2">
+          <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
+
+          <template v-if="!success">
+            <div class="prose-sm">{{ $t('msg.info.passwordRecovery.message_1') }}</div>
+            <div class="prose-sm mb-4">{{ $t('msg.info.passwordRecovery.message_2') }}</div>
+          </template>
+
+          <template v-else>
+            <div class="prose-sm text-success flex items-center leading-8 gap-2">
+              {{ $t('msg.info.passwordRecovery.success') }} <ClaritySuccessLine />
+            </div>
 
-              <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
-            </template>
-          </div>
+            <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
+          </template>
+        </div>
 
+        <a-form ref="formValidator" layout="vertical" :model="form" no-style @finish="resetPassword">
           <Transition name="layout">
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
@@ -102,12 +93,15 @@ function resetError() {
           </Transition>
 
           <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('msg.info.signUp.workEmail')" @focus="resetError" />
           </a-form-item>
 
           <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
             <button class="submit" type="submit">
-              <span class="flex items-center gap-2"><MdiLogin /> {{ $t('activity.sendEmail') }}</span>
+              <span class="flex items-center gap-2">
+                <MdiLogin />
+                {{ $t('activity.sendEmail') }}
+              </span>
             </button>
 
             <div class="text-end prose-sm">
@@ -115,9 +109,9 @@ function resetError() {
               <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
             </div>
           </div>
-        </div>
+        </a-form>
       </div>
-    </a-form>
+    </div>
   </NuxtLayout>
 </template>
 
@@ -125,24 +119,24 @@ function resetError() {
 .forgot-password {
   .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;
+    @apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
+    @apply z-1 relative color-transition rounded p-3 text-white shadow;
 
     &::after {
-      @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
       content: '';
       z-index: -1;
     }
 
     &:hover::after {
-      @apply transform scale-110 ring ring-pink-500;
+      @apply transform scale-110 ring ring-accent;
     }
 
     &:active::after {
-      @apply ring ring-pink-500;
+      @apply ring ring-accent;
     }
   }
 }
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 3f433600c5..9d95950fb0 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -3,6 +3,7 @@ import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import {
   computed,
+  definePageMeta,
   extractSdkResponseErrorMsg,
   navigateTo,
   onMounted,
@@ -13,6 +14,10 @@ import {
   useUIPermission,
 } from '#imports'
 
+definePageMeta({
+  title: 'title.myProject',
+})
+
 const { $e } = useNuxtApp()
 
 const { api, isLoading } = useApi()
@@ -76,12 +81,12 @@ onMounted(() => {
 
             <a-tooltip title="Reload projects">
               <span
-                class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-pink-500) rounded-full mt-1"
+                class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
                 :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
               >
                 <MdiRefresh
                   v-t="['a:project:refresh']"
-                  class="text-xl text-gray-500 group-hover:text-pink-500 cursor-pointer"
+                  class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
                   :class="isLoading ? '!text-primary' : ''"
                   @click="loadProjects"
                 />
@@ -96,7 +101,7 @@ onMounted(() => {
               :placeholder="$t('activity.searchProject')"
             />
 
-            <div class="flex-grow" />
+            <div class="flex-1" />
 
             <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']">
               <button class="nc-new-project-menu">
@@ -107,14 +112,14 @@ onMounted(() => {
               </button>
 
               <template #overlay>
-                <a-menu>
+                <a-menu class="!py-0 rounded">
                   <a-menu-item>
                     <div
                       v-t="['c:project:create:xcdb']"
-                      class="nc-project-menu-item gap-4"
+                      class="nc-project-menu-item group"
                       @click="navigateTo('/project/create')"
                     >
-                      <MdiPlusOutline class="text-lg" />
+                      <MdiPlusOutline class="group-hover:text-accent" />
 
                       <div>{{ $t('activity.createProject') }}</div>
                     </div>
@@ -123,10 +128,10 @@ onMounted(() => {
                   <a-menu-item>
                     <div
                       v-t="['c:project:create:extdb']"
-                      class="nc-project-menu-item gap-4"
+                      class="nc-project-menu-item group"
                       @click="navigateTo('/project/create-external')"
                     >
-                      <MdiDatabaseOutline class="text-lg" />
+                      <MdiDatabaseOutline class="group-hover:text-accent" />
 
                       <div v-html="$t('activity.createProjectExtended.extDB')" />
                     </div>
@@ -148,7 +153,7 @@ onMounted(() => {
                   onClick: () => {
                     $e('a:project:open')
 
-                    navigateTo(`/nc/${record.id}/auth`)
+                    navigateTo(`/nc/${record.id}`)
                   },
                   class: ['group'],
                 })
@@ -160,7 +165,7 @@ onMounted(() => {
               <a-table-column key="title" :title="$t('general.title')" data-index="title">
                 <template #default="{ text }">
                   <div
-                    class="capitalize color-transition group-hover:text-pink-500 !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
+                    class="capitalize color-transition group-hover:text-primary !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
                   >
                     {{ text }}
                   </div>
@@ -199,7 +204,7 @@ onMounted(() => {
 
 <style scoped>
 .nc-action-btn {
-  @apply text-gray-500 hover:(text-pink-500 ring) active:(ring ring-pink-500) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+  @apply text-gray-500 group-hover:text-accent active:(ring ring-accent) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
 }
 
 .nc-new-project-menu {
@@ -212,11 +217,11 @@ onMounted(() => {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-pink-500;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
-    @apply ring ring-pink-500;
+    @apply ring ring-accent;
   }
 }
 
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 674801e44e..071326ba30 100644
--- a/packages/nc-gui-v2/pages/index/user/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index/index.vue
@@ -131,21 +131,17 @@ const resetError = () => {
 
   .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;
+    @apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
   }
 
   .password {
     input {
       @apply !border-none;
     }
-
-    .ant-input-password-icon {
-      @apply dark:!text-white;
-    }
   }
 
   .submit {
-    @apply ml-1 border border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+    @apply ml-1 border border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:(bg-primary bg-opacity-75);
   }
 }
 </style>
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index a3e1415eca..4ba5b25e12 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -64,7 +64,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
+  <a-card class="w-[500px] !mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.editProject') }}</h3>
 
     <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="renameProject">
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 e8a1f233fa..26a021b1b7 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -213,7 +213,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-card class="max-w-[600px] mx-auto !mt-100px !mb-5 !shadow-md">
+  <a-card class="max-w-[600px] !mx-auto !mt-100px !mb-5 !shadow-md">
     <GeneralNocoIcon />
 
     <h3 class="text-3xl text-center font-semibold mt-8 mb-4">{{ $t('activity.createProject') }}</h3>
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index 074635a384..6bc2a6cca6 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -55,7 +55,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <a-card :loading="isLoading" class="w-[500px] mx-auto !mt-100px shadow-md">
+  <a-card :loading="isLoading" class="w-[500px] !mx-auto !mt-100px shadow-md">
     <GeneralNocoIcon />
 
     <h3 class="text-3xl text-center font-semibold mt-8 mb-2">{{ $t('activity.createProject') }}</h3>
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index 17c5125f53..67f9f6d92a 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -64,10 +64,10 @@ const deleteProject = (project: ProjectType) => {
           <v-menu class="select-none">
             <template #activator="{ props }">
               <div
-                class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
+                class="color-transition hover:(bg-gray-100) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
                 @click="props.onClick"
               >
-                <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
+                <MdiPlus class="text-primary text-2xl" />
                 {{ $t('title.newProj') }}
               </div>
             </template>
@@ -91,7 +91,7 @@ const deleteProject = (project: ProjectType) => {
           </v-menu>
         </div>
 
-        <a-menu class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
+        <a-menu class="pr-4 flex-1 border-0">
           <a-menu-item
             v-for="(option, index) in navDrawerOptions"
             :key="index"
@@ -114,20 +114,20 @@ const deleteProject = (project: ProjectType) => {
       </div>
     </template>
 
-    <v-container class="flex-1 mb-12">
+    <div class="flex-1 mb-12">
       <div class="flex">
-        <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 dark:text-white p-4">
+        <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 p-4">
           {{ activePage }}
         </div>
 
         <div class="self-end flex text-4xl mb-1">
           <MaterialSymbolsGridView
-            :class="route.name === 'index-index' ? '!text-primary dark:(!text-secondary/75)' : ''"
+            :class="route.name === 'index-index' ? '!text-primary' : ''"
             class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/')"
           />
           <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'index-index-list' ? '!text-primary dark:(!text-secondary/75)' : ''"
+            :class="route.name === 'index-index-list' ? '!text-primary' : ''"
             class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/list')"
           />
@@ -137,7 +137,7 @@ const deleteProject = (project: ProjectType) => {
       <a-divider class="!mb-4 lg:(!mb-8)" />
 
       <NuxtPage :projects="projects" @delete-project="deleteProject" />
-    </v-container>
+    </div>
 
     <a-modal></a-modal>
   </NuxtLayout>
diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index e604e5049c..ec0d1be6df 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -32,7 +32,7 @@ const openProject = async (project: ProjectType) => {
 
     <template v-for="project of projects" :key="project.id">
       <div
-        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30 dark:bg-gray-500/30 shadow-sm) p-2 transition-color ease-in duration-100"
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30) p-2 transition-color ease-in duration-100"
         @click="openProject(project)"
       >
         <div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div>
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index 86eb53b19f..98f1953d3d 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -80,24 +80,15 @@ function resetError() {
 
 <template>
   <NuxtLayout>
-    <a-form
-      ref="formValidator"
-      :model="form"
-      layout="vertical"
-      class="bg-primary/5 signin h-full flex justify-center items-center nc-form-signin"
-      @finish="signIn"
-    >
-      <div class="h-full w-full flex flex-col items-center justify-center pt-[50px]">
-        <div
-          class="bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-        >
-          <general-noco-icon
-            class="!rounded-full color-transition hover:(ring ring-pink-500)"
-            :class="[isLoading ? 'animated-bg-gradient' : '']"
-          />
-
-          <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
+    <div class="md:bg-primary bg-opacity-5 signin h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signup">
+      <div
+        class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+      >
+        <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 
+        <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
+
+        <a-form ref="formValidator" :model="form" layout="vertical" no-style @finish="signIn">
           <Transition name="layout">
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
@@ -108,7 +99,7 @@ function resetError() {
           </Transition>
 
           <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('msg.info.signUp.workEmail')" @focus="resetError" />
           </a-form-item>
 
           <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
@@ -116,20 +107,23 @@ function resetError() {
               v-model:value="form.password"
               size="large"
               class="password"
-              :placeholder="$t('labels.password')"
+              :placeholder="$t('msg.info.signUp.enterPassword')"
               @focus="resetError"
             />
           </a-form-item>
 
-          <div class="hidden md:block self-end">
+          <div class="hidden md:block text-right">
             <nuxt-link class="prose-sm" to="/forgot-password">
               {{ $t('msg.info.signUp.forgotPassword') }}
             </nuxt-link>
           </div>
 
           <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
-            <button class="submit" type="submit">
-              <span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>
+            <button class="submit group" type="submit">
+              <span class="flex items-center gap-2">
+                <MdiLogin />
+                {{ $t('general.signIn') }}
+              </span>
             </button>
 
             <div class="text-end prose-sm">
@@ -143,9 +137,9 @@ function resetError() {
               </nuxt-link>
             </div>
           </div>
-        </div>
+        </a-form>
       </div>
-    </a-form>
+    </div>
   </NuxtLayout>
 </template>
 
@@ -153,34 +147,30 @@ function resetError() {
 .signin {
   .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;
+    @apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
   }
 
   .password {
     input {
       @apply !border-none;
     }
-
-    .ant-input-password-icon {
-      @apply dark:!text-white;
-    }
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
+    @apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
 
     &::after {
-      @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
       content: '';
       z-index: -1;
     }
 
     &:hover::after {
-      @apply transform scale-110 ring ring-pink-500;
+      @apply transform scale-110 ring ring-accent;
     }
 
     &:active::after {
-      @apply ring ring-pink-500;
+      @apply ring ring-accent;
     }
   }
 }
diff --git a/packages/nc-gui-v2/pages/signup/[[token]].vue b/packages/nc-gui-v2/pages/signup/[[token]].vue
index 44bad26614..aadd3fbd3f 100644
--- a/packages/nc-gui-v2/pages/signup/[[token]].vue
+++ b/packages/nc-gui-v2/pages/signup/[[token]].vue
@@ -10,13 +10,17 @@ import {
   useApi,
   useGlobal,
   useI18n,
+  useNuxtApp,
   useRoute,
 } from '#imports'
 
 definePageMeta({
   requiresAuth: false,
+  title: 'general.signUp',
 })
 
+const { $e } = useNuxtApp()
+
 const route = useRoute()
 
 const { appInfo, signIn } = useGlobal()
@@ -84,6 +88,8 @@ async function signUp() {
       signIn(token!)
 
       await navigateTo('/')
+
+      $e('a:auth:sign-up')
     })
     .catch(async (err) => {
       error = await extractSdkResponseErrorMsg(err)
@@ -97,14 +103,11 @@ function resetError() {
 
 <template>
   <NuxtLayout>
-    <div class="bg-primary/5 signup h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signup">
+    <div class="md:bg-primary bg-opacity-5 signup h-full min-h-[600px] flex flex-col justify-center items-center">
       <div
-        class="bg-white dark:(!bg-gray-900 !text-white) mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+        class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
-        <general-noco-icon
-          class="color-transition hover:(ring ring-pink-500)"
-          :class="[isLoading ? 'animated-bg-gradient' : '']"
-        />
+        <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 
         <h1 class="prose-2xl font-bold self-center my-4">
           {{ $t('general.signUp') }}
@@ -127,7 +130,7 @@ function resetError() {
           </Transition>
 
           <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('msg.info.signUp.workEmail')" @focus="resetError" />
           </a-form-item>
 
           <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
@@ -135,7 +138,7 @@ function resetError() {
               v-model:value="form.password"
               size="large"
               class="password"
-              :placeholder="$t('labels.password')"
+              :placeholder="$t('msg.info.signUp.enterPassword')"
               @focus="resetError"
             />
           </a-form-item>
@@ -149,11 +152,23 @@ function resetError() {
               </span>
             </button>
 
+            <a
+              v-if="appInfo.googleAuthEnabled"
+              :href="`${api.instance.defaults.baseURL}/auth/google`"
+              class="submit after:(!bg-white) !text-primary border-1 border-primary !no-underline"
+            >
+              <span class="flex items-center gap-2">
+                <LogosGoogleGmail />
+
+                Sign up with Google
+              </span>
+            </a>
+
             <div class="flex items-center gap-2">
               <a-switch
                 v-model:checked="subscribe"
                 size="small"
-                class="my-1 hover:(ring ring-pink-500) focus:(!ring !ring-pink-500)"
+                class="my-1 hover:(ring ring-accent) focus:(!ring !ring-accent)"
               />
               <div class="prose-xs text-gray-500">Subscribe to our weekly newsletter</div>
             </div>
@@ -169,7 +184,7 @@ function resetError() {
 
       <div class="prose-sm mt-4 text-gray-500">
         By signing up, you agree to the
-        <a class="prose-sm text-gray-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb">Terms of Service</a>
+        <a class="prose-sm !text-gray-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb">Terms of Service</a>
       </div>
     </div>
   </NuxtLayout>
@@ -179,34 +194,30 @@ function resetError() {
 .signup {
   .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;
+    @apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
   }
 
   .password {
     input {
       @apply !border-none;
     }
-
-    .ant-input-password-icon {
-      @apply dark:!text-white;
-    }
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
+    @apply z-1 relative color-transition rounded p-3 text-white shadow;
 
     &::after {
-      @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
       content: '';
       z-index: -1;
     }
 
     &:hover::after {
-      @apply transform scale-110 ring ring-pink-500;
+      @apply transform scale-110 ring ring-accent;
     }
 
     &:active::after {
-      @apply ring ring-pink-500;
+      @apply ring ring-accent;
     }
   }
 }
diff --git a/packages/nc-gui-v2/plugins/ant.ts b/packages/nc-gui-v2/plugins/ant.ts
index b187f0be25..6e9cc08168 100644
--- a/packages/nc-gui-v2/plugins/ant.ts
+++ b/packages/nc-gui-v2/plugins/ant.ts
@@ -1,12 +1,6 @@
-import { Menu as AntMenu, ConfigProvider } from 'ant-design-vue'
-import { defineNuxtPlugin, themeColors } from '#imports'
+import { Menu as AntMenu } from 'ant-design-vue'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  ConfigProvider.config({
-    theme: {
-      primaryColor: themeColors.primary,
-    },
-  })
-
   nuxtApp.vueApp.component(AntMenu.name, AntMenu)
 })
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index ea16d99185..8372a77d9c 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -1,5 +1,4 @@
-import { defineNuxtPlugin } from '#app'
-import { useDark, useGlobal, watch } from '#imports'
+import { defineNuxtPlugin, useApi, useGlobal } from '#imports'
 
 /**
  * Initialize global state and watches for changes
@@ -15,25 +14,15 @@ import { useDark, useGlobal, watch } from '#imports'
  */
 export default defineNuxtPlugin(async (nuxtApp) => {
   const state = useGlobal()
-  const { $api } = useNuxtApp()
 
-  const darkMode = useDark()
+  const { api } = useApi()
 
   /** set i18n locale to stored language */
   nuxtApp.vueApp.i18n.locale.value = state.lang.value
 
   try {
-    state.appInfo.value = await $api.utils.appInfo()
+    state.appInfo.value = await api.utils.appInfo()
   } catch (e) {
     console.error(e)
   }
-
-  /** set current dark mode from storage */
-  watch(
-    state.darkMode,
-    (newMode) => {
-      darkMode.value = newMode
-    },
-    { immediate: true },
-  )
 })
diff --git a/packages/nc-gui-v2/plugins/vuetify.ts b/packages/nc-gui-v2/plugins/vuetify.ts
deleted file mode 100644
index b159083db3..0000000000
--- a/packages/nc-gui-v2/plugins/vuetify.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { ThemeDefinition } from 'vuetify'
-import { createVuetify } from 'vuetify'
-import { defineNuxtPlugin } from 'nuxt/app'
-
-// todo: exclude unused components
-// Import everything
-import * as components from 'vuetify/components'
-
-import { themeColors } from '~/utils/colorsUtils'
-
-const ncLightTheme: ThemeDefinition = {
-  dark: false,
-  colors: themeColors,
-}
-
-export const createVuetifyPlugin = () =>
-  createVuetify({
-    components,
-    theme: {
-      defaultTheme: 'ncLightTheme',
-      themes: {
-        ncLightTheme,
-      },
-    },
-  })
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(createVuetifyPlugin())
-})
diff --git a/packages/nc-gui-v2/utils/colorsUtils.ts b/packages/nc-gui-v2/utils/colorsUtils.ts
index a22c44edbc..22f16b8d9b 100644
--- a/packages/nc-gui-v2/utils/colorsUtils.ts
+++ b/packages/nc-gui-v2/utils/colorsUtils.ts
@@ -1,3 +1,5 @@
+import colors from 'windicss/colors'
+
 export const theme = {
   light: ['#ffdce5', '#fee2d5', '#ffeab6', '#d1f7c4', '#ede2fe', '#eee', '#cfdffe', '#d0f1fd', '#c2f5e8', '#ffdaf6'],
   dark: [
@@ -41,3 +43,43 @@ export const themeColors = {
   'success': '#4CAF50',
   'warning': '#FB8C00',
 }
+
+export const themeV2Colors = {
+  /** Primary shades */
+  'royal-blue': {
+    'DEFAULT': '#4351E8',
+    '50': '#E7E8FC',
+    '100': '#D4D8FA',
+    '200': '#B0B6F5',
+    '300': '#8C94F1',
+    '400': '#6773EC',
+    '500': '#4351E8',
+    '600': '#1A2BD8',
+    '700': '#1421A6',
+    '800': '#0E1774',
+    '900': '#080D42',
+  },
+
+  /** Accent shades */
+  'pink': colors.pink,
+}
+
+const isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)
+
+const getChunksFromString = (st: string, chunkSize: number) => st.match(new RegExp(`.{${chunkSize}}`, 'g'))
+
+const convertHexUnitTo256 = (hexStr: string) => parseInt(hexStr.repeat(2 / hexStr.length), 16)
+
+export const hexToRGB = (hex: string) => {
+  if (!isValidHex(hex)) {
+    throw new Error('Invalid HEX')
+  }
+
+  const chunkSize = Math.floor((hex.length - 1) / 3)
+
+  const hexArr = getChunksFromString(hex.slice(1), chunkSize)!
+
+  const [r, g, b] = hexArr.map(convertHexUnitTo256)
+
+  return `${r}, ${g}, ${b}`
+}
diff --git a/packages/nc-gui-v2/utils/viewUtils.ts b/packages/nc-gui-v2/utils/viewUtils.ts
index 53df82bb51..f8b23afb6e 100644
--- a/packages/nc-gui-v2/utils/viewUtils.ts
+++ b/packages/nc-gui-v2/utils/viewUtils.ts
@@ -1,4 +1,5 @@
 import { ViewTypes } from 'nocodb-sdk'
+import { themeV2Colors } from '~/utils'
 
 import MdiGridIcon from '~icons/mdi/grid-large'
 import MdiFormIcon from '~icons/mdi/form-select'
@@ -8,8 +9,8 @@ import MdiKanbanIcon from '~icons/mdi/tablet-dashboard'
 import MdiEyeIcon from '~icons/mdi/eye-circle-outline'
 
 export const viewIcons = {
-  [ViewTypes.GRID]: { icon: MdiGridIcon, color: 'blue' },
-  [ViewTypes.FORM]: { icon: MdiFormIcon, color: 'pink' },
+  [ViewTypes.GRID]: { icon: MdiGridIcon, color: '#8f96f2' },
+  [ViewTypes.FORM]: { icon: MdiFormIcon, color: themeV2Colors.pink['500'] },
   calendar: { icon: MdiCalendarIcon, color: 'purple' },
   [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' },
   [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' },
diff --git a/packages/nc-gui-v2/windi.config.ts b/packages/nc-gui-v2/windi.config.ts
index da391a88a8..037d3bbd39 100644
--- a/packages/nc-gui-v2/windi.config.ts
+++ b/packages/nc-gui-v2/windi.config.ts
@@ -11,7 +11,7 @@ import animations from '@windicss/plugin-animations'
 // @ts-expect-error no types for plugin-question-mark
 import questionMark from '@windicss/plugin-question-mark'
 
-import { theme as colors, themeColors } from './utils/colorsUtils'
+import { theme as colors, themeColors, themeV2Colors } from './utils/colorsUtils'
 
 export default defineConfig({
   extract: {
@@ -42,10 +42,8 @@ export default defineConfig({
 
   shortcuts: {
     '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)',
+    'scrollbar-thin-primary': 'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white',
+    'scrollbar-thin-dull': 'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 scrollbar-track-white',
   },
 
   theme: {
@@ -55,27 +53,16 @@ export default defineConfig({
       mono: ['Roboto', 'mono'],
     },
     extend: {
-      typography: {
-        DEFAULT: {
-          css: {
-            'a': {
-              'color': '#1348ba',
-              '&:hover': {
-                color: 'rgba(19,72,186,0.75)',
-              },
-            },
-            'nuxt-link': {
-              'color': '#1348ba',
-              '&:hover': {
-                color: 'rgba(19,72,186,0.75)',
-              },
-            },
-          },
-        },
+      textColor: {
+        primary: 'rgba(var(--color-primary), var(--tw-text-opacity))',
+        accent: 'rgba(var(--color-accent), var(--tw-text-opacity))',
       },
       colors: {
         ...windiColors,
         ...themeColors,
+        ...themeV2Colors,
+        primary: 'rgba(var(--color-primary), var(--tw-bg-opacity))',
+        accent: 'rgba(var(--color-accent), var(--tw-bg-opacity))',
         dark: colors.dark,
         light: colors.light,
       },
diff --git a/packages/nc-gui/nuxt.config.js b/packages/nc-gui/nuxt.config.js
index 3479af3252..c1f56f67a3 100644
--- a/packages/nc-gui/nuxt.config.js
+++ b/packages/nc-gui/nuxt.config.js
@@ -224,6 +224,7 @@ export default {
         config.output.publicPath = './_nuxt/'
       }
 
+
       return config
     }
   },
diff --git a/packages/nocodb/package-lock.json b/packages/nocodb/package-lock.json
index c7b690811c..7fe72bba30 100644
--- a/packages/nocodb/package-lock.json
+++ b/packages/nocodb/package-lock.json
@@ -95,7 +95,7 @@
         "sha.js": "^2.4.11",
         "slash": "^3.0.0",
         "socket.io": "^4.4.1",
-        "sqlite3": "5.0.0",
+        "sqlite3": "^5.0.0",
         "twilio": "^3.55.1",
         "unique-names-generator": "^4.3.1",
         "uuid": "^8.2.0",
diff --git a/packages/nocodb/package.json b/packages/nocodb/package.json
index 147e41b876..875e2d8190 100644
--- a/packages/nocodb/package.json
+++ b/packages/nocodb/package.json
@@ -181,7 +181,7 @@
     "sha.js": "^2.4.11",
     "slash": "^3.0.0",
     "socket.io": "^4.4.1",
-    "sqlite3": "5.0.0",
+    "sqlite3": "^5.0.0",
     "twilio": "^3.55.1",
     "unique-names-generator": "^4.3.1",
     "uuid": "^8.2.0",
diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index a87241315d..a2a955e369 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -251,7 +251,7 @@ class BaseModelSqlv2 {
 
     if (!ignoreFilterSort) applyPaginate(qb, rest);
     const proto = await this.getProto();
-    let data = await this.extractRawQueryAndExec(qb);
+    const data = await this.extractRawQueryAndExec(qb);
 
     return data?.map((d) => {
       d.__proto__ = proto;
@@ -362,7 +362,7 @@ class BaseModelSqlv2 {
     qb.groupBy(args.column_name);
     if (sorts) await sortV2(sorts, qb, this.dbDriver);
     applyPaginate(qb, rest);
-    let data = await qb;
+    const data = await qb;
     return data;
   }
 
@@ -571,7 +571,10 @@ class BaseModelSqlv2 {
     }
   }
 
-  public async multipleMmList({ colId, parentIds }, args: { limit?; offset? } = {}) {
+  public async multipleMmList(
+    { colId, parentIds },
+    args: { limit?; offset? } = {}
+  ) {
     const { where, ...rest } = this._getListArgs(args as any);
     const relColumn = (await this.model.getColumns()).find(
       (c) => c.id === colId
@@ -879,7 +882,7 @@ class BaseModelSqlv2 {
     applyPaginate(qb, rest);
 
     const proto = await childModel.getProto();
-    let data = await qb;
+    const data = await qb;
 
     return data.map((c) => {
       c.__proto__ = proto;
@@ -979,7 +982,7 @@ class BaseModelSqlv2 {
     applyPaginate(qb, rest);
 
     const proto = await childModel.getProto();
-    let data = await this.extractRawQueryAndExec(qb);
+    const data = await this.extractRawQueryAndExec(qb);
 
     return data.map((c) => {
       c.__proto__ = proto;
@@ -1018,7 +1021,8 @@ class BaseModelSqlv2 {
             .select(cn)
             // .where(childTable.primaryKey.cn, cid)
             .where(_wherePk(childTable.primaryKeys, cid))
-        ).orWhereNull(rcn);
+            .whereNotNull(cn)
+        );
       })
       .count(`*`, { as: 'count' });
 
@@ -1079,7 +1083,7 @@ class BaseModelSqlv2 {
     applyPaginate(qb, rest);
 
     const proto = await parentModel.getProto();
-    let data = await this.extractRawQueryAndExec(qb);
+    const data = await this.extractRawQueryAndExec(qb);
 
     return data.map((c) => {
       c.__proto__ = proto;
@@ -1554,8 +1558,7 @@ class BaseModelSqlv2 {
               {
                 const childCol = await colOptions.getChildColumn();
                 const parentCol = await colOptions.getParentColumn();
-                insertObj[childCol.column_name] =
-                  nestedData?.[parentCol.title];
+                insertObj[childCol.column_name] = nestedData?.[parentCol.title];
               }
               break;
             case RelationTypes.HAS_MANY:
diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 82cd920b63..1ff79397cb 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -557,6 +557,13 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
               colBody.colOptions.options.push({ title: '' });
             }
           }
+
+          // Trim end of enum/set
+          if (colBody.dt === 'enum' || colBody.dt === 'set') {
+            for (const opt of colBody.colOptions.options) {
+              opt.title = opt.title.trimEnd()
+            }
+          }
           
           if (colBody.uidt === UITypes.SingleSelect) {
             colBody.dtxp = (colBody.colOptions?.options.length)
@@ -720,21 +727,6 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
   ) {
     colBody = getColumnPropsFromUIDT(colBody, base);
     
-    if (colBody.uidt === UITypes.SingleSelect) {
-      colBody.dtxp = (colBody.colOptions?.options.length)
-        ? `${colBody.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
-        : '';
-    } else if (colBody.uidt === UITypes.MultiSelect){
-      colBody.dtxp = (colBody.colOptions?.options.length)
-        ? `${colBody.colOptions.options.map((o) => {
-            if(o.title.includes(',')) {
-              NcError.badRequest('Illegal char(\',\') for MultiSelect');
-            }
-            return `'${o.title.replace(/'/gi, '\'\'')}'`;
-          }).join(',')}`
-        : '';
-    }
-
     const baseModel = await Model.getBaseModelSQL({
       id: table.id,
       dbDriver: NcConnectionMgrv2.get(base)
@@ -809,6 +801,28 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         }
       }
 
+      // Trim end of enum/set
+      if (colBody.dt === 'enum' || colBody.dt === 'set') {
+        for (const opt of colBody.colOptions.options) {
+          opt.title = opt.title.trimEnd()
+        }
+      }
+
+      if (colBody.uidt === UITypes.SingleSelect) {
+        colBody.dtxp = (colBody.colOptions?.options.length)
+          ? `${colBody.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+          : '';
+      } else if (colBody.uidt === UITypes.MultiSelect){
+        colBody.dtxp = (colBody.colOptions?.options.length)
+          ? `${colBody.colOptions.options.map((o) => {
+              if(o.title.includes(',')) {
+                NcError.badRequest('Illegal char(\',\') for MultiSelect');
+              }
+              return `'${o.title.replace(/'/gi, '\'\'')}'`;
+            }).join(',')}`
+          : '';
+      }
+
       // Handle option delete
       for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id) ? false : true)) {
         if (!supportedDrivers.includes(driverType) && column.uidt === UITypes.MultiSelect) {
diff --git a/packages/nocodb/src/lib/meta/api/tableApis.ts b/packages/nocodb/src/lib/meta/api/tableApis.ts
index a68515ffaf..45ea1968c8 100644
--- a/packages/nocodb/src/lib/meta/api/tableApis.ts
+++ b/packages/nocodb/src/lib/meta/api/tableApis.ts
@@ -77,14 +77,13 @@ export async function tableList(req: Request, res: Response<TableListType>) {
     })
   ).filter((t) => tableViewMapping[t.id]);
 
-  res // todo: pagination
-    .json(
-      new PagedResponseImpl(
-        req.query?.includeM2M
-          ? tableList
-          : (tableList.filter((t) => !t.mm) as Model[])
-      )
-    );
+  res.json(
+    new PagedResponseImpl(
+      req.query?.includeM2M === 'true'
+        ? tableList
+        : (tableList.filter((t) => !t.mm) as Model[])
+    )
+  );
 }
 
 export async function tableCreate(req: Request<any, any, TableReqType>, res) {
diff --git a/packages/nocodb/src/lib/models/Column.ts b/packages/nocodb/src/lib/models/Column.ts
index 4a0f2afc9f..cba7f2322f 100644
--- a/packages/nocodb/src/lib/models/Column.ts
+++ b/packages/nocodb/src/lib/models/Column.ts
@@ -246,6 +246,10 @@ export default class Column<T = any> implements ColumnType {
           }
         } else {
           for (const [i, option] of column.colOptions.options.entries() || [].entries()) {
+            // Trim end of enum/set
+            if (column.dt === 'enum' || column.dt === 'set') {
+              option.title = option.title.trimEnd();
+            }
             await SelectOption.insert(
               {
                 ...option,
@@ -274,6 +278,10 @@ export default class Column<T = any> implements ColumnType {
           }
         } else {
           for (const [i, option] of column.colOptions.options.entries() || [].entries()) {
+            // Trim end of enum/set
+            if (column.dt === 'enum' || column.dt === 'set') {
+              option.title = option.title.trimEnd();
+            }
             await SelectOption.insert(
               {
                 ...option,
diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index 4e0a8578a8..ef0bbc439b 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -94,7 +94,7 @@ export default class Model implements TableType {
   public static async insert(
     projectId,
     baseId,
-    model: TableReqType & {
+    model: Partial<TableReqType> & {
       mm?: boolean;
       created_at?: any;
       updated_at?: any;
diff --git a/packages/nocodb/src/lib/utils/projectAcl.ts b/packages/nocodb/src/lib/utils/projectAcl.ts
index a3482a7137..cf0b1f91b8 100644
--- a/packages/nocodb/src/lib/utils/projectAcl.ts
+++ b/packages/nocodb/src/lib/utils/projectAcl.ts
@@ -211,6 +211,7 @@ export default {
 
     // sort & filter
     sortList: true,
+    filterList: true,
     projectInfoGet: true,
 
     galleryViewGet: true,
@@ -240,7 +241,7 @@ export default {
     indexList: true,
     list: true,
     xcExportAsCsv: true,
-    dataCount: true,
+    dataCount: true
   },
   user_new: {
     passwordChange: true,