diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 9dc4db9d73..c7c6c62015 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 8bd4a68f76..6015aec1c5 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -3,15 +3,15 @@ import { computed, ref } from '#imports'
 import { ColumnInj } from '~/components'
 import { isValidURL } from '~/utils/urlUtils'
 
+interface Props {
+  modelValue: string
+}
+
 const { modelValue: value } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 const column = inject(ColumnInj)
 const editEnabled = inject<boolean>('editEnabled')
 
-interface Props {
-  modelValue: string
-}
-
 const localState = computed({
   get: () => value,
   set: (val) => {
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index 21b8c7d7e8..16c35bc7f1 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -14,6 +14,8 @@ interface Props {
 
 const { projects } = defineProps<Props>()
 
+const emit = defineEmits(['delete-project'])
+
 const { $e } = useNuxtApp()
 
 const { getColorByIndex } = useColors(true)
@@ -72,18 +74,18 @@ const formatTitle = (title: string) =>
 
         <MdiStarOutline class="star-icon" @click.stop />
 
-        <v-menu>
-          <template #activator="{ props }">
-            <MdiMenuDown class="menu-icon" @click.stop="props.onClick" />
-          </template>
-
-          <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300">
-            <div class="grid grid-cols-6 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click.stop>
+        <a-dropdown @click.stop>
+          <MdiMenuDown class="menu-icon" />
+          <template #overlay>
+            <div
+              class="grid grid-cols-6 cursor-pointer flex items-center p-2 border-1 bg-white dark:bg-slate-800 hover:bg-gray-200"
+              @click.stop="emit('delete-project', project)"
+            >
               <MdiDeleteOutline class="col-span-2 mr-1 mt-[1px] text-red text-lg" />
               <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
             </div>
-          </v-list>
-        </v-menu>
+          </template>
+        </a-dropdown>
       </div>
 
       <div class="prose-lg font-semibold">
@@ -104,6 +106,7 @@ const formatTitle = (title: string) =>
   content: '';
   z-index: -1;
 }
+
 .thumbnail:hover::after {
   @apply shadow-2xl transform scale-110;
 }
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index bb3afda953..a36b03a9f6 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import type { ProjectType } from 'nocodb-sdk'
+import { useToast } from 'vue-toastification'
 import { navigateTo } from '#app'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
 import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 import MdiPlus from '~icons/mdi/plus'
@@ -32,10 +35,19 @@ const navDrawerOptions = [
 const route = useRoute()
 
 const { $api, $state } = useNuxtApp()
+const toast = useToast()
 
 const response = await $api.project.list({})
 const projects = $ref(response.list)
 const activePage = $ref(navDrawerOptions[0].title)
+const deleteProject = async (project: ProjectType) => {
+  try {
+    await $api.project.delete(project.id as string)
+    projects.splice(projects.indexOf(project), 1)
+  } catch (e) {
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
 </script>
 
 <template>
@@ -119,7 +131,7 @@ const activePage = $ref(navDrawerOptions[0].title)
 
       <a-divider class="!mb-4 lg:(!mb-8)" />
 
-      <NuxtPage :projects="projects" />
+      <NuxtPage :projects="projects" @delete-project="deleteProject" />
     </v-container>
   </NuxtLayout>
 </template>