diff --git a/src/apiClient/approvals.ts b/src/apiClient/approvals.ts
index b343b24..1918b61 100644
--- a/src/apiClient/approvals.ts
+++ b/src/apiClient/approvals.ts
@@ -13,6 +13,8 @@ export type Approval = {
   items: ApprovalItem[];
 };
 
+export type RenterApproval = Omit<Approval, "renter">;
+
 interface GearItem {
   id: string;
   type: GearTypeWithShorthand;
diff --git a/src/components/AddApprovalLink.tsx b/src/components/AddApprovalLink.tsx
new file mode 100644
index 0000000..ea979ff
--- /dev/null
+++ b/src/components/AddApprovalLink.tsx
@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom";
+
+export function AddApprovalLink({ personId }: { personId?: string }) {
+  const to =
+    personId == null ? "/add-approval" : `/add-approval?personId=${personId}`;
+  return (
+    <Link to={to}>
+      <button className="btn btn-outline-primary mb-3">＋ Add approval</button>
+    </Link>
+  );
+}
diff --git a/src/components/ApprovalItemsList.tsx b/src/components/ApprovalItemsList.tsx
new file mode 100644
index 0000000..a88efae
--- /dev/null
+++ b/src/components/ApprovalItemsList.tsx
@@ -0,0 +1,32 @@
+import { ApprovalItem } from "src/apiClient/approvals";
+
+import { GearLink } from "./GearLink";
+
+/**
+ * Renders a list of approval items (gear types or specific gear items)
+ */
+export function ApprovalItemsList({ items }: { items: ApprovalItem[] }) {
+  return (
+    <ul className="list-unstyled">
+      {items.map((approvalItem) => {
+        if (approvalItem.type === "gearType") {
+          return (
+            <li key={`${approvalItem.item.gearType.id}-type`}>
+              {approvalItem.item.gearType.typeName} (
+              {approvalItem.item.gearType.shorthand}){" "}
+              <strong>x{approvalItem.item.quantity}</strong>
+            </li>
+          );
+        }
+        return (
+          <li key={`${approvalItem.item.gearItem.id}-item`}>
+            {approvalItem.item.gearItem.type.typeName} -{" "}
+            <GearLink id={approvalItem.item.gearItem.id}>
+              {approvalItem.item.gearItem.id}
+            </GearLink>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/src/components/PersonSelect.tsx b/src/components/PersonSelect.tsx
index c3960a1..656196e 100644
--- a/src/components/PersonSelect.tsx
+++ b/src/components/PersonSelect.tsx
@@ -1,8 +1,8 @@
-import { PersonSummary } from "src/apiClient/people";
 import { countBy } from "lodash";
 import { useState } from "react";
 
-import { usePeopleList } from "src/redux/api";
+import { PersonSummary } from "src/apiClient/people";
+import { useGetPersonQuery, usePeopleList } from "src/redux/api";
 
 import { Select } from "./Select";
 import { useDebounce } from "./useDebounce";
@@ -20,14 +20,26 @@ export function PersonSelect({ value, onChange, className, invalid }: Props) {
   const { personList, isFetching } = usePeopleList({
     q: query,
   });
+  const { data: selectedPerson } = useGetPersonQuery(value ?? "", {
+    skip: value == null,
+  });
 
   const getName = (person: PersonSummary) =>
     `${person.firstName} ${person.lastName}`;
 
   const namesCount = countBy(personList, getName);
 
+  const listWithSelection =
+    personList == null
+      ? []
+      : selectedPerson == null
+        ? personList
+        : personList.some((p) => p.id === value)
+          ? personList
+          : [...personList, selectedPerson];
+
   const options =
-    personList?.map((person) => {
+    listWithSelection?.map((person) => {
       const name = getName(person);
       const fullName =
         namesCount[name] > 1 ? `${name} (${person.email})` : name;
@@ -38,7 +50,8 @@ export function PersonSelect({ value, onChange, className, invalid }: Props) {
       };
     }) ?? [];
 
-  const selectedOption = options.find((o) => o.id === value);
+  // We want == rather than ===, there is some type mess here
+  const selectedOption = options.find((o) => o.id == value);
 
   return (
     <Select
diff --git a/src/featureFlags.ts b/src/featureFlags.ts
index d02f2c8..d64f9b2 100644
--- a/src/featureFlags.ts
+++ b/src/featureFlags.ts
@@ -1 +1 @@
-export const newApprovalUI = false;
+export const newApprovalUI = true;
diff --git a/src/pages/Approvals/AddNewApproval.tsx b/src/pages/Approvals/AddNewApproval.tsx
index f22ca6a..2125233 100644
--- a/src/pages/Approvals/AddNewApproval.tsx
+++ b/src/pages/Approvals/AddNewApproval.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 
 import {
   createNewApproval,
@@ -14,22 +14,31 @@ import { AddNewApprovalForm } from "./AddNewApprovalForm";
 
 export function AddNewApproval() {
   useSetPageTitle("Approve restricted gear rental");
-  const [success, setSuccess] = useState<boolean>(false);
+  const history = useHistory();
+  const location = useLocation();
   const [error, setError] = useState<APIErrorType | undefined>();
-  const refetchApprovals = gearDbApi.useLazyGetApprovalsQuery()[0];
+  const refetchAllApprovals = gearDbApi.useLazyGetApprovalsQuery()[0];
+  const refetchPersonApprovals = gearDbApi.useLazyGetRenterApprovalsQuery()[0];
+
+  const searchParams = new URLSearchParams(location.search);
+  const personId = searchParams.get("personId");
 
   const onSubmit = (args: CreateNewApprovalArgs) => {
     createNewApproval(args)
       .then(() => {
         setError(undefined);
-        setSuccess(true);
         // TODO: We should use RTK's mutations instead of refetching everything
-        refetchApprovals({ past: false });
-        refetchApprovals({ past: undefined });
+        refetchAllApprovals({ past: false });
+        refetchAllApprovals({ past: undefined });
+        if (personId != null) {
+          refetchPersonApprovals({ personID: personId, past: false });
+          history.push(`/people/${personId}?tab=approvals`);
+        } else {
+          history.push("/approvals");
+        }
       })
       .catch((err) => {
         if (err instanceof APIErrorClass) {
-          setSuccess(false);
           setError(err.error);
         }
         throw err;
@@ -43,29 +52,7 @@ export function AddNewApproval() {
         {error && (
           <div className="alert alert-danger">Approval failed: {error.msg}</div>
         )}
-        {!success && <AddNewApprovalForm onSubmit={onSubmit} />}
-        {success && (
-          <>
-            <p className="mb-2 alert alert-success">
-              Success! The approval was granted:
-            </p>
-
-            <div className="d-flex justify-content-between">
-              <Link to="/approvals">
-                <button type="button" className="btn btn-outline-secondary">
-                  Go to approvals list
-                </button>
-              </Link>
-              <button
-                type="button"
-                className="btn btn-primary"
-                onClick={() => setSuccess(false)}
-              >
-                Approve another rental
-              </button>
-            </div>
-          </>
-        )}
+        <AddNewApprovalForm onSubmit={onSubmit} />
       </div>
     </div>
   );
diff --git a/src/pages/Approvals/AddNewApprovalForm.tsx b/src/pages/Approvals/AddNewApprovalForm.tsx
index 6a0fd8d..79163b5 100644
--- a/src/pages/Approvals/AddNewApprovalForm.tsx
+++ b/src/pages/Approvals/AddNewApprovalForm.tsx
@@ -1,6 +1,7 @@
+import dayjs from "dayjs";
 import DatePicker from "react-datepicker";
 import { useForm } from "react-hook-form";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 
 import {
   ApprovalItemToCreate,
@@ -22,9 +23,15 @@ const LabeledInput = makeLabeledInput<FormValues>();
 
 export function AddNewApprovalForm({ onSubmit }: Props) {
   const history = useHistory();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const personId = searchParams.get("personId");
+
   const formObject = useForm<FormValues>({
     defaultValues: {
       items: [defaultItem],
+      renter: personId || undefined,
+      startDate: dayjs().startOf("day").toDate(),
     },
   });
 
diff --git a/src/pages/Approvals/ApprovalsPage.tsx b/src/pages/Approvals/ApprovalsPage.tsx
index cba4e19..c5c6b90 100644
--- a/src/pages/Approvals/ApprovalsPage.tsx
+++ b/src/pages/Approvals/ApprovalsPage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
 
+import { AddApprovalLink } from "src/components/AddApprovalLink";
 import { Checkbox } from "src/components/Inputs/Checkbox";
 import { TablePagination } from "src/components/TablePagination";
 import { useSetPageTitle } from "src/hooks";
@@ -40,13 +40,7 @@ export function ApprovalsPage() {
           }
 
           <div className="col-md d-flex flex-grow-1 justify-content-end">
-            {isApprover && (
-              <Link to="/add-approval">
-                <button className="btn btn-outline-primary mb-3">
-                  ＋ Add approval
-                </button>
-              </Link>
-            )}
+            {isApprover && <AddApprovalLink />}
           </div>
         </div>
       )}
diff --git a/src/pages/Approvals/ApprovalsTable.tsx b/src/pages/Approvals/ApprovalsTable.tsx
index be39c07..6ce29de 100644
--- a/src/pages/Approvals/ApprovalsTable.tsx
+++ b/src/pages/Approvals/ApprovalsTable.tsx
@@ -4,8 +4,8 @@ import { useMemo } from "react";
 
 import { Approval, deleteApproval } from "src/apiClient/approvals";
 import { PersonBase } from "src/apiClient/people";
+import { ApprovalItemsList } from "src/components/ApprovalItemsList";
 import { DataGrid } from "src/components/DataGrid";
-import { GearLink } from "src/components/GearLink";
 import { PersonLink } from "src/components/PersonLink";
 import { formatDate } from "src/lib/fmtDate";
 
@@ -63,40 +63,21 @@ function EndDateCell({ item: approval }: { item: Approval }) {
 }
 
 function ItemsCell({ item: approval }: { item: Approval }) {
-  return (
-    <ul>
-      {approval.items.map(({ type, item }) => {
-        if (type === "gearType") {
-          return (
-            <li key={item.gearType.id}>
-              {item.gearType.typeName} ({item.gearType.shorthand}) -
-              {item.quantity} {item.quantity > 1 ? "items" : "item"}
-            </li>
-          );
-        }
-        return (
-          <li key={item.gearItem.id}>
-            {item.gearItem.type.typeName} -{" "}
-            <GearLink id={item.gearItem.id}>{item.gearItem.id}</GearLink>{" "}
-          </li>
-        );
-      })}
-    </ul>
-  );
+  return <ApprovalItemsList items={approval.items} />;
 }
 
 function RenterCell({ item: approval }: { item: Approval }) {
-  return <PersonCell value={approval.renter} />;
+  return <PersonCell person={approval.renter} />;
 }
 
 function ApproverCell({ item: approval }: { item: Approval }) {
-  return <PersonCell value={approval.approvedBy} />;
+  return <PersonCell person={approval.approvedBy} />;
 }
 
-function PersonCell({ value }: { value: PersonBase }) {
+function PersonCell({ person }: { person: PersonBase }) {
   return (
-    <PersonLink id={String(value.id)}>
-      {value.firstName} {value.lastName}
+    <PersonLink id={String(person.id)}>
+      {person.firstName} {person.lastName}
     </PersonLink>
   );
 }
diff --git a/src/pages/People/CheckoutStaging.tsx b/src/pages/People/CheckoutStaging.tsx
index 0908f80..05380de 100644
--- a/src/pages/People/CheckoutStaging.tsx
+++ b/src/pages/People/CheckoutStaging.tsx
@@ -8,7 +8,7 @@ import { fmtAmount } from "src/lib/fmtNumber";
 import { usePersonPageContext } from "./PeoplePage/PersonPageContext";
 
 export function CheckoutStaging({ onCheckout }: { onCheckout: () => void }) {
-  const { person, checkoutBasket } = usePersonPageContext();
+  const { person, checkoutBasket, isApproved } = usePersonPageContext();
   const gearToCheckout = checkoutBasket.items;
   const totalDeposit = sum(map(gearToCheckout, "depositAmount"));
 
@@ -57,7 +57,13 @@ export function CheckoutStaging({ onCheckout }: { onCheckout: () => void }) {
                       {restricted && (
                         <>
                           <br />
-                          <strong className="text-warning">RESTRICTED</strong>
+                          {!isApproved(id, type.id) ? (
+                            <strong className="text-warning">RESTRICTED</strong>
+                          ) : (
+                            <strong className="text-success">
+                              ☑ Approved
+                            </strong>
+                          )}
                         </>
                       )}
                     </td>
diff --git a/src/pages/People/MoreGear.tsx b/src/pages/People/MoreGear.tsx
index 79860e0..378717e 100644
--- a/src/pages/People/MoreGear.tsx
+++ b/src/pages/People/MoreGear.tsx
@@ -10,7 +10,7 @@ import { useGearList } from "src/redux/api";
 import { usePersonPageContext } from "./PeoplePage/PersonPageContext";
 
 export function MoreGear() {
-  const { checkoutBasket } = usePersonPageContext();
+  const { checkoutBasket, isApproved } = usePersonPageContext();
   const [query, setQuery] = useState<string>("");
   const [page, setPage] = useState<number>(1);
 
@@ -19,7 +19,7 @@ export function MoreGear() {
   return (
     <StyledDiv className="border rounded-2 p-2 bg-light">
       <div className="d-flex justify-content-between">
-        <h3 className="mb-4">More gear</h3>
+        <h3 className="mb-4">Rent gear</h3>
         {query && nbPages != null && nbPages > 1 && (
           <TablePagination setPage={setPage} page={page} nbPage={nbPages} />
         )}
@@ -98,7 +98,13 @@ export function MoreGear() {
                       {restricted && (
                         <>
                           <br />
-                          <strong className="text-warning">RESTRICTED</strong>
+                          {!isApproved(id, type.id) ? (
+                            <strong className="text-warning">RESTRICTED</strong>
+                          ) : (
+                            <strong className="text-success">
+                              ☑ Approved
+                            </strong>
+                          )}
                         </>
                       )}
                     </td>
diff --git a/src/pages/People/PeoplePage/PersonPageContext.tsx b/src/pages/People/PeoplePage/PersonPageContext.tsx
index f61fdef..e823065 100644
--- a/src/pages/People/PeoplePage/PersonPageContext.tsx
+++ b/src/pages/People/PeoplePage/PersonPageContext.tsx
@@ -1,6 +1,8 @@
+import dayjs from "dayjs";
 import { flow, keyBy, map, mapValues, sum } from "lodash";
-import React, { useContext, useState } from "react";
+import React, { useCallback, useContext, useState } from "react";
 
+import { RenterApproval } from "src/apiClient/approvals";
 import { GearSummary } from "src/apiClient/gear";
 import { checkoutGear, Person, Rental, returnGear } from "src/apiClient/people";
 
@@ -13,6 +15,7 @@ type PersonPageContextType = ReturnType<typeof useMakePersonPageContext>;
 type Props = {
   person: Person;
   refreshPerson: () => void;
+  approvals: RenterApproval[];
 };
 
 const PersonPageContext = React.createContext<
@@ -41,7 +44,7 @@ export function usePersonPageContext() {
   return context;
 }
 
-function useMakePersonPageContext({ person, refreshPerson }: Props) {
+function useMakePersonPageContext({ person, refreshPerson, approvals }: Props) {
   const checkoutBasketBase = useBasket<GearSummary>();
   const returnBasketBase = useBasket<Rental>();
   const purchaseBasket = useBasket<ItemToPurchase>();
@@ -61,6 +64,40 @@ function useMakePersonPageContext({ person, refreshPerson }: Props) {
     person.groups.some((group) => group.groupName === "BOD"),
   );
 
+  const today = dayjs().startOf("day");
+
+  const activeApprovals = approvals.filter((approval) => {
+    const startDate = dayjs(approval.startDate).startOf("day");
+    const endDate = dayjs(approval.endDate).endOf("day");
+    return startDate.isSameOrBefore(today) && endDate.isSameOrAfter(today);
+  });
+
+  const isApproved = useCallback(
+    (gearId: string, typeId: number) => {
+      return activeApprovals.some(({ items }) => {
+        return items.some((item) => {
+          if (item.type === "specificItem") {
+            return item.item.gearItem.id === gearId;
+          }
+          if (item.item.gearType.id !== typeId) {
+            return false;
+          }
+          const checkedOut = checkoutBasketBase.items.filter(
+            ({ type }) => type.id === item.item.gearType.id,
+          );
+          if (checkedOut.length < item.item.quantity) {
+            return true;
+          }
+          return checkedOut
+            .slice(0, item.item.quantity)
+            .map((g) => g.id)
+            .includes(gearId);
+        });
+      });
+    },
+    [activeApprovals],
+  );
+
   const calculatedTotalRentals = sum(
     map(rentalsWithOverride, (item) => {
       return item.waived
@@ -79,6 +116,8 @@ function useMakePersonPageContext({ person, refreshPerson }: Props) {
 
   return {
     person,
+    approvals,
+    isApproved,
     refreshPerson,
     purchaseBasket,
     returnBasket: {
diff --git a/src/pages/People/PersonApprovals.tsx b/src/pages/People/PersonApprovals.tsx
new file mode 100644
index 0000000..7de8406
--- /dev/null
+++ b/src/pages/People/PersonApprovals.tsx
@@ -0,0 +1,133 @@
+import dayjs from "dayjs";
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
+import { isEmpty, sortBy } from "lodash";
+
+import { RenterApproval } from "src/apiClient/approvals";
+import { AddApprovalLink } from "src/components/AddApprovalLink";
+import { ApprovalItemsList } from "src/components/ApprovalItemsList";
+import { PersonLink } from "src/components/PersonLink";
+import { formatDate } from "src/lib/fmtDate";
+import { usePermissions } from "src/redux/auth";
+
+import { usePersonPageContext } from "./PeoplePage/PersonPageContext";
+
+dayjs.extend(isSameOrBefore);
+dayjs.extend(isSameOrAfter);
+
+export function PersonApprovals() {
+  const { isApprover } = usePermissions();
+  const { person, approvals: unsortedApprovals } = usePersonPageContext();
+  const approvals = sortBy(unsortedApprovals, "startDate");
+
+  return (
+    <div className="border rounded-2 p-2 bg-light">
+      <div className="d-flex justify-content-between align-items-center">
+        <h3>Approvals</h3>
+        {isApprover && <AddApprovalLink personId={person.id} />}
+      </div>
+      {!isEmpty(approvals) ? (
+        <table className="table">
+          <tbody>
+            {approvals.map((approval) => {
+              return (
+                <tr key={approval.id}>
+                  <MobileApprovalRow approval={approval} />
+                  <DesktopApprovalRow approval={approval} />
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      ) : (
+        <p>No approvals.</p>
+      )}
+    </div>
+  );
+}
+
+/** Row renderer for desktop display. 2 separate columns */
+function DesktopApprovalRow({
+  approval: { items, startDate, endDate, approvedBy, note },
+}: {
+  approval: RenterApproval;
+}) {
+  return (
+    <>
+      <td className="d-none d-md-table-cell w-50">
+        <ApprovalItemsList items={items} />
+      </td>
+      <td className="d-none d-md-table-cell w-50">
+        <DateRange startDate={startDate} endDate={endDate} />
+        <br />
+        <small className="text-muted">
+          By: <ApproverInfo approvedBy={approvedBy} />
+        </small>
+        {note && (
+          <div className="mt-1">
+            <small className="text-muted">{note}</small>
+          </div>
+        )}
+      </td>
+    </>
+  );
+}
+
+/** Row renderer for mobile display. Single column with stacked info */
+function MobileApprovalRow({
+  approval: { items, startDate, endDate, approvedBy, note },
+}: {
+  approval: RenterApproval;
+}) {
+  return (
+    <td className="d-md-none">
+      <div className="mb-2">
+        <strong>Items:</strong>
+        <ApprovalItemsList items={items} />
+      </div>
+      <div className="mb-2">
+        <strong>Period:</strong>{" "}
+        <DateRange startDate={startDate} endDate={endDate} />
+      </div>
+      <div className="mb-2">
+        <strong>By:</strong> <ApproverInfo approvedBy={approvedBy} />
+      </div>
+      <ApprovalNote note={note} />
+    </td>
+  );
+}
+
+function ApproverInfo({
+  approvedBy,
+}: {
+  approvedBy: RenterApproval["approvedBy"];
+}) {
+  return (
+    <PersonLink id={String(approvedBy.id)}>
+      {approvedBy.firstName} {approvedBy.lastName}
+    </PersonLink>
+  );
+}
+
+function DateRange({
+  startDate,
+  endDate,
+}: {
+  startDate: string;
+  endDate: string;
+}) {
+  return (
+    <>
+      {formatDate(startDate)} - {formatDate(endDate)}
+    </>
+  );
+}
+
+function ApprovalNote({ note }: { note?: string }) {
+  if (!note) return null;
+  return (
+    <div className="mb-2">
+      <strong>Note:</strong> {note}
+    </div>
+  );
+}
diff --git a/src/pages/People/PersonPage.tsx b/src/pages/People/PersonPage.tsx
index 8b15cd8..be09fdd 100644
--- a/src/pages/People/PersonPage.tsx
+++ b/src/pages/People/PersonPage.tsx
@@ -1,11 +1,10 @@
 import { isEmpty } from "lodash";
-import { useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { addNote, archiveNote } from "src/apiClient/people";
 import { Notes } from "src/components/Notes";
 import { useSetPageTitle } from "src/hooks";
-import { useGetPersonQuery } from "src/redux/api";
+import { useGetPersonQuery, useGetRenterApprovalsQuery } from "src/redux/api";
 
 import { BuyGear } from "./BuyGear";
 import { CheckoutStaging } from "./CheckoutStaging";
@@ -14,27 +13,37 @@ import {
   PersonPageContextProvider,
   usePersonPageContext,
 } from "./PeoplePage/PersonPageContext";
+import { PersonApprovals } from "./PersonApprovals";
 import { PersonProfile } from "./PersonProfile";
 import { PersonRentals } from "./PersonRentals";
 import { PersonRentalsHistory } from "./PersonRentalsHistory";
-import { PersonPageTabs, PersonTabsSelector } from "./PersonTabs";
+import { PersonPageTabs, PersonTabsSelector, useTab } from "./PersonTabs";
 import { ReturnStaging } from "./ReturnStaging";
 
 export function PersonPage() {
   const { personId } = useParams<{ personId: string }>();
   const { data: person, refetch: refreshPerson } = useGetPersonQuery(personId);
+  const { data: approvalResult } = useGetRenterApprovalsQuery({
+    personID: personId,
+    past: false,
+  });
   if (person == null) {
     return null;
   }
   return (
-    <PersonPageContextProvider person={person} refreshPerson={refreshPerson}>
+    <PersonPageContextProvider
+      person={person}
+      refreshPerson={refreshPerson}
+      // NOTE: This doesn't handle pagination for now, which could be a problem if someone has 50+ active approvals. Unlikely.
+      approvals={approvalResult?.results ?? []}
+    >
       <PersonPageInner />
     </PersonPageContextProvider>
   );
 }
 
 function PersonPageInner() {
-  const [tab, setTab] = useState<PersonPageTabs>(PersonPageTabs.gearOut);
+  const [tab, setTab] = useTab();
 
   const {
     person,
@@ -42,19 +51,36 @@ function PersonPageInner() {
     checkoutBasket,
     returnBasket,
     purchaseBasket,
+    isApproved,
   } = usePersonPageContext();
 
   useSetPageTitle(person ? `${person.firstName} ${person.lastName} ` : "");
 
   const isOverdue = person.rentals.some((rental) => rental.weeksOut >= 7);
 
+  const unaprovedRestrictedItems = checkoutBasket.items.filter(
+    ({ id, type }) => !isApproved(id, type.id),
+  );
+
   return (
     <div className="row">
-      {isOverdue && (
+      {isOverdue && isEmpty(unaprovedRestrictedItems) && (
         <div className="alert alert-danger" role="alert">
           Please remind renter to return overdue gear!
         </div>
       )}
+      {!isEmpty(unaprovedRestrictedItems) && (
+        <div className="alert alert-warning" role="alert">
+          ⚠️ <strong>Unapproved restricted gear</strong> in the basket:
+          <ul>
+            {unaprovedRestrictedItems.map((i) => (
+              <li key={i.id}>{i.id}</li>
+            ))}
+          </ul>
+          Please ensure that the renter has been approved by the relevant
+          activity chair to check this gear out (i.e. via email)
+        </div>
+      )}
       <div className="col-12 col-md-5 p-2">
         <PersonProfile />
         <Notes
@@ -80,9 +106,10 @@ function PersonPageInner() {
       <div className="col-12 col-md-7 p-2">
         <PersonTabsSelector activeTab={tab} updateTab={setTab} />
         {tab === PersonPageTabs.gearOut && <PersonRentals />}
-        {tab === PersonPageTabs.moreGear && <MoreGear />}
-        {tab === PersonPageTabs.buyGear && <BuyGear />}
-        {tab === PersonPageTabs.rentalHistory && (
+        {tab === PersonPageTabs.rent && <MoreGear />}
+        {tab === PersonPageTabs.buy && <BuyGear />}
+        {tab === PersonPageTabs.approvals && <PersonApprovals />}
+        {tab === PersonPageTabs.history && (
           <PersonRentalsHistory personId={person.id} />
         )}
       </div>
diff --git a/src/pages/People/PersonTabs.tsx b/src/pages/People/PersonTabs.tsx
index dcfd4f9..31e56ad 100644
--- a/src/pages/People/PersonTabs.tsx
+++ b/src/pages/People/PersonTabs.tsx
@@ -1,3 +1,6 @@
+import { useCallback } from "react";
+import { useHistory, useLocation } from "react-router-dom";
+
 type Props = {
   updateTab: (newTab: PersonPageTabs) => void;
   activeTab: PersonPageTabs;
@@ -5,18 +8,20 @@ type Props = {
 
 export enum PersonPageTabs {
   gearOut = "gearOut",
-  moreGear = "moreGear",
-  buyGear = "buyGear",
-  rentalHistory = "rentalHistory",
+  rent = "rent",
+  buy = "buy",
+  approvals = "approvals",
+  history = "history",
 }
 
 const tabs = [
   { name: PersonPageTabs.gearOut, label: "Gear out" },
-  { name: PersonPageTabs.moreGear, label: "Rent Gear", shortLabel: "Rent" },
-  { name: PersonPageTabs.buyGear, label: "Buy Gear", shortLabel: "Buy" },
+  { name: PersonPageTabs.rent, label: "Rent", shortLabel: "Rent" },
+  { name: PersonPageTabs.approvals, label: "Approvals", shortLabel: "Appr." },
+  { name: PersonPageTabs.buy, label: "Buy", shortLabel: "Buy" },
   {
-    name: PersonPageTabs.rentalHistory,
-    label: "Rental History",
+    name: PersonPageTabs.history,
+    label: "History",
     shortLabel: "Hist.",
   },
 ];
@@ -38,3 +43,22 @@ export function PersonTabsSelector({ activeTab, updateTab }: Props) {
     </ul>
   );
 }
+
+export function useTab(): [PersonPageTabs, (newTab: PersonPageTabs) => void] {
+  const history = useHistory();
+  const location = useLocation();
+
+  const searchParams = new URLSearchParams(location.search);
+  const tabParam = searchParams.get("tab");
+  const tab = Object.values(PersonPageTabs).includes(tabParam as PersonPageTabs)
+    ? (tabParam as PersonPageTabs)
+    : PersonPageTabs.gearOut;
+
+  const setTab = useCallback((newTab: PersonPageTabs) => {
+    const newSearchParams = new URLSearchParams(location.search);
+    newSearchParams.set("tab", newTab);
+    history.push(`${location.pathname}?${newSearchParams.toString()}`);
+  }, []);
+
+  return [tab, setTab];
+}
diff --git a/src/redux/api.ts b/src/redux/api.ts
index f9a6d16..b3dc35b 100644
--- a/src/redux/api.ts
+++ b/src/redux/api.ts
@@ -2,7 +2,7 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { isEmpty } from "lodash";
 import queryString from "query-string";
 
-import { Approval } from "src/apiClient/approvals";
+import { Approval, RenterApproval } from "src/apiClient/approvals";
 import { API_HOST } from "src/apiClient/client";
 import { Config } from "src/apiClient/config";
 import type {
@@ -152,6 +152,18 @@ export const gearDbApi = createApi({
         },
       }),
     }),
+
+    getRenterApprovals: builder.query<
+      ListWrapper<RenterApproval>,
+      { personID: string; past: boolean; future?: boolean }
+    >({
+      query: ({ personID, past }) => ({
+        url: `people/${personID}/approvals`,
+        params: {
+          past,
+        },
+      }),
+    }),
     getGearLocations: builder.query<GearLocation[], void>({
       query: () => "/gear-locations/",
     }),
@@ -174,6 +186,7 @@ export const {
   useGetApprovalsQuery,
   useGetGearLocationsQuery,
   useGetGearTypePicturesQuery,
+  useGetRenterApprovalsQuery,
 } = gearDbApi;
 
 export function useGearList({
diff --git a/tsconfig.json b/tsconfig.json
index 206aa02..0e39b3f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,7 @@
     /* Path mapping */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "src/*": ["./src/*"]
     },
 
     /* Other options */