diff --git a/src/app/page.tsx b/src/app/page.tsx
index aa0cf9cd..f6c6f2ac 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,8 +2,7 @@ import { createServerClient, type Storyline } from "../../lib/supabase";
 import { STORY_FACTORY } from "../../lib/contracts/constants";
 import { getTrendingStorylines, getRisingStorylines } from "../../lib/ranking";
 import { StoryCard } from "../components/StoryCard";
-import { FilterBar } from "../components/FilterBar";
-import { type WriterFilterValue } from "../components/WriterFilter";
+import { FilterBar, type WriterFilterValue } from "../components/FilterBar";
 import { GENRES, LANGUAGES } from "../../lib/genres";
 import Link from "next/link";
 
diff --git a/src/components/FilterBar.tsx b/src/components/FilterBar.tsx
index e3d521d3..1b9a2a66 100644
--- a/src/components/FilterBar.tsx
+++ b/src/components/FilterBar.tsx
@@ -12,6 +12,8 @@ const SORT_OPTIONS = [
   { value: "completed", label: "Completed" },
 ] as const;
 
+export type WriterFilterValue = "all" | "human" | "agent";
+
 type FilterKey = "writer" | "genre" | "lang" | "sort";
 
 interface FilterBarProps {
@@ -64,11 +66,12 @@ export function FilterBar({ writer, genre, lang, tab }: FilterBarProps) {
 
   return (
     <div ref={barRef}>
-      <div className="border-border flex items-center gap-x-3 rounded border px-3 py-2 text-xs">
+      <div className="border-border flex min-w-0 items-center gap-x-3 overflow-x-auto rounded border px-3 py-2 text-xs">
         {/* Writer token + dropdown */}
-        <div className="relative">
+        <div className="relative min-w-0">
           <Token
             label="writer"
+            shortLabel="W"
             value={writerDisplay(writer)}
             active={open === "writer"}
             onClick={() => toggle("writer")}
@@ -91,9 +94,10 @@ export function FilterBar({ writer, genre, lang, tab }: FilterBarProps) {
         </div>
 
         {/* Genre token + dropdown */}
-        <div className="relative">
+        <div className="relative min-w-0">
           <Token
             label="genre"
+            shortLabel="G"
             value={genre === "all" ? "All" : genre}
             active={open === "genre"}
             onClick={() => toggle("genre")}
@@ -118,9 +122,10 @@ export function FilterBar({ writer, genre, lang, tab }: FilterBarProps) {
         </div>
 
         {/* Language token + dropdown */}
-        <div className="relative">
+        <div className="relative min-w-0">
           <Token
             label="lang"
+            shortLabel="L"
             value={lang === "all" ? "All" : lang}
             active={open === "lang"}
             onClick={() => toggle("lang")}
@@ -179,11 +184,13 @@ export function FilterBar({ writer, genre, lang, tab }: FilterBarProps) {
 
 function Token({
   label,
+  shortLabel,
   value,
   active,
   onClick,
 }: {
   label: string;
+  shortLabel: string;
   value: string;
   active: boolean;
   onClick: () => void;
@@ -193,7 +200,8 @@ function Token({
       onClick={onClick}
       className={`whitespace-nowrap transition-colors hover:opacity-80 ${active ? "opacity-80" : ""}`}
     >
-      <span className="text-muted">{label}:</span>
+      <span className="text-muted sm:hidden">{shortLabel}:</span>
+      <span className="text-muted hidden sm:inline">{label}:</span>
       <span className="text-accent">{value}</span>
     </button>
   );
diff --git a/src/components/GenreLanguageFilter.tsx b/src/components/GenreLanguageFilter.tsx
deleted file mode 100644
index fb5f214b..00000000
--- a/src/components/GenreLanguageFilter.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { GENRES, LANGUAGES } from "../../lib/genres";
-import { DropdownSelect } from "./DropdownSelect";
-
-const genreOptions = [
-  { value: "all", label: "All genres" },
-  ...GENRES.map((g) => ({ value: g, label: g })),
-];
-
-const languageOptions = [
-  { value: "all", label: "All languages" },
-  ...LANGUAGES.map((l) => ({ value: l, label: l })),
-];
-
-export function GenreFilter({ active, tab, writer, lang }: { active: string; tab: string; writer: string; lang: string }) {
-  return (
-    <DropdownSelect
-      value={active}
-      onChange={(value) => {
-        const params = new URLSearchParams({ tab });
-        if (writer !== "all") params.set("writer", writer);
-        if (value !== "all") params.set("genre", value);
-        if (lang !== "all") params.set("lang", lang);
-        window.location.href = `/?${params.toString()}`;
-      }}
-      options={genreOptions}
-      size="sm"
-      className="w-32"
-    />
-  );
-}
-
-export function LanguageFilter({ active, tab, writer, genre }: { active: string; tab: string; writer: string; genre: string }) {
-  return (
-    <DropdownSelect
-      value={active}
-      onChange={(value) => {
-        const params = new URLSearchParams({ tab });
-        if (writer !== "all") params.set("writer", writer);
-        if (genre !== "all") params.set("genre", genre);
-        params.set("lang", value);
-        window.location.href = `/?${params.toString()}`;
-      }}
-      options={languageOptions}
-      size="sm"
-      className="w-36"
-    />
-  );
-}
diff --git a/src/components/SortDropdown.tsx b/src/components/SortDropdown.tsx
deleted file mode 100644
index 6538f6e5..00000000
--- a/src/components/SortDropdown.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { Select } from "./Select";
-
-const SORT_OPTIONS = [
-  { value: "new", label: "Recent" },
-  { value: "trending", label: "Trending" },
-  { value: "rising", label: "Rising" },
-  { value: "completed", label: "Completed" },
-];
-
-interface SortDropdownProps {
-  active: string;
-  writer: string;
-  basePath?: string;
-}
-
-export function SortDropdown({ active, writer, basePath = "/" }: SortDropdownProps) {
-  const router = useRouter();
-
-  return (
-    <div className="flex items-center gap-2">
-      <span className="text-muted text-xs">Sort:</span>
-      <Select
-        value={active}
-        onChange={(v) => {
-          const params = new URLSearchParams({ tab: v });
-          if (writer && writer !== "all") params.set("writer", writer);
-          router.push(`${basePath}?${params.toString()}`);
-        }}
-        options={SORT_OPTIONS}
-        className="w-36"
-      />
-    </div>
-  );
-}
diff --git a/src/components/WriterFilter.tsx b/src/components/WriterFilter.tsx
deleted file mode 100644
index 426f2454..00000000
--- a/src/components/WriterFilter.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import Link from "next/link";
-
-const WRITER_OPTIONS = [
-  { value: "all", label: "All" },
-  { value: "human", label: "Human" },
-  { value: "agent", label: "AI" },
-] as const;
-
-export type WriterFilterValue = (typeof WRITER_OPTIONS)[number]["value"];
-
-export function WriterFilter({
-  active,
-  tab,
-  className,
-  basePath = "/",
-}: {
-  active: WriterFilterValue;
-  tab: string;
-  className?: string;
-  basePath?: string;
-}) {
-  return (
-    <div className={`flex items-center gap-1 ${className ?? ""}`}>
-      <span className="text-muted mr-1 text-xs">Writer:</span>
-      {WRITER_OPTIONS.map(({ value, label }) => (
-        <Link
-          key={value}
-          href={`${basePath}?tab=${tab}&writer=${value}`}
-          className={`rounded px-2 py-1 text-xs transition-colors ${
-            value === active
-              ? "bg-accent/10 text-accent font-medium"
-              : "text-muted hover:text-foreground"
-          }`}
-        >
-          {label}
-        </Link>
-      ))}
-    </div>
-  );
-}