diff --git a/t29-project-1/server/catApi.js b/t29-project-1/server/catApi.js
index acb17d9..6ca1d4b 100644
--- a/t29-project-1/server/catApi.js
+++ b/t29-project-1/server/catApi.js
@@ -49,8 +49,23 @@ export async function fetchCatFromApi(breedIds) {
   return data[0] || {};
 }
 
-export async function fetchBreedsFromApi() {
+const DEFAULT_BREEDS_PAGE = 0;
+const DEFAULT_BREEDS_LIMIT = 10;
+
+function parseNonNegativeInt(value, fallback) {
+  const parsed = Number(value);
+  return Number.isInteger(parsed) && parsed >= 0 ? parsed : fallback;
+}
+
+export async function fetchBreedsFromApi({ page, limit } = {}) {
   const breedsUrl = new URL(CAT_BREEDS_URL);
-  breedsUrl.searchParams.set('limit', '10');
+  breedsUrl.searchParams.set(
+    'limit',
+    String(parseNonNegativeInt(limit, DEFAULT_BREEDS_LIMIT))
+  );
+  breedsUrl.searchParams.set(
+    'page',
+    String(parseNonNegativeInt(page, DEFAULT_BREEDS_PAGE))
+  );
   return fetchApiResponse(breedsUrl);
 }
diff --git a/t29-project-1/server/catApi.test.js b/t29-project-1/server/catApi.test.js
index 7a6cde7..0413344 100644
--- a/t29-project-1/server/catApi.test.js
+++ b/t29-project-1/server/catApi.test.js
@@ -70,7 +70,7 @@ describe('fetchCatFromApi', () => {
 });
 
 describe('fetchBreedsFromApi', () => {
-  it('requests up to ten breeds', async () => {
+  it('defaults to the first page of ten breeds', async () => {
     const breeds = [{ id: 'abys', name: 'Abyssinian' }];
     fetchMock.mockResolvedValue(mockResponse(breeds));
 
@@ -79,5 +79,26 @@ describe('fetchBreedsFromApi', () => {
     const requestUrl = new URL(String(fetchMock.mock.calls[0][0]));
     expect(requestUrl.pathname).toBe('/v1/breeds');
     expect(requestUrl.searchParams.get('limit')).toBe('10');
+    expect(requestUrl.searchParams.get('page')).toBe('0');
+  });
+
+  it('requests the given page and limit', async () => {
+    fetchMock.mockResolvedValue(mockResponse([]));
+
+    await fetchBreedsFromApi({ page: 2, limit: 5 });
+
+    const requestUrl = new URL(String(fetchMock.mock.calls[0][0]));
+    expect(requestUrl.searchParams.get('limit')).toBe('5');
+    expect(requestUrl.searchParams.get('page')).toBe('2');
+  });
+
+  it('falls back to the defaults for invalid page or limit', async () => {
+    fetchMock.mockResolvedValue(mockResponse([]));
+
+    await fetchBreedsFromApi({ page: 'not-a-number', limit: -1 });
+
+    const requestUrl = new URL(String(fetchMock.mock.calls[0][0]));
+    expect(requestUrl.searchParams.get('limit')).toBe('10');
+    expect(requestUrl.searchParams.get('page')).toBe('0');
   });
 });
diff --git a/t29-project-1/server/index.js b/t29-project-1/server/index.js
index 7064f98..382cb89 100644
--- a/t29-project-1/server/index.js
+++ b/t29-project-1/server/index.js
@@ -10,7 +10,12 @@ app.use(cors());
 
 app.get('/api/breeds', async (req, res) => {
   try {
-    res.json(await fetchBreedsFromApi());
+    res.json(
+      await fetchBreedsFromApi({
+        page: req.query.page,
+        limit: req.query.limit,
+      })
+    );
   } catch (err) {
     console.error(err);
     res.status(err.statusCode || 500).send(err.message);
diff --git a/t29-project-1/src/App.tsx b/t29-project-1/src/App.tsx
index 0fe05bb..3d4b451 100644
--- a/t29-project-1/src/App.tsx
+++ b/t29-project-1/src/App.tsx
@@ -1,11 +1,15 @@
+import { useState } from 'react';
 import { useCatNavigation } from './hooks/useCatNavigation';
 import { useFavoriteCat } from './hooks/useFavoriteCat';
 import { NavPrevious, NavNext } from './components/ActionButtons';
+import { BreedDropdown } from './components/BreedDropdown';
 import { CatCard } from './components/CatCard';
 import { Link } from 'react-router-dom';
 import './App.css';
 
 export default function App() {
+  const [selectedBreedId, setSelectedBreedId] = useState<string | null>(null);
+
   const {
     currentCat,
     isLoading,
@@ -13,11 +17,18 @@ export default function App() {
     canGoPrevious,
     handleNext,
     handlePrevious,
-  } = useCatNavigation();
+  } = useCatNavigation(selectedBreedId);
   const { isFavorite, toggleFavorite } = useFavoriteCat(currentCat);
+
   return (
     <main className="app-container">
       <Link to="/favorite">Favorite</Link>
+
+      <BreedDropdown
+        selectedBreedId={selectedBreedId}
+        onSelectBreed={setSelectedBreedId}
+      />
+
       <nav className="nav-layout" aria-label="Main content navigation">
         <NavPrevious
           onClick={handlePrevious}
diff --git a/t29-project-1/src/api/catApi.ts b/t29-project-1/src/api/catApi.ts
index 72e79bd..796c352 100644
--- a/t29-project-1/src/api/catApi.ts
+++ b/t29-project-1/src/api/catApi.ts
@@ -9,6 +9,11 @@ export type CatFilters = {
   breedId?: string;
 };
 
+export type Breed = {
+  id: string;
+  name: string;
+};
+
 export async function fetchCat({ breedId }: CatFilters = {}): Promise<CatData> {
   const API_BASE =
     (import.meta.env.VITE_API_BASE as string) || 'http://localhost:3001';
@@ -28,3 +33,30 @@ export async function fetchCat({ breedId }: CatFilters = {}): Promise<CatData> {
 
   return response.json() as Promise<CatData>;
 }
+
+export type BreedsPage = {
+  page?: number;
+  limit?: number;
+};
+
+export async function fetchBreeds({ page, limit }: BreedsPage = {}): Promise<
+  Breed[]
+> {
+  const API_BASE =
+    (import.meta.env.VITE_API_BASE as string) || 'http://localhost:3001';
+  const params = new URLSearchParams();
+
+  if (page !== undefined) params.set('page', String(page));
+  if (limit !== undefined) params.set('limit', String(limit));
+
+  const query = params.toString();
+  const response = await fetch(
+    `${API_BASE}/api/breeds${query ? `?${query}` : ''}`
+  );
+
+  if (!response.ok) {
+    throw new Error(`Request failed with status ${response.status}`);
+  }
+
+  return response.json() as Promise<Breed[]>;
+}
diff --git a/t29-project-1/src/components/BreedDropdown.css b/t29-project-1/src/components/BreedDropdown.css
new file mode 100644
index 0000000..83830ea
--- /dev/null
+++ b/t29-project-1/src/components/BreedDropdown.css
@@ -0,0 +1,107 @@
+/* Breed filter dropdown, sized relative to the CatCard's own max-width so
+   both scale together and collapse to full-width on small screens */
+.breed-dropdown {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 100%;
+  max-width: calc(var(--card-max-width) * 0.75);
+  margin: 0 auto;
+}
+
+.breed-dropdown-label {
+  color: var(--text);
+}
+
+.breed-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 2px solid #e2e8f0;
+  border-radius: 10px;
+  background-color: #ffffff;
+  color: var(--text);
+  font: inherit;
+  font-weight: bold;
+  text-align: left;
+  cursor: pointer;
+}
+
+.breed-dropdown-trigger:hover {
+  border-color: #cbd5e1;
+}
+
+.breed-dropdown-trigger:focus-visible {
+  outline: 3px solid #005fcc;
+  outline-offset: 2px;
+}
+
+.breed-dropdown-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.breed-dropdown-arrow {
+  width: 8px;
+  height: 8px;
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+  border-right: 2px solid #7d5d75;
+  border-bottom: 2px solid #7d5d75;
+  transform: rotate(45deg);
+}
+
+/* Always opens downward, anchored to the trigger, regardless of which
+   option is selected */
+.breed-dropdown-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  margin: 0.25rem 0 0;
+  padding: 0.25rem;
+  list-style: none;
+  max-height: 260px;
+  overflow-y: auto;
+  background-color: #ffffff;
+  border: 2px solid #e2e8f0;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+}
+
+.breed-dropdown-list:focus-visible {
+  outline: none;
+}
+
+.breed-dropdown-option {
+  padding: 0.4rem 0.6rem;
+  border-radius: 6px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.breed-dropdown-option.is-highlighted {
+  background-color: #f1f5f9;
+}
+
+.breed-dropdown-option.is-selected {
+  color: #7d5d75;
+}
+
+.breed-dropdown-option.is-load-more {
+  margin-top: 0.25rem;
+  border-top: 1px solid #e2e8f0;
+  border-radius: 0;
+  color: #7d5d75;
+  text-align: center;
+}
+
+.breed-dropdown-error {
+  margin: 0;
+  font-size: 0.85rem;
+  color: red;
+}
diff --git a/t29-project-1/src/components/BreedDropdown.tsx b/t29-project-1/src/components/BreedDropdown.tsx
new file mode 100644
index 0000000..4ffcef5
--- /dev/null
+++ b/t29-project-1/src/components/BreedDropdown.tsx
@@ -0,0 +1,199 @@
+import type { KeyboardEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { fetchBreeds, type Breed } from '../api/catApi';
+import './BreedDropdown.css';
+
+interface BreedDropdownProps {
+  selectedBreedId: string | null;
+  onSelectBreed: (breedId: string | null) => void;
+}
+
+const ALL_BREEDS_OPTION: Breed = { id: '', name: 'All breeds' };
+const LOAD_MORE_OPTION_ID = '__load_more__';
+const PAGE_SIZE = 10;
+
+export const BreedDropdown = ({
+  selectedBreedId,
+  onSelectBreed,
+}: BreedDropdownProps) => {
+  const {
+    data,
+    error,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ['breeds'],
+    queryFn: ({ pageParam }) =>
+      fetchBreeds({ page: pageParam, limit: PAGE_SIZE }),
+    initialPageParam: 0,
+    // A full page suggests there may be more; a short page means we've
+    // reached the end. The API doesn't return a total count to check against.
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.length === PAGE_SIZE ? allPages.length : undefined,
+  });
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  const fetchedBreeds = data?.pages.flat() ?? [];
+
+  // Shaped like a Breed so it can sit inside `options` and ride along with
+  // the same arrow-key/Enter/click handling real breeds use, instead of
+  // needing separate logic to reach and activate it.
+  const loadMoreOption: Breed = {
+    id: LOAD_MORE_OPTION_ID,
+    name: isFetchingNextPage ? 'Loading…' : 'Load more breeds…',
+  };
+
+  const options: Breed[] = [
+    ALL_BREEDS_OPTION,
+    ...fetchedBreeds,
+    ...(hasNextPage ? [loadMoreOption] : []),
+  ];
+  const isSelected = (option: Breed) => option.id === (selectedBreedId ?? '');
+  const selectedOption = options.find(isSelected) ?? ALL_BREEDS_OPTION;
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) listRef.current?.focus();
+  }, [isOpen]);
+
+  const openDropdown = () => {
+    const selectedIndex = options.findIndex(isSelected);
+    setHighlightedIndex(selectedIndex === -1 ? 0 : selectedIndex);
+    setIsOpen(true);
+  };
+
+  const closeDropdown = () => {
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+
+  const selectOption = (option: Breed) => {
+    if (option.id === LOAD_MORE_OPTION_ID) {
+      if (!isFetchingNextPage) void fetchNextPage();
+      return;
+    }
+
+    onSelectBreed(option.id || null);
+    closeDropdown();
+  };
+
+  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (
+      event.key === 'ArrowDown' ||
+      event.key === 'Enter' ||
+      event.key === ' '
+    ) {
+      event.preventDefault();
+      openDropdown();
+    }
+  };
+
+  const handleListKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setHighlightedIndex((index) => Math.min(index + 1, options.length - 1));
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setHighlightedIndex((index) => Math.max(index - 1, 0));
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      selectOption(options[highlightedIndex]);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      closeDropdown();
+    } else if (event.key === 'Tab') {
+      setIsOpen(false);
+    }
+  };
+
+  const highlightedOption = options[highlightedIndex];
+
+  return (
+    <div className="breed-dropdown" ref={containerRef}>
+      <span className="breed-dropdown-label" id="breed-dropdown-label">
+        Filter by breed
+      </span>
+      <button
+        type="button"
+        ref={triggerRef}
+        className="breed-dropdown-trigger"
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-labelledby="breed-dropdown-label"
+        disabled={isLoading || Boolean(error)}
+        onClick={() => (isOpen ? closeDropdown() : openDropdown())}
+        onKeyDown={handleTriggerKeyDown}
+      >
+        {selectedOption.name}
+        <span className="breed-dropdown-arrow" aria-hidden="true" />
+      </button>
+
+      {isOpen && (
+        // The list itself holds real DOM focus (tabIndex={-1} + .focus() on
+        // open); aria-activedescendant tells screen readers which option is
+        // "virtually" focused, so arrow keys can move the highlight without
+        // moving actual DOM focus between list items.
+        <ul
+          ref={listRef}
+          className="breed-dropdown-list"
+          role="listbox"
+          aria-labelledby="breed-dropdown-label"
+          aria-activedescendant={
+            highlightedOption
+              ? `breed-option-${highlightedOption.id || 'all'}`
+              : undefined
+          }
+          tabIndex={-1}
+          onKeyDown={handleListKeyDown}
+        >
+          {options.map((option, index) => {
+            const isLoadMore = option.id === LOAD_MORE_OPTION_ID;
+
+            return (
+              <li
+                key={option.id || 'all'}
+                id={`breed-option-${option.id || 'all'}`}
+                role="option"
+                aria-selected={!isLoadMore && isSelected(option)}
+                className={[
+                  'breed-dropdown-option',
+                  isLoadMore ? 'is-load-more' : '',
+                  index === highlightedIndex ? 'is-highlighted' : '',
+                  isSelected(option) ? 'is-selected' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                onMouseEnter={() => setHighlightedIndex(index)}
+                onClick={() => selectOption(option)}
+              >
+                {option.name}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {error && <p className="breed-dropdown-error">Could not load breeds.</p>}
+    </div>
+  );
+};
diff --git a/t29-project-1/src/components/CatCard.css b/t29-project-1/src/components/CatCard.css
index 06bdd1c..336780c 100644
--- a/t29-project-1/src/components/CatCard.css
+++ b/t29-project-1/src/components/CatCard.css
@@ -5,7 +5,7 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  max-width: 400px;
+  max-width: var(--card-max-width);
   background-color: #fff4c8;
   border: 3px solid #7d5d75;
   border-radius: 16px;
diff --git a/t29-project-1/src/docs/BREED_DROPDOWN.md b/t29-project-1/src/docs/BREED_DROPDOWN.md
new file mode 100644
index 0000000..ac7ab04
--- /dev/null
+++ b/t29-project-1/src/docs/BREED_DROPDOWN.md
@@ -0,0 +1,101 @@
+# Breed dropdown guide
+
+This document explains `BreedDropdown`, the component for filtering cats by
+breed (US2).
+
+## What it is
+
+`BreedDropdown` is a fully custom dropdown, not a native `<select>`. It was
+built from scratch (a button + our own positioned list) so it always opens
+downward from the trigger — native `<select>` elements let the browser/OS
+decide where the option list appears, which is inconsistent across browsers.
+
+## Props
+
+```ts
+interface BreedDropdownProps {
+  selectedBreedId: string | null;
+  onSelectBreed: (breedId: string | null) => void;
+}
+```
+
+It is a controlled component: it holds no persisted state itself. The parent
+owns the current selection and passes it in, the same way a native `<select>`
+would work with `value`/`onChange`.
+
+```tsx
+const [selectedBreedId, setSelectedBreedId] = useState<string | null>(null);
+
+<BreedDropdown
+  selectedBreedId={selectedBreedId}
+  onSelectBreed={setSelectedBreedId}
+/>;
+```
+
+`onSelectBreed` receives `null` when the user picks "All breeds".
+
+## How the selection affects cat fetching
+
+`App.tsx` passes `selectedBreedId` straight into `useCatNavigation` (US2
+closes the loop, `src/hooks/useCatNavigation.ts`):
+
+```tsx
+const [selectedBreedId, setSelectedBreedId] = useState<string | null>(null);
+const { currentCat, ... } = useCatNavigation(selectedBreedId);
+
+<BreedDropdown
+  selectedBreedId={selectedBreedId}
+  onSelectBreed={setSelectedBreedId}
+/>;
+```
+
+Whenever the breed changes, `useCatNavigation`:
+
+- clears the current browsing history (so "next"/"previous" don't mix cats
+  fetched under the old filter with the new one), and
+- immediately fetches the first cat for the newly selected breed, without
+  requiring a click on the next/previous arrows.
+
+If a breed genuinely has no available cat image, the fetch is treated as an
+error (`"No cat available for this breed."`) rather than silently showing an
+empty card, and that cat is not added to history.
+
+## Data
+
+Breeds are fetched internally with `fetchBreeds()` (`src/api/catApi.ts`),
+using TanStack Query, the same pattern `Cat.tsx` already uses for fetching cat
+images. The trigger is disabled while loading and shows an error message if
+the fetch fails; callers do not need to handle either state themselves.
+
+## Loading more breeds
+
+Breeds are fetched 10 at a time using TanStack Query's `useInfiniteQuery`,
+via `/api/breeds?page=<n>&limit=10`. Nothing beyond the first page is
+fetched until needed. A "Load more breeds…" row appears at the bottom of the
+list whenever another page might exist, and requests the next page when
+activated (its label switches to "Loading…" while that request is in
+flight). It behaves like any other row in the list (arrow keys, Enter, or
+click), but selecting it loads more breeds instead of closing the dropdown.
+
+Whether there's a next page is inferred from the last response: a full page
+(10 breeds) means there may be more, a short page means the list is
+exhausted. The Cat API doesn't return a total breed count to check against
+directly.
+
+## Keyboard support
+
+- `Enter` / `Space` / `↓` on the closed trigger opens the list.
+- `↑` / `↓` move the highlighted option.
+- `Enter` / `Space` selects the highlighted option (or loads more, if it is
+  the "Load more" row).
+- `Escape` closes the list and returns focus to the trigger.
+- `Tab` closes the list and lets focus move on normally.
+- Clicking outside the dropdown closes it.
+
+## Testing
+
+There is no automated test for `BreedDropdown` yet. Testing its interactive
+behavior (opening, keyboard navigation, selection) needs a component-testing
+library such as `@testing-library/react`, which is not installed in this
+project — this is the same gap already noted in `TESTING.md` for React
+component interaction tests generally.
diff --git a/t29-project-1/src/docs/CAT_API.md b/t29-project-1/src/docs/CAT_API.md
index 79590ec..cbcc23e 100644
--- a/t29-project-1/src/docs/CAT_API.md
+++ b/t29-project-1/src/docs/CAT_API.md
@@ -63,8 +63,8 @@ Display the image with the returned `url`:
 
 ## Get breeds
 
-The breed endpoint returns up to 10 breeds. Each breed contains an ID and a
-human-readable name:
+The breed endpoint is paginated, defaulting to the first 10 breeds. Each
+breed contains an ID and a human-readable name:
 
 ```js
 const response = await fetch('/api/breeds');
@@ -75,6 +75,14 @@ breeds.forEach((breed) => {
 });
 ```
 
+Pass `page` and `limit` to fetch a different page or page size:
+
+```js
+const response = await fetch('/api/breeds?page=1&limit=10');
+```
+
+Invalid or missing values fall back to `page=0` and `limit=10`.
+
 Example response:
 
 ```json
diff --git a/t29-project-1/src/hooks/useCatNavigation.ts b/t29-project-1/src/hooks/useCatNavigation.ts
index 50af1cc..6f76d61 100644
--- a/t29-project-1/src/hooks/useCatNavigation.ts
+++ b/t29-project-1/src/hooks/useCatNavigation.ts
@@ -1,10 +1,10 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { fetchCat, type CatData } from '../api/catApi';
 
 const STORAGE_KEY_HISTORY = 'cat_app_history';
 const STORAGE_KEY_INDEX = 'cat_app_index';
 
-export function useCatNavigation() {
+export function useCatNavigation(breedId: string | null = null) {
   const [history, setHistory] = useState<CatData[]>(() => {
     try {
       const savedHistory = localStorage.getItem(STORAGE_KEY_HISTORY);
@@ -39,18 +39,16 @@ export function useCatNavigation() {
     }
   }, [history, currentIndex]);
 
-  const handleNext = useCallback(async () => {
-    // If browsing backward in history, advance forward index
-    if (currentIndex < history.length - 1) {
-      setCurrentIndex((prev) => prev + 1);
-      return;
-    }
-
-    // Fetch new cat
+  const fetchNewCat = useCallback(async (forBreedId: string | null) => {
     setIsLoading(true);
     setError(null);
     try {
-      const newCat = await fetchCat();
+      const newCat = await fetchCat({ breedId: forBreedId ?? undefined });
+
+      if (!newCat.url) {
+        throw new Error('No cat available for this breed.');
+      }
+
       setHistory((prev) => [...prev, newCat]);
       setCurrentIndex((prev) => prev + 1);
     } catch (err) {
@@ -58,7 +56,32 @@ export function useCatNavigation() {
     } finally {
       setIsLoading(false);
     }
-  }, [currentIndex, history.length]);
+  }, []);
+
+  // Start a fresh browsing session when the breed filter changes, instead
+  // of mixing cats fetched under the previous filter into "next"/"previous",
+  // and immediately load the first cat for the newly selected breed.
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    setHistory([]);
+    setCurrentIndex(-1);
+    void fetchNewCat(breedId);
+  }, [breedId, fetchNewCat]);
+
+  const handleNext = useCallback(async () => {
+    // If browsing backward in history, advance forward index
+    if (currentIndex < history.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+      return;
+    }
+
+    await fetchNewCat(breedId);
+  }, [currentIndex, history.length, breedId, fetchNewCat]);
 
   const handlePrevious = useCallback(() => {
     if (canGoPrevious) {
diff --git a/t29-project-1/src/index.css b/t29-project-1/src/index.css
index 5fb3313..73089a6 100644
--- a/t29-project-1/src/index.css
+++ b/t29-project-1/src/index.css
@@ -11,6 +11,8 @@
   --shadow:
     rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
 
+  --card-max-width: 400px;
+
   --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
   --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
   --mono: ui-monospace, Consolas, monospace;