diff --git a/apps/hyperdrive-trading/src/ui/landing/Landing.tsx b/apps/hyperdrive-trading/src/ui/landing/Landing.tsx
index efe377da8..4e4ed6c8a 100644
--- a/apps/hyperdrive-trading/src/ui/landing/Landing.tsx
+++ b/apps/hyperdrive-trading/src/ui/landing/Landing.tsx
@@ -7,22 +7,7 @@ export function Landing(): ReactElement | null {
     <div className="flex flex-col items-center gap-4 lg:w-[900px]">
       <Hero />
       <div className="flex w-full flex-col items-center">
-        <div className="flex flex-col gap-4">
-          {/* TODO: Implement filter buttons
-             <div className="flex items-center gap-3">
-              <button className="daisy-btn daisy-btn-sm gap-1.5 rounded-full">
-                All Terms
-                <ChevronDownIcon className="ml-1 size-4 text-neutral-content" />
-              </button>
-              <button className="daisy-btn daisy-btn-sm gap-1.5 rounded-full">
-                All Assets
-                <ChevronDownIcon className="ml-1 size-4 text-neutral-content" />
-              </button>
-              <button className="daisy-btn daisy-btn-sm gap-1.5 rounded-full">
-                All Chains
-                <ChevronDownIcon className="ml-1 size-4 text-neutral-content" />
-              </button>
-            </div> */}
+        <div className="flex w-full flex-col gap-4">
           <PoolsList />
         </div>
       </div>
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx
index 28c010272..2e1e53abc 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx
@@ -11,8 +11,9 @@ import {
   BarsArrowDownIcon,
 } from "@heroicons/react/20/solid";
 import { QueryStatus, useQuery } from "@tanstack/react-query";
+import { useNavigate, useSearch } from "@tanstack/react-router";
 import { getPublicClient } from "@wagmi/core";
-import { ReactElement, ReactNode, useMemo, useRef, useState } from "react";
+import { ReactElement, ReactNode, useMemo, useState } from "react";
 import { ZERO_ADDRESS } from "src/base/constants";
 import { isTestnetChain } from "src/chains/isTestnetChain";
 import { calculateMarketYieldMultiplier } from "src/hyperdrive/calculateMarketYieldMultiplier";
@@ -25,6 +26,7 @@ import LoadingState from "src/ui/base/components/LoadingState";
 import { MultiSelect } from "src/ui/base/components/MultiSelect";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { Well } from "src/ui/base/components/Well/Well";
+import { LANDING_ROUTE } from "src/ui/landing/routes";
 import { PoolRow, PoolRowProps } from "src/ui/markets/PoolRow";
 import { PublicClient } from "viem";
 import { useChainId } from "wagmi";
@@ -41,6 +43,10 @@ type SortOption = (typeof sortOptions)[number];
 
 export function PoolsList(): ReactElement {
   const { pools: allPools, status } = usePoolsList();
+  const { chains: selectedChains, assets: selectedAssets } = useSearch({
+    from: LANDING_ROUTE,
+  });
+  const navigate = useNavigate({ from: LANDING_ROUTE });
   const [sort, setSort] = useState<SortOption>("TVL");
 
   // Sync filters with pools
@@ -88,21 +94,18 @@ export function PoolsList(): ReactElement {
     };
   }, [allPools]);
 
-  const [selectedChains, setSelectedChains] = useState<number[]>([]);
-  const [selectedAssets, setSelectedAssets] = useState<string[]>([]);
-
   // Filter and sort pools
   const selectedPools = allPools
     ?.filter((pool) => {
       if (
-        selectedChains.length &&
+        selectedChains?.length &&
         !selectedChains.includes(pool.hyperdrive.chainId)
       ) {
         return false;
       }
 
       if (
-        selectedAssets.length &&
+        selectedAssets?.length &&
         !pool.depositAssets.some(({ symbol }) =>
           selectedAssets.includes(symbol),
         )
@@ -136,14 +139,8 @@ export function PoolsList(): ReactElement {
       }
     });
 
-  // To prevent jarring layout shifts when no pools match the selected filters,
-  // the NonIdealState is wrapped in a div with a width set to match the outer
-  // container's width, which will be the width it rendered at before the
-  // filter's were changed.
-  const containerRef = useRef<HTMLDivElement>(null);
-
   return (
-    <div className="flex w-full flex-col gap-5" ref={containerRef}>
+    <div className="flex w-full flex-col gap-5">
       {status === "loading" && !selectedPools ? (
         <LoadingState />
       ) : selectedPools ? (
@@ -157,13 +154,22 @@ export function PoolsList(): ReactElement {
               {filters && filters.chains.length > 1 && (
                 <MultiSelect
                   title="Filter by chain"
-                  selected={selectedChains}
-                  onChange={setSelectedChains}
+                  selected={selectedChains || []}
+                  onChange={(chains) =>
+                    navigate({
+                      search: (current) => {
+                        return {
+                          ...current,
+                          chains,
+                        };
+                      },
+                    })
+                  }
                   displayValue={
-                    selectedChains.length === 1
+                    selectedChains?.length === 1
                       ? appConfig.chains[selectedChains[0]].name
                       : `${
-                          selectedChains.length || filters?.chains.length
+                          selectedChains?.length || filters?.chains.length
                         } chains`
                   }
                   searchEnabled
@@ -185,13 +191,22 @@ export function PoolsList(): ReactElement {
               {filters && filters.assets.length > 1 && (
                 <MultiSelect
                   title="Filter by deposit asset"
-                  selected={selectedAssets}
-                  onChange={setSelectedAssets}
+                  selected={selectedAssets || []}
+                  onChange={(assets) =>
+                    navigate({
+                      search: (current) => {
+                        return {
+                          ...current,
+                          assets,
+                        };
+                      },
+                    })
+                  }
                   displayValue={
-                    selectedAssets.length === 1
+                    selectedAssets?.length === 1
                       ? selectedAssets[0]
                       : `${
-                          selectedAssets.length || filters.assets.length
+                          selectedAssets?.length || filters.assets.length
                         } assets`
                   }
                   searchEnabled
@@ -248,12 +263,7 @@ export function PoolsList(): ReactElement {
           </div>
 
           {!selectedPools.length ? (
-            <Well
-              className="max-w-[90vw]"
-              style={{
-                width: containerRef.current?.offsetWidth,
-              }}
-            >
+            <Well className="max-w-[90vw]">
               {allPools?.length ? (
                 <NonIdealState
                   heading={"No pools found"}
diff --git a/apps/hyperdrive-trading/src/ui/routes/index.tsx b/apps/hyperdrive-trading/src/ui/routes/index.tsx
index e380e3569..c100004af 100644
--- a/apps/hyperdrive-trading/src/ui/routes/index.tsx
+++ b/apps/hyperdrive-trading/src/ui/routes/index.tsx
@@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { Page } from "src/ui/app/Page";
 import { Landing } from "src/ui/landing/Landing";
 import { LANDING_ROUTE } from "src/ui/landing/routes";
+import { z } from "zod";
 
 export const Route = createFileRoute(LANDING_ROUTE)({
   component: () => (
@@ -9,4 +10,8 @@ export const Route = createFileRoute(LANDING_ROUTE)({
       <Landing />
     </Page>
   ),
+  validateSearch: z.object({
+    chains: z.array(z.number()).optional(),
+    assets: z.array(z.string()).optional(),
+  }),
 });