diff --git a/src/sidebar/components/PaginatedThreadList.tsx b/src/sidebar/components/PaginatedThreadList.tsx
index 115a1dccefe..01a2d63f4c3 100644
--- a/src/sidebar/components/PaginatedThreadList.tsx
+++ b/src/sidebar/components/PaginatedThreadList.tsx
@@ -1,8 +1,8 @@
+import { Pagination } from '@hypothesis/frontend-shared';
 import { useMemo } from 'preact/hooks';
 
 import type { Thread } from '../helpers/build-thread';
 import { countVisible } from '../helpers/thread';
-import PaginationNavigation from './PaginationNavigation';
 import ThreadList from './ThreadList';
 
 export type PaginatedThreadListProps = {
@@ -19,7 +19,7 @@ export type PaginatedThreadListProps = {
  *
  * Render the threads for the current page of results, and pagination controls.
  */
-function PaginatedThreadList({
+export default function PaginatedThreadList({
   currentPage,
   isLoading,
   onChangePage,
@@ -41,7 +41,7 @@ function PaginatedThreadList({
     <>
       <ThreadList threads={paginatedThreads} />
       {!isLoading && (
-        <PaginationNavigation
+        <Pagination
           currentPage={currentPage}
           onChangePage={onChangePage}
           totalPages={totalPages}
@@ -50,5 +50,3 @@ function PaginatedThreadList({
     </>
   );
 }
-
-export default PaginatedThreadList;
diff --git a/src/sidebar/components/PaginationNavigation.tsx b/src/sidebar/components/PaginationNavigation.tsx
deleted file mode 100644
index a96d0a4139e..00000000000
--- a/src/sidebar/components/PaginationNavigation.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import {
-  Button,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-} from '@hypothesis/frontend-shared';
-import type { ButtonProps } from '@hypothesis/frontend-shared/lib/components/input/Button';
-import type { PresentationalProps } from '@hypothesis/frontend-shared/lib/types';
-import classnames from 'classnames';
-import type { JSX } from 'preact';
-
-import { pageNumberOptions } from '../util/pagination';
-
-type NavigationButtonProps = PresentationalProps &
-  ButtonProps &
-  Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'icon' | 'size'>;
-
-function NavigationButton({ ...buttonProps }: NavigationButtonProps) {
-  return (
-    <Button
-      classes={classnames(
-        'px-3.5 py-2.5 gap-x-1',
-        'font-semibold rounded',
-        // These colors are the same as the "dark" variant of IconButton
-        'text-grey-7 bg-grey-2 enabled:hover:text-grey-9 enabled:hover:bg-grey-3',
-        'disabled:text-grey-5 aria-pressed:bg-grey-3 aria-expanded:bg-grey-3',
-      )}
-      {...buttonProps}
-      size="custom"
-      variant="custom"
-    />
-  );
-}
-
-export type PaginationNavigationProps = {
-  /** 1-indexed page number of currently-visible page of results */
-  currentPage: number;
-  onChangePage: (page: number) => void;
-  totalPages: number;
-};
-
-/**
- * Render pagination navigation controls, with buttons to go next, previous
- * and nearby pages. Buttons corresponding to nearby pages are shown on wider
- * screens; for narrow screens only Prev and Next buttons are shown.
- *
- */
-function PaginationNavigation({
-  currentPage,
-  onChangePage,
-  totalPages,
-}: PaginationNavigationProps) {
-  // Pages are 1-indexed
-  const hasNextPage = currentPage < totalPages;
-  const hasPreviousPage = currentPage > 1;
-  const pageNumbers = pageNumberOptions(currentPage, totalPages);
-
-  /**
-   * @param {number} pageNumber
-   * @param {HTMLElement} element
-   */
-  const changePageTo = (pageNumber: number, element: HTMLElement) => {
-    onChangePage(pageNumber);
-    // Because changing pagination page doesn't reload the page (as it would
-    // in a "traditional" HTML context), the clicked-upon navigation button
-    // will awkwardly retain focus unless it is actively removed.
-    // TODO: Evaluate this for a11y issues
-    element.blur();
-  };
-
-  return (
-    <div
-      className="flex items-center text-md"
-      data-testid="pagination-navigation"
-    >
-      <div className="w-28 h-10">
-        {hasPreviousPage && (
-          <NavigationButton
-            title="Go to previous page"
-            onClick={e =>
-              changePageTo(currentPage - 1, e.target as HTMLElement)
-            }
-          >
-            <ArrowLeftIcon />
-            prev
-          </NavigationButton>
-        )}
-      </div>
-      <ul
-        className={classnames(
-          // Where there's enough horizontal space,
-          // lay out page navigation buttons horizontally between prev/next:
-          // | prevPage  |       numberedPages          | nextPage
-          //
-          // e.g.
-          // | [<- prev] | [2] ... [5] [6] [7] ... [10] | [next ->] |
-          //
-          // These page buttons are hidden on narrow screens
-          'hidden',
-          // For slightly wider screens, they are shown in a horizontal row
-          'md:flex md:items-center md:justify-center md:gap-x-2',
-          // when visible, this element should stretch to fill available space
-          'md:grow',
-        )}
-      >
-        {pageNumbers.map((page, idx) => (
-          <li key={idx}>
-            {page === null ? (
-              <div data-testid="pagination-gap">...</div>
-            ) : (
-              <NavigationButton
-                key={`page-${idx}`}
-                title={`Go to page ${page}`}
-                pressed={page === currentPage}
-                onClick={e => changePageTo(page, e.target as HTMLElement)}
-              >
-                {page.toString()}
-              </NavigationButton>
-            )}
-          </li>
-        ))}
-      </ul>
-      <div
-        className={classnames(
-          'w-28 h-10 flex justify-end',
-          // When page buttons are not shown, this element should grow to fill
-          // available space. But when page buttons are shown, it should not.
-          'grow md:grow-0',
-        )}
-      >
-        {hasNextPage && (
-          <NavigationButton
-            title="Go to next page"
-            onClick={e =>
-              changePageTo(currentPage + 1, e.target as HTMLElement)
-            }
-          >
-            next
-            <ArrowRightIcon />
-          </NavigationButton>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default PaginationNavigation;
diff --git a/src/sidebar/components/test/PaginatedThreadList-test.js b/src/sidebar/components/test/PaginatedThreadList-test.js
index 0a7c219faca..9c0ba241de5 100644
--- a/src/sidebar/components/test/PaginatedThreadList-test.js
+++ b/src/sidebar/components/test/PaginatedThreadList-test.js
@@ -107,7 +107,7 @@ describe('PaginatedThreadList', () => {
       const wrapper = createComponent(componentProps);
 
       assert.equal(
-        wrapper.find('PaginationNavigation').props().totalPages,
+        wrapper.find('Pagination').props().totalPages,
         testCase.pageCount,
       );
     });
@@ -121,7 +121,7 @@ describe('PaginatedThreadList', () => {
       });
 
       assert.equal(
-        wrapper.find('PaginationNavigation').props().currentPage,
+        wrapper.find('Pagination').props().currentPage,
         testCase.currentPage,
       );
     });
diff --git a/src/sidebar/components/test/PaginationNavigation-test.js b/src/sidebar/components/test/PaginationNavigation-test.js
deleted file mode 100644
index 888ab71777f..00000000000
--- a/src/sidebar/components/test/PaginationNavigation-test.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from '@hypothesis/frontend-testing';
-import { act } from 'preact/test-utils';
-
-import PaginationNavigation, { $imports } from '../PaginationNavigation';
-
-describe('PaginationNavigation', () => {
-  let fakeOnChangePage;
-  let fakePageNumberOptions;
-
-  const findButton = (wrapper, title) =>
-    wrapper.find('button').filterWhere(n => n.props().title === title);
-
-  const createComponent = (props = {}) => {
-    return mount(
-      <PaginationNavigation
-        currentPage={1}
-        onChangePage={fakeOnChangePage}
-        totalPages={10}
-        {...props}
-      />,
-    );
-  };
-
-  beforeEach(() => {
-    fakeOnChangePage = sinon.stub();
-    fakePageNumberOptions = sinon.stub().returns([1, 2, 3, 4, null, 10]);
-
-    $imports.$mock({
-      '../util/pagination': { pageNumberOptions: fakePageNumberOptions },
-    });
-  });
-
-  afterEach(() => {
-    $imports.$restore();
-  });
-
-  describe('prev button', () => {
-    it('should render a prev button when there are previous pages to show', () => {
-      const wrapper = createComponent({ currentPage: 2 });
-
-      const button = findButton(wrapper, 'Go to previous page');
-
-      assert.isTrue(button.exists());
-    });
-
-    it('should not render a prev button if there are no previous pages to show', () => {
-      const wrapper = createComponent({ currentPage: 1 });
-
-      const button = findButton(wrapper, 'Go to previous page');
-
-      assert.isFalse(button.exists());
-    });
-
-    it('should invoke the onChangePage callback when clicked', () => {
-      const wrapper = createComponent({ currentPage: 2 });
-
-      const button = findButton(wrapper, 'Go to previous page');
-
-      button.simulate('click');
-
-      assert.calledWith(fakeOnChangePage, 1);
-    });
-
-    it('should remove focus from button after clicked', () => {
-      const wrapper = createComponent({ currentPage: 2 });
-
-      const button = findButton(wrapper, 'Go to previous page');
-      const buttonEl = button.getDOMNode();
-      const blurSpy = sinon.spy(buttonEl, 'blur');
-
-      act(() => {
-        button.simulate('click');
-      });
-
-      assert.equal(blurSpy.callCount, 1);
-    });
-  });
-
-  describe('next button', () => {
-    it('should render a next button when there are further pages to show', () => {
-      const wrapper = createComponent({ currentPage: 1 });
-
-      const button = findButton(wrapper, 'Go to next page');
-
-      assert.isTrue(button.exists());
-    });
-
-    it('should not render a next button if there are no further pages to show', () => {
-      const wrapper = createComponent({ currentPage: 10 });
-
-      const button = findButton(wrapper, 'Go to next page');
-
-      assert.isFalse(button.exists());
-    });
-
-    it('should invoke the `onChangePage` callback when clicked', () => {
-      const wrapper = createComponent({ currentPage: 1 });
-
-      const button = findButton(wrapper, 'Go to next page');
-
-      button.simulate('click');
-
-      assert.calledWith(fakeOnChangePage, 2);
-    });
-
-    it('should remove focus from button after clicked', () => {
-      const wrapper = createComponent({ currentPage: 1 });
-
-      const button = findButton(wrapper, 'Go to next page');
-      const buttonEl = button.getDOMNode();
-      const blurSpy = sinon.spy(buttonEl, 'blur');
-
-      act(() => {
-        button.simulate('click');
-      });
-
-      assert.equal(blurSpy.callCount, 1);
-    });
-  });
-
-  describe('page number buttons', () => {
-    it('should render buttons for each page number available', () => {
-      fakePageNumberOptions.returns([1, 2, 3, 4, null, 10]);
-
-      const wrapper = createComponent();
-
-      [1, 2, 3, 4, 10].forEach(pageNumber => {
-        const button = findButton(wrapper, `Go to page ${pageNumber}`);
-
-        assert.isTrue(button.exists());
-      });
-
-      // There is one "gap":
-      assert.equal(wrapper.find('[data-testid="pagination-gap"]').length, 1);
-    });
-
-    it('should invoke the onChangePage callback when page number button clicked', () => {
-      fakePageNumberOptions.returns([1, 2, 3, 4, null, 10]);
-
-      const wrapper = createComponent();
-
-      [1, 2, 3, 4, 10].forEach(pageNumber => {
-        const button = findButton(wrapper, `Go to page ${pageNumber}`);
-
-        button.simulate('click');
-
-        assert.calledWith(fakeOnChangePage, pageNumber);
-      });
-    });
-  });
-
-  it(
-    'should pass a11y checks',
-    checkAccessibility({
-      content: () => createComponent({ currentPage: 2 }),
-    }),
-  );
-});
diff --git a/src/sidebar/util/pagination.ts b/src/sidebar/util/pagination.ts
deleted file mode 100644
index 5190e094a11..00000000000
--- a/src/sidebar/util/pagination.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * The number of an available pagination page, or `null`, indicating a gap
- * between sequential numbered pages.
- */
-type PageNumber = number | null;
-
-/**
- * Determine the set of (pagination) page numbers that should be provided to
- * a user, given the current page the user is on, the total number of pages
- * available, and the number of individual page options desired.
- *
- * The first, last and current pages will always be included in the returned
- * results. Additional pages adjacent to the current page will be added until
- * `maxPages` is reached. Gaps in the sequence of pages are represented by
- * `null` values.
- *
- * @example
- *   pageNumberOptions(1, 10, 5) => [1, 2, 3, 4, null, 10]
- *   pageNumberOptions(3, 10, 5) => [1, 2, 3, 4, null, 10]
- *   pageNumberOptions(6, 10, 5) => [1, null, 5, 6, 7, null, 10]
- *   pageNumberOptions(9, 10, 5) => [1, null, 7, 8, 9, 10]
- *   pageNumberOptions(2, 3, 5) => [1, 2, 3]
- *
- * @param currentPage - The currently-visible/-active page of results.
- *   Note that pages are 1-indexed
- * @param maxPages - The maximum number of numbered pages to make available
- * @return Set of navigation page options to show. `null` values represent gaps
- *   in the sequence of pages, to be represented later as ellipses (...)
- */
-export function pageNumberOptions(
-  currentPage: number,
-  totalPages: number,
-  /* istanbul ignore next */
-  maxPages = 5,
-): PageNumber[] {
-  if (totalPages <= 1) {
-    return [];
-  }
-
-  // Start with first, last and current page. Use a set to avoid dupes.
-  const pageNumbers = new Set([1, currentPage, totalPages]);
-
-  // Fill out the `pageNumbers` with additional pages near the currentPage,
-  // if available
-  let increment = 1;
-  while (pageNumbers.size < Math.min(totalPages, maxPages)) {
-    // Build the set "outward" from the currently-active page
-    if (currentPage + increment <= totalPages) {
-      pageNumbers.add(currentPage + increment);
-    }
-    if (currentPage - increment >= 1) {
-      pageNumbers.add(currentPage - increment);
-    }
-    ++increment;
-  }
-
-  const pageOptions: PageNumber[] = [];
-
-  // Construct a numerically-sorted array with `null` entries inserted
-  // between non-sequential entries
-  [...pageNumbers]
-    .sort((a, b) => a - b)
-    .forEach((page, idx, arr) => {
-      if (idx > 0 && page - arr[idx - 1] > 1) {
-        // Two page entries are non-sequential. Push a `null` value between
-        // them to indicate the gap, which will later be represented as an
-        // ellipsis
-        pageOptions.push(null);
-      }
-      pageOptions.push(page);
-    });
-  return pageOptions;
-}
diff --git a/src/sidebar/util/test/pagination-test.js b/src/sidebar/util/test/pagination-test.js
deleted file mode 100644
index 0f4442f3eac..00000000000
--- a/src/sidebar/util/test/pagination-test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { pageNumberOptions } from '../pagination';
-
-describe('sidebar/util/pagination', () => {
-  describe('pageNumberOptions', () => {
-    [
-      { args: [1, 10, 5], expected: [1, 2, 3, 4, null, 10] },
-      { args: [3, 10, 5], expected: [1, 2, 3, 4, null, 10] },
-      { args: [6, 10, 5], expected: [1, null, 5, 6, 7, null, 10] },
-      { args: [9, 10, 5], expected: [1, null, 7, 8, 9, 10] },
-      { args: [2, 3, 5], expected: [1, 2, 3] },
-      { args: [3, 10, 7], expected: [1, 2, 3, 4, 5, 6, null, 10] },
-      { args: [1, 1, 5], expected: [] },
-    ].forEach(testCase => {
-      it('should produce expected available page numbers', () => {
-        assert.deepEqual(
-          pageNumberOptions(...testCase.args),
-          testCase.expected,
-        );
-      });
-    });
-  });
-});