diff --git a/app/components/filters/Filters.tsx b/app/components/filters/Filters.tsx
index fce34c3..b5b3dd4 100644
--- a/app/components/filters/Filters.tsx
+++ b/app/components/filters/Filters.tsx
@@ -1,9 +1,13 @@
 import { DisclosureGroup } from "react-aria-components";
 import * as Stars from "./Stars";
 
-export function Filters() {
+import type { ClassProps } from "~/lib/props";
+
+export function Filters(
+    { className = "sticky top-0 mx-20 hidden h-screen pt-10 lg:block" }: ClassProps = {},
+) {
     return (
-        <DisclosureGroup className="sticky top-0 mx-20 hidden h-screen pt-10 lg:block">
+        <DisclosureGroup className={className}>
             {/* TODO: Search */}
             {/* TODO: Tags */}
             <Stars.Filter />
diff --git a/app/components/filters/MobileFilters.tsx b/app/components/filters/MobileFilters.tsx
new file mode 100644
index 0000000..fc9104e
--- /dev/null
+++ b/app/components/filters/MobileFilters.tsx
@@ -0,0 +1,26 @@
+import { Button, Disclosure, DisclosurePanel } from "react-aria-components";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+import { Filters } from "./Filters";
+
+export function MobileFilters() {
+    return (
+        <Disclosure className="relative lg:hidden">
+            {({ open }) => (
+                <>
+                    <Button
+                        aria-label={open ? "Hide filters" : "Show filters"}
+                        className="rounded-md p-1 text-black focus-visible:outline-0 dark:text-white"
+                        slot="trigger"
+                    >
+                        {open
+                            ? <XMarkIcon className="h-8 w-8" />
+                            : <Bars3Icon className="h-8 w-8" />}
+                    </Button>
+                    <DisclosurePanel className="absolute left-0 right-0 top-full z-10 border-b-2 border-black bg-[#f9ecdf] p-6 shadow-hard-lg dark:border-white/50 dark:bg-[#17191e]">
+                        <Filters className="pt-0" />
+                    </DisclosurePanel>
+                </>
+            )}
+        </Disclosure>
+    );
+}
diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx
index 075699d..200d4b3 100644
--- a/app/routes/_index/route.tsx
+++ b/app/routes/_index/route.tsx
@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { isRouteErrorResponse, useNavigate } from "react-router";
 import { Recommendation } from "~/components/Recommendation";
 import { Filters } from "~/components/filters/Filters";
+import { MobileFilters } from "~/components/filters/MobileFilters";
 import { getCollection } from "~/lib/content";
 import { stores } from "~/lib/stores.client";
 import { filterRecs, Stars } from "./utilities";
@@ -68,11 +69,16 @@ export async function clientLoader({ request, serverLoader }: Route.ClientLoader
 
 export default function Component({ loaderData }: Route.ComponentProps) {
     return (
-        <div className="noise-container p-6">
+        <div className="noise-container">
             <div className="noise" />
             <div className="noise-underlay" />
-            <h1 className="font-serif-display text-5xl font-bold sm:text-6xl">Recommendations</h1>
-            <div className="block sm:grid-cols-[3fr_2fr] lg:grid">
+            <header className="sticky top-0 z-20 flex items-center justify-between bg-[#f9ecdf] p-6 dark:bg-[#17191e]">
+                <h1 className="font-serif-display text-5xl font-bold sm:text-6xl">
+                    Recommendations
+                </h1>
+                <MobileFilters />
+            </header>
+            <div className="block p-6 sm:grid-cols-[3fr_2fr] lg:grid">
                 <div className="flex flex-col items-start gap-7 py-10">
                     <AnimatePresence>
                         {loaderData.filteredRecs.map((rec) => (