diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index bc08b3a4d7..835e96b818 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -1,23 +1,28 @@
 <script setup lang="ts">
+import { computed } from '@vue/reactivity'
 import { onMounted } from '@vue/runtime-core'
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { $computed } from 'vue/macros'
-import { useNuxtApp } from '#app'
+import { useNuxtApp, useRoute } from '#app'
 // import Draggable  from 'vuedraggable'
 import useProject from '~/composables/useProject'
 import useTabs from '~/composables/useTabs'
 import MdiSettingIcon from '~icons/mdi/cog'
 import MdiTable from '~icons/mdi/table'
+import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiMenuDown from '~icons/mdi/chevron-down'
 import MdiPlus from '~icons/mdi/plus-circle-outline'
 import MdiDrag from '~icons/mdi/drag-vertical'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
+import MdiAPIDocIcon from '~icons/mdi/open-in-new'
 
-const { tables } = useProject()
 const { addTab } = useTabs()
 const { $api } = useNuxtApp()
+const { isUIAllowed } = useUIPermission()
+const route = useRoute()
+const { tables, loadTables } = useProject(route.params.projectId as string)
 
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
@@ -28,11 +33,14 @@ const tablesById = $computed<Record<string, TableType>>(() =>
 
 const settingsDlg = ref(false)
 const showTableList = ref(true)
+const tableCreateDlg = ref(false)
+const tableDeleteDlg = ref(false)
 
 onMounted(() => {
   setTimeout(() => {
     const el = document.querySelector('.sortable-list') // Must get this DomElement,
     Sortable.create(el, {
+      handle: '.nc-drag-icon',
       onChange: async (evt) => {
         const { newIndex = 0, oldIndex = 0 } = evt
 
@@ -68,70 +76,125 @@ onMounted(() => {
     })
   }, 1000)
 })
+
+const icon = (table: TableType) => {
+  if (table.type === 'table') {
+    return MdiTableLarge
+  }
+  if (table.type === 'view') {
+    return MdiView
+  }
+}
+
+const apiLink = computed(
+  () =>
+    // new URL(
+    `/api/v1/db/meta/projects/${route.params.projectId}/swagger`,
+  // todo: get siteUrl
+  // this.$store.state.project.appInfo && this.$store.state.project.appInfo.ncSiteUrl
+  // ),
+)
+
+const filterQuery = $ref('')
+const filteredTables = $computed(() => {
+  return tables?.value?.filter((table) => !filterQuery || table?.title.toLowerCase()?.includes(filterQuery.toLowerCase()))
+})
+
+const contextMenuTarget = reactive<{ type: 'table' | 'main'; value?: any }>({})
+const setMenuContext = (type: 'table' | 'main', value?: any) => {
+  contextMenuTarget.type = type
+  contextMenuTarget.value = value
+}
 </script>
 
 <template>
   <div class="nc-treeview-container flex flex-column">
     <div class="p-1">
-      <a-input-search :placeholder="$t('placeholder.searchProjectTree')" />
+      <a-input-search
+        v-model:value="filterQuery"
+        size="small"
+        class="nc-filter-input"
+        :placeholder="$t('placeholder.searchProjectTree')"
+      />
     </div>
 
-    <div class="p-1 flex-1 overflow-y-auto flex flex-column">
-      <div class="p-1 flex w-full align-center gap-1" @click="showTableList = !showTableList">
-        <MdiTable class="mr-1 text-gray-500" />
-        <span class="flex-grow">{{ $t('objects.tables') }}</span>
-        <MdiPlus />
-        <MdiMenuDown />
-      </div>
-      <div class="flex-1">
-        <div class="transition-height duration-200 overflow-hidden" :class="{ 'h-100': showTableList, 'h-0': !showTableList }">
-          <a-menu class="border-none sortable-list">
-            <a-menu-item
-              v-for="table in tables"
-              :key="table.id"
-              class="!pl-1 py-1 !h-[28px] !my-0 text-sm pointer group"
-              :data-order="table.order"
-              :data-id="table.id"
-              @click="addTab({ type: 'table', title: table.title, id: table.id })"
-            >
-              <div class="flex align-center gap-1">
-                <MdiDrag class="transition-opacity opacity-0 group-hover:opacity-100 text-gray-500" />
-                <MdiTableLarge class="text-xs text-gray-500" />
-
-                <span class="text-sm flex-1">{{ table.title }}</span>
-                <a-dropdown :trigger="['click']">
-                  <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
-                  <template #overlay>
-                    <a-menu>
-                      <a-menu-item> Rename</a-menu-item>
-                      <a-menu-item> UI ACL</a-menu-item>
-                      <a-menu-item> Delete</a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-              </div>
-            </a-menu-item>
-          </a-menu>
+    <a-dropdown :trigger="['contextmenu']" >
+      <div class="p-1 flex-1 overflow-y-auto flex flex-column">
+        <div
+          class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
+          @click="showTableList = !showTableList"
+          @contextmenu="setMenuContext('main')"
+        >
+          <MdiTable class="mr-1 text-gray-500" />
+          <span class="flex-grow text-bold">{{ $t('objects.tables') }} <template v-if="tables?.length">({{tables.length}})</template></span>
+          <MdiPlus class="text-gray-500" @click.stop="tableCreateDlg = true" />
+          <MdiMenuDown
+            class="transition-transform !duration-100 text-gray-500"
+            :class="{ 'transform rotate-180': showTableList }"
+          />
+        </div>
+        <div class="flex-1">
+          <div class="transition-height duration-200 overflow-hidden" :class="{ 'h-100': showTableList, 'h-0': !showTableList }">
+            <a-menu class="border-none sortable-list">
+              <a-menu-item
+                v-for="table in filteredTables"
+                :key="table.id"
+                class="!pl-1 py-1 !h-[28px] !my-0 text-sm pointer group"
+                :data-order="table.order"
+                :data-id="table.id"
+                @click="addTab({ type: 'table', title: table.title, id: table.id })"
+              >
+                <div class="flex align-center gap-1" @contextmenu="setMenuContext('table', table)">
+                  <MdiDrag class="transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move" />
+                  <component :is="icon(table)" class="text-xs text-gray-500" />
+
+                  <span class="text-xs flex-1">{{ table.title }}</span>
+                  <a-dropdown :trigger="['click']">
+                    <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
+                    <template #overlay>
+                      <a-menu>
+                        <a-menu-item class="!text-xs"> Rename</a-menu-item>
+                        <a-menu-item class="!text-xs"> UI ACL</a-menu-item>
+                        <a-menu-item class="!text-xs"> Delete</a-menu-item>
+                      </a-menu>
+                    </template>
+                  </a-dropdown>
+                </div>
+              </a-menu-item>
+            </a-menu>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!--    <a-menu class="flex-1 overflow-y-auto">
-      <a-menu-item
-        v-for="table in tables"
-        :key="table.id"
-        class="p-2 text-sm pointer"
-        @click="addTab({ type: 'table', title: table.title, id: table.id })"
-      >
-        {{ table.title }}
-      </a-menu-item>
-    </a-menu> -->
-    <div class="cursor-pointer nc-team-settings pa-4 flex align-center hover:bg-gray-200/20" @click="settingsDlg = true">
+      <template #overlay>
+        <a-menu>
+          <template v-if="contextMenuTarget.type === 'table'">
+            <a-menu-item class="!text-xs">Table Rename</a-menu-item>
+            <a-menu-item class="!text-xs">Table Delete</a-menu-item>
+          </template>
+          <template v-else>
+            <a-menu-item @click="loadTables" class="!text-xs">Tables Refresh</a-menu-item>
+          </template>
+        </a-menu>
+      </template>
+    </a-dropdown>
+    <div class="w-full h-[1px] bg-gray-200" />
+    <a v-if="isUIAllowed('apiDocs')" v-t="['e:api-docs']" class="nc-treeview-footer-item" :href="apiLink" target="_blank">
+      <MdiAPIDocIcon class="mr-2" />
+      <span> {{ $t('title.apiDocs') }}</span>
+    </a>
+    <div
+      v-if="isUIAllowed('settings')"
+      v-t="['c:navdraw:project-settings']"
+      class="nc-treeview-footer-item nc-team-settings"
+      @click="settingsDlg = true"
+    >
       <MdiSettingIcon class="mr-2" />
       <span> {{ $t('title.teamAndSettings') }}</span>
     </div>
 
     <a-modal v-model:visible="settingsDlg" width="max(90vw, 600px)"> Team and settings</a-modal>
+    <DlgTableCreate v-model="tableCreateDlg"/>
   </div>
 </template>
 
@@ -143,4 +206,12 @@ onMounted(() => {
 .nc-treeview-container {
   height: calc(100vh - var(--header-height));
 }
+
+.nc-treeview-footer-item {
+  @apply cursor-pointer px-4 py-2 flex align-center hover:bg-gray-200/20 text-xs text-current;
+}
+
+:deep(.nc-filter-input input::placeholder) {
+  @apply !text-xs;
+}
 </style>
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index ed3eb1464c..0665c7487c 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -1,6 +1,8 @@
 import { SqlUiFactory } from 'nocodb-sdk'
 import type { ProjectType, TableType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
+import { ComputedRef } from 'vue'
+import { ComputedVariable } from 'vue/macros'
 import { useNuxtApp, useState } from '#app'
 import { USER_PROJECT_ROLES } from '~/lib/constants'