diff --git a/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/collections/page.tsx b/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/collections/page.tsx
index ee1c055e..b8ce7660 100644
--- a/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/collections/page.tsx
+++ b/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/collections/page.tsx
@@ -1,48 +1,11 @@
 import CollectionsContainer from '@/features/collections/containers/collectionsContainer/CollectionsContainer';
-import { Group, Container } from '@mantine/core';
-import { IoSearch } from 'react-icons/io5';
-import {
-  CollectionFiltersRoot,
-  CollectionFiltersSortSelect,
-  CollectionFiltersViewToggle,
-} from '@/features/collections/components/collectionFilters/CollectionFilters';
-import { Fragment } from 'react';
-import { CollectionSortField } from '@semble/types';
-import { LinkButton } from '@/components/link/MantineLink';
 
 interface Props {
   params: Promise<{ handle: string }>;
-  searchParams: Promise<{ collectionSort?: string }>;
 }
 
 export default async function Page(props: Props) {
-  const [{ handle }, { collectionSort }] = await Promise.all([
-    props.params,
-    props.searchParams,
-  ]);
+  const { handle } = await props.params;
 
-  const sort =
-    (collectionSort as CollectionSortField) ?? CollectionSortField.UPDATED_AT;
-
-  return (
-    <Fragment>
-      <Container p={0} size="xl">
-        <Group justify="space-between" gap="xs" px="xs" pt="xs">
-          <CollectionFiltersRoot>
-            <CollectionFiltersSortSelect />
-            <CollectionFiltersViewToggle />
-          </CollectionFiltersRoot>
-          <LinkButton
-            href={`/search/collections?handle=${handle}`}
-            variant="light"
-            color="gray"
-            rightSection={<IoSearch />}
-          >
-            Search
-          </LinkButton>
-        </Group>
-      </Container>
-      <CollectionsContainer handle={handle} key={sort} />
-    </Fragment>
-  );
+  return <CollectionsContainer handle={handle} />;
 }
diff --git a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
index 8e719248..8b4d8f94 100644
--- a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
@@ -1,20 +1,56 @@
-import { Container, Stack } from '@mantine/core';
-import { Suspense } from 'react';
+'use client';
+
+import { CloseButton, Container, Group, Stack, TextInput } from '@mantine/core';
+import { Suspense, useState } from 'react';
 import CollectionsContainerContent from '../collectionsContainerContent/CollectionsContainerContent';
 import CollectionsContainerContentSkeleton from '../collectionsContainerContent/Skeleton.collectionsContainerContent';
+import { CollectionFilters } from '../../components/collectionFilters/CollectionFilters';
+import { IoSearch } from 'react-icons/io5';
+import { useDebouncedValue } from '@mantine/hooks';
 
 interface Props {
   handle: string;
 }
 
 export default function CollectionsContainer(props: Props) {
+  const [search, setSearch] = useState('');
+  const [debouncedSearch] = useDebouncedValue(search, 300);
+
   return (
-    <Container p="xs" size="xl">
-      <Stack>
-        <Suspense fallback={<CollectionsContainerContentSkeleton />}>
-          <CollectionsContainerContent handle={props.handle} />
-        </Suspense>
-      </Stack>
+    <Container p={0} size={'xl'}>
+      <Group justify="space-between" gap="xs" px="xs" pt="xs">
+        <CollectionFilters.Root>
+          <CollectionFilters.SortSelect />
+          <CollectionFilters.ViewToggle />
+        </CollectionFilters.Root>
+        <TextInput
+          variant="filled"
+          placeholder="Search..."
+          leftSection={<IoSearch />}
+          rightSection={
+            <CloseButton
+              aria-label="Clear input"
+              onClick={() => setSearch('')}
+              style={{ display: search ? undefined : 'none' }}
+            />
+          }
+          radius={'xl'}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+          w={160}
+        />
+      </Group>
+
+      <Container p="xs" size="xl">
+        <Stack>
+          <Suspense fallback={<CollectionsContainerContentSkeleton />}>
+            <CollectionsContainerContent
+              handle={props.handle}
+              query={debouncedSearch || undefined}
+            />
+          </Suspense>
+        </Stack>
+      </Container>
     </Container>
   );
 }
diff --git a/src/webapp/features/collections/containers/collectionsContainer/Skeleton.CollectionsContainer.tsx b/src/webapp/features/collections/containers/collectionsContainer/Skeleton.CollectionsContainer.tsx
index d5308ec5..630475c5 100644
--- a/src/webapp/features/collections/containers/collectionsContainer/Skeleton.CollectionsContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionsContainer/Skeleton.CollectionsContainer.tsx
@@ -4,10 +4,10 @@ import CollectionCardSkeleton from '../../components/collectionCard/Skeleton.Col
 export default function CollectionsContainerSkeleton() {
   return (
     <Container p="xs" size="xl">
-      <Stack>
+      <Stack gap={'xs'}>
         <Group gap={'xs'} justify="space-between">
           <Skeleton w={96} h={36} radius={'xl'} />
-          <Skeleton w={100} h={36} radius={'xl'} />
+          <Skeleton w={160} h={36} radius={'xl'} />
         </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs">
diff --git a/src/webapp/features/collections/containers/collectionsContainerContent/CollectionsContainerContent.tsx b/src/webapp/features/collections/containers/collectionsContainerContent/CollectionsContainerContent.tsx
index 21c56e3a..259b9ef3 100644
--- a/src/webapp/features/collections/containers/collectionsContainerContent/CollectionsContainerContent.tsx
+++ b/src/webapp/features/collections/containers/collectionsContainerContent/CollectionsContainerContent.tsx
@@ -14,6 +14,7 @@ import { useSearchParams } from 'next/navigation';
 
 interface Props {
   handle: string;
+  query?: string;
 }
 
 export default function CollectionsContainerContent(props: Props) {
@@ -26,6 +27,7 @@ export default function CollectionsContainerContent(props: Props) {
     useCollections({
       didOrHandle: props.handle,
       sortBy,
+      query: props.query,
     });
 
   const { settings } = useUserSettings();