diff --git a/frontend/app/components/modules/collection/components/details/header.vue b/frontend/app/components/modules/collection/components/details/header.vue
index e1ed84b5..aa7968af 100644
--- a/frontend/app/components/modules/collection/components/details/header.vue
+++ b/frontend/app/components/modules/collection/components/details/header.vue
@@ -121,7 +121,7 @@ SPDX-License-Identifier: MIT
                 />
               </lfx-tooltip>
               <lfx-button
-                v-if="props.type === 'my-collections'"
+                v-if="props.type === CollectionTypeEnum.MY_COLLECTIONS"
                 type="outline"
                 class="!rounded-full"
                 @click="handleEdit"
@@ -145,6 +145,29 @@ SPDX-License-Identifier: MIT
               <lfx-icon name="share-nodes" />
               Share
             </lfx-button>
+
+            <lfx-dropdown
+              v-if="props.type === CollectionTypeEnum.MY_COLLECTIONS"
+              placement="bottom-end"
+              :class="isDeleting ? 'opacity-50 cursor-not-allowed' : ''"
+              :disabled="isDeleting"
+            >
+              <template #trigger>
+                <lfx-icon-button
+                  icon="ellipsis"
+                  type="transparent"
+                  class="!text-neutral-900"
+                />
+              </template>
+              <lfx-dropdown-item @click.stop.prevent="handleDelete">
+                <lfx-icon
+                  name="trash"
+                  :size="16"
+                  class="!text-negative-500"
+                />
+                <span class="text-negative-500">Delete</span>
+              </lfx-dropdown-item>
+            </lfx-dropdown>
           </div>
         </div>
       </div>
@@ -216,18 +239,34 @@ SPDX-License-Identifier: MIT
       </div>
     </section>
   </div>
+
+  <!-- Full-page loading overlay for delete operation -->
+  <teleport to="body">
+    <div
+      v-if="isDeleting"
+      class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black/50"
+    >
+      <lfx-spinner
+        :size="48"
+        class="text-white"
+      />
+      <p class="mt-4 text-white text-sm font-medium">Deleting collection...</p>
+    </div>
+  </teleport>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRouter } from 'nuxt/app';
-import { collectionTabs, headerBackground } from '../../config/collection-type-config';
+import { useQueryClient } from '@tanstack/vue-query';
+import { collectionTabs, headerBackground, CollectionTypeEnum } from '../../config/collection-type-config';
 import type { Collection } from '~~/types/collection';
 import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import useScroll from '~/components/shared/utils/scroll';
 import LfxSkeleton from '~/components/uikit/skeleton/skeleton.vue';
+import LfxSpinner from '~/components/uikit/spinner/spinner.vue';
 import LfxButton from '~/components/uikit/button/button.vue';
 import CollectionOwner from '~/components/shared/components/collection-owner.vue';
 import { formatDate } from '~/components/shared/utils/formatter';
@@ -240,9 +279,19 @@ import LfxLikeButton from '~/components/shared/components/like-button.vue';
 import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
 import { useEditCollectionStore } from '~/components/modules/collection/store/edit-collection.store';
 import { useDuplicateCollectionStore } from '~/components/modules/collection/store/duplicate-collection.store';
+import LfxDropdown from '~/components/uikit/dropdown/dropdown.vue';
+import LfxDropdownItem from '~/components/uikit/dropdown/dropdown-item.vue';
+import { useConfirmStore } from '~/components/shared/modules/confirm/store/confirm.store';
+import { TanstackKey } from '~/components/shared/types/tanstack';
+import { COLLECTIONS_API_SERVICE } from '~/components/modules/collection/services/collections.api.service';
+import { ToastTypesEnum } from '~/components/uikit/toast/types/toast.types';
+import useToastService from '~/components/uikit/toast/toast.service';
 
 const { openEditModal } = useEditCollectionStore();
 const { openDuplicateModal } = useDuplicateCollectionStore();
+const { openConfirmModal } = useConfirmStore();
+const { showToast } = useToastService();
+const queryClient = useQueryClient();
 
 const authStore = useAuthStore();
 const { user } = storeToRefs(authStore);
@@ -287,6 +336,8 @@ const currentSort = computed(() => {
   return { field: props.sort, direction: 'asc' as const };
 });
 
+const isDeleting = ref(false);
+
 const handleSort = (field: string) => {
   const defaultDirections: Record<string, 'asc' | 'desc'> = {
     name: 'asc',
@@ -347,6 +398,39 @@ const handleClone = () => {
     });
   }
 };
+
+const handleDelete = () => {
+  if (props.collection && !isDeleting.value) {
+    try {
+      openConfirmModal({
+        title: 'Delete collection',
+        message: `Are you sure you want to delete this collection?`,
+        confirmLabel: 'Delete',
+        cancelLabel: 'Cancel',
+      }).then(async (result) => {
+        if (result) {
+          isDeleting.value = true;
+          await COLLECTIONS_API_SERVICE.deleteCollection(props.collection!.id);
+
+          invalidateMyCollections();
+          isDeleting.value = false;
+          router.push({ name: LfxRoutes.COLLECTIONS_MY_COLLECTIONS });
+        }
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to delete collection';
+      showToast(message, ToastTypesEnum.negative);
+    } finally {
+      isDeleting.value = false;
+    }
+  }
+};
+
+const invalidateMyCollections = () => {
+  queryClient.invalidateQueries({
+    queryKey: [TanstackKey.MY_COLLECTIONS],
+  });
+};
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/components/modules/collection/config/collection-type-config.ts b/frontend/app/components/modules/collection/config/collection-type-config.ts
index 393aa379..fac45619 100644
--- a/frontend/app/components/modules/collection/config/collection-type-config.ts
+++ b/frontend/app/components/modules/collection/config/collection-type-config.ts
@@ -6,6 +6,12 @@ import type { MenuItem } from '~/config/menu';
 import type { CollectionType } from '~~/types/collection';
 import type { User } from '~~/types/auth/auth-user.types';
 
+export enum CollectionTypeEnum {
+  CURATED = 'curated',
+  COMMUNITY = 'community',
+  MY_COLLECTIONS = 'my-collections',
+}
+
 export interface CollectionTypesTabs extends MenuItem {
   type: CollectionType;
   description: string;
@@ -20,7 +26,7 @@ export const collectionTabs = (user: User | null): CollectionTypesTabs[] => {
       route: LfxRoutes.COLLECTIONS_CURATED,
       activeClass: '!bg-neutral-200',
       iconHighlightClass: '!bg-neutral-900',
-      type: 'curated',
+      type: CollectionTypeEnum.CURATED,
       description: 'Hand-picked collections from The Linux Foundation.',
     },
   ];
@@ -32,7 +38,7 @@ export const collectionTabs = (user: User | null): CollectionTypesTabs[] => {
     route: LfxRoutes.COLLECTIONS_COMMUNITY,
     activeClass: '!bg-accent-200',
     iconHighlightClass: '!bg-accent-500',
-    type: 'community',
+    type: CollectionTypeEnum.COMMUNITY,
     description: 'Discover collections from the open source community.',
   });
 
@@ -44,7 +50,7 @@ export const collectionTabs = (user: User | null): CollectionTypesTabs[] => {
       route: LfxRoutes.COLLECTIONS_MY_COLLECTIONS,
       activeClass: '!bg-discovery-200',
       iconHighlightClass: '!bg-discovery-500',
-      type: 'my-collections',
+      type: CollectionTypeEnum.MY_COLLECTIONS,
       description: "Collections you've created or liked.",
     });
   }
@@ -55,13 +61,13 @@ export const collectionTabs = (user: User | null): CollectionTypesTabs[] => {
 // This only applies to the collection details page header
 export const headerBackground = (type?: CollectionType, curatedColor?: string | null) => {
   switch (type) {
-    case 'curated':
+    case CollectionTypeEnum.CURATED:
       return {
         background: curatedColor
           ? `linear-gradient(0deg, ${curatedColor}00, ${curatedColor}0D), var(--White, #FFF)`
           : 'linear-gradient(0deg, #0F172B00, #0F172B0D), var(--White, #FFF)',
       };
-    case 'community':
+    case CollectionTypeEnum.COMMUNITY:
       return {
         background: 'linear-gradient(0deg, #009AFF00, #009AFF0D), var(--White, #FFF)',
       };
diff --git a/frontend/app/components/modules/collection/services/collections.api.service.ts b/frontend/app/components/modules/collection/services/collections.api.service.ts
index eb46a361..c1c29a73 100644
--- a/frontend/app/components/modules/collection/services/collections.api.service.ts
+++ b/frontend/app/components/modules/collection/services/collections.api.service.ts
@@ -15,6 +15,7 @@ import type { ProjectInsights } from '~~/types/project';
 import { TanstackKey } from '~/components/shared/types/tanstack';
 import type { SearchProject, SearchResults } from '~~/types/search';
 import { type User } from '~~/types/auth/auth-user.types';
+import { CollectionTypeEnum } from '~/components/modules/collection/config/collection-type-config';
 
 export interface CategoryGroupOptions {
   value: string;
@@ -220,10 +221,10 @@ class CollectionsApiService {
   }
 
   fetchDiscoveryCuratedCollections() {
-    const params = this.discoveryParams('curated');
+    const params = this.discoveryParams(CollectionTypeEnum.CURATED);
     const queryKey = computed(() => [
       TanstackKey.COLLECTION_DISCOVERY,
-      'curated',
+      CollectionTypeEnum.CURATED,
       params.sort,
       params.pageSize,
       params.type,
@@ -238,10 +239,10 @@ class CollectionsApiService {
   }
 
   fetchDiscoveryCommunityCollections() {
-    const params = this.discoveryParams('community');
+    const params = this.discoveryParams(CollectionTypeEnum.COMMUNITY);
     const queryKey = computed(() => [
       TanstackKey.COLLECTION_DISCOVERY,
-      'community',
+      CollectionTypeEnum.COMMUNITY,
       params.sort,
       params.pageSize,
       params.type,
@@ -256,10 +257,10 @@ class CollectionsApiService {
   }
 
   fetchDiscoveryMyCollections(user: User | null) {
-    const params = this.discoveryParams('my-collections');
+    const params = this.discoveryParams(CollectionTypeEnum.MY_COLLECTIONS);
     const queryKey = computed(() => [
       TanstackKey.COLLECTION_DISCOVERY,
-      'my',
+      CollectionTypeEnum.MY_COLLECTIONS,
       params.sort,
       params.pageSize,
       params.type,
@@ -277,14 +278,21 @@ class CollectionsApiService {
   async prefetchDiscoveryCollections() {
     const queryClient = useQueryClient();
 
-    const curatedQueryKey = [TanstackKey.COLLECTION_DISCOVERY, 'curated'];
-    const communityQueryKey = [TanstackKey.COLLECTION_DISCOVERY, 'community'];
-    const myCollectionsQueryKey = [TanstackKey.COLLECTION_DISCOVERY, 'my'];
+    const curatedQueryKey = [TanstackKey.COLLECTION_DISCOVERY, CollectionTypeEnum.CURATED];
+    const communityQueryKey = [TanstackKey.COLLECTION_DISCOVERY, CollectionTypeEnum.COMMUNITY];
+    const myCollectionsQueryKey = [
+      TanstackKey.COLLECTION_DISCOVERY,
+      CollectionTypeEnum.MY_COLLECTIONS,
+    ];
 
-    const curatedQueryFn = this.fetchCollectionsQueryFn(() => this.discoveryParams('curated'));
-    const communityQueryFn = this.fetchCollectionsQueryFn(() => this.discoveryParams('community'));
+    const curatedQueryFn = this.fetchCollectionsQueryFn(() =>
+      this.discoveryParams(CollectionTypeEnum.CURATED),
+    );
+    const communityQueryFn = this.fetchCollectionsQueryFn(() =>
+      this.discoveryParams(CollectionTypeEnum.COMMUNITY),
+    );
     const myCollectionsQueryFn = this.fetchMyCollectionsQueryFn(() =>
-      this.discoveryParams('my-collections'),
+      this.discoveryParams(CollectionTypeEnum.MY_COLLECTIONS),
     );
 
     await Promise.all([
diff --git a/frontend/app/components/modules/collection/views/collection-details.vue b/frontend/app/components/modules/collection/views/collection-details.vue
index 9b84d264..18964c5b 100644
--- a/frontend/app/components/modules/collection/views/collection-details.vue
+++ b/frontend/app/components/modules/collection/views/collection-details.vue
@@ -114,6 +114,7 @@ import type { Project } from '~~/types/project';
 import { useAuthStore } from '~/components/modules/auth/store/auth.store';
 import { TanstackKey } from '~/components/shared/types/tanstack';
 import { useLikeCounts } from '~/components/modules/collection/composables/useLikeCounts';
+import { CollectionTypeEnum } from '~/components/modules/collection/config/collection-type-config';
 
 const props = defineProps<{
   slug: string;
@@ -152,10 +153,10 @@ const { queryParams } = useQueryParam(collectionDetailsParamsGetter, collectionL
 const { onlyLFProjects, collectionSort } = queryParams.value;
 const collectionType = computed<CollectionType>(() => {
   if (user.value && user.value.sub === currentCollection.value?.ssoUserId) {
-    return 'my-collections';
+    return CollectionTypeEnum.MY_COLLECTIONS;
   }
 
-  return currentCollection.value?.ssoUserId ? 'community' : 'curated';
+  return currentCollection.value?.ssoUserId ? CollectionTypeEnum.COMMUNITY : CollectionTypeEnum.CURATED;
 });
 
 const sort = ref(collectionSort || 'contributorCount_desc');
diff --git a/frontend/app/components/modules/collection/views/collection-list.vue b/frontend/app/components/modules/collection/views/collection-list.vue
index 232f3182..c8dd5dc9 100644
--- a/frontend/app/components/modules/collection/views/collection-list.vue
+++ b/frontend/app/components/modules/collection/views/collection-list.vue
@@ -33,7 +33,7 @@ SPDX-License-Identifier: MIT
             v-for="collection in flatData"
             :key="collection.slug"
             :collection="collection"
-            :show-like-count="props.type !== 'my-collections'"
+            :show-like-count="props.type !== CollectionTypeEnum.MY_COLLECTIONS"
             :variant="props.type"
             @updated="refreshList"
           />
@@ -91,7 +91,7 @@ SPDX-License-Identifier: MIT
   </div>
 
   <section
-    v-if="props.type === 'my-collections'"
+    v-if="props.type === CollectionTypeEnum.MY_COLLECTIONS"
     class="container mt-10"
   >
     <lfx-liked-collections :view="view" />
@@ -124,6 +124,7 @@ import { useBannerStore } from '~/components/shared/store/banner.store';
 import { useAuthStore } from '~/components/modules/auth/store/auth.store';
 import { useCollectionsStore } from '~/components/modules/collection/store/collections.store';
 import { useLikeCounts } from '~/components/modules/collection/composables/useLikeCounts';
+import { CollectionTypeEnum } from '~/components/modules/collection/config/collection-type-config';
 
 const props = defineProps<{
   type?: CollectionType;
@@ -146,11 +147,11 @@ const params = computed(() => ({
   pageSize: pageSize.value,
   sort: sort.value || 'starred_desc',
   categories: undefined,
-  type: props.type === 'my-collections' ? undefined : props.type,
+  type: props.type === CollectionTypeEnum.MY_COLLECTIONS ? undefined : props.type,
 }));
 
 const { data, isPending, isFetchingNextPage, fetchNextPage, hasNextPage, isSuccess, error, refetch } =
-  props.type === 'my-collections'
+  props.type === CollectionTypeEnum.MY_COLLECTIONS
     ? COLLECTIONS_API_SERVICE.fetchMyCollections(params, user)
     : COLLECTIONS_API_SERVICE.fetchCollections(params);
 
@@ -161,7 +162,9 @@ const flatData = computed(() =>
   ),
 );
 
-const collectionIds = computed(() => (props.type !== 'my-collections' ? flatData.value.map((c) => c.id) : []));
+const collectionIds = computed(() =>
+  props.type !== CollectionTypeEnum.MY_COLLECTIONS ? flatData.value.map((c) => c.id) : [],
+);
 useLikeCounts(collectionIds);
 
 const classDisplay = computed(() => {
diff --git a/frontend/app/components/shared/components/collection-card.vue b/frontend/app/components/shared/components/collection-card.vue
index ab8d07d5..33b86a40 100644
--- a/frontend/app/components/shared/components/collection-card.vue
+++ b/frontend/app/components/shared/components/collection-card.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: MIT
       <div
         v-else
         class="flex items-center gap-2 p-4 min-h-16 rounded-t-xl"
-        :class="{ 'justify-between': props.variant === 'my-collections' }"
+        :class="{ 'justify-between': props.variant === CollectionTypeEnum.MY_COLLECTIONS }"
         :style="headerBackground"
       >
         <lfx-avatar-group type="project">
@@ -28,7 +28,7 @@ SPDX-License-Identifier: MIT
           />
         </lfx-avatar-group>
         <lfx-dropdown
-          v-if="props.variant === 'my-collections'"
+          v-if="props.variant === CollectionTypeEnum.MY_COLLECTIONS"
           placement="bottom-end"
         >
           <template #trigger>
@@ -59,7 +59,7 @@ SPDX-License-Identifier: MIT
             <lfx-icon
               name="trash"
               :size="16"
-              class="text-negative-500"
+              class="!text-negative-500"
             />
             <span class="text-negative-500">Delete</span>
           </lfx-dropdown-item>
@@ -78,7 +78,7 @@ SPDX-License-Identifier: MIT
         <div class="mt-auto">
           <!-- owner info - different display based on variant -->
           <div
-            v-if="props.variant !== 'my-collections'"
+            v-if="props.variant !== CollectionTypeEnum.MY_COLLECTIONS"
             class="flex items-center gap-2 mb-2"
           >
             <collection-owner
@@ -102,11 +102,11 @@ SPDX-License-Identifier: MIT
               <span v-if="props.collection.updatedAt">
                 ・ Updated {{ formatDate(props.collection.updatedAt, 'dd MMM') }}
               </span>
-              <template v-if="props.variant === 'my-collections'"> ・ </template>
+              <template v-if="props.variant === CollectionTypeEnum.MY_COLLECTIONS"> ・ </template>
             </p>
             <!-- visibility badge for my-collections -->
             <span
-              v-if="props.variant === 'my-collections'"
+              v-if="props.variant === CollectionTypeEnum.MY_COLLECTIONS"
               class="flex items-center gap-1.5"
             >
               <lfx-icon
@@ -125,7 +125,7 @@ SPDX-License-Identifier: MIT
 
           <!-- footer actions - not shown for my-collections -->
           <div
-            v-if="props.variant !== 'my-collections'"
+            v-if="props.variant !== CollectionTypeEnum.MY_COLLECTIONS"
             class="pt-3 mt-3 border-t border-neutral-200 flex items-center justify-center gap-2"
           >
             <lfx-button
@@ -188,6 +188,7 @@ import { COLLECTIONS_API_SERVICE } from '~/components/modules/collection/service
 import useToastService from '~/components/uikit/toast/toast.service';
 import { ToastTypesEnum } from '~/components/uikit/toast/types/toast.types';
 import { useAuthStore } from '~/components/modules/auth/store/auth.store';
+import { CollectionTypeEnum } from '~/components/modules/collection/config/collection-type-config';
 
 const router = useRouter();
 const { openShareModal } = useShareStore();
@@ -214,7 +215,7 @@ const emit = defineEmits<{
 // This only applies to the collection card header, in the designs the header gradient seems to be different
 // from the card background gradient for communinity and my collections
 const headerBackground = computed(() => {
-  if (props.variant === 'curated') {
+  if (props.variant === CollectionTypeEnum.CURATED) {
     // curated collections should have an image so we don't need a background
     // however, if the image is not set, we need to use a default background
     if (props.collection.imageUrl) {
diff --git a/frontend/app/components/shared/components/collection-list-item.vue b/frontend/app/components/shared/components/collection-list-item.vue
index 944d2558..d89a22bf 100644
--- a/frontend/app/components/shared/components/collection-list-item.vue
+++ b/frontend/app/components/shared/components/collection-list-item.vue
@@ -84,7 +84,7 @@ SPDX-License-Identifier: MIT
               class="!p-2"
             />
           </template>
-          <template v-if="props.variant === 'my-collections' && !!user">
+          <template v-if="props.variant === CollectionTypeEnum.MY_COLLECTIONS && !!user">
             <lfx-dropdown-item @click="handleEditCollection()">
               <lfx-icon
                 name="pencil"
@@ -110,7 +110,7 @@ SPDX-License-Identifier: MIT
             />
             Duplicate
           </lfx-dropdown-item>
-          <template v-if="props.variant === 'my-collections' && !!user">
+          <template v-if="props.variant === CollectionTypeEnum.MY_COLLECTIONS && !!user">
             <lfx-dropdown-item @click="handleDeleteCollection()">
               <lfx-icon
                 name="trash"
@@ -147,6 +147,7 @@ import useToastService from '~/components/uikit/toast/toast.service';
 import { ToastTypesEnum } from '~/components/uikit/toast/types/toast.types';
 import { useAuthStore } from '~/components/modules/auth/store/auth.store';
 import { useDuplicateCollectionStore } from '~/components/modules/collection/store/duplicate-collection.store';
+import { CollectionTypeEnum } from '~/components/modules/collection/config/collection-type-config';
 
 const router = useRouter();
 const { user } = storeToRefs(useAuthStore());
@@ -166,7 +167,7 @@ const props = withDefaults(
   }>(),
   {
     showLikeCount: false,
-    variant: 'curated',
+    variant: CollectionTypeEnum.CURATED,
     showUnlikeIcon: false,
   },
 );
diff --git a/frontend/app/components/shared/components/like-button.vue b/frontend/app/components/shared/components/like-button.vue
index 00649561..d02b7e2e 100644
--- a/frontend/app/components/shared/components/like-button.vue
+++ b/frontend/app/components/shared/components/like-button.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: MIT
       @click.stop.prevent="handleLike"
     >
       <lfx-icon
-        v-if="variant === 'my-collections' || (showUnlikeIcon && isLiked)"
+        v-if="variant === CollectionTypeEnum.MY_COLLECTIONS || (showUnlikeIcon && isLiked)"
         :name="isLiked ? 'heart-slash' : 'heart'"
         :size="16"
         :class="'text-neutral-900'"
@@ -59,6 +59,7 @@ import { formatNumberShort } from '~/components/shared/utils/formatter';
 import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
 import type { ButtonSize } from '~/components/uikit/button/types/button.types';
 import { TanstackKey } from '~/components/shared/types/tanstack';
+import { CollectionTypeEnum } from '~/components/modules/collection/config/collection-type-config';
 // import { useAuth } from '~~/composables/useAuth';
 
 const collectionsStore = useCollectionsStore();
@@ -76,7 +77,7 @@ const props = withDefaults(
   }>(),
   {
     buttonType: 'transparent',
-    variant: 'community',
+    variant: CollectionTypeEnum.COMMUNITY,
     size: 'medium',
     showUnlikeIcon: false,
   },
diff --git a/frontend/app/components/shared/modules/confirm/components/confirm-global.vue b/frontend/app/components/shared/modules/confirm/components/confirm-global.vue
new file mode 100644
index 00000000..32ef3cad
--- /dev/null
+++ b/frontend/app/components/shared/modules/confirm/components/confirm-global.vue
@@ -0,0 +1,29 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-confirm-modal
+    v-if="isConfirmModalOpen"
+    v-model="isConfirmModalOpen"
+    :options="confirmOptions"
+    @confirm="confirm"
+    @cancel="cancel"
+  />
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import LfxConfirmModal from '~/components/shared/modules/confirm/components/confirm-modal.vue';
+import { useConfirmStore } from '~/components/shared/modules/confirm/store/confirm.store';
+
+const confirmStore = useConfirmStore();
+const { isConfirmModalOpen, confirmOptions } = storeToRefs(confirmStore);
+const { confirm, cancel } = confirmStore;
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxConfirmGlobal',
+};
+</script>
diff --git a/frontend/app/components/shared/modules/confirm/components/confirm-modal.vue b/frontend/app/components/shared/modules/confirm/components/confirm-modal.vue
new file mode 100644
index 00000000..0b220a9d
--- /dev/null
+++ b/frontend/app/components/shared/modules/confirm/components/confirm-modal.vue
@@ -0,0 +1,85 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-modal
+    v-model="isModalOpen"
+    width="25rem"
+  >
+    <section class="p-6">
+      <div class="flex justify-between items-start">
+        <h3 class="text-heading-3 font-bold text-neutral-900">
+          {{ options.title }}
+        </h3>
+        <lfx-icon-button
+          icon="close"
+          size="small"
+          @click="handleCancel"
+        />
+      </div>
+
+      <p class="mt-4 text-body-2 text-neutral-700">
+        {{ options.message }}
+      </p>
+
+      <div class="mt-6 flex justify-end gap-3">
+        <lfx-button
+          type="primary"
+          size="small"
+          :label="options.confirmLabel"
+          @click="handleConfirm"
+        />
+        <lfx-button
+          type="transparent"
+          size="small"
+          :label="options.cancelLabel"
+          @click="handleCancel"
+        />
+      </div>
+    </section>
+  </lfx-modal>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import LfxModal from '~/components/uikit/modal/modal.vue';
+import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+import type { ConfirmOptions } from '~/components/shared/modules/confirm/store/confirm.store';
+
+const props = defineProps<{
+  modelValue: boolean;
+  options: ConfirmOptions;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'confirm'): void;
+  (e: 'cancel'): void;
+}>();
+
+const isModalOpen = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => {
+    emit('update:modelValue', value);
+    if (!value) {
+      emit('cancel');
+    }
+  },
+});
+
+const handleConfirm = () => {
+  emit('confirm');
+};
+
+const handleCancel = () => {
+  emit('cancel');
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxConfirmModal',
+};
+</script>
diff --git a/frontend/app/components/shared/modules/confirm/store/confirm.store.ts b/frontend/app/components/shared/modules/confirm/store/confirm.store.ts
new file mode 100644
index 00000000..9c5d7c29
--- /dev/null
+++ b/frontend/app/components/shared/modules/confirm/store/confirm.store.ts
@@ -0,0 +1,59 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export interface ConfirmOptions {
+  title?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+const defaultOptions: ConfirmOptions = {
+  title: 'Confirm',
+  message: '',
+  confirmLabel: 'Ok',
+  cancelLabel: 'Cancel',
+};
+
+export const useConfirmStore = defineStore('confirm', () => {
+  const isConfirmModalOpen = ref(false);
+  const confirmOptions = ref<ConfirmOptions>(defaultOptions);
+  const resolvePromise = ref<((value: boolean) => void) | null>(null);
+
+  const openConfirmModal = (options: ConfirmOptions): Promise<boolean> => {
+    // Auto-cancel any pending confirm to prevent orphaned Promises
+    if (resolvePromise.value) {
+      resolvePromise.value(false);
+      resolvePromise.value = null;
+    }
+
+    confirmOptions.value = { ...defaultOptions, ...options };
+    isConfirmModalOpen.value = true;
+
+    return new Promise((resolve) => {
+      resolvePromise.value = resolve;
+    });
+  };
+
+  const confirm = () => {
+    isConfirmModalOpen.value = false;
+    resolvePromise.value?.(true);
+    resolvePromise.value = null;
+  };
+
+  const cancel = () => {
+    isConfirmModalOpen.value = false;
+    resolvePromise.value?.(false);
+    resolvePromise.value = null;
+  };
+
+  return {
+    isConfirmModalOpen,
+    confirmOptions,
+    openConfirmModal,
+    confirm,
+    cancel,
+  };
+});
diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 04c767cd..8f623821 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -19,6 +19,7 @@ SPDX-License-Identifier: MIT
     <lfx-add-to-collection-global />
     <lfx-copilot-global />
     <lfx-community-filter-global />
+    <lfx-confirm-global />
     <lfx-insights-footer />
   </main>
 </template>
@@ -37,6 +38,7 @@ import LfDuplicateCollectionGlobal from '~/components/modules/collection/compone
 import LfxAddToCollectionGlobal from '~/components/modules/collection/components/add-to-collection-modal/add-to-collection-global.vue';
 import LfxCopilotGlobal from '~/components/shared/modules/copilot/components/copilot-global.vue';
 import LfxCommunityFilterGlobal from '~/components/modules/project/components/community/sections/community-filter-global.vue';
+import LfxConfirmGlobal from '~/components/shared/modules/confirm/components/confirm-global.vue';
 import { useRichSchema } from '~~/composables/useRichSchema';
 import { useBannerStore } from '~/components/shared/store/banner.store';