diff --git a/packages/nc-gui-v2/assets/style.scss b/packages/nc-gui-v2/assets/style.scss
index 8da9a28bda..bd73a731d1 100644
--- a/packages/nc-gui-v2/assets/style.scss
+++ b/packages/nc-gui-v2/assets/style.scss
@@ -239,3 +239,7 @@ a {
 .ant-menu-title-content {
   @apply !py-0;
 }
+
+.ant-dropdown-menu-submenu-title{
+  @apply !pr-2;
+}
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index f6be04bfc0..dd16edac37 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -96,6 +96,8 @@ declare module '@vue/runtime-core' {
     MdiAccount: typeof import('~icons/mdi/account')['default']
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
+    MdiAccountGroupIcon: typeof import('~icons/mdi/account-group-icon')['default']
+    MdiAccountIcon: typeof import('~icons/mdi/account-icon')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
     MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
@@ -165,6 +167,7 @@ declare module '@vue/runtime-core' {
     MdiLinkVariant: typeof import('~icons/mdi/link-variant')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLoading: typeof import('~icons/mdi/loading')['default']
+    MdiLockOutlineIcon: typeof import('~icons/mdi/lock-outline-icon')['default']
     MdiLogin: typeof import('~icons/mdi/login')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
@@ -201,6 +204,7 @@ declare module '@vue/runtime-core' {
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiTwitter: typeof import('~icons/mdi/twitter')['default']
+    MdiUpload: typeof import('~icons/mdi/upload')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 3ae7cbc189..2c8e54d0d7 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -19,6 +19,12 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" @blur="editEnabled = false" />
+  <input
+    v-if="editEnabled"
+    :ref="focus"
+    v-model="vModel"
+    class="h-full w-full outline-none bg-transparent"
+    @blur="editEnabled = false"
+  />
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
new file mode 100644
index 0000000000..aa124f9f75
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { OpenNewRecordFormHookInj, inject } from '#imports'
+
+const isLocked = inject(IsLockedInj)
+
+const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)!
+
+const onClick = () => {
+  if (!isLocked?.value) openNewRecordFormHook.trigger()
+}
+</script>
+
+<template>
+  <a-tooltip placement="bottom">
+    <template #title> {{ $t('activity.addRow') }} </template>
+    <div :class="{ 'group': !isLocked, 'disabled-ring': isLocked }" class="nc-add-row flex align-center">
+      <MdiPlusOutline
+        :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"
+        @click="onClick"
+      />
+    </div>
+  </a-tooltip>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 3886d3eaa2..958e98fc44 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -39,7 +39,7 @@ const applyChanges = async () => await filterComp.value?.applyChanges()
         <div class="flex items-center gap-1">
           <MdiFilterOutline />
           <!-- Filter -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span>
           <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 71ef93d591..2070043b7a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -86,7 +86,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           <MdiEyeOffOutline />
 
           <!-- Fields -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('objects.fields') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span>
 
           <MdiMenuDown class="text-grey" />
         </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
new file mode 100644
index 0000000000..1432ba8fab
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
+import MdiAccountIcon from '~icons/mdi/account'
+import MdiAccountGroupIcon from '~icons/mdi/account-group'
+
+import { LockType } from '~/lib'
+
+const { type, hideTick } = defineProps<{ hideTick?: boolean; type: LockType }>()
+
+const emit = defineEmits(['select'])
+
+const types = {
+  [LockType.Personal]: {
+    title: 'title.personalView',
+    icon: MdiAccountIcon,
+    subtitle: 'Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.',
+  },
+  [LockType.Collaborative]: {
+    title: 'title.collabView',
+    icon: MdiAccountGroupIcon,
+    subtitle: 'Collaborators with edit permissions or higher can change the view configuration.',
+  },
+  [LockType.Locked]: {
+    title: 'title.lockedView',
+    icon: MdiLockOutlineIcon,
+    subtitle: 'No one can edit the view configuration until it is unlocked.',
+  },
+}
+
+const selectedView = inject(ActiveViewInj)
+</script>
+
+<template>
+  <div class="nc-locked-menu-item" @click="emit('select', type)">
+    <div :class="{ 'show-tick': !hideTick }">
+      <template v-if="!hideTick">
+        <MdiCheck v-if="selectedView?.lock_type === type" />
+        <span v-else />
+      </template>
+      <div>
+        <component :is="types[type].icon" class="text-gray-500" />
+        {{ $t(types[type].title) }}
+        <div class="nc-subtitle">
+          {{ types[type].subtitle }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nc-locked-menu-item > div {
+  @apply p-2 items-center min-w-[350px] max-w-[350px];
+
+  &.show-tick {
+    @apply grid gap-2  grid-cols-[30px,auto];
+  }
+
+  .nc-subtitle {
+    @apply text-xs text-gray-500 font-weight-light;
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
similarity index 51%
rename from packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
rename to packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
index 9125b33b6e..5c780b1c16 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
@@ -3,17 +3,15 @@ import { ReloadViewDataHookInj, inject } from '#imports'
 
 const reloadHook = inject(ReloadViewDataHookInj)!
 
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
-
 const onClick = () => reloadHook.trigger()
 </script>
 
 <template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
+  <a-tooltip placement="bottom">
     <template #title> {{ $t('general.reload') }} </template>
 
-    <div class="nc-sidebar-right-item hover:after:bg-green-500 group">
-      <MdiReload class="cursor-pointer group-hover:(!text-white)" @click="onClick" />
+    <div class="group flex align-center">
+      <MdiReload class="cursor-pointer text-gray-500 group-hover:(text-primary)" @click="onClick" />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index a44cb3cd24..ea16354a6a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -126,7 +126,7 @@ onMounted(() => {
       <div class="flex items-center gap-1" @click="genShareLink">
         <MdiOpenInNewIcon />
         <!-- Share View -->
-        <span class="!text-sm font-weight-medium"> {{ $t('activity.shareView') }}</span>
+        <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>
       </div>
     </a-button>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 3f6784db96..88363ac637 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -40,7 +40,7 @@ watch(
         ><div class="flex items-center gap-1">
           <MdiSortIcon />
           <!-- Sort -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
new file mode 100644
index 0000000000..d77b3227bc
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
@@ -0,0 +1,280 @@
+<script lang="ts" setup>
+import * as XLSX from 'xlsx'
+import { ExportTypes } from 'nocodb-sdk'
+import FileSaver from 'file-saver'
+import { message } from 'ant-design-vue'
+import { LockType } from '~/lib'
+import { viewIcons } from '~/utils'
+import {
+  ActiveViewInj,
+  FieldsInj,
+  IsLockedInj,
+  IsPublicInj,
+  MetaInj,
+  extractSdkResponseErrorMsg,
+  inject,
+  ref,
+  useNuxtApp,
+  useProject,
+  useUIPermission,
+} from '#imports'
+import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
+import MdiAccountIcon from '~icons/mdi/account'
+import MdiAccountGroupIcon from '~icons/mdi/account-group'
+
+const sharedViewListDlg = ref(false)
+
+const isPublicView = inject(IsPublicInj, ref(false))
+
+const isView = false
+
+const { project } = useProject()
+
+const { $api, $e } = useNuxtApp()
+
+const meta = inject(MetaInj)
+
+const fields = inject(FieldsInj, ref([]))
+
+const selectedView = inject(ActiveViewInj)
+
+const isLocked = inject(IsLockedInj)
+
+const showWebhookDrawer = ref(false)
+
+const quickImportDialog = ref(false)
+
+const { isUIAllowed } = useUIPermission()
+
+const exportFile = async (exportType: ExportTypes) => {
+  let offset = 0
+  let c = 1
+  const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
+
+  try {
+    while (!isNaN(offset) && offset > -1) {
+      let res
+      if (isPublicView.value) {
+        const { exportFile: sharedViewExportFile } = useSharedView()
+        res = await sharedViewExportFile(fields.value, offset, exportType, responseType)
+      } else {
+        res = await $api.dbViewRow.export(
+          'noco',
+          project?.value.title as string,
+          meta?.value.title as string,
+          selectedView?.value.title as string,
+          exportType,
+          {
+            responseType,
+            query: {
+              offset,
+            },
+          } as any,
+        )
+      }
+      const { data, headers } = res
+      if (exportType === ExportTypes.EXCEL) {
+        const workbook = XLSX.read(data, { type: 'base64' })
+        XLSX.writeFile(workbook, `${meta?.value.title}_exported_${c++}.xlsx`)
+      } else if (exportType === ExportTypes.CSV) {
+        const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
+        FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
+      }
+      offset = +headers['nc-export-offset']
+      if (offset > -1) {
+        message.info('Downloading more files')
+      } else {
+        message.success('Successfully exported all table data')
+      }
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const Icon = computed(() => {
+  switch ((selectedView?.value as any)?.lock_type) {
+    case LockType.Personal:
+      return MdiAccountIcon
+    case LockType.Locked:
+      return MdiLockOutlineIcon
+    case LockType.Collaborative:
+    default:
+      return MdiAccountGroupIcon
+  }
+})
+
+async function changeLockType(type: LockType) {
+  $e('a:grid:lockmenu', { lockType: type })
+
+  if (!selectedView?.value) return
+
+  if (type === 'personal') {
+    return message.info('Coming soon')
+  }
+  try {
+    ;(selectedView.value as any).lock_type = type
+    $api.dbView.update(selectedView.value.id as string, {
+      lock_type: type,
+    })
+
+    message.success(`Successfully Switched to ${type} view`)
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+</script>
+
+<template>
+  <div>
+    <a-dropdown :trigger="['click']">
+      <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+        <div class="flex gap-2 items-center">
+          <component
+            :is="viewIcons[selectedView?.type].icon"
+            class="nc-view-icon group-hover:hidden"
+            :style="{ color: viewIcons[selectedView?.type].color }"
+          />
+          <span class="!text-sm font-weight-normal">{{ selectedView?.title }}</span>
+          <component :is="Icon" class="text-gray-500" />
+          <MdiMenuDown class="text-grey" />
+        </div>
+      </a-button>
+
+      <template #overlay>
+        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded">
+          <a-menu-item-group>
+            <a-sub-menu
+              v-if="isUIAllowed('view-type')"
+              key="lock-type"
+              class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"
+            >
+              <template #title>
+                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
+                  <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
+
+                  <MaterialSymbolsChevronRightRounded
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                  />
+                </div>
+              </template>
+
+              <template #expandIcon></template>
+              <a-menu-item @click="changeLockType(LockType.Collaborative)">
+                <SmartsheetToolbarLockType :type="LockType.Collaborative" />
+              </a-menu-item>
+              <a-menu-item @click="changeLockType(LockType.Locked)">
+                <SmartsheetToolbarLockType :type="LockType.Locked" />
+              </a-menu-item>
+              <a-menu-item @click="changeLockType(LockType.Personal)">
+                <SmartsheetToolbarLockType :type="LockType.Personal" />
+              </a-menu-item>
+            </a-sub-menu>
+            <a-menu-divider />
+            <a-sub-menu key="download">
+              <template #title>
+                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                  <MdiDownload class="group-hover:text-accent text-gray-500" />
+                  Download
+                  <div class="flex-1" />
+
+                  <MaterialSymbolsChevronRightRounded
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                  />
+                </div>
+              </template>
+
+              <template #expandIcon></template>
+              <a-menu-item>
+                <div v-t="['a:actions:download-csv']" class="nc-project-menu-item" @click="exportFile(ExportTypes.CSV)">
+                  <MdiDownloadOutline class="text-gray-500" />
+                  <!-- Download as CSV -->
+                  {{ $t('activity.downloadCSV') }}
+                </div>
+              </a-menu-item>
+              <a-menu-item>
+                <div v-t="['a:actions:download-excel']" class="nc-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+                  <MdiDownloadOutline class="text-gray-500" />
+                  <!-- Download as XLSX -->
+                  {{ $t('activity.downloadExcel') }}
+                </div>
+              </a-menu-item>
+            </a-sub-menu>
+            <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
+              <a-sub-menu key="upload">
+                <template #title>
+                  <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                    <MdiUpload class="group-hover:text-accent text-gray-500" />
+                    Upload
+                    <div class="flex-1" />
+
+                    <MaterialSymbolsChevronRightRounded
+                      class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                    />
+                  </div>
+                </template>
+
+                <template #expandIcon></template>
+                <a-menu-item>
+                  <div
+                    v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
+                    v-t="['a:actions:upload-csv']"
+                    class="nc-project-menu-item"
+                    :class="{ disabled: isLocked }"
+                    @click="!isLocked ? (quickImportDialog = true) : {}"
+                  >
+                    <MdiUploadOutline class="text-gray-500" />
+                    <!-- Upload CSV -->
+                    {{ $t('activity.uploadCSV') }}
+                  </div>
+                </a-menu-item>
+              </a-sub-menu>
+            </template>
+            <a-menu-divider />
+            <a-menu-item>
+              <div
+                v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
+                v-t="['a:actions:shared-view-list']"
+                class="py-2 flex gap-2 items-center"
+                @click="sharedViewListDlg = true"
+              >
+                <MdiViewListOutline class="text-gray-500" />
+                <!-- Shared View List -->
+                {{ $t('activity.listSharedView') }}
+              </div>
+            </a-menu-item>
+            <a-menu-item>
+              <div
+                v-if="isUIAllowed('webhook') && !isView && !isPublicView"
+                v-t="['c:actions:webhook']"
+                class="py-2 flex gap-2 items-center"
+                @click="showWebhookDrawer = true"
+              >
+                <MdiHook class="text-gray-500" />
+                {{ $t('objects.webhooks') }}
+              </div>
+            </a-menu-item>
+          </a-menu-item-group>
+        </a-menu>
+      </template>
+    </a-dropdown>
+
+    <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
+
+    <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
+
+    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
+      <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
+    </a-modal>
+  </div>
+</template>
+
+<style scoped>
+:deep(.ant-dropdown-menu-submenu-title) {
+  @apply py-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply hidden;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index b2600286d1..5511522399 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -314,7 +314,7 @@ const onNavigate = (dir: NavigateDir) => {
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table
           ref="smartTable"
-          class="xc-row-table nc-grid backgroundColorDefault !h-auto"
+          class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
           @contextmenu.prevent="contextMenu = true"
         >
           <thead>
@@ -475,11 +475,11 @@ const onNavigate = (dir: NavigateDir) => {
               <td
                 v-t="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"
-                class="text-left pointer nc-grid-add-new-cell"
+                class="text-left pointer nc-grid-add-new-cell cursor-pointer"
                 @click="addEmptyRow()"
               >
                 <div class="px-2 w-full flex items-center text-gray-500">
-                  <MdiPlus class="text-pint-500 text-xs ml-2" />
+                  <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
 
                   <span class="ml-1">
                     {{ $t('activity.addRow') }}
@@ -633,4 +633,8 @@ const onNavigate = (dir: NavigateDir) => {
     }
   }
 }
+
+tbody tr:hover {
+  @apply bg-gray-100 bg-opacity-50;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 7f7a7718e7..01260b88b3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,13 +1,25 @@
 <script setup lang="ts">
 import { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
+import ToggleDrawer from '~/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
-const { allowCSVDownload } = useSharedView()
 const isPublic = inject(IsPublicInj, ref(false))
+const { allowCSVDownload } = useSharedView()
+
+const { isOpen } = useSidebar()
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b" style="z-index: 7">
+  <div
+    class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
+    style="z-index: 7"
+  >
+    <SmartsheetToolbarViewActions
+      v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)"
+      :show-system-fields="false"
+      class="ml-1"
+    />
+
     <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
@@ -16,9 +28,14 @@ const isPublic = inject(IsPublicInj, ref(false))
 
     <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
-    <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
     <div class="flex-1" />
-    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2" />
+
+    <SmartsheetToolbarReload class="mx-1" />
+    <SmartsheetToolbarAddRow class="mx-1" />
+
+    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
+
+    <ToggleDrawer v-if="!isOpen" class="mr-2" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 53608f516a..7e82bfc530 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
-import { ref, useNuxtApp } from '#imports'
+import { ref } from '#imports'
 import { viewIcons } from '~/utils'
 
 interface Emits {
@@ -9,33 +9,20 @@ interface Emits {
 
 const emits = defineEmits<Emits>()
 
-const { $e } = useNuxtApp()
-
 const { isUIAllowed } = useUIPermission()
 
 const isView = ref(false)
 
-let showApiSnippet = $ref(false)
-
 const showWebhookDrawer = ref(false)
 
-function onApiSnippet() {
-  // get API snippet
-  showApiSnippet = true
-  $e('a:view:api-snippet')
-}
-
-function onWebhooks() {
-  showWebhookDrawer.value = true
-}
-
 function onOpenModal(type: ViewTypes, title = '') {
   emits('openModal', { type, title })
 }
 </script>
 
 <template>
-  <a-menu :selected-keys="[]" class="flex-1 flex flex-col">
+  <a-menu :selected-keys="[]" class="flex flex-col">
+    <div class="flex-1"></div>
     <div v-if="isUIAllowed('virtualViewsCreateOrEdit')">
       <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
         {{ $t('activity.createView') }}
@@ -52,7 +39,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" />
+            <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
 
             <div>{{ $t('objects.viewType.grid') }}</div>
 
@@ -74,7 +61,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" />
+            <component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" />
 
             <div>{{ $t('objects.viewType.gallery') }}</div>
 
@@ -97,7 +84,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" />
+            <component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" />
 
             <div>{{ $t('objects.viewType.form') }}</div>
 
@@ -107,28 +94,13 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
-    </div>
-
-    <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
 
-    <div class="flex-auto justify-end flex flex-col gap-3 mt-3">
-      <button
-        v-if="isUIAllowed('virtualViewsCreateOrEdit')"
-        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs nc-webhook-btn"
-        @click="onWebhooks"
-      >
-        <mdi-hook />{{ $t('objects.webhooks') }}
-      </button>
-
-      <button
-        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
-        @click="onApiSnippet"
-      >
-        <mdi-xml />Get API Snippet
-      </button>
+      <div class="w-full h-4"></div>
     </div>
 
-    <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
+    <!--
+       todo: bring back later
+       <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
       <template #front>
         <div class="flex h-full w-full gap-6 flex-col">
           <general-social />
@@ -148,7 +120,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </template>
 
       <template #back>
-        <!-- todo: add project cost -->
+        &lt;!&ndash; todo: add project cost &ndash;&gt;
         <a
           href="https://github.com/sponsors/nocodb"
           target="_blank"
@@ -159,7 +131,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           {{ $t('activity.sponsorUs') }}
         </a>
       </template>
-    </general-flipping-card>
+    </general-flipping-card> -->
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
   </a-menu>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index c8eee24f23..d5aaacb600 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -170,9 +170,7 @@ function onDeleted() {
 </script>
 
 <template>
-  <h3 class="pt-3 px-3 text-xs text-gray-500 font-semibold">{{ $t('objects.views') }}</h3>
-
-  <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu" :selected-keys="selected">
+  <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected">
     <RenameableMenuItem
       v-for="view of views"
       :id="view.id"
@@ -197,7 +195,7 @@ function onDeleted() {
 
 <style lang="scss">
 .nc-views-menu {
-  @apply flex-1 max-h-[30vh] overflow-y-scroll scrollbar-thin-dull;
+  @apply flex-1 min-h-[100px] overflow-y-scroll scrollbar-thin-dull;
 
   .ghost,
   .ghost > * {
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index ba9bfeb33c..5d00d5d02a 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -160,7 +160,7 @@ function onStopEdit() {
         <component
           :is="viewIcons[vModel.type].icon"
           class="nc-view-icon group-hover:hidden"
-          :class="`text-${viewIcons[vModel.type].color}`"
+          :style="{ color: viewIcons[vModel?.type]?.color }"
         />
       </div>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 896ad62a4a..243642228b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
+import type { ViewType, ViewTypes } from 'nocodb-sdk'
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
@@ -81,7 +81,7 @@ function openModal({ type, title = '', copyViewId }: { type: ViewTypes; title: s
 }
 
 /** Handle view creation */
-function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
+function onCreate(view: ViewType) {
   views.value.push(view)
   activeView.value = view
   router.push({ params: { viewTitle: view.title || '' } })
@@ -104,35 +104,12 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
       :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }"
     />
-
-    <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
-      <template #start>
-        <a-tooltip v-if="isUIAllowed('virtualViewsCreateOrEdit')" placement="left">
-          <template #title> {{ $t('objects.webhooks') }}</template>
-
-          <div class="nc-sidebar-right-item hover:after:bg-gray-300 nc-webhook-icon">
-            <MdiHook @click.stop />
-          </div>
-        </a-tooltip>
-
-        <div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="dot" />
-
-        <a-tooltip placement="left">
-          <template #title> Get API Snippet</template>
-
-          <div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
-            <MdiXml class="group-hover:(!text-white)" @click.stop />
-          </div>
-        </a-tooltip>
-
-        <div v-if="!isForm" class="dot" />
-      </template>
-    </Toolbar>
-
-    <div v-if="isOpen" class="flex-1 flex flex-col">
+    <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 
-      <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" />
+      <div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="px-3">
+        <div class="!my-3 w-full border-b-1 border-dashed" />
+      </div>
 
       <MenuBottom @open-modal="openModal" />
     </div>
@@ -156,8 +133,4 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 :deep(.ant-layout-sider-children) {
   @apply flex flex-col;
 }
-
-.dot {
-  @apply w-[3px] h-[3px] bg-gray-300 rounded-full;
-}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
deleted file mode 100644
index 10be4df20f..0000000000
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { OpenNewRecordFormHookInj, inject } from '#imports'
-
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
-const isLocked = inject(IsLockedInj)
-
-const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)!
-
-const onClick = () => {
-  if (!isLocked?.value) openNewRecordFormHook.trigger()
-}
-</script>
-
-<template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
-    <template #title> {{ $t('activity.addRow') }} </template>
-    <div
-      :class="{ 'hover:after:(bg-primary bg-opacity-75) group': !isLocked, 'disabled-ring': isLocked }"
-      class="nc-sidebar-right-item nc-sidebar-add-row"
-    >
-      <MdiPlusOutline :class="{ 'cursor-pointer group-hover:(!text-white)': !isLocked, 'disabled': isLocked }" @click="onClick" />
-    </div>
-  </a-tooltip>
-</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
deleted file mode 100644
index 27e9c9fcec..0000000000
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts" setup>
-import { message } from 'ant-design-vue'
-import { computed, useSmartsheetStoreOrThrow } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
-import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
-import MdiAccountIcon from '~icons/mdi/account'
-import MdiAccountGroupIcon from '~icons/mdi/account-group'
-
-enum LockType {
-  Personal = 'personal',
-  Locked = 'locked',
-  Collaborative = 'collaborative',
-}
-
-const { view, $api } = useSmartsheetStoreOrThrow()
-
-const { $e } = useNuxtApp()
-
-async function changeLockType(type: LockType) {
-  $e('a:grid:lockmenu', { lockType: type })
-
-  if (type === 'personal') {
-    return message.info('Coming soon')
-  }
-  try {
-    ;(view.value as any).lock_type = type
-    $api.dbView.update(view.value.id as string, {
-      lock_type: type,
-    })
-
-    message.success(`Successfully Switched to ${type} view`)
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const Icon = computed(() => {
-  switch ((view.value as any)?.lock_type) {
-    case LockType.Personal:
-      return MdiAccountIcon
-    case LockType.Locked:
-      return MdiLockOutlineIcon
-    case LockType.Collaborative:
-    default:
-      return MdiAccountGroupIcon
-  }
-})
-</script>
-
-<template>
-  <a-dropdown max-width="350" :trigger="['click']">
-    <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group nc-sidebar-lock-menu">
-      <Icon class="cursor-pointer group-hover:(!text-white)" />
-    </div>
-
-    <template #overlay>
-      <div class="min-w-[350px] max-w-[500px] shadow bg-white">
-        <div>
-          <div class="nc-menu-item" @click="changeLockType(LockType.Collaborative)">
-            <div>
-              <MdiCheck v-if="!view?.lock_type || view?.lock_type === LockType.Collaborative" />
-              <span v-else />
-              <div>
-                <MdiAccountGroupIcon />
-                Collaborative view
-                <div class="nc-subtitle">Collaborators with edit permissions or higher can change the view configuration.</div>
-              </div>
-            </div>
-          </div>
-          <div class="nc-menu-item" @click="changeLockType(LockType.Locked)">
-            <div>
-              <MdiCheck v-if="view.lock_type === LockType.Locked" />
-              <span v-else />
-              <div>
-                <MdiLockOutlineIcon />
-                Locked View
-                <div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div>
-              </div>
-            </div>
-          </div>
-          <div class="nc-menu-item" @click="changeLockType(LockType.Personal)">
-            <div>
-              <MdiCheck v-if="view.lock_type === LockType.Personal" />
-              <span v-else />
-              <div>
-                <MdiAccountIcon />
-                Personal view
-                <div class="nc-subtitle">
-                  Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </a-dropdown>
-</template>
-
-<style scoped>
-.nc-menu-item > div {
-  @apply grid grid-cols-[30px,auto] gap-2  p-2 items-center;
-}
-
-.nc-menu-item > div > svg {
-  align-self: center;
-}
-
-.nc-menu-option > :first-child {
-  @apply self-center;
-}
-
-.nc-subtitle {
-  @apply font-size-sm font-weight-light;
-}
-</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
index 3e3d78a6f6..25ce4945c6 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@@ -4,15 +4,12 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'" :mouse-enter-delay="0.8">
-    <template #title> Toggle sidebar</template>
-
-    <div class="nc-sidebar-right-item hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row">
-      <MdiChevronDoubleLeft
-        class="cursor-pointer group-hover:(!text-white) transform transition-transform"
-        :class="{ 'rotate-180': isOpen }"
-        @click="toggle(!isOpen)"
-      />
-    </div>
-  </a-tooltip>
+  <div :class="{ 'nc-active-btn': isOpen }">
+    <a-button size="small" @click="toggle(!isOpen)">
+      <div class="flex items-center gap-1 text-xs" :class="{ 'text-gray-500': !isOpen }">
+        <MdiMenu class="!text-xs" />
+        Views
+      </div>
+    </a-button>
+  </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index bcf68ba916..5e9440d2bf 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -1,28 +1,21 @@
 <script lang="ts" setup>
-import AddRow from './AddRow.vue'
-import LockMenu from './LockMenu.vue'
-import Reload from './Reload.vue'
 import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
 import DebugMeta from './DebugMeta.vue'
 import ToggleDrawer from './ToggleDrawer.vue'
 import { IsFormInj } from '#imports'
 
-const { isUIAllowed } = useUIPermission()
-
 const isForm = inject(IsFormInj)
 
 const debug = $ref(false)
 
 const clickCount = $ref(0)
-
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
   <div
     v-if="!isForm"
-    class="flex gap-2"
+    class="flex gap-2 justify-start"
     @click="
       () => {
         clickCount = clickCount + 1
@@ -31,7 +24,8 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
     "
   >
     <slot name="start" />
-
+    <ToggleDrawer />
+    <span></span>
     <template v-if="debug">
       <ExportCache />
 
@@ -46,20 +40,6 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
       <div class="dot" />
     </template>
 
-    <LockMenu v-if="isUIAllowed('view-type')" @click.stop />
-
-    <div v-if="isUIAllowed('view-type')" class="dot" />
-
-    <Reload @click.stop />
-
-    <div class="dot" />
-
-    <AddRow v-if="isUIAllowed('xcDatatableEditable')" @click.stop />
-
-    <div :class="{ 'w-[calc(100%_+_16px)] h-[1px] bg-gray-200 mt-1 -ml-1': !isOpen, 'dot': isOpen }" />
-
-    <ToggleDrawer />
-
     <slot name="end" />
   </div>
   <div v-else>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 632edb2a24..ca045fc415 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -76,7 +76,7 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
 
       <template v-if="meta">
         <div class="flex flex-1 min-h-0">
-          <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0">
+          <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
             <SmartsheetGrid v-if="isGrid" :ref="el" />
 
             <SmartsheetGallery v-else-if="isGallery" />
@@ -86,7 +86,12 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
         </div>
       </template>
     </div>
-
-    <SmartsheetSidebar v-if="meta" />
+    <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
   </div>
 </template>
+
+<style scoped>
+:deep(.nc-right-sidebar.ant-layout-sider-collapsed) {
+  @apply !w-0 !max-w-0 !min-w-0 overflow-x-hidden;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 6875ae2c88..5f8b570e1f 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -80,7 +80,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
     </div>
     <div
       v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')"
-      class="flex-1 flex justify-end gap-1 min-h-[30px] items-center"
+      class="flex justify-end gap-1 min-h-[30px] items-center"
     >
       <component
         :is="addIcon"
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 723a3af3d8..dd04ea45a9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -95,10 +95,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
           </span>
         </template>
       </div>
-      <div
-        v-if="!isLocked && isUIAllowed('xcDatatableEditable')"
-        class="flex-1 flex justify-end gap-1 min-h-[30px] items-center"
-      >
+      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex justify-end gap-1 min-h-[30px] items-center">
         <MdiArrowExpand
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click="childListDlg = true"
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index ba0e9261e9..cbc9bdd0ae 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -94,7 +94,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
         </template>
       </div>
 
-      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex-1 flex justify-end gap-1 min-h-[30px] items-center">
+      <div v-if="!isLocked && isUIAllowed('xcDatatableEditable')" class="flex justify-end gap-1 min-h-[30px] items-center">
         <MdiArrowExpand
           class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click="childListDlg = true"
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 0e68061b57..58ca5f6cb6 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -44,7 +44,7 @@ export default {
 
 <template>
   <div
-    class="group py-1 px-2 mr-1 my-1 flex items-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
+    class="chip group py-1 px-2 mr-1 my-1 flex items-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
     :class="{ active }"
     @click="expandedFormDlg = true"
   >
@@ -74,6 +74,7 @@ export default {
   .name {
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 }
 </style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 0279707e05..58db09fc73 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -81,9 +81,9 @@ const expandedFormRow = ref()
 </script>
 
 <template>
-  <component :is="container" v-model:visible="vModel" :footer="null" title="Child list">
-    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
-      <div class="flex mb-4 items-center gap-2">
+  <component :is="container" v-model:visible="vModel" :footer="null" title="Child list" :body-style="{ padding: 0 }">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
+      <div class="flex mb-4 items-center gap-2 px-12">
         <div class="flex-1" />
 
         <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
@@ -96,11 +96,11 @@ const expandedFormRow = ref()
         </a-button>
       </div>
       <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
-        <div class="flex-1 overflow-auto min-h-0">
+        <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12">
           <a-card
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
-            class="m-2 hover:(!bg-gray-200/50 shadow-md)"
+            class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
             @click="
               () => {
                 expandedFormRow = row
@@ -113,7 +113,6 @@ const expandedFormRow = ref()
                 {{ row[relatedTablePrimaryValueProp] }}
                 <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
-              <div class="flex-1"></div>
               <div v-if="!readonly" class="flex gap-2">
                 <MdiLinkVariantRemove
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
@@ -128,15 +127,18 @@ const expandedFormRow = ref()
             </div>
           </a-card>
         </div>
-        <a-pagination
-          v-if="!isNew && childrenList?.pageInfo"
-          v-model:current="childrenListPagination.page"
-          v-model:page-size="childrenListPagination.size"
-          class="mt-2 mx-auto"
-          size="small"
-          :total="childrenList.pageInfo.totalRows"
-          show-less-items
-        />
+
+        <div class="flex justify-center mt-6">
+          <a-pagination
+            v-if="!isNew && childrenList?.pageInfo"
+            v-model:current="childrenListPagination.page"
+            v-model:page-size="childrenListPagination.size"
+            class="mt-2 mx-auto"
+            size="small"
+            :total="childrenList.pageInfo.totalRows"
+            show-less-items
+          />
+        </div>
       </template>
       <a-empty
         v-else
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 6f75f4960c..ab5e7f9ba6 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -97,9 +97,9 @@ const newRowState = computed(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" title="Link Record">
-    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
-      <div class="flex mb-4 items-center gap-2">
+  <a-modal v-model:visible="vModel" :footer="null" title="Link Record" :body-style="{ padding: 0 }">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
+      <div class="flex mb-4 items-center gap-2 px-12">
         <a-input
           v-model:value="childrenExcludedListPagination.query"
           placeholder="Filter query"
@@ -111,11 +111,11 @@ const newRowState = computed(() => {
         <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
-        <div class="flex-1 overflow-auto min-h-0">
+        <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12">
           <a-card
             v-for="(refRow, i) in childrenExcludedList?.list ?? []"
             :key="i"
-            class="m-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
+            class="!my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
             @click="linkRow(refRow)"
           >
             {{ refRow[relatedTablePrimaryValueProp]
@@ -124,15 +124,17 @@ const newRowState = computed(() => {
             >
           </a-card>
         </div>
-        <a-pagination
-          v-if="childrenExcludedList?.pageInfo"
-          v-model:current="childrenExcludedListPagination.page"
-          v-model:page-size="childrenExcludedListPagination.size"
-          class="mt-2 mx-auto !text-xs"
-          size="small"
-          :total="childrenExcludedList.pageInfo.totalRows"
-          show-less-items
-        />
+        <div class="flex justify-center mt-6">
+          <a-pagination
+            v-if="childrenExcludedList?.pageInfo"
+            v-model:current="childrenExcludedListPagination.page"
+            v-model:page-size="childrenExcludedListPagination.size"
+            class="mt-2 !text-xs"
+            size="small"
+            :total="childrenExcludedList.pageInfo.totalRows"
+            show-less-items
+          />
+        </div>
       </template>
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
diff --git a/packages/nc-gui-v2/composables/useTheme/index.ts b/packages/nc-gui-v2/composables/useTheme/index.ts
index 52b3f62c82..ca4cfa29dd 100644
--- a/packages/nc-gui-v2/composables/useTheme/index.ts
+++ b/packages/nc-gui-v2/composables/useTheme/index.ts
@@ -1,7 +1,7 @@
 import { ConfigProvider } from 'ant-design-vue'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import { useStorage } from '@vueuse/core'
-import { NOCO, hexToRGB, themeV2Colors, toRefs, useCssVar, useInjectionState } from '#imports'
+import { NOCO, hexToRGB, themeV2Colors, useCssVar, useInjectionState } from '#imports'
 
 interface ThemeConfig extends AntTheme {
   primaryColor: string
diff --git a/packages/nc-gui-v2/lib/enums.ts b/packages/nc-gui-v2/lib/enums.ts
index bbe6239fe2..8bd979b8ce 100644
--- a/packages/nc-gui-v2/lib/enums.ts
+++ b/packages/nc-gui-v2/lib/enums.ts
@@ -54,3 +54,9 @@ export enum NavigateDir {
   NEXT,
   PREV,
 }
+
+export enum LockType {
+  Personal = 'personal',
+  Locked = 'locked',
+  Collaborative = 'collaborative',
+}
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 51b78ee83a..950b4040a6 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -203,7 +203,7 @@ const onMenuClose = (visible: boolean) => {
                 </a-tooltip>
                 <div v-else class="text-lg font-semibold truncate">{{ project.title }}</div>
 
-                <MdiChevronDown class="min-w-[28.5px] group-hover:text-accent text-2xl" />
+                <MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
               </template>
 
               <template v-else>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index eb8ab499e9..fdf703998c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -56,10 +56,10 @@ const { isOpen, toggle } = useSidebar()
         <span class="flex-1" />
 
         <div class="flex justify-center self-center mr-2 min-w-[115px]">
-          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-white">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200">
             {{ $t('general.loading') }}
 
-            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+            <MdiLoading :class="{ 'animate-infinite animate-spin': isLoading }" />
           </div>
         </div>
       </div>
diff --git a/packages/nc-gui-v2/utils/viewUtils.ts b/packages/nc-gui-v2/utils/viewUtils.ts
index 53df82bb51..f8b23afb6e 100644
--- a/packages/nc-gui-v2/utils/viewUtils.ts
+++ b/packages/nc-gui-v2/utils/viewUtils.ts
@@ -1,4 +1,5 @@
 import { ViewTypes } from 'nocodb-sdk'
+import { themeV2Colors } from '~/utils'
 
 import MdiGridIcon from '~icons/mdi/grid-large'
 import MdiFormIcon from '~icons/mdi/form-select'
@@ -8,8 +9,8 @@ import MdiKanbanIcon from '~icons/mdi/tablet-dashboard'
 import MdiEyeIcon from '~icons/mdi/eye-circle-outline'
 
 export const viewIcons = {
-  [ViewTypes.GRID]: { icon: MdiGridIcon, color: 'blue' },
-  [ViewTypes.FORM]: { icon: MdiFormIcon, color: 'pink' },
+  [ViewTypes.GRID]: { icon: MdiGridIcon, color: '#8f96f2' },
+  [ViewTypes.FORM]: { icon: MdiFormIcon, color: themeV2Colors.pink['500'] },
   calendar: { icon: MdiCalendarIcon, color: 'purple' },
   [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' },
   [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' },
diff --git a/packages/nc-gui/nuxt.config.js b/packages/nc-gui/nuxt.config.js
index 3479af3252..c1f56f67a3 100644
--- a/packages/nc-gui/nuxt.config.js
+++ b/packages/nc-gui/nuxt.config.js
@@ -224,6 +224,7 @@ export default {
         config.output.publicPath = './_nuxt/'
       }
 
+
       return config
     }
   },