diff --git a/src/components/Filters.svelte b/src/components/Filters.svelte
new file mode 100644
index 0000000..bbfe40c
--- /dev/null
+++ b/src/components/Filters.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Badge } from '@/components/ui/badge';
+</script>
+
+<Badge variant="outline">actionable</Badge>
+<Badge variant="outline">in-progress</Badge>
+<Badge variant="outline">mine</Badge>
diff --git a/src/views/Problems.svelte b/src/views/Problems.svelte
index 1306b53..bafc331 100644
--- a/src/views/Problems.svelte
+++ b/src/views/Problems.svelte
@@ -9,6 +9,7 @@
 	import MailList from '../layouts/MailList.svelte';
 	import ProblemView from '../components/ProblemView.svelte';
 	import { Badge } from '@/components/ui/badge';
+	import Filters from '../components/Filters.svelte';
 
 	let problems: NDKEventStore<NDKEvent> | undefined;
 	onDestroy(() => {
@@ -25,7 +26,7 @@
 </script>
 
 <MailLayout>
-	<div slot="filters"><Badge variant="outline">sdf</Badge></div>
+	<div slot="filters"><Filters /></div>
 	<div slot="list">
 		<MailList items={$validProblems} bloom={false} bind:selected />
 	</div>