diff --git a/frontend/src/components/RecordsList.tsx b/frontend/src/components/RecordsList.tsx
index b4aa00a4..fd070882 100644
--- a/frontend/src/components/RecordsList.tsx
+++ b/frontend/src/components/RecordsList.tsx
@@ -1,10 +1,8 @@
 import AutoSizer from "react-virtualized-auto-sizer";
-import { Button, Col, Container, Form, Row, Modal } from "react-bootstrap";
+import { Button, Container, Modal } from "react-bootstrap";
 import { FunctionComponent, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
-import classNames from "classnames";
 import { DownloadModal } from "./DownloadModal";
-import Spinner from "react-spinkit";
 import { CSVFormulate } from "../lib/CSVExport";
 import { AgGridReact } from "ag-grid-react";
 import { useState } from "react";
@@ -17,9 +15,8 @@ import { useHookGeneric } from "../shared/types";
 import { SamplesList } from "./SamplesList";
 import { SampleWhere } from "../generated/graphql";
 import { defaultRecordsColDef } from "../shared/helpers";
-import InfoIcon from "@material-ui/icons/InfoOutlined";
-import { Tooltip } from "@material-ui/core";
 import { PatientIdsTriplet } from "../pages/patients/PatientsPage";
+import { ErrorMessage, LoadingSpinner, Toolbar } from "../shared/tableElements";
 
 export interface IRecordsListProps {
   lazyRecordsQuery: typeof useHookGeneric;
@@ -119,14 +116,9 @@ const RecordsList: FunctionComponent<IRecordsListProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchVal]);
 
-  if (loading)
-    return (
-      <div className={"centralSpinner"}>
-        <Spinner fadeIn={"none"} color={"lightblue"} name="ball-grid-pulse" />
-      </div>
-    );
+  if (loading) return <LoadingSpinner />;
 
-  if (error) return <p>Error :(</p>;
+  if (error) return <ErrorMessage error={error} />;
 
   const remoteCount = data?.[totalCountNodeName]?.totalCount;
 
@@ -224,76 +216,22 @@ const RecordsList: FunctionComponent<IRecordsListProps> = ({
         </AutoSizer>
       )}
 
-      <Row
-        className={classNames(
-          "d-flex justify-content-between align-items-center",
-          "tableControlsRow"
-        )}
-      >
-        <Col></Col>
-
-        <Col md="auto">
-          <Form.Control
-            className={"d-inline-block"}
-            style={{ width: "300px" }}
-            type="search"
-            placeholder={"Search " + searchTerm}
-            aria-label="Search"
-            defaultValue={inputVal}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                handleSearch();
-              }
-            }}
-            onInput={(event) => {
-              const newVal = event.currentTarget.value;
-              if (newVal === "") {
-                setCustomFilterVals && setCustomFilterVals([]);
-                setSearchVal([]);
-              }
-              setInputVal(newVal);
-            }}
-          />
-        </Col>
-
-        <Col md="auto" style={{ marginLeft: -15 }}>
-          <Tooltip
-            title={
-              <span style={{ fontSize: 12 }}>
-                After inputting your search query, click on &quot;Search&quot;
-                or press &quot;Enter&quot; to get your results. To bulk search,
-                input a list of values separated by spaces or commas (e.g.
-                &quot;value1 value2 value3&quot;)
-              </span>
-            }
-          >
-            <InfoIcon style={{ fontSize: 18, color: "grey" }} />
-          </Tooltip>
-        </Col>
-
-        <Col md="auto" style={{ marginLeft: -15 }}>
-          <Button
-            onClick={handleSearch}
-            className={"btn btn-secondary"}
-            size={"sm"}
-          >
-            Search
-          </Button>
-        </Col>
-
-        <Col md="auto">
-          {remoteCount?.toLocaleString()} matching{" "}
-          {remoteCount > 1 ? searchTerm : searchTerm.slice(0, -1)}
-        </Col>
-
-        {customFilterUI}
+      <Toolbar
+        searchTerm={searchTerm}
+        input={inputVal}
+        setInput={setInputVal}
+        handleSearch={handleSearch}
+        clearInput={() => {
+          setCustomFilterVals && setCustomFilterVals([]);
+          setSearchVal([]);
+        }}
+        matchingResultsCount={`${remoteCount?.toLocaleString()} matching ${
+          remoteCount > 1 ? searchTerm : searchTerm.slice(0, -1)
+        }`}
+        handleDownload={handleDownload}
+        customUI={customFilterUI}
+      />
 
-        <Col className={"text-end"}>
-          <Button onClick={handleDownload} size={"sm"}>
-            Generate Report
-          </Button>
-        </Col>
-      </Row>
       <AutoSizer>
         {({ width }) => (
           <div
diff --git a/frontend/src/components/SamplesList.tsx b/frontend/src/components/SamplesList.tsx
index 07c1229f..d58f6de6 100644
--- a/frontend/src/components/SamplesList.tsx
+++ b/frontend/src/components/SamplesList.tsx
@@ -5,8 +5,7 @@ import {
   SampleMetadataWhere,
 } from "../generated/graphql";
 import AutoSizer from "react-virtualized-auto-sizer";
-import { Button, Col, Form, Row } from "react-bootstrap";
-import classNames from "classnames";
+import { Button, Col } from "react-bootstrap";
 import { FunctionComponent, useEffect, useRef } from "react";
 import { DownloadModal } from "./DownloadModal";
 import { UpdateModal } from "./UpdateModal";
@@ -18,16 +17,14 @@ import {
   SampleChange,
   SampleMetadataExtended,
 } from "../shared/helpers";
-import Spinner from "react-spinkit";
 import { AgGridReact } from "ag-grid-react";
 import { useState } from "react";
 import "ag-grid-community/styles/ag-grid.css";
 import "ag-grid-community/styles/ag-theme-alpine.css";
 import "ag-grid-enterprise";
 import { CellValueChangedEvent } from "ag-grid-community";
-import { Tooltip } from "@material-ui/core";
-import InfoIcon from "@material-ui/icons/InfoOutlined";
 import { parseSearchQueries } from "../lib/parseSearchQueries";
+import { ErrorMessage, LoadingSpinner, Toolbar } from "../shared/tableElements";
 
 const POLLING_INTERVAL = 2000;
 const max_rows = 500;
@@ -159,14 +156,9 @@ export const SamplesList: FunctionComponent<ISampleListProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchVal]);
 
-  if (loading)
-    return (
-      <div className={"centralSpinner"}>
-        <Spinner fadeIn={"none"} color={"lightblue"} name="ball-grid-pulse" />
-      </div>
-    );
+  if (loading) return <LoadingSpinner />;
 
-  if (error) return <Row>Error loading request details / request samples</Row>;
+  if (error) return <ErrorMessage error={error} />;
 
   const samples = data!.samplesConnection.edges.map((e) => e.node) as Sample[];
 
@@ -249,104 +241,50 @@ export const SamplesList: FunctionComponent<ISampleListProps> = ({
         }
       />
 
-      <Row
-        className={classNames(
-          "d-flex justify-content-between align-items-center tableControlsRow"
-        )}
-      >
-        <Col></Col>
-        <Col className={"text-end"}>
-          <Form.Control
-            className={"d-inline-block"}
-            style={{ width: "300px" }}
-            type="search"
-            placeholder="Search samples"
-            aria-label="Search"
-            value={val}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                setSearchVal(val);
-              }
-            }}
-            onInput={(event) => {
-              const newVal = event.currentTarget.value;
-              if (newVal === "") {
-                setSearchVal("");
-              }
-              setVal(newVal);
-            }}
-          />
-        </Col>
-
-        <Col md="auto" style={{ marginLeft: -15 }}>
-          <Tooltip
-            title={
-              <span style={{ fontSize: 12 }}>
-                After inputting your search query, click on &quot;Search&quot;
-                or press &quot;Enter&quot; to get your results. To bulk search,
-                input a list of values separated by spaces or commas (e.g.
-                &quot;value1 value2 value3&quot;)
-              </span>
-            }
-          >
-            <InfoIcon style={{ fontSize: 18, color: "grey" }} />
-          </Tooltip>
-        </Col>
-
-        <Col md="auto" style={{ marginLeft: -15 }}>
-          <Button
-            onClick={() => {
-              setSearchVal(val);
-            }}
-            className={"btn btn-secondary"}
-            size={"sm"}
-          >
-            Search
-          </Button>
-        </Col>
-
-        <Col className={"text-start"}>
-          {remoteCount === max_rows
+      <Toolbar
+        searchTerm={"samples"}
+        input={val}
+        setInput={setVal}
+        handleSearch={() => {
+          setSearchVal(val);
+        }}
+        clearInput={() => {
+          setSearchVal("");
+        }}
+        matchingResultsCount={
+          remoteCount === max_rows
             ? `${max_rows}+ matching samples`
-            : `${remoteCount} matching samples`}
-        </Col>
-
-        {changes.length > 0 && (
-          <>
-            <Col className={"text-end"}>
-              <Button
-                className={"btn btn-secondary"}
-                onClick={handleDiscardChanges}
-                size={"sm"}
-              >
-                Discard Changes
-              </Button>
-            </Col>
-            <Col className={"text-start"}>
-              <Button
-                className={"btn btn-success"}
-                onClick={() => {
-                  setShowUpdateModal(true);
-                }}
-                size={"sm"}
-              >
-                Submit Updates
-              </Button>
-            </Col>
-          </>
-        )}
+            : `${remoteCount} matching samples`
+        }
+        handleDownload={() => setShowDownloadModal(true)}
+        customUI={
+          changes.length > 0 ? (
+            <>
+              <Col className={"text-end"}>
+                <Button
+                  className={"btn btn-secondary"}
+                  onClick={handleDiscardChanges}
+                  size={"sm"}
+                >
+                  Discard Changes
+                </Button>
+              </Col>
 
-        <Col className={"text-end"}>
-          <Button
-            onClick={() => {
-              setShowDownloadModal(true);
-            }}
-            size={"sm"}
-          >
-            Generate Report
-          </Button>
-        </Col>
-      </Row>
+              <Col className={"text-start"}>
+                <Button
+                  className={"btn btn-success"}
+                  onClick={() => {
+                    setShowUpdateModal(true);
+                  }}
+                  size={"sm"}
+                >
+                  Submit Updates
+                </Button>
+              </Col>
+            </>
+          ) : undefined
+        }
+      />
 
       <AutoSizer>
         {({ width }) => (
diff --git a/frontend/src/shared/tableElements.tsx b/frontend/src/shared/tableElements.tsx
new file mode 100644
index 00000000..eaac6367
--- /dev/null
+++ b/frontend/src/shared/tableElements.tsx
@@ -0,0 +1,110 @@
+import { ApolloError } from "@apollo/client";
+import classNames from "classnames";
+import { Button, Col, Form, Row } from "react-bootstrap";
+import Spinner from "react-spinkit";
+import InfoIcon from "@material-ui/icons/InfoOutlined";
+import { Tooltip } from "@material-ui/core";
+
+export function LoadingSpinner() {
+  return (
+    <div className={"centralSpinner"}>
+      <Spinner fadeIn={"none"} color={"lightblue"} name="ball-grid-pulse" />
+    </div>
+  );
+}
+
+export function ErrorMessage({ error }: { error: ApolloError }) {
+  return (
+    <Row className="ms-2">
+      There was an error loading data ({error.name}: {error.message}).
+    </Row>
+  );
+}
+
+export function Toolbar({
+  searchTerm,
+  input,
+  setInput,
+  handleSearch,
+  clearInput,
+  matchingResultsCount,
+  handleDownload,
+  customUI,
+}: {
+  searchTerm: string;
+  input: string;
+  setInput: (input: string) => void;
+  handleSearch: () => void;
+  clearInput: () => void;
+  matchingResultsCount: string;
+  handleDownload: () => void;
+  customUI?: JSX.Element;
+}) {
+  return (
+    <Row
+      className={classNames(
+        "d-flex justify-content-between align-items-center tableControlsRow"
+      )}
+    >
+      <Col></Col>
+
+      <Col md="auto">
+        <Form.Control
+          className={"d-inline-block"}
+          style={{ width: "300px" }}
+          type="search"
+          placeholder={"Search " + searchTerm}
+          aria-label="Search"
+          value={input}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              handleSearch();
+            }
+          }}
+          onInput={(event) => {
+            const currInput = event.currentTarget.value;
+            if (currInput === "") {
+              clearInput();
+            }
+            setInput(currInput);
+          }}
+        />
+      </Col>
+
+      <Col md="auto" style={{ marginLeft: -15 }}>
+        <Tooltip
+          title={
+            <span style={{ fontSize: 12 }}>
+              After inputting your search query, click on &quot;Search&quot; or
+              press &quot;Enter&quot; to get your results. To bulk search, input
+              a list of values separated by spaces or commas (e.g. &quot;value1
+              value2 value3&quot;)
+            </span>
+          }
+        >
+          <InfoIcon style={{ fontSize: 18, color: "grey" }} />
+        </Tooltip>
+      </Col>
+
+      <Col md="auto" style={{ marginLeft: -15 }}>
+        <Button
+          onClick={handleSearch}
+          className={"btn btn-secondary"}
+          size={"sm"}
+        >
+          Search
+        </Button>
+      </Col>
+
+      <Col md="auto">{matchingResultsCount}</Col>
+
+      {customUI}
+
+      <Col className={"text-end"}>
+        <Button onClick={handleDownload} size={"sm"}>
+          Generate Report
+        </Button>
+      </Col>
+    </Row>
+  );
+}