diff --git a/packages/nc-gui/assets/nc-icons/plus-square.svg b/packages/nc-gui/assets/nc-icons/plus-square.svg
new file mode 100644
index 0000000000..d3750d1bb2
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/plus-square.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="plus-square">
+<path id="Vector" d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8 5.33334V10.6667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M5.33337 8H10.6667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index c403043701..ace7cb0740 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -3,8 +3,8 @@
 @import '@vue-flow/core/dist/theme-default.css';
 
 :root {
-  --sidebar-top-height: 9.75rem;
   --topbar-height: 3.1rem;
+  --sidebar-bottom-height: 8.5rem;
   --new-header-height: 3.5rem;
   --tw-text-opacity: 1;
   --navbar-bg: #FAFAFA;
@@ -90,6 +90,29 @@ main {
   }
 }
 
+.nc-scrollbar-sm-dark {
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+  }
+  &::-webkit-scrollbar-track-piece {
+    width: 0px;
+  }
+  &::-webkit-scrollbar {
+    @apply bg-transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    width: 4px;
+    @apply bg-gray-300 ;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-400;
+  }
+}
+
 .nc-scrollbar-x-md {
   overflow-x: scroll;
 
@@ -505,7 +528,7 @@ a {
   padding: 0 !important;
 }
 .ant-popover-inner-content {
-  @apply !px-1.5 !py-1 text-xs text-white bg-black;
+  @apply !px-1.5 !py-1 text-xs;
 }
 .ant-tooltip-inner {
   @apply !px-1.5 !py-1 text-xs text-white bg-black;
@@ -515,4 +538,8 @@ a {
 
 .ant-skeleton-input {
   @apply !h-full;
+}
+
+.nc-toolbar-dropdown {
+  @apply !rounded-2xl;
 }
\ No newline at end of file
diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 9b24a0e022..0ddacb9883 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -50,6 +50,7 @@ declare module '@vue/runtime-core' {
     AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopover: typeof import('ant-design-vue/es')['Popover']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']
@@ -77,7 +78,6 @@ declare module '@vue/runtime-core' {
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
     CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
-    ClarityColorPickerSolid: typeof import('~icons/clarity/color-picker-solid')['default']
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
     IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
@@ -91,7 +91,6 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsCloseRounded: typeof import('~icons/material-symbols/close-rounded')['default']
     MaterialSymbolsDarkModeOutline: typeof import('~icons/material-symbols/dark-mode-outline')['default']
-    MaterialSymbolsDeleteOutlineRounded: typeof import('~icons/material-symbols/delete-outline-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsKeyboardArrowDownRounded: typeof import('~icons/material-symbols/keyboard-arrow-down-rounded')['default']
     MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
@@ -129,10 +128,8 @@ declare module '@vue/runtime-core' {
     MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
-    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiEye: typeof import('~icons/mdi/eye')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
-    MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']
     MdiLinkVariant: typeof import('~icons/mdi/link-variant')['default']
diff --git a/packages/nc-gui/components/api-client/Params.vue b/packages/nc-gui/components/api-client/Params.vue
index 49e1eaca74..61aa3f1f2c 100644
--- a/packages/nc-gui/components/api-client/Params.vue
+++ b/packages/nc-gui/components/api-client/Params.vue
@@ -23,7 +23,6 @@ const deleteParamRow = (i: number) => {
     <table class="w-full nc-webhooks-params">
       <thead class="h-8">
         <tr>
-          <th></th>
           <th>
             <div class="text-left font-normal ml-2">Parameter Name</div>
           </th>
@@ -40,11 +39,6 @@ const deleteParamRow = (i: number) => {
 
       <tbody>
         <tr v-for="(paramRow, idx) in vModel" :key="idx" class="!h-2 overflow-hidden">
-          <td class="px-2 nc-hook-params-tab-checkbox">
-            <a-form-item class="form-item">
-              <a-checkbox v-model:checked="paramRow.enabled" />
-            </a-form-item>
-          </td>
           <td class="px-2">
             <a-form-item class="form-item">
               <a-input v-model:value="paramRow.name" placeholder="Key" class="!rounded-lg" />
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 38c0d1417d..a7dc723f14 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { isSystemColumn } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   CellClickHookInj,
@@ -236,11 +237,16 @@ const clickHandler = () => {
   }
   cellClickHandler()
 }
+
+const isColDisabled = computed(() => {
+  return isSystemColumn(column.value) || readOnly.value || (localState.value && isPk)
+})
 </script>
 
 <template>
   <a-date-picker
     v-model:value="localState"
+    :disabled="isColDisabled"
     :show-time="true"
     :bordered="false"
     class="!w-full !px-0 !border-none"
@@ -251,7 +257,6 @@ const clickHandler = () => {
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
     :open="readOnly || (localState && isPk) || isLockedMode ? false : open && (active || editable)"
-    :disabled="readOnly || (localState && isPk)"
     @click="clickHandler"
     @ok="open = !open"
   >
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 81782d1bd7..0e9ed08bc6 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, RowHeightInj, inject, useVModel } from '#imports'
+import { EditModeInj, IsExpandedFormOpenInj, RowHeightInj, inject, useVModel, iconMap, ActiveCellInj } from '#imports'
 
 const props = defineProps<{
   modelValue?: string | number
@@ -32,6 +32,8 @@ const isVisible = ref(false)
 const inputWrapperRef = ref<HTMLElement | null>(null)
 const inputRef = ref<HTMLTextAreaElement | null>(null)
 
+const active = inject(ActiveCellInj, ref(false))
+
 watch(isVisible, () => {
   if (isVisible.value) {
     setTimeout(() => {
@@ -86,21 +88,21 @@ onClickOutside(inputWrapperRef, (e) => {
 
       <span v-else>{{ vModel }}</span>
 
-      <NcButton
-        class="!absolute right-0 bottom-0 nc-long-text-toggle-expand !duration-0"
-        :class="{
-          'top-1': rowHeight !== 1,
-          'mt-2': editEnabled,
-          'top-0.15': rowHeight === 1,
-          '!hidden': isExpandedFormOpen,
-        }"
-        type="text"
-        size="xsmall"
+      <div
+        v-if="active"
+        class="!absolute right-0 bottom-0 h-6 w-5 group cursor-pointer flex justify-end gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+        :class="{'right-2 bottom-2':editEnabled}"
+        data-testid="attachment-cell-file-picker-button"
         @click.stop="isVisible = !isVisible"
       >
-        <GeneralIcon v-if="isVisible" icon="shrink" class="nc-long-text-toggle-expand h-3.75 w-3.75 !text-xs" />
-        <GeneralIcon v-else icon="expand" class="nc-long-text-toggle-expand h-3.75 w-3.75 !text-xs" />
-      </NcButton>
+        <NcTooltip placement="bottom">
+            <template #title>Expand</template>
+            <component
+              :is="iconMap.expand"
+              class="transform dark:(!text-white) group-hover:(!text-grey-800 scale-120) text-gray-500 text-xs"
+            />
+        </NcTooltip>
+      </div>
     </div>
     <template #overlay>
       <div ref="inputWrapperRef" class="flex flex-col min-w-120 min-h-70 py-3 pl-3 pr-1 expanded-cell-input">
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index fcef6b4d22..c7dada364a 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -64,6 +64,8 @@ const {
 
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, _isReadonly)
 
+const active = inject(ActiveCellInj, ref(false))
+
 const isReadonly = computed(() => {
   return isLockedMode.value || _isReadonly.value
 })
@@ -147,7 +149,8 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
     :style="{
       height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
     }"
-    class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"
+    class="nc-attachment-cell relative flex color-transition flex items-center"
+    :class="{'justify-center': !active, 'justify-between': active}"
   >
     <LazyCellAttachmentCarousel />
 
@@ -166,20 +169,19 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+      class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       data-testid="attachment-cell-file-picker-button"
       @click.stop="open"
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-      <a-tooltip v-else placement="bottom">
+      <NcTooltip placement="bottom">
         <template #title> Click or drop a file into cell</template>
 
-        <div class="flex items-center gap-1">
+        <div v-if="active || !visibleItems.length" class="flex items-center gap-1">
           <MaterialSymbolsAttachFile
             class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
           />
-
           <div
             v-if="!visibleItems.length"
             class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"
@@ -187,7 +189,7 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
             Add file(s)
           </div>
         </div>
-      </a-tooltip>
+      </NcTooltip>
     </div>
 
     <div v-else class="flex" />
@@ -202,12 +204,12 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
         }"
       >
         <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
-          <a-tooltip placement="bottom">
+          <NcTooltip placement="bottom">
             <template #title>
               <div class="text-center w-full">{{ item.title }}</div>
             </template>
             <div v-if="isImage(item.title, item.mimetype ?? item.type)">
-              <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
+              <div class="nc-attachment flex items-center justify-center" :class="{'ml-2':active}" @click.stop="selectedImage = item">
                 <LazyCellAttachmentImage
                   class="max-h-[1.8rem] max-w-[1.8rem]"
                   :alt="item.title || `#${i}`"
@@ -215,29 +217,30 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
                 />
               </div>
             </div>
-            <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">
+            <div v-else class="nc-attachment flex items-center justify-center" :class="{'ml-2':active}" @click="openAttachment(item)">
               <component :is="FileIcon(item.icon)" v-if="item.icon" />
 
               <IcOutlineInsertDriveFile v-else />
             </div>
-          </a-tooltip>
+          </NcTooltip>
         </template>
       </div>
 
       <div
-        class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+        v-if="active"
+        class="h-6 w-5 group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       >
         <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-        <a-tooltip v-else placement="bottom">
+        <NcTooltip v-else placement="bottom">
           <template #title> View attachments</template>
 
           <component
             :is="iconMap.expand"
-            class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
+            class="transform dark:(!text-white) group-hover:(!text-grey-800 scale-120) text-gray-500 text-[0.75rem]"
             @click.stop="modalVisible = true"
           />
-        </a-tooltip>
+        </NcTooltip>
       </div>
     </template>
 
diff --git a/packages/nc-gui/components/dashboard/Sidebar.vue b/packages/nc-gui/components/dashboard/Sidebar.vue
index 8b5e49ba1b..8ad15ede16 100644
--- a/packages/nc-gui/components/dashboard/Sidebar.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar.vue
@@ -1,144 +1,80 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { useGlobal } from '#imports'
-
-const router = useRouter()
-
-const route = router.currentRoute
-
 const workspaceStore = useWorkspace()
 
-const { activeWorkspace, isWorkspaceOwnerOrCreator } = storeToRefs(workspaceStore)
-
-const projectStore = useProject()
-
-const { isSharedBase } = storeToRefs(projectStore)
-
-const { navigateToWorkspaceSettings } = useWorkspace()
-
-const { isUIAllowed } = useUIPermission()
+const { isWorkspaceLoading } = storeToRefs(workspaceStore)
 
-const dialogOpen = ref(false)
-
-const openDialogKey = ref<string>('')
-
-const dataSourcesState = ref<string>('')
-
-const projectId = ref<string>()
+const { isSharedBase } = storeToRefs(useProject())
 
 const isCreateProjectOpen = ref(false)
 
-function toggleDialog(value?: boolean, key?: string, dsState?: string, pId?: string) {
-  dialogOpen.value = value ?? !dialogOpen.value
-  openDialogKey.value = key || ''
-  dataSourcesState.value = dsState || ''
-  projectId.value = pId || ''
-}
+const treeViewDom = ref<HTMLElement>()
 
-// todo:
-const currentVersion = ref('')
+const isTreeViewOnScrollTop = ref(false)
 
-const isTreeViewOnScrollTop = ref(true)
-const onTreeViewScrollTop = (onScrollTop: boolean) => {
-  isTreeViewOnScrollTop.value = !onScrollTop
+const checkScrollTopMoreThanZero = () => {
+  if (treeViewDom.value) {
+    if (treeViewDom.value.scrollTop > 0) {
+      isTreeViewOnScrollTop.value = true
+    } else {
+      isTreeViewOnScrollTop.value = false
+    }
+  }
+  return false
 }
 
-const { appInfo } = useGlobal()
+onMounted(() => {
+  treeViewDom.value?.addEventListener('scroll', checkScrollTopMoreThanZero)
+})
 
-const navigateToSettings = () => {
-  navigateToWorkspaceSettings()
-}
+onUnmounted(() => {
+  treeViewDom.value?.removeEventListener('scroll', checkScrollTopMoreThanZero)
+})
 </script>
 
 <template>
   <div
-    class="nc-sidebar flex flex-col bg-gray-50 outline-r-1 outline-gray-100 select-none"
+    class="nc-sidebar flex flex-col bg-gray-50 outline-r-1 outline-gray-100 select-none w-full h-full"
     :style="{
       outlineWidth: '1px',
-      height: isSharedBase ? '100%' : null,
     }"
   >
     <div class="flex flex-col">
-      <div style="border-bottom-width: 1px" class="flex items-center px-1 nc-sidebar-header !border-0 py-1.25 pl-2">
-        <div class="flex flex-row flex-grow hover:bg-gray-100 pl-2 pr-1 py-0.5 rounded-md max-w-full">
-          <a
-            v-if="isSharedBase"
-            class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"
-            href="https://github.com/nocodb/nocodb"
-            target="_blank"
-          >
-            <img width="25" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
-          </a>
+      <DashboardSidebarHeader />
 
-          <WorkspaceMenu :workspace="activeWorkspace" :is-open="true">
-            <template #brandIcon>
-              <div
-                v-if="!isSharedBase"
-                v-e="['c:navbar:home']"
-                data-testid="nc-noco-brand-icon"
-                class="w-[29px] min-w-[29px] nc-noco-brand-icon"
-              >
-                <img width="25" class="mr-0" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
-              </div>
-            </template>
-          </WorkspaceMenu>
-        </div>
-      </div>
-
-      <template v-if="!isSharedBase">
-        <div class="h-auto">
-          <div
-            v-if="isWorkspaceOwnerOrCreator"
-            role="button"
-            class="nc-sidebar-top-button"
-            data-testid="nc-sidebar-team-settings-btn"
-            @click="navigateToSettings"
-          >
-            <GeneralIcon icon="settings" class="!h-3.9" />
-            <div>Team & Settings</div>
-          </div>
+      <DashboardSidebarTopSection v-if="!isSharedBase" />
+    </div>
+    <div
+      ref="treeViewDom"
+      class="flex flex-col nc-scrollbar-sm-dark flex-grow"
+      :class="{
+        'border-t-1': !isSharedBase,
+        'border-transparent': !isTreeViewOnScrollTop,
+        'pt-0.25': isSharedBase,
+      }"
+    >
+      <div v-if="!isSharedBase" class="flex flex-row w-full justify-between items-center my-1.5 pl-4 pr-1.75">
+        <template v-if="!isWorkspaceLoading">
+          <div class="text-gray-500 font-medium">{{ $t('objects.projects') }}</div>
           <WorkspaceCreateProjectBtn
-            v-if="isUIAllowed('projectCreate', false)"
             v-model:is-open="isCreateProjectOpen"
             modal
             type="text"
-            class="!p-0 mx-1"
-            data-testid="nc-sidebar-create-project-btn"
-            :active-workspace-id="route.params.typeOrId"
+            size="xxsmall"
+            class="!hover:bg-gray-200 !hover-text-gray-800 !text-gray-600"
+            :centered="true"
+            data-testid="nc-sidebar-create-project-btn-small"
           >
-            <div
-              class="gap-x-2 flex flex-row w-full items-center nc-sidebar-top-button !my-0 !mx-0"
-              :class="{
-                'bg-gray-100': isCreateProjectOpen,
-              }"
-            >
-              <MdiPlus class="!h-4" />
-
-              <div class="flex">{{ $t('title.newProj') }}</div>
-            </div>
+            <GeneralIcon icon="plus" class="text-lg leading-6" style="-webkit-text-stroke: 0.2px" />
           </WorkspaceCreateProjectBtn>
-        </div>
-
-        <div class="w-full mt-2"></div>
+        </template>
+        <a-skeleton-input v-else :active="true" class="mt-0.5 !w-40 !h-4 !rounded overflow-hidden" />
+      </div>
 
-        <div class="text-gray-500 mx-5 font-medium mb-1.5">{{ $t('objects.projects') }}</div>
-        <div
-          class="w-full border-b-1"
-          :class="{
-            'border-gray-200': !isTreeViewOnScrollTop,
-            'border-transparent': isTreeViewOnScrollTop,
-          }"
-        ></div>
-      </template>
+      <LazyDashboardTreeView v-if="!isWorkspaceLoading" />
+    </div>
+    <div v-if="!isSharedBase" style="height: var(--sidebar-bottom-height)">
+      <DashboardSidebarUserInfo />
     </div>
-    <LazyDashboardTreeViewNew
-      class="flex-1"
-      :class="{
-        'nc-shared-base': isSharedBase,
-      }"
-      @create-base-dlg="toggleDialog(true, 'dataSources', undefined, projectId)"
-      @on-scroll-top="onTreeViewScrollTop"
-    />
   </div>
 </template>
 
@@ -146,8 +82,4 @@ const navigateToSettings = () => {
 .nc-sidebar-top-button {
   @apply flex flex-row mx-1 px-3.5 rounded-md items-center py-0.75 my-0.5 gap-x-2 hover:bg-gray-200 cursor-pointer;
 }
-
-:deep(.nc-shared-base.nc-treeview-container) {
-  @apply !h-full;
-}
 </style>
diff --git a/packages/nc-gui/components/dashboard/Sidebar/Header.vue b/packages/nc-gui/components/dashboard/Sidebar/Header.vue
new file mode 100644
index 0000000000..9e73d8fbd3
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/Sidebar/Header.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const workspaceStore = useWorkspace()
+const projectStore = useProject()
+
+const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
+
+const { isSharedBase } = storeToRefs(projectStore)
+const { activeWorkspace, isWorkspaceLoading } = storeToRefs(workspaceStore)
+</script>
+
+<template>
+  <div
+    class="flex items-center px-2 nc-sidebar-header py-1.2 w-full border-b-1 border-gray-200 group"
+    :data-workspace-title="activeWorkspace?.title"
+    style="height: var(--topbar-height)"
+  >
+    <div v-if="!isWorkspaceLoading" class="flex flex-row items-center w-full">
+      <WorkspaceMenu />
+
+      <div class="flex flex-grow min-w-1"></div>
+
+      <NcTooltip
+        class="flex opacity-0 group-hover:opacity-100 transition-opacity duration-50"
+        :class="{
+          '!opacity-100': !isLeftSidebarOpen,
+        }"
+        placement="bottom"
+        hide-on-click
+      >
+        <template #title>
+          {{
+            isLeftSidebarOpen
+              ? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}`
+              : `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}`
+          }}
+        </template>
+        <NcButton
+          type="text"
+          size="small"
+          class="nc-sidebar-left-toggle-icon !text-gray-700 !hover:text-gray-800 !hover:bg-gray-200"
+          @click="isLeftSidebarOpen = !isLeftSidebarOpen"
+        >
+          <div class="flex items-center text-inherit">
+            <GeneralIcon
+              icon="doubleLeftArrow"
+              class="duration-150 transition-all !text-lg -mt-0.5"
+              :class="{
+                'transform rotate-180': !isLeftSidebarOpen,
+              }"
+            />
+          </div>
+        </NcButton>
+      </NcTooltip>
+    </div>
+    <div v-else class="flex flex-row items-center w-full mt-0.25 ml-2.5 gap-x-3">
+      <a-skeleton-input :active="true" class="!w-6 !h-6 !rounded overflow-hidden" />
+      <a-skeleton-input :active="true" class="!w-40 !h-6 !rounded overflow-hidden" />
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
new file mode 100644
index 0000000000..8c77a4a115
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const workspaceStore = useWorkspace()
+const projectStore = useProject()
+
+const { appInfo } = useGlobal()
+
+const { isWorkspaceLoading, isWorkspaceOwnerOrCreator, isWorkspaceSettingsPageOpened } = storeToRefs(workspaceStore)
+
+const { navigateToWorkspaceSettings } = workspaceStore
+
+const { isSharedBase } = storeToRefs(projectStore)
+
+const isCreateProjectOpen = ref(false)
+
+const navigateToSettings = () => {
+  // TODO: Handle cloud case properly
+  navigateToWorkspaceSettings()
+
+  // if (appInfo.value.baseHostName) {
+  //   window.location.href = `https://app.${appInfo.value.baseHostName}/dashboard`
+  // } else {
+  // }
+}
+</script>
+
+<template>
+  <template v-if="isWorkspaceLoading">
+    <div class="flex flex-col w-full gap-y-3.75 ml-3 mt-3.75">
+      <div v-if="appInfo.ee" class="flex flex-row items-center w-full gap-x-3">
+        <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
+        <a-skeleton-input :active="true" class="!w-40 !h-4 !rounded overflow-hidden" />
+      </div>
+      <div class="flex flex-row items-center w-full gap-x-3">
+        <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
+        <a-skeleton-input :active="true" class="!w-40 !h-4 !rounded overflow-hidden" />
+      </div>
+      <div class="flex flex-row items-center w-full gap-x-3">
+        <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
+        <a-skeleton-input :active="true" class="!w-40 !h-4 !rounded overflow-hidden" />
+      </div>
+    </div>
+  </template>
+  <template v-else-if="!isSharedBase">
+    <div class="flex flex-col p-1 gap-y-0.5 mt-0.25">
+      <DashboardSidebarTopSectionHeader />
+
+      <NcButton
+        v-if="isWorkspaceOwnerOrCreator"
+        type="text"
+        size="small"
+        class="nc-sidebar-top-button"
+        data-testid="nc-sidebar-team-settings-btn"
+        :centered="false"
+        :class="{
+          '!text-brand-500 !bg-brand-50 !hover:bg-brand-50': isWorkspaceSettingsPageOpened,
+          '!hover:bg-gray-200': !isWorkspaceSettingsPageOpened,
+        }"
+        @click="navigateToSettings"
+      >
+        <div class="flex items-center gap-2">
+          <GeneralIcon icon="settings" class="!h-4" />
+          <div>Team & Settings</div>
+        </div>
+      </NcButton>
+      <WorkspaceCreateProjectBtn
+        v-model:is-open="isCreateProjectOpen"
+        modal
+        type="text"
+        class="nc-sidebar-top-button !hover:bg-gray-200"
+        data-testid="nc-sidebar-create-project-btn"
+      >
+        <div class="gap-x-2 flex flex-row w-full items-center !font-normal">
+          <GeneralIcon icon="plus" />
+
+          <div class="flex">{{ $t('title.newProj') }}</div>
+        </div>
+      </WorkspaceCreateProjectBtn>
+    </div>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+.nc-sidebar-top-button {
+  @apply w-full !rounded-md !font-normal !px-3;
+}
+</style>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[type]/[viewId]/[[viewTitle]]/[...slugs].vue b/packages/nc-gui/components/dashboard/Sidebar/TopSection/Header.vue
similarity index 100%
rename from packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[type]/[viewId]/[[viewTitle]]/[...slugs].vue
rename to packages/nc-gui/components/dashboard/Sidebar/TopSection/Header.vue
diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
new file mode 100644
index 0000000000..ae913e231e
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import GithubButton from 'vue-github-button'
+
+const { user, signOut, token, appInfo } = useGlobal()
+
+const { clearWorkspaces } = useWorkspace()
+
+const { leftSidebarState } = storeToRefs(useSidebarStore())
+
+const { copy } = useCopy(true)
+
+const name = computed(() => `${user.value?.firstname ?? ''} ${user.value?.lastname ?? ''}`.trim())
+
+const isMenuOpen = ref(false)
+
+const isAuthTokenCopied = ref(false)
+
+const isLoggingOut = ref(false)
+
+const logout = async () => {
+  isLoggingOut.value = true
+  try {
+    await signOut(false)
+
+    await clearWorkspaces()
+
+    await navigateTo('/signin')
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoggingOut.value = false
+  }
+}
+
+const onCopy = async () => {
+  try {
+    await copy(token.value!)
+    isAuthTokenCopied.value = true
+  } catch (e: any) {
+    console.error(e)
+    message.error(e.message)
+  }
+}
+
+watch(isMenuOpen, () => {
+  if (isAuthTokenCopied.value) {
+    isAuthTokenCopied.value = false
+  }
+})
+
+watch(leftSidebarState, () => {
+  if (leftSidebarState.value === 'peekCloseEnd') {
+    isMenuOpen.value = false
+  }
+})
+
+// This is a hack to prevent github button error (prevents navigateTo if user is not signed in)
+const isMounted = ref(false)
+
+onMounted(() => {
+  isMounted.value = true
+})
+</script>
+
+<template>
+  <div class="flex w-full flex-col p-1 border-t-1 border-gray-200 gap-y-2">
+    <NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
+      <div
+        class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10"
+        data-testid="nc-sidebar-userinfo"
+      >
+        <GeneralUserIcon />
+        <div class="flex truncate">
+          {{ name ? name : user?.email }}
+        </div>
+        <GeneralIcon icon="arrowUp" class="!min-w-5" />
+      </div>
+      <template #overlay>
+        <NcMenu>
+          <NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
+            <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
+            <GeneralIcon v-else icon="signout" class="menu-icon" />
+            Log Out</NcMenuItem
+          >
+          <NcDivider />
+          <a href="https://docs.nocodb.com" target="_blank" class="!underline-transparent">
+            <NcMenuItem>
+              <GeneralIcon icon="help" class="menu-icon" />
+              Help Center</NcMenuItem
+            >
+          </a>
+          <NcDivider />
+          <a href="https://discord.gg/5RgZmkW" target="_blank" class="!underline-transparent">
+            <NcMenuItem class="social-icon-wrapper"
+              ><GeneralIcon class="social-icon" icon="discord" />Join our Discord</NcMenuItem
+            >
+          </a>
+          <a href="https://www.reddit.com/r/NocoDB" target="_blank" class="!underline-transparent">
+            <NcMenuItem class="social-icon-wrapper"><GeneralIcon class="social-icon" icon="reddit" />/r/NocoDB</NcMenuItem>
+          </a>
+          <a href="https://twitter.com/nocodb" target="_blank" class="!underline-transparent">
+            <NcMenuItem class="social-icon-wrapper group"
+              ><GeneralIcon class="text-gray-500 group-hover:text-gray-800" icon="twitter" />Twitter</NcMenuItem
+            >
+          </a>
+          <template v-if="!appInfo.ee">
+            <NcDivider />
+            <a-popover key="language" class="lang-menu !py-0" placement="rightBottom">
+              <NcMenuItem>
+                <GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
+                {{ $t('labels.language') }}
+                <div class="flex items-center text-gray-400 text-xs">(Community Translated)</div>
+                <div class="flex-1" />
+
+                <MaterialSymbolsChevronRightRounded class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" />
+              </NcMenuItem>
+
+              <template #content>
+                <div class="bg-white max-h-50vh scrollbar-thin-dull min-w-50 !overflow-auto">
+                  <LazyGeneralLanguageMenu />
+                </div>
+              </template>
+            </a-popover>
+          </template>
+
+          <NcDivider />
+          <NcMenuItem @click="onCopy"
+            ><GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" /><GeneralIcon
+              v-else
+              icon="copy"
+              class="menu-icon"
+            />
+            <template v-if="isAuthTokenCopied"> Copied Auth Token </template>
+            <template v-else> Copy Auth Token </template>
+          </NcMenuItem>
+          <nuxt-link v-e="['c:navbar:user:email']" class="!no-underline" to="/account/tokens">
+            <NcMenuItem><GeneralIcon icon="settings" class="menu-icon" /> Account Settings</NcMenuItem>
+          </nuxt-link>
+        </NcMenu>
+      </template>
+    </NcDropdown>
+
+    <div v-if="appInfo.ee" class="text-gray-500 text-xs pl-3">© 2023 NocoDB. Inc</div>
+    <div v-else-if="isMounted" class="flex flex-col gap-y-1 pt-1">
+      <div class="flex items-start flex-row justify-center px-2 gap-2">
+        <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large">
+          Star
+        </GithubButton>
+      </div>
+
+      <div class="flex items-start flex-row justify-center gap-2">
+        <GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menu-icon {
+  @apply !min-h-4.5;
+  line-height: 1rem;
+  font-size: 1.125rem;
+}
+
+:deep(.ant-popover-inner-content) {
+  @apply !p-0 !rounded-md;
+}
+.social-icon {
+  // Make icon black and white
+  filter: grayscale(100%);
+
+  // Make icon red on hover
+  &:hover {
+    filter: grayscale(100%) invert(100%);
+  }
+}
+
+.social-icon-wrapper {
+  .nc-icon {
+    @apply mr-0.15;
+  }
+  &:hover {
+    .social-icon {
+      filter: none !important;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
deleted file mode 100644
index 9e7151cba7..0000000000
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ /dev/null
@@ -1,1475 +0,0 @@
-<script setup lang="ts">
-import { nextTick } from '@vue/runtime-core'
-import type { TableType } from 'nocodb-sdk'
-import type { Input } from 'ant-design-vue'
-import { Dropdown, Tooltip, message } from 'ant-design-vue'
-import Sortable from 'sortablejs'
-// import GithubButton from 'vue-github-button'
-import { Icon as IconifyIcon } from '@iconify/vue'
-import type { VNodeRef } from '#imports'
-import {
-  ClientType,
-  Empty,
-  JobStatus,
-  TabType,
-  computed,
-  extractSdkResponseErrorMsg,
-  iconMap,
-  isDrawerOrModalExist,
-  isMac,
-  parseProp,
-  reactive,
-  ref,
-  resolveComponent,
-  storeToRefs,
-  useDialog,
-  useGlobal,
-  useNuxtApp,
-  useProject,
-  useRoute,
-  useTable,
-  useTabs,
-  useToggle,
-  useUIPermission,
-  useUndoRedo,
-  watchEffect,
-} from '#imports'
-
-const { isMobileMode } = useGlobal()
-
-const { addTab, updateTab } = useTabs()
-
-const { $api, $e, $jobs } = useNuxtApp()
-
-const projectStore = useProject()
-
-const { loadTables } = projectStore
-const { bases, tables, isSharedBase, project } = storeToRefs(projectStore)
-
-const { activeTab } = storeToRefs(useTabs())
-
-const { deleteTable } = useTable()
-
-const { isUIAllowed } = useUIPermission()
-
-const route = useRoute()
-
-const [searchActive, toggleSearchActive] = useToggle()
-
-const { appInfo } = useGlobal()
-
-const { addUndo, defineProjectScope } = useUndoRedo()
-
-const toggleDialog = inject(ToggleDialogInj, () => {})
-
-const keys = ref<Record<string, number>>({})
-
-const activeKey = ref<string[]>([])
-
-const menuRefs = ref<HTMLElement[] | HTMLElement>()
-
-const filterQuery = ref('')
-
-const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
-
-const tablesById = computed(() =>
-  tables.value?.reduce<Record<string, TableType>>((acc, table) => {
-    acc[table.id!] = table
-
-    return acc
-  }, {}),
-)
-
-const filteredTables = computed(() =>
-  tables.value?.filter(
-    (table) => !searchActive.value || !filterQuery.value || table.title.toLowerCase().includes(filterQuery.value.toLowerCase()),
-  ),
-)
-
-const sortables: Record<string, Sortable> = {}
-
-// todo: replace with vuedraggable
-const initSortable = (el: Element) => {
-  const base_id = el.getAttribute('nc-base')
-  if (!base_id) return
-  if (sortables[base_id]) sortables[base_id].destroy()
-  Sortable.create(el as HTMLLIElement, {
-    onEnd: async (evt) => {
-      const { newIndex = 0, oldIndex = 0 } = evt
-
-      if (newIndex === oldIndex) return
-
-      const itemEl = evt.item as HTMLLIElement
-      const item = tablesById.value[itemEl.dataset.id as string]
-
-      // store the old order for undo
-      const oldOrder = item.order
-
-      // get the html collection of all list items
-      const children: HTMLCollection = evt.to.children
-
-      // skip if children count is 1
-      if (children.length < 2) return
-
-      // get items before and after the moved item
-      const itemBeforeEl = children[newIndex - 1] as HTMLLIElement
-      const itemAfterEl = children[newIndex + 1] as HTMLLIElement
-
-      // get items meta of before and after the moved item
-      const itemBefore = itemBeforeEl && tablesById.value[itemBeforeEl.dataset.id as string]
-      const itemAfter = itemAfterEl && tablesById.value[itemAfterEl.dataset.id as string]
-
-      // set new order value based on the new order of the items
-      if (children.length - 1 === evt.newIndex) {
-        item.order = (itemBefore.order as number) + 1
-      } else if (newIndex === 0) {
-        item.order = (itemAfter.order as number) / 2
-      } else {
-        item.order = ((itemBefore.order as number) + (itemAfter.order as number)) / 2
-      }
-
-      // find the index of the moved item
-      const itemIndex = tables.value?.findIndex((table) => table.id === item.id)
-
-      // move the item to the new position
-      if (itemBefore) {
-        // find the index of the item before the moved item
-        const itemBeforeIndex = tables.value?.findIndex((table) => table.id === itemBefore.id)
-        tables.value?.splice(itemBeforeIndex + (newIndex > oldIndex ? 0 : 1), 0, ...tables.value?.splice(itemIndex, 1))
-      } else {
-        // if the item before is undefined (moving item to first slot), then find the index of the item after the moved item
-        const itemAfterIndex = tables.value?.findIndex((table) => table.id === itemAfter.id)
-        tables.value?.splice(itemAfterIndex, 0, ...tables.value?.splice(itemIndex, 1))
-      }
-
-      // force re-render the list
-      if (keys.value[base_id]) {
-        keys.value[base_id] = keys.value[base_id] + 1
-      } else {
-        keys.value[base_id] = 1
-      }
-
-      // update the item order
-      await $api.dbTable.reorder(item.id as string, {
-        order: item.order,
-      })
-
-      const nextIndex = tables.value?.findIndex((table) => table.id === item.id)
-
-      addUndo({
-        undo: {
-          fn: async (id: string, order: number, index: number) => {
-            const itemIndex = tables.value.findIndex((table) => table.id === id)
-            if (itemIndex < 0) return
-            const item = tables.value[itemIndex]
-            item.order = order
-            tables.value?.splice(index, 0, ...tables.value?.splice(itemIndex, 1))
-            await $api.dbTable.reorder(item.id as string, {
-              order: item.order,
-            })
-          },
-          args: [item.id, oldOrder, itemIndex],
-        },
-        redo: {
-          fn: async (id: string, order: number, index: number) => {
-            const itemIndex = tables.value.findIndex((table) => table.id === id)
-            if (itemIndex < 0) return
-            const item = tables.value[itemIndex]
-            item.order = order
-            tables.value?.splice(index, 0, ...tables.value?.splice(itemIndex, 1))
-            await $api.dbTable.reorder(item.id as string, {
-              order: item.order,
-            })
-          },
-          args: [item.id, item.order, nextIndex],
-        },
-        scope: defineProjectScope({ project: project.value }),
-      })
-    },
-    animation: 150,
-    setData(dataTransfer, dragEl) {
-      dataTransfer.setData(
-        'text/json',
-        JSON.stringify({
-          id: dragEl.dataset.id,
-          title: dragEl.dataset.title,
-          type: dragEl.dataset.type,
-          baseId: dragEl.dataset.baseId,
-        }),
-      )
-    },
-    revertOnSpill: true,
-  })
-}
-
-watchEffect(() => {
-  if (menuRefs.value) {
-    if (menuRefs.value instanceof HTMLElement) {
-      initSortable(menuRefs.value)
-    } else {
-      menuRefs.value.forEach((el) => initSortable(el))
-    }
-  }
-})
-
-const icon = (table: TableType) => {
-  if (table.type === 'table') {
-    return iconMap.table
-  }
-  if (table.type === 'view') {
-    return iconMap.view
-  }
-}
-
-const contextMenuTarget = reactive<{ type?: 'base' | 'table' | 'main' | 'layout'; value?: any }>({})
-
-const setMenuContext = (type: 'base' | 'table' | 'main', value?: any) => {
-  contextMenuTarget.type = type
-  contextMenuTarget.value = value
-}
-
-const reloadTables = async () => {
-  $e('a:table:refresh:navdraw')
-
-  await loadTables()
-}
-
-const addTableTab = (table: TableType) => {
-  addTab({ title: table.title, id: table.id, type: table.type as TabType })
-}
-
-function openRenameTableDialog(table: TableType, baseId?: string, rightClick = false) {
-  $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgTableRename'), {
-    'v-if': table && (baseId || bases.value[0].id),
-    'modelValue': isOpen,
-    'tableMeta': table,
-    'baseId': baseId || bases.value[0].id,
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-function openQuickImportDialog(type: string, baseId?: string) {
-  $e(`a:actions:import-${type}`)
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgQuickImport'), {
-    'modelValue': isOpen,
-    'importType': type,
-    'baseId': baseId || bases.value[0].id,
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-function openAirtableImportDialog(baseId?: string) {
-  $e('a:actions:import-airtable')
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgAirtableImport'), {
-    'modelValue': isOpen,
-    'baseId': baseId || bases.value[0].id,
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-function scrollToTable(table: TableType) {
-  // get the table node in the tree view using the data-id attribute
-  const el = document.querySelector(`.nc-tree-item[data-id="${table?.id}"]`)
-  // scroll to the table node if found
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-  }
-}
-
-function openTableCreateDialog(baseId?: string) {
-  $e('c:table:create:navdraw')
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgTableCreate'), {
-    'v-if': baseId || bases.value[0].id,
-    'modelValue': isOpen,
-    'baseId': baseId || bases.value[0].id,
-    'onUpdate:modelValue': closeDialog,
-    'onCreate': (table: TableType) => {
-      // on new table created scroll to the table in the tree view
-      nextTick(() => {
-        scrollToTable(table)
-      })
-    },
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-function openTableCreateMagicDialog(baseId?: string) {
-  $e('c:table:create:navdraw')
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgTableMagic'), {
-    'v-if': baseId || bases.value[0].id,
-    'modelValue': isOpen,
-    'baseId': baseId || bases.value[0].id,
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-function openSchemaMagicDialog(baseId?: string) {
-  $e('c:table:create:navdraw')
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgSchemaMagic'), {
-    'modelValue': isOpen,
-    'baseId': baseId || bases.value[0].id,
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-/*
-function openErdView(base?: BaseType) {
-  if (!base) base = bases.value?.filter((base: BaseType) => base.enabled)[0]
-  navigateTo(`/${route.params.projectType}/${route.params.projectId}/erd/${base.id}`)
-}
-*/
-
-const searchInputRef: VNodeRef = (vnode: typeof Input) => vnode?.$el?.focus()
-
-const beforeSearch = ref<string[]>([])
-
-const onSearchCloseIconClick = () => {
-  filterQuery.value = ''
-  toggleSearchActive(false)
-  activeKey.value = beforeSearch.value
-}
-
-const onSearchIconClick = () => {
-  beforeSearch.value = activeKey.value
-  toggleSearchActive(true)
-  activeKey.value = bases.value.filter((el) => el.enabled).map((el) => `collapse-${el.id}`)
-}
-
-const isCreateTableAllowed = computed(
-  () =>
-    isUIAllowed('table-create') &&
-    route.name !== 'index' &&
-    route.name !== 'index-index' &&
-    route.name !== 'index-index-create' &&
-    route.name !== 'index-index-create-external' &&
-    route.name !== 'index-user-index',
-)
-
-useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
-  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
-  if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
-    switch (e.keyCode) {
-      case 84: {
-        // ALT + T
-        if (isCreateTableAllowed.value && !isDrawerOrModalExist()) {
-          // prevent the key `T` is inputted to table title input
-          e.preventDefault()
-          $e('c:shortcut', { key: 'ALT + T' })
-          openTableCreateDialog()
-        }
-        break
-      }
-    }
-  }
-})
-
-watch(
-  activeTable,
-  (value, oldValue) => {
-    let tableTitle
-    if (value) {
-      if (value !== oldValue) {
-        const fndTable = tables.value.find((el) => el.id === value)
-        if (fndTable) {
-          activeKey.value = [`collapse-${fndTable.base_id}`]
-          tableTitle = fndTable.title
-        }
-      }
-    } else {
-      const table = bases.value.filter((el) => el.enabled)[0]
-      if (table?.id) {
-        activeKey.value = [`collapse-${table.id}`]
-      }
-      if (table?.title) {
-        tableTitle = table.title
-      }
-    }
-    if (project.value.title && tableTitle) {
-      document.title = `${project.value.title}: ${tableTitle}`
-    } else {
-      document.title = 'NocoDB'
-    }
-  },
-  { immediate: true },
-)
-
-const setIcon = async (icon: string, table: TableType) => {
-  try {
-    table.meta = {
-      ...parseProp(table.meta),
-      icon,
-    }
-    tables.value.splice(tables.value.indexOf(table), 1, { ...table })
-
-    updateTab({ id: table.id }, { meta: table.meta })
-
-    $api.dbTable.update(table.id as string, {
-      meta: table.meta,
-    })
-
-    $e('a:table:icon:navdraw', { icon })
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const handleContext = (e: MouseEvent) => {
-  if (!document.querySelector('.base-context, .table-context')?.contains(e.target as Node)) {
-    setMenuContext('main')
-  }
-}
-
-useEventListener(document, 'contextmenu', handleContext, true)
-
-const duplicateTable = async (table: TableType) => {
-  if (!table || !table.id || !table.project_id) return
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgTableDuplicate'), {
-    'v-if': table,
-    'modelValue': isOpen,
-    'table': table,
-    'onOk': async (jobData: { id: string }) => {
-      $jobs.subscribe({ id: jobData.id }, undefined, async (status: string, data?: any) => {
-        if (status === JobStatus.COMPLETED) {
-          await loadTables()
-          const newTable = tables.value.find((el) => el.id === data?.result?.id)
-          if (newTable) addTableTab(newTable)
-          await nextTick(() => {
-            scrollToTable(newTable)
-          })
-        } else if (status === JobStatus.FAILED) {
-          message.error('Failed to duplicate table')
-          await loadTables()
-        }
-      })
-
-      $e('a:table:duplicate')
-    },
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-</script>
-
-<template>
-  <div class="nc-treeview-container flex flex-col">
-    <a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
-      <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
-        <div
-          v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length"
-          class="base-context min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
-          @contextmenu="setMenuContext('base', bases[0])"
-        >
-          <Transition name="slide-left" mode="out-in">
-            <a-input
-              v-if="searchActive"
-              :ref="searchInputRef"
-              v-model:value="filterQuery"
-              class="flex-1 rounded"
-              :placeholder="$t('placeholder.searchProjectTree')"
-            />
-
-            <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
-              {{ $t('objects.tables') }}
-
-              <template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
-                ({{ tables.filter((table) => table.base_id === bases[0].id).length }})
-              </template>
-            </span>
-          </Transition>
-
-          <Transition name="layout" mode="out-in">
-            <GeneralIcon
-              v-if="searchActive"
-              icon="close"
-              class="text-gray-500 text-lg mx-1 mt-0.5"
-              @click="onSearchCloseIconClick"
-            />
-            <GeneralIcon v-else icon="search" class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
-          </Transition>
-        </div>
-        <div
-          v-else
-          class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
-          @contextmenu="setMenuContext('main')"
-        >
-          <Transition name="slide-left" mode="out-in">
-            <a-input
-              v-if="searchActive"
-              :ref="searchInputRef"
-              v-model:value="filterQuery"
-              class="flex-1 rounded"
-              :placeholder="$t('placeholder.searchProjectTree')"
-            />
-
-            <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
-              BASES
-              <template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
-                ({{ bases.filter((el) => el.enabled).length }})
-              </template>
-            </span>
-          </Transition>
-
-          <Transition name="slide-right" mode="out-in">
-            <GeneralIcon
-              v-if="searchActive"
-              icon="close"
-              class="text-gray-500 text-lg mx-1 mt-0.5"
-              @click="onSearchCloseIconClick"
-            />
-            <component :is="iconMap.search" v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchIconClick" />
-          </Transition>
-
-          <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
-            <Transition name="slide-right" mode="out-in">
-              <GeneralIcon v-if="!searchActive" icon="threeDotVertical" class="hover:text-accent outline-0" />
-            </Transition>
-
-            <template #overlay>
-              <a-menu class="!py-0 rounded text-sm">
-                <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
-                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
-                    <div class="color-transition nc-project-menu-item group">
-                      <LogosMysqlIcon class="group-hover:text-accent" />
-                      MySQL
-                    </div>
-                  </a-menu-item>
-                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
-                    <div class="color-transition nc-project-menu-item group">
-                      <LogosPostgresql class="group-hover:text-accent" />
-                      Postgres
-                    </div>
-                  </a-menu-item>
-                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
-                    <div class="color-transition nc-project-menu-item group">
-                      <VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
-                      SQLite
-                    </div>
-                  </a-menu-item>
-                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
-                    <div class="color-transition nc-project-menu-item group">
-                      <SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
-                      MSSQL
-                    </div>
-                  </a-menu-item>
-                  <a-menu-item
-                    v-if="appInfo.ee && false"
-                    key="connect-new-source"
-                    @click="toggleDialog(true, 'dataSources', ClientType.SNOWFLAKE)"
-                  >
-                    <div class="color-transition nc-project-menu-item group">
-                      <LogosSnowflakeIcon class="group-hover:text-accent" />
-                      Snowflake
-                    </div>
-                  </a-menu-item>
-                </a-menu-item-group>
-
-                <a-menu-divider class="my-0" />
-
-                <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
-                  <a
-                    v-e="['e:datasource:import-request']"
-                    href="https://github.com/nocodb/nocodb/issues/2052"
-                    target="_blank"
-                    class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
-                  >
-                    <GeneralIcon icon="openInNew" class="group-hover:text-accent" />
-                    <!-- Request a data source you need? -->
-                    {{ $t('labels.requestDataSource') }}
-                  </a>
-                </a-menu-item>
-              </a-menu>
-            </template>
-          </a-dropdown>
-        </div>
-
-        <div v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length" class="flex-1">
-          <div
-            v-if="isUIAllowed('table-create')"
-            class="group flex items-center gap-2 pl-2 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
-            @click="openTableCreateDialog(bases[0].id)"
-          >
-            <GeneralIcon icon="plus" class="w-5" />
-
-            <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
-
-            <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
-              <GeneralIcon
-                icon="threeDotVertical"
-                class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0"
-              />
-
-              <template #overlay>
-                <a-menu class="!py-0 rounded text-sm">
-                  <a-menu-item-group class="!px-0 !mx-0">
-                    <template #title>
-                      <div class="flex items-center">
-                        Noco
-                        <GeneralIcon icon="magic" class="ml-1 text-orange-400" />
-                      </div>
-                    </template>
-                    <a-menu-item key="table-magic" @click="openTableCreateMagicDialog(bases[0].id)">
-                      <div class="color-transition nc-project-menu-item group">
-                        <GeneralIcon icon="magic1" class="group-hover:text-accent" />
-                        Create table
-                      </div>
-                    </a-menu-item>
-                    <a-menu-item key="schema-magic" @click="openSchemaMagicDialog(bases[0].id)">
-                      <div class="color-transition nc-project-menu-item group">
-                        <GeneralIcon icon="magic1" class="group-hover:text-accent" />
-                        Create schema
-                      </div>
-                    </a-menu-item>
-                  </a-menu-item-group>
-
-                  <a-menu-divider class="my-0" />
-
-                  <!--                  Quick Import From -->
-                  <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
-                    <a-menu-item
-                      v-if="isUIAllowed('airtableImport')"
-                      key="quick-import-airtable"
-                      @click="openAirtableImportDialog(bases[0].id)"
-                    >
-                      <div class="color-transition nc-project-menu-item group">
-                        <GeneralIcon icon="table" class="group-hover:text-accent" />
-                        Airtable
-                      </div>
-                    </a-menu-item>
-
-                    <a-menu-item
-                      v-if="isUIAllowed('csvImport')"
-                      key="quick-import-csv"
-                      @click="openQuickImportDialog('csv', bases[0].id)"
-                    >
-                      <div class="color-transition nc-project-menu-item group">
-                        <GeneralIcon icon="csv" class="group-hover:text-accent" />
-                        CSV file
-                      </div>
-                    </a-menu-item>
-
-                    <a-menu-item
-                      v-if="isUIAllowed('jsonImport')"
-                      key="quick-import-json"
-                      @click="openQuickImportDialog('json', bases[0].id)"
-                    >
-                      <div class="color-transition nc-project-menu-item group">
-                        <GeneralIcon icon="code" class="group-hover:text-accent" />
-                        JSON file
-                      </div>
-                    </a-menu-item>
-
-                    <a-menu-item
-                      v-if="isUIAllowed('excelImport')"
-                      key="quick-import-excel"
-                      @click="openQuickImportDialog('excel', bases[0].id)"
-                    >
-                      <div class="color-transition nc-project-menu-item group">
-                        <GeneralIcon icon="excel" class="group-hover:text-accent" />
-                        Microsoft Excel
-                      </div>
-                    </a-menu-item>
-                  </a-menu-item-group>
-
-                  <a-menu-divider class="my-0" />
-
-                  <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
-                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
-                      <div class="color-transition nc-project-menu-item group">
-                        <LogosMysqlIcon class="group-hover:text-accent" />
-                        MySQL
-                      </div>
-                    </a-menu-item>
-                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
-                      <div class="color-transition nc-project-menu-item group">
-                        <LogosPostgresql class="group-hover:text-accent" />
-                        Postgres
-                      </div>
-                    </a-menu-item>
-                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
-                      <div class="color-transition nc-project-menu-item group">
-                        <VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
-                        SQLite
-                      </div>
-                    </a-menu-item>
-                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
-                      <div class="color-transition nc-project-menu-item group">
-                        <SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
-                        MSSQL
-                      </div>
-                    </a-menu-item>
-                    <a-menu-item
-                      v-if="appInfo.ee && false"
-                      key="connect-new-source"
-                      @click="toggleDialog(true, 'dataSources', ClientType.SNOWFLAKE)"
-                    >
-                      <div class="color-transition nc-project-menu-item group">
-                        <LogosSnowflakeIcon class="group-hover:text-accent" />
-                        Snowflake
-                      </div>
-                    </a-menu-item>
-                  </a-menu-item-group>
-
-                  <a-menu-divider class="my-0" />
-
-                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
-                    <a
-                      v-e="['e:datasource:import-request']"
-                      href="https://github.com/nocodb/nocodb/issues/2052"
-                      target="_blank"
-                      class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
-                    >
-                      <GeneralIcon icon="openInNew" class="group-hover:text-accent" />
-                      <!-- Request a data source you need? -->
-                      {{ $t('labels.requestDataSource') }}
-                    </a>
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </div>
-
-          <div class="transition-height duration-200">
-            <div class="border-none sortable-list">
-              <div v-if="bases[0]" :key="`base-${bases[0].id}`">
-                <div
-                  v-if="bases[0] && bases[0].enabled"
-                  ref="menuRefs"
-                  :key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
-                  :nc-base="bases[0].id"
-                >
-                  <div
-                    v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
-                    :key="table.id"
-                    v-e="['a:table:open']"
-                    :class="[
-                      { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
-                      `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
-                    ]"
-                    class="nc-tree-item text-sm cursor-pointer group"
-                    :data-order="table.order"
-                    :data-id="table.id"
-                    :data-base-id="bases[0].id"
-                    :data-type="table.type"
-                    :data-title="table.title"
-                    :data-testid="`tree-view-table-${table.title}`"
-                    @click="addTableTab(table)"
-                  >
-                    <GeneralTooltip class="pl-2 pr-3 py-2" modifier-key="Alt">
-                      <template #title>{{ table.table_name }}</template>
-                      <div class="table-context flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                          <component
-                            :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
-                            trigger="click"
-                            destroy-popup-on-hide
-                            class="flex items-center"
-                            @click.stop
-                          >
-                            <div class="flex items-center" @click.stop>
-                              <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
-                                <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
-                                  <IconifyIcon
-                                    :key="table.meta?.icon"
-                                    :data-testid="`nc-icon-${table.meta?.icon}`"
-                                    class="text-xl"
-                                    :icon="table.meta?.icon"
-                                  ></IconifyIcon>
-                                </span>
-                                <component
-                                  :is="icon(table)"
-                                  v-else
-                                  class="nc-table-icon nc-view-icon w-5"
-                                  :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                                />
-
-                                <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
-                              </component>
-                            </div>
-                            <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
-                              <GeneralEmojiIcons
-                                class="shadow bg-white p-2"
-                                :show-reset="!!table.meta?.icon"
-                                @select-icon="setIcon($event, table)"
-                              />
-                            </template>
-                          </component>
-                        </div>
-
-                        <div class="nc-tbl-title flex-1">
-                          <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
-                            table.title
-                          }}</GeneralTruncateText>
-                        </div>
-
-                        <a-dropdown
-                          v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
-                          :trigger="['click']"
-                          @click.stop
-                        >
-                          <GeneralIcon
-                            icon="threeDotVertical"
-                            class="transition-opacity opacity-0 group-hover:opacity-100 outline-0"
-                          />
-
-                          <template #overlay>
-                            <a-menu class="!py-0 rounded text-sm">
-                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
-                                <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
-                                  {{ $t('general.rename') }}
-                                </div>
-                              </a-menu-item>
-
-                              <a-menu-item v-if="isUIAllowed('table-duplicate')" @click="duplicateTable(table)">
-                                <div class="nc-project-menu-item" :data-testid="`sidebar-table-duplicate-${table.title}`">
-                                  {{ $t('general.duplicate') }}
-                                </div>
-                              </a-menu-item>
-
-                              <a-menu-item
-                                v-if="isUIAllowed('table-delete')"
-                                :data-testid="`sidebar-table-delete-${table.title}`"
-                                @click="deleteTable(table)"
-                              >
-                                <div class="nc-project-menu-item">
-                                  {{ $t('general.delete') }}
-                                </div>
-                              </a-menu-item>
-                            </a-menu>
-                          </template>
-                        </a-dropdown>
-                      </div>
-                    </GeneralTooltip>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div
-            v-if="!tables.filter((table) => table.base_id === bases[0].id)?.length"
-            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 v-else class="transition-height duration-200">
-          <div class="border-none sortable-list">
-            <div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
-              <a-collapse
-                v-if="base && base.enabled"
-                v-model:activeKey="activeKey"
-                :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
-                expand-icon-position="right"
-                :bordered="false"
-                :accordion="!searchActive"
-                ghost
-              >
-                <a-collapse-panel :key="`collapse-${base.id}`">
-                  <template #header>
-                    <div
-                      v-if="index === '0'"
-                      class="base-context flex items-center gap-2 text-gray-500 font-bold"
-                      @contextmenu="setMenuContext('base', base)"
-                    >
-                      <GeneralBaseLogo :base-type="base.type" />
-                      Default ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
-                    </div>
-                    <div
-                      v-else
-                      class="base-context flex items-center gap-2 text-gray-500 font-bold"
-                      @contextmenu="setMenuContext('base', base)"
-                    >
-                      <GeneralBaseLogo :base-type="base.type" />
-                      {{ base.alias || '' }}
-                      ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
-                    </div>
-                  </template>
-                  <div
-                    v-if="index === '0' && isUIAllowed('table-create')"
-                    class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
-                    @click="openTableCreateDialog(bases[0].id)"
-                  >
-                    <component :is="iconMap.plus" />
-
-                    <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
-                      $t('tooltip.addTable')
-                    }}</span>
-
-                    <a-dropdown
-                      v-if="!isSharedBase"
-                      :trigger="['click']"
-                      overlay-class-name="nc-dropdown-import-menu"
-                      @click.stop
-                    >
-                      <component
-                        :is="iconMap.threeDotVertical"
-                        class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0"
-                      />
-
-                      <template #overlay>
-                        <a-menu class="!py-0 rounded text-sm">
-                          <a-menu-item-group class="!px-0 !mx-0">
-                            <template #title>
-                              <div class="flex items-center">
-                                Noco
-                                <GeneralIcon icon="magic" class="ml-1 text-orange-400" />
-                              </div>
-                            </template>
-                            <a-menu-item key="table-magic" @click="openTableCreateMagicDialog(bases[0].id)">
-                              <div class="color-transition nc-project-menu-item group">
-                                <GeneralIcon icon="magic1" class="group-hover:text-accent" />
-                                Create table
-                              </div>
-                            </a-menu-item>
-                            <a-menu-item key="schema-magic" @click="openSchemaMagicDialog(bases[0].id)">
-                              <div class="color-transition nc-project-menu-item group">
-                                <GeneralIcon icon="magic1" class="group-hover:text-accent" />
-                                Create schema
-                              </div>
-                            </a-menu-item>
-                          </a-menu-item-group>
-
-                          <a-menu-divider class="my-0" />
-
-                          <!--                  Quick Import From -->
-                          <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
-                            <a-menu-item
-                              v-if="isUIAllowed('airtableImport')"
-                              key="quick-import-airtable"
-                              @click="openAirtableImportDialog(bases[0].id)"
-                            >
-                              <div class="color-transition nc-project-menu-item group">
-                                <component :is="iconMap.airtable" class="group-hover:text-accent" />
-                                Airtable
-                              </div>
-                            </a-menu-item>
-
-                            <a-menu-item
-                              v-if="isUIAllowed('csvImport')"
-                              key="quick-import-csv"
-                              @click="openQuickImportDialog('csv', bases[0].id)"
-                            >
-                              <div class="color-transition nc-project-menu-item group">
-                                <component :is="iconMap.csv" class="group-hover:text-accent" />
-                                CSV file
-                              </div>
-                            </a-menu-item>
-
-                            <a-menu-item
-                              v-if="isUIAllowed('jsonImport')"
-                              key="quick-import-json"
-                              @click="openQuickImportDialog('json', bases[0].id)"
-                            >
-                              <div class="color-transition nc-project-menu-item group">
-                                <component :is="iconMap.json" class="group-hover:text-accent" />
-                                JSON file
-                              </div>
-                            </a-menu-item>
-
-                            <a-menu-item
-                              v-if="isUIAllowed('excelImport')"
-                              key="quick-import-excel"
-                              @click="openQuickImportDialog('excel', bases[0].id)"
-                            >
-                              <div class="color-transition nc-project-menu-item group">
-                                <component :is="iconMap.excel" class="group-hover:text-accent" />
-                                Microsoft Excel
-                              </div>
-                            </a-menu-item>
-                          </a-menu-item-group>
-
-                          <a-menu-divider class="my-0" />
-
-                          <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
-                            <a
-                              v-e="['e:datasource:import-request']"
-                              href="https://github.com/nocodb/nocodb/issues/2052"
-                              target="_blank"
-                              class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
-                            >
-                              <component :is="iconMap.share" class="group-hover:text-accent" />
-                              <!-- Request a data source you need? -->
-                              {{ $t('labels.requestDataSource') }}
-                            </a>
-                          </a-menu-item>
-                        </a-menu>
-                      </template>
-                    </a-dropdown>
-                  </div>
-                  <div
-                    v-else-if="isUIAllowed('table-create')"
-                    class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
-                    @click="openTableCreateDialog(base.id)"
-                  >
-                    <component :is="iconMap.plus" />
-
-                    <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
-                      $t('tooltip.addTable')
-                    }}</span>
-
-                    <a-dropdown
-                      v-if="!isSharedBase"
-                      :trigger="['click']"
-                      overlay-class-name="nc-dropdown-import-menu"
-                      @click.stop
-                    >
-                      <component
-                        :is="iconMap.threeDotVertical"
-                        class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0"
-                      />
-
-                      <template #overlay>
-                        <a-menu class="!py-0 rounded text-sm">
-                          <a-menu-item-group class="!px-0 !mx-0">
-                            <template #title>
-                              <div class="flex items-center">
-                                Noco
-                                <GeneralIcon icon="magic" class="ml-1 text-orange-400" />
-                              </div>
-                            </template>
-                            <a-menu-item key="table-magic" @click="openTableCreateMagicDialog(base.id)">
-                              <div class="color-transition nc-project-menu-item group">
-                                <GeneralIcon icon="magic1" class="group-hover:text-accent" />
-                                Create table
-                              </div>
-                            </a-menu-item>
-                            <a-menu-item key="schema-magic" @click="openSchemaMagicDialog(base.id)">
-                              <div class="color-transition nc-project-menu-item group">
-                                <GeneralIcon icon="magic1" class="group-hover:text-accent" />
-                                Create schema
-                              </div>
-                            </a-menu-item>
-                          </a-menu-item-group>
-
-                          <a-menu-divider class="my-0" />
-
-                          <!--                  Quick Import From -->
-                          <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
-                            <a-menu-item
-                              v-if="isUIAllowed('airtableImport')"
-                              key="quick-import-airtable"
-                              @click="openAirtableImportDialog(base.id)"
-                            >
-                              <div class="color-transition nc-project-menu-item group">
-                                <component :is="iconMap.airtable" class="group-hover:text-accent" />
-                                Airtable
-                              </div>
-                            </a-menu-item>
-
-                            <a-menu-item
-                              v-if="isUIAllowed('csvImport')"
-                              key="quick-import-csv"
-                              @click="openQuickImportDialog('csv', base.id)"
-                            >
-                              <div class="color-transition nc-project-menu-item group">
-                                <component :is="iconMap.csv" class="group-hover:text-accent" />
-                                CSV file
-                              </div>
-                            </a-menu-item>
-
-                            <a-menu-item
-                              v-if="isUIAllowed('jsonImport')"
-                              key="quick-import-json"
-                              @click="openQuickImportDialog('json', base.id)"
-                            >
-                              <div class="color-transition nc-project-menu-item group">
-                                <component :is="iconMap.json" class="group-hover:text-accent" />
-                                JSON file
-                              </div>
-                            </a-menu-item>
-
-                            <a-menu-item
-                              v-if="isUIAllowed('excelImport')"
-                              key="quick-import-excel"
-                              @click="openQuickImportDialog('excel', base.id)"
-                            >
-                              <div class="color-transition nc-project-menu-item group">
-                                <component :is="iconMap.excel" class="group-hover:text-accent" />
-                                Microsoft Excel
-                              </div>
-                            </a-menu-item>
-                          </a-menu-item-group>
-
-                          <a-menu-divider class="my-0" />
-
-                          <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
-                            <a
-                              v-e="['e:datasource:import-request']"
-                              href="https://github.com/nocodb/nocodb/issues/2052"
-                              target="_blank"
-                              class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
-                            >
-                              <component :is="iconMap.openInNew" class="group-hover:text-accent" />
-                              <!-- Request a data source you need? -->
-                              {{ $t('labels.requestDataSource') }}
-                            </a>
-                          </a-menu-item>
-                        </a-menu>
-                      </template>
-                    </a-dropdown>
-                  </div>
-                  <div
-                    ref="menuRefs"
-                    :key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`"
-                    :nc-base="base.id"
-                  >
-                    <div
-                      v-for="table of tables.filter((table) => table.base_id === base.id)"
-                      :key="table.id"
-                      v-e="['a:table:open']"
-                      :class="[
-                        { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
-                        `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
-                      ]"
-                      class="nc-tree-item text-sm cursor-pointer group"
-                      :data-order="table.order"
-                      :data-id="table.id"
-                      :data-title="table.title"
-                      :data-base-id="base.id"
-                      :data-type="table.type"
-                      :data-testid="`tree-view-table-${table.title}`"
-                      @click="addTableTab(table)"
-                    >
-                      <GeneralTooltip class="pl-8 pr-3 py-2" modifier-key="Alt">
-                        <template #title>{{ table.table_name }}</template>
-                        <div class="table-context flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                          <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                            <component
-                              :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
-                              trigger="click"
-                              destroy-popup-on-hide
-                              class="flex items-center"
-                              @click.stop
-                            >
-                              <div class="flex items-center" @click.stop>
-                                <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
-                                  <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
-                                    <IconifyIcon
-                                      :key="table.meta?.icon"
-                                      :data-testid="`nc-icon-${table.meta?.icon}`"
-                                      class="text-xl"
-                                      :icon="table.meta?.icon"
-                                    ></IconifyIcon>
-                                  </span>
-                                  <component
-                                    :is="icon(table)"
-                                    v-else
-                                    class="nc-table-icon nc-view-icon w-5"
-                                    :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                                  />
-
-                                  <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
-                                </component>
-                              </div>
-                              <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
-                                <GeneralEmojiIcons
-                                  class="shadow bg-white p-2"
-                                  :show-reset="!!table.meta?.icon"
-                                  @select-icon="setIcon($event, table)"
-                                />
-                              </template>
-                            </component>
-                          </div>
-
-                          <div class="nc-tbl-title flex-1">
-                            <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
-                          </div>
-
-                          <a-dropdown
-                            v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
-                            :trigger="['click']"
-                            @click.stop
-                          >
-                            <component
-                              :is="iconMap.threeDotVertical"
-                              class="transition-opacity opacity-0 group-hover:opacity-100 outline-0"
-                            />
-
-                            <template #overlay>
-                              <a-menu class="!py-0 rounded text-sm">
-                                <a-menu-item
-                                  v-if="isUIAllowed('table-rename')"
-                                  :data-testid="`sidebar-table-rename-${table.title}`"
-                                  @click="openRenameTableDialog(table, base.id)"
-                                >
-                                  <div class="nc-project-menu-item">
-                                    {{ $t('general.rename') }}
-                                  </div>
-                                </a-menu-item>
-
-                                <a-menu-item v-if="isUIAllowed('table-duplicate') && !table.mm" @click="duplicateTable(table)">
-                                  <div class="nc-project-menu-item">
-                                    {{ $t('general.duplicate') }}
-                                  </div>
-                                </a-menu-item>
-
-                                <a-menu-item
-                                  v-if="isUIAllowed('table-delete')"
-                                  :data-testid="`sidebar-table-delete-${table.title}`"
-                                  @click="deleteTable(table)"
-                                >
-                                  <div class="nc-project-menu-item">
-                                    {{ $t('general.delete') }}
-                                  </div>
-                                </a-menu-item>
-                              </a-menu>
-                            </template>
-                          </a-dropdown>
-                        </div>
-                      </GeneralTooltip>
-                    </div>
-                  </div>
-                </a-collapse-panel>
-              </a-collapse>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <template v-if="!isSharedBase" #overlay>
-        <a-menu class="!py-0 rounded text-sm">
-          <template v-if="contextMenuTarget.type === 'base'">
-            <!--
-            <a-menu-item @click="openErdView(contextMenuTarget.value)">
-              <div class="nc-project-menu-item">ERD View</div>
-            </a-menu-item>
-            -->
-          </template>
-
-          <template v-else-if="contextMenuTarget.type === 'table'">
-            <a-menu-item
-              v-if="isUIAllowed('table-rename')"
-              @click="openRenameTableDialog(contextMenuTarget.value, bases[0].id, true)"
-            >
-              <div class="nc-project-menu-item">
-                {{ $t('general.rename') }}
-              </div>
-            </a-menu-item>
-
-            <a-menu-item
-              v-if="isUIAllowed('table-duplicate') && !contextMenuTarget.value.mm"
-              @click="duplicateTable(contextMenuTarget.value)"
-            >
-              <div class="nc-project-menu-item">
-                {{ $t('general.duplicate') }}
-              </div>
-            </a-menu-item>
-
-            <a-menu-item v-if="isUIAllowed('table-delete')" @click="deleteTable(contextMenuTarget.value)">
-              <div class="nc-project-menu-item">
-                {{ $t('general.delete') }}
-              </div>
-            </a-menu-item>
-          </template>
-
-          <template v-else>
-            <a-menu-item @click="reloadTables">
-              <div class="nc-project-menu-item">
-                {{ $t('general.reload') }}
-              </div>
-            </a-menu-item>
-          </template>
-        </a-menu>
-      </template>
-    </a-dropdown>
-
-    <a-divider class="!my-0" />
-
-    <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
-      <LazyGeneralAddBaseButton class="color-transition py-1.5 px-2 cursor-pointer select-none hover:text-primary" />
-
-      <LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
-
-      <GeneralJoinCloud
-        v-if="!isMobileMode"
-        class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent"
-      />
-      <!--
-           todo: enable it back later
-           disable at the moment to avoid issue with navigation
-
-           <GithubButton
-        v-if="!isMobileMode"
-              class="ml-2 py-1"
-              href="https://github.com/nocodb/nocodb"
-              data-icon="octicon-star"
-              data-show-count="true"
-              data-size="large"
-              v-if="$route.name"
-            >
-              Star
-            </GithubButton>
-            -->
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.nc-treeview-container {
-  // @apply h-[calc(100vh_-_var(--sidebar-top-height))];
-  border-right: 1px solid var(--navbar-border) !important;
-}
-
-.nc-treeview-footer-item {
-  @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) {
-  @apply !text-xs;
-}
-
-:deep(.ant-dropdown-menu-title-content) {
-  @apply !p-2;
-}
-
-:deep(.ant-input-group-addon:last-child) {
-  @apply top-[-0.5px];
-}
-
-.nc-treeview-container {
-  .ghost,
-  .ghost > * {
-    @apply !pointer-events-none;
-  }
-
-  & .dragging {
-    .nc-icon {
-      @apply !hidden;
-    }
-
-    .nc-view-icon {
-      @apply !block;
-    }
-  }
-
-  .ant-menu-item:not(.sortable-chosen) {
-    @apply color-transition hover:!bg-transparent;
-  }
-
-  .sortable-chosen {
-    @apply !bg-primary bg-opacity-25 text-primary;
-  }
-}
-
-.nc-tree-item {
-  @apply relative cursor-pointer after:(pointer-events-none content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
-}
-
-.nc-tree-item svg {
-  @apply text-primary text-opacity-60;
-}
-
-.nc-tree-item.active {
-  @apply text-primary font-weight-bold after:(!opacity-20);
-  @apply border-r-3 border-primary;
-
-  svg {
-    @apply text-primary !text-opacity-100;
-  }
-}
-
-.nc-tree-item:hover {
-  @apply text-primary after:(!opacity-5);
-}
-
-:deep(.nc-filter-input) {
-  .ant-input {
-    @apply pr-6 !border-0;
-  }
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply !mx-0;
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-accent ring-opacity-100);
-}
-
-:deep(.ant-dropdown-menu-title-content) {
-  @apply !p-0;
-}
-
-:deep(.ant-collapse-content-box) {
-  @apply !p-0;
-}
-
-:deep(.ant-collapse-header) {
-  @apply !border-0;
-}
-</style>
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/AddNewTableNode.vue b/packages/nc-gui/components/dashboard/TreeView/AddNewTableNode.vue
similarity index 100%
rename from packages/nc-gui/components/dashboard/TreeViewNew/AddNewTableNode.vue
rename to packages/nc-gui/components/dashboard/TreeView/AddNewTableNode.vue
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/BaseOptions.vue b/packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue
similarity index 100%
rename from packages/nc-gui/components/dashboard/TreeViewNew/BaseOptions.vue
rename to packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
similarity index 95%
rename from packages/nc-gui/components/dashboard/TreeViewNew/ProjectNode.vue
rename to packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 8168f11f00..91c699e9f9 100644
--- a/packages/nc-gui/components/dashboard/TreeViewNew/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -175,6 +175,8 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
 
     if (!table) return
 
+    project.value.isExpanded = true
+
     if (!activeKey.value || !activeKey.value.includes(`collapse-${baseId}`)) {
       activeKey.value.push(`collapse-${baseId}`)
     }
@@ -200,10 +202,19 @@ const addNewProjectChildEntity = async () => {
   if (isAddNewProjectChildEntityLoading.value) return
 
   isAddNewProjectChildEntityLoading.value = true
+
+  const isProjectPopulated = projectsStore.isProjectPopulated(project.value.id!)
+  if (!isProjectPopulated && project.value.type === NcProjectType.DB) {
+    // We do not wait for tables api, so that add new table is seamless.
+    // Only con would be while saving table duplicate table name FE validation might not work
+    // If the table list api takes time to load before the table name validation
+    loadProjectTables(project.value.id!)
+  }
+
   try {
     openTableCreateDialog()
 
-    if (!project.value.isExpanded) {
+    if (!project.value.isExpanded && project.value.type !== NcProjectType.DB) {
       project.value.isExpanded = true
     }
   } finally {
@@ -246,7 +257,6 @@ const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, to
   }
 
   if (!isProjectPopulated) {
-    await loadProject(project.id!)
     await loadProjectTables(project.id!)
   }
 
@@ -375,7 +385,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
             @click="onProjectClick(project, true, true)"
           >
             <PhTriangleFill
-              class="absolute top-2.25 left-2 invisible group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90"
+              class="absolute top-2.25 left-2 group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90"
               :class="{ '!rotate-180': project.isExpanded, '!visible': isOptionsOpen }"
             />
           </div>
@@ -444,7 +454,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
                   <a-menu-item @click="enableEditMode">
                     <div class="nc-project-menu-item group">
                       <GeneralIcon icon="edit" class="group-hover:text-black" />
-                      {{ $t('general.edit') }}
+                      {{ $t('general.rename') }}
                     </div>
                   </a-menu-item>
 
@@ -458,7 +468,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
                   <a-menu-item v-if="isUIAllowed('duplicateProject', true, projectRole)" @click="duplicateProject(project)">
                     <div class="nc-menu-item-wrapper">
                       <GeneralIcon icon="duplicate" class="text-gray-700" />
-                      {{ $t('general.duplicate') }} {{ $t('objects.project') }}
+                      {{ $t('general.duplicate') }}
                     </div>
                   </a-menu-item>
 
@@ -498,7 +508,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
                   </div>
                 </a-menu-item>
                 <template v-if="project.bases && project.bases[0]">
-                  <DashboardTreeViewNewBaseOptions v-model:project="project" :base="project.bases[0]" />
+                  <DashboardTreeViewBaseOptions v-model:project="project" :base="project.bases[0]" />
 
                   <a-menu-divider />
                 </template>
@@ -540,7 +550,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
           <div class="flex-1 overflow-y-auto overflow-x-hidden flex flex-col" :class="{ 'mb-[20px]': isSharedBase }">
             <div v-if="project?.bases?.[0]?.enabled" class="flex-1">
               <div class="transition-height duration-200">
-                <DashboardTreeViewNewTableList :project="project" :base-index="0" />
+                <DashboardTreeViewTableList :project="project" :base-index="0" />
               </div>
             </div>
 
@@ -627,7 +637,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
                                     </div>
                                   </a-menu-item>
 
-                                  <DashboardTreeViewNewBaseOptions v-model:project="project" :base="base" />
+                                  <DashboardTreeViewBaseOptions v-model:project="project" :base="base" />
                                 </a-menu>
                               </template>
                             </a-dropdown>
@@ -652,7 +662,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
                         :key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`"
                         :nc-base="base.id"
                       >
-                        <DashboardTreeViewNewTableList :project="project" :base-index="baseIndex" />
+                        <DashboardTreeViewTableList :project="project" :base-index="baseIndex" />
                       </div>
                     </a-collapse-panel>
                   </a-collapse>
@@ -726,7 +736,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
 }
 
 :deep(.ant-collapse-header) {
-  @apply !mx-0 !pl-8.75 !pr-1 !py-0.75 hover:bg-gray-100 !rounded-md;
+  @apply !mx-0 !pl-8.75 !pr-1 !py-0.75 hover:bg-gray-200 !rounded-md;
 }
 
 :deep(.ant-collapse-header:hover .nc-sidebar-base-node-btns) {
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/ProjectWrapper.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectWrapper.vue
similarity index 100%
rename from packages/nc-gui/components/dashboard/TreeViewNew/ProjectWrapper.vue
rename to packages/nc-gui/components/dashboard/TreeView/ProjectWrapper.vue
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/TableList.vue b/packages/nc-gui/components/dashboard/TreeView/TableList.vue
similarity index 100%
rename from packages/nc-gui/components/dashboard/TreeViewNew/TableList.vue
rename to packages/nc-gui/components/dashboard/TreeView/TableList.vue
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
similarity index 94%
rename from packages/nc-gui/components/dashboard/TreeViewNew/TableNode.vue
rename to packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 4a6b9b6ce2..5acaea2887 100644
--- a/packages/nc-gui/components/dashboard/TreeViewNew/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -68,8 +68,11 @@ const setIcon = async (icon: string, table: TableType) => {
 // Todo: temp
 
 const { isSharedBase } = useProject()
-
 // const isMultiBase = computed(() => project.bases && project.bases.length > 1)
+
+const canUserEditEmote = computed(() => {
+  return isUIAllowed('tableIconCustomisation', false, projectRole?.value)
+})
 </script>
 
 <template>
@@ -98,16 +101,22 @@ const { isSharedBase } = useProject()
       <template #title>{{ table.table_name }}</template>
       <div class="table-context flex items-center gap-1 h-full" @contextmenu="setMenuContext('table', table)">
         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-          <div class="flex items-center nc-table-icon" @click.stop>
+          <div
+            class="flex items-center nc-table-icon"
+            :class="{
+              'pointer-events-none': !canUserEditEmote,
+            }"
+            @click.stop
+          >
             <LazyGeneralEmojiPicker
               :key="table.meta?.icon"
               :emoji="table.meta?.icon"
               size="small"
-              :readonly="!isUIAllowed('tableIconCustomisation', false, projectRole)"
+              :readonly="!canUserEditEmote"
               @emoji-selected="setIcon($event, table)"
             >
               <template #default>
-                <NcTooltip class="flex" placement="topLeft" hide-on-click>
+                <NcTooltip class="flex" placement="topLeft" hide-on-click :disabled="!canUserEditEmote">
                   <template #title>
                     {{ 'Change icon' }}
                   </template>
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/index.vue b/packages/nc-gui/components/dashboard/TreeView/index.vue
similarity index 81%
rename from packages/nc-gui/components/dashboard/TreeViewNew/index.vue
rename to packages/nc-gui/components/dashboard/TreeView/index.vue
index 99453e31ad..c8f8b82922 100644
--- a/packages/nc-gui/components/dashboard/TreeViewNew/index.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/index.vue
@@ -2,7 +2,6 @@
 import type { TableType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 
-import GithubButton from 'vue-github-button'
 import ProjectWrapper from './ProjectWrapper.vue'
 
 import type { TabType } from '#imports'
@@ -28,10 +27,6 @@ import {
 
 import { useRouter } from '#app'
 
-const emit = defineEmits<{
-  (event: 'onScrollTop', type: boolean): void
-}>()
-
 const { isUIAllowed } = useUIPermission()
 
 const { addTab } = useTabs()
@@ -48,8 +43,12 @@ const { createProject: _createProject } = projectsStore
 
 const { projects, projectsList, activeProjectId } = storeToRefs(projectsStore)
 
+const { isWorkspaceLoading } = storeToRefs(useWorkspace())
+
 const { openTable } = useTablesStore()
 
+const projectCreateDlg = ref(false)
+
 const projectStore = useProject()
 
 const { loadTables } = projectStore
@@ -184,6 +183,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         }
         break
       }
+      // ALT + D
+      case 68: {
+        e.stopPropagation()
+        projectCreateDlg.value = true
+        break
+      }
     }
   }
 })
@@ -203,19 +208,6 @@ provide(TreeViewInj, {
 
 useEventListener(document, 'contextmenu', handleContext, true)
 
-const treeViewDom = ref<HTMLElement>()
-
-const checkScrollTopMoreThanZero = () => {
-  if (treeViewDom.value) {
-    if (treeViewDom.value.scrollTop > 0) {
-      emit('onScrollTop', true)
-    } else {
-      emit('onScrollTop', false)
-    }
-  }
-  return false
-}
-
 const scrollTableNode = () => {
   const activeTableDom = document.querySelector(`.nc-treeview [data-table-id="${_activeTable.value?.id}"]`)
   if (!activeTableDom) return
@@ -256,56 +248,24 @@ watch(
     immediate: true,
   },
 )
-
-onMounted(() => {
-  treeViewDom.value?.addEventListener('scroll', checkScrollTopMoreThanZero)
-})
-
-onUnmounted(() => {
-  treeViewDom.value?.removeEventListener('scroll', checkScrollTopMoreThanZero)
-})
 </script>
 
 <template>
   <div class="nc-treeview-container flex flex-col justify-between select-none">
-    <div ref="treeViewDom" mode="inline" class="nc-treeview pb-0.5 flex-grow min-h-50 overflow-x-hidden">
+    <div mode="inline" class="nc-treeview pb-0.5 flex-grow min-h-50 overflow-x-hidden">
       <template v-if="projectsList?.length">
-        <ProjectWrapper
-          v-for="project of projectsList"
-          :key="project.id"
-          :project-role="project.project_role || project.workspace_role"
-          :project="project"
-        >
-          <DashboardTreeViewNewProjectNode />
+        <ProjectWrapper v-for="project of projectsList" :key="project.id" :project-role="project.project_role" :project="project">
+          <DashboardTreeViewProjectNode />
         </ProjectWrapper>
       </template>
 
-      <WorkspaceEmptyPlaceholder v-else />
-    </div>
-
-    <div class="flex items-start flex-row justify-center px-2 gap-2">
-      <GithubButton
-        class="ml-2"
-        href="https://github.com/nocodb/nocodb"
-        data-icon="octicon-star"
-        data-show-count="true"
-        data-size="large"
-      >
-        Star
-      </GithubButton>
-    </div>
-
-    <div class="flex items-start flex-row justify-center px-2 pt-1 pb-1.5 gap-2">
-      <GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
+      <WorkspaceEmptyPlaceholder v-else-if="!isWorkspaceLoading" />
     </div>
+    <WorkspaceCreateProjectDlg v-model="projectCreateDlg" />
   </div>
 </template>
 
 <style scoped lang="scss">
-.nc-treeview-container {
-  height: calc(100% - var(--sidebar-top-height));
-}
-
 .nc-treeview-footer-item {
   @apply cursor-pointer px-4 py-2 flex items-center hover:bg-gray-200/20 text-xs text-current;
 }
@@ -413,20 +373,4 @@ onUnmounted(() => {
     }
   }
 }
-
-.nc-treeview {
-  overflow-y: overlay;
-  &::-webkit-scrollbar {
-    width: 3px;
-  }
-  &::-webkit-scrollbar-track {
-    @apply bg-inherit;
-  }
-  &::-webkit-scrollbar-thumb {
-    @apply bg-scrollbar;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    @apply bg-scrollbar-hover;
-  }
-}
 </style>
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 3319fc36a6..fba38d7856 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -52,6 +52,7 @@ async function loadBases(changed?: boolean) {
   try {
     if (changed) refreshCommandPalette()
 
+    await until(() => !!project.value.id).toBeTruthy()
     isReloading.value = true
     vReload.value = true
     const baseList = await $api.base.list(project.value.id as string)
@@ -164,8 +165,7 @@ const forceAwaken = () => {
 
 onMounted(async () => {
   if (sources.value.length === 0) {
-    await loadBases()
-    await loadMetaDiff()
+    loadBases()
   }
 })
 
@@ -174,7 +174,6 @@ watch(
   async (reload) => {
     if (reload && !isReloading.value) {
       await loadBases()
-      await loadMetaDiff()
     }
   },
 )
diff --git a/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue b/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
index c345d8dca7..510c8f99e0 100644
--- a/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
+++ b/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
@@ -264,16 +264,17 @@ onMounted(async () => {
         </template>
 
         <div class="flex flex-row space-x-4 justify-center mt-4">
-          <a-button
+          <NcButton
             v-for="(action, i) in plugin.formDetails.actions"
             :key="i"
+            class="!px-5"
             :loading="loadingAction === action.key"
             :type="action.key === Action.Save ? 'primary' : 'default'"
             :disabled="!!loadingAction"
             @click="doAction(action.key)"
           >
             {{ action.label }}
-          </a-button>
+          </NcButton>
         </div>
       </a-form>
     </div>
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 4ec3d9f95c..9c6e5e5ae2 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -350,8 +350,8 @@ onMounted(async () => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
       const input = form.value?.$el?.querySelector('input[type=text]')
-      input.setSelectionRange(0, formState.value.title.length)
-      input.focus()
+      input?.setSelectionRange(0, formState.value.title.length)
+      input?.focus()
     }, 500)
   })
 })
@@ -379,6 +379,7 @@ watch(
   <div class="create-base bg-white relative flex flex-col justify-center gap-2 w-full">
     <h1 class="prose-2xl font-bold self-start mb-4 flex items-center gap-2">
       New Base
+      <DashboardSettingsDataSourcesInfo />
       <span class="flex-grow"></span>
     </h1>
 
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index d94329e29d..136b6bc096 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -25,9 +25,9 @@ const { modelValue, baseId } = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 
-const { appInfo } = useGlobal()
+const { $api } = useNuxtApp()
 
-const baseURL = appInfo.value.ncSiteUrl
+const baseURL = $api.instance.defaults.baseURL
 
 const { $state, $jobs } = useNuxtApp()
 
diff --git a/packages/nc-gui/components/dlg/ProjectDuplicate.vue b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
index 21fc1290db..3fba10c99a 100644
--- a/packages/nc-gui/components/dlg/ProjectDuplicate.vue
+++ b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
@@ -33,8 +33,8 @@ const optionsToExclude = computed(() => {
 const isLoading = ref(false)
 
 const _duplicate = async () => {
-  isLoading.value = true
   try {
+    isLoading.value = true
     // pick a random color from array and assign to project
     const color = projectThemeColors[Math.floor(Math.random() * 1000) % projectThemeColors.length]
     const tcolor = tinycolor(color)
@@ -58,18 +58,28 @@ const _duplicate = async () => {
     props.onOk(jobData as any)
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoading.value = false
+    dialogShow.value = false
   }
-  isLoading.value = false
-  dialogShow.value = false
 }
 
+onKeyStroke('Enter', () => {
+  // should only trigger this when our modal is open
+  if (dialogShow.value) {
+    _duplicate()
+  }
+})
+
 const isEaster = ref(false)
 </script>
 
 <template>
   <GeneralModal v-if="project" v-model:visible="dialogShow" class="!w-[30rem]" wrap-class-name="nc-modal-project-duplicate">
     <div>
-      <div class="prose-xl font-bold self-center" @dblclick="isEaster = !isEaster">{{ $t('general.duplicate') }}</div>
+      <div class="prose-xl font-bold self-center" @dblclick="isEaster = !isEaster">
+        {{ $t('general.duplicate') }} {{ $t('objects.project') }}
+      </div>
 
       <div class="mt-4">Are you sure you want to duplicate the `{{ project.title }}` project?</div>
 
@@ -85,9 +95,7 @@ const isEaster = ref(false)
     </div>
     <div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end">
       <NcButton key="back" type="secondary" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton>
-      <NcButton key="submit" type="primary" :loading="isLoading" @click="_duplicate">{{ $t('general.confirm') }} </NcButton>
+      <NcButton key="submit" :loading="isLoading" @click="_duplicate">{{ $t('general.confirm') }} </NcButton>
     </div>
   </GeneralModal>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/dlg/TableDuplicate.vue b/packages/nc-gui/components/dlg/TableDuplicate.vue
index c6293a51e0..f719589dd9 100644
--- a/packages/nc-gui/components/dlg/TableDuplicate.vue
+++ b/packages/nc-gui/components/dlg/TableDuplicate.vue
@@ -32,55 +32,59 @@ const optionsToExclude = computed(() => {
 const isLoading = ref(false)
 
 const _duplicate = async () => {
-  isLoading.value = true
   try {
+    isLoading.value = true
     const jobData = await api.dbTable.duplicate(props.table.project_id!, props.table.id!, { options: optionsToExclude.value })
     props.onOk(jobData as any)
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoading.value = false
+    dialogShow.value = false
   }
-  isLoading.value = false
-  dialogShow.value = false
 }
 
+onKeyStroke('Enter', () => {
+  // should only trigger this when our modal is open
+  if (dialogShow.value) {
+    _duplicate()
+  }
+})
+
 const isEaster = ref(false)
 </script>
 
 <template>
-  <a-modal
+  <GeneralModal
     v-model:visible="dialogShow"
     :class="{ active: dialogShow }"
     centered
     wrap-class-name="nc-modal-table-duplicate"
     :footer="null"
     :closable="false"
+    class="!w-[30rem]"
     @keydown.esc="dialogShow = false"
   >
     <div>
-      <div class="text-base font-medium self-center mb-4" @dblclick="isEaster = !isEaster">
-        {{ $t('general.duplicate') }} {{ table.title }}
+      <div class="prose-xl font-bold self-center" @dblclick="isEaster = !isEaster">
+        {{ $t('general.duplicate') }} {{ $t('objects.table') }}
       </div>
 
-      <div class="flex flex-col gap-y-2">
-        <div class="flex flex-row gap-x-2 items-center">
-          <a-switch v-model:checked="options.includeData" />
-          Include Data
-        </div>
-        <div class="flex flex-row gap-x-2 items-center">
-          <a-switch v-model:checked="options.includeViews" />
-          Include Views
-        </div>
-        <a-checkbox v-show="isEaster" v-model:checked="options.includeHooks">Include hooks</a-checkbox>
+      <div class="mt-4">Are you sure you want to duplicate the `{{ table.title }}` table?</div>
+
+      <div class="prose-md self-center text-gray-500 mt-4">{{ $t('title.advancedSettings') }}</div>
+
+      <a-divider class="!m-0 !p-0 !my-2" />
+
+      <div class="text-xs p-2">
+        <a-checkbox v-model:checked="options.includeData">Include data</a-checkbox>
+        <a-checkbox v-model:checked="options.includeViews">Include views</a-checkbox>
+        <a-checkbox v-show="isEaster" v-model:checked="options.includeHooks">Include webhooks</a-checkbox>
       </div>
     </div>
-    <div class="flex flex-row justify-end gap-x-2 mt-8">
-      <a-button key="back" size="middle" class="!rounded-md" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-
-      <a-button key="submit" size="middle" type="primary" class="!rounded-md" :loading="isLoading" @click="_duplicate"
-        >{{ $t('general.duplicate') }}
-      </a-button>
+    <div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end">
+      <NcButton key="back" type="secondary" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton>
+      <NcButton key="submit" type="primary" :loading="isLoading" @click="_duplicate">{{ $t('general.confirm') }} </NcButton>
     </div>
-  </a-modal>
+  </GeneralModal>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 86557e85c5..185d5bb2e2 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -156,7 +156,13 @@ function init() {
 }
 
 async function onSubmit() {
-  const isValid = await formValidator.value?.validateFields()
+  let isValid = null
+
+  try {
+    isValid = await formValidator.value?.validateFields()
+  } catch (e) {
+    console.error(e)
+  }
 
   if (isValid && form.type) {
     const _meta = unref(meta)
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index 905560a185..ba5426fb79 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -155,11 +155,8 @@ watch(showShareModal, (val) => {
       </div>
       <div class="share-base">
         <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <component
-            :is="viewIcons[view?.type]?.icon"
-            class="nc-view-icon group-hover"
-            :style="{ color: viewIcons[view?.type]?.color }"
-          />
+          <GeneralProjectIcon :type="project.type" class="nc-view-icon group-hover" />
+
           <div>Share Base</div>
           <div
             class="max-w-79/100 ml-2 px-2 py-0.5 rounded-md bg-gray-100 capitalize text-ellipsis overflow-hidden"
diff --git a/packages/nc-gui/components/general/EmojiPicker.vue b/packages/nc-gui/components/general/EmojiPicker.vue
index 3464be9da0..763aa7495f 100644
--- a/packages/nc-gui/components/general/EmojiPicker.vue
+++ b/packages/nc-gui/components/general/EmojiPicker.vue
@@ -80,9 +80,9 @@ const showClearButton = computed(() => {
 <template>
   <a-dropdown v-model:visible="isOpen" trigger="click" :disabled="readonly">
     <div
-      class="flex flex-row justify-center items-center select-none cursor-pointer rounded-md"
+      class="flex flex-row justify-center items-center select-none rounded-md"
       :class="{
-        'hover:bg-gray-500 hover:bg-opacity-15': !readonly,
+        'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
         'bg-gray-500 bg-opacity-15': isOpen,
         'h-6 w-6 text-lg': size === 'small',
         'h-8 w-8 text-xl': size === 'medium',
diff --git a/packages/nc-gui/components/general/MiniSidebar.vue b/packages/nc-gui/components/general/MiniSidebar.vue
index 8476107bc0..3555d24fab 100644
--- a/packages/nc-gui/components/general/MiniSidebar.vue
+++ b/packages/nc-gui/components/general/MiniSidebar.vue
@@ -12,7 +12,7 @@ const route = useRoute()
 const email = computed(() => user.value?.email ?? '---')
 
 const logout = async () => {
-  await signOut()
+  await signOut(false)
   navigateTo('/signin')
 }
 </script>
diff --git a/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue b/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
new file mode 100644
index 0000000000..8775c88e2a
--- /dev/null
+++ b/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+const { isLeftSidebarOpen: _isLeftSidebarOpen } = storeToRefs(useSidebarStore())
+const isLeftSidebarOpen = ref(_isLeftSidebarOpen.value)
+
+watch(_isLeftSidebarOpen, (val) => {
+  if (val) {
+    isLeftSidebarOpen.value = true
+  } else {
+    setTimeout(() => {
+      isLeftSidebarOpen.value = false
+    }, 300)
+  }
+})
+
+const onClick = () => {
+  if (_isLeftSidebarOpen.value) return
+
+  _isLeftSidebarOpen.value = !_isLeftSidebarOpen.value
+}
+</script>
+
+<template>
+  <NcTooltip
+    placement="topLeft"
+    hide-on-click
+    class="transition-all duration-100"
+    :class="{
+      '!w-0 !opacity-0': isLeftSidebarOpen,
+      '!w-8 !opacity-100': !isLeftSidebarOpen,
+    }"
+  >
+    <template #title>
+      {{
+        isLeftSidebarOpen
+          ? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}`
+          : `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}`
+      }}
+    </template>
+    <NcButton
+      type="text"
+      size="small"
+      class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800"
+      :class="{
+        'invisible !w-0': isLeftSidebarOpen,
+      }"
+      @click="onClick"
+    >
+      <div class="flex items-center text-inherit">
+        <GeneralIcon icon="doubleRightArrow" class="duration-150 transition-all !text-lg -mt-0.25" />
+      </div>
+    </NcButton>
+  </NcTooltip>
+</template>
diff --git a/packages/nc-gui/components/general/ReleaseInfo.vue b/packages/nc-gui/components/general/ReleaseInfo.vue
index 058262417f..fb06d34aad 100644
--- a/packages/nc-gui/components/general/ReleaseInfo.vue
+++ b/packages/nc-gui/components/general/ReleaseInfo.vue
@@ -3,7 +3,7 @@ import { computed, extractSdkResponseErrorMsg, message, onMounted, useGlobal, us
 
 const { $api } = useNuxtApp()
 
-const { currentVersion, latestRelease, hiddenRelease } = useGlobal()
+const { currentVersion, latestRelease, hiddenRelease, appInfo } = useGlobal()
 
 const releaseAlert = computed({
   get() {
@@ -41,14 +41,14 @@ onMounted(async () => await fetchReleaseInfo())
 </script>
 
 <template>
-  <div v-if="releaseAlert" class="flex items-center">
+  <div v-if="releaseAlert && !appInfo.ee" class="flex items-center">
     <a-dropdown :trigger="['click']" placement="bottom" overlay-class-name="nc-dropdown-upgrade-menu">
-      <a-button class="!bg-primary !border-none">
+      <NcButton class="!bg-primary !border-none !mr-3" size="small">
         <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>
-      </a-button>
+      </NcButton>
 
       <template #overlay>
         <div class="mt-1 bg-white shadow-lg !border">
diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
new file mode 100644
index 0000000000..e0428d02bf
--- /dev/null
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { UserType } from 'nocodb-sdk'
+
+const props = defineProps<{
+  hideLabel?: boolean
+  size?: 'small' | 'medium'
+}>()
+
+const { user } = useGlobal()
+
+const backgroundColor = computed(() => (user.value?.id ? stringToColour(user.value?.id) : '#FFFFFF'))
+
+const size = computed(() => props.size || 'medium')
+
+const firstName = computed(() => user.value?.firstname ?? '')
+const lastName = computed(() => user.value?.lastname ?? '')
+const email = computed(() => user.value?.email ?? '')
+
+const usernameInitials = computed(() => {
+  if (firstName.value && lastName.value) {
+    return firstName.value[0] + lastName.value[0]
+  } else if (firstName.value) {
+    return firstName.value[0] + (firstName.value.length > 1 ? firstName.value[1] : '')
+  } else if (lastName.value) {
+    return lastName.value[0] + (lastName.value.length > 1 ? lastName.value[1] : '')
+  } else {
+    return email.value[0] + email.value[1]
+  }
+})
+</script>
+
+<template>
+  <div
+    class="flex nc-user-avatar"
+    :class="{
+      'min-w-4 min-h-4': size === 'small',
+      'min-w-6 min-h-6': size === 'medium',
+    }"
+    :style="{ backgroundColor }"
+  >
+    <template v-if="!props.hideLabel">
+      {{ usernameInitials }}
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-user-avatar {
+  @apply rounded-full text-xs flex items-center justify-center text-white uppercase;
+}
+</style>
diff --git a/packages/nc-gui/components/general/ViewIcon.vue b/packages/nc-gui/components/general/ViewIcon.vue
index 0ced0f2f88..32356c84d6 100644
--- a/packages/nc-gui/components/general/ViewIcon.vue
+++ b/packages/nc-gui/components/general/ViewIcon.vue
@@ -23,11 +23,14 @@ const viewMeta = toRef(props, 'meta')
     v-else-if="viewMeta?.type"
     class="nc-view-icon group-hover"
     :style="{
-      'color': !props.ignoreColor ? viewIcons[viewMeta.type]?.color : undefined,
-      'fontWeight': 500,
-      '-webkit-text-stroke': !props.ignoreColor ? `0.5px ${viewIcons[viewMeta.type]?.color}` : '0.5px',
+      color: !props.ignoreColor ? viewIcons[viewMeta.type]?.color : undefined,
+      fontWeight: 500,
     }"
   />
 </template>
 
-<style scoped></style>
+<style>
+.nc-view-icon {
+  font-size: 1.05rem;
+}
+</style>
diff --git a/packages/nc-gui/components/general/WorkspaceIcon.vue b/packages/nc-gui/components/general/WorkspaceIcon.vue
new file mode 100644
index 0000000000..be32b5c108
--- /dev/null
+++ b/packages/nc-gui/components/general/WorkspaceIcon.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { WorkspaceType } from 'nocodb-sdk'
+
+const props = defineProps<{
+  workspace: WorkspaceType | undefined
+  hideLabel?: boolean
+  size?: 'small' | 'medium' | 'large'
+}>()
+
+const workspaceColor = computed(() =>
+  props.workspace ? props.workspace.meta?.color || stringToColour(props.workspace.id!) : undefined,
+)
+
+const size = computed(() => props.size || 'medium')
+</script>
+
+<template>
+  <div
+    class="flex nc-workspace-avatar"
+    :class="{
+      'min-w-4 w-4 h-4 rounded': size === 'small',
+      'min-w-6 w-6 h-6 rounded-md': size === 'medium',
+      'min-w-10 w-10 h-10 rounded-lg !text-base': size === 'large',
+    }"
+    :style="{ backgroundColor: workspaceColor }"
+  >
+    <template v-if="!props.hideLabel">
+      {{ props.workspace?.title?.slice(0, 2) }}
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-workspace-avatar {
+  @apply text-xs flex items-center justify-center text-white uppercase;
+}
+</style>
diff --git a/packages/nc-gui/components/general/language/index.vue b/packages/nc-gui/components/general/language/index.vue
index 6b08c99492..4a3fa748de 100644
--- a/packages/nc-gui/components/general/language/index.vue
+++ b/packages/nc-gui/components/general/language/index.vue
@@ -9,7 +9,7 @@
     </div>
 
     <template #overlay>
-      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
+      <a-menu class="nc-scrollbar-dark-md min-w-50 max-h-90vh overflow-auto !p-1 m-1 rounded-md">
         <GeneralLanguageMenu />
       </a-menu>
     </template>
diff --git a/packages/nc-gui/components/nc/Badge.vue b/packages/nc-gui/components/nc/Badge.vue
index 81a7c12352..53d55c040e 100644
--- a/packages/nc-gui/components/nc/Badge.vue
+++ b/packages/nc-gui/components/nc/Badge.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-
 const props = defineProps<{
   color: string
 }>()
@@ -8,26 +6,22 @@ const props = defineProps<{
 
 <template>
   <div
-    class="badge-color"
+    class="border-1 h-6 rounded-md px-1"
     :class="{
-      'border-purple-500': props.color === 'purple',
-      'bg-purple-100': props.color === 'purple',
-      'border-blue-500': props.color === 'blue',
-      'bg-blue-100': props.color === 'blue',
-      'border-green-500': props.color === 'green',
-      'bg-green-100': props.color === 'green',
-      'border-orange-500': props.color === 'orange',
-      'bg-orange-100': props.color === 'orange',
-      'border-yellow-500': props.color === 'yellow',
-      'bg-yellow-100': props.color === 'yellow',
+      'border-purple-500 bg-purple-100': props.color === 'purple',
+      'border-blue-500 bg-blue-100': props.color === 'blue',
+      'border-green-500 bg-green-100': props.color === 'green',
+      'border-orange-500 bg-orange-100': props.color === 'orange',
+      'border-yellow-500 bg-yellow-100': props.color === 'yellow',
+      'border-gray-300': !props.color,
     }"
   >
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
 <style>
 .badge-color {
-  @apply mt-1 border w-23 h-6 rounded-lg;
+  @apply mt-1 w-23 border h-6 rounded-lg;
 }
 </style>
diff --git a/packages/nc-gui/components/nc/Button.vue b/packages/nc-gui/components/nc/Button.vue
index abf4730520..70cf2ebaee 100644
--- a/packages/nc-gui/components/nc/Button.vue
+++ b/packages/nc-gui/components/nc/Button.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ButtonType } from 'ant-design-vue/lib/button'
 import { useSlots } from 'vue'
+import type { NcButtonSize } from '~/lib'
 
 /**
  * @description
@@ -17,7 +18,7 @@ interface Props {
   loading?: boolean
   disabled?: boolean
   type?: ButtonType | 'danger' | undefined
-  size?: 'xsmall' | 'small' | 'medium'
+  size?: NcButtonSize
   centered?: boolean
 }
 
@@ -32,6 +33,8 @@ const emits = defineEmits(['update:loading'])
 
 const slots = useSlots()
 
+const NcButton = ref<HTMLElement | null>(null)
+
 const size = computed(() => props.size)
 
 const type = computed(() => props.type)
@@ -62,10 +65,15 @@ const onBlur = () => {
   isFocused.value = false
   isClicked.value = false
 }
+
+useEventListener(NcButton, 'mousedown', () => {
+  isClicked.value = true
+})
 </script>
 
 <template>
   <a-button
+    ref="NcButton"
     :disabled="props.disabled"
     :loading="loading"
     :type="type"
@@ -74,11 +82,11 @@ const onBlur = () => {
       small: size === 'small',
       medium: size === 'medium',
       xsmall: size === 'xsmall',
+      xxsmall: size === 'xxsmall',
       focused: isFocused,
     }"
     @focus="onFocus"
     @blur="onBlur"
-    @mousedown="isClicked = true"
   >
     <div
       class="flex flex-row gap-x-2.5 w-full"
@@ -91,6 +99,7 @@ const onBlur = () => {
 
       <slot v-else name="icon" />
       <div
+        class="flex flex-row items-center"
         :class="{
           'font-medium': type === 'primary' || type === 'danger',
         }"
@@ -120,7 +129,7 @@ const onBlur = () => {
 }
 
 .nc-button.ant-btn {
-  @apply rounded-lg  font-medium;
+  @apply rounded-lg font-medium;
 }
 
 .nc-button.ant-btn.small {
@@ -132,7 +141,11 @@ const onBlur = () => {
 }
 
 .nc-button.ant-btn.xsmall {
-  @apply p-0.25 h-6.25 w-6.25;
+  @apply p-0.25 h-6.25 min-w-6.25 rounded-md;
+}
+
+.nc-button.ant-btn.xxsmall {
+  @apply p-0 h-6 min-w-6 rounded-md;
 }
 
 .nc-button.ant-btn[disabled] {
@@ -160,7 +173,7 @@ const onBlur = () => {
   @apply bg-white border-1 border-gray-200 text-gray-700;
 
   &:hover {
-    @apply bg-gray-50;
+    @apply bg-gray-100;
   }
 }
 
@@ -175,7 +188,7 @@ const onBlur = () => {
 .nc-button.ant-btn-text {
   box-shadow: none;
 
-  @apply bg-transparent border-0 text-gray-700 hover:bg-gray-50;
+  @apply bg-transparent border-0 text-gray-700 hover:bg-gray-100;
 
   &:focus {
     box-shadow: none;
diff --git a/packages/nc-gui/components/nc/Divider.vue b/packages/nc-gui/components/nc/Divider.vue
new file mode 100644
index 0000000000..1ddc31fd22
--- /dev/null
+++ b/packages/nc-gui/components/nc/Divider.vue
@@ -0,0 +1,9 @@
+<template>
+  <a-divider class="nc-divider" />
+</template>
+
+<style lang="scss">
+.nc-divider.ant-divider {
+  @apply !my-1;
+}
+</style>
diff --git a/packages/nc-gui/components/nc/Dropdown.vue b/packages/nc-gui/components/nc/Dropdown.vue
index ffd65a82cb..af17f213ac 100644
--- a/packages/nc-gui/components/nc/Dropdown.vue
+++ b/packages/nc-gui/components/nc/Dropdown.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
+import { onKeyStroke } from '#imports'
+
 const props = withDefaults(
   defineProps<{
     trigger?: Array<'click' | 'hover' | 'contextmenu'>
     visible?: boolean | undefined
     overlayClassName?: string | undefined
+    autoClose?: boolean
   }>(),
   {
     trigger: () => ['click'],
     visible: undefined,
     overlayClassName: undefined,
+    autoClose: true,
   },
 )
 
@@ -18,8 +22,10 @@ const trigger = toRef(props, 'trigger')
 
 const overlayClassName = toRef(props, 'overlayClassName')
 
+const autoClose = computed(() => props.autoClose)
+
 const overlayClassNameComputed = computed(() => {
-  let className = 'nc-dropdown bg-white rounded-2xl border-1 border-gray-100 shadow-md overflow-hidden'
+  let className = 'nc-dropdown bg-white rounded-lg border-1 border-gray-100 shadow-md overflow-hidden'
   if (overlayClassName.value) {
     className += ` ${overlayClassName.value}`
   }
@@ -27,6 +33,20 @@ const overlayClassNameComputed = computed(() => {
 })
 
 const visible = useVModel(props, 'visible', emits)
+
+onKeyStroke('Escape', () => {
+  if (visible.value && autoClose.value) {
+    visible.value = false
+  }
+})
+
+const overlayWrapperDomRef = ref<HTMLElement | null>(null)
+
+onClickOutside(overlayWrapperDomRef, () => {
+  if (!autoClose.value) return
+
+  visible.value = false
+})
 </script>
 
 <template>
@@ -39,7 +59,7 @@ const visible = useVModel(props, 'visible', emits)
     <slot />
 
     <template #overlay>
-      <slot name="overlay" />
+      <slot ref="overlayWrapperDomRef" name="overlay" />
     </template>
   </a-dropdown>
 </template>
diff --git a/packages/nc-gui/components/nc/Menu.vue b/packages/nc-gui/components/nc/Menu.vue
new file mode 100644
index 0000000000..3afd9e6565
--- /dev/null
+++ b/packages/nc-gui/components/nc/Menu.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  selectable?: boolean | undefined
+}>()
+
+const selectable = computed(() => props.selectable ?? false)
+</script>
+
+<template>
+  <a-menu class="nc-menu" :selectable="selectable">
+    <slot />
+  </a-menu>
+</template>
+
+<style lang="scss">
+.nc-menu {
+  @apply bg-white !rounded-md !py-1;
+}
+</style>
diff --git a/packages/nc-gui/components/nc/MenuItem.vue b/packages/nc-gui/components/nc/MenuItem.vue
new file mode 100644
index 0000000000..08a42be6b4
--- /dev/null
+++ b/packages/nc-gui/components/nc/MenuItem.vue
@@ -0,0 +1,17 @@
+<template>
+  <a-menu-item class="nc-menu-item">
+    <div class="nc-menu-item-inner">
+      <slot />
+    </div>
+  </a-menu-item>
+</template>
+
+<style lang="scss">
+.nc-menu-item {
+  @apply !py-2 font-normal text-sm;
+}
+
+.nc-menu-item-inner {
+  @apply flex flex-row items-center gap-x-2.25;
+}
+</style>
diff --git a/packages/nc-gui/components/nc/Modal.vue b/packages/nc-gui/components/nc/Modal.vue
index f40bc2160c..f50143b6d9 100644
--- a/packages/nc-gui/components/nc/Modal.vue
+++ b/packages/nc-gui/components/nc/Modal.vue
@@ -55,6 +55,8 @@ const height = computed(() => {
 })
 
 const visible = useVModel(props, 'visible', emits)
+
+const slots = useSlots()
 </script>
 
 <template>
@@ -76,7 +78,7 @@ const visible = useVModel(props, 'visible', emits)
         maxHeight: height,
       }"
     >
-      <div class="flex pb-2 mb-2 text-lg font-medium border-b-1 border-gray-100">
+      <div v-if="slots.header" class="flex pb-2 mb-2 text-lg font-medium border-b-1 border-gray-100">
         <slot name="header" />
       </div>
 
diff --git a/packages/nc-gui/components/nc/Tabs.vue b/packages/nc-gui/components/nc/Tabs.vue
index eff2e2ce02..de6d432d98 100644
--- a/packages/nc-gui/components/nc/Tabs.vue
+++ b/packages/nc-gui/components/nc/Tabs.vue
@@ -3,17 +3,10 @@ const props = defineProps<{
   modelValue?: string
   centered?: boolean
 }>()
-
-const emits = defineEmits<{
-  (event: 'update:modelValue', data: string): void
-}>()
-
-const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
   <a-tabs
-    v-model:activeKey="vModel"
     class="nc-tabs"
     :class="{
       centered: props.centered,
diff --git a/packages/nc-gui/components/nc/Tooltip.vue b/packages/nc-gui/components/nc/Tooltip.vue
index b4b88f8fbb..0810b8b3ab 100644
--- a/packages/nc-gui/components/nc/Tooltip.vue
+++ b/packages/nc-gui/components/nc/Tooltip.vue
@@ -14,13 +14,19 @@ interface Props {
   hideOnClick?: boolean
 }
 
-const { modifierKey, tooltipStyle, disabled, hideOnClick } = defineProps<Props>()
+const props = defineProps<Props>()
+
+const modifierKey = computed(() => props.modifierKey)
+const tooltipStyle = computed(() => props.tooltipStyle)
+const disabled = computed(() => props.disabled)
+const hideOnClick = computed(() => props.hideOnClick)
+const placement = computed(() => props.placement ?? 'top')
 
 const el = ref()
 
 const showTooltip = controlledRef(false, {
   onBeforeChange: (shouldShow) => {
-    if (shouldShow && disabled) return false
+    if (shouldShow && disabled.value) return false
   },
 })
 
@@ -31,7 +37,7 @@ const attrs = useAttrs()
 const isKeyPressed = ref(false)
 
 onKeyStroke(
-  (e) => e.key === modifierKey,
+  (e) => e.key === modifierKey.value,
   (e) => {
     e.preventDefault()
 
@@ -45,7 +51,7 @@ onKeyStroke(
 )
 
 onKeyStroke(
-  (e) => e.key === modifierKey,
+  (e) => e.key === modifierKey.value,
   (e) => {
     e.preventDefault()
 
@@ -55,7 +61,7 @@ onKeyStroke(
   { eventName: 'keyup' },
 )
 
-watch([isHovering, () => modifierKey, () => disabled], ([hovering, key, isDisabled]) => {
+watch([isHovering, () => modifierKey.value, () => disabled.value], ([hovering, key, isDisabled]) => {
   if (!hovering || isDisabled) {
     showTooltip.value = false
     return
@@ -85,7 +91,7 @@ const divStyles = computed(() => ({
 }))
 
 const onClick = () => {
-  if (hideOnClick && showTooltip.value) {
+  if (hideOnClick.value && showTooltip.value) {
     showTooltip.value = false
   }
 }
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index 682f8ffb8e..94975a96b1 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { OrderedProjectRoles, RoleColors, RoleLabels } from 'nocodb-sdk'
-import type { ProjectRoles, WorkspaceUserType } from 'nocodb-sdk'
+import type { WorkspaceUserType } from 'nocodb-sdk'
+import { OrderedProjectRoles, ProjectRoles, RoleColors, RoleLabels } from 'nocodb-sdk'
 import InfiniteLoading from 'v3-infinite-loading'
-import { storeToRefs, stringToColour, timeAgo, useGlobal } from '#imports'
+import { isEeUI, storeToRefs, stringToColour, timeAgo, useGlobal } from '#imports'
 
 const { user } = useGlobal()
 const projectsStore = useProjects()
@@ -35,7 +35,7 @@ const loadCollaborators = async () => {
         ...user,
         projectRoles: user.roles,
         // TODO: Remove this hack and make the values consistent with the backend
-        roles: user.roles ?? (RoleLabels[user.workspace_roles as string] as string)?.toLowerCase(),
+        roles: user.roles ?? (RoleLabels[user.workspace_roles as string] as string)?.toLowerCase() ?? ProjectRoles.NO_ACCESS,
       })),
     ]
   } catch (e: any) {
@@ -74,7 +74,7 @@ onMounted(async () => {
 
 const updateCollaborator = async (collab, roles) => {
   try {
-    if (!roles) {
+    if (!roles || roles === 'inherit' || (roles === ProjectRoles.NO_ACCESS && !isEeUI)) {
       await removeProjectUser(activeProjectId.value!, collab)
       collab.projectRoles = null
     } else if (collab.projectRoles) {
@@ -154,7 +154,7 @@ const accessibleRoles = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles
         v-else-if="!collaborators?.length"
         class="nc-collaborators-list w-full h-full flex flex-col items-center justify-center mt-36"
       >
-        <Empty description="No collaborators found" />
+        <a-empty description="No collaborators found" />
       </div>
       <div v-else class="nc-collaborators-list nc-scrollbar-md">
         <div class="nc-collaborators-list-header">
@@ -187,8 +187,7 @@ const accessibleRoles = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles
                   class="w-35 !rounded px-1"
                   :virtual="true"
                   :placeholder="$t('labels.noAccess')"
-                  :disabled="collab.id === user?.id"
-                  allow-clear
+                  :disabled="collab.id === user?.id || (collab.roles && !accessibleRoles.includes(collab.roles))"
                   @change="(value) => updateCollaborator(collab, value)"
                 >
                   <template #suffixIcon>
@@ -211,6 +210,11 @@ const accessibleRoles = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles
                       </NcBadge>
                     </a-select-option>
                   </template>
+                  <a-select-option v-if="isEeUI" value="inherit">
+                    <NcBadge color="white">
+                      <p class="badge-text">Inherit</p>
+                    </NcBadge>
+                  </a-select-option>
                 </NcSelect>
               </div>
             </div>
@@ -259,4 +263,8 @@ const accessibleRoles = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles
 :deep(.nc-collaborator-role-select .ant-select-selector) {
   @apply !rounded;
 }
+
+:deep(.ant-select-selection-item) {
+  @apply mt-0.75;
+}
 </style>
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index 2ff417054b..d0aa000a48 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -1,13 +1,16 @@
 <script lang="ts" setup>
+import { stringifyRolesObj } from 'nocodb-sdk'
 import type { BaseType, TableType } from 'nocodb-sdk'
 import dayjs from 'dayjs'
 
 const { activeTables } = storeToRefs(useTablesStore())
 const { openTable } = useTablesStore()
-const { openedProject, roles } = storeToRefs(useProjects())
+const { openedProject } = storeToRefs(useProjects())
 
 const { isUIAllowed } = useUIPermission()
 
+const { allRoles } = useRoles()
+
 const { $e } = useNuxtApp()
 
 const isImportModalOpen = ref(false)
@@ -71,7 +74,7 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
 
 <template>
   <div class="nc-all-tables-view">
-    <div v-if="isUIAllowed('tableCreate', false, roles)" class="flex flex-row gap-x-6 pb-3 pt-6">
+    <div v-if="isUIAllowed('tableCreate', false, stringifyRolesObj(allRoles))" class="flex flex-row gap-x-6 pb-3 pt-6">
       <div class="nc-project-view-all-table-btn" data-testid="proj-view-btn__add-new-table" @click="openTableCreateDialog()">
         <GeneralIcon icon="addOutlineBox" />
         <div class="label">{{ $t('general.new') }} {{ $t('objects.table') }}</div>
diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index d8e105e9c0..7b33eb7242 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -23,7 +23,13 @@ const usersData = ref<{
   roles?: string
 }>()
 
+const isInvitingCollaborators = ref(false)
+
 const inviteCollaborator = async () => {
+  isInvitingCollaborators.value = true
+
+  if (isInvitingCollaborators.value) return
+
   try {
     usersData.value = await inviteUser(inviteData)
     usersData.roles = inviteData.roles
@@ -35,6 +41,8 @@ const inviteCollaborator = async () => {
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
+
+  isInvitingCollaborators.value = false
 }
 
 const inviteUrl = computed(() =>
@@ -111,7 +119,7 @@ const copyUrl = async () => {
             class="!max-w-130 !rounded"
           />
 
-          <a-select v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
+          <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
             <template #suffixIcon>
               <MdiChevronDown />
             </template>
@@ -140,7 +148,7 @@ const copyUrl = async () => {
                 <p class="badge-text">{{ role }}</p>
               </NcBadge>
             </a-select-option>
-          </a-select>
+          </NcSelect>
 
           <a-button
             type="primary"
@@ -162,10 +170,14 @@ const copyUrl = async () => {
 
 <style scoped>
 .badge-text {
-  @apply text-[14px] pt-1 text-center;
+  @apply text-[14px] pt-1 text-center font-medium first-letter:uppercase;
 }
 
 :deep(.ant-select .ant-select-selector) {
   @apply rounded;
 }
+
+:deep(.ant-select-selection-item) {
+  @apply mt-0.75;
+}
 </style>
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 0dae031de7..c26f8fda4f 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -57,10 +57,11 @@ watch(
 <template>
   <div class="h-full nc-project-view">
     <div
-      class="flex flex-row pl-5 pr-3 border-b-1 border-gray-200 justify-between w-full"
+      class="flex flex-row pl-2 pr-2 border-b-1 border-gray-200 justify-between w-full"
       :class="{ 'nc-table-toolbar-mobile': isMobileMode, 'h-[var(--topbar-height)]': !isMobileMode }"
     >
       <div class="flex flex-row items-center gap-x-4">
+        <GeneralOpenLeftSidebarBtn />
         <GeneralProjectIcon :type="openedProject?.type" />
         <div class="flex font-medium text-base capitalize">
           {{ openedProject?.title }}
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 40ba4a9a6c..43b4703e23 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -39,7 +39,6 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
 const { isViewDataLoading } = storeToRefs(useViewsStore())
-const { isSqlView, xWhere } = useSmartsheetStoreOrThrow()
 
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
@@ -55,7 +54,7 @@ const {
   addEmptyRow,
   deleteRow,
   navigateToSiblingRow,
-} = useViewData(meta, view, xWhere)
+} = useViewData(meta, view)
 
 provide(IsFormInj, ref(false))
 provide(IsGalleryInj, ref(true))
@@ -86,6 +85,8 @@ const isRowEmpty = (record: any, col: any) => {
   return Array.isArray(val) && val.length === 0
 }
 
+const { isSqlView } = useSmartsheetStoreOrThrow()
+
 const { isUIAllowed } = useUIPermission()
 const hasEditPermission = computed(() => isUIAllowed('xcDatatableEditable'))
 // TODO: extract this code (which is duplicated in grid and gallery) into a separate component
diff --git a/packages/nc-gui/components/smartsheet/Pagination.vue b/packages/nc-gui/components/smartsheet/Pagination.vue
index 6d96ae207a..c3f1ef99dd 100644
--- a/packages/nc-gui/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui/components/smartsheet/Pagination.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { PaginatedType } from 'nocodb-sdk'
-import SidebarIcon from '~icons/nc-icons/sidebar'
 import { IsGroupByInj, computed, iconMap, inject, isRtlLang, useI18n } from '#imports'
 import type { Language } from '#imports'
 
@@ -66,24 +65,6 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
       isGroupBy ? 'margin-top:1px; border-radius: 0 0 12px 12px !important;' : ''
     }${extraStyle}`"
   >
-    <NcTooltip v-if="!isPublic && hideSidebars !== true" class="ml-2" placement="topLeft" hide-on-click>
-      <template #title>
-        {{
-          isLeftSidebarOpen
-            ? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}`
-            : `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}`
-        }}
-      </template>
-      <div
-        class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) hover:(bg-gray-100 border-gray-200) border-gray-200 group flex items-center justify-center rounded-md h-full px-1.75 h-7 cursor-pointer text-gray-500 hover:text-gray-700"
-        :class="{
-          'bg-gray-100': !isLeftSidebarOpen,
-        }"
-        @click="isLeftSidebarOpen = !isLeftSidebarOpen"
-      >
-        <SidebarIcon class="cursor-pointer transform transition-transform duration-500 rounded-md rotate-180" />
-      </div>
-    </NcTooltip>
     <slot name="add-record" />
     <div class="flex-1">
       <span
@@ -117,7 +98,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
       </div>
     </template>
 
-    <div class="flex-1 text-right pr-2">
+    <div class="flex-1 text-right">
       <span
         v-if="alignCountOnRight && count !== null && count !== Infinity"
         class="caption nc-grid-row-count mr-2.5 text-gray-500 text-xs"
@@ -126,28 +107,6 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
         {{ count }} {{ customLabel ? customLabel : count !== 1 ? $t('objects.records') : $t('objects.record') }}
       </span>
     </div>
-
-    <NcTooltip v-if="!isPublic && hideSidebars !== true" placement="topRight" hide-on-click>
-      <template #title>
-        {{
-          isRightSidebarOpen
-            ? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}`
-            : `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}`
-        }}
-      </template>
-
-      <div
-        class="flex flex-row items-center justify-center !rounded-md !p-1.75 border-gray-100 cursor-pointer bg-white hover:bg-gray-100 text-gray-500 hover:text-gray-700 nc-sidebar-right-toggle-icon"
-        :class="{
-          '!bg-gray-100': !isRightSidebarOpen,
-        }"
-        type="ghost"
-        @click="isRightSidebarOpen = !isRightSidebarOpen"
-      >
-        <SidebarIcon class="w-4 h-4" />
-      </div>
-    </NcTooltip>
-    <div class="w-2"></div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index 7b252a6dd0..4c10a581d9 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -12,12 +12,21 @@ const { isMobileMode } = useGlobal()
 const { isUIAllowed } = useUIPermission()
 
 const { allowCSVDownload } = useSharedView()
+
+const isViewSidebarAvailable = computed(
+  () => (isGrid.value || isGallery.value || isKanban.value || isMap.value) && !isPublic.value,
+)
 </script>
 
 <template>
   <div
-    class="nc-table-toolbar h-12 min-h-12 py-1 flex gap-2 items-center px-3 border-b border-gray-200 overflow-hidden"
-    :class="{ 'nc-table-toolbar-mobile': isMobileMode, 'h-[var(--topbar-height)]': !isMobileMode }"
+    class="nc-table-toolbar h-12 min-h-12 py-1 flex gap-2 items-center border-b border-gray-200 overflow-hidden"
+    :class="{
+      'nc-table-toolbar-mobile': isMobileMode,
+      'max-h-[var(--topbar-height)] min-h-[var(--topbar-height)]': !isMobileMode,
+      'pl-3 pr-0': isViewSidebarAvailable,
+      'px-3': !isViewSidebarAvailable,
+    }"
     style="z-index: 7"
   >
     <template v-if="isViewsLoading">
@@ -50,6 +59,7 @@ const { allowCSVDownload } = useSharedView()
         v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
         :show-system-fields="false"
       />
+      <LazySmartsheetToolbarOpenViewSidebarBtn v-if="isViewSidebarAvailable" />
     </template>
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/Topbar.vue b/packages/nc-gui/components/smartsheet/Topbar.vue
index e6bb0d336a..cf502f9fb4 100644
--- a/packages/nc-gui/components/smartsheet/Topbar.vue
+++ b/packages/nc-gui/components/smartsheet/Topbar.vue
@@ -22,13 +22,17 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
 <template>
   <div
     class="nc-table-topbar h-20 py-1 flex gap-2 items-center pr-2 pl-2.5 border-b border-gray-200 overflow-hidden relative"
-    :class="{ 'nc-table-toolbar-mobile': isMobileMode, 'h-[var(--topbar-height)]': !isMobileMode }"
+    :class="{
+      'nc-table-toolbar-mobile': isMobileMode,
+      'max-h-[var(--topbar-height)] min-h-[var(--topbar-height)]': !isMobileMode,
+    }"
     style="z-index: 7"
   >
     <template v-if="isViewsLoading">
       <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
     </template>
     <template v-else>
+      <GeneralOpenLeftSidebarBtn />
       <LazySmartsheetToolbarViewInfo v-if="!isPublic" />
 
       <div v-if="!isMobileMode" class="flex-1" />
@@ -38,6 +42,11 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
       <GeneralApiLoader />
 
       <LazyGeneralShareProject v-if="(isForm || isGrid || isKanban || isGallery || isMap) && !isPublic" is-view-toolbar />
+
+      <LazyGeneralLanguage
+        v-if="isSharedBase"
+        class="cursor-pointer text-lg hover:(text-black bg-gray-200) mr-0 p-1.5 rounded-md"
+      />
     </template>
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue b/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
index 05e9e7594b..417c05c11a 100644
--- a/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
@@ -50,7 +50,7 @@ vModel.value.au = !!vModel.value.au */
         <a-form-item label="NN">
           <a-checkbox
             v-model:checked="vModel.rqd"
-            :disabled="vModel.pk"
+            :disabled="vModel.pk || !sqlUi.columnEditable(vModel)"
             class="nc-column-checkbox-NN"
             @change="onAlter"
           />
@@ -59,6 +59,7 @@ vModel.value.au = !!vModel.value.au */
         <a-form-item label="PK">
           <a-checkbox
             v-model:checked="vModel.pk"
+            :disabled="!sqlUi.columnEditable(vModel)"
             class="nc-column-checkbox-PK"
             @change="onAlter"
           />
@@ -67,17 +68,17 @@ vModel.value.au = !!vModel.value.au */
         <a-form-item label="AI">
           <a-checkbox
             v-model:checked="vModel.ai"
-            :disabled="sqlUi.colPropUNDisabled(vModel)"
+            :disabled="sqlUi.colPropUNDisabled(vModel) || !sqlUi.columnEditable(vModel)"
             class="nc-column-checkbox-AI"
             @change="onAlter"
           />
         </a-form-item>
 
-        <a-form-item label="UN" :disabled="sqlUi.colPropUNDisabled(vModel)" @change="onAlter">
+        <a-form-item label="UN" :disabled="sqlUi.colPropUNDisabled(vModel) || !sqlUi.columnEditable(vModel)" @change="onAlter">
           <a-checkbox v-model:checked="vModel.un" class="nc-column-checkbox-UN" />
         </a-form-item>
 
-        <a-form-item label="AU" :disabled="sqlUi.colPropAuDisabled(vModel)" @change="onAlter">
+        <a-form-item label="AU" :disabled="sqlUi.colPropAuDisabled(vModel) || !sqlUi.columnEditable(vModel)" @change="onAlter">
           <a-checkbox v-model:checked="vModel.au" class="nc-column-checkbox-AU" />
         </a-form-item>
       </div>
@@ -95,13 +96,13 @@ vModel.value.au = !!vModel.value.au */
       <a-form-item v-if="!hideLength" :label="$t('labels.lengthValue')">
         <a-input
           v-model:value="vModel.dtxp"
-          :disabled="sqlUi.getDefaultLengthIsDisabled(vModel.dt)"
+          :disabled="sqlUi.getDefaultLengthIsDisabled(vModel.dt) || !sqlUi.columnEditable(vModel)"
           @input="onAlter"
         />
       </a-form-item>
 
       <a-form-item v-if="sqlUi.showScale(vModel)" label="Scale">
-        <a-input v-model:value="vModel.dtxs" @input="onAlter" />
+        <a-input v-model:value="vModel.dtxs" :disabled="!sqlUi.columnEditable(vModel)" @input="onAlter" />
       </a-form-item>
     </template>
 
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 85e117b19b..991daa19e2 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -49,7 +49,7 @@ const { copy } = useCopy()
 const copyRecordUrl = () => {
   copy(
     encodeURI(
-      `${dashboardUrl?.value}#/${route.params.typeOrId}/${route.params.projectId}/${route.params.type}/${meta.value?.id}${
+      `${dashboardUrl?.value}#/${route.params.typeOrId}/${route.params.projectId}/${meta.value?.id}${
         props.view ? `/${props.view.title}` : ''
       }?rowId=${primaryKey.value}`,
     ),
@@ -127,12 +127,18 @@ const onConfirmDeleteRowClick = async () => {
       />
     </a-tooltip>
 
-    <a-button class="nc-expand-form-save-btn !rounded-md" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
+    <NcButton
+      class="nc-expand-form-save-btn !w-[60px]"
+      type="primary"
+      size="small"
+      :disabled="!isUIAllowed('tableRowUpdate')"
+      @click="save"
+    >
       {{ $t('general.save') }}
-    </a-button>
+    </NcButton>
 
     <a-dropdown>
-      <component :is="iconMap.threeDotVertical" class="nc-icon-transition nc-expand-form-more-actions" />
+      <component :is="iconMap.threeDotVertical" class="nc-icon-transition nc-expand-form-more-actions hover:cursor-pointer" />
       <template #overlay>
         <a-menu>
           <a-menu-item v-if="!isNew" @click="loadRow()">
@@ -174,9 +180,17 @@ const onConfirmDeleteRowClick = async () => {
         </a-menu>
       </template>
     </a-dropdown>
-    <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
-      <p>Are you sure you want to delete this row?</p>
-    </a-modal>
+    <GeneralModal v-model:visible="showDeleteRowModal" class="!w-[25rem]">
+      <div class="p-4">
+        <div class="prose-xl font-bold self-center">Delete row ?</div>
+
+        <div class="mt-4">Are you sure you want to delete this row?</div>
+      </div>
+      <div class="flex flex-row gap-x-2 mt-1 pt-1.5 justify-end p-4">
+        <NcButton type="secondary" @click="showDeleteRowModal = false">{{ $t('general.cancel') }}</NcButton>
+        <NcButton @click="onConfirmDeleteRowClick">{{ $t('general.confirm') }} </NcButton>
+      </div>
+    </GeneralModal>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index ef05be4d58..9346b2ee94 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1124,7 +1124,7 @@ defineExpose({
 })
 
 // when expand is clicked the drawer should open
-// and cell should loose focus
+// and cell should loose focs
 const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
   if (expandForm) {
     expandForm(row, col)
@@ -1218,7 +1218,7 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
                     >
                       <div class="h-full w-[60px] flex items-center justify-center">
                         <GeneralIcon v-if="isEeUI && (altModifier || persistMenu)" icon="magic" class="text-sm text-orange-400" />
-                        <component :is="iconMap.plus" class="text-sm nc-column-add text-gray-500 !group-hover:text-black" />
+                        <component :is="iconMap.plus" class="text-base nc-column-add text-gray-500 !group-hover:text-black" />
                       </div>
 
                       <template v-if="isEeUI && persistMenu" #overlay>
@@ -1469,7 +1469,7 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
               >
                 <td class="text-left pointer sticky left-0 !border-r-0">
                   <div class="px-2 w-full flex items-center text-gray-500">
-                    <component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-gray-600 group-hover:text-black" />
+                    <component :is="iconMap.plus" class="text-pint-500 text-base ml-2 text-gray-600 group-hover:text-black" />
                   </div>
                 </td>
                 <td class="!border-gray-100" :colspan="visibleColLength"></td>
@@ -1590,7 +1590,7 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
       :extra-style="paginationStyleRef?.extraStyle"
     >
       <template #add-record>
-        <div v-if="isAddingEmptyRowAllowed" class="flex ml-2">
+        <div v-if="isAddingEmptyRowAllowed" class="flex ml-1">
           <a-dropdown-button
             class="nc-grid-add-new-row"
             placement="top"
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index dc287fb699..4ba762705d 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
-import { ColumnInj, IsFormInj, IsKanbanInj, IsLockedInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
+import { ColumnInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
 
 interface Props {
   column: ColumnType
@@ -18,8 +18,6 @@ const isDropDownOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
-const isLocked = inject(IsLockedInj, ref(false))
-
 const column = toRef(props, 'column')
 
 const { isUIAllowed } = useUIPermission()
@@ -41,7 +39,7 @@ const closeAddColumnDropdown = () => {
 }
 
 const openHeaderMenu = () => {
-  if (!isLocked.value && !isForm.value && isUIAllowed('edit-column')) {
+  if (!isForm.value && isUIAllowed('edit-column')) {
     editColumnDropdown.value = true
   }
 }
@@ -59,7 +57,7 @@ const openHeaderMenu = () => {
     <div
       v-if="column"
       class="name pl-1 !truncate"
-      :class="{ 'cursor-pointer pt-0.25': !isForm && isUIAllowed('edit-column') && !hideMenu && !isLocked }"
+      :class="{ 'cursor-pointer pt-0.25': !isForm && isUIAllowed('edit-column') && !hideMenu }"
       style="white-space: pre-line"
       :title="column.title"
     >
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index 30bd040c3f..94031e9ecf 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -297,13 +297,38 @@ const setIcon = async (icon: string, view: ViewType) => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+const scrollViewNode = () => {
+  const activeViewDom = document.querySelector(`.nc-views-menu [data-view-id="${activeView.value?.id}"]`) as HTMLElement
+  if (!activeViewDom) return
+
+  if (isElementInvisible(activeViewDom)) {
+    // Scroll to the view node
+    activeViewDom?.scrollIntoView({ behavior: 'auto', inline: 'start' })
+  }
+}
+
+watch(
+  () => activeView.value?.id,
+  () => {
+    if (!activeView.value?.id) return
+
+    // TODO: Find a better way to scroll to the view node
+    setTimeout(() => {
+      scrollViewNode()
+    }, 800)
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 
 <template>
   <a-menu
     ref="menuRef"
     :class="{ dragging }"
-    class="nc-views-menu flex flex-col !px-3 w-full !border-r-0 !bg-inherit nc-scrollbar-md"
+    class="nc-views-menu flex flex-col !ml-3 w-full !border-r-0 !bg-inherit"
     :selected-keys="selected"
   >
     <!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
@@ -319,6 +344,7 @@ const setIcon = async (icon: string, view: ViewType) => {
         'active': activeView?.id === view.id,
         [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
       }"
+      :data-view-id="view.id"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
       @delete="openDeleteDialog"
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 630f626fe7..84c9a348b9 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -37,6 +37,8 @@ const activeView = inject(ActiveViewInj, ref())
 
 const isLocked = inject(IsLockedInj, ref(false))
 
+const { rightSidebarState } = storeToRefs(useSidebarStore())
+
 const isDropdownOpen = ref(false)
 
 const isEditing = ref(false)
@@ -167,6 +169,12 @@ function onStopEdit() {
     isStopped.value = false
   }, 250)
 }
+
+watch(rightSidebarState, () => {
+  if (rightSidebarState.value === 'peekCloseEnd') {
+    isDropdownOpen.value = false
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index 3e516d4ece..6460697e35 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -16,9 +16,6 @@ import {
   useViewsStore,
   watch,
 } from '#imports'
-import FieldIcon from '~icons/nc-icons/eye'
-
-const openedTab = ref<'views' | 'developer'>('views')
 
 const { refreshCommandPalette } = useCommandPalette()
 
@@ -50,12 +47,10 @@ const route = useRoute()
 
 const { $e } = useNuxtApp()
 
-const { rightSidebarSize } = storeToRefs(useSidebarStore())
+const { isRightSidebarOpen } = storeToRefs(useSidebarStore())
 
 const tabBtnsContainerRef = ref<HTMLElement | null>(null)
 
-const minimalMode = ref(false)
-
 /** Watch route param and change active view based on `viewTitle` */
 watch(
   [views, () => route.params.viewTitle],
@@ -142,40 +137,6 @@ function onOpenModal({
     close(1000)
   }
 }
-const onTabChange = (tab: 'views' | 'developer') => {
-  openedTab.value = tab
-}
-
-const onResize = () => {
-  if (!tabBtnsContainerRef?.value) return
-
-  const remToPx = parseFloat(getComputedStyle(document.documentElement).fontSize)
-
-  if (!tabBtnsContainerRef?.value?.offsetWidth) return
-
-  if (tabBtnsContainerRef?.value?.offsetWidth < 13 * remToPx) {
-    minimalMode.value = true
-  } else {
-    minimalMode.value = false
-  }
-}
-
-watch(
-  () => rightSidebarSize.value?.current,
-  () => {
-    onResize()
-  },
-)
-
-onMounted(() => {
-  window.addEventListener('resize', onResize)
-
-  onResize()
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', onResize)
-})
 </script>
 
 <template>
@@ -186,14 +147,46 @@ onUnmounted(() => {
     <div
       v-else
       ref="tabBtnsContainerRef"
-      class="flex flex-row p-1 mx-3 mt-2.25 mb-2.75 rounded-md gap-x-2 nc-view-sidebar-tab text-gray-500"
+      class="flex flex-row group py-1 mx-3.25 mt-1.25 mb-2.75 rounded-md gap-x-2 nc-view-sidebar-tab items-center justify-between"
     >
-      Views
+      <div class="flex text-gray-600 ml-1.75">Views</div>
+      <NcTooltip
+        placement="bottomLeft"
+        hide-on-click
+        class="flex opacity-0 group-hover:(opacity-100) transition-all duration-50"
+        :class="{
+          '!w-8 !opacity-100': !isRightSidebarOpen,
+        }"
+      >
+        <template #title>
+          {{
+            isRightSidebarOpen
+              ? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}`
+              : `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}`
+          }}
+        </template>
+        <NcButton
+          type="text"
+          size="small"
+          class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800"
+          @click="isRightSidebarOpen = !isRightSidebarOpen"
+        >
+          <div class="flex items-center text-inherit">
+            <GeneralIcon
+              icon="doubleRightArrow"
+              class="duration-150 transition-all"
+              :class="{
+                'transform rotate-180': !isRightSidebarOpen,
+              }"
+            />
+          </div>
+        </NcButton>
+      </NcTooltip>
     </div>
 
     <div class="flex-1 flex flex-col min-h-0">
       <div class="flex flex-col h-full justify-between w-full">
-        <div class="flex flex-grow w-full">
+        <div class="flex flex-grow nc-scrollbar-md pr-1.75 mr-0.5">
           <div v-if="isViewsLoading" class="flex flex-col w-full">
             <div class="flex flex-row items-center w-full mt-1.5 ml-5 gap-x-3">
               <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 20005fa33e..1117d3b3f9 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -60,7 +60,7 @@ useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
+  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu nc-toolbar-dropdown">
     <div :class="{ 'nc-active-btn': filtersLength }">
       <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-2">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Export.vue b/packages/nc-gui/components/smartsheet/toolbar/Export.vue
index 48d00d4be0..944581ea67 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Export.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Export.vue
@@ -6,8 +6,8 @@ import { iconMap } from '#imports'
   <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
     <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
       <div class="flex gap-2 items-center">
-        <component :is="iconMap.download" class="group-hover:text-accent text-gray-600" />
-        <span class="text-capitalize !text-sm font-weight-normal">{{ $t('general.download') }}</span>
+        <component :is="iconMap.download" class="group-hover:text-accent text-gray-500" />
+        <span class="text-capitalize !text-sm font-medium text-gray-500">{{ $t('general.download') }}</span>
         <component :is="iconMap.arrowDown" class="text-grey" />
       </div>
     </a-button>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 459705fdc8..2070a18119 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -278,7 +278,7 @@ useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
+  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu nc-toolbar-dropdown">
     <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 5efc46db2c..822b7e7a4d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -142,7 +142,12 @@ watch(open, () => {
 </script>
 
 <template>
-  <NcDropdown v-model:visible="open" offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-group-by-menu">
+  <NcDropdown
+    v-model:visible="open"
+    offset-y
+    :trigger="['click']"
+    overlay-class-name="nc-dropdown-group-by-menu nc-toolbar-dropdown"
+  >
     <div :class="{ 'nc-badge nc-active-btn': groupedByColumnIds?.length }">
       <a-button v-e="['c:group-by']" class="nc-group-by-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenViewSidebarBtn.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenViewSidebarBtn.vue
new file mode 100644
index 0000000000..a6e5aaa146
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenViewSidebarBtn.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+const { isRightSidebarOpen: _isRightSidebarOpen } = storeToRefs(useSidebarStore())
+const isRightSidebarOpen = ref(_isRightSidebarOpen.value)
+
+watch(_isRightSidebarOpen, (val) => {
+  if (val) {
+    isRightSidebarOpen.value = true
+  } else {
+    setTimeout(() => {
+      isRightSidebarOpen.value = false
+    }, 300)
+  }
+})
+
+const onClick = () => {
+  if (_isRightSidebarOpen.value) return
+
+  _isRightSidebarOpen.value = !_isRightSidebarOpen.value
+}
+</script>
+
+<template>
+  <NcTooltip
+    placement="bottomLeft"
+    hide-on-click
+    class="transition-all duration-100"
+    :class="{
+      '!w-0 !opacity-0': isRightSidebarOpen,
+      '!w-8 !opacity-100 mr-2': !isRightSidebarOpen,
+    }"
+  >
+    <template #title>
+      {{
+        isRightSidebarOpen
+          ? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}`
+          : `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}`
+      }}
+    </template>
+    <NcButton
+      type="text"
+      size="small"
+      class="nc-sidebar-right-toggle-icon !text-gray-600 !hover:text-gray-800"
+      :class="{
+        'invisible !w-0': isRightSidebarOpen,
+      }"
+      @click="onClick"
+    >
+      <div class="flex items-center text-inherit">
+        <GeneralIcon icon="doubleLeftArrow" class="duration-150 transition-all !text-lg -mt-0.25" />
+      </div>
+    </NcButton>
+  </NcTooltip>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 3f08cb6af7..4c766f0a2a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -55,15 +55,19 @@ function onPressEnter() {
 }
 
 const displayColumnLabel = computed(() => {
+  if (search.value.field) {
+    // use search field label if specified
+    return columns.value?.find((column) => column.value === search.value.field)?.label
+  }
+  // use primary value label by default
   return columns.value?.find((column) => column.primaryValue)?.label
 })
 
 watch(
-  () => (meta.value as TableType)?.columns,
+  () => search.value.field,
   () => {
-    if (columns.value && search.value) search.value.field = columns.value.find((column) => column.primaryValue)?.value
+    onPressEnter()
   },
-  { immediate: true },
 )
 
 watchDebounced(
@@ -81,29 +85,32 @@ watchDebounced(
 <template>
   <div
     class="flex flex-row border-1 rounded-lg h-8 ml-1 border-gray-200 overflow-hidden"
-    :class="{ '!border-primary': search.query.length !== 0 || isFocused }"
+    :class="{ 'border-primary': search.query.length !== 0 || isFocused }"
   >
     <div
       ref="searchDropdown"
       class="flex items-center group relative px-2 cursor-pointer border-r-1 border-gray-200 hover:bg-gray-100"
-      :class="{ '!bg-gray-50 ': isDropdownOpen }"
+      :class="{ 'bg-gray-50 ': isDropdownOpen }"
       @click="isDropdownOpen = !isDropdownOpen"
     >
-      <GeneralIcon icon="search" class="ml-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
-
-      <component :is="iconMap.arrowDown" class="ml-1 text-gray-400 !text-sm" />
-
+      <GeneralIcon icon="search" class="ml-1 mr-2 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
+      <div class="w-16 group-hover:w-12 text-[0.75rem] font-medium text-gray-400 truncate">
+        {{ displayColumnLabel }}
+      </div>
+      <div class="hidden group-hover:block">
+        <component :is="iconMap.arrowDown" class="text-gray-400 text-sm" />
+      </div>
       <a-select
         v-model:value="search.field"
         :open="isDropdownOpen"
         size="small"
         :dropdown-match-select-width="false"
-        dropdown-class-name="!rounded-lg nc-dropdown-toolbar-search-field-option !w-48"
-        class="!py-1 !absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
+        dropdown-class-name="!rounded-lg nc-dropdown-toolbar-search-field-option w-48"
+        class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
       >
         <a-select-option v-for="op of columns" :key="op.value" :value="op.value">
-          <div class="flex items-center -ml-1 gap-2">
-            <SmartsheetHeaderIcon class="" :column="op.column" />
+          <div class="text-[0.75rem] flex items-center -ml-1 gap-2">
+            <SmartsheetHeaderIcon class="text-sm" :column="op.column" />
             {{ op.label }}
           </div>
         </a-select-option>
@@ -113,18 +120,17 @@ watchDebounced(
     <a-input
       v-model:value="search.query"
       size="small"
-      class="!text-xs"
+      class="text-xs"
       :style="{
-        width: '12rem',
+        width: '10rem',
       }"
-      :placeholder="`${$t('general.search')} in ${displayColumnLabel}`"
+      :placeholder="$t('general.search')"
       :bordered="false"
       data-testid="search-data-input"
       @press-enter="onPressEnter"
       @focus="isFocused = true"
       @blur="isFocused = false"
     >
-      <template #addonBefore> </template>
     </a-input>
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index f574c6f152..4775ef572d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -108,7 +108,7 @@ watch(open, () => {
 </script>
 
 <template>
-  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
+  <NcDropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu nc-toolbar-dropdown">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">
@@ -167,7 +167,12 @@ watch(open, () => {
           </template>
         </div>
 
-        <NcDropdown v-if="availableColumns.length" v-model:visible="showCreateSort" :trigger="['click']">
+        <NcDropdown
+          v-if="availableColumns.length"
+          v-model:visible="showCreateSort"
+          :trigger="['click']"
+          overlay-class-name="nc-toolbar-dropdown"
+        >
           <NcButton class="!text-brand-500" type="text" size="small" @click.stop="showCreateSort = true">
             <div class="flex gap-1 items-center">
               <component :is="iconMap.plus" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index e5c4499c6e..073ebd1961 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -3,22 +3,24 @@ import { ViewTypes } from 'nocodb-sdk'
 import { ActiveViewInj, inject } from '#imports'
 
 const selectedView = inject(ActiveViewInj)
+const { openedViewsTab } = storeToRefs(useViewsStore())
 
 const { activeTable } = storeToRefs(useTablesStore())
 </script>
 
 <template>
   <div
-    class="flex flex-row font-medium ml-1.5 items-center border-gray-50"
+    class="flex flex-row font-medium items-center border-gray-50 mt-0.5"
     :class="{
-      'max-w-2/5': selectedView?.type !== ViewTypes.KANBAN,
-      'max-w-1/4': selectedView?.type === ViewTypes.KANBAN,
+      'min-w-2/5 max-w-2/5': selectedView?.type !== ViewTypes.KANBAN,
+      'min-w-1/4 max-w-1/4': selectedView?.type === ViewTypes.KANBAN,
     }"
   >
-    <div v-if="activeTable?.meta?.icon" class="text-lg mr-0.5">
-      {{ activeTable?.meta?.icon }}
-    </div>
-    <MdiTable v-else class="min-w-5 !text-gray-500 mb-0.25" :class="{}" />
+    <LazyGeneralEmojiPicker :emoji="activeTable?.meta?.icon" readonly size="xsmall">
+      <template #default>
+        <MdiTable class="min-w-5 !text-gray-500" :class="{}" />
+      </template>
+    </LazyGeneralEmojiPicker>
     <span
       class="text-ellipsis overflow-hidden pl-1 text-gray-500 max-w-1/2"
       :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
@@ -27,17 +29,15 @@ const { activeTable } = storeToRefs(useTablesStore())
     </span>
 
     <div class="px-2 text-gray-500">/</div>
-    <div v-if="selectedView?.meta?.icon" class="text-lg mr-0.5">
-      {{ selectedView?.meta?.icon }}
-    </div>
-    <GeneralViewIcon v-else :meta="{ type: selectedView?.type }" class="min-w-5 flex" />
+    <LazyGeneralEmojiPicker :emoji="selectedView?.meta?.icon" readonly size="xsmall">
+      <template #default>
+        <GeneralViewIcon :meta="{ type: selectedView?.type }" class="min-w-4.5 text-lg flex" />
+      </template>
+    </LazyGeneralEmojiPicker>
 
-    <span
-      class="text-ellipsis overflow-hidden pl-1.25 text-gray-700 max-w-1/2"
-      :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline', fontSize: '0.9rem' }"
-    >
+    <span class="truncate pl-1.25 text-gray-700 max-w-28/100">
       {{ selectedView?.title }}
     </span>
-    <LazySmartsheetToolbarReload />
+    <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view'" />
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/topbar/SelectMode.vue b/packages/nc-gui/components/smartsheet/topbar/SelectMode.vue
index 9dd8be569f..11c1c1b4e1 100644
--- a/packages/nc-gui/components/smartsheet/topbar/SelectMode.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/SelectMode.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import { ActiveViewInj, inject, ref, storeToRefs, useViewsStore } from '#imports'
+import { storeToRefs, useViewsStore } from '#imports'
 
-const activeView = inject(ActiveViewInj, ref())
-
-const { openedViewsTab } = storeToRefs(useViewsStore())
+const { openedViewsTab, activeView } = storeToRefs(useViewsStore())
 
 const { onViewsTabChange } = useViewsStore()
 </script>
@@ -17,7 +15,8 @@ const { onViewsTabChange } = useViewsStore()
       }"
       @click="onViewsTabChange('view')"
     >
-      <GeneralViewIcon class="tab-icon" :meta="{ type: activeView?.type }" ignore-color />
+      <GeneralViewIcon v-if="activeView?.type" class="tab-icon" :meta="{ type: activeView?.type }" ignore-color />
+      <GeneralLoader v-else class="tab-icon" />
       <div class="tab-title nc-tab">Data</div>
     </div>
     <div
@@ -32,7 +31,7 @@ const { onViewsTabChange } = useViewsStore()
         class="tab-icon"
         :class="{}"
         :style="{
-          fontWeight: 600,
+          fontWeight: 500,
         }"
       />
       <div class="tab-title nc-tab">Details</div>
@@ -46,7 +45,8 @@ const { onViewsTabChange } = useViewsStore()
 }
 
 .tab-icon {
-  font-size: 1.1rem;
+  font-size: 1.1rem !important;
+  @apply min-w-4.5;
 }
 .tab .tab-title {
   @apply min-w-0;
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index d0714f432e..d3cb2cdffc 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -163,7 +163,7 @@ const onDrop = async (event: DragEvent) => {
 <template>
   <div class="nc-container flex flex-col h-full" @drop="onDrop" @dragover.prevent>
     <LazySmartsheetTopbar />
-    <TabsSmartsheetResizable>
+    <TabsSmartsheetResizable style="height: calc(100% - var(--topbar-height))">
       <template #content>
         <div v-if="openedViewsTab === 'view'" class="flex flex-col h-full flex-1 min-w-0">
           <LazySmartsheetToolbar v-if="!isForm" />
diff --git a/packages/nc-gui/components/tabs/SmartsheetResizable.vue b/packages/nc-gui/components/tabs/SmartsheetResizable.vue
index fd5996bda1..bd6f6a561b 100644
--- a/packages/nc-gui/components/tabs/SmartsheetResizable.vue
+++ b/packages/nc-gui/components/tabs/SmartsheetResizable.vue
@@ -11,14 +11,11 @@ const {
 const wrapperRef = ref<HTMLDivElement>()
 const splitpaneWrapperRef = ref()
 
+const { rightSidebarState: sidebarState } = storeToRefs(useSidebarStore())
+
 const contentSize = computed(() => 100 - sideBarSize.value.current)
-const isSidebarShort = ref(!isRightSidebarOpen.value)
-const animationDuration = 300
+const animationDuration = 250
 const contentDomWidth = ref(window.innerWidth)
-const isMouseOverShowSidebarZone = ref(false)
-const isAnimationEndAfterSidebarHide = ref(!isRightSidebarOpen.value)
-const isStartHideSidebarAnimation = ref(false)
-const isLeftSidebarAnimating = ref(false)
 
 const sidebarWidth = computed(() => (sideBarSize.value.old * contentDomWidth.value) / 100)
 const currentSidebarSize = computed({
@@ -29,58 +26,44 @@ const currentSidebarSize = computed({
   },
 })
 
-const isSidebarHidden = ref(!isRightSidebarOpen.value)
-
 watch(isRightSidebarOpen, () => {
   sideBarSize.value.current = sideBarSize.value.old
 
   if (isRightSidebarOpen.value) {
-    setTimeout(() => {
-      isSidebarShort.value = true
-
-      isSidebarHidden.value = false
-    }, 0)
+    setTimeout(() => (sidebarState.value = 'openStart'), 0)
 
-    setTimeout(() => {
-      isSidebarShort.value = false
-    }, animationDuration / 2)
+    setTimeout(() => (sidebarState.value = 'openEnd'), animationDuration)
   } else {
     sideBarSize.value.old = sideBarSize.value.current
 
-    isSidebarShort.value = true
-    isAnimationEndAfterSidebarHide.value = false
+    sidebarState.value = 'hiddenStart'
 
     setTimeout(() => {
       sideBarSize.value.current = 0
-      isSidebarHidden.value = true
-      isAnimationEndAfterSidebarHide.value = true
-    }, animationDuration * 1.75)
+
+      sidebarState.value = 'hiddenEnd'
+    }, animationDuration)
   }
 })
 
 function handleMouseMove(e: MouseEvent) {
   if (!wrapperRef.value) return
-
-  if (isRightSidebarOpen.value && !isSidebarHidden.value && !isMouseOverShowSidebarZone.value) return
-  if (isRightSidebarOpen.value) {
-    isSidebarHidden.value = false
-    isMouseOverShowSidebarZone.value = false
-    return
-  }
+  if (sidebarState.value === 'openEnd') return
 
   const viewportWidth = window.innerWidth
 
-  if (e.clientX > viewportWidth - 14) {
-    isSidebarHidden.value = false
-    isMouseOverShowSidebarZone.value = true
-  } else if (e.clientX < viewportWidth - (sidebarWidth.value + 10) && !isSidebarHidden.value) {
-    isSidebarHidden.value = true
-    isMouseOverShowSidebarZone.value = false
-    isAnimationEndAfterSidebarHide.value = false
+  if (e.clientX > viewportWidth - 14 && ['hiddenEnd', 'peekCloseEnd'].includes(sidebarState.value)) {
+    sidebarState.value = 'peekOpenStart'
+
+    setTimeout(() => {
+      sidebarState.value = 'peekOpenEnd'
+    }, animationDuration)
+  } else if (e.clientX < viewportWidth - (sidebarWidth.value + 10) && sidebarState.value === 'peekOpenEnd') {
+    sidebarState.value = 'peekCloseOpen'
 
     setTimeout(() => {
-      isAnimationEndAfterSidebarHide.value = true
-    }, animationDuration * 1.75)
+      sidebarState.value = 'peekCloseEnd'
+    }, animationDuration)
   }
 }
 
@@ -89,7 +72,6 @@ function onWindowResize() {
 }
 
 onMounted(() => {
-  contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth
   document.addEventListener('mousemove', handleMouseMove)
 
   window.addEventListener('resize', onWindowResize)
@@ -100,76 +82,44 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', onWindowResize)
 })
 
-watch(leftSidebarWidthPercent, () => {
-  contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth
-})
-
-watch(isLeftSidebarOpen, () => {
-  if (isLeftSidebarOpen.value) {
-    contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth
-  } else {
-    contentDomWidth.value = window.innerWidth
-  }
-
-  isLeftSidebarAnimating.value = true
-  setTimeout(() => {
-    isLeftSidebarAnimating.value = false
-  }, 700)
-})
-
 watch(
-  () => !isRightSidebarOpen.value && isSidebarShort.value,
-  (value) => {
-    if (value) {
-      setTimeout(() => {
-        isStartHideSidebarAnimation.value = true
-      }, animationDuration / 2)
+  [isLeftSidebarOpen, leftSidebarWidthPercent],
+  () => {
+    if (isLeftSidebarOpen.value) {
+      contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth
     } else {
-      isStartHideSidebarAnimation.value = false
+      contentDomWidth.value = window.innerWidth
     }
   },
+  {
+    immediate: true,
+  },
 )
 </script>
 
 <template>
   <Splitpanes
     ref="splitpaneWrapperRef"
-    style="height: calc(100vh - var(--topbar-height))"
-    class="smartsheet-resizable-wrapper w-full"
+    class="nc-view-sidebar-content-resizable-wrapper w-full h-full"
     :class="{
-      'smartsheet-sidebar-short': isSidebarShort,
+      'hide-resize-bar': !isRightSidebarOpen || sidebarState === 'openStart',
     }"
     @resize="currentSidebarSize = $event[1].size"
   >
     <Pane :size="contentSize">
       <slot name="content" />
     </Pane>
-    <Pane
-      min-size="15%"
-      :size="currentSidebarSize"
-      max-size="40%"
-      class="nc-smartsheet-sidebar-splitpane !bg-transparent relative !overflow-visible !-ml-0.5"
-    >
+    <Pane min-size="15%" :size="currentSidebarSize" max-size="40%" class="nc-view-sidebar-splitpane relative !overflow-visible">
       <div
         ref="wrapperRef"
-        class="nc-smartsheet-sidebar-wrapper relative z-10 !bg-transparent"
+        class="nc-view-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible"
         :class="{
-          'open': isRightSidebarOpen,
-          'close': !isRightSidebarOpen,
-          'absolute': isMouseOverShowSidebarZone,
-          'smartsheet-sidebar-short': isSidebarShort,
-          'hide-sidebar': isStartHideSidebarAnimation && !isMouseOverShowSidebarZone,
-          'mouseover-show-sidebar-zone':
-            isSidebarShort && !isRightSidebarOpen && isMouseOverShowSidebarZone && isAnimationEndAfterSidebarHide,
+          'minimized-height': !isRightSidebarOpen,
+          'peek-sidebar': ['peekOpenEnd', 'peekCloseOpen'].includes(sidebarState),
+          'hide-sidebar': ['hiddenStart', 'hiddenEnd', 'peekCloseEnd'].includes(sidebarState),
         }"
         :style="{
-          width: isLeftSidebarAnimating
-            ? '100%'
-            : isAnimationEndAfterSidebarHide && isSidebarHidden
-            ? '0px'
-            : `${sidebarWidth}px`,
-          overflow: isMouseOverShowSidebarZone ? 'visible' : undefined,
-          translate: isMouseOverShowSidebarZone ? 'translateX(-100%)' : undefined,
+          width: sidebarState === 'hiddenEnd' ? '0px' : `${sidebarWidth}px`,
         }"
       >
         <slot name="sidebar" />
@@ -179,7 +129,35 @@ watch(
 </template>
 
 <style lang="scss">
-.smartsheet-resizable-wrapper > {
+.nc-view-sidebar-wrapper.minimized-height > * {
+  @apply pb-1 !(rounded-l-lg border-1 border-gray-200 shadow-lg);
+  height: 89.5%;
+}
+
+.nc-view-sidebar-wrapper > * {
+  transition: all 0.15s ease-in-out;
+  @apply z-10 absolute;
+}
+
+.nc-view-sidebar-wrapper.peek-sidebar {
+  > * {
+    @apply !opacity-100;
+    transform: translateX(-100%);
+  }
+}
+
+.nc-view-sidebar-wrapper.hide-sidebar {
+  @apply !min-w-0;
+
+  > * {
+    @apply opacity-0;
+    transform: translateX(100%);
+  }
+}
+
+/** Split pane CSS */
+
+.nc-view-sidebar-content-resizable-wrapper > {
   .splitpanes__splitter {
     width: 0 !important;
     position: relative;
@@ -200,14 +178,14 @@ watch(
     @apply bg-scrollbar;
     z-index: 40;
     width: 4px !important;
-    left: -4px;
+    left: -2px;
   }
 
   .splitpanes--dragging .splitpanes__splitter:before {
     @apply bg-scrollbar;
     z-index: 40;
     width: 10px !important;
-    left: -6px;
+    left: -2px;
   }
 }
 
@@ -215,62 +193,17 @@ watch(
   @apply w-1 mr-0 bg-scrollbar;
   z-index: 40;
   width: 4px !important;
-  left: -4px;
+  left: -2px;
 }
 
 .splitpanes--dragging {
   cursor: col-resize;
 }
 
-.smartsheet-sidebar-short > .splitpanes__splitter {
-  display: none !important;
-  background-color: transparent !important;
-}
-
-.nc-smartsheet-sidebar-wrapper {
-  @apply flex flex-col h-full justify-center min-w-36;
-}
-
-.nc-smartsheet-sidebar-wrapper.close {
-  > * {
-    height: 80vh;
-  }
-}
-
-.nc-smartsheet-sidebar-wrapper.smartsheet-sidebar-short {
-  > * {
-    height: 80h !important;
-    padding-bottom: 0.35rem;
-    margin-top: -3.25rem;
-    margin-left: 0.25rem;
-  }
-}
-
-.nc-smartsheet-sidebar-wrapper.open {
-  height: calc(100vh - var(--topbar-height));
-  > * {
-    height: calc(100vh - var(--topbar-height));
+.nc-view-sidebar-content-resizable-wrapper.hide-resize-bar > {
+  .splitpanes__splitter {
+    display: none !important;
+    background-color: transparent !important;
   }
 }
-
-.nc-smartsheet-sidebar-wrapper > * {
-  height: calc(100% - var(--topbar-height));
-}
-
-.nc-smartsheet-sidebar-wrapper > * {
-  width: 100%;
-  transition: all 0.3s ease-in-out;
-}
-
-.nc-smartsheet-sidebar-wrapper.hide-sidebar > * {
-  position: absolute;
-  opacity: 0;
-  transform: translateX(100%);
-}
-.mouseover-show-sidebar-zone > * {
-  transform: translateX(-100%);
-}
-.nc-smartsheet-sidebar-wrapper.smartsheet-sidebar-short > * {
-  @apply !(rounded-l-lg border-1 border-gray-200 shadow-lg);
-}
 </style>
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 111a7b5cba..ba442379e0 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -41,14 +41,14 @@ const accessibleRoles = computed<WorkspaceUserRoles[]>(() => {
     <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div>
     <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
       <div class="text-xl">Collaborators</div>
-      <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md" placeholder="Search collaborators">
+      <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search collaborators">
         <template #prefix>
           <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
         </template>
       </a-input>
     </div>
     <div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36">
-      <Empty description="No collaborators found" />
+      <a-empty description="No collaborators found" />
     </div>
     <table v-else class="nc-collaborators-list-table !nc-scrollbar-md">
       <thead>
@@ -109,7 +109,7 @@ const accessibleRoles = computed<WorkspaceUserRoles[]>(() => {
                   </NcBadge>
                 </a-select-option>
                 <template v-for="role of accessibleRoles" :key="`role-option-${role}`">
-                  <a-select-option :value="role">
+                  <a-select-option v-if="role" :value="role">
                     <NcBadge :color="RoleColors[role]">
                       <p class="badge-text">{{ RoleLabels[role] }}</p>
                     </NcBadge>
@@ -232,4 +232,8 @@ tbody {
     background: rgb(203, 203, 203);
   }
 }
+
+:deep(.ant-select-selection-item) {
+  @apply mt-0.75;
+}
 </style>
diff --git a/packages/nc-gui/components/workspace/CreateProjectBtn.vue b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
index 83ed8651d6..acb32926f2 100644
--- a/packages/nc-gui/components/workspace/CreateProjectBtn.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
@@ -1,61 +1,42 @@
 <script setup lang="ts">
-import { NcProjectType, useRouter } from '#imports'
+import type { NcButtonSize } from '~/lib'
 
 const props = defineProps<{
   activeWorkspaceId?: string | undefined
   modal?: boolean
   type?: string
   isOpen: boolean
+  size?: NcButtonSize
+  centered?: boolean
 }>()
 
-const router = useRouter()
+const { isUIAllowed } = useUIPermission()
+
+const { orgRoles, workspaceRoles } = useRoles()
+
+const projectStore = useProject()
+const { isSharedBase } = storeToRefs(projectStore)
+
+const workspaceStore = useWorkspace()
+const { activeWorkspaceId: _activeWorkspaceId } = storeToRefs(workspaceStore)
 
 const projectCreateDlg = ref(false)
-const projectType = ref(NcProjectType.DB)
-
-const navigateToCreateProject = (type: NcProjectType) => {
-  if (props.modal) {
-    projectType.value = type
-    projectCreateDlg.value = true
-  } else {
-    router.push({
-      path: '/create',
-      query: {
-        type,
-        workspaceId: props.activeWorkspaceId,
-      },
-    })
-  }
-}
-
-useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
-  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
-  if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
-    switch (e.keyCode) {
-      // ALT + D
-      case 68: {
-        e.stopPropagation()
-        navigateToCreateProject(NcProjectType.DB)
-        break
-      }
-    }
-  }
-})
+
+const size = computed(() => props.size || 'small')
+const centered = computed(() => props.centered ?? true)
 </script>
 
 <template>
-  <div>
-    <a-button
-      class="!py-0 !px-0 !border-0 !h-full !rounded-md w-full hover:bg-gray-100 text-sm select-none cursor-pointer"
-      :type="props.type ?? 'primary'"
-      @click="navigateToCreateProject(NcProjectType.DB)"
-    >
-      <div class="flex w-full items-center gap-2">
-        <slot>{{ $t('title.newProj') }} <MdiMenuDown /></slot>
-      </div>
-    </a-button>
-    <WorkspaceCreateProjectDlg v-model="projectCreateDlg" :type="projectType" />
-  </div>
+  <NcButton
+    v-if="isUIAllowed('projectCreate', false, workspaceRoles ?? orgRoles) && !isSharedBase"
+    type="text"
+    :size="size"
+    :centered="centered"
+    @click="projectCreateDlg = true"
+  >
+    <slot />
+    <WorkspaceCreateProjectDlg v-model="projectCreateDlg" />
+  </NcButton>
 </template>
 
 <style scoped></style>
diff --git a/packages/nc-gui/components/workspace/CreateProjectDlg.vue b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
index f7cacc9628..70ef37e4fd 100644
--- a/packages/nc-gui/components/workspace/CreateProjectDlg.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
@@ -64,22 +64,25 @@ watch(dialogShow, async (n, o) => {
   if (n === o && !n) return
 
   // Clear errors
-  form.value?.resetFields()
+  setTimeout(async () => {
+    form.value?.resetFields()
 
-  formState.value = {
-    title: 'Untitled Database',
-  }
-  await nextTick()
-  input.value?.$el?.focus()
-  input.value?.$el?.select()
+    formState.value = {
+      title: 'Untitled Database',
+    }
+
+    await nextTick()
+
+    input.value?.$el?.focus()
+    input.value?.$el?.select()
+  }, 5)
 })
 
 const typeLabel = computed(() => {
   switch (props.type) {
     case NcProjectType.DB:
-      return 'Database'
     default:
-      return ''
+      return 'Database'
   }
 })
 </script>
diff --git a/packages/nc-gui/components/workspace/Delete.vue b/packages/nc-gui/components/workspace/Delete.vue
deleted file mode 100644
index 69abac0641..0000000000
--- a/packages/nc-gui/components/workspace/Delete.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts" setup>
-const isConfirmed = ref(false)
-const isDeleting = ref(false)
-const { signOut } = useGlobal()
-
-const { deleteWorkspace, navigateToWorkspace } = useWorkspace()
-const { workspacesList, activeWorkspaceId } = storeToRefs(useWorkspace())
-
-const onDelete = async () => {
-  isDeleting.value = true
-  try {
-    await deleteWorkspace(activeWorkspaceId.value)
-
-    isConfirmed.value = false
-    isDeleting.value = false
-
-    if (workspacesList.value.length > 0) {
-      await navigateToWorkspace(workspacesList.value[0].id)
-    } else {
-      await signOut()
-      setTimeout(() => {
-        window.location.href = '/'
-      }, 100)
-    }
-  } finally {
-    isDeleting.value = false
-  }
-}
-</script>
-
-<template>
-  <div class="flex flex-col items-center">
-    <div class="item flex flex-col">
-      <div class="font-medium text-base">Delete Workspace</div>
-      <div class="text-gray-500 mt-2">Delete this workspace and all it’s contents.</div>
-      <div class="flex flex-row p-4 border-1 rounded-lg gap-x-2 mt-6">
-        <div class="flex">
-          <GeneralIcon icon="warning" class="text-xl text-orange-600" />
-        </div>
-        <div class="flex flex-col items-start gap-y-1">
-          <div class="flex font-medium">This action is irreversible.</div>
-          <div class="flex flex-row text-gray-500">
-            You have 31 days to undo this action by following the steps provided in recover workspace mail sent to your email.
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-row mt-8 gap-x-2">
-        <a-checkbox v-model:checked="isConfirmed" />
-        <div class="flex">I understand that this action is irreversible</div>
-      </div>
-
-      <div class="flex flex-row w-full justify-end mt-8">
-        <NcButton type="danger" :disabled="!isConfirmed" :loading="isDeleting" @click="onDelete">
-          <template #loading> Deleting Workspace </template>
-          Delete Workspace
-        </NcButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.item {
-  @apply p-6 rounded-2xl border-1 max-w-180 mt-10;
-}
-</style>
diff --git a/packages/nc-gui/components/workspace/EmptyPlaceholder.vue b/packages/nc-gui/components/workspace/EmptyPlaceholder.vue
index d832de840c..8a18fee42c 100644
--- a/packages/nc-gui/components/workspace/EmptyPlaceholder.vue
+++ b/packages/nc-gui/components/workspace/EmptyPlaceholder.vue
@@ -7,25 +7,6 @@ const props = defineProps<{
 
 const projectCreateDlg = ref(false)
 const projectType = ref()
-const { projects, projectsList } = storeToRefs(useProjects())
-
-const router = useRouter()
-
-const loading = ref(false)
-
-// if at least one project exists, redirect to first project
-watch(
-  projects,
-  (projects) => {
-    if (projects.size) {
-      return router.replace({
-        path: `/${router.currentRoute.value.params.typeOrId}/${projectsList.value[0].id}`,
-      })
-    }
-    loading.value = false
-  },
-  { immediate: true },
-)
 
 const openCreateProjectDlg = (type: NcProjectType) => {
   projectType.value = type
@@ -35,7 +16,7 @@ const openCreateProjectDlg = (type: NcProjectType) => {
 
 <template>
   <div class="flex items-center justify-center h-full">
-    <div v-if="!loading" class="flex flex-col gap-4 items-center">
+    <div class="flex flex-col gap-4 items-center text-gray-500">
       <NcIconsInbox />
       <div class="font-weight-medium">No Projects</div>
       <template v-if="props.buttons">
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index c8a97f2736..4121663bf4 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -46,7 +46,7 @@ const allowedRoles = computed<WorkspaceUserRoles[]>(() => {
             <MdiChevronDown />
           </template>
           <template v-for="role of allowedRoles" :key="`role-option-${role}`">
-            <a-select-option :value="role">
+            <a-select-option v-if="role" :value="role">
               <NcBadge :color="RoleColors[role]">
                 <p class="badge-text">{{ RoleLabels[role] }}</p>
               </NcBadge>
@@ -79,4 +79,8 @@ const allowedRoles = computed<WorkspaceUserRoles[]>(() => {
 .badge-text {
   @apply text-[14px] pt-1 text-center;
 }
+
+:deep(.ant-select-selection-item) {
+  @apply mt-0.75;
+}
 </style>
diff --git a/packages/nc-gui/components/workspace/Menu.vue b/packages/nc-gui/components/workspace/Menu.vue
index 87a7255cea..98527c3985 100644
--- a/packages/nc-gui/components/workspace/Menu.vue
+++ b/packages/nc-gui/components/workspace/Menu.vue
@@ -1,371 +1,29 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import type { WorkspaceType } from 'nocodb-sdk'
-import tinycolor from 'tinycolor2'
-import { onMounted, projectThemeColors, ref, useWorkspace } from '#imports'
-import { navigateTo } from '#app'
-
-const props = defineProps<{
-  isOpen: boolean
-}>()
-
-const workspaceStore = useWorkspace()
-
-const { saveTheme } = workspaceStore
-const { isWorkspaceOwner } = storeToRefs(workspaceStore)
-const { loadWorkspaces, clearWorkspaces } = workspaceStore
-
-const { signOut, signedIn, user, token } = useGlobal()
-
-const { copy } = useCopy(true)
-
-const email = computed(() => user.value?.email ?? '---')
-
-const { isUIAllowed } = useUIPermission()
-
-const { theme, defaultTheme } = useTheme()
-
-onMounted(async () => {
-  // await loadWorkspaces()
-})
-
-const workspaceModalVisible = ref(false)
-const isWorkspaceDropdownOpen = ref(false)
-const isAuthTokenCopied = ref(false)
-
-const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color?: string) => {
-  switch (mode) {
-    case 'swatch': {
-      if (color === defaultTheme.primaryColor) {
-        return await saveTheme(defaultTheme)
-      }
-
-      const tcolor = tinycolor(color)
-      if (tcolor.isValid()) {
-        const complement = tcolor.complement()
-
-        await saveTheme({
-          primaryColor: color,
-          accentColor: complement.toHex8String(),
-        })
-      }
-      break
-    }
-    case 'primary': {
-      const tcolor = tinycolor(color)
-
-      if (tcolor.isValid()) {
-        await saveTheme({
-          primaryColor: color,
-        })
-      }
-      break
-    }
-    case 'accent': {
-      const tcolor = tinycolor(color)
-
-      if (tcolor.isValid()) {
-        await saveTheme({
-          accentColor: color,
-        })
-      }
-      break
-    }
-  }
-}
-
-const logout = async () => {
-  await signOut()
-  navigateTo('/signin')
-}
-
-const projectStore = useProject()
-
-const { isSharedBase } = storeToRefs(projectStore)
-
-// todo: temp
-const modalVisible = false
-
-const copyAuthToken = async () => {
-  try {
-    await copy(token.value!)
-    isAuthTokenCopied.value = true
-  } catch (e: any) {
-    console.error(e)
-    message.error(e.message)
-  }
-}
-
-onKeyStroke('Escape', () => {
-  if (isWorkspaceDropdownOpen.value) {
-    isWorkspaceDropdownOpen.value = false
-  }
-})
-</script>
+<script lang="ts" setup></script>
 
 <template>
-  <div class="flex-grow min-w-20">
-    <a-dropdown
-      v-model:visible="isWorkspaceDropdownOpen"
-      class="h-full min-w-0 flex-1"
-      :trigger="['click']"
-      placement="bottom"
-      overlay-class-name="nc-dropdown-workspace-menu"
-    >
+  <div class="flex flex-row flex-grow pl-0.5 pr-1 py-0.5 rounded-md w-full" style="max-width: calc(100% - 2.5rem)">
+    <div class="flex-grow min-w-20">
       <div
-        :style="{ width: props.isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
-        :class="[props.isOpen ? '' : 'justify-center']"
         data-testid="nc-workspace-menu"
-        class="group cursor-pointer flex gap-1 items-center nc-workspace-menu overflow-hidden py-1.25 pr-0.25"
+        class="flex items-center nc-workspace-menu overflow-hidden py-1.25 pr-0.25 justify-center w-full"
       >
-        <slot name="brandIcon" />
-        <template v-if="props.isOpen">
-          Nocodb
-          <div class="flex flex-grow"></div>
-          <MdiCodeTags class="min-w-[17px] text-md transform rotate-90" />
-        </template>
-
-        <template v-else>
-          <MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
-        </template>
+        <a
+          class="w-10 min-w-10 transition-all duration-200 p-1 transform"
+          href="https://github.com/nocodb/nocodb"
+          target="_blank"
+        >
+          <img width="25" alt="NocoDB" src="~/assets/img/icons/256x256.png" />
+        </a>
+
+        <div class="font-semibold text-base">Nocodb</div>
+        <div class="flex flex-grow"></div>
       </div>
-
-      <template #overlay>
-        <a-menu class="" @click="isWorkspaceDropdownOpen = false">
-          <a-menu-item-group class="!border-t-0">
-            <a-menu-divider />
-
-            <template v-if="!isSharedBase">
-              <!-- Copy Auth Token -->
-              <a-menu-item key="copy">
-                <div
-                  v-e="['a:navbar:user:copy-auth-token']"
-                  class="nc-workspace-menu-item group !gap-x-2"
-                  @click.stop="copyAuthToken"
-                >
-                  <GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black" />
-                  <GeneralIcon v-else icon="copy" class="group-hover:text-black" />
-                  <div v-if="isAuthTokenCopied">
-                    {{ $t('activity.account.authTokenCopied') }}
-                  </div>
-                  <div v-else>
-                    {{ $t('activity.account.authToken') }}
-                  </div>
-                </div>
-              </a-menu-item>
-
-              <a-menu-divider v-if="false" />
-
-              <!-- Theme -->
-              <template v-if="isUIAllowed('projectTheme') && false">
-                <a-sub-menu key="theme">
-                  <template #title>
-                    <div class="nc-workspace-menu-item group">
-                      <GeneralIcon icon="image" class="group-hover:text-accent" />
-                      {{ $t('activity.account.themes') }}
-
-                      <div class="flex-1" />
-
-                      <MaterialSymbolsChevronRightRounded
-                        class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                      />
-                    </div>
-                  </template>
-
-                  <template #expandIcon></template>
-
-                  <LazyGeneralColorPicker
-                    :model-value="theme.primaryColor"
-                    :colors="projectThemeColors"
-                    :row-size="9"
-                    :advanced="false"
-                    class="rounded-t"
-                    @input="handleThemeColor('swatch', $event)"
-                  />
-
-                  <!-- Custom Theme -->
-                  <a-sub-menu key="theme-2">
-                    <template #title>
-                      <div class="nc-workspace-menu-item group">
-                        {{ $t('labels.customTheme') }}
-
-                        <div class="flex-1" />
-
-                        <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                        />
-                      </div>
-                    </template>
-
-                    <!-- Primary Color -->
-                    <template #expandIcon></template>
-
-                    <a-sub-menu key="pick-primary">
-                      <template #title>
-                        <div class="nc-workspace-menu-item group">
-                          <ClarityColorPickerSolid class="group-hover:text-black" />
-                          {{ $t('labels.primaryColor') }}
-                        </div>
-                      </template>
-
-                      <template #expandIcon></template>
-
-                      <LazyGeneralChromeWrapper @input="handleThemeColor('primary', $event)" />
-                    </a-sub-menu>
-
-                    <!-- Accent Color -->
-                    <a-sub-menu key="pick-accent">
-                      <template #title>
-                        <div class="nc-workspace-menu-item group">
-                          <ClarityColorPickerSolid class="group-hover:text-black" />
-                          {{ $t('labels.accentColor') }}
-                        </div>
-                      </template>
-
-                      <template #expandIcon></template>
-
-                      <LazyGeneralChromeWrapper @input="handleThemeColor('accent', $event)" />
-                    </a-sub-menu>
-                  </a-sub-menu>
-                </a-sub-menu>
-              </template>
-
-              <a-menu-divider v-if="false" />
-
-              <!-- Preview As -->
-              <a-sub-menu v-if="isUIAllowed('previewAs') && false" key="preview-as">
-                <template #title>
-                  <div v-e="['c:navdraw:preview-as']" class="nc-workspace-menu-item group">
-                    <GeneralIcon icon="preview" class="group-hover:text-black" />
-                    {{ $t('activity.previewAs') }}
-
-                    <div class="flex-1" />
-
-                    <MaterialSymbolsChevronRightRounded
-                      class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                    />
-                  </div>
-                </template>
-
-                <template #expandIcon></template>
-
-                <LazyGeneralPreviewAs />
-              </a-sub-menu>
-            </template>
-            <!-- Language -->
-            <a-sub-menu
-              v-if="!isEeUI"
-              key="language"
-              class="lang-menu !py-0"
-              popup-class-name="scrollbar-thin-dull min-w-50 max-h-90vh !overflow-auto"
-            >
-              <template #title>
-                <div class="nc-workspace-menu-item group">
-                  <GeneralIcon icon="translate" class="group-hover:text-black nc-language mr-0.1" />
-                  {{ $t('labels.language') }}
-                  <div class="flex items-center text-gray-400 text-xs">(Community Translated)</div>
-                  <div class="flex-1" />
-
-                  <MaterialSymbolsChevronRightRounded
-                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                  />
-                </div>
-              </template>
-
-              <template #expandIcon></template>
-
-              <LazyGeneralLanguageMenu />
-            </a-sub-menu>
-
-            <!-- Account -->
-            <template v-if="signedIn && !isSharedBase">
-              <a-sub-menu key="account">
-                <template #title>
-                  <div class="nc-workspace-menu-item group">
-                    <GeneralIcon icon="account" class="group-hover:text-accent" />
-                    {{ $t('labels.account') }}
-                    <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 key="0" class="!rounded-t">
-                  <nuxt-link v-e="['c:navbar:user:email']" class="nc-workspace-menu-item group !no-underline" to="/account/users">
-                    <GeneralIcon icon="at" class="mt-1 group-hover:text-accent" />&nbsp;
-                    <div class="prose-sm group-hover:text-primary">
-                      <div>Account</div>
-                      <div class="text-xs text-gray-500">{{ email }}</div>
-                    </div>
-                  </nuxt-link>
-                </a-menu-item>
-
-                <a-menu-item key="1" class="!rounded-b">
-                  <div v-e="['a:navbar:user:sign-out']" class="nc-workspace-menu-item group" @click="logout">
-                    <GeneralIcon icon="signout" class="group-hover:(!text-accent)" />&nbsp;
-
-                    <span class="prose-sm nc-user-menu-signout">
-                      {{ $t('general.signOut') }}
-                    </span>
-                  </div>
-                </a-menu-item>
-              </a-sub-menu>
-            </template>
-          </a-menu-item-group>
-        </a-menu>
-      </template>
-    </a-dropdown>
-    <GeneralModal v-model:visible="workspaceModalVisible" :class="{ active: modalVisible }" width="80%" :footer="null">
-      <div class="relative flex flex-col px-6 py-2">
-        <div class="absolute right-4 top-4 z-20">
-          <a-button type="text" class="!p-1 !h-7 !rounded" @click="workspaceModalVisible = false">
-            <component :is="iconMap.close" />
-          </a-button>
-        </div>
-        <a-tabs v-model:activeKey="tab">
-          <template v-if="isWorkspaceOwner">
-            <a-tab-pane key="collab" tab="Collaborators" class="w-full">
-              <WorkspaceCollaboratorsList class="h-full" />
-            </a-tab-pane>
-            <!-- <a-tab-pane key="settings" tab="Settings" class="w-full">
-              <div class="min-h-50 flex items-center justify-center">Not available</div>
-            </a-tab-pane> -->
-          </template>
-        </a-tabs>
-      </div>
-    </GeneralModal>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.nc-workspace-title-input {
-  @apply flex-grow py-2 px-3 outline-none hover:(bg-gray-50) focus:(bg-gray-50) font-medium rounded text-md text-defaault;
-}
-
-.nc-menu-sub-head {
-  @apply pt-2 pb-2 text-gray-500 text-sm px-5;
-}
-
 .nc-workspace-menu-item {
   @apply flex items-center pl-2 py-2 gap-2 text-sm hover:text-black;
 }
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply hidden;
-}
-
-:deep(.ant-tabs-nav) {
-  @apply !mb-0;
-}
-
-:deep(.ant-dropdown-menu-submenu-title) {
-  @apply !py-0;
-  .nc-icon {
-    @apply !text-xs;
-  }
-}
 </style>
diff --git a/packages/nc-gui/components/workspace/Settings.vue b/packages/nc-gui/components/workspace/Settings.vue
new file mode 100644
index 0000000000..c62fa23bb6
--- /dev/null
+++ b/packages/nc-gui/components/workspace/Settings.vue
@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+const { signOut } = useGlobal()
+
+const { deleteWorkspace, navigateToWorkspace, updateWorkspace } = useWorkspace()
+const { workspacesList, activeWorkspaceId, activeWorkspace, workspaces } = storeToRefs(useWorkspace())
+
+const formValidator = ref()
+const isConfirmed = ref(false)
+const isDeleting = ref(false)
+const isErrored = ref(false)
+const isTitleUpdating = ref(false)
+const isCancelButtonVisible = ref(false)
+
+const form = ref({
+  title: '',
+})
+
+const formRules = {
+  title: [
+    { required: true, message: 'Workspace name required' },
+    { min: 3, message: 'Workspace name must be at least 3 characters long' },
+    { max: 50, message: 'Workspace name must be at most 50 characters long' },
+  ],
+}
+
+const onDelete = async () => {
+  isDeleting.value = true
+  try {
+    await deleteWorkspace(activeWorkspaceId.value, { skipStateUpdate: true })
+
+    isConfirmed.value = false
+    isDeleting.value = false
+
+    // We only remove the delete workspace from the list after the api call is successful
+    workspaces.value.delete(activeWorkspaceId.value)
+
+    if (workspacesList.value.length > 1) {
+      await navigateToWorkspace(workspacesList.value[0].id)
+    } else {
+      // As signin page will clear the workspaces, we need to check if there are more than one workspace
+      await signOut(false)
+      setTimeout(() => {
+        window.location.href = '/'
+      }, 100)
+    }
+  } finally {
+    isDeleting.value = false
+  }
+}
+
+const titleChange = async () => {
+  const valid = await formValidator.value.validate()
+
+  if (!valid) return
+
+  if (isTitleUpdating.value) return
+
+  isTitleUpdating.value = true
+  isErrored.value = false
+
+  try {
+    await updateWorkspace(activeWorkspaceId.value, {
+      title: form.value.title,
+    })
+  } catch (e: any) {
+    console.error(e)
+  } finally {
+    isTitleUpdating.value = false
+    isCancelButtonVisible.value = false
+  }
+}
+
+watch(
+  () => activeWorkspace.value.title,
+  () => {
+    form.value.title = activeWorkspace.value.title
+  },
+  {
+    immediate: true,
+  },
+)
+
+watch(
+  () => form.value.title,
+  async () => {
+    try {
+      if (form.value.title !== activeWorkspace.value?.title) {
+        isCancelButtonVisible.value = true
+      } else {
+        isCancelButtonVisible.value = false
+      }
+      isErrored.value = !(await formValidator.value.validate())
+    } catch (e: any) {
+      isErrored.value = true
+    }
+  },
+)
+
+const onCancel = () => {
+  form.value.title = activeWorkspace.value?.title
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center nc-workspace-settings-settings">
+    <div class="item flex flex-col w-full">
+      <div class="font-medium text-base">Change Workspace Name</div>
+      <a-form ref="formValidator" layout="vertical" no-style :model="form" class="w-full" @finish="titleChange">
+        <div class="text-gray-500 mt-6 mb-1.5">Workspace name</div>
+        <a-form-item name="title" :rules="formRules.title">
+          <a-input
+            v-model:value="form.title"
+            class="w-full !rounded-md !py-1.5"
+            placeholder="Workspace name"
+            data-testid="nc-workspace-settings-settings-rename-input"
+          />
+        </a-form-item>
+        <div class="flex flex-row w-full justify-end mt-8 gap-4">
+          <NcButton
+            v-if="isCancelButtonVisible"
+            type="secondary"
+            html-type="submit"
+            data-testid="nc-workspace-settings-settings-rename-cancel"
+            @click="onCancel"
+          >
+            <template #loading> Renaming Workspace </template>
+            Cancel
+          </NcButton>
+          <NcButton
+            type="primary"
+            html-type="submit"
+            :disabled="isErrored || (form.title && form.title === activeWorkspace.title)"
+            :loading="isDeleting"
+            data-testid="nc-workspace-settings-settings-rename-submit"
+          >
+            <template #loading> Renaming Workspace </template>
+            Rename Workspace
+          </NcButton>
+        </div>
+      </a-form>
+    </div>
+    <div class="item flex flex-col">
+      <div class="font-medium text-base">Delete Workspace</div>
+      <div class="text-gray-500 mt-2">Delete this workspace and all it’s contents.</div>
+      <div class="flex flex-row mt-8 gap-x-2">
+        <a-checkbox v-model:checked="isConfirmed" />
+        <div class="flex">I understand that this action is irreversible</div>
+      </div>
+
+      <div class="flex flex-row w-full justify-end mt-8">
+        <NcButton type="danger" :disabled="!isConfirmed" :loading="isDeleting" @click="onDelete">
+          <template #loading> Deleting Workspace </template>
+          Delete Workspace
+        </NcButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item {
+  @apply p-6 rounded-2xl border-1 max-w-180 mt-10 min-w-100 w-full;
+}
+</style>
diff --git a/packages/nc-gui/components/workspace/View.vue b/packages/nc-gui/components/workspace/View.vue
index d2d55c3186..930c133757 100644
--- a/packages/nc-gui/components/workspace/View.vue
+++ b/packages/nc-gui/components/workspace/View.vue
@@ -1,11 +1,14 @@
 <script lang="ts" setup>
 import { useTitle } from '@vueuse/core'
 import type { WorkspaceType } from 'nocodb-sdk'
+import { isEeUI } from '#imports'
 
 const router = useRouter()
 const route = router.currentRoute
 
-const { isWorkspaceOwnerOrCreator, isWorkspaceOwner, activeWorkspace } = storeToRefs(useWorkspace())
+const workspaceStore = useWorkspace()
+const { isWorkspaceOwnerOrCreator, isWorkspaceOwner, activeWorkspace, workspaces } = storeToRefs(workspaceStore)
+const { loadCollaborators } = workspaceStore
 
 const { appInfo } = useGlobal()
 
@@ -14,6 +17,7 @@ const tab = computed({
     return route.value.query?.tab ?? 'collaborators'
   },
   set(tab: string) {
+    if (tab === 'collaborators') loadCollaborators()
     router.push({ query: { ...route.value.query, tab } })
   },
 })
@@ -33,15 +37,27 @@ watch(
     immediate: true,
   },
 )
+
+onMounted(() => {
+  until(() => activeWorkspace.value?.id)
+    .toMatch((v) => !!v)
+    .then(() => {
+      until(() => workspaces.value)
+        .toMatch((v) => v.has(activeWorkspace.value.id))
+        .then(() => {
+          loadCollaborators()
+        })
+    })
+})
 </script>
 
 <template>
-  <div v-if="activeWorkspace" class="flex flex-col nc-workspace-container">
+  <div v-if="activeWorkspace" class="flex flex-col nc-workspace-settings">
     <div class="flex gap-2 items-center min-w-0 p-6">
       <span class="nc-workspace-avatar !w-8 !h-8" :style="{ backgroundColor: getWorkspaceColor(activeWorkspace) }">
         {{ activeWorkspace?.title?.slice(0, 2) }}
       </span>
-      <h1 class="text-3xl font-weight-bold tracking-[0.5px] mb-0 nc-workspace-title truncate min-w-10">
+      <h1 class="text-3xl font-weight-bold tracking-[0.5px] mb-0 nc-workspace-title truncate min-w-10 capitalize">
         {{ activeWorkspace?.title }}
       </h1>
     </div>
@@ -59,7 +75,7 @@ watch(
         </a-tab-pane>
       </template>
 
-      <template v-if="isWorkspaceOwner && appInfo.ee">
+      <template v-if="isWorkspaceOwner && isEeUI">
         <a-tab-pane key="billing" class="w-full">
           <template #tab>
             <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
@@ -70,15 +86,15 @@ watch(
           <WorkspaceBilling />
         </a-tab-pane>
       </template>
-      <template v-if="isWorkspaceOwner && appInfo.ee">
+      <template v-if="isWorkspaceOwner && isEeUI">
         <a-tab-pane key="settings" class="w-full">
           <template #tab>
-            <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
+            <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5" data-testid="nc-workspace-settings-tab-settings">
               <GeneralIcon icon="settings" />
               Settings
             </div>
           </template>
-          <WorkspaceDelete />
+          <WorkspaceSettings />
         </a-tab-pane>
       </template>
     </NcTabs>
diff --git a/packages/nc-gui/composables/useApi/interceptors.ts b/packages/nc-gui/composables/useApi/interceptors.ts
index c48fe5fad6..c27566eb83 100644
--- a/packages/nc-gui/composables/useApi/interceptors.ts
+++ b/packages/nc-gui/composables/useApi/interceptors.ts
@@ -3,6 +3,8 @@ import { navigateTo, useGlobal, useRouter } from '#imports'
 
 const DbNotFoundMsg = 'Database config not found'
 
+let refreshTokenPromise: Promise<string> | null = null
+
 export function addAxiosInterceptors(api: Api<any>) {
   const state = useGlobal()
   const router = useRouter()
@@ -51,6 +53,40 @@ export function addAxiosInterceptors(api: Api<any>) {
         return Promise.reject(error)
       }
 
+      let refreshTokenPromiseRes: (token: string) => void
+      let refreshTokenPromiseRej: (e: Error) => void
+
+      // avoid multiple refresh token requests by multiple requests at the same time
+      // wait for the first request to finish and then retry the failed requests
+      if (refreshTokenPromise) {
+        // if previous refresh token request succeeds use the token and retry request
+        return refreshTokenPromise
+          .then((token) => {
+            // New request with new token
+            return new Promise((resolve, reject) => {
+              const config = error.config
+              config.headers['xc-auth'] = token
+              api.instance
+                .request(config)
+                .then((response) => {
+                  resolve(response)
+                })
+                .catch((error) => {
+                  reject(error)
+                })
+            })
+          })
+          .catch(() => {
+            // ignore since it could have already been handled and redirected to sign in
+          })
+      } else {
+        // if
+        refreshTokenPromise = new Promise<string>((resolve, reject) => {
+          refreshTokenPromiseRes = resolve
+          refreshTokenPromiseRej = reject
+        })
+      }
+
       // Try request again with new token
       return api.instance
         .post('/auth/token/refresh', null, {
@@ -62,6 +98,10 @@ export function addAxiosInterceptors(api: Api<any>) {
           config.headers['xc-auth'] = token.data.token
           state.signIn(token.data.token)
 
+          // resolve the refresh token promise and reset
+          refreshTokenPromiseRes(token.data.token)
+          refreshTokenPromise = null
+
           return new Promise((resolve, reject) => {
             api.instance
               .request(config)
@@ -73,11 +113,15 @@ export function addAxiosInterceptors(api: Api<any>) {
               })
           })
         })
-        .catch(async (error) => {
+        .catch(async (refreshTokenError) => {
           await state.signOut()
 
           if (!route.value.meta.public) navigateTo('/signIn')
 
+          // reject the refresh token promise and reset
+          refreshTokenPromiseRej(refreshTokenError)
+          refreshTokenPromise = null
+
           return Promise.reject(error)
         })
     },
diff --git a/packages/nc-gui/composables/useCommandPalette/index.ts b/packages/nc-gui/composables/useCommandPalette/index.ts
index 510dbeb1b3..bf5271af2e 100644
--- a/packages/nc-gui/composables/useCommandPalette/index.ts
+++ b/packages/nc-gui/composables/useCommandPalette/index.ts
@@ -7,16 +7,16 @@ export const useCommandPalette = createSharedComposable(() => {
 
   const cmdData = computed(() => {})
 
-  const activeScope = computed(() => {})
+  const activeScope = computed(() => ({} as any))
 
-  async function loadScope(_scope = 'root', _data?: any) {}
+  const loadTemporaryScope = (..._args: any) => {}
 
   return {
     commandPalette,
     cmdData,
     activeScope,
-    loadScope,
     cmdPlaceholder,
     refreshCommandPalette: refreshCommandPalette.trigger,
+    loadTemporaryScope,
   }
 })
diff --git a/packages/nc-gui/composables/useData.ts b/packages/nc-gui/composables/useData.ts
index ce10b7da39..0bb606fb5e 100644
--- a/packages/nc-gui/composables/useData.ts
+++ b/packages/nc-gui/composables/useData.ts
@@ -208,7 +208,6 @@ export function useData(args: {
           },
           undo: {
             fn: async function undo(toUpdate: Row, property: string, pg: { page: number; pageSize: number }) {
-              console.log('undo', toUpdate, property, pg)
               const updatedData = await updateRowProperty(
                 { row: toUpdate.oldRow, oldRow: toUpdate.row, rowMeta: toUpdate.rowMeta },
                 property,
@@ -218,12 +217,10 @@ export function useData(args: {
               if (pg.page === paginationData.value.page && pg.pageSize === paginationData.value.pageSize) {
                 const rowIndex = findIndexByPk(rowPkData(toUpdate.row, meta?.value?.columns as ColumnType[]), formattedData.value)
                 if (rowIndex !== -1) {
-                  console.log('manual')
                   const row = formattedData.value[rowIndex]
                   Object.assign(row.row, updatedData)
                   Object.assign(row.oldRow, updatedData)
                 } else {
-                  console.log('fallback')
                   await callbacks?.loadData?.()
                 }
               } else {
diff --git a/packages/nc-gui/composables/useGlobal/actions.ts b/packages/nc-gui/composables/useGlobal/actions.ts
index e581910d57..94534150a9 100644
--- a/packages/nc-gui/composables/useGlobal/actions.ts
+++ b/packages/nc-gui/composables/useGlobal/actions.ts
@@ -9,7 +9,7 @@ export function useGlobalActions(state: State): Actions {
   }
 
   /** Sign out by deleting the token from localStorage */
-  const signOut: Actions['signOut'] = async () => {
+  const signOut: Actions['signOut'] = async (_skipRedirect = false) => {
     try {
       const nuxtApp = useNuxtApp()
       await nuxtApp.$api.auth.signout()
@@ -80,24 +80,59 @@ export function useGlobalActions(state: State): Actions {
     workspaceId: _workspaceId,
     type: _type,
     projectId,
+    query,
   }: {
     workspaceId?: string
     projectId?: string
     type?: NcProjectType
+    query?: any
   }) => {
     const workspaceId = _workspaceId || 'nc'
     let path: string
+
+    const queryParams = query ? `?${new URLSearchParams(query).toString()}` : ''
+
     if (projectId) {
-      path = `/${workspaceId}/${projectId}`
+      path = `/${workspaceId}/${projectId}${queryParams}`
     } else {
-      path = `/${workspaceId}`
+      path = `/${workspaceId}${queryParams}`
     }
 
-    if (state.appInfo.value.baseHostName && location.hostname !== `${workspaceId}.${state.appInfo.value.baseHostName}`) {
-      location.href = `https://${workspaceId}.${state.appInfo.value.baseHostName}/dashboard/#${path}`
+    navigateTo({
+      path,
+    })
+  }
+
+  const ncNavigateTo = ({
+    workspaceId: _workspaceId,
+    type: _type,
+    projectId,
+    query,
+    tableId,
+    viewId,
+  }: {
+    workspaceId?: string
+    projectId?: string
+    type?: NcProjectType
+    query?: any
+    tableId?: string
+    viewId?: string
+  }) => {
+    const tablePath = tableId ? `/${tableId}${viewId ? `/${viewId}` : ''}` : ''
+    const workspaceId = _workspaceId || 'nc'
+    let path: string
+
+    const queryParams = query ? `?${new URLSearchParams(query).toString()}` : ''
+
+    if (projectId) {
+      path = `/${workspaceId}/${projectId}${tablePath}${queryParams}`
     } else {
-      navigateTo(path)
+      path = `/${workspaceId}${queryParams}`
     }
+
+    navigateTo({
+      path,
+    })
   }
 
   const getBaseUrl = (workspaceId: string) => {
@@ -107,5 +142,5 @@ export function useGlobalActions(state: State): Actions {
     return undefined
   }
 
-  return { signIn, signOut, refreshToken, loadAppInfo, setIsMobileMode, navigateToProject, getBaseUrl }
+  return { signIn, signOut, refreshToken, loadAppInfo, setIsMobileMode, navigateToProject, getBaseUrl, ncNavigateTo }
 }
diff --git a/packages/nc-gui/composables/useGlobal/state.ts b/packages/nc-gui/composables/useGlobal/state.ts
index 942ba9b43e..2cfc57b4b3 100644
--- a/packages/nc-gui/composables/useGlobal/state.ts
+++ b/packages/nc-gui/composables/useGlobal/state.ts
@@ -78,7 +78,9 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
   /** current token ref, used by `useJwt` to reactively parse our token payload */
   const token = computed({
     get: () => storage.value.token || '',
-    set: (val) => (storage.value.token = val),
+    set: (val) => {
+      storage.value.token = val
+    },
   })
 
   const config = useRuntimeConfig()
@@ -105,6 +107,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     isCloud: false,
     automationLogLevel: 'OFF',
     disableEmailAuth: false,
+    dashboardPath: '/dashboard',
   })
 
   /** reactive token payload */
diff --git a/packages/nc-gui/composables/useGlobal/types.ts b/packages/nc-gui/composables/useGlobal/types.ts
index bce7d69290..ee4c6ef755 100644
--- a/packages/nc-gui/composables/useGlobal/types.ts
+++ b/packages/nc-gui/composables/useGlobal/types.ts
@@ -28,6 +28,7 @@ export interface AppInfo {
   baseHostName?: string
   disableEmailAuth: boolean
   mainSubDomain?: string
+  dashboardPath: string
 }
 
 export interface StoredState {
@@ -61,12 +62,20 @@ export interface Getters {
 }
 
 export interface Actions {
-  signOut: () => void
+  signOut: (skipRedirect?: boolean) => void
   signIn: (token: string) => void
   refreshToken: () => void
   loadAppInfo: () => void
   setIsMobileMode: (isMobileMode: boolean) => void
-  navigateToProject: (params: { workspaceId?: string; projectId?: string; type?: NcProjectType }) => void
+  navigateToProject: (params: { workspaceId?: string; projectId?: string; type?: NcProjectType; query?: any }) => void
+  ncNavigateTo: (params: {
+    workspaceId?: string
+    projectId?: string
+    type?: NcProjectType
+    query?: any
+    tableId?: string
+    viewId?: string
+  }) => void
   getBaseUrl: (workspaceId: string) => string | undefined
 }
 
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 1948b16457..0703d06d58 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -66,7 +66,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const { t } = useI18n()
 
-    const isPublic: boolean = inject(IsPublicInj, ref(false))
+    const isPublic: Ref<boolean> = inject(IsPublicInj, ref(false))
 
     const colOptions = computed(() => column.value?.colOptions as LinkToAnotherRecordType)
 
@@ -190,6 +190,11 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               where:
                 childrenListPagination.query && `(${relatedTableDisplayValueProp.value},like,${childrenListPagination.query})`,
             } as any,
+            {
+              headers: {
+                'xc-password': sharedViewPassword.value,
+              },
+            },
           )
         } else {
           childrenList.value = await $api.dbTableRow.nestedList(
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index 8fc5491ffe..e1cf0eb165 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -1,5 +1,5 @@
-import { isString } from '@vue/shared'
-import { computed, createSharedComposable, ref, useApi, useGlobal } from '#imports'
+import { extractRolesObj } from 'nocodb-sdk'
+import { computed, createSharedComposable, useApi, useGlobal } from '#imports'
 import type { ProjectRole, Role, Roles } from '#imports'
 
 /**
@@ -9,40 +9,58 @@ import type { ProjectRole, Role, Roles } from '#imports'
  * * `projectRoles` - the roles a user has in the current project (if one was loaded)
  * * `allRoles` - all roles a user has (userRoles + projectRoles)
  * * `hasRole` - a function to check if a user has a specific role
- * * `loadProjectRoles` - a function to load the project roles for a specific project (by id)
+ * * `loadRoles` - a function to load reload user roles for scope
  */
 export const useRoles = createSharedComposable(() => {
   const { user, previewAs } = useGlobal()
 
   const { api } = useApi()
 
-  const projectRoles = ref<Roles<ProjectRole>>({})
+  const allRoles = computed<Roles | null>(() => {
+    let orgRoles = user.value?.roles ?? {}
 
-  const userRoles = computed<Roles<Role>>(() => {
-    let roles = user.value?.roles ?? {}
+    orgRoles = extractRolesObj(orgRoles)
 
-    // if string populate key-value paired object
-    if (isString(roles)) {
-      roles = roles.split(',').reduce<Roles>((acc, role) => {
-        acc[role] = true
-        return acc
-      }, {})
+    let projectRoles = user.value?.project_roles ?? {}
+
+    projectRoles = extractRolesObj(projectRoles)
+
+    return {
+      ...orgRoles,
+      ...projectRoles,
     }
+  })
+
+  const orgRoles = computed<Roles | null>(() => {
+    let orgRoles = user.value?.roles ?? {}
 
-    return roles
+    orgRoles = extractRolesObj(orgRoles)
+
+    return orgRoles
   })
 
-  const allRoles = computed<Roles>(() => ({
-    ...userRoles.value,
-    ...projectRoles.value,
-  }))
+  const projectRoles = computed<Roles | null>(() => {
+    let projectRoles = user.value?.project_roles ?? {}
+
+    if (Object.keys(projectRoles).length === 0) {
+      projectRoles = user.value?.roles ?? {}
+    }
 
-  async function loadProjectRoles(
-    projectId: string,
+    projectRoles = extractRolesObj(projectRoles)
+
+    return projectRoles
+  })
+
+  const workspaceRoles = computed<Roles | null>(() => {
+    return null
+  })
+
+  async function loadRoles(
+    projectId?: string,
     options: { isSharedBase?: boolean; sharedBaseId?: string; isSharedErd?: boolean; sharedErdId?: string } = {},
   ) {
     if (options?.isSharedBase) {
-      const user = await api.auth.me(
+      const res = await api.auth.me(
         {
           project_id: projectId,
         },
@@ -53,9 +71,13 @@ export const useRoles = createSharedComposable(() => {
         },
       )
 
-      projectRoles.value = user.roles
+      user.value = {
+        ...user.value,
+        roles: res.roles,
+        project_roles: res.project_roles,
+      }
     } else if (options?.isSharedErd) {
-      const user = await api.auth.me(
+      const res = await api.auth.me(
         {
           project_id: projectId,
         },
@@ -66,12 +88,19 @@ export const useRoles = createSharedComposable(() => {
         },
       )
 
-      projectRoles.value = user.roles
+      user.value = {
+        ...user.value,
+        roles: res.roles,
+        project_roles: res.project_roles,
+      }
     } else if (projectId) {
-      const user = await api.auth.me({ project_id: projectId })
-      projectRoles.value = user.roles
-    } else {
-      projectRoles.value = {}
+      const res = await api.auth.me({ project_id: projectId })
+
+      user.value = {
+        ...user.value,
+        roles: res.roles,
+        project_roles: res.project_roles,
+      }
     }
   }
 
@@ -83,5 +112,5 @@ export const useRoles = createSharedComposable(() => {
     return allRoles.value[role]
   }
 
-  return { allRoles, userRoles, projectRoles, loadProjectRoles, hasRole }
+  return { allRoles, orgRoles, workspaceRoles, projectRoles, loadRoles, hasRole }
 })
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index 06f5bf512e..cb5766f3b8 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -34,6 +34,8 @@ export function useSharedView() {
 
   const password = useState<string | undefined>('password', () => undefined)
 
+  provide(SharedViewPasswordInj, password)
+
   const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
 
   const meta = useState<TableType | KanbanType | MapType | undefined>('meta', () => undefined)
diff --git a/packages/nc-gui/composables/useTableNew.ts b/packages/nc-gui/composables/useTableNew.ts
index 867c73527c..24306712b6 100644
--- a/packages/nc-gui/composables/useTableNew.ts
+++ b/packages/nc-gui/composables/useTableNew.ts
@@ -79,7 +79,7 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
     }
 
     await navigateTo({
-      path: `/${workspaceIdOrType}/${projectIdOrBaseId}/table/${table?.id}`,
+      path: `/${workspaceIdOrType}/${projectIdOrBaseId}/${table?.id}`,
       query: route.value.query,
     })
 
diff --git a/packages/nc-gui/composables/useUndoRedo.ts b/packages/nc-gui/composables/useUndoRedo.ts
index 54ab33a314..563b9cb2a7 100644
--- a/packages/nc-gui/composables/useUndoRedo.ts
+++ b/packages/nc-gui/composables/useUndoRedo.ts
@@ -25,12 +25,22 @@ export const useUndoRedo = createSharedComposable(() => {
     return tempScope
   })
 
-  const isSameScope = (sc: { key: string; param: string }[]) => {
+  const isSameScope = (sc: { key: string; param: string | string[] }[]) => {
     return sc.every((s) => {
       return scope.value.some(
         // viewTitle is optional for default view
-        (s2) =>
-          (s.key === 'viewTitle' && s2.key === 'viewTitle' && s2.param === '') || (s.key === s2.key && s.param === s2.param),
+        (s2) => {
+          if (Array.isArray(s.param)) {
+            return (
+              (s.key === 'viewTitle' && s2.key === 'viewTitle' && s2.param === '') ||
+              (s.key === s2.key && s.param.includes(s2.param))
+            )
+          } else {
+            return (
+              (s.key === 'viewTitle' && s2.key === 'viewTitle' && s2.param === '') || (s.key === s2.key && s.param === s2.param)
+            )
+          }
+        },
       )
     })
   }
@@ -130,18 +140,18 @@ export const useUndoRedo = createSharedComposable(() => {
     }
   }
 
-  const defineViewScope = (param: { view?: ViewType; project_id?: string; model_id?: string; title?: string }) => {
+  const defineViewScope = (param: { view?: ViewType; project_id?: string; model_id?: string; title?: string; id?: string }) => {
     if (param.view) {
       return [
         { key: 'projectId', param: param.view.project_id! },
         { key: 'viewId', param: param.view.fk_model_id! },
-        { key: 'viewTitle', param: param.view.title! },
+        { key: 'viewTitle', param: [param.view.title, param.view.id!] },
       ]
     } else {
       return [
         { key: 'projectId', param: param.project_id! },
         { key: 'viewId', param: param.model_id! },
-        { key: 'viewTitle', param: param.title! },
+        { key: 'viewTitle', param: [param.title!, param.id!] },
       ]
     }
   }
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index bfaed6bb9f..8ee7a073a7 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, iconMap, navigateTo, ref, useGlobal, useNuxtApp, useRoute, useSidebar } from '#imports'
 
-const { signOut, signedIn, isLoading, user, currentVersion } = useGlobal()
+const { signOut, signedIn, isLoading, user, currentVersion, appInfo } = useGlobal()
 
 useSidebar('nc-left-sidebar', { hasSidebar: false })
 
@@ -14,7 +14,7 @@ const hasSider = ref(false)
 const sidebar = ref<HTMLDivElement>()
 
 const logout = async () => {
-  await signOut()
+  await signOut(false)
   navigateTo('/signin')
 }
 
@@ -68,7 +68,7 @@ hooks.hook('page:finish', () => {
 
         <LazyGeneralReleaseInfo />
 
-        <a-tooltip placement="bottom" :mouse-enter-delay="1">
+        <a-tooltip v-if="!appInfo.ee" placement="bottom" :mouse-enter-delay="1">
           <template #title> Switch language</template>
 
           <div class="flex pr-4 items-center">
@@ -128,7 +128,7 @@ hooks.hook('page:finish', () => {
         </template>
       </a-layout-header>
 
-      <a-tooltip placement="bottom">
+      <a-tooltip v-if="!appInfo.ee" placement="bottom">
         <template #title> Switch language</template>
 
         <LazyGeneralLanguage v-if="!signedIn && !route.params.projectId && !route.params.erdUuid" class="nc-lang-btn" />
diff --git a/packages/nc-gui/layouts/dashboard.vue b/packages/nc-gui/layouts/dashboard.vue
index 1c21142eea..18fb4b3696 100644
--- a/packages/nc-gui/layouts/dashboard.vue
+++ b/packages/nc-gui/layouts/dashboard.vue
@@ -5,22 +5,18 @@ import 'splitpanes/dist/splitpanes.css'
 const router = useRouter()
 const route = router.currentRoute
 
-const { isLeftSidebarOpen, leftSidebarWidthPercent } = storeToRefs(useSidebarStore())
+const {
+  isLeftSidebarOpen,
+  leftSidebarWidthPercent,
+  leftSideBarSize: sideBarSize,
+  leftSidebarState: sidebarState,
+} = storeToRefs(useSidebarStore())
+
 const wrapperRef = ref<HTMLDivElement>()
-const sideBarSize = ref({
-  old: 17.5,
-  current: 17.5,
-})
-const contentSize = ref({
-  old: 82.5,
-  current: 82.5,
-})
-const isSidebarShort = ref(false)
-const animationDuration = 300
+
+const contentSize = computed(() => 100 - sideBarSize.value.current)
+const animationDuration = 250
 const viewportWidth = ref(window.innerWidth)
-const isMouseOverShowSidebarZone = ref(false)
-const isAnimationEndAfterSidebarHide = ref(false)
-const isStartHideSidebarAnimation = ref(false)
 
 const sidebarWidth = computed(() => (sideBarSize.value.old * viewportWidth.value) / 100)
 const currentSidebarSize = computed({
@@ -31,70 +27,46 @@ const currentSidebarSize = computed({
   },
 })
 
-watch(
-  currentSidebarSize,
-  () => {
-    leftSidebarWidthPercent.value = currentSidebarSize.value
-  },
-  {
-    immediate: true,
-  },
-)
-
-const isSidebarHidden = ref(false)
+watch(currentSidebarSize, () => {
+  leftSidebarWidthPercent.value = currentSidebarSize.value
+})
 
 watch(isLeftSidebarOpen, () => {
   sideBarSize.value.current = sideBarSize.value.old
 
   if (isLeftSidebarOpen.value) {
-    contentSize.value.current = contentSize.value.old
-
-    setTimeout(() => {
-      isSidebarShort.value = true
-
-      isSidebarHidden.value = false
-    }, 0)
+    setTimeout(() => (sidebarState.value = 'openStart'), 0)
 
-    setTimeout(() => {
-      isSidebarShort.value = false
-    }, animationDuration / 2)
+    setTimeout(() => (sidebarState.value = 'openEnd'), animationDuration)
   } else {
     sideBarSize.value.old = sideBarSize.value.current
 
-    contentSize.value.current = contentSize.value.old
-    contentSize.value.current = 100
-
-    isSidebarShort.value = true
-    isAnimationEndAfterSidebarHide.value = false
+    sidebarState.value = 'hiddenStart'
 
     setTimeout(() => {
-      isSidebarHidden.value = true
       sideBarSize.value.current = 0
-      isAnimationEndAfterSidebarHide.value = true
-    }, animationDuration * 1.75)
+
+      sidebarState.value = 'hiddenEnd'
+    }, animationDuration)
   }
 })
 
 function handleMouseMove(e: MouseEvent) {
   if (!wrapperRef.value) return
-  if (isLeftSidebarOpen.value && !isSidebarHidden.value && !isMouseOverShowSidebarZone.value) return
-  if (isLeftSidebarOpen.value) {
-    isSidebarHidden.value = false
-    isMouseOverShowSidebarZone.value = false
-    return
-  }
+  if (sidebarState.value === 'openEnd') return
 
-  if (e.clientX < 4) {
-    isSidebarHidden.value = false
-    isMouseOverShowSidebarZone.value = true
-  } else if (e.clientX > sidebarWidth.value + 10 && !isSidebarHidden.value) {
-    isSidebarHidden.value = true
-    isMouseOverShowSidebarZone.value = false
-    isAnimationEndAfterSidebarHide.value = false
+  if (e.clientX < 4 && ['hiddenEnd', 'peekCloseEnd'].includes(sidebarState.value)) {
+    sidebarState.value = 'peekOpenStart'
+
+    setTimeout(() => {
+      sidebarState.value = 'peekOpenEnd'
+    }, animationDuration)
+  } else if (e.clientX > sidebarWidth.value + 10 && sidebarState.value === 'peekOpenEnd') {
+    sidebarState.value = 'peekCloseOpen'
 
     setTimeout(() => {
-      isAnimationEndAfterSidebarHide.value = true
-    }, animationDuration * 1.75)
+      sidebarState.value = 'peekCloseEnd'
+    }, animationDuration)
   }
 }
 
@@ -113,19 +85,6 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', onWindowResize)
 })
 
-watch(
-  () => !isLeftSidebarOpen.value && isSidebarShort.value,
-  (value) => {
-    if (value) {
-      setTimeout(() => {
-        isStartHideSidebarAnimation.value = true
-      }, animationDuration / 2)
-    } else {
-      isStartHideSidebarAnimation.value = false
-    }
-  },
-)
-
 watch(route, () => {
   if (route.value.name === 'index-index') {
     isLeftSidebarOpen.value = true
@@ -140,37 +99,32 @@ export default {
 </script>
 
 <template>
-  <NuxtLayout>
+  <NuxtLayout class="h-screen">
     <slot v-if="!route.meta.hasSidebar" name="content" />
     <Splitpanes
       v-else
-      style="height: 100vh"
-      class="nc-sidebar-content-resizable-wrapper w-full"
+      class="nc-sidebar-content-resizable-wrapper w-full h-full"
       :class="{
-        'sidebar-short': isSidebarShort,
+        'hide-resize-bar': !isLeftSidebarOpen || sidebarState === 'openStart',
       }"
       @resize="currentSidebarSize = $event[0].size"
     >
       <Pane min-size="15%" :size="currentSidebarSize" max-size="40%" class="nc-sidebar-splitpane relative !overflow-visible">
         <div
           ref="wrapperRef"
-          class="nc-sidebar-wrapper relative"
+          class="nc-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible"
           :class="{
-            'open': isLeftSidebarOpen,
-            'close': !isLeftSidebarOpen,
-            'absolute': isMouseOverShowSidebarZone,
-            'sidebar-short': isSidebarShort,
-            'hide-sidebar': isStartHideSidebarAnimation && !isMouseOverShowSidebarZone,
+            'minimized-height': !isLeftSidebarOpen,
+            'hide-sidebar': ['hiddenStart', 'hiddenEnd', 'peekCloseEnd'].includes(sidebarState),
           }"
           :style="{
-            width: isAnimationEndAfterSidebarHide && isSidebarHidden ? '0px' : `${sidebarWidth}px`,
-            overflow: isMouseOverShowSidebarZone ? 'visible' : undefined,
+            width: sidebarState === 'hiddenEnd' ? '0px' : `${sidebarWidth}px`,
           }"
         >
           <slot name="sidebar" />
         </div>
       </Pane>
-      <Pane :size="contentSize.current">
+      <Pane :size="contentSize">
         <slot name="content" />
       </Pane>
     </Splitpanes>
@@ -178,20 +132,34 @@ export default {
 </template>
 
 <style lang="scss">
+.nc-sidebar-wrapper.minimized-height > * {
+  @apply h-4/5 pb-2 !(rounded-r-lg border-1 border-gray-200 shadow-lg);
+  width: calc(100% + 4px);
+}
+
+.nc-sidebar-wrapper > * {
+  transition: all 0.2s ease-in-out;
+  @apply z-10 absolute;
+}
+
+.nc-sidebar-wrapper.hide-sidebar {
+  @apply !min-w-0;
+
+  > * {
+    @apply opacity-0;
+    transform: translateX(-100%);
+  }
+}
+
+/** Split pane CSS */
+
 .nc-sidebar-content-resizable-wrapper > {
   .splitpanes__splitter {
-    width: 0 !important;
-    position: relative;
-    overflow: visible;
+    @apply !w-0 relative overflow-visible;
   }
   .splitpanes__splitter:before {
-    @apply bg-gray-200 w-0.25;
+    @apply bg-gray-200 w-0.25 absolute left-0 top-0 h-full z-40;
     content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    z-index: 40;
   }
 
   .splitpanes__splitter:hover:before {
@@ -209,57 +177,25 @@ export default {
   .splitpanes--dragging .splitpanes__splitter {
     @apply w-1 mr-0;
   }
+}
 
-  .sidebar-short > .splitpanes__splitter {
-    display: none !important;
+.nc-sidebar-content-resizable-wrapper.hide-resize-bar > {
+  .splitpanes__splitter {
+    cursor: default !important;
+    opacity: 0 !important;
     background-color: transparent !important;
   }
 }
 
-.splitpanes--dragging {
-  cursor: col-resize;
-}
-
-.nc-sidebar-wrapper {
-  @apply flex flex-col h-full justify-center !min-w-32;
+.splitpanes__pane {
+  transition: width 0.15s ease-in-out !important;
 }
 
-.nc-sidebar-wrapper.close {
-  > * {
-    height: 80vh;
-  }
-}
-
-.nc-sidebar-wrapper.sidebar-short {
-  > * {
-    @apply z-10;
-    height: 80vh !important;
-    padding-bottom: 0.35rem;
-  }
-}
+.splitpanes--dragging {
+  cursor: col-resize;
 
-.nc-sidebar-wrapper.open {
-  height: 100vh;
-  > * {
-    height: 100vh;
+  > .splitpanes__pane {
+    transition: none !important;
   }
 }
-
-.nc-sidebar-wrapper > * {
-  height: calc(100% - var(--sidebar-top-height));
-}
-
-.nc-sidebar-wrapper > * {
-  width: 100%;
-  transition: all 0.3s ease-in-out;
-}
-
-.nc-sidebar-wrapper.hide-sidebar > * {
-  position: absolute;
-  transform: translateX(-100%);
-  opacity: 0;
-}
-.nc-sidebar-wrapper.sidebar-short > * {
-  @apply !(rounded-r-lg border-1 border-gray-200 shadow-lg);
-}
 </style>
diff --git a/packages/nc-gui/layouts/empty.vue b/packages/nc-gui/layouts/empty.vue
index 1d343592b7..b734bb51f6 100644
--- a/packages/nc-gui/layouts/empty.vue
+++ b/packages/nc-gui/layouts/empty.vue
@@ -1,3 +1,11 @@
+<script lang="ts">
+export default {
+  name: 'EmptyLayout',
+}
+</script>
+
 <template>
-  <slot></slot>
+  <NuxtLayout class="h-screen">
+    <slot></slot>
+  </NuxtLayout>
 </template>
diff --git a/packages/nc-gui/layouts/new.vue b/packages/nc-gui/layouts/new.vue
index a6e5695786..8af4a80001 100644
--- a/packages/nc-gui/layouts/new.vue
+++ b/packages/nc-gui/layouts/new.vue
@@ -34,7 +34,7 @@ watch(hasSidebar, (val) => {
 })
 
 const logout = async () => {
-  await signOut()
+  await signOut(false)
   await navigateTo('/signin')
   await clearWorkspaces()
 }
diff --git a/packages/nc-gui/layouts/shared-view.vue b/packages/nc-gui/layouts/shared-view.vue
index d32731413b..a090e8574d 100644
--- a/packages/nc-gui/layouts/shared-view.vue
+++ b/packages/nc-gui/layouts/shared-view.vue
@@ -76,40 +76,12 @@ export default {
           </div>
         </div>
 
-        <a-tooltip placement="bottom">
-          <template #title> Switch language</template>
-
-          <LazyGeneralLanguage class="nc-lang-btn" />
-        </a-tooltip>
+        <div class="flex-1" />
       </a-layout-header>
 
-      <div class="w-full overflow-scroll" style="height: calc(100vh)">
+      <div class="w-full overflow-hidden" style="height: calc(100vh)">
         <slot />
       </div>
     </a-layout>
   </a-layout>
 </template>
-
-<style lang="scss">
-.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 ring-opacity-100 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;
-    content: '';
-    z-index: -1;
-  }
-
-  &:hover::after {
-    @apply transform scale-110 ring ring-accent ring-opacity-100;
-  }
-
-  &:active::after {
-    @apply ring ring-accent ring-opacity-100;
-  }
-}
-
-.nc-navbar {
-  @apply flex !bg-white items-center !pl-2 !pr-5;
-}
-</style>
\ No newline at end of file
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index f68a4f5900..246546f3c2 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -20,6 +20,8 @@ interface User {
   firstname: string | null
   lastname: string | null
   roles: Roles | string
+  project_roles: Roles | string
+  workspace_roles: Roles | string
   invite_token?: string
   project_id?: string
 }
@@ -138,7 +140,7 @@ type NcProject = ProjectType & {
 interface UndoRedoAction {
   undo: { fn: Function; args: any[] }
   redo: { fn: Function; args: any[] }
-  scope?: { key: string; param: string }[]
+  scope?: { key: string; param: string | string[] }[]
 }
 
 interface ImportWorkerPayload {
@@ -182,6 +184,8 @@ interface Users {
 
 type ViewPageType = 'view' | 'webhook' | 'api' | 'field' | 'relation'
 
+type NcButtonSize = 'xxsmall' | 'xsmall' | 'small' | 'medium'
+
 export {
   User,
   ProjectMetaInfo,
@@ -207,4 +211,5 @@ export {
   AllRoles,
   Users,
   ViewPageType,
+  NcButtonSize,
 }
diff --git a/packages/nc-gui/middleware/auth.global.ts b/packages/nc-gui/middleware/auth.global.ts
index 3bcd330179..571e094baf 100644
--- a/packages/nc-gui/middleware/auth.global.ts
+++ b/packages/nc-gui/middleware/auth.global.ts
@@ -67,6 +67,11 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
     /** if user is still not signed in, redirect to signin page */
     if (!state.signedIn.value) return navigateTo('/signin')
   } else if (to.meta.requiresAuth === false && state.signedIn.value) {
+    if (to.query?.logout) {
+      await state.signOut(true)
+      return navigateTo('/signin')
+    }
+
     /**
      * if user was turned away from non-auth page but also came from a non-auth page (e.g. user went to /signin and reloaded the page)
      * redirect to home page
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 08c2bc76ee..6bd80b0ba3 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -37,7 +37,7 @@
         "locale-codes": "^1.3.1",
         "monaco-editor": "^0.33.0",
         "monaco-sql-languages": "^0.11.0",
-        "nocodb-sdk": "0.111.1",
+        "nocodb-sdk": "file:../nocodb-sdk",
         "papaparse": "^5.3.2",
         "parse-github-url": "^1.0.2",
         "pinia": "^2.1.4",
@@ -54,7 +54,7 @@
         "vue-barcode-reader": "^1.0.3",
         "vue-chartjs": "^5.2.0",
         "vue-dompurify-html": "^3.0.0",
-        "vue-github-button": "^3.0.3",
+        "vue-github-button": "^3.1.0",
         "vue-i18n": "^9.2.2",
         "vue-qrcode-reader": "3.1.0-vue3-compatibility.2",
         "vue3-calendar-heatmap": "^2.0.0",
@@ -82,7 +82,7 @@
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/mi": "^1.1.2",
         "@iconify-json/ph": "^1.1.5",
-        "@iconify-json/ri": "^1.1.3",
+        "@iconify-json/ri": "^1.1.12",
         "@iconify-json/simple-icons": "^1.1.29",
         "@iconify-json/system-uicons": "^1.1.4",
         "@iconify-json/tabler": "^1.1.59",
@@ -131,7 +131,6 @@
     },
     "../nocodb-sdk": {
       "version": "0.111.1",
-      "extraneous": true,
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "axios": "^0.21.1",
@@ -1585,9 +1584,9 @@
       }
     },
     "node_modules/@iconify-json/ri": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.10.tgz",
-      "integrity": "sha512-fsJuXLfpdxb9pfn8LFcfM6LS82j358HaI29Y1qcH1UDnt/V439rTivV6v/YSLkd4z/dZIbh5iOR8+Cg4qtu5Rw==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.12.tgz",
+      "integrity": "sha512-s5VsyMWYuUuTB5bATJRoDQKGqo6W0dsxvOBrJI/P2H9QI7IAaAWl8zHxseSjoUGG6AwZwWwDMW9YPULPt+vA6w==",
       "dev": true,
       "dependencies": {
         "@iconify/types": "*"
@@ -8944,6 +8943,7 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "devOptional": true,
       "funding": [
         {
           "type": "individual",
@@ -11680,21 +11680,8 @@
       }
     },
     "node_modules/nocodb-sdk": {
-      "version": "0.111.1",
-      "resolved": "https://registry.npmjs.org/nocodb-sdk/-/nocodb-sdk-0.111.1.tgz",
-      "integrity": "sha512-FS5wyWd3XkPtRkqjO7Hdj5HKsco6/oYc8MPrZ7K/JRmqf0Yf1oydtarkv7h+dDTaNtfcp6Qm56b1JdwJP/EWvg==",
-      "dependencies": {
-        "axios": "^0.21.1",
-        "jsep": "^1.3.6"
-      }
-    },
-    "node_modules/nocodb-sdk/node_modules/axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-      "dependencies": {
-        "follow-redirects": "^1.14.0"
-      }
+      "resolved": "../nocodb-sdk",
+      "link": true
     },
     "node_modules/node-abi": {
       "version": "3.45.0",
@@ -18367,9 +18354,9 @@
       }
     },
     "@iconify-json/ri": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.10.tgz",
-      "integrity": "sha512-fsJuXLfpdxb9pfn8LFcfM6LS82j358HaI29Y1qcH1UDnt/V439rTivV6v/YSLkd4z/dZIbh5iOR8+Cg4qtu5Rw==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.12.tgz",
+      "integrity": "sha512-s5VsyMWYuUuTB5bATJRoDQKGqo6W0dsxvOBrJI/P2H9QI7IAaAWl8zHxseSjoUGG6AwZwWwDMW9YPULPt+vA6w==",
       "dev": true,
       "requires": {
         "@iconify/types": "*"
@@ -23611,7 +23598,8 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "devOptional": true
     },
     "for-each": {
       "version": "0.3.3",
@@ -25631,22 +25619,24 @@
       }
     },
     "nocodb-sdk": {
-      "version": "0.111.1",
-      "resolved": "https://registry.npmjs.org/nocodb-sdk/-/nocodb-sdk-0.111.1.tgz",
-      "integrity": "sha512-FS5wyWd3XkPtRkqjO7Hdj5HKsco6/oYc8MPrZ7K/JRmqf0Yf1oydtarkv7h+dDTaNtfcp6Qm56b1JdwJP/EWvg==",
+      "version": "file:../nocodb-sdk",
       "requires": {
+        "@typescript-eslint/eslint-plugin": "^4.0.1",
+        "@typescript-eslint/parser": "^4.0.1",
         "axios": "^0.21.1",
-        "jsep": "^1.3.6"
-      },
-      "dependencies": {
-        "axios": {
-          "version": "0.21.4",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-          "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-          "requires": {
-            "follow-redirects": "^1.14.0"
-          }
-        }
+        "cspell": "^4.1.0",
+        "eslint": "^7.8.0",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-plugin-eslint-comments": "^3.2.0",
+        "eslint-plugin-functional": "^3.0.2",
+        "eslint-plugin-import": "^2.22.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "jsep": "^1.3.6",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^2.1.1",
+        "rimraf": "^5.0.1",
+        "tsc-alias": "^1.8.7",
+        "typescript": "^4.7.4"
       }
     },
     "node-abi": {
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 18edb1cbaf..8ca6674267 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -60,7 +60,7 @@
     "locale-codes": "^1.3.1",
     "monaco-editor": "^0.33.0",
     "monaco-sql-languages": "^0.11.0",
-    "nocodb-sdk": "0.111.1",
+    "nocodb-sdk": "file:../nocodb-sdk",
     "papaparse": "^5.3.2",
     "parse-github-url": "^1.0.2",
     "pinia": "^2.1.4",
@@ -77,7 +77,7 @@
     "vue-barcode-reader": "^1.0.3",
     "vue-chartjs": "^5.2.0",
     "vue-dompurify-html": "^3.0.0",
-    "vue-github-button": "^3.0.3",
+    "vue-github-button": "^3.1.0",
     "vue-i18n": "^9.2.2",
     "vue-qrcode-reader": "3.1.0-vue3-compatibility.2",
     "vue3-calendar-heatmap": "^2.0.0",
@@ -105,7 +105,7 @@
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/mi": "^1.1.2",
     "@iconify-json/ph": "^1.1.5",
-    "@iconify-json/ri": "^1.1.3",
+    "@iconify-json/ri": "^1.1.12",
     "@iconify-json/simple-icons": "^1.1.29",
     "@iconify-json/system-uicons": "^1.1.4",
     "@iconify-json/tabler": "^1.1.59",
diff --git a/packages/nc-gui/pages/account/index.vue b/packages/nc-gui/pages/account/index.vue
index 69263ce1cd..b8ead4799b 100644
--- a/packages/nc-gui/pages/account/index.vue
+++ b/packages/nc-gui/pages/account/index.vue
@@ -5,12 +5,6 @@ const { isUIAllowed } = useUIPermission()
 
 const $route = useRoute()
 
-const { appInfo } = useGlobal()
-
-const { loadScope } = useCommandPalette()
-
-loadScope('account_settings')
-
 const selectedKeys = computed(() => [
   /^\/account\/users\/?$/.test($route.fullPath)
     ? isUIAllowed('superAdminUserManagement')
diff --git a/packages/nc-gui/pages/forgot-password.vue b/packages/nc-gui/pages/forgot-password.vue
index 26031ed454..3bf38416a2 100644
--- a/packages/nc-gui/pages/forgot-password.vue
+++ b/packages/nc-gui/pages/forgot-password.vue
@@ -10,10 +10,6 @@ const { api, isLoading, error } = useApi({ useGlobalInstance: true })
 
 const { t } = useI18n()
 
-const { loadScope } = useCommandPalette()
-
-loadScope('disabled')
-
 const success = ref(false)
 
 const formValidator = ref()
diff --git a/packages/nc-gui/pages/index.vue b/packages/nc-gui/pages/index.vue
index d4cdaf1485..e95b4cb0cf 100644
--- a/packages/nc-gui/pages/index.vue
+++ b/packages/nc-gui/pages/index.vue
@@ -14,6 +14,10 @@ const projectId = ref<string>()
 
 const projectsStore = useProjects()
 
+const { populateWorkspace } = useWorkspace()
+
+const { signedIn } = useGlobal()
+
 const router = useRouter()
 
 const route = router.currentRoute
@@ -35,12 +39,6 @@ const isSharedView = computed(() => {
   // check route is not project page by route name
   return !routeName.startsWith('index-typeOrId-projectId-') && !['index', 'index-typeOrId'].includes(routeName)
 })
-const isSharedFormView = computed(() => {
-  const routeName = (route.value.name as string) || ''
-
-  // check route is shared form view route
-  return routeName.startsWith('index-typeOrId-form-viewId')
-})
 
 watch(
   () => route.value.params.typeOrId,
@@ -50,7 +48,19 @@ watch(
       return
     }
 
-    await projectsStore.loadProjects('recent')
+    // avoid loading projects for shared base
+    if (route.value.params.typeOrId === 'base') {
+      await populateWorkspace()
+      return
+    }
+
+    if (!signedIn.value) {
+      navigateTo('/signIn')
+      return
+    }
+
+    // Load projects
+    await populateWorkspace()
 
     if (!route.value.params.projectId && projectsList.value.length > 0) {
       await autoNavigateToProject()
@@ -73,10 +83,7 @@ provide(ToggleDialogInj, toggleDialog)
 
 <template>
   <div>
-    <NuxtLayout v-if="isSharedFormView">
-      <NuxtPage />
-    </NuxtLayout>
-    <NuxtLayout v-else-if="isSharedView" name="shared-view">
+    <NuxtLayout v-if="isSharedView" name="shared-view">
       <NuxtPage />
     </NuxtLayout>
     <NuxtLayout v-else name="dashboard">
diff --git a/packages/nc-gui/pages/index/[typeOrId].vue b/packages/nc-gui/pages/index/[typeOrId].vue
index 60bd7eeeab..5800abe05f 100644
--- a/packages/nc-gui/pages/index/[typeOrId].vue
+++ b/packages/nc-gui/pages/index/[typeOrId].vue
@@ -5,7 +5,7 @@ const route = router.currentRoute
 </script>
 
 <template>
-  <div class="h-full w-full">
+  <div>
     <NuxtPage :transition="false" :page-key="route.params.typeOrId" />
   </div>
 </template>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index.vue
index 2cbc0138a4..cc4701d95e 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index.vue
@@ -18,58 +18,6 @@ const route = router.currentRoute
 <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-[var(--sidebar-top-height)] !bg-white-500 nc-tab-bar">
-        <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 mb-1"
-        >
-          <GeneralIcon
-            v-e="['c:grid:toggle-navdraw']"
-            icon="sidebarMinimise"
-            class="cursor-pointer transform transition-transform duration-500 text-gray-500/80 hover:text-gray-500"
-            :class="{ 'rotate-180': !isOpen }"
-            @click="toggle(!isOpen)"
-          />
-        </div>
-
-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs min-w-[500px]" type="editable-card" @edit="onEdit">
-          <a-tab-pane v-for="(tab, i) of tabs" :key="i">
-            <template #tab>
-              <div class="flex items-center gap-2" data-testid="nc-tab-title">
-                <div class="flex items-center">
-                  <Icon
-                    v-if="tab.meta?.icon"
-                    :icon="tab.meta?.icon"
-                    class="text-xl"
-                    :data-testid="`nc-tab-icon-${tab.meta?.icon}`"
-                  />
-                  <component :is="icon(tab)" v-else class="text-sm" />
-                </div>
-
-                <div :data-testid="`nc-root-tabs-${tab.title}`">
-                  <GeneralTruncateText :key="tab.title" :length="12">
-                    {{ tab.title }}
-                  </GeneralTruncateText>
-                </div>
-              </div>
-            </template>
-          </a-tab-pane>
-        </a-tabs>
-
-        <span class="flex-1" />
-
-        <div class="flex justify-center self-center mr-2 min-w-[115px]">
-          <div v-if="isLoading" class="flex items-center gap-2 ml-3 text-gray-200" data-testid="nc-loading">
-            {{ $t('general.loading') }}
-
-            <MdiLoading class="animate-infinite animate-spin" />
-          </div>
-        </div>
-
-        <LazyGeneralShareBaseButton class="mb-1px" />
-        <LazyGeneralFullScreen class="nc-fullscreen-icon mb-1px" />
-      </div>
-       -->
       <div class="w-full min-h-[300px] flex-auto">
         <NuxtPage />
       </div>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[type]/[viewId]/[[viewTitle]].vue b/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[viewId]/[[viewTitle]].vue
similarity index 84%
rename from packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[type]/[viewId]/[[viewTitle]].vue
rename to packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[viewId]/[[viewTitle]].vue
index 4e68db58e4..a31a000853 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[type]/[viewId]/[[viewTitle]].vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[viewId]/[[viewTitle]].vue
@@ -13,10 +13,6 @@ const activeTab = inject(
   computed(() => ({} as TabItem)),
 )
 
-const viewType = computed(() => {
-  return route.params.type as string
-})
-
 watch(
   () => route.params.viewId,
   (viewId) => {
@@ -33,6 +29,6 @@ watch(
 
 <template>
   <div class="w-full h-full relative">
-    <LazyTabsSmartsheet :key="viewType" :active-tab="activeTab" />
+    <LazyTabsSmartsheet :active-tab="activeTab" />
   </div>
 </template>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[viewId]/[[viewTitle]]/[...slugs].vue b/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[viewId]/[[viewTitle]]/[...slugs].vue
new file mode 100644
index 0000000000..cc340bc4c9
--- /dev/null
+++ b/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[viewId]/[[viewTitle]]/[...slugs].vue
@@ -0,0 +1 @@
+<template></template>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue
index 35ea03dcba..7645e223f6 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue
@@ -59,7 +59,7 @@ watch(
 </script>
 
 <template>
-  <div class="h-[100vh]">
+  <NuxtLayout>
     <NuxtPage v-if="!passwordDlg" />
 
     <a-modal
@@ -91,7 +91,7 @@ watch(
         </a-form>
       </div>
     </a-modal>
-  </div>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
index b814beb713..a71d70fbdb 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
@@ -38,7 +38,7 @@ router.afterEach((to) => shouldRedirect(to.name as string))
 
 <template>
   <div
-    class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
+    class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-[100vh] min-h-[600px]"
   >
     <NuxtPage />
 
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index 2d20b58682..d39f91d0e6 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -70,7 +70,7 @@ const onDecode = async (scannedCodeValue: string) => {
 </script>
 
 <template>
-  <div class="h-full flex flex-col items-center py-4">
+  <div class="h-full flex flex-col items-center">
     <div
       class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl)"
     >
diff --git a/packages/nc-gui/pages/signin.vue b/packages/nc-gui/pages/signin.vue
index b9ea35305b..e6f26ef454 100644
--- a/packages/nc-gui/pages/signin.vue
+++ b/packages/nc-gui/pages/signin.vue
@@ -24,12 +24,10 @@ const { api, isLoading, error } = useApi({ useGlobalInstance: true })
 
 const { t } = useI18n()
 
-const { loadScope } = useCommandPalette()
-
-loadScope('disabled')
-
 useSidebar('nc-left-sidebar', { hasSidebar: false })
 
+const { clearWorkspaces } = useWorkspace()
+
 const formValidator = ref()
 
 const form = reactive({
@@ -63,7 +61,6 @@ async function signIn() {
   if (!formValidator.value.validate()) return
 
   resetError()
-  loadScope('disabled')
 
   api.auth.signin(form).then(async ({ token }) => {
     _signIn(token!)
@@ -75,6 +72,10 @@ async function signIn() {
 function resetError() {
   if (error.value) error.value = null
 }
+
+onMounted(async () => {
+  await clearWorkspaces()
+})
 </script>
 
 <template>
@@ -104,8 +105,6 @@ function resetError() {
             <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
               <a-input
                 v-model:value="form.email"
-                type="email"
-                autocomplete="email"
                 data-testid="nc-form-signin__email"
                 size="large"
                 :placeholder="$t('msg.info.signUp.workEmail')"
@@ -116,7 +115,6 @@ function resetError() {
             <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
               <a-input-password
                 v-model:value="form.password"
-                autocomplete="current-password"
                 data-testid="nc-form-signin__password"
                 size="large"
                 class="password"
diff --git a/packages/nc-gui/pages/signup/[[token]].vue b/packages/nc-gui/pages/signup/[[token]].vue
index 78caa3b475..86e90f71ac 100644
--- a/packages/nc-gui/pages/signup/[[token]].vue
+++ b/packages/nc-gui/pages/signup/[[token]].vue
@@ -30,9 +30,7 @@ const { t } = useI18n()
 
 const { navigateToTable } = useTablesStore()
 
-const { loadScope } = useCommandPalette()
-
-loadScope('disabled')
+const { clearWorkspaces } = useWorkspace()
 
 const formValidator = ref()
 
@@ -111,6 +109,10 @@ async function signUp() {
 function resetError() {
   if (error.value) error.value = null
 }
+
+onMounted(async () => {
+  await clearWorkspaces()
+})
 </script>
 
 <template>
@@ -149,8 +151,6 @@ function resetError() {
             <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
               <a-input
                 v-model:value="form.email"
-                autocomplete="email"
-                type="email"
                 size="large"
                 :placeholder="$t('msg.info.signUp.workEmail')"
                 @focus="resetError"
@@ -160,7 +160,6 @@ function resetError() {
             <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
               <a-input-password
                 v-model:value="form.password"
-                autocomplete="new-password"
                 size="large"
                 class="password"
                 :placeholder="$t('msg.info.signUp.enterPassword')"
diff --git a/packages/nc-gui/store/project.ts b/packages/nc-gui/store/project.ts
index e9c572f20b..4ce58021d7 100644
--- a/packages/nc-gui/store/project.ts
+++ b/packages/nc-gui/store/project.ts
@@ -28,7 +28,7 @@ export const useProject = defineStore('projectStore', () => {
 
   const { setTheme, theme } = useTheme()
 
-  const { projectRoles, loadProjectRoles } = useRoles()
+  const { loadRoles } = useRoles()
 
   const { refreshCommandPalette } = useCommandPalette()
 
@@ -157,17 +157,17 @@ export const useProject = defineStore('projectStore', () => {
     }
 
     if (isSharedBase.value) {
-      await loadProjectRoles(project.value.id || projectId.value, {
+      await loadRoles(project.value.id || projectId.value, {
         isSharedBase: isSharedBase.value,
         sharedBaseId: route.value.params.projectId as string,
       })
     } else if (isSharedErd.value) {
-      await loadProjectRoles(project.value.id || projectId.value, {
+      await loadRoles(project.value.id || projectId.value, {
         isSharedErd: isSharedErd.value,
         sharedErdId: route.value.params.erdUuid as string,
       })
     } else {
-      await loadProjectRoles(project.value.id || projectId.value)
+      await loadRoles(project.value.id || projectId.value)
     }
 
     await loadTables()
@@ -218,7 +218,6 @@ export const useProject = defineStore('projectStore', () => {
     // project.value = {}
     // tables.value = []
     projectMetaInfo.value = undefined
-    projectRoles.value = {}
     setTheme()
   }
 
@@ -273,7 +272,7 @@ export const useProject = defineStore('projectStore', () => {
     project,
     bases,
     tables,
-    loadProjectRoles,
+    loadRoles,
     loadProject,
     updateProject,
     loadTables,
diff --git a/packages/nc-gui/store/projects.ts b/packages/nc-gui/store/projects.ts
index dbae9bd6f1..d7db5c1cba 100644
--- a/packages/nc-gui/store/projects.ts
+++ b/packages/nc-gui/store/projects.ts
@@ -40,8 +40,6 @@ export const useProjects = defineStore('projectsStore', () => {
     return basesMap
   })
 
-  const roles = computed(() => openedProject.value?.project_role)
-
   const workspaceStore = useWorkspace()
   const tableStore = useTablesStore()
 
@@ -312,7 +310,6 @@ export const useProjects = defineStore('projectsStore', () => {
     activeProjectId,
     openedProject,
     openedProjectBasesMap,
-    roles,
     getProjectUsers,
     createProjectUser,
     updateProjectUser,
diff --git a/packages/nc-gui/store/sidebar.ts b/packages/nc-gui/store/sidebar.ts
index ea5d4504e5..93cb894dba 100644
--- a/packages/nc-gui/store/sidebar.ts
+++ b/packages/nc-gui/store/sidebar.ts
@@ -5,15 +5,31 @@ export const useSidebarStore = defineStore('sidebarStore', () => {
   const isRightSidebarOpen = ref(true)
   const leftSidebarWidthPercent = ref(20)
 
+  const leftSideBarSize = ref({
+    old: leftSidebarWidthPercent.value,
+    current: leftSidebarWidthPercent.value,
+  })
+
   const rightSidebarSize = ref({
     old: 17.5,
     current: 17.5,
   })
 
+  const leftSidebarState = ref<
+    'openStart' | 'openEnd' | 'hiddenStart' | 'hiddenEnd' | 'peekOpenStart' | 'peekOpenEnd' | 'peekCloseOpen' | 'peekCloseEnd'
+  >(isLeftSidebarOpen.value ? 'openEnd' : 'hiddenEnd')
+
+  const rightSidebarState = ref<
+    'openStart' | 'openEnd' | 'hiddenStart' | 'hiddenEnd' | 'peekOpenStart' | 'peekOpenEnd' | 'peekCloseOpen' | 'peekCloseEnd'
+  >(isRightSidebarOpen.value ? 'openEnd' : 'hiddenEnd')
+
   return {
     isLeftSidebarOpen,
     isRightSidebarOpen,
     rightSidebarSize,
     leftSidebarWidthPercent,
+    leftSideBarSize,
+    leftSidebarState,
+    rightSidebarState,
   }
 })
diff --git a/packages/nc-gui/store/tables.ts b/packages/nc-gui/store/tables.ts
index bddaefc7bf..a844942a38 100644
--- a/packages/nc-gui/store/tables.ts
+++ b/packages/nc-gui/store/tables.ts
@@ -3,7 +3,7 @@ import type { TableType } from 'nocodb-sdk'
 import { useTitle } from '@vueuse/core'
 
 export const useTablesStore = defineStore('tablesStore', () => {
-  const { includeM2M } = useGlobal()
+  const { includeM2M, ncNavigateTo } = useGlobal()
   const { api } = useApi()
   const { $e, $api } = useNuxtApp()
   const { addUndo, defineProjectScope } = useUndoRedo()
@@ -104,8 +104,11 @@ export const useTablesStore = defineStore('tablesStore', () => {
     const workspaceIdOrType = workspaceId ?? workspaceStore.activeWorkspaceId
     const projectIdOrBaseId = projectId ?? projectsStore.activeProjectId
 
-    await navigateTo({
-      path: `/${workspaceIdOrType}/${projectIdOrBaseId}/table/${tableId}${viewTitle ? `/${viewTitle}` : ''}`,
+    await ncNavigateTo({
+      workspaceId: workspaceIdOrType,
+      projectId: projectIdOrBaseId,
+      tableId,
+      viewId: viewTitle,
       query: route.value.query,
     })
   }
@@ -143,9 +146,10 @@ export const useTablesStore = defineStore('tablesStore', () => {
       projectIdOrBaseId = route.value.params.projectId as string
     }
 
-    await navigateTo({
-      path: `/${workspaceIdOrType}/${projectIdOrBaseId}/table/${table?.id}`,
-      query: route.value.query,
+    ncNavigateTo({
+      workspaceId: workspaceIdOrType,
+      projectId: projectIdOrBaseId,
+      tableId: table?.id,
     })
   }
 
diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts
index 48ce6cff66..12e76ba77d 100644
--- a/packages/nc-gui/store/views.ts
+++ b/packages/nc-gui/store/views.ts
@@ -85,11 +85,10 @@ export const useViewsStore = defineStore('viewsStore', () => {
 
   const onViewsTabChange = (page: ViewPageType) => {
     router.push({
-      name: 'index-typeOrId-projectId-index-index-type-viewId-viewTitle-slugs',
+      name: 'index-typeOrId-projectId-index-index-viewId-viewTitle-slugs',
       params: {
         typeOrId: route.value.params.typeOrId,
         projectId: route.value.params.projectId,
-        type: route.value.params.type,
         viewId: route.value.params.viewId,
         viewTitle: activeViewTitleOrId.value,
         slugs: [page],
@@ -120,7 +119,10 @@ export const useViewsStore = defineStore('viewsStore', () => {
     { immediate: true },
   )
 
+  const isLockedView = computed(() => activeView.value?.lock_type === 'locked')
+
   return {
+    isLockedView,
     isViewsLoading,
     isViewDataLoading,
     isPaginationLoading,
diff --git a/packages/nc-gui/store/webhooks.ts b/packages/nc-gui/store/webhooks.ts
index b22993a4f4..2e85f6c61e 100644
--- a/packages/nc-gui/store/webhooks.ts
+++ b/packages/nc-gui/store/webhooks.ts
@@ -172,11 +172,10 @@ export const useWebhooksStore = defineStore('webhooksStore', () => {
     if (!openMainPage && !openCreatePage && !hookId) throw new Error('hook id is not defined')
 
     return {
-      name: 'index-typeOrId-projectId-index-index-type-viewId-viewTitle-slugs',
+      name: 'index-typeOrId-projectId-index-index-viewId-viewTitle-slugs',
       params: {
         typeOrId: route.value.params.typeOrId,
         projectId: route.value.params.projectId,
-        type: route.value.params.type,
         viewId: route.value.params.viewId,
         viewTitle: activeView.id,
         slugs: openMainPage ? ['webhook'] : ['webhook', openCreatePage ? 'create' : hookId!],
diff --git a/packages/nc-gui/store/workspace.ts b/packages/nc-gui/store/workspace.ts
index 1837e0c1be..e28df4af63 100644
--- a/packages/nc-gui/store/workspace.ts
+++ b/packages/nc-gui/store/workspace.ts
@@ -2,12 +2,11 @@ import type { ProjectType } from 'nocodb-sdk'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { message } from 'ant-design-vue'
 import { isString } from '@vue/shared'
-import { computed, navigateTo, ref, useCommandPalette, useNuxtApp, useRouter, useTheme } from '#imports'
+import { computed, navigateTo, ref, useCommandPalette, useNuxtApp, useProjects, useRouter, useTheme } from '#imports'
 import type { ThemeConfig } from '#imports'
 
 export const useWorkspace = defineStore('workspaceStore', () => {
   const projectsStore = useProjects()
-  const { clearProjects } = projectsStore
 
   const collaborators = ref<any[] | null>()
 
@@ -25,13 +24,15 @@ export const useWorkspace = defineStore('workspaceStore', () => {
 
   const { $e } = useNuxtApp()
 
-  const { appInfo } = useGlobal()
+  const { appInfo, ncNavigateTo } = useGlobal()
 
-  const { userRoles } = useRoles()
+  const { orgRoles } = useRoles()
 
   const workspaces = ref<Map<string, any>>(new Map())
   const workspacesList = computed<any[]>(() => Array.from(workspaces.value.values()).sort((a, b) => a.updated_at - b.updated_at))
 
+  const isWorkspaceSettingsPageOpened = computed(() => route.value.name === 'index-typeOrId-settings')
+
   const isWorkspaceLoading = ref(true)
   const isCollaboratorsLoading = ref(true)
   const isInvitingCollaborators = ref(false)
@@ -64,27 +65,27 @@ export const useWorkspace = defineStore('workspaceStore', () => {
   /** getters */
   const isWorkspaceCreator = computed(() => {
     // todo: type correction
-    return userRoles.value[Role.OrgLevelCreator]
+    return orgRoles.value?.[Role.OrgLevelCreator]
   })
 
   const isWorkspaceOwner = computed(() => {
     // todo: type correction
-    return userRoles.value[Role.OrgLevelCreator]
+    return orgRoles.value?.[Role.OrgLevelCreator]
   })
 
   const isWorkspaceOwnerOrCreator = computed(() => {
     // todo: type correction
-    return userRoles.value[Role.OrgLevelCreator]
+    return orgRoles.value?.[Role.OrgLevelCreator]
   })
 
   /** actions */
-  const loadWorkspaces = async () => {}
+  const loadWorkspaces = async (_ignoreError = false) => {}
 
   const createWorkspace = async (..._args: any) => {}
 
   const updateWorkspace = async (..._args: any) => {}
 
-  const deleteWorkspace = async (..._args: any) => {}
+  const deleteWorkspace = async (_: string, { skipStateUpdate: __ }: { skipStateUpdate?: boolean } = {}) => {}
 
   const loadCollaborators = async (..._args: any) => {}
 
@@ -96,7 +97,17 @@ export const useWorkspace = defineStore('workspaceStore', () => {
 
   const loadWorkspace = async (..._args: any) => {}
 
-  async function populateWorkspace(..._args: any) {}
+  async function populateWorkspace(..._args: any) {
+    isWorkspaceLoading.value = true
+
+    try {
+      await projectsStore.loadProjects()
+    } catch (e: any) {
+      console.error(e)
+    } finally {
+      isWorkspaceLoading.value = false
+    }
+  }
 
   watch(activePage, async (page) => {
     if (page === 'workspace') {
@@ -187,10 +198,11 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     $e('c:themes:change')
   }
 
-  const clearWorkspaces = () => {
-    clearProjects()
+  async function clearWorkspaces() {
+    await projectsStore.clearProjects()
     workspaces.value.clear()
   }
+
   const upgradeActiveWorkspace = async () => {}
 
   const navigateToWorkspace = async (workspaceId?: string) => {
@@ -199,7 +211,9 @@ export const useWorkspace = defineStore('workspaceStore', () => {
       throw new Error('Workspace not selected')
     }
 
-    await navigateTo(`/ws/${workspaceId}`)
+    await ncNavigateTo({
+      workspaceId,
+    })
   }
 
   const navigateToWorkspaceSettings = async () => {
@@ -245,6 +259,7 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     setLoadingState,
     navigateToWorkspaceSettings,
     lastPopulatedWorkspaceId,
+    isWorkspaceSettingsPageOpened,
   }
 })
 
diff --git a/packages/nc-gui/utils/columnUtils.ts b/packages/nc-gui/utils/columnUtils.ts
index 99e0342179..a2be2c7e60 100644
--- a/packages/nc-gui/utils/columnUtils.ts
+++ b/packages/nc-gui/utils/columnUtils.ts
@@ -29,6 +29,14 @@ const uiTypes = [
     name: UITypes.LongText,
     icon: iconMap.longText,
   },
+  {
+    name: UITypes.Number,
+    icon: iconMap.number,
+  },
+  {
+    name: UITypes.Decimal,
+    icon: iconMap.decimal,
+  },
   {
     name: UITypes.Attachment,
     icon: iconMap.image,
@@ -69,14 +77,6 @@ const uiTypes = [
     name: UITypes.URL,
     icon: iconMap.web,
   },
-  {
-    name: UITypes.Number,
-    icon: iconMap.number,
-  },
-  {
-    name: UITypes.Decimal,
-    icon: iconMap.decimal,
-  },
   {
     name: UITypes.Currency,
     icon: iconMap.currency,
diff --git a/packages/nc-gui/utils/domUtils.ts b/packages/nc-gui/utils/domUtils.ts
index 65065fef03..1e2238a8f4 100644
--- a/packages/nc-gui/utils/domUtils.ts
+++ b/packages/nc-gui/utils/domUtils.ts
@@ -1,6 +1,5 @@
-const isElementInvisible = (el: HTMLElement | Element) => {
-  const rect = el.getBoundingClientRect()
-  return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight
+const isElementInvisible = (elem: HTMLElement) => {
+  return !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length)
 }
 
 export { isElementInvisible }
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 25081859c2..447e9b8fcb 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -36,6 +36,7 @@ import NcCreditCard from '~icons/nc-icons/credit-card'
 import NcLayers from '~icons/nc-icons/layers'
 import NcUsers from '~icons/nc-icons/users'
 import NcCheck from '~icons/nc-icons/check'
+import PlusSquare from '~icons/nc-icons/plus-square'
 
 import PhLayout from '~icons/ph/layout'
 import Copy from '~icons/material-symbols/content-copy-outline'
@@ -58,9 +59,9 @@ import PhExcelThin from '~icons/ph/microsoft-excel-logo-light'
 import VscodeIconsExcelColored from '~icons/vscode-icons/file-type-excel'
 import PhCsvThin from '~icons/ph/file-csv'
 import PhSplitVerticalThin from '~icons/material-symbols/height-rounded'
-import PhDiscordLogoLight from '~icons/ph/discord-logo-light'
-import PhRedditLogoLight from '~icons/ph/reddit-logo-light'
-import PhTwitterLogoLight from '~icons/ph/twitter-logo-light'
+import LogosDiscordIcon from '~icons/logos/discord-icon'
+import LogosRedditIcon from '~icons/logos/reddit-icon'
+import RiTwitterXFill from '~icons/ri/twitter-x-line'
 import PhGithubLogoLight from '~icons/ph/github-logo-light'
 import NcIconsRowHeightMedium from '~icons/nc-icons/row-height-medium'
 import NcIconsRowHeightShort from '~icons/nc-icons/row-height-short'
@@ -117,10 +118,10 @@ import Down from '~icons/material-symbols/keyboard-arrow-down-rounded'
   keyboard: PhKeyboardLight,
   accountPlus: PhUserPlusLight,
   database: PhDatabaseLight,
-  discord: PhDiscordLogoLight,
-  reddit: PhRedditLogoLight,
+  discord: LogosDiscordIcon,
+  reddit: LogosRedditIcon,
   github: PhGithubLogoLight,
-  twitter: PhTwitterLogoLight,
+  twitter: RiTwitterXFill,
   at: PhAtLight,
   plusCircle: PhPlusCircleLight,
   minusCircle: PhMinusCircleLight,
@@ -268,10 +269,10 @@ export const iconMap = {
   keyboard: h('span', { class: 'material-symbols' }, 'keyboard'),
   accountPlus: h('span', { class: 'material-symbols' }, 'person_add'),
   database: MsDatabase,
-  discord: PhDiscordLogoLight,
-  reddit: PhRedditLogoLight,
+  discord: LogosDiscordIcon,
+  reddit: LogosRedditIcon,
   github: PhGithubLogoLight,
-  twitter: PhTwitterLogoLight,
+  twitter: RiTwitterXFill,
   at: h('span', { class: 'material-symbols' }, 'alternate_email'),
   plusCircle: h('span', { class: 'material-symbols' }, 'add_circle'),
   minusCircle: h('span', { class: 'material-symbols' }, 'remove_circle'),
@@ -287,12 +288,14 @@ export const iconMap = {
   upload: h('span', { class: 'material-symbols' }, 'cloud_upload'),
   hook: Phishing,
   erd: h('span', { class: 'material-symbols' }, 'account_tree'),
-  plus: Plus,
+  plus: h('span', { class: 'material-symbols', style: '-webkit-text-stroke: 0.3px' }, 'add'),
+  plusSquare: PlusSquare,
   minus: Minus,
-  copy: h('span', { class: 'material-symbols', style: '-webkit-text-stroke: 0.5px' }, 'content_copy'),
+  help: h('span', { class: 'material-symbols' }, 'help'),
+  copy: h('span', { class: 'material-symbols' }, 'content_copy'),
   duplicate: MaterialDuplicate,
   clipboard: h('span', { class: 'material-symbols' }, 'content_paste'),
-  settings: MdiSettings,
+  settings: h('span', { class: 'material-symbols' }, 'settings'),
   image: h('span', { class: 'material-symbols' }, 'image'),
   datasource: h('span', { class: 'material-symbols' }, 'hard_drive'),
   book: h('span', { class: 'material-symbols' }, 'menu_book'),
@@ -301,6 +304,8 @@ export const iconMap = {
   arrowLeft: Left,
   arrowUp: Up,
   layout: PhLayout,
+  doubleRightArrow: h('span', { class: 'material-symbols', style: '-webkit-text-stroke: 0.5px' }, 'keyboard_double_arrow_right'),
+  doubleLeftArrow: h('span', { class: 'material-symbols', style: '-webkit-text-stroke: 0.5px' }, 'keyboard_double_arrow_left'),
   sidebarMinimise: PhCaretDoubleLeftThin, // h('span', { class: 'material-symbols' }, 'left_panel_close'),
   // threeDotVertical: h('span', { class: 'material-symbols' }, 'more_vert'),
   // threeDotHorizontal: h('span', { class: 'material-symbols' }, 'more_horiz'),
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index c30020902b..49c0fd3363 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -2038,7 +2038,14 @@ export interface ProjectUserReqType {
    */
   email: string;
   /** Project User Role */
-  roles: 'commenter' | 'editor' | 'guest' | 'owner' | 'viewer' | 'creator';
+  roles:
+    | 'no-access'
+    | 'commenter'
+    | 'editor'
+    | 'guest'
+    | 'owner'
+    | 'viewer'
+    | 'creator';
 }
 
 /**
@@ -2394,6 +2401,10 @@ export interface UserInfoType {
   lastname?: string;
   /** The roles of the user */
   roles?: any;
+  /** The project roles of the user */
+  project_roles?: any;
+  /** The workspace roles of the user */
+  workspace_roles?: any;
 }
 
 /**
diff --git a/packages/nocodb-sdk/src/lib/enums.ts b/packages/nocodb-sdk/src/lib/enums.ts
index db1384c1de..c15c3e04a8 100644
--- a/packages/nocodb-sdk/src/lib/enums.ts
+++ b/packages/nocodb-sdk/src/lib/enums.ts
@@ -10,6 +10,7 @@ export enum ProjectRoles {
   EDITOR = 'editor',
   COMMENTER = 'commenter',
   VIEWER = 'viewer',
+  NO_ACCESS = 'no-access',
 }
 
 export enum WorkspaceUserRoles {
@@ -170,10 +171,11 @@ export const RoleLabels = {
   [ProjectRoles.EDITOR]: 'Editor',
   [ProjectRoles.COMMENTER]: 'Commenter',
   [ProjectRoles.VIEWER]: 'Viewer',
+  [ProjectRoles.NO_ACCESS]: 'No Access',
   [OrgUserRoles.SUPER_ADMIN]: 'Super',
   [OrgUserRoles.CREATOR]: 'Creator',
   [OrgUserRoles.VIEWER]: 'Viewer',
-}
+};
 
 export const RoleColors = {
   [WorkspaceUserRoles.OWNER]: 'purple',
@@ -187,9 +189,10 @@ export const RoleColors = {
   [ProjectRoles.COMMENTER]: 'orange',
   [ProjectRoles.VIEWER]: 'yellow',
   [OrgUserRoles.SUPER_ADMIN]: 'purple',
+  [ProjectRoles.NO_ACCESS]: 'red',
   [OrgUserRoles.CREATOR]: 'blue',
   [OrgUserRoles.VIEWER]: 'yellow',
-}
+};
 
 export const OrderedWorkspaceRoles = [
   WorkspaceUserRoles.OWNER,
@@ -197,7 +200,9 @@ export const OrderedWorkspaceRoles = [
   WorkspaceUserRoles.EDITOR,
   WorkspaceUserRoles.COMMENTER,
   WorkspaceUserRoles.VIEWER,
-]
+  // placeholder for no access
+  null,
+];
 
 export const OrderedProjectRoles = [
   ProjectRoles.OWNER,
@@ -205,4 +210,5 @@ export const OrderedProjectRoles = [
   ProjectRoles.EDITOR,
   ProjectRoles.COMMENTER,
   ProjectRoles.VIEWER,
-]
+  ProjectRoles.NO_ACCESS,
+];
diff --git a/packages/nocodb-sdk/src/lib/helperFunctions.ts b/packages/nocodb-sdk/src/lib/helperFunctions.ts
index 5ed58b1372..ffb1a80e6e 100644
--- a/packages/nocodb-sdk/src/lib/helperFunctions.ts
+++ b/packages/nocodb-sdk/src/lib/helperFunctions.ts
@@ -1,4 +1,6 @@
 import UITypes from './UITypes';
+import { OrgUserRoles, ProjectRoles, WorkspaceUserRoles } from './enums';
+
 // import {RelationTypes} from "./globals";
 
 // const systemCols = ['created_at', 'updated_at']
@@ -11,7 +13,7 @@ const getSystemColumnsIds = (columns) => {
 
 const getSystemColumns = (columns) => columns.filter(isSystemColumn) || [];
 
-const isSystemColumn = (col) =>
+const isSystemColumn = (col): boolean =>
   col &&
   (col.uidt === UITypes.ForeignKey ||
     col.column_name === 'created_at' ||
@@ -20,9 +22,38 @@ const isSystemColumn = (col) =>
     (col.pk && col.meta && col.meta.ag) ||
     col.system);
 
+type Roles = Record<
+  OrgUserRoles | ProjectRoles | WorkspaceUserRoles | string,
+  boolean
+>;
+
+const extractRolesObj = (roles: Roles | string[] | string): Roles => {
+  if (!roles) return null;
+
+  if (typeof roles === 'object' && !Array.isArray(roles)) return roles;
+
+  if (typeof roles === 'string') {
+    roles = roles.split(',');
+  }
+
+  if (roles.length === 0) return null;
+
+  return roles.reduce((acc, role) => {
+    acc[role] = true;
+    return acc;
+  }, {});
+};
+
+const stringifyRolesObj = (roles: Roles): string => {
+  const rolesArr = Object.keys(roles).filter((r) => roles[r]);
+  return rolesArr.join(',');
+};
+
 export {
   filterOutSystemColumns,
   getSystemColumnsIds,
   getSystemColumns,
   isSystemColumn,
+  extractRolesObj,
+  stringifyRolesObj,
 };
diff --git a/packages/nocodb/.gitignore b/packages/nocodb/.gitignore
index cf8ddcacbd..2cb3a719d6 100644
--- a/packages/nocodb/.gitignore
+++ b/packages/nocodb/.gitignore
@@ -45,3 +45,5 @@ test_sakila_?.db
 # nc-gui dir is copied for building local docker.
 /docker/main.js
 /docker/nc-gui/
+
+/tests/unit/.env
\ No newline at end of file
diff --git a/packages/nocodb/package-lock.json b/packages/nocodb/package-lock.json
index c52851a0f2..36c3e2a559 100644
--- a/packages/nocodb/package-lock.json
+++ b/packages/nocodb/package-lock.json
@@ -98,7 +98,7 @@
         "ncp": "^2.0.0",
         "nestjs-kafka": "^1.0.6",
         "nestjs-throttler-storage-redis": "^0.3.0",
-        "nocodb-sdk": "0.111.1",
+        "nocodb-sdk": "file:../nocodb-sdk",
         "nodemailer": "^6.4.10",
         "object-hash": "^3.0.0",
         "object-sizeof": "^2.6.1",
@@ -211,7 +211,6 @@
     },
     "../nocodb-sdk": {
       "version": "0.111.1",
-      "extraneous": true,
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "axios": "^0.21.1",
@@ -14383,13 +14382,8 @@
       }
     },
     "node_modules/nocodb-sdk": {
-      "version": "0.111.1",
-      "resolved": "https://registry.npmjs.org/nocodb-sdk/-/nocodb-sdk-0.111.1.tgz",
-      "integrity": "sha512-FS5wyWd3XkPtRkqjO7Hdj5HKsco6/oYc8MPrZ7K/JRmqf0Yf1oydtarkv7h+dDTaNtfcp6Qm56b1JdwJP/EWvg==",
-      "dependencies": {
-        "axios": "^0.21.1",
-        "jsep": "^1.3.6"
-      }
+      "resolved": "../nocodb-sdk",
+      "link": true
     },
     "node_modules/node-abort-controller": {
       "version": "3.1.1",
@@ -30908,12 +30902,24 @@
       "requires": {}
     },
     "nocodb-sdk": {
-      "version": "0.111.1",
-      "resolved": "https://registry.npmjs.org/nocodb-sdk/-/nocodb-sdk-0.111.1.tgz",
-      "integrity": "sha512-FS5wyWd3XkPtRkqjO7Hdj5HKsco6/oYc8MPrZ7K/JRmqf0Yf1oydtarkv7h+dDTaNtfcp6Qm56b1JdwJP/EWvg==",
+      "version": "file:../nocodb-sdk",
       "requires": {
+        "@typescript-eslint/eslint-plugin": "^4.0.1",
+        "@typescript-eslint/parser": "^4.0.1",
         "axios": "^0.21.1",
-        "jsep": "^1.3.6"
+        "cspell": "^4.1.0",
+        "eslint": "^7.8.0",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-plugin-eslint-comments": "^3.2.0",
+        "eslint-plugin-functional": "^3.0.2",
+        "eslint-plugin-import": "^2.22.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "jsep": "^1.3.6",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^2.1.1",
+        "rimraf": "^5.0.1",
+        "tsc-alias": "^1.8.7",
+        "typescript": "^4.7.4"
       }
     },
     "node-abort-controller": {
diff --git a/packages/nocodb/package.json b/packages/nocodb/package.json
index 4ab02a0df1..c804232d97 100644
--- a/packages/nocodb/package.json
+++ b/packages/nocodb/package.json
@@ -131,7 +131,7 @@
     "ncp": "^2.0.0",
     "nestjs-kafka": "^1.0.6",
     "nestjs-throttler-storage-redis": "^0.3.0",
-    "nocodb-sdk": "0.111.1",
+    "nocodb-sdk": "file:../nocodb-sdk",
     "nodemailer": "^6.4.10",
     "object-hash": "^3.0.0",
     "object-sizeof": "^2.6.1",
diff --git a/packages/nocodb/src/Noco.ts b/packages/nocodb/src/Noco.ts
index 7e13f47d67..7d91334bc6 100644
--- a/packages/nocodb/src/Noco.ts
+++ b/packages/nocodb/src/Noco.ts
@@ -21,6 +21,7 @@ import { MetaTable } from '~/utils/globals';
 import Store from '~/models/Store';
 import { NC_LICENSE_KEY } from '~/constants';
 import { AppModule } from '~/app.module';
+import { isEE } from '~/utils';
 
 dotenv.config();
 
@@ -95,7 +96,7 @@ export default class Noco {
 
   public static async loadEEState(): Promise<boolean> {
     try {
-      return (Noco.ee = !!(await Store.get(NC_LICENSE_KEY))?.value);
+      return (Noco.ee = isEE);
     } catch {}
     return (Noco.ee = false);
   }
@@ -124,10 +125,13 @@ export default class Noco {
 
     await nestApp.init();
 
-    const dashboardPath = process.env.NC_DASHBOARD_URL || '/dashboard';
+    const dashboardPath = process.env.NC_DASHBOARD_URL ?? '/dashboard';
     server.use(NcToolGui.expressMiddleware(dashboardPath));
     server.use(express.static(path.join(__dirname, 'public')));
-    server.get('/', (_req, res) => res.redirect(dashboardPath));
+
+    if (dashboardPath !== '/' && dashboardPath !== '') {
+      server.get('/', (_req, res) => res.redirect(dashboardPath));
+    }
 
     this.initSentryErrorHandler(server);
 
diff --git a/packages/nocodb/src/app.config.ts b/packages/nocodb/src/app.config.ts
index 71b6090b2b..0bc0fbb55b 100644
--- a/packages/nocodb/src/app.config.ts
+++ b/packages/nocodb/src/app.config.ts
@@ -16,6 +16,7 @@ const config: AppConfig = {
     disableEmailAuth: !!process.env.NC_DISABLE_EMAIL_AUTH,
   },
   mainSubDomain: process.env.NC_MAIN_SUBDOMAIN ?? 'app',
+  dashboardPath: process.env.NC_DASHBOARD_URL ?? '/dashboard',
 };
 
 export default config;
diff --git a/packages/nocodb/src/cache/RedisCacheMgr.ts b/packages/nocodb/src/cache/RedisCacheMgr.ts
index c079229a63..763ca8c9d7 100644
--- a/packages/nocodb/src/cache/RedisCacheMgr.ts
+++ b/packages/nocodb/src/cache/RedisCacheMgr.ts
@@ -178,7 +178,7 @@ export default class RedisCacheMgr extends CacheMgr {
       let getKey = `${this.prefix}:${scope}:${o.id}`;
       // special case - MODEL_ROLE_VISIBILITY
       if (scope === CacheScope.MODEL_ROLE_VISIBILITY) {
-        getKey = `${this.prefix}:${scope}:${o.id}:${o.role}`;
+        getKey = `${this.prefix}:${scope}:${o.fk_view_id}:${o.role}`;
       }
       // set Get Key
       log(`RedisCacheMgr::setList: setting key ${getKey}`);
diff --git a/packages/nocodb/src/cache/RedisMockCacheMgr.ts b/packages/nocodb/src/cache/RedisMockCacheMgr.ts
index d2105a9979..ebba8eba33 100644
--- a/packages/nocodb/src/cache/RedisMockCacheMgr.ts
+++ b/packages/nocodb/src/cache/RedisMockCacheMgr.ts
@@ -174,7 +174,7 @@ export default class RedisMockCacheMgr extends CacheMgr {
       let getKey = `${this.prefix}:${scope}:${o.id}`;
       // special case - MODEL_ROLE_VISIBILITY
       if (scope === CacheScope.MODEL_ROLE_VISIBILITY) {
-        getKey = `${this.prefix}:${scope}:${o.id}:${o.role}`;
+        getKey = `${this.prefix}:${scope}:${o.fk_view_id}:${o.role}`;
       }
       // set Get Key
       log(`RedisMockCacheMgr::setList: setting key ${getKey}`);
diff --git a/packages/nocodb/src/controllers/api-tokens.controller.ts b/packages/nocodb/src/controllers/api-tokens.controller.ts
index d4e8d39e26..35f8efc50d 100644
--- a/packages/nocodb/src/controllers/api-tokens.controller.ts
+++ b/packages/nocodb/src/controllers/api-tokens.controller.ts
@@ -20,7 +20,7 @@ export class ApiTokensController {
   constructor(private readonly apiTokensService: ApiTokensService) {}
 
   @Get('/api/v1/db/meta/projects/:projectId/api-tokens')
-  @Acl('apiTokenList')
+  @Acl('projectApiTokenList')
   async apiTokenList(@Request() req) {
     return new PagedResponseImpl(
       await this.apiTokensService.apiTokenList({ userId: req['user'].id }),
@@ -29,7 +29,7 @@ export class ApiTokensController {
 
   @Post('/api/v1/db/meta/projects/:projectId/api-tokens')
   @HttpCode(200)
-  @Acl('apiTokenCreate')
+  @Acl('projectApiTokenCreate')
   async apiTokenCreate(@Request() req, @Body() body) {
     return await this.apiTokensService.apiTokenCreate({
       tokenBody: body,
@@ -38,7 +38,7 @@ export class ApiTokensController {
   }
 
   @Delete('/api/v1/db/meta/projects/:projectId/api-tokens/:token')
-  @Acl('apiTokenDelete')
+  @Acl('projectApiTokenDelete')
   async apiTokenDelete(@Request() req, @Param('token') token: string) {
     return await this.apiTokensService.apiTokenDelete({
       token,
diff --git a/packages/nocodb/src/controllers/auth.controller.ts b/packages/nocodb/src/controllers/auth.controller.ts
index 32b3a288ee..8dd2b74ece 100644
--- a/packages/nocodb/src/controllers/auth.controller.ts
+++ b/packages/nocodb/src/controllers/auth.controller.ts
@@ -1,7 +1,6 @@
 import {
   Body,
   Controller,
-  Get,
   HttpCode,
   Post,
   Request,
@@ -10,10 +9,8 @@ import {
 import { AuthGuard } from '@nestjs/passport';
 import { ConfigService } from '@nestjs/config';
 import type { AppConfig } from '~/interface/config';
-import { GlobalGuard } from '~/guards/global/global.guard';
 import { AuthService } from '~/services/auth.service';
 import { NcError } from '~/helpers/catchError';
-import extractRolesObj from '~/utils/extractRolesObj';
 
 export class CreateUserDto {
   readonly username: string;
@@ -35,7 +32,7 @@ export class AuthController {
     if (this.config.get('auth', { infer: true }).disableEmailAuth) {
       NcError.forbidden('Email authentication is disabled');
     }
-    return this.authService.login(req.user);
+    return await this.authService.login(req.user);
   }
 
   @Post('/api/v1/auth/user/signup')
@@ -46,14 +43,4 @@ export class AuthController {
     }
     return await this.authService.signup(createUserDto);
   }
-
-  @UseGuards(GlobalGuard)
-  @Get('/api/v1/auth/user/me')
-  async me(@Request() req) {
-    const user = {
-      ...req.user,
-      roles: extractRolesObj(req.user.roles),
-    };
-    return user;
-  }
 }
diff --git a/packages/nocodb/src/controllers/caches.controller.ts b/packages/nocodb/src/controllers/caches.controller.ts
index cc0eeda981..11ecf6b75c 100644
--- a/packages/nocodb/src/controllers/caches.controller.ts
+++ b/packages/nocodb/src/controllers/caches.controller.ts
@@ -1,4 +1,5 @@
 import { Controller, Delete, Get, UseGuards } from '@nestjs/common';
+import { OrgUserRoles } from 'nocodb-sdk';
 import { CachesService } from '~/services/caches.service';
 import { GlobalGuard } from '~/guards/global/global.guard';
 import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
@@ -9,7 +10,11 @@ export class CachesController {
   constructor(private readonly cachesService: CachesService) {}
 
   @Get('/api/v1/db/meta/cache')
-  @Acl('cacheGet')
+  @Acl('cacheGet', {
+    scope: 'org',
+    allowedRoles: [OrgUserRoles.SUPER_ADMIN],
+    blockApiTokenAccess: true,
+  })
   async cacheGet(_, res) {
     const data = await this.cachesService.cacheGet();
     res.set({
@@ -20,7 +25,11 @@ export class CachesController {
   }
 
   @Delete('/api/v1/db/meta/cache')
-  @Acl('cacheDelete')
+  @Acl('cacheDelete', {
+    scope: 'org',
+    allowedRoles: [OrgUserRoles.SUPER_ADMIN],
+    blockApiTokenAccess: true,
+  })
   async cacheDelete() {
     return await this.cachesService.cacheDelete();
   }
diff --git a/packages/nocodb/src/controllers/data-table.controller.ts b/packages/nocodb/src/controllers/data-table.controller.ts
index 586f0f9306..c7abbcceba 100644
--- a/packages/nocodb/src/controllers/data-table.controller.ts
+++ b/packages/nocodb/src/controllers/data-table.controller.ts
@@ -13,15 +13,12 @@ import {
   UseGuards,
 } from '@nestjs/common';
 import { GlobalGuard } from '~/guards/global/global.guard';
-import {
-  Acl,
-  ExtractIdsMiddleware,
-} from '~/middlewares/extract-ids/extract-ids.middleware';
+import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
 import { DataTableService } from '~/services/data-table.service';
 import { parseHrtimeToMilliSeconds } from '~/helpers';
 
 @Controller()
-@UseGuards(ExtractIdsMiddleware, GlobalGuard)
+@UseGuards(GlobalGuard)
 export class DataTableController {
   constructor(private readonly dataTableService: DataTableService) {}
 
diff --git a/packages/nocodb/src/controllers/org-lcense.controller.ts b/packages/nocodb/src/controllers/org-lcense.controller.ts
index e7bb33d2fa..98cc3f4879 100644
--- a/packages/nocodb/src/controllers/org-lcense.controller.ts
+++ b/packages/nocodb/src/controllers/org-lcense.controller.ts
@@ -18,6 +18,7 @@ export class OrgLcenseController {
 
   @Get('/api/v1/license')
   @Acl('licenseGet', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -28,6 +29,7 @@ export class OrgLcenseController {
   @Post('/api/v1/license')
   @HttpCode(200)
   @Acl('licenseSet', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
diff --git a/packages/nocodb/src/controllers/org-tokens.controller.ts b/packages/nocodb/src/controllers/org-tokens.controller.ts
index 47be6a98ed..4c24f67355 100644
--- a/packages/nocodb/src/controllers/org-tokens.controller.ts
+++ b/packages/nocodb/src/controllers/org-tokens.controller.ts
@@ -26,6 +26,7 @@ export class OrgTokensController {
 
   @Get('/api/v1/tokens')
   @Acl('apiTokenList', {
+    scope: 'org',
     blockApiTokenAccess: true,
   })
   async apiTokenList(@Request() req) {
@@ -41,6 +42,7 @@ export class OrgTokensController {
   @Post('/api/v1/tokens')
   @HttpCode(200)
   @Acl('apiTokenCreate', {
+    scope: 'org',
     blockApiTokenAccess: true,
   })
   async apiTokenCreate(@Request() req, @Body() body: ApiTokenReqType) {
@@ -52,6 +54,7 @@ export class OrgTokensController {
 
   @Delete('/api/v1/tokens/:token')
   @Acl('apiTokenDelete', {
+    scope: 'org',
     // allowedRoles: [OrgUserRoles.SUPER],
     blockApiTokenAccess: true,
   })
diff --git a/packages/nocodb/src/controllers/org-users.controller.ts b/packages/nocodb/src/controllers/org-users.controller.ts
index a9ab18397f..8e53cce5bc 100644
--- a/packages/nocodb/src/controllers/org-users.controller.ts
+++ b/packages/nocodb/src/controllers/org-users.controller.ts
@@ -24,6 +24,7 @@ export class OrgUsersController {
 
   @Get('/api/v1/users')
   @Acl('userList', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -42,6 +43,7 @@ export class OrgUsersController {
 
   @Patch('/api/v1/users/:userId')
   @Acl('userUpdate', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -54,6 +56,7 @@ export class OrgUsersController {
 
   @Delete('/api/v1/users/:userId')
   @Acl('userDelete', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -67,6 +70,7 @@ export class OrgUsersController {
   @Post('/api/v1/users')
   @HttpCode(200)
   @Acl('userAdd', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -82,6 +86,7 @@ export class OrgUsersController {
   @Post('/api/v1/users/settings')
   @HttpCode(200)
   @Acl('userSettings', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -93,6 +98,7 @@ export class OrgUsersController {
   @Post('/api/v1/users/:userId/resend-invite')
   @HttpCode(200)
   @Acl('userInviteResend', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -111,6 +117,7 @@ export class OrgUsersController {
   @Post('/api/v1/users/:userId/generate-reset-url')
   @HttpCode(200)
   @Acl('generateResetUrl', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -125,6 +132,7 @@ export class OrgUsersController {
 
   @Get('/api/v1/app-settings')
   @Acl('appSettingsGet', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
@@ -136,6 +144,7 @@ export class OrgUsersController {
   @Post('/api/v1/app-settings')
   @HttpCode(200)
   @Acl('appSettingsSet', {
+    scope: 'org',
     allowedRoles: [OrgUserRoles.SUPER_ADMIN],
     blockApiTokenAccess: true,
   })
diff --git a/packages/nocodb/src/controllers/plugins.controller.ts b/packages/nocodb/src/controllers/plugins.controller.ts
index fc4f76b131..22eec2a658 100644
--- a/packages/nocodb/src/controllers/plugins.controller.ts
+++ b/packages/nocodb/src/controllers/plugins.controller.ts
@@ -26,32 +26,42 @@ export class PluginsController {
   constructor(private readonly pluginsService: PluginsService) {}
 
   @Get('/api/v1/db/meta/plugins')
-  @Acl('pluginList')
+  @Acl('pluginList', {
+    scope: 'org',
+  })
   async pluginList() {
     return new PagedResponseImpl(await this.pluginsService.pluginList());
   }
 
   @Get('/api/v1/db/meta/plugins/webhook')
-  @Acl('webhookPluginList')
+  @Acl('webhookPluginList', {
+    scope: 'org',
+  })
   async webhookPluginList() {
     return new PagedResponseImpl(await this.pluginsService.webhookPluginList());
   }
 
   @Post('/api/v1/db/meta/plugins/test')
   @HttpCode(200)
-  @Acl('pluginTest')
+  @Acl('pluginTest', {
+    scope: 'org',
+  })
   async pluginTest(@Body() body: any) {
     return await this.pluginsService.pluginTest({ body: body });
   }
 
   @Get('/api/v1/db/meta/plugins/:pluginId')
-  @Acl('pluginRead')
+  @Acl('pluginRead', {
+    scope: 'org',
+  })
   async pluginRead(@Param('pluginId') pluginId: string) {
     return await this.pluginsService.pluginRead({ pluginId: pluginId });
   }
 
   @Patch('/api/v1/db/meta/plugins/:pluginId')
-  @Acl('pluginUpdate')
+  @Acl('pluginUpdate', {
+    scope: 'org',
+  })
   async pluginUpdate(@Body() body: any, @Param('pluginId') pluginId: string) {
     const plugin = await this.pluginsService.pluginUpdate({
       pluginId: pluginId,
@@ -61,7 +71,9 @@ export class PluginsController {
   }
 
   @Get('/api/v1/db/meta/plugins/:pluginTitle/status')
-  @Acl('isPluginActive')
+  @Acl('isPluginActive', {
+    scope: 'org',
+  })
   async isPluginActive(@Param('pluginTitle') pluginTitle: string) {
     return await this.pluginsService.isPluginActive({
       pluginTitle: pluginTitle,
diff --git a/packages/nocodb/src/controllers/projects.controller.ts b/packages/nocodb/src/controllers/projects.controller.ts
index 08db13a845..282630bb38 100644
--- a/packages/nocodb/src/controllers/projects.controller.ts
+++ b/packages/nocodb/src/controllers/projects.controller.ts
@@ -19,17 +19,17 @@ import { PagedResponseImpl } from '~/helpers/PagedResponse';
 import Noco from '~/Noco';
 import { packageVersion } from '~/utils/packageVersion';
 import { ProjectsService } from '~/services/projects.service';
-import {
-  Acl,
-  ExtractIdsMiddleware,
-} from '~/middlewares/extract-ids/extract-ids.middleware';
+import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
+import { Filter } from '~/models';
 
-@UseGuards(ExtractIdsMiddleware, GlobalGuard)
+@UseGuards(GlobalGuard)
 @Controller()
 export class ProjectsController {
   constructor(protected readonly projectsService: ProjectsService) {}
 
-  @Acl('projectList')
+  @Acl('projectList', {
+    scope: 'org',
+  })
   @Get('/api/v1/db/meta/projects/')
   async list(@Query() queryParams: Record<string, any>, @Request() req) {
     const projects = await this.projectsService.projectList({
@@ -42,8 +42,8 @@ export class ProjectsController {
     });
   }
 
-  @Get('/api/v1/db/meta/projects/:projectId/info')
   @Acl('projectInfoGet')
+  @Get('/api/v1/db/meta/projects/:projectId/info')
   async projectInfoGet() {
     return {
       Node: process.version,
@@ -54,9 +54,9 @@ export class ProjectsController {
       PackageVersion: packageVersion,
     };
   }
+
   @Acl('projectGet')
   @Get('/api/v1/db/meta/projects/:projectId')
-  @Acl('projectGet')
   async projectGet(@Param('projectId') projectId: string) {
     const project = await this.projectsService.getProjectWithInfo({
       projectId: projectId,
@@ -66,9 +66,9 @@ export class ProjectsController {
 
     return project;
   }
+
   @Acl('projectUpdate')
   @Patch('/api/v1/db/meta/projects/:projectId')
-  @Acl('projectUpdate')
   async projectUpdate(
     @Param('projectId') projectId: string,
     @Body() body: Record<string, any>,
@@ -85,7 +85,6 @@ export class ProjectsController {
 
   @Acl('projectDelete')
   @Delete('/api/v1/db/meta/projects/:projectId')
-  @Acl('projectDelete')
   async projectDelete(@Param('projectId') projectId: string, @Request() req) {
     const deleted = await this.projectsService.projectSoftDelete({
       projectId,
@@ -95,10 +94,11 @@ export class ProjectsController {
     return deleted;
   }
 
-  @Acl('projectCreate')
+  @Acl('projectCreate', {
+    scope: 'org',
+  })
   @Post('/api/v1/db/meta/projects')
   @HttpCode(200)
-  @Acl('projectCreate')
   async projectCreate(@Body() projectBody: ProjectReqType, @Request() req) {
     const project = await this.projectsService.projectCreate({
       project: projectBody,
@@ -107,4 +107,10 @@ export class ProjectsController {
 
     return project;
   }
+
+  @Acl('hasEmptyOrNullFilters')
+  @Get('/api/v1/db/meta/projects/:projectId/has-empty-or-null-filters')
+  async hasEmptyOrNullFilters(@Param('projectId') projectId: string) {
+    return await Filter.hasEmptyOrNullFilters(projectId);
+  }
 }
diff --git a/packages/nocodb/src/controllers/tables.controller.ts b/packages/nocodb/src/controllers/tables.controller.ts
index 8a1cb93e24..ea10b4d3c3 100644
--- a/packages/nocodb/src/controllers/tables.controller.ts
+++ b/packages/nocodb/src/controllers/tables.controller.ts
@@ -11,12 +11,11 @@ import {
   Request,
   UseGuards,
 } from '@nestjs/common';
-import { TableReqType } from 'nocodb-sdk';
+import { extractRolesObj, TableReqType } from 'nocodb-sdk';
 import { GlobalGuard } from '~/guards/global/global.guard';
 import { TablesService } from '~/services/tables.service';
 import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
 import { PagedResponseImpl } from '~/helpers/PagedResponse';
-import extractRolesObj from '~/utils/extractRolesObj';
 
 @Controller()
 @UseGuards(GlobalGuard)
@@ -39,7 +38,7 @@ export class TablesController {
         projectId,
         baseId,
         includeM2M: includeM2M === 'true',
-        roles: extractRolesObj(req.user.roles),
+        roles: extractRolesObj(req.user.project_roles),
       }),
     );
   }
diff --git a/packages/nocodb/src/controllers/users/users.controller.ts b/packages/nocodb/src/controllers/users/users.controller.ts
index 02a509d911..b02a462f29 100644
--- a/packages/nocodb/src/controllers/users/users.controller.ts
+++ b/packages/nocodb/src/controllers/users/users.controller.ts
@@ -12,24 +12,22 @@ import {
 import { AuthGuard } from '@nestjs/passport';
 import * as ejs from 'ejs';
 import { ConfigService } from '@nestjs/config';
+import { extractRolesObj } from 'nocodb-sdk';
 import type { AppConfig } from '~/interface/config';
 import { GlobalGuard } from '~/guards/global/global.guard';
-import NocoCache from '~/cache/NocoCache';
 import { NcError } from '~/helpers/catchError';
 import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
 import { User } from '~/models';
 import { AppHooksService } from '~/services/app-hooks/app-hooks.service';
 import { randomTokenString, setTokenCookie } from '~/services/users/helpers';
 import { UsersService } from '~/services/users/users.service';
-import extractRolesObj from '~/utils/extractRolesObj';
-import { CacheGetType } from '~/utils/globals';
 
 @Controller()
 export class UsersController {
   constructor(
-    private readonly usersService: UsersService,
-    private readonly appHooksService: AppHooksService,
-    private readonly config: ConfigService<AppConfig>,
+    protected readonly usersService: UsersService,
+    protected readonly appHooksService: AppHooksService,
+    protected readonly config: ConfigService<AppConfig>,
   ) {}
 
   @Post([
@@ -79,7 +77,7 @@ export class UsersController {
       NcError.forbidden('Email authentication is disabled');
     }
     await this.setRefreshToken({ req, res });
-    res.json(this.usersService.login(req.user));
+    res.json(await this.usersService.login(req.user));
   }
 
   @UseGuards(GlobalGuard)
@@ -102,7 +100,7 @@ export class UsersController {
   @UseGuards(AuthGuard('google'))
   async googleSignin(@Request() req, @Response() res) {
     await this.setRefreshToken({ req, res });
-    res.json(this.usersService.login(req.user));
+    res.json(await this.usersService.login(req.user));
   }
 
   @Get('/auth/google')
@@ -117,6 +115,8 @@ export class UsersController {
     const user = {
       ...req.user,
       roles: extractRolesObj(req.user.roles),
+      workspace_roles: extractRolesObj(req.user.workspace_roles),
+      project_roles: extractRolesObj(req.user.project_roles),
     };
     return user;
   }
@@ -127,7 +127,9 @@ export class UsersController {
     '/api/v1/auth/password/change',
   ])
   @UseGuards(GlobalGuard)
-  @Acl('passwordChange')
+  @Acl('passwordChange', {
+    scope: 'org',
+  })
   @HttpCode(200)
   async passwordChange(@Request() req: any): Promise<any> {
     if (!(req as any).isAuthenticated()) {
@@ -253,32 +255,4 @@ export class UsersController {
     });
     setTokenCookie(res, refreshToken);
   }
-
-  /* OpenID Connect auth apis */
-  /* OpenID Connect APIs */
-  @Post('/auth/oidc/genTokenByCode')
-  @UseGuards(AuthGuard('openid'))
-  async oidcSignin(@Request() req, @Response() res) {
-    await this.setRefreshToken({ req, res });
-    res.json(this.usersService.login(req.user));
-  }
-
-  @Get('/auth/oidc')
-  @UseGuards(AuthGuard('openid'))
-  openidAuth() {
-    // openid strategy will take care the request
-  }
-
-  @Get('/auth/oidc/redirect')
-  async redirect(@Request() req, @Response() res) {
-    const key = `oidc:${req.query.state}`;
-    const state = await NocoCache.get(key, CacheGetType.TYPE_OBJECT);
-    if (!state) {
-      NcError.forbidden('Unable to verify authorization request state.');
-    }
-
-    res.redirect(
-      `https://${state.host}/dashboard?code=${req.query.code}&state=${req.query.state}`,
-    );
-  }
 }
diff --git a/packages/nocodb/src/controllers/utils.controller.ts b/packages/nocodb/src/controllers/utils.controller.ts
index f9dba51281..3eb0d7baed 100644
--- a/packages/nocodb/src/controllers/utils.controller.ts
+++ b/packages/nocodb/src/controllers/utils.controller.ts
@@ -37,7 +37,9 @@ export class UtilsController {
 
   @UseGuards(GlobalGuard)
   @Post('/api/v1/db/meta/connection/test')
-  @Acl('testConnection')
+  @Acl('testConnection', {
+    scope: 'org',
+  })
   @HttpCode(200)
   async testConnection(@Body() body: any) {
     return await this.utilsService.testConnection({ body });
diff --git a/packages/nocodb/src/db/BaseModelSqlv2.ts b/packages/nocodb/src/db/BaseModelSqlv2.ts
index 47c4b77a0c..b8c5350c7d 100644
--- a/packages/nocodb/src/db/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/db/BaseModelSqlv2.ts
@@ -2176,7 +2176,7 @@ class BaseModelSqlv2 {
     return res;
   }
 
-  async updateByPk(id, data, trx?, cookie?, _disableOptimization = false) {
+  async updateByPk(id, data, trx?, cookie?, disableOptimization = false) {
     try {
       const updateObj = await this.model.mapAliasToColumn(
         data,
@@ -2679,15 +2679,7 @@ class BaseModelSqlv2 {
           // pk not specified - bypass
           continue;
         }
-        if (!raw)
-          prevData.push(
-            await this.readByPk(
-              pkValues,
-              false,
-              {},
-              { ignoreView: true, getHiddenColumn: true },
-            ),
-          );
+        if (!raw) prevData.push(await this.readByPk(pkValues));
         const wherePk = await this._wherePk(pkValues);
         res.push(wherePk);
         toBeUpdated.push({ d, wherePk });
@@ -2704,12 +2696,7 @@ class BaseModelSqlv2 {
 
       if (!raw) {
         for (const pkValues of updatePkValues) {
-          const oldRecord = await this.readByPk(
-            pkValues,
-            false,
-            {},
-            { ignoreView: true, getHiddenColumn: true },
-          );
+          const oldRecord = await this.readByPk(pkValues);
           if (!oldRecord && throwExceptionIfNotExist)
             NcError.unprocessableEntity(
               `Record with pk ${JSON.stringify(pkValues)} not found`,
@@ -2813,12 +2800,7 @@ class BaseModelSqlv2 {
           continue;
         }
 
-        const oldRecord = await this.readByPk(
-          pkValues,
-          false,
-          {},
-          { ignoreView: true, getHiddenColumn: true },
-        );
+        const oldRecord = await this.readByPk(pkValues);
         if (!oldRecord && throwExceptionIfNotExist)
           NcError.unprocessableEntity(
             `Record with pk ${JSON.stringify(pkValues)} not found`,
@@ -3668,10 +3650,9 @@ class BaseModelSqlv2 {
       const proto = await this.getProto();
 
       const data = await groupedQb;
-
       const result = data?.map((d) => {
         d.__proto__ = proto;
-        return this.convertDateFormat(d);
+        return d;
       });
 
       const groupedResult = result.reduce<Map<string | number | null, any[]>>(
@@ -3679,7 +3660,9 @@ class BaseModelSqlv2 {
           if (!aggObj.has(row[column.title])) {
             aggObj.set(row[column.title], []);
           }
+
           aggObj.get(row[column.title]).push(row);
+
           return aggObj;
         },
         new Map(),
@@ -3932,7 +3915,10 @@ class BaseModelSqlv2 {
         }
       }
 
-      if (this.isPg) {
+      if (
+        this.isPg &&
+        (col.dt === 'timestamp with time zone' || col.dt === 'timestamptz')
+      ) {
         // postgres - timezone already attached to input
         // e.g. 2023-05-11 16:16:51+08:00
         keepLocalTime = false;
diff --git a/packages/nocodb/src/guards/global/global.guard.ts b/packages/nocodb/src/guards/global/global.guard.ts
index 50f09b1622..0d335daae3 100644
--- a/packages/nocodb/src/guards/global/global.guard.ts
+++ b/packages/nocodb/src/guards/global/global.guard.ts
@@ -1,9 +1,9 @@
 import { Injectable } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { lastValueFrom, Observable } from 'rxjs';
+import { extractRolesObj } from 'nocodb-sdk';
 import type { ExecutionContext } from '@nestjs/common';
 import { JwtStrategy } from '~/strategies/jwt.strategy';
-import extractRolesObj from '~/utils/extractRolesObj';
 
 @Injectable()
 export class GlobalGuard extends AuthGuard(['jwt']) {
diff --git a/packages/nocodb/src/helpers/extractProjectIdAndAuthenticate.ts b/packages/nocodb/src/helpers/extractProjectIdAndAuthenticate.ts
deleted file mode 100644
index ac3ee5718e..0000000000
--- a/packages/nocodb/src/helpers/extractProjectIdAndAuthenticate.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { promisify } from 'util';
-import passport from 'passport';
-
-import {
-  Column,
-  Filter,
-  FormViewColumn,
-  GalleryViewColumn,
-  GridViewColumn,
-  Hook,
-  Model,
-  Project,
-  Sort,
-  View,
-} from '~/models';
-
-export default async (req, res, next) => {
-  try {
-    const { params } = req;
-
-    // extract project id based on request path params
-    if (params.projectName) {
-      const project = await Project.getByTitleOrId(params.projectName);
-      req.ncProjectId = project.id;
-      res.locals.project = project;
-    }
-    if (params.projectId) {
-      req.ncProjectId = params.projectId;
-    } else if (req.query.project_id) {
-      req.ncProjectId = req.query.project_id;
-    } else if (
-      params.tableId ||
-      req.query.fk_model_id ||
-      req.body?.fk_model_id
-    ) {
-      const model = await Model.getByIdOrName({
-        id: params.tableId || req.query?.fk_model_id || req.body?.fk_model_id,
-      });
-      req.ncProjectId = model?.project_id;
-    } else if (params.viewId) {
-      const view =
-        (await View.get(params.viewId)) || (await Model.get(params.viewId));
-      req.ncProjectId = view?.project_id;
-    } else if (
-      params.formViewId ||
-      params.gridViewId ||
-      params.kanbanViewId ||
-      params.galleryViewId
-    ) {
-      const view = await View.get(
-        params.formViewId ||
-          params.gridViewId ||
-          params.kanbanViewId ||
-          params.galleryViewId,
-      );
-      req.ncProjectId = view?.project_id;
-    } else if (params.publicDataUuid) {
-      const view = await View.getByUUID(req.params.publicDataUuid);
-      req.ncProjectId = view?.project_id;
-    } else if (params.hookId) {
-      const hook = await Hook.get(params.hookId);
-      req.ncProjectId = hook?.project_id;
-    } else if (params.gridViewColumnId) {
-      const gridViewColumn = await GridViewColumn.get(params.gridViewColumnId);
-      req.ncProjectId = gridViewColumn?.project_id;
-    } else if (params.formViewColumnId) {
-      const formViewColumn = await FormViewColumn.get(params.formViewColumnId);
-      req.ncProjectId = formViewColumn?.project_id;
-    } else if (params.galleryViewColumnId) {
-      const galleryViewColumn = await GalleryViewColumn.get(
-        params.galleryViewColumnId,
-      );
-      req.ncProjectId = galleryViewColumn?.project_id;
-    } else if (params.columnId) {
-      const column = await Column.get({ colId: params.columnId });
-      req.ncProjectId = column?.project_id;
-    } else if (params.filterId) {
-      const filter = await Filter.get(params.filterId);
-      req.ncProjectId = filter?.project_id;
-    } else if (params.filterParentId) {
-      const filter = await Filter.get(params.filterParentId);
-      req.ncProjectId = filter?.project_id;
-    } else if (params.sortId) {
-      const sort = await Sort.get(params.sortId);
-      req.ncProjectId = sort?.project_id;
-    }
-
-    const user = await new Promise((resolve, _reject) => {
-      passport.authenticate('jwt', { session: false }, (_err, user, _info) => {
-        if (user && !req.headers['xc-shared-base-id']) {
-          if (
-            req.path.indexOf('/user/me') === -1 &&
-            req.header('xc-preview') &&
-            /(?:^|,)(?:owner|creator)(?:$|,)/.test(user.roles)
-          ) {
-            return resolve({
-              ...user,
-              isAuthorized: true,
-              roles: req.header('xc-preview'),
-            });
-          }
-
-          return resolve({ ...user, isAuthorized: true });
-        }
-
-        if (req.headers['xc-token']) {
-          passport.authenticate(
-            'authtoken',
-            {
-              session: false,
-              optional: false,
-            } as any,
-            (_err, user, _info) => {
-              // if (_err) return reject(_err);
-              if (user) {
-                return resolve({
-                  ...user,
-                  isAuthorized: true,
-                  roles: user.roles === 'owner' ? 'owner,creator' : user.roles,
-                });
-              } else {
-                resolve({ roles: 'guest' });
-              }
-            },
-          )(req, res, next);
-        } else if (req.headers['xc-shared-base-id']) {
-          passport.authenticate('baseView', {}, (_err, user, _info) => {
-            // if (_err) return reject(_err);
-            if (user) {
-              return resolve({
-                ...user,
-                isAuthorized: true,
-                isPublicBase: true,
-              });
-            } else {
-              resolve({ roles: 'guest' });
-            }
-          })(req, res, next);
-        } else {
-          resolve({ roles: 'guest' });
-        }
-      })(req, res, next);
-    });
-
-    await promisify((req as any).login.bind(req))(user);
-    next();
-  } catch (e) {
-    console.log(e);
-    next(new Error('Internal error'));
-  }
-};
diff --git a/packages/nocodb/src/helpers/ncMetaAclMw.ts b/packages/nocodb/src/helpers/ncMetaAclMw.ts
deleted file mode 100644
index 6e4d5cdc91..0000000000
--- a/packages/nocodb/src/helpers/ncMetaAclMw.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { OrgUserRoles } from 'nocodb-sdk';
-import catchError, { NcError } from './catchError';
-import extractProjectIdAndAuthenticate from './extractProjectIdAndAuthenticate';
-import type { NextFunction, Request, Response } from 'express';
-import projectAcl from '~/utils/projectAcl';
-
-export default function (
-  handlerFn,
-  permissionName,
-  {
-    allowedRoles,
-    blockApiTokenAccess,
-  }: {
-    allowedRoles?: (OrgUserRoles | string)[];
-    blockApiTokenAccess?: boolean;
-  } = {},
-) {
-  return [
-    extractProjectIdAndAuthenticate,
-    catchError(async function authMiddleware(req, _res, next) {
-      const roles = req?.session?.passport?.user?.roles;
-      if (req?.session?.passport?.user?.is_api_token && blockApiTokenAccess) {
-        NcError.forbidden('Not allowed with API token');
-      }
-      if (
-        (!allowedRoles || allowedRoles.some((role) => roles?.[role])) &&
-        !(
-          roles?.creator ||
-          roles?.owner ||
-          roles?.editor ||
-          roles?.viewer ||
-          roles?.commenter ||
-          roles?.[OrgUserRoles.SUPER_ADMIN] ||
-          roles?.[OrgUserRoles.CREATOR] ||
-          roles?.[OrgUserRoles.VIEWER]
-        )
-      ) {
-        NcError.unauthorized('Unauthorized access');
-      }
-      next();
-    }),
-    // @ts-ignore
-    catchError(async function projectAclMiddleware(
-      req: Request<any, any, any, any, any>,
-      _res: Response,
-      next: NextFunction,
-    ) {
-      // if (req['files'] && req.body.json) {
-      //   req.body = JSON.parse(req.body.json);
-      // }
-      // if (req['session']?.passport?.user?.isAuthorized) {
-      //   if (
-      //     req?.body?.project_id &&
-      //     !req['session']?.passport?.user?.isPublicBase &&
-      //     !(await this.xcMeta.isUserHaveAccessToProject(
-      //       req?.body?.project_id,
-      //       req['session']?.passport?.user?.id
-      //     ))
-      //   ) {
-      //     return res
-      //       .status(403)
-      //       .json({ msg: "User doesn't have project access" });
-      //   }
-      //
-      //   if (req?.body?.api) {
-
-      // todo : verify user have access to project or not
-
-      const roles = req['session']?.passport?.user?.roles;
-      const isAllowed =
-        roles &&
-        Object.entries(roles).some(([name, hasRole]) => {
-          return (
-            hasRole &&
-            projectAcl[name] &&
-            (projectAcl[name] === '*' ||
-              (projectAcl[name].exclude &&
-                !projectAcl[name].exclude[permissionName]) ||
-              (projectAcl[name].include &&
-                projectAcl[name].include[permissionName]))
-          );
-        });
-      if (!isAllowed) {
-        NcError.forbidden(
-          `${permissionName} - ${Object.keys(roles).filter(
-            (k) => roles[k],
-          )} : Not allowed`,
-        );
-      }
-      //   }
-      // }
-      next();
-    }),
-    catchError(handlerFn),
-  ];
-}
diff --git a/packages/nocodb/src/interceptors/is-upload-allowed/is-upload-allowed.interceptor.ts b/packages/nocodb/src/interceptors/is-upload-allowed/is-upload-allowed.interceptor.ts
index 1fa38a1a0e..7858b627e2 100644
--- a/packages/nocodb/src/interceptors/is-upload-allowed/is-upload-allowed.interceptor.ts
+++ b/packages/nocodb/src/interceptors/is-upload-allowed/is-upload-allowed.interceptor.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-import { OrgUserRoles, ProjectRoles } from 'nocodb-sdk';
+import { extractRolesObj, OrgUserRoles, ProjectRoles } from 'nocodb-sdk';
 import type { Observable } from 'rxjs';
 import type {
   CallHandler,
@@ -8,7 +8,6 @@ import type {
 } from '@nestjs/common';
 import Noco from '~/Noco';
 import { NcError } from '~/helpers/catchError';
-import extractRolesObj from '~/utils/extractRolesObj';
 import { MetaTable } from '~/utils/globals';
 
 @Injectable()
diff --git a/packages/nocodb/src/interface/config.ts b/packages/nocodb/src/interface/config.ts
index f7d5295601..3d76f559cb 100644
--- a/packages/nocodb/src/interface/config.ts
+++ b/packages/nocodb/src/interface/config.ts
@@ -307,4 +307,5 @@ export interface AppConfig {
     disableEmailAuth: boolean;
   };
   mainSubDomain: string;
+  dashboardPath: string;
 }
diff --git a/packages/nocodb/src/meta/meta.service.ts b/packages/nocodb/src/meta/meta.service.ts
index 726fb2dea7..10487434f9 100644
--- a/packages/nocodb/src/meta/meta.service.ts
+++ b/packages/nocodb/src/meta/meta.service.ts
@@ -102,10 +102,11 @@ export class MetaService {
     data: any,
     ignoreIdGeneration?: boolean,
   ): Promise<any> {
-    const id = data?.id || this.genNanoid(target);
     const insertObj = {
       ...data,
-      ...(ignoreIdGeneration ? {} : { id }),
+      ...(ignoreIdGeneration
+        ? {}
+        : { id: data?.id || (await this.genNanoid(target)) }),
     };
     if (base_id !== null) insertObj.base_id = base_id;
     if (project_id !== null) insertObj.project_id = project_id;
@@ -128,7 +129,7 @@ export class MetaService {
     const insertObj = [];
     const at = this.now();
     for (const d of data) {
-      const id = d?.id || this.genNanoid(target);
+      const id = d?.id || (await this.genNanoid(target));
       const tempObj = {
         ...d,
         ...(ignoreIdGeneration ? {} : { id }),
@@ -145,7 +146,7 @@ export class MetaService {
     return insertObj;
   }
 
-  public genNanoid(target: string) {
+  public async genNanoid(target: string) {
     let prefix;
     switch (target) {
       case MetaTable.PROJECT:
diff --git a/packages/nocodb/src/middlewares/extract-ids/extract-ids.middleware.ts b/packages/nocodb/src/middlewares/extract-ids/extract-ids.middleware.ts
index 6559d4ff44..6dd0c79582 100644
--- a/packages/nocodb/src/middlewares/extract-ids/extract-ids.middleware.ts
+++ b/packages/nocodb/src/middlewares/extract-ids/extract-ids.middleware.ts
@@ -1,6 +1,6 @@
 import { Injectable, SetMetadata, UseInterceptors } from '@nestjs/common';
 import { Reflector } from '@nestjs/core';
-import { OrgUserRoles, ProjectRoles } from 'nocodb-sdk';
+import { extractRolesObj, OrgUserRoles, ProjectRoles } from 'nocodb-sdk';
 import { map } from 'rxjs';
 import type { Observable } from 'rxjs';
 import type {
@@ -23,8 +23,7 @@ import {
   SyncSource,
   View,
 } from '~/models';
-import extractRolesObj from '~/utils/extractRolesObj';
-import projectAcl from '~/utils/projectAcl';
+import rolePermissions from '~/utils/acl';
 import { NcError } from '~/middlewares/catchError';
 
 export const rolesLabel = {
@@ -69,9 +68,9 @@ export class ExtractIdsMiddleware implements NestMiddleware, CanActivate {
       req.ncProjectId = params.projectId;
     } else if (params.dashboardId) {
       req.ncProjectId = params.dashboardId;
-    } else if (params.tableId) {
+    } else if (params.tableId || params.modelId) {
       const model = await Model.getByIdOrName({
-        id: params.tableId,
+        id: params.tableId || params.modelId,
       });
       req.ncProjectId = model?.project_id;
     } else if (params.viewId) {
@@ -180,6 +179,14 @@ export class ExtractIdsMiddleware implements NestMiddleware, CanActivate {
   }
 }
 
+function getUserRoleForScope(user: any, scope: string) {
+  if (scope === 'project' || scope === 'workspace') {
+    return user?.project_roles || user?.workspace_roles;
+  } else if (scope === 'org') {
+    return user?.roles;
+  }
+}
+
 @Injectable()
 export class AclMiddleware implements NestInterceptor {
   constructor(private reflector: Reflector) {}
@@ -200,12 +207,20 @@ export class AclMiddleware implements NestInterceptor {
       'blockApiTokenAccess',
       context.getHandler(),
     );
+    const scope = this.reflector.get<string>('scope', context.getHandler());
 
     const req = context.switchToHttp().getRequest();
-    // const res = context.switchToHttp().getResponse();
-    req.customProperty = 'This is a custom property';
 
-    const roles: Record<string, boolean> = extractRolesObj(req.user?.roles);
+    const userScopeRole =
+      req.user.roles?.[OrgUserRoles.SUPER_ADMIN] === true
+        ? OrgUserRoles.SUPER_ADMIN
+        : getUserRoleForScope(req.user, scope);
+
+    if (!userScopeRole) {
+      NcError.forbidden('Unauthorized access');
+    }
+
+    const roles: Record<string, boolean> = extractRolesObj(userScopeRole);
 
     if (req?.user?.is_api_token && blockApiTokenAccess) {
       NcError.forbidden('Not allowed with API token');
@@ -232,12 +247,12 @@ export class AclMiddleware implements NestInterceptor {
       Object.entries(roles).some(([name, hasRole]) => {
         return (
           hasRole &&
-          projectAcl[name] &&
-          (projectAcl[name] === '*' ||
-            (projectAcl[name].exclude &&
-              !projectAcl[name].exclude[permissionName]) ||
-            (projectAcl[name].include &&
-              projectAcl[name].include[permissionName]))
+          rolePermissions[name] &&
+          (rolePermissions[name] === '*' ||
+            (rolePermissions[name].exclude &&
+              !rolePermissions[name].exclude[permissionName]) ||
+            (rolePermissions[name].include &&
+              rolePermissions[name].include[permissionName]))
         );
       });
     if (!isAllowed) {
@@ -256,40 +271,22 @@ export class AclMiddleware implements NestInterceptor {
   }
 }
 
-export const UseAclMiddleware =
-  ({
-    permissionName,
-    allowedRoles,
-    blockApiTokenAccess,
-  }: {
-    permissionName: string;
-    allowedRoles?: (OrgUserRoles | string)[];
-    blockApiTokenAccess?: boolean;
-  }) =>
-  (target: any, key?: string, descriptor?: PropertyDescriptor) => {
-    SetMetadata('permission', permissionName)(target, key, descriptor);
-    SetMetadata('allowedRoles', allowedRoles)(target, key, descriptor);
-    SetMetadata('blockApiTokenAccess', blockApiTokenAccess)(
-      target,
-      key,
-      descriptor,
-    );
-
-    UseInterceptors(AclMiddleware)(target, key, descriptor);
-  };
 export const Acl =
   (
     permissionName: string,
     {
+      scope = 'project',
       allowedRoles,
       blockApiTokenAccess,
     }: {
+      scope?: string;
       allowedRoles?: (OrgUserRoles | string)[];
       blockApiTokenAccess?: boolean;
     } = {},
   ) =>
   (target: any, key?: string, descriptor?: PropertyDescriptor) => {
     SetMetadata('permission', permissionName)(target, key, descriptor);
+    SetMetadata('scope', scope)(target, key, descriptor);
     SetMetadata('allowedRoles', allowedRoles)(target, key, descriptor);
     SetMetadata('blockApiTokenAccess', blockApiTokenAccess)(
       target,
diff --git a/packages/nocodb/src/middlewares/gui/gui.middleware.ts b/packages/nocodb/src/middlewares/gui/gui.middleware.ts
index 4267c45315..c7b3658c3d 100644
--- a/packages/nocodb/src/middlewares/gui/gui.middleware.ts
+++ b/packages/nocodb/src/middlewares/gui/gui.middleware.ts
@@ -1,11 +1,17 @@
 import { Injectable } from '@nestjs/common';
 import NcToolGui from 'nc-lib-gui';
+import { ConfigService } from '@nestjs/config';
 import type { NestMiddleware } from '@nestjs/common';
+import type { AppConfig } from '~/interface/config';
 
 @Injectable()
 export class GuiMiddleware implements NestMiddleware {
+  constructor(private configService: ConfigService<AppConfig>) {}
+
   use(req: any, res: any, next: () => void) {
-    const dashboardPath = process.env.NC_DASHBOARD_URL || '/dashboard';
+    const dashboardPath = this.configService.get('dashboardPath', {
+      infer: true,
+    });
     NcToolGui.expressMiddleware(dashboardPath)(req, res, next);
   }
 }
diff --git a/packages/nocodb/src/models/ModelRoleVisibility.ts b/packages/nocodb/src/models/ModelRoleVisibility.ts
index d0bfbad80f..67890f85f6 100644
--- a/packages/nocodb/src/models/ModelRoleVisibility.ts
+++ b/packages/nocodb/src/models/ModelRoleVisibility.ts
@@ -147,17 +147,21 @@ export default class ModelRoleVisibility implements ModelRoleVisibilityType {
       insertObj.base_id = view.base_id;
     }
 
-    await ncMeta.metaInsert2(
+    const result = await ncMeta.metaInsert2(
       null,
       null,
       MetaTable.MODEL_ROLE_VISIBILITY,
       insertObj,
     );
 
+    const key = `${CacheScope.MODEL_ROLE_VISIBILITY}:${body.fk_view_id}:${body.role}`;
+
+    insertObj.id = result.id;
+
     await NocoCache.appendToList(
       CacheScope.MODEL_ROLE_VISIBILITY,
       [insertObj.project_id],
-      `${CacheScope.MODEL_ROLE_VISIBILITY}:${body.fk_view_id}:${body.role}`,
+      key,
     );
 
     return this.get(
diff --git a/packages/nocodb/src/models/Project.ts b/packages/nocodb/src/models/Project.ts
index 0a3280e27f..0dfc649ee5 100644
--- a/packages/nocodb/src/models/Project.ts
+++ b/packages/nocodb/src/models/Project.ts
@@ -37,7 +37,7 @@ export default class Project implements ProjectType {
     Object.assign(this, project);
   }
 
-  protected static castType(project: Project): Project {
+  public static castType(project: Project): Project {
     return project && new Project(project);
   }
 
@@ -115,7 +115,13 @@ export default class Project implements ProjectType {
     projectList = projectList.filter(
       (p) => p.deleted === 0 || p.deleted === false || p.deleted === null,
     );
-    return projectList.map((m) => this.castType(m));
+    const castedProjectList = projectList.map((m) => this.castType(m));
+
+    await Promise.all(
+      castedProjectList.map((project) => project.getBases(ncMeta)),
+    );
+
+    return castedProjectList;
   }
 
   // @ts-ignore
diff --git a/packages/nocodb/src/models/ProjectUser.ts b/packages/nocodb/src/models/ProjectUser.ts
index 7c364a530c..2f0ef8ed2d 100644
--- a/packages/nocodb/src/models/ProjectUser.ts
+++ b/packages/nocodb/src/models/ProjectUser.ts
@@ -1,6 +1,7 @@
 import { ProjectRoles } from 'nocodb-sdk';
 import type { ProjectType } from 'nocodb-sdk';
 import User from '~/models/User';
+import Project from '~/models/Project';
 import {
   // CacheDelDirection,
   CacheGetType,
@@ -336,6 +337,12 @@ export default class ProjectUser {
         this.where(`${MetaTable.PROJECT}.deleted`, false).orWhereNull(
           `${MetaTable.PROJECT}.deleted`,
         );
+      })
+      .where(function () {
+        this.whereNull(`${MetaTable.PROJECT_USERS}.roles`).orWhereNot(
+          `${MetaTable.PROJECT_USERS}.roles`,
+          ProjectRoles.NO_ACCESS,
+        );
       });
 
     // filter starred projects
@@ -372,7 +379,15 @@ export default class ProjectUser {
       await NocoCache.setList(CacheScope.USER_PROJECT, [userId], projectList);
     }
 
-    return projectList.filter((p) => !params?.type || p.type === params.type);
+    const castedProjectList = projectList
+      .filter((p) => !params?.type || p.type === params.type)
+      .map((m) => Project.castType(m));
+
+    await Promise.all(
+      castedProjectList.map((project) => project.getBases(ncMeta)),
+    );
+
+    return castedProjectList;
   }
 
   static async updateOrInsert(
diff --git a/packages/nocodb/src/models/User.ts b/packages/nocodb/src/models/User.ts
index c37ca84ba2..9bd97b3fe5 100644
--- a/packages/nocodb/src/models/User.ts
+++ b/packages/nocodb/src/models/User.ts
@@ -1,9 +1,11 @@
-import type { UserType } from 'nocodb-sdk';
+import { extractRolesObj, type UserType } from 'nocodb-sdk';
 import { NcError } from '~/helpers/catchError';
 import Noco from '~/Noco';
 import { extractProps } from '~/helpers/extractProps';
 import NocoCache from '~/cache/NocoCache';
 import { CacheGetType, CacheScope, MetaTable } from '~/utils/globals';
+import { ProjectUser } from '~/models';
+import { sanitiseUserObj } from '~/utils';
 
 export default class User implements UserType {
   id: string;
@@ -240,4 +242,41 @@ export default class User implements UserType {
 
     return await ncMeta.metaDelete(null, null, MetaTable.USERS, userId);
   }
+
+  static async getWithRoles(
+    userId: string,
+    args: {
+      user?: User;
+      projectId?: string;
+    },
+    ncMeta = Noco.ncMeta,
+  ) {
+    const user = args.user ?? (await this.get(userId, ncMeta));
+
+    if (!user) NcError.badRequest('User not found');
+
+    const projectRoles = await new Promise((resolve) => {
+      if (args.projectId) {
+        ProjectUser.get(args.projectId, user.id).then(async (projectUser) => {
+          let roles = projectUser?.roles;
+          roles = roles === 'owner' ? 'owner,creator' : roles;
+          // + (user.roles ? `,${user.roles}` : '');
+          if (roles) {
+            resolve(extractRolesObj(roles));
+          } else {
+            resolve(null);
+          }
+          // todo: cache
+        });
+      } else {
+        resolve(null);
+      }
+    });
+
+    return {
+      ...sanitiseUserObj(user),
+      roles: user.roles ? extractRolesObj(user.roles) : null,
+      project_roles: projectRoles ? projectRoles : null,
+    } as any;
+  }
 }
diff --git a/packages/nocodb/src/modules/global/init-meta-service.provider.ts b/packages/nocodb/src/modules/global/init-meta-service.provider.ts
index 6fa704c4d4..203ad26f00 100644
--- a/packages/nocodb/src/modules/global/init-meta-service.provider.ts
+++ b/packages/nocodb/src/modules/global/init-meta-service.provider.ts
@@ -27,7 +27,7 @@ export const InitMetaServiceProvider: Provider = {
     const config = await NcConfig.createByEnv();
 
     // set version
-    process.env.NC_VERSION = '0108003';
+    process.env.NC_VERSION = '0111002';
 
     // init cache
     await NocoCache.init();
diff --git a/packages/nocodb/src/modules/jobs/jobs/at-import/at-import.controller.ts b/packages/nocodb/src/modules/jobs/jobs/at-import/at-import.controller.ts
index 445cf8e218..48f118adf4 100644
--- a/packages/nocodb/src/modules/jobs/jobs/at-import/at-import.controller.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/at-import/at-import.controller.ts
@@ -7,16 +7,13 @@ import {
   UseGuards,
 } from '@nestjs/common';
 import { GlobalGuard } from '~/guards/global/global.guard';
-import {
-  Acl,
-  ExtractIdsMiddleware,
-} from '~/middlewares/extract-ids/extract-ids.middleware';
+import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
 import { SyncSource } from '~/models';
 import { NcError } from '~/helpers/catchError';
 import { JobTypes } from '~/interface/Jobs';
 
 @Controller()
-@UseGuards(ExtractIdsMiddleware, GlobalGuard)
+@UseGuards(GlobalGuard)
 export class AtImportController {
   constructor(@Inject('JobsService') private readonly jobsService) {}
 
diff --git a/packages/nocodb/src/modules/jobs/jobs/at-import/at-import.processor.ts b/packages/nocodb/src/modules/jobs/jobs/at-import/at-import.processor.ts
index c6c2c2b4e2..94fff49840 100644
--- a/packages/nocodb/src/modules/jobs/jobs/at-import/at-import.processor.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/at-import/at-import.processor.ts
@@ -9,14 +9,13 @@ import utc from 'dayjs/plugin/utc';
 import tinycolor from 'tinycolor2';
 import { Process, Processor } from '@nestjs/bull';
 import { Job } from 'bull';
-import { isLinksOrLTAR } from 'nocodb-sdk';
+import { extractRolesObj, isLinksOrLTAR } from 'nocodb-sdk';
 import debug from 'debug';
 import { JobsLogService } from '../jobs-log.service';
 import FetchAT from './helpers/fetchAT';
 import { importData, importLTARData } from './helpers/readAndProcessData';
 import EntityMap from './helpers/EntityMap';
 import type { UserType } from 'nocodb-sdk';
-import extractRolesObj from '~/utils/extractRolesObj';
 import { AttachmentsService } from '~/services/attachments.service';
 import { ColumnsService } from '~/services/columns.service';
 import { BulkDataAliasService } from '~/services/bulk-data-alias.service';
@@ -114,7 +113,7 @@ export class AtImportProcessor {
     await sMapEM.init();
     const userRole = syncDB.user.roles
       .split(',')
-      .reduce((rolesObj, role) => ({ [role]: true, ...rolesObj }), {});
+      .reduce((rolesObj, role) => ({ [role]: true, ...rolesObj }));
 
     const sMap = {
       // static mapping records between aTblId && ncId
@@ -667,7 +666,12 @@ export class AtImportProcessor {
         const view = { list: [] };
         view['list'] = await this.viewsService.viewList({
           tableId: table.id,
-          user: { roles: userRole },
+          user: {
+            roles: userRole,
+            project_roles: {
+              owner: true,
+            },
+          },
         });
         recordPerfStats(_perfStart, 'dbView.list');
 
@@ -746,7 +750,7 @@ export class AtImportProcessor {
               const srcTbl: any =
                 await this.tablesService.getTableWithAccessibleViews({
                   tableId: srcTableId,
-                  user: syncDB.user,
+                  user: { ...syncDB.user, project_roles: { owner: true } },
                 });
               recordPerfStats(_perfStart, 'dbTable.read');
 
@@ -830,7 +834,7 @@ export class AtImportProcessor {
               const childTblSchema: any =
                 await this.tablesService.getTableWithAccessibleViews({
                   tableId: ncLinkMappingTable[x].nc.childId,
-                  user: syncDB.user,
+                  user: { ...syncDB.user, project_roles: { owner: true } },
                 });
               recordPerfStats(_perfStart, 'dbTable.read');
 
@@ -838,7 +842,7 @@ export class AtImportProcessor {
               const parentTblSchema: any =
                 await this.tablesService.getTableWithAccessibleViews({
                   tableId: ncLinkMappingTable[x].nc.parentId,
-                  user: syncDB.user,
+                  user: { ...syncDB.user, project_roles: { owner: true } },
                 });
               recordPerfStats(_perfStart, 'dbTable.read');
 
@@ -1735,7 +1739,12 @@ export class AtImportProcessor {
           const viewList = { list: [] };
           viewList['list'] = await this.viewsService.viewList({
             tableId: tblId,
-            user: { roles: userRole },
+            user: {
+              roles: userRole,
+              project_roles: {
+                owner: true,
+              },
+            } as any,
           });
           recordPerfStats(_perfStart, 'dbView.list');
 
@@ -1855,7 +1864,7 @@ export class AtImportProcessor {
       const _perfStart = recordPerfStart();
       const ncTbl: any = await this.tablesService.getTableWithAccessibleViews({
         tableId: tblId,
-        user: syncDB.user,
+        user: { ...syncDB.user, project_roles: { owner: true } },
       });
       recordPerfStats(_perfStart, 'dbTable.read');
 
@@ -2329,7 +2338,7 @@ export class AtImportProcessor {
           ncTblList['list'] = await this.tablesService.getAccessibleTables({
             projectId: ncCreatedProjectSchema.id,
             baseId: syncDB.baseId,
-            roles: userRole,
+            roles: { ...userRole, owner: true },
           });
           recordPerfStats(_perfStart, 'base.tableList');
 
@@ -2349,7 +2358,7 @@ export class AtImportProcessor {
             const ncTbl: any =
               await this.tablesService.getTableWithAccessibleViews({
                 tableId: ncTblList.list[i].id,
-                user: syncDB.user,
+                user: { ...syncDB.user, project_roles: { owner: true } },
               });
             recordPerfStats(_perfStart, 'dbTable.read');
 
@@ -2384,7 +2393,7 @@ export class AtImportProcessor {
             const ncTbl: any =
               await this.tablesService.getTableWithAccessibleViews({
                 tableId: ncTblList.list[i].id,
-                user: syncDB.user,
+                user: { ...syncDB.user, project_roles: { owner: true } },
               });
 
             rtc.data.nestedLinks += await importLTARData({
diff --git a/packages/nocodb/src/modules/jobs/jobs/export-import/duplicate.controller.ts b/packages/nocodb/src/modules/jobs/jobs/export-import/duplicate.controller.ts
index 84636cb9c9..b049de0232 100644
--- a/packages/nocodb/src/modules/jobs/jobs/export-import/duplicate.controller.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/export-import/duplicate.controller.ts
@@ -10,17 +10,14 @@ import {
 } from '@nestjs/common';
 import { ProjectStatus } from 'nocodb-sdk';
 import { GlobalGuard } from '~/guards/global/global.guard';
-import {
-  Acl,
-  ExtractIdsMiddleware,
-} from '~/middlewares/extract-ids/extract-ids.middleware';
+import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
 import { ProjectsService } from '~/services/projects.service';
 import { Base, Model, Project } from '~/models';
 import { generateUniqueName } from '~/helpers/exportImportHelpers';
 import { JobTypes } from '~/interface/Jobs';
 
 @Controller()
-@UseGuards(ExtractIdsMiddleware, GlobalGuard)
+@UseGuards(GlobalGuard)
 export class DuplicateController {
   constructor(
     @Inject('JobsService') private readonly jobsService,
diff --git a/packages/nocodb/src/modules/metas/metas.module.ts b/packages/nocodb/src/modules/metas/metas.module.ts
index 92a0ccc849..944f868826 100644
--- a/packages/nocodb/src/modules/metas/metas.module.ts
+++ b/packages/nocodb/src/modules/metas/metas.module.ts
@@ -34,7 +34,6 @@ import { TablesController } from '~/controllers/tables.controller';
 import { UtilsController } from '~/controllers/utils.controller';
 import { ViewColumnsController } from '~/controllers/view-columns.controller';
 import { ViewsController } from '~/controllers/views.controller';
-import { ExtractIdsMiddleware } from '~/middlewares/extract-ids/extract-ids.middleware';
 import { ApiTokensService } from '~/services/api-tokens.service';
 import { AttachmentsService } from '~/services/attachments.service';
 import { AuditsService } from '~/services/audits.service';
@@ -151,7 +150,6 @@ export const metaModuleMetadata = {
     PluginsService,
     ProjectUsersService,
     ProjectsService,
-    ExtractIdsMiddleware,
     PublicMetasService,
     ViewsService,
     ViewColumnsService,
diff --git a/packages/nocodb/src/nocobuild.ts b/packages/nocodb/src/nocobuild.ts
index 6fe4bf2618..6e9f4ccb81 100644
--- a/packages/nocodb/src/nocobuild.ts
+++ b/packages/nocodb/src/nocobuild.ts
@@ -7,7 +7,7 @@ export default async function (app = express()) {
   const nestApp = await NestFactory.create(AppModule);
   await nestApp.init();
 
-  const dashboardPath = process.env.NC_DASHBOARD_URL || '/dashboard';
+  const dashboardPath = process.env.NC_DASHBOARD_URL ?? '/dashboard';
   app.use(NcToolGui.expressMiddleware(dashboardPath));
   app.get('/', (_req, res) => res.redirect(dashboardPath));
   app.use(nestApp.getHttpAdapter().getInstance());
diff --git a/packages/nocodb/src/run/cloud.ts b/packages/nocodb/src/run/cloud.ts
index 6c4e0d4583..50883ded16 100644
--- a/packages/nocodb/src/run/cloud.ts
+++ b/packages/nocodb/src/run/cloud.ts
@@ -1,3 +1,7 @@
+// todo: move to env
+// defining at the top to override the default value in app.config.ts
+process.env.NC_DASHBOARD_URL = process.env.NC_DASHBOARD_URL ?? '/';
+
 import path from 'path';
 import cors from 'cors';
 import express from 'express';
@@ -7,7 +11,10 @@ import Noco from '~/Noco';
 const server = express();
 server.enable('trust proxy');
 server.use(cors());
-server.use('/dashboard', express.static(path.join(__dirname, 'nc-gui')));
+server.use(
+  process.env.NC_DASHBOARD_URL ?? '/dashboard',
+  express.static(path.join(__dirname, 'nc-gui')),
+);
 server.set('view engine', 'ejs');
 
 (async () => {
diff --git a/packages/nocodb/src/run/local.ts b/packages/nocodb/src/run/local.ts
index 6c4e0d4583..3f8286e89d 100644
--- a/packages/nocodb/src/run/local.ts
+++ b/packages/nocodb/src/run/local.ts
@@ -7,7 +7,10 @@ import Noco from '~/Noco';
 const server = express();
 server.enable('trust proxy');
 server.use(cors());
-server.use('/dashboard', express.static(path.join(__dirname, 'nc-gui')));
+server.use(
+  process.env.NC_DASHBOARD_URL ?? '/dashboard',
+  express.static(path.join(__dirname, 'nc-gui')),
+);
 server.set('view engine', 'ejs');
 
 (async () => {
diff --git a/packages/nocodb/src/schema/swagger.json b/packages/nocodb/src/schema/swagger.json
index a7b7a5050d..78b2bc4781 100644
--- a/packages/nocodb/src/schema/swagger.json
+++ b/packages/nocodb/src/schema/swagger.json
@@ -20162,6 +20162,7 @@
           },
           "roles": {
             "enum": [
+              "no-access",
               "commenter",
               "editor",
               "guest",
@@ -21676,6 +21677,12 @@
           },
           "roles": {
             "description": "The roles of the user"
+          },
+          "project_roles": {
+            "description": "The project roles of the user"
+          },
+          "workspace_roles": {
+            "description": "The workspace roles of the user"
           }
         },
         "title": "User Info Model",
diff --git a/packages/nocodb/src/services/api-docs/swagger/getPaths.ts b/packages/nocodb/src/services/api-docs/swagger/getPaths.ts
index b05fb83f33..25c7e70cbb 100644
--- a/packages/nocodb/src/services/api-docs/swagger/getPaths.ts
+++ b/packages/nocodb/src/services/api-docs/swagger/getPaths.ts
@@ -23,7 +23,7 @@ export default async function getPaths(
     type: model.type,
     orgs: 'v1',
     columns,
-    projectName: project.title,
+    projectName: project.id,
   });
 
   for (const { view, columns: viewColumns } of views) {
@@ -38,7 +38,7 @@ export default async function getPaths(
         type: model.type,
         orgs: 'v1',
         columns: swaggerColumns,
-        projectName: project.title,
+        projectName: project.id,
       }),
     );
   }
diff --git a/packages/nocodb/src/services/api-tokens.service.ts b/packages/nocodb/src/services/api-tokens.service.ts
index 815ac3a77a..fae3626bb7 100644
--- a/packages/nocodb/src/services/api-tokens.service.ts
+++ b/packages/nocodb/src/services/api-tokens.service.ts
@@ -1,11 +1,10 @@
 import { Injectable } from '@nestjs/common';
-import { AppEvents, OrgUserRoles } from 'nocodb-sdk';
+import { AppEvents, extractRolesObj, OrgUserRoles } from 'nocodb-sdk';
 import type { User } from '~/models';
 import type { ApiTokenReqType } from 'nocodb-sdk';
 import { AppHooksService } from '~/services/app-hooks/app-hooks.service';
 import { NcError } from '~/helpers/catchError';
 import { validatePayload } from '~/helpers';
-import extractRolesObj from '~/utils/extractRolesObj';
 import { ApiToken } from '~/models';
 
 @Injectable()
diff --git a/packages/nocodb/src/services/auth.service.ts b/packages/nocodb/src/services/auth.service.ts
index 99e0254662..e1e4682a36 100644
--- a/packages/nocodb/src/services/auth.service.ts
+++ b/packages/nocodb/src/services/auth.service.ts
@@ -141,7 +141,7 @@ export class AuthService {
     //
     // user = (param.req as any).user;
 
-    return this.login(user);
+    return await this.login(user);
   }
 
   async registerNewUserIfAllowed({
diff --git a/packages/nocodb/src/services/org-tokens-ee.service.ts b/packages/nocodb/src/services/org-tokens-ee.service.ts
index 1ec97bd883..f85674e59e 100644
--- a/packages/nocodb/src/services/org-tokens-ee.service.ts
+++ b/packages/nocodb/src/services/org-tokens-ee.service.ts
@@ -1,9 +1,8 @@
 import { Injectable } from '@nestjs/common';
-import { OrgUserRoles } from 'nocodb-sdk';
+import { extractRolesObj, OrgUserRoles } from 'nocodb-sdk';
 import type { UserType } from 'nocodb-sdk';
 import { PagedResponseImpl } from '~/helpers/PagedResponse';
 import { ApiToken } from '~/models';
-import extractRolesObj from '~/utils/extractRolesObj';
 
 @Injectable()
 export class OrgTokensEeService {
diff --git a/packages/nocodb/src/services/org-tokens.service.ts b/packages/nocodb/src/services/org-tokens.service.ts
index f931b25551..d7b3ccbdb1 100644
--- a/packages/nocodb/src/services/org-tokens.service.ts
+++ b/packages/nocodb/src/services/org-tokens.service.ts
@@ -1,12 +1,11 @@
 import { Injectable } from '@nestjs/common';
-import { AppEvents, OrgUserRoles } from 'nocodb-sdk';
+import { AppEvents, extractRolesObj, OrgUserRoles } from 'nocodb-sdk';
 import type { User } from '~/models';
 import type { ApiTokenReqType } from 'nocodb-sdk';
 import { AppHooksService } from '~/services/app-hooks/app-hooks.service';
 import { validatePayload } from '~/helpers';
 import { NcError } from '~/helpers/catchError';
 import { PagedResponseImpl } from '~/helpers/PagedResponse';
-import extractRolesObj from '~/utils/extractRolesObj';
 import { ApiToken } from '~/models';
 
 @Injectable()
diff --git a/packages/nocodb/src/services/org-users.service.ts b/packages/nocodb/src/services/org-users.service.ts
index e0cfc046c5..e1408f42e3 100644
--- a/packages/nocodb/src/services/org-users.service.ts
+++ b/packages/nocodb/src/services/org-users.service.ts
@@ -1,5 +1,10 @@
 import { Injectable } from '@nestjs/common';
-import { AppEvents, OrgUserRoles, PluginCategory } from 'nocodb-sdk';
+import {
+  AppEvents,
+  extractRolesObj,
+  OrgUserRoles,
+  PluginCategory,
+} from 'nocodb-sdk';
 import { v4 as uuidv4 } from 'uuid';
 import validator from 'validator';
 import type { UserType } from 'nocodb-sdk';
@@ -13,7 +18,6 @@ import { randomTokenString } from '~/helpers/stringHelpers';
 import { ProjectUser, Store, SyncSource, User } from '~/models';
 
 import Noco from '~/Noco';
-import extractRolesObj from '~/utils/extractRolesObj';
 import { MetaTable } from '~/utils/globals';
 
 @Injectable()
diff --git a/packages/nocodb/src/services/project-users/project-users.service.ts b/packages/nocodb/src/services/project-users/project-users.service.ts
index b7a39efa50..43e5ee06c4 100644
--- a/packages/nocodb/src/services/project-users/project-users.service.ts
+++ b/packages/nocodb/src/services/project-users/project-users.service.ts
@@ -1,5 +1,10 @@
 import { Injectable } from '@nestjs/common';
-import { AppEvents, OrgUserRoles, PluginCategory } from 'nocodb-sdk';
+import {
+  AppEvents,
+  OrgUserRoles,
+  PluginCategory,
+  ProjectRoles,
+} from 'nocodb-sdk';
 import { v4 as uuidv4 } from 'uuid';
 import * as ejs from 'ejs';
 import validator from 'validator';
@@ -16,6 +21,7 @@ import { Project, ProjectUser, User } from '~/models';
 
 import { CacheGetType, CacheScope, MetaTable } from '~/utils/globals';
 import { extractProps } from '~/helpers/extractProps';
+import { getProjectRolePower } from '~/utils/roleHelper';
 
 @Injectable()
 export class ProjectUsersService {
@@ -42,18 +48,16 @@ export class ProjectUsersService {
     projectUser: ProjectUserReqType;
     req: any;
   }): Promise<any> {
+    validatePayload(
+      'swagger.json#/components/schemas/ProjectUserReq',
+      param.projectUser,
+    );
+
     const emails = (param.projectUser.email || '')
       .toLowerCase()
       .split(/\s*,\s*/)
       .map((v) => v.trim());
 
-    emails.forEach((email) => {
-      validatePayload('swagger.json#/components/schemas/ProjectUserReq', {
-        ...param.projectUser,
-        email,
-      });
-    });
-
     // check for invalid emails
     const invalidEmails = emails.filter((v) => !validator.isEmail(v));
     if (!emails.length) {
@@ -195,25 +199,43 @@ export class ProjectUsersService {
       return NcError.badRequest('Invalid project id');
     }
 
+    if (param.projectUser.roles.includes(ProjectRoles.OWNER)) {
+      NcError.badRequest('Owner cannot be updated');
+    }
+
     if (
-      param.req.session?.passport?.user?.roles?.owner &&
-      param.req.session?.passport?.user?.id === param.userId &&
-      param.projectUser.roles.indexOf('owner') === -1
+      ![
+        ProjectRoles.CREATOR,
+        ProjectRoles.EDITOR,
+        ProjectRoles.COMMENTER,
+        ProjectRoles.VIEWER,
+        ProjectRoles.NO_ACCESS,
+      ].includes(param.projectUser.roles as ProjectRoles)
     ) {
-      NcError.badRequest("Super admin can't remove Super role themselves");
+      NcError.badRequest('Invalid role');
     }
+
     const user = await User.get(param.userId);
 
     if (!user) {
       NcError.badRequest(`User with id '${param.userId}' doesn't exist`);
     }
 
-    // todo: handle roles which contains super
+    const targetUser = await User.getWithRoles(param.userId, {
+      user,
+      projectId: param.projectId,
+    });
+
+    if (!targetUser) {
+      NcError.badRequest(
+        `User with id '${param.userId}' doesn't exist in this project`,
+      );
+    }
+
     if (
-      !param.req.session?.passport?.user?.roles?.owner &&
-      param.projectUser.roles.indexOf('owner') > -1
+      getProjectRolePower(targetUser) >= getProjectRolePower(param.req.user)
     ) {
-      NcError.forbidden('Insufficient privilege to add super admin role.');
+      NcError.badRequest(`Insufficient privilege to update user`);
     }
 
     await ProjectUser.updateRoles(
@@ -243,11 +265,11 @@ export class ProjectUsersService {
   }): Promise<any> {
     const project_id = param.projectId;
 
-    if (param.req.session?.passport?.user?.id === param.userId) {
+    if (param.req.user?.id === param.userId) {
       NcError.badRequest("Admin can't delete themselves!");
     }
 
-    if (!param.req.session?.passport?.user?.roles?.owner) {
+    if (!param.req.user?.roles?.owner) {
       const user = await User.get(param.userId);
       if (user.roles?.split(',').includes('super'))
         NcError.forbidden(
@@ -338,7 +360,7 @@ export class ProjectUsersService {
               .split(',')
               .map((r) => r.replace(/^./, (m) => m.toUpperCase()))
               .join(', '),
-            adminEmail: req.session?.passport?.user?.email,
+            adminEmail: req.user?.email,
           }),
         });
         return true;
diff --git a/packages/nocodb/src/services/projects.service.ts b/packages/nocodb/src/services/projects.service.ts
index 4027c4ce76..cd0a97f2ed 100644
--- a/packages/nocodb/src/services/projects.service.ts
+++ b/packages/nocodb/src/services/projects.service.ts
@@ -2,7 +2,12 @@ import { promisify } from 'util';
 import { Injectable } from '@nestjs/common';
 import * as DOMPurify from 'isomorphic-dompurify';
 import { customAlphabet } from 'nanoid';
-import { AppEvents, OrgUserRoles, SqlUiFactory } from 'nocodb-sdk';
+import {
+  AppEvents,
+  extractRolesObj,
+  OrgUserRoles,
+  SqlUiFactory,
+} from 'nocodb-sdk';
 import type {
   ProjectReqType,
   ProjectUpdateReqType,
@@ -15,7 +20,6 @@ import { extractPropsAndSanitize } from '~/helpers/extractProps';
 import syncMigration from '~/helpers/syncMigration';
 import { Project, ProjectUser } from '~/models';
 import Noco from '~/Noco';
-import extractRolesObj from '~/utils/extractRolesObj';
 import { getToolDir } from '~/utils/nc-config';
 import { MetaService } from '~/meta/meta.service';
 import { MetaTable } from '~/utils/globals';
@@ -121,7 +125,7 @@ export class ProjectsService {
       param.project,
     );
 
-    const projectId = this.metaService.genNanoid(MetaTable.PROJECT);
+    const projectId = await this.metaService.genNanoid(MetaTable.PROJECT);
 
     const projectBody: ProjectReqType & Record<string, any> = param.project;
     projectBody.id = projectId;
diff --git a/packages/nocodb/src/services/tables.service.ts b/packages/nocodb/src/services/tables.service.ts
index f0d1711d94..f4a5250edd 100644
--- a/packages/nocodb/src/services/tables.service.ts
+++ b/packages/nocodb/src/services/tables.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common';
 import DOMPurify from 'isomorphic-dompurify';
-import { isLinksOrLTAR, isVirtualCol, ModelTypes, UITypes } from 'nocodb-sdk';
+import { isLinksOrLTAR, isVirtualCol, ModelTypes, ProjectRoles, UITypes } from 'nocodb-sdk'
 import { AppEvents } from 'nocodb-sdk';
 import { MetaDiffsService } from './meta-diffs.service';
 import { ColumnsService } from './columns.service';
@@ -328,7 +328,7 @@ export class TablesService {
     const tableViewMapping = viewList.reduce((o, view: any) => {
       o[view.fk_model_id] = o[view.fk_model_id] || 0;
       if (
-        Object.keys(param.roles).some(
+        Object.values(ProjectRoles).some(
           (role) => param.roles[role] && !view.disabled[role],
         )
       ) {
diff --git a/packages/nocodb/src/services/telemetry.service.ts b/packages/nocodb/src/services/telemetry.service.ts
index 48096b1b7e..29887b400d 100644
--- a/packages/nocodb/src/services/telemetry.service.ts
+++ b/packages/nocodb/src/services/telemetry.service.ts
@@ -19,9 +19,7 @@ export class TelemetryService {
     evt_type: string;
     [key: string]: any;
   }) {
-    if (event === '$pageview') T.page({ ...payload, event });
-    else {
-      T.event({ ...payload, event });
-    }
+    if (event === '$pageview') T.page({ ...payload, event_name: event });
+    else T.event({ ...payload, event_name: event });
   }
 }
diff --git a/packages/nocodb/src/services/users/users.service.ts b/packages/nocodb/src/services/users/users.service.ts
index e883858a74..ec478ff98d 100644
--- a/packages/nocodb/src/services/users/users.service.ts
+++ b/packages/nocodb/src/services/users/users.service.ts
@@ -6,7 +6,6 @@ import { isEmail } from 'validator';
 import { T } from 'nc-help';
 import * as ejs from 'ejs';
 import bcrypt from 'bcryptjs';
-import { genJwt, setTokenCookie } from './helpers';
 import type {
   PasswordChangeReqType,
   PasswordForgotReqType,
@@ -14,6 +13,7 @@ import type {
   SignUpReqType,
   UserType,
 } from 'nocodb-sdk';
+import { genJwt, setTokenCookie } from '~/services/users/helpers';
 import { NC_APP_SETTINGS } from '~/constants';
 import { AppHooksService } from '~/services/app-hooks/app-hooks.service';
 import { validatePayload } from '~/helpers';
@@ -488,10 +488,10 @@ export class UsersService {
       user,
     });
 
-    return { ...this.login(user), createdProject };
+    return { ...(await this.login(user)), createdProject };
   }
 
-  login(user: UserType) {
+  async login(user: UserType & { provider?: string }) {
     this.appHooksService.emit(AppEvents.USER_SIGNIN, {
       user,
     });
@@ -502,7 +502,7 @@ export class UsersService {
 
   async signOut(param: { res: any; req: any }) {
     try {
-      param.res.clearCookie('refresh_token');
+      this.clearCookie(param);
       const user = (param.req as any).user;
       if (user?.id) {
         await User.update(user.id, {
@@ -516,6 +516,10 @@ export class UsersService {
     }
   }
 
+  protected clearCookie(param: { res: any; req: any }) {
+    param.res.clearCookie('refresh_token');
+  }
+
   private async createDefaultProject(user: User) {
     // create new project for user
     const project = await this.projectsService.createDefaultProject({
diff --git a/packages/nocodb/src/services/utils.service.ts b/packages/nocodb/src/services/utils.service.ts
index 46e9c20eac..6b179c9497 100644
--- a/packages/nocodb/src/services/utils.service.ts
+++ b/packages/nocodb/src/services/utils.service.ts
@@ -405,6 +405,7 @@ export class UtilsService {
         infer: true,
       }),
       mainSubDomain: this.configService.get('mainSubDomain', { infer: true }),
+      dashboardPath: this.configService.get('dashboardPath', { infer: true }),
     };
 
     return result;
diff --git a/packages/nocodb/src/services/views.service.ts b/packages/nocodb/src/services/views.service.ts
index ef201c7499..c021e37c70 100644
--- a/packages/nocodb/src/services/views.service.ts
+++ b/packages/nocodb/src/services/views.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-import { AppEvents } from 'nocodb-sdk';
+import { AppEvents, ProjectRoles } from 'nocodb-sdk';
 import type {
   SharedViewReqType,
   UserType,
@@ -70,6 +70,7 @@ export class ViewsService {
     tableId: string;
     user: {
       roles: Record<string, boolean>;
+      project_roles: Record<string, boolean>;
     };
   }) {
     const model = await Model.get(param.tableId);
@@ -82,8 +83,9 @@ export class ViewsService {
     // todo: user roles
     //await View.list(param.tableId)
     const filteredViewList = viewList.filter((view: any) => {
-      return Object.keys(param?.user?.roles).some(
-        (role) => param?.user?.roles[role] && !view.disabled[role],
+      return Object.values(ProjectRoles).some(
+        (role) =>
+          param?.user?.['project_roles']?.[role] && !view.disabled[role],
       );
     });
 
diff --git a/packages/nocodb/src/strategies/base-view.strategy/base-view.strategy.ts b/packages/nocodb/src/strategies/base-view.strategy/base-view.strategy.ts
index 7ff70d27c4..5e4330393a 100644
--- a/packages/nocodb/src/strategies/base-view.strategy/base-view.strategy.ts
+++ b/packages/nocodb/src/strategies/base-view.strategy/base-view.strategy.ts
@@ -1,8 +1,8 @@
 import { Injectable, UnauthorizedException } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
 import { Strategy } from 'passport-custom';
+import { extractRolesObj } from 'nocodb-sdk';
 import { Project } from '~/models';
-import extractRolesObj from '~/utils/extractRolesObj';
 
 @Injectable()
 export class BaseViewStrategy extends PassportStrategy(Strategy, 'base-view') {
@@ -22,6 +22,7 @@ export class BaseViewStrategy extends PassportStrategy(Strategy, 'base-view') {
 
         user = {
           roles: extractRolesObj(sharedProject?.roles),
+          project_roles: extractRolesObj(sharedProject?.roles),
         };
       }
 
diff --git a/packages/nocodb/src/strategies/jwt.strategy.ts b/packages/nocodb/src/strategies/jwt.strategy.ts
index 4bd143c070..d308696df5 100644
--- a/packages/nocodb/src/strategies/jwt.strategy.ts
+++ b/packages/nocodb/src/strategies/jwt.strategy.ts
@@ -1,11 +1,8 @@
 import { Injectable } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
 import { Strategy } from 'passport-jwt';
-import { OrgUserRoles } from 'nocodb-sdk';
-import { ProjectUser, User } from '~/models';
+import { User } from '~/models';
 import { UsersService } from '~/services/users/users.service';
-import extractRolesObj from '~/utils/extractRolesObj';
-import { sanitiseUserObj } from '~/utils';
 
 @Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy) {
@@ -19,21 +16,6 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
   async validate(req, jwtPayload) {
     if (!jwtPayload?.email) return jwtPayload;
 
-    // todo: improve this, caching
-    if (
-      req.ncProjectId &&
-      extractRolesObj(jwtPayload.roles)[OrgUserRoles.SUPER_ADMIN]
-    ) {
-      const user = await User.getByEmail(jwtPayload?.email);
-
-      // remove unnecessary data from user
-
-      return {
-        ...user,
-        roles: `owner,creator,${OrgUserRoles.SUPER_ADMIN}`,
-      };
-    }
-
     const user = await User.getByEmail(jwtPayload?.email);
 
     if (
@@ -44,28 +26,9 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
       throw new Error('Token Expired. Please login again.');
     }
 
-    const projectRoles = await new Promise((resolve) => {
-      if (req.ncProjectId) {
-        ProjectUser.get(req.ncProjectId, user.id).then(async (projectUser) => {
-          let roles = projectUser?.roles;
-          roles = roles === 'owner' ? 'owner,creator' : roles;
-          // + (user.roles ? `,${user.roles}` : '');
-          resolve(roles);
-          // todo: cache
-        });
-      } else {
-        resolve(null);
-      }
+    return User.getWithRoles(user.id, {
+      user,
+      projectId: req.ncProjectId,
     });
-
-    return {
-      ...sanitiseUserObj(user),
-      roles: extractRolesObj(
-        [user.roles, projectRoles].filter(Boolean).join(','),
-      ),
-      projectRoles: projectRoles
-        ? extractRolesObj((projectRoles as any)?.split(',').filter(Boolean))
-        : null,
-    };
   }
 }
diff --git a/packages/nocodb/src/strategies/local.strategy.ts b/packages/nocodb/src/strategies/local.strategy.ts
index 587e96b852..0ac466c1b8 100644
--- a/packages/nocodb/src/strategies/local.strategy.ts
+++ b/packages/nocodb/src/strategies/local.strategy.ts
@@ -2,10 +2,10 @@ import { Strategy } from 'passport-local';
 import { PassportStrategy } from '@nestjs/passport';
 import { Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
+import { extractRolesObj } from 'nocodb-sdk';
 import type { AppConfig } from '~/interface/config';
 import { AuthService } from '~/services/auth.service';
 import { NcError } from '~/helpers/catchError';
-import extractRolesObj from '~/utils/extractRolesObj';
 
 @Injectable()
 export class LocalStrategy extends PassportStrategy(Strategy) {
diff --git a/packages/nocodb/src/utils/acl.ts b/packages/nocodb/src/utils/acl.ts
new file mode 100644
index 0000000000..3bce1cdbef
--- /dev/null
+++ b/packages/nocodb/src/utils/acl.ts
@@ -0,0 +1,402 @@
+import { OrgUserRoles, ProjectRoles } from 'nocodb-sdk';
+
+const roleScopes = {
+  org: [OrgUserRoles.VIEWER, OrgUserRoles.CREATOR],
+  project: [
+    ProjectRoles.VIEWER,
+    ProjectRoles.COMMENTER,
+    ProjectRoles.EDITOR,
+    ProjectRoles.CREATOR,
+    ProjectRoles.OWNER,
+  ],
+};
+
+const permissionScopes = {
+  org: [
+    // API Tokens
+    'apiTokenList',
+    'apiTokenCreate',
+    'apiTokenDelete',
+
+    // Project
+    'projectList',
+    'projectCreate',
+
+    // User
+    'passwordChange',
+
+    // Plugin
+    'isPluginActive',
+    'pluginList',
+    'pluginTest',
+    'pluginRead',
+    'pluginUpdate',
+
+    // Misc
+    'commandPalette',
+    'testConnection',
+    'genericGPT',
+
+    // Cache
+    'cacheGet',
+    'cacheDelete',
+
+    // TODO: add ACL with project scope
+    'upload',
+    'uploadViaURL',
+  ],
+  project: [
+    'formViewGet',
+    'projectGet',
+    'tableGet',
+    'dataList',
+    'dataRead',
+    'dataExist',
+    'dataFindOne',
+    'dataGroupBy',
+    'exportCsv',
+    'exportExcel',
+    'sortList',
+    'filterList',
+    'projectInfoGet',
+    'projectUserMetaUpdate',
+    'galleryViewGet',
+    'kanbanViewGet',
+    'gridViewUpdate',
+    'groupedDataList',
+    'mmList',
+    'hmList',
+    'commentRow',
+    'projectCost',
+    'tableList',
+    'viewList',
+    'functionList',
+    'sequenceList',
+    'procedureList',
+    'columnList',
+    'triggerList',
+    'relationList',
+    'relationListAll',
+    'indexList',
+    'list',
+    'dataCount',
+    'swaggerJson',
+    'commentList',
+    'commentsCount',
+    'hideAllColumns',
+    'showAllColumns',
+    'auditRowUpdate',
+    'dataUpdate',
+    'dataDelete',
+    'dataInsert',
+    'viewColumnUpdate',
+    'sortCreate',
+    'sortUpdate',
+    'sortDelete',
+    'filterCreate',
+    'filterUpdate',
+    'filterDelete',
+    'filterGet',
+    'filterChildrenRead',
+    'mmExcludedList',
+    'hmExcludedList',
+    'btExcludedList',
+    'gridColumnUpdate',
+    'bulkDataInsert',
+    'bulkDataUpdate',
+    'bulkDataUpdateAll',
+    'bulkDataDelete',
+    'bulkDataDeleteAll',
+    'relationDataRemove',
+    'relationDataAdd',
+
+    // Project API Tokens
+    'projectApiTokenList',
+    'projectApiTokenCreate',
+    'projectApiTokenDelete',
+  ],
+};
+
+const rolePermissions:
+  | Record<
+      Exclude<OrgUserRoles, OrgUserRoles.SUPER_ADMIN> | ProjectRoles | 'guest',
+      { include?: Record<string, boolean>; exclude?: Record<string, boolean> }
+    >
+  | Record<OrgUserRoles.SUPER_ADMIN, string> = {
+  guest: {},
+  [OrgUserRoles.SUPER_ADMIN]: '*',
+
+  [ProjectRoles.VIEWER]: {
+    include: {
+      formViewGet: true,
+      // project
+      projectGet: true,
+      //table
+      tableGet: true,
+      // data
+      dataList: true,
+      dataRead: true,
+      dataExist: true,
+      dataFindOne: true,
+      dataGroupBy: true,
+
+      exportCsv: true,
+      exportExcel: true,
+
+      // sort & filter
+      sortList: true,
+      filterList: true,
+      projectInfoGet: true,
+      projectUserMetaUpdate: true,
+
+      galleryViewGet: true,
+      kanbanViewGet: true,
+      groupedDataList: true,
+
+      mmList: true,
+      hmList: true,
+
+      projectCost: true,
+
+      tableList: true,
+      viewList: true,
+      functionList: true,
+      sequenceList: true,
+      procedureList: true,
+      columnList: true,
+      triggerList: true,
+      relationList: true,
+      relationListAll: true,
+      indexList: true,
+      list: true,
+      dataCount: true,
+      swaggerJson: true,
+    },
+  },
+  [ProjectRoles.COMMENTER]: {
+    include: {
+      commentList: true,
+      commentsCount: true,
+      commentRow: true,
+    },
+  },
+  [ProjectRoles.EDITOR]: {
+    include: {
+      hideAllColumns: true,
+      showAllColumns: true,
+      auditRowUpdate: true,
+      dataUpdate: true,
+      dataDelete: true,
+      dataInsert: true,
+      viewColumnUpdate: true,
+      gridViewUpdate: true,
+      sortCreate: true,
+      sortUpdate: true,
+      sortDelete: true,
+      filterCreate: true,
+      filterUpdate: true,
+      filterDelete: true,
+      filterGet: true,
+      filterChildrenRead: true,
+      mmExcludedList: true,
+      hmExcludedList: true,
+      btExcludedList: true,
+      gridColumnUpdate: true,
+      bulkDataInsert: true,
+      bulkDataUpdate: true,
+      bulkDataUpdateAll: true,
+      bulkDataDelete: true,
+      bulkDataDeleteAll: true,
+      relationDataRemove: true,
+      relationDataAdd: true,
+      // TODO add ACL with project scope
+      // upload: true,
+      // uploadViaURL: true,
+    },
+  },
+  [ProjectRoles.CREATOR]: {
+    exclude: {
+      projectDelete: true,
+    },
+  },
+  [ProjectRoles.OWNER]: {
+    exclude: {
+      pluginList: true,
+      pluginTest: true,
+      pluginRead: true,
+      pluginUpdate: true,
+      isPluginActive: true,
+      createBase: true,
+    },
+  },
+  [OrgUserRoles.VIEWER]: {
+    include: {
+      apiTokenList: true,
+      apiTokenCreate: true,
+      apiTokenDelete: true,
+      passwordChange: true,
+      projectList: true,
+      testConnection: true,
+    },
+  },
+  [OrgUserRoles.CREATOR]: {
+    include: {
+      upload: true,
+      uploadViaURL: true,
+      isPluginActive: true,
+      projectCreate: true,
+    },
+  },
+};
+
+// VALIDATIONS
+
+// validate no permission shared between scopes
+{
+  const scopePermissions = {};
+  const duplicates = [];
+  Object.keys(permissionScopes).forEach((scope) => {
+    permissionScopes[scope].forEach((perm) => {
+      if (scopePermissions[perm]) {
+        duplicates.push(perm);
+      } else {
+        scopePermissions[perm] = true;
+      }
+    });
+    if (duplicates.length) {
+      throw new Error(
+        `Duplicate permissions found in scope ${scope}. Please remove duplicate permissions: ${duplicates.join(
+          ', ',
+        )}`,
+      );
+    }
+  });
+}
+
+// validate no duplicate permissions within same scope
+/*
+  We inherit include permissions from previous roles in the same scope (role order)
+  We inherit exclude permissions from previous roles in the same scope (reverse role order)
+  To determine role order, we use `roleScopes` object
+*/
+Object.values(roleScopes).forEach((roles) => {
+  const scopePermissions = {};
+  const duplicates = [];
+  roles.forEach((role) => {
+    const perms =
+      rolePermissions[role].include || rolePermissions[role].exclude || {};
+    Object.keys(perms).forEach((perm) => {
+      if (scopePermissions[perm]) {
+        duplicates.push(perm);
+      }
+      scopePermissions[perm] = true;
+    });
+  });
+  if (duplicates.length) {
+    throw new Error(
+      `Duplicate permissions found in roles ${roles.join(
+        ', ',
+      )}. Please remove duplicate permissions: ${duplicates.join(', ')}`,
+    );
+  }
+});
+
+// validate permission scopes are valid
+Object.entries(rolePermissions).forEach(([role, permissions]) => {
+  if (permissions === '*') return;
+  if (role === 'guest') return;
+
+  let roleScope = null;
+
+  Object.entries(roleScopes).forEach(([scope, roles]) => {
+    if ((roles as any).includes(role)) {
+      roleScope = scope;
+    }
+  });
+
+  if (!roleScope) {
+    throw new Error(
+      `Role ${role} does not belong to any scope, please assign it to a scope`,
+    );
+  }
+
+  const scopePermissions = permissionScopes[roleScope];
+
+  if (!scopePermissions) {
+    throw new Error(
+      `Scope ${roleScope} does not exist, please create it in permissionScopes`,
+    );
+  }
+
+  const mismatchedPermissions = [];
+
+  Object.keys(permissions.include || {}).forEach((perm) => {
+    if (!scopePermissions.includes(perm)) {
+      mismatchedPermissions.push(perm);
+    }
+  });
+
+  if (mismatchedPermissions.length) {
+    throw new Error(
+      `Role ${role} has permissions that do not belong to its scope ${roleScope}. Please remove or add these permissions: ${mismatchedPermissions.join(
+        ', ',
+      )}`,
+    );
+  }
+});
+
+// inherit include permissions within scope (role order)
+Object.values(roleScopes).forEach((roles) => {
+  let roleIndex = 0;
+  for (const role of roles) {
+    if (roleIndex === 0) {
+      roleIndex++;
+      continue;
+    }
+
+    if (rolePermissions[role] === '*') continue;
+    if (rolePermissions[role].include) {
+      Object.assign(
+        rolePermissions[role].include,
+        rolePermissions[roles[roleIndex - 1]].include,
+      );
+    }
+
+    roleIndex++;
+  }
+});
+
+// inherit exclude permissions within scope (reverse role order)
+Object.values(roleScopes).forEach((roles) => {
+  const reversedRoles = [...roles].reverse();
+  let roleIndex = 0;
+  for (const role of reversedRoles) {
+    if (roleIndex === 0) {
+      roleIndex++;
+      continue;
+    }
+
+    if (rolePermissions[role] === '*') continue;
+
+    if (rolePermissions[role].exclude) {
+      Object.assign(
+        rolePermissions[role].exclude,
+        rolePermissions[roles[roleIndex - 1]].exclude,
+      );
+    }
+
+    roleIndex++;
+  }
+});
+
+// validate include and exclude can't exist at the same time
+Object.values(rolePermissions).forEach((role) => {
+  if (role === '*') return;
+  if (role.include && role.exclude) {
+    throw new Error(
+      `Role ${role} has both include and exclude permissions. Please remove one of them`,
+    );
+  }
+});
+
+export default rolePermissions;
diff --git a/packages/nocodb/src/utils/extractRolesObj.ts b/packages/nocodb/src/utils/extractRolesObj.ts
deleted file mode 100644
index 6d7a8d6ed7..0000000000
--- a/packages/nocodb/src/utils/extractRolesObj.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default (roles) => {
-  if (!roles) return {};
-
-  if (typeof roles === 'object' && !Array.isArray(roles)) return roles;
-
-  if (typeof roles === 'string') {
-    roles = roles.split(',');
-  }
-  return roles.reduce((acc, role) => {
-    acc[role] = true;
-    return acc;
-  }, {});
-};
diff --git a/packages/nocodb/src/utils/index.ts b/packages/nocodb/src/utils/index.ts
index a6d7432f34..894ad0af25 100644
--- a/packages/nocodb/src/utils/index.ts
+++ b/packages/nocodb/src/utils/index.ts
@@ -1,2 +1,4 @@
 export * from './dataUtils';
 export * from './sanitiseUserObj';
+
+export const isEE = false;
diff --git a/packages/nocodb/src/utils/nc-config/NcConfig.ts b/packages/nocodb/src/utils/nc-config/NcConfig.ts
index 5f715d1bb2..6063f9486d 100644
--- a/packages/nocodb/src/utils/nc-config/NcConfig.ts
+++ b/packages/nocodb/src/utils/nc-config/NcConfig.ts
@@ -146,7 +146,7 @@ export class NcConfig {
       port: process.env.NC_PORT,
       tryMode: !!process.env.NC_TRY,
       worker: !!process.env.NC_WORKER,
-      dashboardPath: process.env.NC_DASHBOARD_PATH ?? '/dashboard',
+      dashboardPath: process.env.NC_DASHBOARD_URL ?? '/dashboard',
       publicUrl: process.env.NC_PUBLIC_URL,
     });
   }
diff --git a/packages/nocodb/src/utils/projectAcl.ts b/packages/nocodb/src/utils/projectAcl.ts
deleted file mode 100644
index 1642d8f9c7..0000000000
--- a/packages/nocodb/src/utils/projectAcl.ts
+++ /dev/null
@@ -1,373 +0,0 @@
-import { OrgUserRoles } from 'nocodb-sdk';
-
-const viewerPermissions = {
-  include: {
-    formViewGet: true,
-    passwordChange: true,
-    // project
-    projectGet: true,
-    //table
-    tableGet: true,
-    // data
-    dataList: true,
-    dataRead: true,
-    dataExist: true,
-    dataFindOne: true,
-    dataGroupBy: true,
-    // commentsCount: process.env.NC_CLOUD !== 'true',
-    exportCsv: true,
-    exportExcel: true,
-
-    // sort & filter
-    sortList: true,
-    filterList: true,
-    projectInfoGet: true,
-    projectUserMetaUpdate: true,
-
-    galleryViewGet: true,
-    kanbanViewGet: true,
-    groupedDataList: true,
-
-    mmList: true,
-    hmList: true,
-    // commentList: process.env.NC_CLOUD !== 'true',
-    commentRow: false,
-
-    xcTableAndViewList: true,
-    xcVirtualTableList: true,
-    projectList: true,
-    projectCost: true,
-    PROJECT_READ_BY_WEB: true,
-
-    tableXcModelGet: true,
-    xcRelationList: true,
-    tableList: true,
-    viewList: true,
-    functionList: true,
-    sequenceList: true,
-    procedureList: true,
-    columnList: true,
-    triggerList: true,
-    relationList: true,
-    relationListAll: true,
-    indexList: true,
-    list: true,
-    xcExportAsCsv: true,
-    dataCount: true,
-    swaggerJson: true,
-
-    commandPalette: true,
-
-    // Docs
-    pageGet: true,
-    pageList: true,
-    pageSearch: true,
-    pageParents: true,
-    pagePaginate: true,
-    trackEvents: true,
-  },
-};
-const rolePermissions = {
-  owner: {
-    exclude: {
-      pluginList: true,
-      pluginTest: true,
-      pluginRead: true,
-      pluginUpdate: true,
-      isPluginActive: true,
-      createBase: true,
-    },
-  },
-  creator: {
-    exclude: {
-      pluginList: true,
-      pluginTest: true,
-      pluginRead: true,
-      pluginUpdate: true,
-      isPluginActive: true,
-      projectDelete: true,
-      createBase: true,
-    },
-  },
-  guest: {},
-  editor: {
-    include: {
-      hideAllColumns: true,
-      showAllColumns: true,
-      auditRowUpdate: true,
-      passwordChange: true,
-      // new permissions
-      // project
-      projectGet: true,
-      projectList: true,
-      projectCost: true,
-      projectUserMetaUpdate: true,
-      //table
-      tableList: true,
-      tableGet: true,
-
-      // data
-      dataList: true,
-      dataUpdate: true,
-      dataDelete: true,
-      dataInsert: true,
-      dataRead: true,
-      dataExist: true,
-      dataFindOne: true,
-      dataGroupBy: true,
-      commentsCount: true,
-      exportCsv: true,
-      exportExcel: true,
-
-      viewList: true,
-      columnList: true,
-      viewColumnUpdate: true,
-      gridViewUpdate: true,
-
-      sortList: true,
-      sortCreate: true,
-      sortUpdate: true,
-      sortDelete: true,
-
-      filterList: true,
-      filterCreate: true,
-      filterUpdate: true,
-      filterDelete: true,
-      filterGet: true,
-      filterChildrenRead: true,
-      filterChildrenList: true,
-
-      mmList: true,
-      hmList: true,
-      mmExcludedList: true,
-      hmExcludedList: true,
-      btExcludedList: true,
-      commentList: true,
-      commentRow: true,
-
-      formViewGet: true,
-      projectInfoGet: true,
-      gridColumnUpdate: true,
-      galleryViewGet: true,
-      kanbanViewGet: true,
-      groupedDataList: true,
-
-      // old
-      xcTableAndViewList: true,
-      xcAuditCreate: true,
-      xcAttachmentUpload: true,
-      xcVirtualTableList: true,
-      rolesGet: true,
-      tableXcModelGet: true,
-      xcRelationsGet: true,
-      xcModelsList: true,
-      xcViewModelsList: true,
-      xcProcedureModelsList: true,
-      xcFunctionModelsList: true,
-      xcTableModelsList: true,
-      xcCronList: true,
-      xcRelationList: true,
-      tableMetaCreate: true,
-      tableMetaDelete: true,
-      tableMetaRecreate: true,
-      viewMetaCreate: true,
-      viewMetaDelete: true,
-      viewMetaRecreate: true,
-      procedureMetaCreate: true,
-      procedureMetaDelete: true,
-      procedureMetaRecreate: true,
-      functionMetaCreate: true,
-      functionMetaDelete: true,
-      functionMetaRecreate: true,
-
-      tableCreateStatement: true,
-      tableInsertStatement: true,
-      tableUpdateStatement: true,
-      tableSelectStatement: true,
-      tableDeleteStatement: true,
-
-      functionList: true,
-      sequenceList: true,
-      procedureList: true,
-      triggerList: true,
-      relationList: true,
-      relationListAll: true,
-      indexList: true,
-      list: true,
-      viewRead: true,
-      functionRead: true,
-      procedureRead: true,
-
-      getKnexDataTypes: true,
-      DB_PROJECT_OPEN_BY_WEB: true,
-      PROJECT_READ_BY_WEB: true,
-      projectGenerateBackend: true,
-      projectGenerateBackendGql: true,
-      projectGetTsPolicyPath: true,
-      projectGetPolicyPath: true,
-      projectGetGqlPolicyPath: true,
-      handleApiCall: true,
-      executeRawQuery: true,
-      projectHasDb: true,
-      testConnection: true,
-      projectChangeEnv: true,
-
-      xcRoutesPolicyAllGet: true,
-      grpcProtoDownloadZip: true,
-
-      xcModelRowAuditAndCommentList: true,
-      xcAuditCommentInsert: true,
-      xcAuditModelCommentsCount: true,
-      xcExportAsCsv: true,
-
-      bulkDataInsert: true,
-      bulkDataUpdate: true,
-      bulkDataUpdateAll: true,
-      bulkDataDelete: true,
-      bulkDataDeleteAll: true,
-      relationDataRemove: true,
-      relationDataAdd: true,
-      dataCount: true,
-      upload: true,
-      uploadViaURL: true,
-      swaggerJson: true,
-
-      commandPalette: true,
-
-      // Docs
-      pageGet: true,
-      pageList: true,
-      pageSearch: true,
-      pageParents: true,
-      pageCreate: true,
-      pageUpdate: true,
-      pageDelete: true,
-      pageGpt: true,
-      pagePaginate: true,
-      pageDirectoryImport: true,
-      docsMagicCreatePages: true,
-      trackEvents: true,
-    },
-  },
-  commenter: {
-    include: {
-      formViewGet: true,
-      passwordChange: true,
-      // project
-      projectGet: true,
-      exportCsv: true,
-      exportExcel: true,
-
-      //table
-      tableGet: true,
-      // sort & filter
-      sortList: true,
-      viewList: true,
-      columnList: true,
-
-      mmList: true,
-      hmList: true,
-      commentList: true,
-      commentRow: true,
-      projectInfoGet: true,
-
-      // data
-      dataList: true,
-      dataRead: true,
-      dataExist: true,
-      dataFindOne: true,
-      dataGroupBy: true,
-      commentsCount: true,
-
-      galleryViewGet: true,
-      kanbanViewGet: true,
-      groupedDataList: true,
-
-      xcTableAndViewList: true,
-      xcVirtualTableList: true,
-      projectList: true,
-      projectCost: true,
-      projectUserMetaUpdate: true,
-      PROJECT_READ_BY_WEB: true,
-
-      tableXcModelGet: true,
-      xcRelationList: true,
-      tableList: true,
-      functionList: true,
-      sequenceList: true,
-      procedureList: true,
-      triggerList: true,
-      relationList: true,
-      relationListAll: true,
-      indexList: true,
-      list: true,
-
-      xcModelRowAuditAndCommentList: true,
-      xcAuditCommentInsert: true,
-      xcAuditModelCommentsCount: true,
-      xcExportAsCsv: true,
-      dataCount: true,
-      swaggerJson: true,
-
-      commandPalette: true,
-      trackEvents: true,
-    },
-  },
-  viewer: viewerPermissions,
-  [OrgUserRoles.VIEWER]: {
-    include: {
-      apiTokenList: true,
-      apiTokenCreate: true,
-      apiTokenDelete: true,
-      passwordChange: true,
-      projectList: true,
-      commandPalette: true,
-      trackEvents: true,
-      // allow only in cloud
-      testConnection: true,
-    },
-  },
-  [OrgUserRoles.SUPER_ADMIN]: '*',
-  [OrgUserRoles.CREATOR]: {
-    include: {
-      apiTokenList: true,
-      apiTokenCreate: true,
-      apiTokenDelete: true,
-      upload: true,
-      uploadViaURL: true,
-      passwordChange: true,
-      isPluginActive: true,
-      projectCreate: true,
-      // projectCreateByWeb: true,
-      // projectCreateByWebWithXCDB: true,
-      projectList: true,
-      projectCost: true,
-      handleAxiosCall: true,
-      testConnection: true,
-      xcPluginRead: true,
-      xcMetaTablesImportZipToLocalFsAndDb: true,
-      xcMetaTablesExportDbToZip: true,
-      auditRowUpdate: true,
-      genericGPT: true,
-      commandPalette: true,
-      runSelectQuery: true,
-
-      // Docs
-      pageGet: true,
-      pageList: true,
-      pageSearch: true,
-      pageParents: true,
-      pageCreate: true,
-      pageUpdate: true,
-      pageDelete: true,
-      pageGpt: true,
-      docsMagicCreatePages: true,
-      pagePaginate: true,
-      pageDirectoryImport: true,
-
-      trackEvents: true,
-    },
-  },
-};
-
-export default rolePermissions;
diff --git a/packages/nocodb/src/utils/roleHelper.ts b/packages/nocodb/src/utils/roleHelper.ts
new file mode 100644
index 0000000000..a001be5a22
--- /dev/null
+++ b/packages/nocodb/src/utils/roleHelper.ts
@@ -0,0 +1,26 @@
+import { OrderedProjectRoles } from 'nocodb-sdk';
+import { NcError } from 'src/helpers/catchError';
+import type { ProjectRoles } from 'nocodb-sdk';
+
+export function getProjectRolePower(user: any) {
+  const reverseOrderedProjectRoles = [...OrderedProjectRoles].reverse();
+
+  // get most powerful role of user (TODO moving forward we will confirm that user has only one role)
+  let role = null;
+  let power = -1;
+  for (const r of Object.keys(user.project_roles)) {
+    const ind = reverseOrderedProjectRoles.indexOf(r as ProjectRoles);
+    if (ind > power) {
+      role = r;
+      power = ind;
+    }
+  }
+
+  const ind = reverseOrderedProjectRoles.indexOf(role);
+
+  if (ind === -1) {
+    NcError.badRequest('Forbidden');
+  }
+
+  return ind;
+}
diff --git a/packages/nocodb/src/version-upgrader/NcUpgrader.ts b/packages/nocodb/src/version-upgrader/NcUpgrader.ts
index ce5a6a750b..78c2364c11 100644
--- a/packages/nocodb/src/version-upgrader/NcUpgrader.ts
+++ b/packages/nocodb/src/version-upgrader/NcUpgrader.ts
@@ -15,6 +15,7 @@ import ncProjectEnvUpgrader from './ncProjectEnvUpgrader';
 import ncHookUpgrader from './ncHookUpgrader';
 import ncProjectConfigUpgrader from './ncProjectConfigUpgrader';
 import ncXcdbLTARUpgrader from './ncXcdbLTARUpgrader';
+import ncXcdbLTARIndexUpgrader from './ncXcdbLTARIndexUpgrader';
 import type { MetaService } from '~/meta/meta.service';
 import type { NcConfig } from '~/interface/config';
 
@@ -142,6 +143,7 @@ export default class NcUpgrader {
       { name: '0105004', handler: ncHookUpgrader },
       { name: '0107004', handler: ncProjectConfigUpgrader },
       { name: '0108002', handler: ncXcdbLTARUpgrader },
+      { name: '0111002', handler: ncXcdbLTARIndexUpgrader },
     ];
   }
 }
diff --git a/packages/nocodb/src/version-upgrader/ncXcdbLTARIndexUpgrader.ts b/packages/nocodb/src/version-upgrader/ncXcdbLTARIndexUpgrader.ts
new file mode 100644
index 0000000000..5f1edf7955
--- /dev/null
+++ b/packages/nocodb/src/version-upgrader/ncXcdbLTARIndexUpgrader.ts
@@ -0,0 +1,168 @@
+import { Logger } from '@nestjs/common';
+import { RelationTypes, UITypes } from 'nocodb-sdk';
+import type { LinkToAnotherRecordColumn } from '~/models';
+import type { MetaService } from '~/meta/meta.service';
+import type { NcUpgraderCtx } from './NcUpgrader';
+import { MetaTable } from '~/utils/globals';
+import { Base } from '~/models';
+import NcConnectionMgrv2 from '~/utils/common/NcConnectionMgrv2';
+import { Model } from '~/models';
+
+const logger = new Logger('LTARIndexUpgrader');
+
+// An upgrader for adding missing index of LTAR relations in XCDB bases
+async function upgradeModelRelationsIndex({
+  model,
+  indexes,
+  ncMeta,
+  sqlClient,
+}: {
+  ncMeta: MetaService;
+  model: Model;
+  sqlClient: ReturnType<
+    (typeof NcConnectionMgrv2)['getSqlClient']
+  > extends Promise<infer U>
+    ? U
+    : ReturnType<(typeof NcConnectionMgrv2)['getSqlClient']>;
+  indexes: {
+    cn: string;
+    key_name: string;
+
+    type: string;
+    rqd: boolean | number;
+    cst: string;
+    cstn: string;
+  }[];
+}) {
+  // Iterate over each column and upgrade LTAR
+  for (const column of await model.getColumns(ncMeta)) {
+    if (column.uidt !== UITypes.LinkToAnotherRecord) {
+      continue;
+    }
+
+    const colOptions = await column.getColOptions<LinkToAnotherRecordColumn>(
+      ncMeta,
+    );
+
+    // if colOptions not found then skip
+    if (!colOptions) {
+      continue;
+    }
+
+    switch (colOptions.type) {
+      // use belongs to since child column belongs to current table in that case
+      case RelationTypes.BELONGS_TO:
+        {
+          // const parentCol = await colOptions.getParentColumn(ncMeta);
+          const childCol = await colOptions.getChildColumn(ncMeta);
+
+          // const parentModel = await parentCol.getModel(ncMeta);
+          const childModel = await childCol.getModel(ncMeta);
+
+          // check index already exists or not
+          const indexExists = indexes.find((index) => {
+            return index.cn === childCol.column_name;
+          });
+
+          if (indexExists) {
+            continue;
+          }
+
+          logger.log(`Creating index for column '${childCol.column_name}'`);
+          // create a new index for the column
+          const indexArgs = {
+            columns: [childCol.column_name],
+            tn: childModel.table_name,
+            non_unique: true,
+          };
+          await sqlClient.indexCreate(indexArgs);
+        }
+        break;
+    }
+  }
+}
+
+// An upgrader for adding missing index for LTAR relations in XCDB bases
+async function upgradeBaseRelations({
+  ncMeta,
+  base,
+}: {
+  ncMeta: MetaService;
+  base: Base;
+}) {
+  const sqlClient = await NcConnectionMgrv2.getSqlClient(base, ncMeta.knex);
+
+  // get models for the base
+  const models = await ncMeta.metaList2(null, base.id, MetaTable.MODELS);
+
+  // get all columns and filter out relations and create index if not exists
+  for (const model of models) {
+    logger.log(`Upgrading model '${model.title}'`);
+
+    logger.log(`Fetching index list of model '${model.title}'`);
+    const indexes = await sqlClient.indexList({
+      tn: model.table_name,
+    });
+    const indexList = indexes.data?.list ?? [];
+
+    // exclude composite indexes
+    const filteredIndexList = indexList.filter((indexObj, i) => {
+      return indexList.every((indexObj2, j) => {
+        if (i === j) return true;
+        return indexObj2.key_name !== indexObj.key_name;
+      });
+    });
+
+    await upgradeModelRelationsIndex({
+      ncMeta,
+      model: new Model(model),
+      sqlClient,
+      indexes: filteredIndexList,
+    });
+    logger.log(`Upgraded model '${model.title}'`);
+  }
+}
+
+// Add missing index for LTAR relations
+export default async function ({ ncMeta }: NcUpgraderCtx) {
+  logger.log(
+    'Starting upgrade for LTAR relations in XCDB bases to add missing index',
+  );
+
+  // get all xcdb bases
+  const bases = await ncMeta.metaList2(null, null, MetaTable.BASES, {
+    condition: {
+      is_meta: 1,
+    },
+    orderBy: {},
+  });
+
+  if (!bases.length) return;
+
+  // iterate and upgrade each base
+  for (const _base of bases) {
+    const base = new Base(_base);
+
+    // skip if not pg, since for other db we don't need to upgrade
+    if (ncMeta.knex.clientType() !== 'pg') {
+      continue;
+    }
+    const project = await base.getProject(ncMeta);
+
+    // skip deleted projects
+    if (!project || project.deleted) continue;
+
+    logger.log(`Upgrading base '${base.alias}'(${project.title})`);
+
+    await upgradeBaseRelations({
+      ncMeta,
+      base,
+    });
+
+    logger.log(`Upgraded base '${base.alias}'(${project.title})`);
+  }
+
+  logger.log(
+    'Finished upgrade for LTAR relations in XCDB bases to add missing index',
+  );
+}
diff --git a/packages/nocodb/tests/unit/factory/project.ts b/packages/nocodb/tests/unit/factory/project.ts
index 7e4cf3413f..dd04a85ea6 100644
--- a/packages/nocodb/tests/unit/factory/project.ts
+++ b/packages/nocodb/tests/unit/factory/project.ts
@@ -44,6 +44,7 @@ const sakilaProjectConfig = (context) => {
     title: 'sakila',
     bases: [base],
     external: true,
+    ...(process.env.EE ? { fk_workspace_id: context.fk_workspace_id } : {}),
   };
 };
 
@@ -82,7 +83,10 @@ const createProject = async (
   const response = await request(context.app)
     .post('/api/v1/db/meta/projects/')
     .set('xc-auth', context.token)
-    .send(projectArgs);
+    .send({
+      ...projectArgs,
+      ...(process.env.EE ? { fk_workspace_id: context.fk_workspace_id } : {}),
+    });
 
   return (await Project.getByTitleOrId(response.body.id)) as Project;
 };
diff --git a/packages/nocodb/tests/unit/init/index.ts b/packages/nocodb/tests/unit/init/index.ts
index ad0e156be1..7067bbceba 100644
--- a/packages/nocodb/tests/unit/init/index.ts
+++ b/packages/nocodb/tests/unit/init/index.ts
@@ -1,4 +1,5 @@
 import express from 'express';
+import request from 'supertest';
 import nocobuild from '../../../src/nocobuild';
 // import { Noco } from '../../../src/lib';
 import { createUser } from '../factory/user';
@@ -34,16 +35,34 @@ export default async function (forceReset = false) {
   }
 
   // if (isSakila) {
-    await cleanUpSakila(forceReset);
+  await cleanUpSakila(forceReset);
   // }
   await cleanupMeta();
 
   const { token } = await createUser({ app: server }, { roles: 'editor' });
 
+  const extra: any = {};
+
+  // create ws for ee
+  if (process.env.EE === 'true') {
+    const ws = await request(server)
+      .post('/api/v1/workspaces/')
+      .set('xc-auth', token)
+      .send({
+        title: 'Workspace',
+        meta: {
+          color: '#146C8E',
+        },
+      });
+
+    extra.fk_workspace_id = ws.body.id;
+  }
+
   return {
     app: server,
     token,
     dbConfig: TestDbMngr.dbConfig,
     sakilaDbConfig: TestDbMngr.getSakilaDbConfig(),
+    ...extra,
   };
 }
diff --git a/packages/nocodb/tests/unit/rest/tests/newDataApis.test.ts b/packages/nocodb/tests/unit/rest/tests/newDataApis.test.ts
index 8e3e4d06f0..88dd585d21 100644
--- a/packages/nocodb/tests/unit/rest/tests/newDataApis.test.ts
+++ b/packages/nocodb/tests/unit/rest/tests/newDataApis.test.ts
@@ -120,6 +120,8 @@ let countryColumns;
 let cityTable: Model;
 let cityColumns;
 
+const unauthorizedResponse = process.env.EE !== 'true' ? 404 : 403;
+
 // Optimisation scope for time reduction
 // 1. BeforeEach can be changed to BeforeAll for List and Read APIs
 
@@ -795,7 +797,7 @@ function textBased() {
     // Invalid table ID
     await ncAxiosGet({
       url: `/api/v1/tables/123456789/rows`,
-      status: 404,
+      status: unauthorizedResponse,
     });
 
     // Invalid view ID
@@ -922,7 +924,7 @@ function textBased() {
     // Invalid table ID
     await ncAxiosPost({
       url: `/api/v1/tables/123456789/rows`,
-      status: 404,
+      status: unauthorizedResponse,
     });
 
     // Invalid data - create should not specify ID
@@ -956,7 +958,7 @@ function textBased() {
     // Invalid table ID
     await ncAxiosGet({
       url: `/api/v1/tables/123456789/rows/100`,
-      status: 404,
+      status: unauthorizedResponse,
     });
     // Invalid row ID
     await ncAxiosGet({
@@ -1035,7 +1037,7 @@ function textBased() {
     await ncAxiosPatch({
       url: `/api/v1/tables/123456789/rows`,
       body: { Id: 100, SingleLineText: 'some text' },
-      status: 404,
+      status: unauthorizedResponse,
     });
     // Invalid row ID
     await ncAxiosPatch({
@@ -1084,7 +1086,7 @@ function textBased() {
     await ncAxiosDelete({
       url: `/api/v1/tables/123456789/rows`,
       body: { Id: 100 },
-      status: 404,
+      status: unauthorizedResponse,
     });
     // Invalid row ID
     await ncAxiosDelete({ body: { Id: '123456789' }, status: 422 });
@@ -2377,8 +2379,7 @@ function linkBased() {
     await ncAxiosLinkAdd({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 404,
-      msg: "Table with id '9999' not found",
+      status: unauthorizedResponse,
     });
 
     // Link Add: Invalid link ID
@@ -2450,8 +2451,7 @@ function linkBased() {
     await ncAxiosLinkRemove({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 404,
-      msg: "Table with id '9999' not found",
+      status: unauthorizedResponse,
     });
 
     // Link Remove: Invalid link ID
@@ -2523,8 +2523,7 @@ function linkBased() {
     await ncAxiosLinkGet({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 404,
-      msg: "Table with id '9999' not found",
+      status: unauthorizedResponse,
     });
 
     // Link List: Invalid link ID
diff --git a/packages/nocodb/tests/unit/rest/tests/project.test.ts b/packages/nocodb/tests/unit/rest/tests/project.test.ts
index 0ec1f71d75..47799601ea 100644
--- a/packages/nocodb/tests/unit/rest/tests/project.test.ts
+++ b/packages/nocodb/tests/unit/rest/tests/project.test.ts
@@ -56,11 +56,20 @@ function projectTest() {
   // todo: Test creating visibility set
 
   it('List projects', async () => {
-    const response = await request(context.app)
-      .get('/api/v1/db/meta/projects/')
-      .set('xc-auth', context.token)
-      .send({})
-      .expect(200);
+    let response;
+    if (process.env.EE !== 'true') {
+      response = await request(context.app)
+        .get('/api/v1/db/meta/projects/')
+        .set('xc-auth', context.token)
+        .send({})
+        .expect(200);
+    } else {
+      response = await request(context.app)
+        .get(`/api/v1/workspaces/${context.fk_workspace_id}/projects`)
+        .set('xc-auth', context.token)
+        .send({})
+        .expect(200);
+    }
 
     if (response.body.list.length !== 1)
       new Error('Should list only 1 project');
@@ -73,6 +82,9 @@ function projectTest() {
       .set('xc-auth', context.token)
       .send({
         title: 'Title1',
+        ...(process.env.EE === 'true' && {
+          fk_workspace_id: context.fk_workspace_id,
+        }),
       })
       .expect(200);
 
@@ -86,6 +98,9 @@ function projectTest() {
       .set('xc-auth', context.token)
       .send({
         title: project.title,
+        ...(process.env.EE === 'true' && {
+          fk_workspace_id: context.fk_workspace_id,
+        }),
       })
       .expect(200);
   });
@@ -308,7 +323,8 @@ function projectTest() {
       .send({})
       .expect(200)
       .then((res) => {
-        const createdProject = res.body.projects[1];
+        const createdProject =
+          res.body.projects[process.env.EE === 'true' ? 2 : 1];
 
         expect(res.body).to.have.all.keys(
           'userCount',
@@ -316,8 +332,10 @@ function projectTest() {
           'projectCount',
           'projects',
         );
-        // As there will be a default project created for a workspace
-        expect(res.body).to.have.property('projectCount').to.eq(2);
+        // As there will be a default project created for a workspace (EE tests create one extra)
+        expect(res.body)
+          .to.have.property('projectCount')
+          .to.eq(process.env.EE === 'true' ? 3 : 2);
         expect(res.body).to.have.property('projects').to.be.an('array');
 
         expect(createdProject.tableCount.table).to.be.eq(3);
diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index 50d93d846b..2d159e6bb8 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -51,7 +51,7 @@ export class ExpandedFormPage extends BasePage {
 
   async clickDeleteRow() {
     await this.click3DotsMenu('Delete Row');
-    await this.rootPage.locator('.ant-btn-primary:has-text("OK")').click();
+    await this.rootPage.locator('.ant-btn-primary:has-text("Confirm")').click();
   }
 
   async isDisabledDuplicateRow() {
diff --git a/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts b/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
index 04263fae7c..a24ad7f4a8 100644
--- a/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
@@ -23,6 +23,10 @@ export class MiscSettingsPage extends BasePage {
   }
 
   async clickShowNullEmptyFilters() {
-    await this.get().locator('input[type="checkbox"]').last().click();
+    await this.waitForResponse({
+      uiAction: () => this.get().locator('input[type="checkbox"]').last().click(),
+      requestUrlPathToMatch: 'api/v1/db/meta/projects',
+      httpMethodsToMatch: ['PATCH'],
+    });
   }
 }
diff --git a/tests/playwright/pages/Dashboard/Sidebar/UserMenu/index.ts b/tests/playwright/pages/Dashboard/Sidebar/UserMenu/index.ts
new file mode 100644
index 0000000000..80d67ec18c
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Sidebar/UserMenu/index.ts
@@ -0,0 +1,24 @@
+import BasePage from '../../../Base';
+import { SidebarPage } from '..';
+
+export class SidebarUserMenuObject extends BasePage {
+  readonly sidebar: SidebarPage;
+
+  constructor(parent: SidebarPage) {
+    super(parent.rootPage);
+
+    this.sidebar = parent;
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-sidebar-userinfo');
+  }
+
+  async click() {
+    await this.get().click();
+  }
+
+  async clickLogout() {
+    await this.rootPage.getByTestId('nc-sidebar-user-logout').click();
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Sidebar/index.ts b/tests/playwright/pages/Dashboard/Sidebar/index.ts
index 561d21cc5f..1c83e88a8e 100644
--- a/tests/playwright/pages/Dashboard/Sidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/Sidebar/index.ts
@@ -3,22 +3,26 @@ import { ProjectTypes } from 'nocodb-sdk';
 import { DashboardPage } from '..';
 import BasePage from '../../Base';
 import { DocsSidebarPage } from './DocsSidebar';
+import { SidebarUserMenuObject } from './UserMenu';
 
 export class SidebarPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly docsSidebar: DocsSidebarPage;
   readonly quickImportButton: Locator;
   readonly createProjectBtn: Locator;
+  readonly userMenu: SidebarUserMenuObject;
+
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
     this.docsSidebar = new DocsSidebarPage(this);
+    this.userMenu = new SidebarUserMenuObject(this);
     this.quickImportButton = dashboard.get().locator('.nc-import-menu');
     this.createProjectBtn = dashboard.get().locator('.nc-create-project-btn');
   }
 
   get() {
-    return this.dashboard.get().locator('.nc-treeview-container');
+    return this.dashboard.get().locator('.nc-sidebar');
   }
 
   async isVisible() {
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index bfa5046f81..5e5540d872 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -325,7 +325,7 @@ export class TreeViewPage extends BasePage {
     await this.getProjectContextMenu({ projectTitle: param.title }).click();
     const contextMenu = this.dashboard.get().locator('.ant-dropdown-menu.nc-scrollbar-md:visible').last();
     await contextMenu.waitFor();
-    await contextMenu.locator(`.ant-dropdown-menu-item:has-text("Edit")`).click();
+    await contextMenu.locator(`.ant-dropdown-menu-item:has-text("Rename")`).click();
 
     const projectNodeInput = (await this.getProject({ index: 0, title: param.title })).locator('input');
     await projectNodeInput.clear();
@@ -348,7 +348,7 @@ export class TreeViewPage extends BasePage {
     await this.getProjectContextMenu({ projectTitle: param.title }).click();
     const contextMenu = this.dashboard.get().locator('.ant-dropdown-menu.nc-scrollbar-md:visible');
     await contextMenu.waitFor();
-    await contextMenu.locator(`.ant-dropdown-menu-item:has-text("Duplicate Project")`).click();
+    await contextMenu.locator(`.ant-dropdown-menu-item:has-text("Duplicate")`).click();
 
     await this.rootPage.locator('div.ant-modal-content').locator(`button.ant-btn:has-text("Confirm")`).click();
   }
diff --git a/tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts b/tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts
new file mode 100644
index 0000000000..2f5f81a5a2
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts
@@ -0,0 +1,36 @@
+import BasePage from '../../Base';
+import { DashboardPage } from '..';
+
+export class WorkspaceSettingsObject extends BasePage {
+  readonly dashboard: DashboardPage;
+
+  constructor(parent: DashboardPage) {
+    super(parent.rootPage);
+
+    this.dashboard = parent;
+  }
+
+  get() {
+    return this.dashboard.get().locator(`.nc-workspace-settings`);
+  }
+
+  async open() {
+    await this.dashboard.leftSidebar.clickTeamAndSettings();
+  }
+
+  async clickSettingsTab() {
+    await this.get().getByTestId('nc-workspace-settings-tab-settings').click();
+  }
+
+  async renameWorkspace({ newTitle }: { newTitle: string }) {
+    await this.clickSettingsTab();
+    await this.get().getByTestId('nc-workspace-settings-settings-rename-input').fill(newTitle);
+    const submitAction = () => this.get().getByTestId('nc-workspace-settings-settings-rename-submit').click();
+
+    await this.waitForResponse({
+      uiAction: submitAction,
+      httpMethodsToMatch: ['PATCH'],
+      requestUrlPathToMatch: `/api/v1/workspaces/`,
+    });
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts b/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
index 07ea7356a5..a8161146e6 100644
--- a/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
@@ -50,22 +50,14 @@ export class LeftSidebarPage extends BasePage {
 
   async clickHome() {}
 
-  async renameWorkspace({ newTitle }: { newTitle: string }) {
-    await this.clickWorkspace();
-    const inputBox = this.modal_workspace.locator('.nc-workspace-title-input');
-    await inputBox.clear();
-    await inputBox.fill(newTitle);
-    await this.rootPage.keyboard.press('Escape');
-  }
-
   async getWorkspaceName() {
-    return await getTextExcludeIconText(this.btn_workspace);
+    return await this.btn_workspace.getAttribute('data-workspace-title');
   }
 
   async createWorkspace({ title }: { title: string }) {
     await this.clickWorkspace();
-    await this.modal_workspace.locator('.ant-dropdown-menu-item:has-text("Add new workspace")').waitFor();
-    await this.modal_workspace.locator('.ant-dropdown-menu-item:has-text("Add new workspace")').click();
+    await this.modal_workspace.locator('.ant-dropdown-menu-item:has-text("Create New Workspace")').waitFor();
+    await this.modal_workspace.locator('.ant-dropdown-menu-item:has-text("Create New Workspace")').click();
 
     const inputModal = this.rootPage.locator('div.ant-modal.active');
     await inputModal.waitFor();
diff --git a/tests/playwright/pages/Dashboard/index.ts b/tests/playwright/pages/Dashboard/index.ts
index 073f6805c0..3acfe0046d 100644
--- a/tests/playwright/pages/Dashboard/index.ts
+++ b/tests/playwright/pages/Dashboard/index.ts
@@ -24,6 +24,7 @@ import { ShareProjectButtonPage } from './ShareProjectButton';
 import { ProjectTypes } from 'nocodb-sdk';
 import { WorkspacePage } from '../WorkspacePage';
 import { DetailsPage } from './Details';
+import { WorkspaceSettingsObject } from './WorkspaceSettings';
 
 export class DashboardPage extends BasePage {
   readonly project: any;
@@ -53,13 +54,14 @@ export class DashboardPage extends BasePage {
   readonly sidebar: SidebarPage;
   readonly shareProjectButton: ShareProjectButtonPage;
   readonly details: DetailsPage;
+  readonly workspaceSettings: WorkspaceSettingsObject;
 
   constructor(rootPage: Page, project: any) {
     super(rootPage);
     this.project = project;
     this.tablesSideBar = rootPage.locator('.nc-treeview-container');
     this.workspaceMenuLink = rootPage.getByTestId('nc-project-menu');
-    this.projectMenuLink = rootPage.locator('.project-title-node').locator('.nc-icon.ant-dropdown-trigger').first();
+    this.projectMenuLink = rootPage.locator(`.project-title-node:has-text("${project.title}")`).locator('.nc-icon.ant-dropdown-trigger').first();
     this.tabBar = rootPage.locator('.nc-tab-bar');
     this.treeView = new TreeViewPage(this, project);
     this.grid = new GridPage(this);
@@ -82,6 +84,7 @@ export class DashboardPage extends BasePage {
     this.docs = new DocsPageGroup(this);
     this.shareProjectButton = new ShareProjectButtonPage(this);
     this.details = new DetailsPage(this);
+    this.workspaceSettings = new WorkspaceSettingsObject(this);
   }
 
   get() {
@@ -182,8 +185,9 @@ export class DashboardPage extends BasePage {
   }
 
   async signOut() {
-    await this.grid.workspaceMenu.toggle();
-    await this.grid.workspaceMenu.click({ menu: 'Account', subMenu: 'Sign Out' });
+    await this.sidebar.userMenu.click();
+    await this.rootPage.getByTestId('nc-sidebar-user-logout').waitFor({ state: 'visible' });
+    await this.sidebar.userMenu.clickLogout();
     await this.rootPage.locator('[data-testid="nc-form-signin"]:visible').waitFor();
     await new Promise(resolve => setTimeout(resolve, 150));
   }
diff --git a/tests/playwright/pages/WorkspacePage/CollaborationPage.ts b/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
index 465d7955ec..0423becc7e 100644
--- a/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
+++ b/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
@@ -3,7 +3,7 @@ import { WorkspacePage } from './';
 import { Locator } from '@playwright/test';
 
 /*
-  nc-workspace-container
+  nc-workspace-settings
     nc-collaborator-table-container
  */
 
@@ -24,7 +24,7 @@ export class CollaborationPage extends BasePage {
   }
 
   get() {
-    return this.workspace.get().locator('.nc-workspace-container').locator('.nc-collaborator-table-container');
+    return this.workspace.get().locator('.nc-workspace-settings').locator('.nc-collaborator-table-container');
   }
 
   async waitFor({ state }) {
diff --git a/tests/playwright/pages/WorkspacePage/ContainerPage.ts b/tests/playwright/pages/WorkspacePage/ContainerPage.ts
index dea29ce2e9..212a55a28a 100644
--- a/tests/playwright/pages/WorkspacePage/ContainerPage.ts
+++ b/tests/playwright/pages/WorkspacePage/ContainerPage.ts
@@ -5,7 +5,7 @@ import { Locator } from '@playwright/test';
 import { getTextExcludeIconText } from '../../tests/utils/general';
 
 /*
-  nc-workspace-container
+  nc-workspace-settings
     nc-workspace-avatar
     nc-workspace-title
     button:has-text("New Project")
@@ -64,7 +64,7 @@ export class ContainerPage extends BasePage {
   }
 
   get() {
-    return this.workspace.get().locator('.nc-workspace-container');
+    return this.workspace.get().locator('.nc-workspace-settings');
   }
 
   async waitFor({ state }) {
diff --git a/tests/playwright/pages/WorkspacePage/index.ts b/tests/playwright/pages/WorkspacePage/index.ts
index ee86738e33..0733bb79ed 100644
--- a/tests/playwright/pages/WorkspacePage/index.ts
+++ b/tests/playwright/pages/WorkspacePage/index.ts
@@ -12,7 +12,7 @@ import { CollaborationPage } from './CollaborationPage';
     nc-header-content
     nc-root
       nc-left-sidebar
-      nc-workspace-container
+      nc-workspace-settings
 
 */
 
diff --git a/tests/playwright/setup/xcdbProject.ts b/tests/playwright/setup/xcdbProject.ts
index 8848338544..8bdebe96d7 100644
--- a/tests/playwright/setup/xcdbProject.ts
+++ b/tests/playwright/setup/xcdbProject.ts
@@ -1,5 +1,6 @@
-import { Api, WorkspaceListType } from 'nocodb-sdk';
+import { Api } from 'nocodb-sdk';
 import { NcContext } from './index';
+import { isEE } from './db';
 let api: Api<any>;
 
 async function createXcdb(context: NcContext) {
@@ -10,7 +11,14 @@ async function createXcdb(context: NcContext) {
     },
   });
 
-  const projectList = await api.project.list();
+  let projectList;
+
+  if (isEE() && context.workspace?.id) {
+    projectList = await api['workspaceProject'].list(context.workspace.id);
+  } else {
+    projectList = await api.project.list();
+  }
+
   for (const project of projectList.list) {
     // delete project with title 'xcdb' if it exists
     if (project.title === 'xcdb') {
@@ -20,21 +28,30 @@ async function createXcdb(context: NcContext) {
 
   const project = await api.project.create({
     title: 'xcdb',
-    fk_workspace_id: context?.workspace?.id,
     type: 'database',
+    ...(isEE() ? {
+      fk_workspace_id: context?.workspace?.id,
+    } : {}),
   });
   return project;
 }
 
-async function deleteXcdb(token?: string) {
+async function deleteXcdb(context: NcContext) {
   api = new Api({
     baseURL: `http://localhost:8080/`,
     headers: {
-      'xc-auth': token,
+      'xc-auth': context.token,
     },
   });
 
-  const projectList = await api.project.list();
+  let projectList;
+
+  if (isEE() && context.workspace?.id) {
+    projectList = await api['workspaceProject'].list(context.workspace.id);
+  } else {
+    projectList = await api.project.list();
+  }
+
   for (const project of projectList.list) {
     // delete project with title 'xcdb' if it exists
     if (project.title === 'xcdb') {
diff --git a/tests/playwright/tests/db/features/metaLTAR.spec.ts b/tests/playwright/tests/db/features/metaLTAR.spec.ts
index 21ca0049ab..59eb80d683 100644
--- a/tests/playwright/tests/db/features/metaLTAR.spec.ts
+++ b/tests/playwright/tests/db/features/metaLTAR.spec.ts
@@ -25,7 +25,7 @@ import { Api, UITypes } from 'nocodb-sdk';
 import { DashboardPage } from '../../../pages/Dashboard';
 import { GridPage } from '../../../pages/Dashboard/Grid';
 import { createXcdb, deleteXcdb } from '../../../setup/xcdbProject';
-import { WorkspacePage } from '../../../pages/WorkspacePage';
+
 let api: Api<any>;
 const recordCount = 10;
 
@@ -40,7 +40,7 @@ test.describe.serial('Test table', () => {
   test.afterEach(async () => {
     try {
       if (context) {
-        await deleteXcdb(context.token);
+        await deleteXcdb(context);
       }
     } catch (e) {
       console.log(e);