From 8ab47b11094c3c9cee1df98479c1383649c13134 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 5 Sep 2023 18:10:52 +0300
Subject: [PATCH 1/8] fix: various stuff

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/assets/nc-icons/plus-square.svg    |    7 +
 packages/nc-gui/assets/style.scss             |   31 +-
 packages/nc-gui/components.d.ts               |    1 +
 .../nc-gui/components/api-client/Params.vue   |    6 -
 .../nc-gui/components/cell/DateTimePicker.vue |    7 +-
 .../nc-gui/components/dashboard/Sidebar.vue   |  162 +-
 .../components/dashboard/Sidebar/Header.vue   |   60 +
 .../dashboard/Sidebar/TopSection.vue          |   90 +
 .../dashboard/Sidebar/TopSection/Header.vue}  |    0
 .../components/dashboard/Sidebar/UserInfo.vue |  177 ++
 .../nc-gui/components/dashboard/TreeView.vue  | 1475 -----------------
 .../AddNewTableNode.vue                       |    0
 .../{TreeViewNew => TreeView}/BaseOptions.vue |    0
 .../{TreeViewNew => TreeView}/ProjectNode.vue |   30 +-
 .../ProjectWrapper.vue                        |    0
 .../{TreeViewNew => TreeView}/TableList.vue   |    0
 .../{TreeViewNew => TreeView}/TableNode.vue   |   17 +-
 .../{TreeViewNew => TreeView}/index.vue       |   86 +-
 .../settings/app-store/AppInstall.vue         |    5 +-
 .../settings/data-sources/CreateBase.vue      |    1 +
 .../nc-gui/components/dlg/AirtableImport.vue  |    4 +-
 .../components/dlg/ProjectDuplicate.vue       |   22 +-
 .../nc-gui/components/dlg/TableDuplicate.vue  |   54 +-
 .../dlg/share-and-collaborate/View.vue        |    7 +-
 .../nc-gui/components/general/EmojiPicker.vue |    4 +-
 .../nc-gui/components/general/MiniSidebar.vue |    2 +-
 .../components/general/OpenLeftSidebarBtn.vue |   53 +
 .../nc-gui/components/general/ReleaseInfo.vue |    8 +-
 .../nc-gui/components/general/UserIcon.vue    |   51 +
 .../nc-gui/components/general/ViewIcon.vue    |   11 +-
 .../components/general/WorkspaceIcon.vue      |   37 +
 .../components/general/language/index.vue     |    2 +-
 packages/nc-gui/components/nc/Badge.vue       |   21 +-
 packages/nc-gui/components/nc/Button.vue      |   17 +-
 packages/nc-gui/components/nc/Divider.vue     |    9 +
 packages/nc-gui/components/nc/Dropdown.vue    |   24 +-
 packages/nc-gui/components/nc/Menu.vue        |   19 +
 packages/nc-gui/components/nc/MenuItem.vue    |   17 +
 packages/nc-gui/components/nc/Modal.vue       |    4 +-
 packages/nc-gui/components/nc/Tooltip.vue     |   18 +-
 .../components/project/AccessSettings.vue     |   15 +-
 .../nc-gui/components/project/AllTables.vue   |    2 +-
 .../project/InviteProjectCollabSection.vue    |   10 +-
 packages/nc-gui/components/project/View.vue   |    3 +-
 .../nc-gui/components/smartsheet/Gallery.vue  |    5 +-
 .../components/smartsheet/Pagination.vue      |   43 +-
 .../nc-gui/components/smartsheet/Toolbar.vue  |   14 +-
 .../nc-gui/components/smartsheet/Topbar.vue   |   11 +-
 .../smartsheet/column/AdvancedOptions.vue     |   13 +-
 .../smartsheet/expanded-form/Header.vue       |    2 +-
 .../components/smartsheet/grid/Table.vue      |    8 +-
 .../components/smartsheet/header/Cell.vue     |    8 +-
 .../components/smartsheet/sidebar/MenuTop.vue |    2 +-
 .../smartsheet/sidebar/RenameableMenuItem.vue |    8 +
 .../components/smartsheet/sidebar/index.vue   |   77 +-
 .../smartsheet/toolbar/ColumnFilterMenu.vue   |    2 +-
 .../components/smartsheet/toolbar/Export.vue  |    4 +-
 .../smartsheet/toolbar/FieldsMenu.vue         |    2 +-
 .../smartsheet/toolbar/GroupByMenu.vue        |    8 +-
 .../smartsheet/toolbar/OpenViewSidebarBtn.vue |   53 +
 .../smartsheet/toolbar/SortListMenu.vue       |    9 +-
 .../smartsheet/toolbar/ViewInfo.vue           |   32 +-
 .../smartsheet/topbar/SelectMode.vue          |   14 +-
 .../nc-gui/components/tabs/Smartsheet.vue     |    2 +-
 .../components/tabs/SmartsheetResizable.vue   |  211 +--
 .../workspace/CollaboratorsList.vue           |    8 +-
 .../components/workspace/CreateProjectBtn.vue |   67 +-
 .../components/workspace/CreateProjectDlg.vue |   18 +-
 .../nc-gui/components/workspace/Delete.vue    |   66 -
 .../components/workspace/EmptyPlaceholder.vue |   21 +-
 .../components/workspace/InviteSection.vue    |    6 +-
 packages/nc-gui/components/workspace/Menu.vue |  372 +----
 .../nc-gui/components/workspace/Settings.vue  |  164 ++
 packages/nc-gui/components/workspace/View.vue |   30 +-
 .../nc-gui/composables/useApi/interceptors.ts |   46 +-
 .../composables/useCommandPalette/index.ts    |    6 +-
 packages/nc-gui/composables/useData.ts        |    3 -
 .../nc-gui/composables/useGlobal/actions.ts   |   49 +-
 .../nc-gui/composables/useGlobal/state.ts     |    1 +
 .../nc-gui/composables/useGlobal/types.ts     |   13 +-
 packages/nc-gui/composables/useLTARStore.ts   |    7 +-
 packages/nc-gui/composables/useRoles/index.ts |   81 +-
 packages/nc-gui/composables/useSharedView.ts  |    2 +
 packages/nc-gui/composables/useTableNew.ts    |    2 +-
 packages/nc-gui/composables/useUndoRedo.ts    |   22 +-
 packages/nc-gui/layouts/base.vue              |    8 +-
 packages/nc-gui/layouts/dashboard.vue         |  208 +--
 packages/nc-gui/layouts/empty.vue             |   10 +-
 packages/nc-gui/layouts/new.vue               |    2 +-
 packages/nc-gui/layouts/shared-view.vue       |   32 +-
 packages/nc-gui/lib/types.ts                  |    7 +-
 packages/nc-gui/middleware/auth.global.ts     |    5 +
 packages/nc-gui/package-lock.json             |   14 +-
 packages/nc-gui/package.json                  |    2 +-
 packages/nc-gui/pages/account/index.vue       |    6 -
 packages/nc-gui/pages/forgot-password.vue     |    4 -
 packages/nc-gui/pages/index.vue               |   16 +-
 packages/nc-gui/pages/index/[typeOrId].vue    |    2 +-
 .../[typeOrId]/[projectId]/index/index.vue    |   52 -
 .../{[type] => }/[viewId]/[[viewTitle]].vue   |    6 +-
 .../[viewId]/[[viewTitle]]/[...slugs].vue     |    1 +
 .../pages/index/[typeOrId]/form/[viewId].vue  |    4 +-
 .../index/[typeOrId]/form/[viewId]/index.vue  |    2 +-
 .../[typeOrId]/form/[viewId]/index/index.vue  |    2 +-
 packages/nc-gui/pages/signin.vue              |   14 +-
 packages/nc-gui/pages/signup/[[token]].vue    |   11 +-
 packages/nc-gui/store/project.ts              |   11 +-
 packages/nc-gui/store/projects.ts             |    2 -
 packages/nc-gui/store/sidebar.ts              |   16 +
 packages/nc-gui/store/tables.ts               |   16 +-
 packages/nc-gui/store/views.ts                |    6 +-
 packages/nc-gui/store/webhooks.ts             |    3 +-
 packages/nc-gui/store/workspace.ts            |   38 +-
 packages/nc-gui/utils/columnUtils.ts          |   16 +-
 packages/nc-gui/utils/iconUtils.ts            |   29 +-
 packages/nocodb-sdk/src/lib/Api.ts            |   13 +-
 packages/nocodb-sdk/src/lib/enums.ts          |    6 +
 .../nocodb-sdk/src/lib/helperFunctions.ts     |   28 +-
 packages/nocodb/.gitignore                    |    2 +
 packages/nocodb/package.json                  |    2 +-
 packages/nocodb/src/Noco.ts                   |   10 +-
 packages/nocodb/src/app.config.ts             |    1 +
 .../src/controllers/api-tokens.controller.ts  |    6 +-
 .../nocodb/src/controllers/auth.controller.ts |   15 +-
 .../src/controllers/data-table.controller.ts  |    7 +-
 .../src/controllers/org-lcense.controller.ts  |    2 +
 .../src/controllers/org-tokens.controller.ts  |    3 +
 .../src/controllers/org-users.controller.ts   |    9 +
 .../src/controllers/plugins.controller.ts     |   24 +-
 .../src/controllers/projects.controller.ts    |   30 +-
 .../src/controllers/tables.controller.ts      |    3 +-
 .../src/controllers/users/users.controller.ts |   48 +-
 .../src/controllers/utils.controller.ts       |    4 +-
 packages/nocodb/src/db/BaseModelSqlv2.ts      |   36 +-
 .../nocodb/src/guards/global/global.guard.ts  |    2 +-
 .../extractProjectIdAndAuthenticate.ts        |  151 --
 packages/nocodb/src/helpers/ncMetaAclMw.ts    |   96 --
 .../is-upload-allowed.interceptor.ts          |    3 +-
 packages/nocodb/src/interface/config.ts       |    1 +
 packages/nocodb/src/meta/meta.service.ts      |    9 +-
 .../extract-ids/extract-ids.middleware.ts     |   64 +-
 .../src/middlewares/gui/gui.middleware.ts     |    8 +-
 packages/nocodb/src/models/Project.ts         |   10 +-
 packages/nocodb/src/models/ProjectUser.ts     |   11 +-
 packages/nocodb/src/models/User.ts            |   41 +-
 .../jobs/at-import/at-import.controller.ts    |    7 +-
 .../jobs/at-import/at-import.processor.ts     |    3 +-
 .../export-import/duplicate.controller.ts     |    7 +-
 .../nocodb/src/modules/metas/metas.module.ts  |    2 -
 packages/nocodb/src/nocobuild.ts              |    2 +-
 packages/nocodb/src/run/cloud.ts              |    9 +-
 packages/nocodb/src/run/local.ts              |    5 +-
 packages/nocodb/src/schema/swagger.json       |    7 +
 .../src/services/api-docs/swagger/getPaths.ts |    4 +-
 .../nocodb/src/services/api-tokens.service.ts |    3 +-
 packages/nocodb/src/services/auth.service.ts  |    2 +-
 .../src/services/org-tokens-ee.service.ts     |    3 +-
 .../nocodb/src/services/org-tokens.service.ts |    3 +-
 .../nocodb/src/services/org-users.service.ts  |    3 +-
 .../project-users/project-users.service.ts    |   12 +-
 .../nocodb/src/services/projects.service.ts   |   10 +-
 .../nocodb/src/services/telemetry.service.ts  |    6 +-
 .../src/services/users/users.service.ts       |   12 +-
 packages/nocodb/src/services/utils.service.ts |    1 +
 .../base-view.strategy/base-view.strategy.ts  |    3 +-
 .../nocodb/src/strategies/jwt.strategy.ts     |   45 +-
 .../nocodb/src/strategies/local.strategy.ts   |    2 +-
 packages/nocodb/src/utils/acl.ts              |  398 +++++
 packages/nocodb/src/utils/extractRolesObj.ts  |   13 -
 packages/nocodb/src/utils/index.ts            |    2 +
 .../nocodb/src/utils/nc-config/NcConfig.ts    |    2 +-
 packages/nocodb/src/utils/projectAcl.ts       |  373 -----
 packages/nocodb/src/utils/roleHelper.ts       |   25 +
 packages/nocodb/tests/unit/factory/project.ts |    6 +-
 packages/nocodb/tests/unit/init/index.ts      |   21 +-
 .../tests/unit/rest/tests/newDataApis.test.ts |   19 +-
 .../tests/unit/rest/tests/project.test.ts     |   34 +-
 .../pages/Dashboard/Settings/Miscellaneous.ts |    6 +-
 .../pages/Dashboard/Sidebar/UserMenu/index.ts |   24 +
 .../pages/Dashboard/Sidebar/index.ts          |    6 +-
 tests/playwright/pages/Dashboard/TreeView.ts  |    4 +-
 .../Dashboard/WorkspaceSettings/index.ts      |   36 +
 .../Dashboard/common/LeftSidebar/index.ts     |   14 +-
 tests/playwright/pages/Dashboard/index.ts     |    9 +-
 .../pages/WorkspacePage/CollaborationPage.ts  |    4 +-
 .../pages/WorkspacePage/ContainerPage.ts      |    4 +-
 tests/playwright/pages/WorkspacePage/index.ts |    2 +-
 tests/playwright/setup/xcdbProject.ts         |   29 +-
 .../tests/db/features/metaLTAR.spec.ts        |    4 +-
 189 files changed, 2593 insertions(+), 3864 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/plus-square.svg
 create mode 100644 packages/nc-gui/components/dashboard/Sidebar/Header.vue
 create mode 100644 packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
 rename packages/nc-gui/{pages/index/[typeOrId]/[projectId]/index/index/[type]/[viewId]/[[viewTitle]]/[...slugs].vue => components/dashboard/Sidebar/TopSection/Header.vue} (100%)
 create mode 100644 packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
 delete mode 100644 packages/nc-gui/components/dashboard/TreeView.vue
 rename packages/nc-gui/components/dashboard/{TreeViewNew => TreeView}/AddNewTableNode.vue (100%)
 rename packages/nc-gui/components/dashboard/{TreeViewNew => TreeView}/BaseOptions.vue (100%)
 rename packages/nc-gui/components/dashboard/{TreeViewNew => TreeView}/ProjectNode.vue (95%)
 rename packages/nc-gui/components/dashboard/{TreeViewNew => TreeView}/ProjectWrapper.vue (100%)
 rename packages/nc-gui/components/dashboard/{TreeViewNew => TreeView}/TableList.vue (100%)
 rename packages/nc-gui/components/dashboard/{TreeViewNew => TreeView}/TableNode.vue (94%)
 rename packages/nc-gui/components/dashboard/{TreeViewNew => TreeView}/index.vue (81%)
 create mode 100644 packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
 create mode 100644 packages/nc-gui/components/general/UserIcon.vue
 create mode 100644 packages/nc-gui/components/general/WorkspaceIcon.vue
 create mode 100644 packages/nc-gui/components/nc/Divider.vue
 create mode 100644 packages/nc-gui/components/nc/Menu.vue
 create mode 100644 packages/nc-gui/components/nc/MenuItem.vue
 create mode 100644 packages/nc-gui/components/smartsheet/toolbar/OpenViewSidebarBtn.vue
 delete mode 100644 packages/nc-gui/components/workspace/Delete.vue
 create mode 100644 packages/nc-gui/components/workspace/Settings.vue
 rename packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/{[type] => }/[viewId]/[[viewTitle]].vue (84%)
 create mode 100644 packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/[viewId]/[[viewTitle]]/[...slugs].vue
 delete mode 100644 packages/nocodb/src/helpers/extractProjectIdAndAuthenticate.ts
 delete mode 100644 packages/nocodb/src/helpers/ncMetaAclMw.ts
 create mode 100644 packages/nocodb/src/utils/acl.ts
 delete mode 100644 packages/nocodb/src/utils/extractRolesObj.ts
 delete mode 100644 packages/nocodb/src/utils/projectAcl.ts
 create mode 100644 packages/nocodb/src/utils/roleHelper.ts
 create mode 100644 tests/playwright/pages/Dashboard/Sidebar/UserMenu/index.ts
 create mode 100644 tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts

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 3f0a87fac6..d327aa0029 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']
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/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..d238670272
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+const workspaceStore = useWorkspace()
+const projectStore = useProject()
+
+const { appInfo } = useGlobal()
+
+const { activeWorkspace, isWorkspaceLoading, isWorkspaceOwnerOrCreator, isWorkspaceSettingsPageOpened } =
+  storeToRefs(workspaceStore)
+
+const { navigateToWorkspaceSettings } = workspaceStore
+
+const { isSharedBase } = storeToRefs(projectStore)
+
+const { isUIAllowed } = useUIPermission()
+
+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-if="isUIAllowed('createProject', false, activeWorkspace?.roles) && !isSharedBase"
+        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..bd5e878297
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -0,0 +1,177 @@
+<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
+  }
+})
+</script>
+
+<template>
+  <div class="nc-sidebar-userinfo 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">
+        <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 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/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..6bb55c0941 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -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..018afccaa5 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/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 5901d2a1cc..53d55c040e 100644
--- a/packages/nc-gui/components/nc/Badge.vue
+++ b/packages/nc-gui/components/nc/Badge.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 const props = defineProps<{
   color: string
 }>()
@@ -7,21 +6,17 @@ 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>
 
diff --git a/packages/nc-gui/components/nc/Button.vue b/packages/nc-gui/components/nc/Button.vue
index abf4730520..b6d594faa1 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
 }
 
@@ -74,6 +75,7 @@ const onBlur = () => {
       small: size === 'small',
       medium: size === 'medium',
       xsmall: size === 'xsmall',
+      xxsmall: size === 'xxsmall',
       focused: isFocused,
     }"
     @focus="onFocus"
@@ -91,6 +93,7 @@ const onBlur = () => {
 
       <slot v-else name="icon" />
       <div
+        class="flex flex-row items-center"
         :class="{
           'font-medium': type === 'primary' || type === 'danger',
         }"
@@ -120,7 +123,7 @@ const onBlur = () => {
 }
 
 .nc-button.ant-btn {
-  @apply rounded-lg  font-medium;
+  @apply rounded-lg font-medium;
 }
 
 .nc-button.ant-btn.small {
@@ -132,7 +135,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 +167,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 +182,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/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..d60a8b6d1a 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -2,7 +2,7 @@
 import { OrderedProjectRoles, RoleColors, RoleLabels } from 'nocodb-sdk'
 import type { ProjectRoles, WorkspaceUserType } 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()
@@ -74,7 +74,7 @@ onMounted(async () => {
 
 const updateCollaborator = async (collab, roles) => {
   try {
-    if (!roles) {
+    if (!roles || roles === 'inherit') {
       await removeProjectUser(activeProjectId.value!, collab)
       collab.projectRoles = null
     } else if (collab.projectRoles) {
@@ -188,7 +188,7 @@ const accessibleRoles = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles
                   :virtual="true"
                   :placeholder="$t('labels.noAccess')"
                   :disabled="collab.id === user?.id"
-                  allow-clear
+                  :allow-clear="!isEeUI"
                   @change="(value) => updateCollaborator(collab, value)"
                 >
                   <template #suffixIcon>
@@ -211,6 +211,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 +264,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..392c523512 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 
 const { activeTables } = storeToRefs(useTablesStore())
 const { openTable } = useTablesStore()
-const { openedProject, roles } = storeToRefs(useProjects())
+const { openedProject } = storeToRefs(useProjects())
 
 const { isUIAllowed } = useUIPermission()
 
diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index d8e105e9c0..386d9f34da 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -111,7 +111,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 +140,7 @@ const copyUrl = async () => {
                 <p class="badge-text">{{ role }}</p>
               </NcBadge>
             </a-select-option>
-          </a-select>
+          </NcSelect>
 
           <a-button
             type="primary"
@@ -162,10 +162,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..83046ec0c5 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}`,
     ),
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..451577c05f 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -303,7 +303,7 @@ const setIcon = async (icon: string, view: ViewType) => {
   <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 !mr-2.5 w-full !border-r-0 !bg-inherit nc-scrollbar-md"
     :selected-keys="selected"
   >
     <!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
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..4c01f34c45 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,9 +147,41 @@ 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">
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..ca0cae4ba3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -142,7 +142,13 @@ 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
+    class=""
+    :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/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..07a4b8fbe9 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..5233b70030 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -41,7 +41,7 @@ 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>
@@ -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..4a753ad485 100644
--- a/packages/nc-gui/components/workspace/CreateProjectBtn.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
@@ -1,61 +1,40 @@
 <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 projectStore = useProject()
+const { isSharedBase } = storeToRefs(projectStore)
+
+const workspaceStore = useWorkspace()
+const { activeWorkspace, 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('createProject', false, activeWorkspace?.roles) && !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..8a5aa05504 100644
--- a/packages/nc-gui/components/workspace/CreateProjectDlg.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
@@ -64,14 +64,18 @@ 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(() => {
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..c2ce69149e 100644
--- a/packages/nc-gui/composables/useGlobal/state.ts
+++ b/packages/nc-gui/composables/useGlobal/state.ts
@@ -105,6 +105,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..67ea531308 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,54 @@ 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>(() => {
+    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,
     }
+  })
 
-    return roles
+  const orgRoles = computed<Roles>(() => {
+    let orgRoles = user.value?.roles ?? {}
+
+    orgRoles = extractRolesObj(orgRoles)
+
+    return orgRoles
   })
 
-  const allRoles = computed<Roles>(() => ({
-    ...userRoles.value,
-    ...projectRoles.value,
-  }))
+  const projectRoles = computed<Roles>(() => {
+    let projectRoles = user.value?.project_roles ?? {}
 
-  async function loadProjectRoles(
-    projectId: string,
+    if (Object.keys(projectRoles).length === 0) {
+      projectRoles = user.value?.roles ?? {}
+    }
+
+    projectRoles = extractRolesObj(projectRoles)
+
+    return projectRoles
+  })
+
+  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 +67,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 +84,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 +108,5 @@ export const useRoles = createSharedComposable(() => {
     return allRoles.value[role]
   }
 
-  return { allRoles, userRoles, projectRoles, loadProjectRoles, hasRole }
+  return { allRoles, orgRoles, 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 dea23c35af..2f88224dae 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -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",
@@ -1584,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": "*"
@@ -18354,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": "*"
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 80655b7352..b7f9d423f2 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -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..b7e8001de4 100644
--- a/packages/nc-gui/pages/index.vue
+++ b/packages/nc-gui/pages/index.vue
@@ -14,6 +14,8 @@ const projectId = ref<string>()
 
 const projectsStore = useProjects()
 
+const { populateWorkspace } = useWorkspace()
+
 const router = useRouter()
 
 const route = router.currentRoute
@@ -35,12 +37,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 +46,8 @@ watch(
       return
     }
 
-    await projectsStore.loadProjects('recent')
+    // Load projects
+    await populateWorkspace()
 
     if (!route.value.params.projectId && projectsList.value.length > 0) {
       await autoNavigateToProject()
@@ -73,10 +70,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..e8cece67f7 100644
--- a/packages/nc-gui/store/projects.ts
+++ b/packages/nc-gui/store/projects.ts
@@ -40,7 +40,6 @@ export const useProjects = defineStore('projectsStore', () => {
     return basesMap
   })
 
-  const roles = computed(() => openedProject.value?.project_role)
 
   const workspaceStore = useWorkspace()
   const tableStore = useTablesStore()
@@ -312,7 +311,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..fcdf4862e7 100644
--- a/packages/nc-gui/store/workspace.ts
+++ b/packages/nc-gui/store/workspace.ts
@@ -25,13 +25,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 +66,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 +98,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 +199,11 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     $e('c:themes:change')
   }
 
-  const clearWorkspaces = () => {
-    clearProjects()
+  const clearWorkspaces = async () => {
+    await clearProjects()
     workspaces.value.clear()
   }
+
   const upgradeActiveWorkspace = async () => {}
 
   const navigateToWorkspace = async (workspaceId?: string) => {
@@ -199,7 +212,9 @@ export const useWorkspace = defineStore('workspaceStore', () => {
       throw new Error('Workspace not selected')
     }
 
-    await navigateTo(`/ws/${workspaceId}`)
+    await ncNavigateTo({
+      workspaceId,
+    })
   }
 
   const navigateToWorkspaceSettings = async () => {
@@ -245,6 +260,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/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..a3d6c82e3b 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,6 +171,7 @@ 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',
@@ -187,6 +189,7 @@ export const RoleColors = {
   [ProjectRoles.COMMENTER]: 'orange',
   [ProjectRoles.VIEWER]: 'yellow',
   [OrgUserRoles.SUPER_ADMIN]: 'purple',
+  [ProjectRoles.NO_ACCESS]: 'red',
   [OrgUserRoles.CREATOR]: 'blue',
   [OrgUserRoles.VIEWER]: 'yellow',
 }
@@ -197,6 +200,8 @@ export const OrderedWorkspaceRoles = [
   WorkspaceUserRoles.EDITOR,
   WorkspaceUserRoles.COMMENTER,
   WorkspaceUserRoles.VIEWER,
+  // placeholder for no access
+  null,
 ]
 
 export const OrderedProjectRoles = [
@@ -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..6329aa5b56 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,33 @@ 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 {};
+
+  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;
+  }, {});
+}
+
+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.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/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/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..5b4969eb76 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)
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..ae820792c4 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,17 @@ 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 = 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 +244,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 +268,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/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..00366ff5a2 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,
@@ -372,7 +373,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/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..914f193e4e 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';
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..40056edfe4 100644
--- a/packages/nocodb/src/services/org-users.service.ts
+++ b/packages/nocodb/src/services/org-users.service.ts
@@ -1,5 +1,5 @@
 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 +13,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..bf3853dc2f 100644
--- a/packages/nocodb/src/services/project-users/project-users.service.ts
+++ b/packages/nocodb/src/services/project-users/project-users.service.ts
@@ -42,18 +42,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) {
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/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/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..a6737efee8
--- /dev/null
+++ b/packages/nocodb/src/utils/acl.ts
@@ -0,0 +1,398 @@
+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',
+
+    // 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..03e83caa05
--- /dev/null
+++ b/packages/nocodb/src/utils/roleHelper.ts
@@ -0,0 +1,25 @@
+import { OrderedProjectRoles } from 'nocodb-sdk';
+import { NcError } from 'src/helpers/catchError';
+
+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 user.project_roles) {
+    const ind = reverseOrderedProjectRoles.indexOf(r);
+    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/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..837e54147e 100644
--- a/packages/nocodb/tests/unit/rest/tests/newDataApis.test.ts
+++ b/packages/nocodb/tests/unit/rest/tests/newDataApis.test.ts
@@ -795,7 +795,7 @@ function textBased() {
     // Invalid table ID
     await ncAxiosGet({
       url: `/api/v1/tables/123456789/rows`,
-      status: 404,
+      status: 403,
     });
 
     // Invalid view ID
@@ -922,7 +922,7 @@ function textBased() {
     // Invalid table ID
     await ncAxiosPost({
       url: `/api/v1/tables/123456789/rows`,
-      status: 404,
+      status: 403,
     });
 
     // Invalid data - create should not specify ID
@@ -956,7 +956,7 @@ function textBased() {
     // Invalid table ID
     await ncAxiosGet({
       url: `/api/v1/tables/123456789/rows/100`,
-      status: 404,
+      status: 403,
     });
     // Invalid row ID
     await ncAxiosGet({
@@ -1035,7 +1035,7 @@ function textBased() {
     await ncAxiosPatch({
       url: `/api/v1/tables/123456789/rows`,
       body: { Id: 100, SingleLineText: 'some text' },
-      status: 404,
+      status: 403,
     });
     // Invalid row ID
     await ncAxiosPatch({
@@ -1084,7 +1084,7 @@ function textBased() {
     await ncAxiosDelete({
       url: `/api/v1/tables/123456789/rows`,
       body: { Id: 100 },
-      status: 404,
+      status: 403,
     });
     // Invalid row ID
     await ncAxiosDelete({ body: { Id: '123456789' }, status: 422 });
@@ -2377,8 +2377,7 @@ function linkBased() {
     await ncAxiosLinkAdd({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 404,
-      msg: "Table with id '9999' not found",
+      status: 403,
     });
 
     // Link Add: Invalid link ID
@@ -2450,8 +2449,7 @@ function linkBased() {
     await ncAxiosLinkRemove({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 404,
-      msg: "Table with id '9999' not found",
+      status: 403,
     });
 
     // Link Remove: Invalid link ID
@@ -2523,8 +2521,7 @@ function linkBased() {
     await ncAxiosLinkGet({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 404,
-      msg: "Table with id '9999' not found",
+      status: 403,
     });
 
     // 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/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..a78f611e69
--- /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.sidebar.get().locator(`.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..6503819442 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,8 @@ 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.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);

From eb60a02535873818785ef0f94eeb9841d1108412 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 04:28:49 +0300
Subject: [PATCH 2/8] fix: test errors

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/dashboard/Sidebar/UserInfo.vue | 17 ++++++++--
 .../components/workspace/CreateProjectDlg.vue |  3 +-
 .../nc-gui/composables/useGlobal/state.ts     |  4 ++-
 packages/nc-gui/package-lock.json             |  2 +-
 packages/nc-gui/package.json                  |  2 +-
 packages/nc-gui/pages/index.vue               | 13 ++++++++
 packages/nc-gui/store/projects.ts             |  1 -
 packages/nc-gui/store/workspace.ts            |  7 ++--
 packages/nocodb/package-lock.json             | 32 +++++++++++--------
 .../pages/Dashboard/Sidebar/UserMenu/index.ts |  2 +-
 tests/playwright/pages/Dashboard/index.ts     |  1 +
 11 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index bd5e878297..ae913e231e 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import GithubButton from 'vue-github-button'
+
 const { user, signOut, token, appInfo } = useGlobal()
 
 const { clearWorkspaces } = useWorkspace()
@@ -52,12 +53,22 @@ watch(leftSidebarState, () => {
     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="nc-sidebar-userinfo flex w-full flex-col p-1 border-t-1 border-gray-200 gap-y-2">
+  <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">
+      <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 }}
@@ -130,7 +141,7 @@ watch(leftSidebarState, () => {
     </NcDropdown>
 
     <div v-if="appInfo.ee" class="text-gray-500 text-xs pl-3">© 2023 NocoDB. Inc</div>
-    <div v-else class="flex flex-col gap-y-1 pt-1">
+    <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
diff --git a/packages/nc-gui/components/workspace/CreateProjectDlg.vue b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
index 8a5aa05504..70ef37e4fd 100644
--- a/packages/nc-gui/components/workspace/CreateProjectDlg.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
@@ -81,9 +81,8 @@ watch(dialogShow, async (n, o) => {
 const typeLabel = computed(() => {
   switch (props.type) {
     case NcProjectType.DB:
-      return 'Database'
     default:
-      return ''
+      return 'Database'
   }
 })
 </script>
diff --git a/packages/nc-gui/composables/useGlobal/state.ts b/packages/nc-gui/composables/useGlobal/state.ts
index c2ce69149e..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()
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 2f88224dae..6bd80b0ba3 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -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",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index b7f9d423f2..8ca6674267 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -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",
diff --git a/packages/nc-gui/pages/index.vue b/packages/nc-gui/pages/index.vue
index b7e8001de4..e95b4cb0cf 100644
--- a/packages/nc-gui/pages/index.vue
+++ b/packages/nc-gui/pages/index.vue
@@ -16,6 +16,8 @@ const projectsStore = useProjects()
 
 const { populateWorkspace } = useWorkspace()
 
+const { signedIn } = useGlobal()
+
 const router = useRouter()
 
 const route = router.currentRoute
@@ -46,6 +48,17 @@ watch(
       return
     }
 
+    // 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()
 
diff --git a/packages/nc-gui/store/projects.ts b/packages/nc-gui/store/projects.ts
index e8cece67f7..d7db5c1cba 100644
--- a/packages/nc-gui/store/projects.ts
+++ b/packages/nc-gui/store/projects.ts
@@ -40,7 +40,6 @@ export const useProjects = defineStore('projectsStore', () => {
     return basesMap
   })
 
-
   const workspaceStore = useWorkspace()
   const tableStore = useTablesStore()
 
diff --git a/packages/nc-gui/store/workspace.ts b/packages/nc-gui/store/workspace.ts
index fcdf4862e7..62306d2803 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>()
 
@@ -199,8 +198,8 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     $e('c:themes:change')
   }
 
-  const clearWorkspaces = async () => {
-    await clearProjects()
+  async function clearWorkspaces() {
+    await projectsStore.clearProjects()
     workspaces.value.clear()
   }
 
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/tests/playwright/pages/Dashboard/Sidebar/UserMenu/index.ts b/tests/playwright/pages/Dashboard/Sidebar/UserMenu/index.ts
index a78f611e69..80d67ec18c 100644
--- a/tests/playwright/pages/Dashboard/Sidebar/UserMenu/index.ts
+++ b/tests/playwright/pages/Dashboard/Sidebar/UserMenu/index.ts
@@ -11,7 +11,7 @@ export class SidebarUserMenuObject extends BasePage {
   }
 
   get() {
-    return this.sidebar.get().locator(`.nc-sidebar-userinfo`);
+    return this.rootPage.getByTestId('nc-sidebar-userinfo');
   }
 
   async click() {
diff --git a/tests/playwright/pages/Dashboard/index.ts b/tests/playwright/pages/Dashboard/index.ts
index 6503819442..3acfe0046d 100644
--- a/tests/playwright/pages/Dashboard/index.ts
+++ b/tests/playwright/pages/Dashboard/index.ts
@@ -186,6 +186,7 @@ export class DashboardPage extends BasePage {
 
   async signOut() {
     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));

From c8aa357ed8338fcfc7a00c0c34e36754e2a7c0ea Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 12:00:20 +0300
Subject: [PATCH 3/8] fix: req user references

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/project/AccessSettings.vue     |  2 +-
 packages/nocodb-sdk/src/lib/enums.ts          |  8 ++--
 .../project-users/project-users.service.ts    | 48 ++++++++++++++-----
 packages/nocodb/src/utils/roleHelper.ts       |  5 +-
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index d60a8b6d1a..0422604276 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -187,7 +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"
+                  :disabled="collab.id === user?.id || (collab.roles && !accessibleRoles.includes(collab.roles))"
                   :allow-clear="!isEeUI"
                   @change="(value) => updateCollaborator(collab, value)"
                 >
diff --git a/packages/nocodb-sdk/src/lib/enums.ts b/packages/nocodb-sdk/src/lib/enums.ts
index a3d6c82e3b..c15c3e04a8 100644
--- a/packages/nocodb-sdk/src/lib/enums.ts
+++ b/packages/nocodb-sdk/src/lib/enums.ts
@@ -175,7 +175,7 @@ export const RoleLabels = {
   [OrgUserRoles.SUPER_ADMIN]: 'Super',
   [OrgUserRoles.CREATOR]: 'Creator',
   [OrgUserRoles.VIEWER]: 'Viewer',
-}
+};
 
 export const RoleColors = {
   [WorkspaceUserRoles.OWNER]: 'purple',
@@ -192,7 +192,7 @@ export const RoleColors = {
   [ProjectRoles.NO_ACCESS]: 'red',
   [OrgUserRoles.CREATOR]: 'blue',
   [OrgUserRoles.VIEWER]: 'yellow',
-}
+};
 
 export const OrderedWorkspaceRoles = [
   WorkspaceUserRoles.OWNER,
@@ -202,7 +202,7 @@ export const OrderedWorkspaceRoles = [
   WorkspaceUserRoles.VIEWER,
   // placeholder for no access
   null,
-]
+];
 
 export const OrderedProjectRoles = [
   ProjectRoles.OWNER,
@@ -211,4 +211,4 @@ export const OrderedProjectRoles = [
   ProjectRoles.COMMENTER,
   ProjectRoles.VIEWER,
   ProjectRoles.NO_ACCESS,
-]
+];
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 bf3853dc2f..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 {
@@ -193,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(
@@ -241,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(
@@ -336,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/utils/roleHelper.ts b/packages/nocodb/src/utils/roleHelper.ts
index 03e83caa05..a001be5a22 100644
--- a/packages/nocodb/src/utils/roleHelper.ts
+++ b/packages/nocodb/src/utils/roleHelper.ts
@@ -1,5 +1,6 @@
 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();
@@ -7,8 +8,8 @@ export function getProjectRolePower(user: any) {
   // 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 user.project_roles) {
-    const ind = reverseOrderedProjectRoles.indexOf(r);
+  for (const r of Object.keys(user.project_roles)) {
+    const ind = reverseOrderedProjectRoles.indexOf(r as ProjectRoles);
     if (ind > power) {
       role = r;
       power = ind;

From 51895e951fcd461e1bba604d55261a402267047e Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 12:27:31 +0300
Subject: [PATCH 4/8] fix: org viewer visual bug

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/dashboard/Sidebar/TopSection.vue     |  6 +-----
 .../components/workspace/CreateProjectBtn.vue       |  6 ++++--
 packages/nc-gui/composables/useRoles/index.ts       | 12 ++++++++----
 packages/nocodb-sdk/src/lib/helperFunctions.ts      | 13 +++++++++----
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
index d238670272..8c77a4a115 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
@@ -4,15 +4,12 @@ const projectStore = useProject()
 
 const { appInfo } = useGlobal()
 
-const { activeWorkspace, isWorkspaceLoading, isWorkspaceOwnerOrCreator, isWorkspaceSettingsPageOpened } =
-  storeToRefs(workspaceStore)
+const { isWorkspaceLoading, isWorkspaceOwnerOrCreator, isWorkspaceSettingsPageOpened } = storeToRefs(workspaceStore)
 
 const { navigateToWorkspaceSettings } = workspaceStore
 
 const { isSharedBase } = storeToRefs(projectStore)
 
-const { isUIAllowed } = useUIPermission()
-
 const isCreateProjectOpen = ref(false)
 
 const navigateToSettings = () => {
@@ -66,7 +63,6 @@ const navigateToSettings = () => {
         </div>
       </NcButton>
       <WorkspaceCreateProjectBtn
-        v-if="isUIAllowed('createProject', false, activeWorkspace?.roles) && !isSharedBase"
         v-model:is-open="isCreateProjectOpen"
         modal
         type="text"
diff --git a/packages/nc-gui/components/workspace/CreateProjectBtn.vue b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
index 4a753ad485..82a6f543d4 100644
--- a/packages/nc-gui/components/workspace/CreateProjectBtn.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
@@ -12,11 +12,13 @@ const props = defineProps<{
 
 const { isUIAllowed } = useUIPermission()
 
+const { orgRoles, workspaceRoles } = useRoles()
+
 const projectStore = useProject()
 const { isSharedBase } = storeToRefs(projectStore)
 
 const workspaceStore = useWorkspace()
-const { activeWorkspace, activeWorkspaceId: _activeWorkspaceId } = storeToRefs(workspaceStore)
+const { activeWorkspaceId: _activeWorkspaceId } = storeToRefs(workspaceStore)
 
 const projectCreateDlg = ref(false)
 
@@ -26,7 +28,7 @@ const centered = computed(() => props.centered ?? true)
 
 <template>
   <NcButton
-    v-if="isUIAllowed('createProject', false, activeWorkspace?.roles) && !isSharedBase"
+    v-if="isUIAllowed('createProject', false, workspaceRoles ?? orgRoles) && !isSharedBase"
     type="text"
     :size="size"
     :centered="centered"
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index 67ea531308..e1cf0eb165 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -16,7 +16,7 @@ export const useRoles = createSharedComposable(() => {
 
   const { api } = useApi()
 
-  const allRoles = computed<Roles>(() => {
+  const allRoles = computed<Roles | null>(() => {
     let orgRoles = user.value?.roles ?? {}
 
     orgRoles = extractRolesObj(orgRoles)
@@ -31,7 +31,7 @@ export const useRoles = createSharedComposable(() => {
     }
   })
 
-  const orgRoles = computed<Roles>(() => {
+  const orgRoles = computed<Roles | null>(() => {
     let orgRoles = user.value?.roles ?? {}
 
     orgRoles = extractRolesObj(orgRoles)
@@ -39,7 +39,7 @@ export const useRoles = createSharedComposable(() => {
     return orgRoles
   })
 
-  const projectRoles = computed<Roles>(() => {
+  const projectRoles = computed<Roles | null>(() => {
     let projectRoles = user.value?.project_roles ?? {}
 
     if (Object.keys(projectRoles).length === 0) {
@@ -51,6 +51,10 @@ export const useRoles = createSharedComposable(() => {
     return projectRoles
   })
 
+  const workspaceRoles = computed<Roles | null>(() => {
+    return null
+  })
+
   async function loadRoles(
     projectId?: string,
     options: { isSharedBase?: boolean; sharedBaseId?: string; isSharedErd?: boolean; sharedErdId?: string } = {},
@@ -108,5 +112,5 @@ export const useRoles = createSharedComposable(() => {
     return allRoles.value[role]
   }
 
-  return { allRoles, orgRoles, projectRoles, loadRoles, hasRole }
+  return { allRoles, orgRoles, workspaceRoles, projectRoles, loadRoles, hasRole }
 })
diff --git a/packages/nocodb-sdk/src/lib/helperFunctions.ts b/packages/nocodb-sdk/src/lib/helperFunctions.ts
index 6329aa5b56..66fbe3c057 100644
--- a/packages/nocodb-sdk/src/lib/helperFunctions.ts
+++ b/packages/nocodb-sdk/src/lib/helperFunctions.ts
@@ -22,8 +22,10 @@ const isSystemColumn = (col): boolean =>
     (col.pk && col.meta && col.meta.ag) ||
     col.system);
 
-type Roles = Record<OrgUserRoles | ProjectRoles | WorkspaceUserRoles | string, boolean>
-
+type Roles = Record<
+  OrgUserRoles | ProjectRoles | WorkspaceUserRoles | string,
+  boolean
+>;
 
 const extractRolesObj = (roles: Roles | string[] | string): Roles => {
   if (!roles) return {};
@@ -33,16 +35,19 @@ const extractRolesObj = (roles: Roles | string[] | string): 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,

From 64b812621bc0b21a33faea7285dae8838586b431 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 12:37:33 +0300
Subject: [PATCH 5/8] fix: no-access role

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/project/AccessSettings.vue | 9 ++++-----
 packages/nocodb/src/models/ProjectUser.ts             | 6 ++++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index 0422604276..c2b2624630 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -1,6 +1,6 @@
 <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 { isEeUI, storeToRefs, stringToColour, timeAgo, useGlobal } from '#imports'
 
@@ -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 || roles === 'inherit') {
+    if (!roles || roles === 'inherit' || (roles === ProjectRoles.NO_ACCESS && !isEeUI)) {
       await removeProjectUser(activeProjectId.value!, collab)
       collab.projectRoles = null
     } else if (collab.projectRoles) {
@@ -188,7 +188,6 @@ const accessibleRoles = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles
                   :virtual="true"
                   :placeholder="$t('labels.noAccess')"
                   :disabled="collab.id === user?.id || (collab.roles && !accessibleRoles.includes(collab.roles))"
-                  :allow-clear="!isEeUI"
                   @change="(value) => updateCollaborator(collab, value)"
                 >
                   <template #suffixIcon>
diff --git a/packages/nocodb/src/models/ProjectUser.ts b/packages/nocodb/src/models/ProjectUser.ts
index 00366ff5a2..2f0ef8ed2d 100644
--- a/packages/nocodb/src/models/ProjectUser.ts
+++ b/packages/nocodb/src/models/ProjectUser.ts
@@ -337,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

From e85ca75734ecbac2eba73ff5fa8cce93f1370dcf Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 13:25:04 +0300
Subject: [PATCH 6/8] fix: permission name

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/workspace/CreateProjectBtn.vue | 2 +-
 packages/nc-gui/store/workspace.ts                        | 6 +++---
 packages/nocodb-sdk/src/lib/helperFunctions.ts            | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/workspace/CreateProjectBtn.vue b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
index 82a6f543d4..acb32926f2 100644
--- a/packages/nc-gui/components/workspace/CreateProjectBtn.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
@@ -28,7 +28,7 @@ const centered = computed(() => props.centered ?? true)
 
 <template>
   <NcButton
-    v-if="isUIAllowed('createProject', false, workspaceRoles ?? orgRoles) && !isSharedBase"
+    v-if="isUIAllowed('projectCreate', false, workspaceRoles ?? orgRoles) && !isSharedBase"
     type="text"
     :size="size"
     :centered="centered"
diff --git a/packages/nc-gui/store/workspace.ts b/packages/nc-gui/store/workspace.ts
index 62306d2803..e28df4af63 100644
--- a/packages/nc-gui/store/workspace.ts
+++ b/packages/nc-gui/store/workspace.ts
@@ -65,17 +65,17 @@ export const useWorkspace = defineStore('workspaceStore', () => {
   /** getters */
   const isWorkspaceCreator = computed(() => {
     // todo: type correction
-    return orgRoles.value[Role.OrgLevelCreator]
+    return orgRoles.value?.[Role.OrgLevelCreator]
   })
 
   const isWorkspaceOwner = computed(() => {
     // todo: type correction
-    return orgRoles.value[Role.OrgLevelCreator]
+    return orgRoles.value?.[Role.OrgLevelCreator]
   })
 
   const isWorkspaceOwnerOrCreator = computed(() => {
     // todo: type correction
-    return orgRoles.value[Role.OrgLevelCreator]
+    return orgRoles.value?.[Role.OrgLevelCreator]
   })
 
   /** actions */
diff --git a/packages/nocodb-sdk/src/lib/helperFunctions.ts b/packages/nocodb-sdk/src/lib/helperFunctions.ts
index 66fbe3c057..ffb1a80e6e 100644
--- a/packages/nocodb-sdk/src/lib/helperFunctions.ts
+++ b/packages/nocodb-sdk/src/lib/helperFunctions.ts
@@ -28,7 +28,7 @@ type Roles = Record<
 >;
 
 const extractRolesObj = (roles: Roles | string[] | string): Roles => {
-  if (!roles) return {};
+  if (!roles) return null;
 
   if (typeof roles === 'object' && !Array.isArray(roles)) return roles;
 

From 7395b038721c17cf9696552ba61576df2b84eebc Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 14:11:06 +0300
Subject: [PATCH 7/8] fix: all access to super user

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../src/middlewares/extract-ids/extract-ids.middleware.ts    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 ae820792c4..6dd0c79582 100644
--- a/packages/nocodb/src/middlewares/extract-ids/extract-ids.middleware.ts
+++ b/packages/nocodb/src/middlewares/extract-ids/extract-ids.middleware.ts
@@ -211,7 +211,10 @@ export class AclMiddleware implements NestInterceptor {
 
     const req = context.switchToHttp().getRequest();
 
-    const userScopeRole = getUserRoleForScope(req.user, scope);
+    const userScopeRole =
+      req.user.roles?.[OrgUserRoles.SUPER_ADMIN] === true
+        ? OrgUserRoles.SUPER_ADMIN
+        : getUserRoleForScope(req.user, scope);
 
     if (!userScopeRole) {
       NcError.forbidden('Unauthorized access');

From 304ac9910e2e820685d9470be268ca17bb6395b3 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 14:46:40 +0300
Subject: [PATCH 8/8] test: unit test response

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../tests/unit/rest/tests/newDataApis.test.ts  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/nocodb/tests/unit/rest/tests/newDataApis.test.ts b/packages/nocodb/tests/unit/rest/tests/newDataApis.test.ts
index 837e54147e..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: 403,
+      status: unauthorizedResponse,
     });
 
     // Invalid view ID
@@ -922,7 +924,7 @@ function textBased() {
     // Invalid table ID
     await ncAxiosPost({
       url: `/api/v1/tables/123456789/rows`,
-      status: 403,
+      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: 403,
+      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: 403,
+      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: 403,
+      status: unauthorizedResponse,
     });
     // Invalid row ID
     await ncAxiosDelete({ body: { Id: '123456789' }, status: 422 });
@@ -2377,7 +2379,7 @@ function linkBased() {
     await ncAxiosLinkAdd({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 403,
+      status: unauthorizedResponse,
     });
 
     // Link Add: Invalid link ID
@@ -2449,7 +2451,7 @@ function linkBased() {
     await ncAxiosLinkRemove({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 403,
+      status: unauthorizedResponse,
     });
 
     // Link Remove: Invalid link ID
@@ -2521,7 +2523,7 @@ function linkBased() {
     await ncAxiosLinkGet({
       ...validParams,
       urlParams: { ...validParams.urlParams, tableId: 9999 },
-      status: 403,
+      status: unauthorizedResponse,
     });
 
     // Link List: Invalid link ID