diff --git a/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/layout.tsx b/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/layout.tsx
new file mode 100644
index 00000000..02033dea
--- /dev/null
+++ b/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/layout.tsx
@@ -0,0 +1,42 @@
+import { getCollectionPageByAtUri } from '@/features/collections/lib/dal';
+
+import type { Metadata } from 'next';
+
+interface Props {
+  params: Promise<{ rkey: string; handle: string }>;
+  children: React.ReactNode;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { rkey, handle } = await params;
+
+  const collection = await getCollectionPageByAtUri({
+    recordKey: rkey,
+    handle: handle,
+  });
+
+  return {
+    title: `${collection.name}'s mentions`,
+    description:
+      collection.description ??
+      `See where ${collection.name} is mentioned around the web`,
+    authors: [
+      {
+        name: collection.author.name,
+        url: `${process.env.APP_URL}/profile/${handle}`,
+      },
+    ],
+    alternates: {
+      types: {
+        '': `${collection.uri}`,
+      },
+    },
+    other: {
+      'atprotocol:creator': `at://${collection.author.id}`,
+    },
+  };
+}
+
+export default function Layout(props: Props) {
+  return props.children;
+}
diff --git a/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/loading.tsx b/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/loading.tsx
new file mode 100644
index 00000000..25190ae0
--- /dev/null
+++ b/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/loading.tsx
@@ -0,0 +1,5 @@
+import SembleMentionsContainerSkeleton from '@/features/semble/containers/sembleMentionsContainer/Skeleton.SembleMentionsContainer';
+
+export default function Loading() {
+  return <SembleMentionsContainerSkeleton />;
+}
diff --git a/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/page.tsx b/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/page.tsx
new file mode 100644
index 00000000..c7923484
--- /dev/null
+++ b/src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/mentions/page.tsx
@@ -0,0 +1,18 @@
+import SembleMentionsContainer from '@/features/semble/containers/sembleMentionsContainer/SembleMentionsContainer';
+import { Container } from '@mantine/core';
+
+interface Props {
+  params: Promise<{ handle: string; rkey: string }>;
+}
+
+export default async function Page({ params }: Props) {
+  const { handle, rkey } = await params;
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? 'http://127.0.0.1:4000';
+  const url = `${appUrl}/profile/${handle}/collections/${rkey}`;
+
+  return (
+    <Container p="xs" size="xl">
+      <SembleMentionsContainer url={url} />
+    </Container>
+  );
+}
diff --git a/src/webapp/features/collections/components/collectionTabs/CollectionTabs.tsx b/src/webapp/features/collections/components/collectionTabs/CollectionTabs.tsx
index 1366b1d8..6d3aa65a 100644
--- a/src/webapp/features/collections/components/collectionTabs/CollectionTabs.tsx
+++ b/src/webapp/features/collections/components/collectionTabs/CollectionTabs.tsx
@@ -28,6 +28,9 @@ export default function CollectionTabs(props: Props) {
               <TabItem value="similar-cards" href={`${basePath}/similar-cards`}>
                 Similar cards
               </TabItem>
+              <TabItem value="mentions" href={`${basePath}/mentions`}>
+                Mentions
+              </TabItem>
               <TabItem value="followers" href={`${basePath}/followers`}>
                 Followers
               </TabItem>
diff --git a/src/webapp/features/platforms/bluesky/container/blueskyMentionsContainer/BlueskyMentionsContainer.tsx b/src/webapp/features/platforms/bluesky/container/blueskyMentionsContainer/BlueskyMentionsContainer.tsx
index 9ef2a3e0..960a7f24 100644
--- a/src/webapp/features/platforms/bluesky/container/blueskyMentionsContainer/BlueskyMentionsContainer.tsx
+++ b/src/webapp/features/platforms/bluesky/container/blueskyMentionsContainer/BlueskyMentionsContainer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import SembleMentionsContainerError from '@/features/semble/containers/sembleMentionsContainer/Error.SembleMentionsContainer';
 import useSearchBlueskyPosts from '../../lib/queries/useSearchBlueskyPosts';
 import { BlueskySearchSortOptions } from '../../lib/types';
diff --git a/src/webapp/features/platforms/leaflet/container/leafletMentionsContainer/LeafletMentionsContainer.tsx b/src/webapp/features/platforms/leaflet/container/leafletMentionsContainer/LeafletMentionsContainer.tsx
index 26a6550f..85b88e68 100644
--- a/src/webapp/features/platforms/leaflet/container/leafletMentionsContainer/LeafletMentionsContainer.tsx
+++ b/src/webapp/features/platforms/leaflet/container/leafletMentionsContainer/LeafletMentionsContainer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import SembleMentionsContainerError from '@/features/semble/containers/sembleMentionsContainer/Error.SembleMentionsContainer';
 import SembleEmptyTab from '@/features/semble/components/sembleEmptyTab/SembleEmptyTab';
 import { MdOutlineAlternateEmail } from 'react-icons/md';
diff --git a/src/webapp/features/semble/containers/sembleMentionsContainer/SembleMentionsContainer.tsx b/src/webapp/features/semble/containers/sembleMentionsContainer/SembleMentionsContainer.tsx
index 61894ea1..431b9004 100644
--- a/src/webapp/features/semble/containers/sembleMentionsContainer/SembleMentionsContainer.tsx
+++ b/src/webapp/features/semble/containers/sembleMentionsContainer/SembleMentionsContainer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import BlueskyMentionsContainer from '@/features/platforms/bluesky/container/blueskyMentionsContainer/BlueskyMentionsContainer';
 import LeafletMentionsContainer from '@/features/platforms/leaflet/container/leafletMentionsContainer/LeafletMentionsContainer';
 import { BlueskySearchSortOptions } from '@/features/platforms/bluesky/lib/types';
diff --git a/src/webapp/features/semble/containers/sembleMentionsContainer/Skeleton.SembleMentionsContainer.tsx b/src/webapp/features/semble/containers/sembleMentionsContainer/Skeleton.SembleMentionsContainer.tsx
index e3f021be..39ccb5e7 100644
--- a/src/webapp/features/semble/containers/sembleMentionsContainer/Skeleton.SembleMentionsContainer.tsx
+++ b/src/webapp/features/semble/containers/sembleMentionsContainer/Skeleton.SembleMentionsContainer.tsx
@@ -2,6 +2,7 @@ import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCar
 import {
   Button,
   Combobox,
+  ComboboxTarget,
   Grid,
   GridCol,
   Group,
@@ -15,11 +16,11 @@ export default function SembleMentionsContainerSkeleton() {
     <Stack gap={'xs'} align="center">
       <Group justify="space-between" w={'100%'} maw={600}>
         <Combobox>
-          <Combobox.Target>
+          <ComboboxTarget>
             <Button variant="light" color="gray" loading>
               <Skeleton height={16} width={60} />
             </Button>
-          </Combobox.Target>
+          </ComboboxTarget>
         </Combobox>
         <Select ml={'auto'} size="sm" variant="filled" disabled />
       </Group>