diff --git a/package.json b/package.json
index 8c375f9..7c614ac 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.2.4",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3fa20d..66a4277 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.13
         version: 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tailwindcss/vite':
         specifier: ^4.2.4
         version: 4.2.4(vite@6.4.2(jiti@2.6.1)(lightningcss@1.32.0))
@@ -640,6 +643,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
@@ -1964,6 +1980,26 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.28)(react@18.3.1)':
     dependencies:
       react: 18.3.1
diff --git a/src/components/Combobox.tsx b/src/components/Combobox.tsx
new file mode 100644
index 0000000..93f45d8
--- /dev/null
+++ b/src/components/Combobox.tsx
@@ -0,0 +1,184 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
+import { cn } from "@/lib/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/Popover";
+
+type ComboboxOption = {
+  label: string;
+  value: string;
+};
+
+type ComboboxProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: ComboboxOption[];
+  ariaLabel: string;
+  placeholder?: string;
+  triggerClassName?: string;
+};
+
+export function Combobox({
+  value,
+  onValueChange,
+  options,
+  ariaLabel,
+  placeholder = "Search",
+  triggerClassName,
+}: ComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const selectedOption = options.find((option) => option.value === value);
+  const filteredOptions = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+
+    if (!normalizedQuery) {
+      return options;
+    }
+
+    return options.filter((option) =>
+      option.label.toLowerCase().includes(normalizedQuery),
+    );
+  }, [options, query]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    inputRef.current?.focus();
+  }, [open]);
+
+  useEffect(() => {
+    const selectedIndex = filteredOptions.findIndex((option) => option.value === value);
+
+    if (selectedIndex >= 0) {
+      setActiveIndex(selectedIndex);
+      return;
+    }
+
+    setActiveIndex(0);
+  }, [filteredOptions, value]);
+
+  function selectOption(nextValue: string) {
+    onValueChange(nextValue);
+    setOpen(false);
+    setQuery("");
+  }
+
+  function moveActiveIndex(nextIndex: number) {
+    if (filteredOptions.length === 0) {
+      return;
+    }
+
+    const clampedIndex = (nextIndex + filteredOptions.length) % filteredOptions.length;
+    setActiveIndex(clampedIndex);
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+          setQuery("");
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          className={cn(
+            "inline-flex h-8 min-w-32 items-center justify-between gap-2 rounded-[10px] border border-border-subtle bg-surface-raised px-3 text-[12px] text-content outline-none transition-colors",
+            "hover:bg-interactive-hover focus-visible:border-border-strong focus-visible:ring-2 focus-visible:ring-focus-ring",
+            triggerClassName ?? "",
+          )}
+        >
+          <span className="truncate">{selectedOption?.label ?? placeholder}</span>
+          <ChevronDownIcon className="size-[15px] shrink-0 text-content-muted" />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-72 p-1.5" align="start">
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2 rounded-[10px] border border-border-subtle bg-surface px-2.5 py-2">
+            <SearchIcon className="size-[14px] text-content-subtle" />
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  moveActiveIndex(activeIndex + 1);
+                  return;
+                }
+
+                if (event.key === "ArrowUp") {
+                  event.preventDefault();
+                  moveActiveIndex(activeIndex - 1);
+                  return;
+                }
+
+                if (event.key === "Enter") {
+                  const activeOption = filteredOptions[activeIndex];
+
+                  if (!activeOption) {
+                    return;
+                  }
+
+                  event.preventDefault();
+                  selectOption(activeOption.value);
+                  return;
+                }
+
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setOpen(false);
+                }
+              }}
+              placeholder={placeholder}
+              className="w-full bg-transparent text-[12px] text-content outline-none placeholder:text-content-subtle"
+            />
+          </div>
+
+          <div className="max-h-64 overflow-auto">
+            {filteredOptions.length === 0 ? (
+              <div className="px-2.5 py-2 text-[12px] text-content-subtle">
+                No results
+              </div>
+            ) : (
+              filteredOptions.map((option, index) => {
+                const isSelected = option.value === value;
+                const isActive = index === activeIndex;
+
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    className={cn(
+                      "flex w-full items-center gap-2 rounded-[10px] px-2.5 py-2 text-left text-[12px] text-content transition-colors",
+                      isActive
+                        ? "bg-interactive-hover text-content"
+                        : "hover:bg-interactive-hover",
+                    )}
+                    onMouseEnter={() => setActiveIndex(index)}
+                    onClick={() => selectOption(option.value)}
+                  >
+                    <span className="flex size-4 items-center justify-center text-content-muted">
+                      {isSelected ? <CheckIcon className="size-[14px]" /> : null}
+                    </span>
+                    <span className="truncate">{option.label}</span>
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/RouteFilterBar.tsx b/src/components/RouteFilterBar.tsx
index 6f1edd7..26098d2 100644
--- a/src/components/RouteFilterBar.tsx
+++ b/src/components/RouteFilterBar.tsx
@@ -1,13 +1,16 @@
-import { cn } from "@/lib/cn";
+import { Combobox } from "@/components/Combobox";
+import { Select } from "@/components/Select";
 
 type FilterOption = {
   label: string;
-  active?: boolean;
+  value: string;
 };
 
 type FilterGroup = {
   label: string;
+  value: string;
   options: FilterOption[];
+  kind?: "select" | "combobox";
 };
 
 type RouteFilterBarProps = {
@@ -16,35 +19,32 @@ type RouteFilterBarProps = {
 
 export function RouteFilterBar({ groups }: RouteFilterBarProps) {
   return (
-    <div className="flex flex-wrap items-center gap-1.5">
+    <div className="flex flex-wrap items-center gap-2">
       {groups.map((group) => (
-        <div
-          key={group.label}
-          className="flex items-center gap-0.5 rounded-[10px] border border-border-subtle bg-surface-subtle p-0.5"
-        >
-          <span className="px-2 text-[10px] font-medium text-content-subtle">
+        <div key={group.label} className="flex items-center gap-2">
+          <span className="text-[11px] font-medium text-content-subtle">
             {group.label}
           </span>
-          {group.options.map((option) => (
-            <button
-              key={option.label}
-              type="button"
-              className={cn(
-                buttonClassName,
-                option.active ? activeButtonClassName : "",
-              )}
-            >
-              {option.label}
-            </button>
-          ))}
+          {group.kind === "combobox" ? (
+            <Combobox
+              value={group.value}
+              onValueChange={() => undefined}
+              options={group.options}
+              ariaLabel={group.label}
+              placeholder="Search feeds"
+              triggerClassName="h-8 min-w-36 rounded-[10px] bg-surface-raised text-[12px]"
+            />
+          ) : (
+            <Select
+              value={group.value}
+              onValueChange={() => undefined}
+              options={group.options}
+              ariaLabel={group.label}
+              triggerClassName="h-8 min-w-28 rounded-[10px] bg-surface-raised text-[12px]"
+            />
+          )}
         </div>
       ))}
     </div>
   );
 }
-
-const buttonClassName =
-  "rounded-[8px] px-2.5 py-1.25 text-[11px] font-medium text-content-muted transition-colors hover:bg-surface hover:text-content";
-
-const activeButtonClassName =
-  "border border-border-subtle bg-surface text-content shadow-[0_1px_1px_rgba(0,0,0,0.03)]";
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 9b7509f..7f0321e 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -12,6 +12,7 @@ type SelectProps = {
   onValueChange: (value: string) => void;
   options: SelectOption[];
   ariaLabel: string;
+  triggerClassName?: string;
 };
 
 export function Select({
@@ -19,6 +20,7 @@ export function Select({
   onValueChange,
   options,
   ariaLabel,
+  triggerClassName,
 }: SelectProps) {
   return (
     <SelectPrimitive.Root value={value} onValueChange={onValueChange}>
@@ -27,6 +29,7 @@ export function Select({
         className={cn(
           "inline-flex h-8.5 min-w-28 items-center justify-between gap-2 rounded-lg border border-border-subtle bg-surface px-3 text-[13px] text-content outline-none transition-colors",
           "hover:bg-interactive-hover focus-visible:border-border-strong focus-visible:ring-2 focus-visible:ring-focus-ring",
+          triggerClassName ?? "",
         )}
       >
         <SelectPrimitive.Value />
diff --git a/src/components/ViewSelect.tsx b/src/components/ViewSelect.tsx
index 3f50532..048c78c 100644
--- a/src/components/ViewSelect.tsx
+++ b/src/components/ViewSelect.tsx
@@ -1,6 +1,6 @@
 import { Settings2Icon } from "lucide-react";
 import { Select } from "@/components/Select";
-import { Button } from "@/components/ui/Button";
+import { IconButton } from "@/components/ui/IconButton";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/Popover";
 import { Switch } from "@/components/ui/Switch";
 
@@ -26,14 +26,10 @@ export function ViewSelect({ value, onValueChange }: ViewSelectProps) {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button
-          variant="secondary"
-          size="sm"
-          iconLeft={<Settings2Icon className="size-[15px]" />}
-          className="rounded-[10px]"
-        >
-          View
-        </Button>
+        <IconButton
+          icon={<Settings2Icon className="size-[15px]" />}
+          label="View options"
+        />
       </PopoverTrigger>
       <PopoverContent className="w-72 p-1.5" align="end">
         <div className="flex flex-col gap-1">
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
new file mode 100644
index 0000000..bdbd7a7
--- /dev/null
+++ b/src/components/ui/IconButton.tsx
@@ -0,0 +1,34 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { Button } from "@/components/ui/Button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+
+type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  icon: ReactNode;
+  label: string;
+};
+
+export function IconButton({ icon, label, ...props }: IconButtonProps) {
+  return (
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="secondary"
+            size="icon"
+            aria-label={label}
+            className="rounded-[10px]"
+            {...props}
+          >
+            {icon}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
new file mode 100644
index 0000000..a53775e
--- /dev/null
+++ b/src/components/ui/Tooltip.tsx
@@ -0,0 +1,25 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/cn";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export function TooltipContent({
+  className,
+  sideOffset = 6,
+  ...props
+}: TooltipPrimitive.TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 rounded-md border border-border-subtle bg-surface-overlay px-2 py-1 text-[11px] font-medium text-content outline-none",
+          className ?? "",
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Portal>
+  );
+}
diff --git a/src/routes/DashboardRoute.tsx b/src/routes/DashboardRoute.tsx
index c2e5382..29f285e 100644
--- a/src/routes/DashboardRoute.tsx
+++ b/src/routes/DashboardRoute.tsx
@@ -11,30 +11,39 @@ export function DashboardRoute() {
   return (
     <RouteLayout
       title="Dashboard"
-      meta="24 new items"
       actions={<ViewSelect value={view} onValueChange={setView} />}
       filters={
         <RouteFilterBar
           groups={[
             {
               label: "State",
+              value: "all",
               options: [
-                { label: "All", active: true },
-                { label: "Unread" },
-                { label: "Saved" },
+                { label: "All", value: "all" },
+                { label: "Unread", value: "unread" },
+                { label: "Saved", value: "saved" },
               ],
             },
             {
               label: "When",
+              value: "today",
               options: [
-                { label: "Today", active: true },
-                { label: "This week" },
-                { label: "Any time" },
+                { label: "Today", value: "today" },
+                { label: "This week", value: "this-week" },
+                { label: "Any time", value: "any-time" },
               ],
             },
             {
               label: "Source",
-              options: [{ label: "All feeds", active: true }],
+              value: "all-feeds",
+              kind: "combobox",
+              options: [
+                { label: "All feeds", value: "all-feeds" },
+                { label: "Ars Technica", value: "ars-technica" },
+                { label: "Figma", value: "figma" },
+                { label: "Tauri Blog", value: "tauri-blog" },
+                { label: "The Verge", value: "the-verge" },
+              ],
             },
           ]}
         />
diff --git a/src/routes/FeedRoute.tsx b/src/routes/FeedRoute.tsx
index 28aa98e..43b7c4d 100644
--- a/src/routes/FeedRoute.tsx
+++ b/src/routes/FeedRoute.tsx
@@ -9,7 +9,7 @@ export function FeedRoute() {
   );
 
   return (
-    <RouteLayout title={feed?.title ?? "Feed"} meta="Feed view">
+    <RouteLayout title={feed?.title ?? "Feed"}>
       <section className="border-b px-6 py-5 text-[13px] text-muted-foreground">
         Feed articles will appear here.
       </section>
diff --git a/src/routes/FolderRoute.tsx b/src/routes/FolderRoute.tsx
index fd2a23b..be5c2e8 100644
--- a/src/routes/FolderRoute.tsx
+++ b/src/routes/FolderRoute.tsx
@@ -9,7 +9,7 @@ export function FolderRoute() {
   );
 
   return (
-    <RouteLayout title={folder?.name ?? "Folder"} meta="Folder view">
+    <RouteLayout title={folder?.name ?? "Folder"}>
       <section className="border-b px-6 py-5 text-[13px] text-muted-foreground">
         Folder articles will appear here.
       </section>
diff --git a/src/routes/RouteLayout.tsx b/src/routes/RouteLayout.tsx
index d88b56c..ad2d663 100644
--- a/src/routes/RouteLayout.tsx
+++ b/src/routes/RouteLayout.tsx
@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 
 type RouteLayoutProps = {
   title: string;
-  meta: string;
   filters?: ReactNode;
   actions?: ReactNode;
   children: ReactNode;
@@ -10,7 +9,6 @@ type RouteLayoutProps = {
 
 export function RouteLayout({
   title,
-  meta,
   filters,
   actions,
   children,
@@ -24,17 +22,11 @@ export function RouteLayout({
         <div className="flex flex-wrap items-end justify-between gap-4">
           <div className="flex items-baseline gap-3" data-tauri-drag-region>
             <h1
-              className="text-[1.9rem] font-semibold tracking-[-0.03em] text-foreground"
+              className="text-[1.45rem] font-semibold tracking-[-0.03em] text-foreground"
               data-tauri-drag-region
             >
               {title}
             </h1>
-            <span
-              className="text-[13px] font-medium text-muted-foreground"
-              data-tauri-drag-region
-            >
-              {meta}
-            </span>
           </div>
           {actions ? <div className="shrink-0">{actions}</div> : null}
         </div>
diff --git a/src/routes/UnreadRoute.tsx b/src/routes/UnreadRoute.tsx
index 2609420..a17bef5 100644
--- a/src/routes/UnreadRoute.tsx
+++ b/src/routes/UnreadRoute.tsx
@@ -11,31 +11,33 @@ export function UnreadRoute() {
   return (
     <RouteLayout
       title="Unread"
-      meta="12 unread"
       actions={<ViewSelect value={view} onValueChange={setView} />}
       filters={
         <RouteFilterBar
           groups={[
             {
               label: "Sort",
+              value: "newest",
               options: [
-                { label: "Newest first", active: true },
-                { label: "Oldest first" },
+                { label: "Newest first", value: "newest" },
+                { label: "Oldest first", value: "oldest" },
               ],
             },
             {
               label: "When",
+              value: "today",
               options: [
-                { label: "Today", active: true },
-                { label: "This week" },
-                { label: "Any time" },
+                { label: "Today", value: "today" },
+                { label: "This week", value: "this-week" },
+                { label: "Any time", value: "any-time" },
               ],
             },
             {
               label: "Saved",
+              value: "all-unread",
               options: [
-                { label: "All unread", active: true },
-                { label: "Saved only" },
+                { label: "All unread", value: "all-unread" },
+                { label: "Saved only", value: "saved-only" },
               ],
             },
           ]}