diff --git a/packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte b/packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte
index efc3622..6de7350 100644
--- a/packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte
+++ b/packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte
@@ -21,7 +21,13 @@
   } = $props();
 </script>
 
-<div class={cn("flex gap-2", scrollable && "overflow-x-auto pb-0.5 scrollbar-none", className)}>
+<div
+  class={cn(
+    "flex gap-2",
+    scrollable ? "flex-nowrap overflow-x-auto pb-0.5 scrollbar-none" : "flex-wrap",
+    className,
+  )}
+>
   {#each options as option (option.value)}
     <button
       type="button"
@@ -29,7 +35,7 @@
       class={cn(
         "whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200 cursor-pointer shrink-0",
         value === option.value
-          ? "bg-gradient-to-r from-primary to-accent text-white shadow-sm shadow-primary/30 border border-transparent"
+          ? "bg-gradient-to-r from-primary to-accent text-white shadow-sm shadow-primary/30"
           : "border border-primary/20 text-muted-foreground bg-background/50 hover:border-primary/50 hover:text-foreground hover:bg-background/80",
       )}
     >