diff --git a/src/webapp/features/search/components/searchFilters/SearchFilters.tsx b/src/webapp/features/search/components/searchFilters/SearchFilters.tsx
new file mode 100644
index 00000000..3dcf0529
--- /dev/null
+++ b/src/webapp/features/search/components/searchFilters/SearchFilters.tsx
@@ -0,0 +1,337 @@
+'use client';
+
+import {
+  Drawer,
+  TextInput,
+  Loader,
+  Group,
+  Avatar,
+  Stack,
+  Text,
+  ScrollArea,
+  ActionIcon,
+  Button,
+  CloseButton,
+  Box,
+  Indicator,
+  Container,
+  Combobox,
+  useCombobox,
+} from '@mantine/core';
+import { MdOutlineAlternateEmail } from 'react-icons/md';
+import { TbAdjustmentsHorizontal } from 'react-icons/tb';
+import { useDebouncedValue, upperFirst } from '@mantine/hooks';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { createContext, useContext, useState, ReactNode } from 'react';
+import { searchBlueskyUsers } from '@/features/platforms/bluesky/lib/dal';
+import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
+import { UrlType } from '@semble/types';
+import { getUrlTypeIcon } from '@/lib/utils/icon';
+
+// context
+interface FilterContextValue {
+  opened: boolean;
+  setOpened: (val: boolean) => void;
+  searchQuery: string;
+  setSearchQuery: (val: string) => void;
+  selectedHandle: string;
+  setSelectedHandle: (val: string) => void;
+  localType: UrlType | null;
+  setLocalType: (val: UrlType | null) => void;
+  appliedHandle: string;
+  appliedType: UrlType | null;
+}
+
+const FilterContext = createContext<FilterContextValue | null>(null);
+
+const useFilterContext = () => {
+  const ctx = useContext(FilterContext);
+  if (!ctx)
+    throw new Error(
+      'SearchFilter components must be wrapped in SearchFilter.Root',
+    );
+  return ctx;
+};
+
+// root
+export function Root(props: { children: ReactNode }) {
+  const [opened, setOpened] = useState(false);
+  const searchParams = useSearchParams();
+
+  const appliedHandle = searchParams.get('handle') ?? '';
+  const appliedType = searchParams.get('type') as UrlType | null;
+
+  const [searchQuery, setSearchQuery] = useState(appliedHandle);
+  const [selectedHandle, setSelectedHandle] = useState(appliedHandle);
+  const [localType, setLocalType] = useState<UrlType | null>(appliedType);
+
+  const handleOpen = () => {
+    setSearchQuery(appliedHandle);
+    setSelectedHandle(appliedHandle);
+    setLocalType(appliedType);
+    setOpened(true);
+  };
+
+  const hasFilters = !!appliedHandle || !!appliedType;
+
+  return (
+    <FilterContext.Provider
+      value={{
+        opened,
+        setOpened,
+        searchQuery,
+        setSearchQuery,
+        selectedHandle,
+        setSelectedHandle,
+        localType,
+        setLocalType,
+        appliedHandle,
+        appliedType,
+      }}
+    >
+      <Indicator offset={4} disabled={!hasFilters} zIndex={0}>
+        <ActionIcon
+          variant="light"
+          color="gray"
+          size="xl"
+          radius="lg"
+          onClick={handleOpen}
+        >
+          <TbAdjustmentsHorizontal size={20} />
+        </ActionIcon>
+      </Indicator>
+
+      <Drawer
+        opened={opened}
+        onClose={() => setOpened(false)}
+        position="bottom"
+        padding="md"
+        size="sm"
+        withCloseButton={false}
+        overlayProps={UPDATE_OVERLAY_PROPS}
+        trapFocus={false}
+      >
+        <Drawer.Header>
+          <Drawer.Title fz={'xl'} fw={600} mx={'auto'}>
+            Filters
+          </Drawer.Title>
+        </Drawer.Header>
+        <Container size={'xs'} p={0}>
+          <Stack gap="xl">{props.children}</Stack>
+        </Container>
+      </Drawer>
+    </FilterContext.Provider>
+  );
+}
+
+// profile filter
+export function ProfileFilter() {
+  const ctx = useFilterContext();
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+  });
+
+  const [debounced] = useDebouncedValue(ctx.searchQuery, 200);
+
+  const {
+    data: actors = [],
+    isFetching,
+    error,
+  } = useQuery({
+    queryKey: ['bluesky user search', debounced],
+    queryFn: () => searchBlueskyUsers(debounced),
+    enabled: debounced.trim().length > 0,
+  });
+
+  const options = actors.map((user) => (
+    <Combobox.Option key={user.did} value={user.handle} p={5}>
+      <Group gap="xs" wrap="nowrap">
+        <Avatar
+          src={user.avatar?.replace('avatar', 'avatar_thumbnail')}
+          alt={user.handle}
+        />
+        <Stack gap={0}>
+          <Text fw={500} lineClamp={1}>
+            {user.displayName || user.handle}
+          </Text>
+          <Text fw={500} size="sm" c="dimmed" lineClamp={1}>
+            @{user.handle}
+          </Text>
+        </Stack>
+      </Group>
+    </Combobox.Option>
+  ));
+
+  return (
+    <Combobox
+      store={combobox}
+      withinPortal={false}
+      onOptionSubmit={(val) => {
+        ctx.setSelectedHandle(val);
+        ctx.setSearchQuery(val);
+        combobox.closeDropdown();
+      }}
+      position="bottom"
+      middlewares={{ flip: false, shift: true }}
+    >
+      <Combobox.Target>
+        <TextInput
+          label="By user"
+          variant="filled"
+          size="md"
+          placeholder="Search for handle"
+          value={ctx.searchQuery}
+          onChange={(e) => {
+            ctx.setSearchQuery(e.currentTarget.value);
+            if (ctx.selectedHandle) ctx.setSelectedHandle('');
+            combobox.openDropdown();
+          }}
+          onFocus={() => combobox.openDropdown()}
+          onBlur={() => {
+            combobox.closeDropdown();
+            ctx.setSearchQuery(ctx.selectedHandle);
+          }}
+          leftSection={<MdOutlineAlternateEmail size={18} />}
+          rightSection={
+            isFetching ? (
+              <Loader size={16} />
+            ) : (
+              ctx.searchQuery && (
+                <CloseButton
+                  onClick={() => {
+                    ctx.setSearchQuery('');
+                    ctx.setSelectedHandle('');
+                  }}
+                />
+              )
+            )
+          }
+        />
+      </Combobox.Target>
+
+      <Combobox.Dropdown hidden={debounced.trim().length === 0}>
+        <Combobox.Options>
+          <ScrollArea.Autosize type="scroll" mah={200}>
+            {isFetching && <Combobox.Empty>Searching...</Combobox.Empty>}
+            {error && <Combobox.Empty>Error fetching profiles</Combobox.Empty>}
+            {!isFetching && actors.length === 0 && (
+              <Combobox.Empty>No profiles found</Combobox.Empty>
+            )}
+            {options}
+          </ScrollArea.Autosize>
+        </Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+}
+
+// url type filter
+export function UrlTypeFilter() {
+  const ctx = useFilterContext();
+
+  return (
+    <Box>
+      <Text fw={500} mb="xs">
+        By content type
+      </Text>
+      <ScrollArea scrollbars="x" offsetScrollbars={false} scrollbarSize={0}>
+        <Group gap={8} wrap="nowrap" pb="xs">
+          <Button
+            size="sm"
+            color="lime"
+            radius="xl"
+            style={{ flexShrink: 0 }}
+            variant={ctx.localType === null ? 'filled' : 'light'}
+            onClick={() => ctx.setLocalType(null)}
+          >
+            All Cards
+          </Button>
+          {Object.values(UrlType).map((type) => {
+            const Icon = getUrlTypeIcon(type);
+            return (
+              <Button
+                key={type}
+                size="sm"
+                color="lime"
+                radius="xl"
+                style={{ flexShrink: 0 }}
+                variant={ctx.localType === type ? 'filled' : 'light'}
+                leftSection={<Icon size={14} />}
+                onClick={() => ctx.setLocalType(type)}
+              >
+                {upperFirst(type)}
+              </Button>
+            );
+          })}
+        </Group>
+      </ScrollArea>
+    </Box>
+  );
+}
+
+// actions
+export function Actions() {
+  const ctx = useFilterContext();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const hasAnyActiveFilters =
+    !!ctx.appliedHandle ||
+    !!ctx.appliedType ||
+    !!ctx.selectedHandle ||
+    ctx.localType !== null;
+
+  const handleApply = () => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (ctx.selectedHandle) params.set('handle', ctx.selectedHandle);
+    else params.delete('handle');
+
+    if (ctx.localType) params.set('type', ctx.localType);
+    else params.delete('type');
+
+    router.replace(`?${params.toString()}`, { scroll: false });
+    ctx.setOpened(false);
+  };
+
+  const handleClear = () => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete('handle');
+    params.delete('type');
+
+    ctx.setSearchQuery('');
+    ctx.setSelectedHandle('');
+    ctx.setLocalType(null);
+
+    router.replace(`?${params.toString()}`, { scroll: false });
+  };
+
+  const isInvalid = ctx.searchQuery !== ctx.selectedHandle;
+
+  return (
+    <Stack gap="sm" mt="md">
+      <Group justify="space-between" gap={'xs'} grow>
+        <Button
+          variant="light"
+          color="gray"
+          onClick={() => ctx.setOpened(false)}
+        >
+          Cancel
+        </Button>
+
+        {hasAnyActiveFilters && (
+          <Button variant="light" color="red" onClick={handleClear}>
+            Clear all
+          </Button>
+        )}
+
+        <Button variant="filled" onClick={handleApply} disabled={isInvalid}>
+          Apply
+        </Button>
+      </Group>
+    </Stack>
+  );
+}
+
+export const SearchFilters = { Root, ProfileFilter, UrlTypeFilter, Actions };
diff --git a/src/webapp/features/search/components/searchQueryAlert/SearchQueryAlert.tsx b/src/webapp/features/search/components/searchQueryAlert/SearchQueryAlert.tsx
index 19196a35..69e7fab3 100644
--- a/src/webapp/features/search/components/searchQueryAlert/SearchQueryAlert.tsx
+++ b/src/webapp/features/search/components/searchQueryAlert/SearchQueryAlert.tsx
@@ -11,20 +11,13 @@ export default function SearchQueryAlert(props: Props) {
       p={'xs'}
       radius={'lg'}
       color="gray"
+      w={'100%'}
       title={
-        <Text fz={'sm'} fw={500} c={'dimmed'}>
+        <Text fz={'sm'} fw={500} c={'dimmed'} lineClamp={1}>
           Showing results for{' '}
           <Text fz={'sm'} fw={600} c={'bright'} span>
             "{props.query}"
           </Text>
-          {props.handle && (
-            <>
-              {` by`}{' '}
-              <Text fz={'sm'} fw={600} c={'bright'} span>
-                @{props.handle}
-              </Text>
-            </>
-          )}
         </Text>
       }
     />
diff --git a/src/webapp/features/search/components/usernameSearch/UsernameSearch.tsx b/src/webapp/features/search/components/usernameSearch/UsernameSearch.tsx
deleted file mode 100644
index 70b76284..00000000
--- a/src/webapp/features/search/components/usernameSearch/UsernameSearch.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-'use client';
-
-import {
-  Drawer,
-  TextInput,
-  Loader,
-  Group,
-  Avatar,
-  Stack,
-  Text,
-  ScrollArea,
-  ActionIcon,
-  Button,
-  CloseButton,
-  UnstyledButton,
-  Box,
-  Indicator,
-} from '@mantine/core';
-import { MdOutlineAlternateEmail } from 'react-icons/md';
-import { TbAdjustmentsHorizontal } from 'react-icons/tb';
-import { useDebouncedValue } from '@mantine/hooks';
-import { useQuery } from '@tanstack/react-query';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useState } from 'react';
-import { searchBlueskyUsers } from '@/features/platforms/bluesky/lib/dal';
-
-export default function UsernameSearch() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const initialHandle = searchParams.get('handle') ?? '';
-  const [opened, setOpened] = useState(false);
-  const [inputValue, setInputValue] = useState(initialHandle);
-  const [appliedHandle, setAppliedHandle] = useState(initialHandle);
-
-  const [debounced] = useDebouncedValue(inputValue, 200);
-
-  const {
-    data: actors = [],
-    isFetching,
-    error,
-  } = useQuery({
-    queryKey: ['bluesky user search', debounced],
-    queryFn: () => searchBlueskyUsers(debounced),
-    enabled: debounced.trim().length > 0,
-  });
-
-  const updateHandleParam = (handle: string) => {
-    const params = new URLSearchParams(searchParams.toString());
-    if (handle) {
-      params.set('handle', handle);
-    } else {
-      params.delete('handle');
-    }
-    router.replace(`?${params.toString()}`, { scroll: false });
-    setAppliedHandle(handle);
-  };
-
-  const handleSelect = (handle: string) => {
-    setInputValue(handle);
-    updateHandleParam(handle);
-    setOpened(false);
-  };
-
-  const clearFilters = () => {
-    setInputValue('');
-    updateHandleParam('');
-    setOpened(false);
-  };
-
-  return (
-    <>
-      <Indicator offset={4} disabled={!appliedHandle}>
-        <ActionIcon
-          variant="light"
-          color="gray"
-          size="xl"
-          radius="lg"
-          onClick={() => setOpened(true)}
-        >
-          <TbAdjustmentsHorizontal size={20} />
-        </ActionIcon>
-      </Indicator>
-
-      <Drawer
-        opened={opened}
-        onClose={() => setOpened(false)}
-        position="bottom"
-        padding="md"
-        size="sm"
-        withCloseButton={false}
-      >
-        <Group mb="sm" justify="space-between">
-          <Text fw={600} size="sm">
-            Filters
-          </Text>
-          <Button
-            size="xs"
-            variant="light"
-            color="red"
-            onClick={clearFilters}
-            disabled={!appliedHandle}
-          >
-            Clear all
-          </Button>
-        </Group>
-
-        <Stack gap="xs">
-          <TextInput
-            placeholder="Search Bluesky handle"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.currentTarget.value)}
-            leftSection={<MdOutlineAlternateEmail size={18} />}
-            rightSection={
-              isFetching ? (
-                <Loader size={16} />
-              ) : (
-                inputValue && (
-                  <CloseButton
-                    aria-label="Clear input"
-                    onClick={() => setInputValue('')}
-                  />
-                )
-              )
-            }
-          />
-
-          {(debounced.trim().length > 0 || isFetching) && (
-            <ScrollArea.Autosize mah={200} type="auto" offsetScrollbars>
-              <Stack gap={4} py={5}>
-                {isFetching && (
-                  <Text size="sm" c="dimmed" ta="center" py="sm">
-                    Searching…
-                  </Text>
-                )}
-
-                {!isFetching && actors.length === 0 && (
-                  <Text size="sm" c="dimmed" ta="center" py="sm">
-                    No profiles found
-                  </Text>
-                )}
-
-                {error && (
-                  <Text size="sm" color="red" ta="center" py="sm">
-                    Could not search profiles
-                  </Text>
-                )}
-
-                {actors.map((user) => (
-                  <UnstyledButton
-                    key={user.did}
-                    onClick={() => handleSelect(user.handle)}
-                    component={Box} // Allows for the sx-like hover styling
-                    p={5}
-                    style={(theme) => ({
-                      borderRadius: theme.radius.sm,
-                      transition: 'background-color 100ms ease',
-                      '&:hover': {
-                        backgroundColor: theme.colors.gray[0],
-                      },
-                    })}
-                  >
-                    <Group gap="xs" wrap="nowrap">
-                      <Avatar
-                        src={user.avatar?.replace('avatar', 'avatar_thumbnail')}
-                        alt={user.handle}
-                      />
-                      <Stack gap={0}>
-                        <Text fw={500} lineClamp={1}>
-                          {user.displayName || user.handle}
-                        </Text>
-                        <Text size="sm" c="dimmed" lineClamp={1}>
-                          @{user.handle}
-                        </Text>
-                      </Stack>
-                    </Group>
-                  </UnstyledButton>
-                ))}
-              </Stack>
-            </ScrollArea.Autosize>
-          )}
-        </Stack>
-      </Drawer>
-    </>
-  );
-}
diff --git a/src/webapp/features/search/containers/cardSearchResultsContainer/CardSearchResultsContainer.tsx b/src/webapp/features/search/containers/cardSearchResultsContainer/CardSearchResultsContainer.tsx
index c3452d92..fb309373 100644
--- a/src/webapp/features/search/containers/cardSearchResultsContainer/CardSearchResultsContainer.tsx
+++ b/src/webapp/features/search/containers/cardSearchResultsContainer/CardSearchResultsContainer.tsx
@@ -9,7 +9,7 @@ import { Grid, Group } from '@mantine/core';
 import SimilarUrlCard from '@/features/semble/components/similarUrlCard/SimilarUrlCard';
 import SearchResultsContainerError from '../searchResultsContainer/Error.SearchResultsContainer';
 import SearchQueryAlert from '../../components/searchQueryAlert/SearchQueryAlert';
-import UsernameSearch from '../../components/usernameSearch/UsernameSearch';
+import { SearchFilters } from '../../components/searchFilters/SearchFilters';
 
 interface Props {
   query: string;
@@ -46,8 +46,11 @@ export default function CardSearchResultsContainer(props: Props) {
     >
       <Group gap={'xs'} justify="space-between" wrap="nowrap">
         <SearchQueryAlert query={props.query} handle={props.handle} />
-
-        <UsernameSearch />
+        <SearchFilters.Root>
+          <SearchFilters.ProfileFilter />
+          <SearchFilters.UrlTypeFilter />
+          <SearchFilters.Actions />
+        </SearchFilters.Root>
       </Group>
       <Grid gutter="xs">
         {allUrls.map((urlView) => (
diff --git a/src/webapp/features/search/containers/collectionSearchResultsContainer/CollectionSearchResultsContainer.tsx b/src/webapp/features/search/containers/collectionSearchResultsContainer/CollectionSearchResultsContainer.tsx
index f8bbfe2a..bd87d5ad 100644
--- a/src/webapp/features/search/containers/collectionSearchResultsContainer/CollectionSearchResultsContainer.tsx
+++ b/src/webapp/features/search/containers/collectionSearchResultsContainer/CollectionSearchResultsContainer.tsx
@@ -6,6 +6,7 @@ import { Grid } from '@mantine/core';
 import SearchResultsContainerError from '../searchResultsContainer/Error.SearchResultsContainer';
 import useSearchCollections from '@/features/collections/lib/queries/useSearchCollections';
 import CollectionCard from '@/features/collections/components/collectionCard/CollectionCard';
+import SearchQueryAlert from '../../components/searchQueryAlert/SearchQueryAlert';
 
 interface Props {
   query: string;
@@ -40,6 +41,7 @@ export default function CollectionSearchResultsContainer(props: Props) {
       isLoading={isFetchingNextPage}
       loadMore={fetchNextPage}
     >
+      <SearchQueryAlert query={props.query} />
       <Grid gutter="xs">
         {allCollections.map((collection) => (
           <Grid.Col key={collection.id} span={12}>
diff --git a/src/webapp/features/search/containers/profileSearchResultsContainer/ProfileSearchResultsContainer.tsx b/src/webapp/features/search/containers/profileSearchResultsContainer/ProfileSearchResultsContainer.tsx
index 265da2fb..a0c5c07e 100644
--- a/src/webapp/features/search/containers/profileSearchResultsContainer/ProfileSearchResultsContainer.tsx
+++ b/src/webapp/features/search/containers/profileSearchResultsContainer/ProfileSearchResultsContainer.tsx
@@ -6,6 +6,7 @@ import { Grid } from '@mantine/core';
 import ProfileSearchResultsContainerError from './Error.ProfileSearchResultsContainer';
 import ProfileCard from '../../components/profileCard/ProfileCard';
 import SearchEmptyResults from '../../components/searchEmptyResults/SearchEmptyResults';
+import SearchQueryAlert from '../../components/searchQueryAlert/SearchQueryAlert';
 
 interface Props {
   query: string;
@@ -39,6 +40,7 @@ export default function ProfileSearchResultsContainer(props: Props) {
       isLoading={isFetchingNextPage}
       loadMore={fetchNextPage}
     >
+      <SearchQueryAlert query={props.query} />
       <Grid gutter="xs">
         {allProfiles.map((profile) => (
           <Grid.Col key={profile.did} span={12}>
diff --git a/src/webapp/features/search/containers/searchResultsContainer/SearchResultsContainer.tsx b/src/webapp/features/search/containers/searchResultsContainer/SearchResultsContainer.tsx
index 778904e3..f648a774 100644
--- a/src/webapp/features/search/containers/searchResultsContainer/SearchResultsContainer.tsx
+++ b/src/webapp/features/search/containers/searchResultsContainer/SearchResultsContainer.tsx
@@ -15,13 +15,11 @@ import { BiCollection } from 'react-icons/bi';
 import { FaRegNoteSticky } from 'react-icons/fa6';
 import { MdOutlinePeopleAlt } from 'react-icons/md';
 import CollectionSearchResultsContainer from '../collectionSearchResultsContainer/CollectionSearchResultsContainer';
-import { Suspense } from 'react';
 import CollectionSearchResultsContainerSkeleton from '../collectionSearchResultsContainer/Skeleton.CollectionSearchResultsContainer';
 import CardSearchResultsContainerSkeleton from '../cardSearchResultsContainer/Skeleton.CardSearchresultsContainerSkeleton';
 import ProfileSearchResultsContainerSkeleton from '../profileSearchResultsContainer/Skeleton.ProfileSearchResultsContainer';
 import SearchTabItem from '../../components/searchTabItem/SearchTabItem';
-import SearchQueryAlert from '../../components/searchQueryAlert/SearchQueryAlert';
-import UsernameSearch from '../../components/usernameSearch/UsernameSearch';
+import { Suspense } from 'react';
 
 interface Props {
   query: string;
@@ -89,10 +87,7 @@ export default function SearchResultsContainer(props: Props) {
               fallback={<CollectionSearchResultsContainerSkeleton />}
               key={props.query}
             >
-              <Stack gap={'xs'}>
-                <SearchQueryAlert query={props.query} />
-                <CollectionSearchResultsContainer query={props.query} />
-              </Stack>
+              <CollectionSearchResultsContainer query={props.query} />
             </Suspense>
           </Container>
         </TabsPanel>
@@ -102,10 +97,7 @@ export default function SearchResultsContainer(props: Props) {
               fallback={<ProfileSearchResultsContainerSkeleton />}
               key={props.query}
             >
-              <Stack gap={'xs'}>
-                <SearchQueryAlert query={props.query} />
-                <ProfileSearchResultsContainer query={props.query} />
-              </Stack>
+              <ProfileSearchResultsContainer query={props.query} />
             </Suspense>
           </Container>
         </TabsPanel>