diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 6be6785e..1eb01f01 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -4,9 +4,6 @@ on:
   push:
     paths-ignore:
       - '**/*.md'
-      - '**/*.code-*'
-      - '.vscode/**'
-      - '.devcontainer.json'
   pull_request:
   issues:
   issue_comment:
diff --git a/eslint.config.js b/eslint.config.js
index 6404838c..0cbe7331 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,7 +3,12 @@ import ts from "typescript-eslint"
 
 export default ts.config(
   ...workspaceConfig,
-  { ignores: ["src/scripts/*"] },
+  {
+    ignores: [
+      "src/scripts/*",
+      "src/server.js", // TODO: convert to src/server.ts and remove this ignore
+    ],
+  },
   {
     languageOptions: {
       parserOptions: { tsconfigRootDir: import.meta.dirname },
diff --git a/src/api/createApi.ts b/src/api/createApi.ts
index 35963a1b..839fc2c4 100644
--- a/src/api/createApi.ts
+++ b/src/api/createApi.ts
@@ -1,12 +1,12 @@
 import {
+  type FetchArgs,
   createApi as _createApi,
   fetchBaseQuery,
-  type FetchArgs,
 } from "@reduxjs/toolkit/query/react"
 
 import { SERVICE_API_URL } from "../settings"
-import defaultTagTypes from "./tagTypes"
 import { buildLogoutEndpoint } from "./endpoints/session"
+import defaultTagTypes from "./tagTypes"
 import { getCsrfCookie } from "../utils/auth"
 import { isSafeHttpMethod } from "../utils/api"
 
@@ -45,7 +45,7 @@ export default function createApi<TagTypes extends string = never>({
       const method = typeof arg === "string" ? "GET" : arg.method || "GET"
 
       if (type === "mutation" || !isSafeHttpMethod(method)) {
-        let csrfToken = getCsrfCookie()
+        const csrfToken = getCsrfCookie()
         if (csrfToken) headers.set("x-csrftoken", csrfToken)
       }
 
@@ -55,7 +55,7 @@ export default function createApi<TagTypes extends string = never>({
 
   const api = _createApi({
     // https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#implementing-a-custom-basequery
-    baseQuery: async (args, api, extraOptions) => {
+    baseQuery: async (args: string | FetchArgs, api, extraOptions) => {
       if (api.type === "mutation" && getCsrfCookie() === undefined) {
         // Get the CSRF token.
         const { error } = await fetch(
diff --git a/src/api/endpoints/authFactor.ts b/src/api/endpoints/authFactor.ts
index 8264c5e9..784eac40 100644
--- a/src/api/endpoints/authFactor.ts
+++ b/src/api/endpoints/authFactor.ts
@@ -1,10 +1,10 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
 import type { AuthFactor } from "../models"
 import { type TagTypes } from "../tagTypes"
diff --git a/src/api/endpoints/klass.ts b/src/api/endpoints/klass.ts
index 49d8e0ea..63cbb5fe 100644
--- a/src/api/endpoints/klass.ts
+++ b/src/api/endpoints/klass.ts
@@ -1,19 +1,19 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
+import type {
+  Class,
+  SchoolTeacher,
+  SchoolTeacherUser,
+  Teacher,
+} from "../models"
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
-import type {
-  Class,
-  Teacher,
-  SchoolTeacher,
-  SchoolTeacherUser,
-} from "../models"
 import { type TagTypes } from "../tagTypes"
 import urls from "../urls"
 
diff --git a/src/api/endpoints/school.ts b/src/api/endpoints/school.ts
index e84a8545..09f7a7bf 100644
--- a/src/api/endpoints/school.ts
+++ b/src/api/endpoints/school.ts
@@ -1,10 +1,10 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import {
-  buildUrl,
-  tagData,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
 import type { School } from "../models"
 import { type TagTypes } from "../tagTypes"
diff --git a/src/api/endpoints/session.ts b/src/api/endpoints/session.ts
index dfabdec0..6167b544 100644
--- a/src/api/endpoints/session.ts
+++ b/src/api/endpoints/session.ts
@@ -1,4 +1,4 @@
-import { type EndpointBuilder, type Api } from "@reduxjs/toolkit/query/react"
+import { type Api, type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import { login, logout } from "../../slices/session"
 
@@ -39,6 +39,7 @@ export function buildLogoutEndpoint<ResultType, QueryArg>(
         console.error("Failed to call logout endpoint...", error)
       } finally {
         dispatch(logout())
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
         dispatch(api.util.resetApiState())
       }
     },
diff --git a/src/api/endpoints/user.ts b/src/api/endpoints/user.ts
index 0a6d26be..bb9de02b 100644
--- a/src/api/endpoints/user.ts
+++ b/src/api/endpoints/user.ts
@@ -1,14 +1,14 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
+import type { Class, User } from "../models"
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
-import type { Class, User } from "../models"
 import { type TagTypes } from "../tagTypes"
 import urls from "../urls"
 
diff --git a/src/api/models.ts b/src/api/models.ts
index cd4bf3ac..7e54114c 100644
--- a/src/api/models.ts
+++ b/src/api/models.ts
@@ -1,5 +1,5 @@
-import type { Model } from "../utils/api"
 import type { CountryIsoCodes, UkCounties } from "../utils/general"
+import type { Model } from "../utils/api"
 
 // -----------------------------------------------------------------------------
 // User Models
diff --git a/src/api/schemas.ts b/src/api/schemas.ts
index 92b9d63e..73b5847c 100644
--- a/src/api/schemas.ts
+++ b/src/api/schemas.ts
@@ -1,31 +1,31 @@
 import * as yup from "yup"
 
-import { UK_COUNTIES, COUNTRY_ISO_CODES } from "../utils/general"
 import type {
-  User,
-  TeacherUser,
-  SchoolTeacherUser,
+  AdminSchoolTeacher,
   AdminSchoolTeacherUser,
-  NonAdminSchoolTeacherUser,
-  NonSchoolTeacherUser,
-  Teacher,
-  Student,
-  Class,
-  School,
   AuthFactor,
-  OtpBypassToken,
-  StudentUser,
+  Class,
   IndependentUser,
-  SchoolTeacher,
-  AdminSchoolTeacher,
   NonAdminSchoolTeacher,
+  NonAdminSchoolTeacherUser,
   NonSchoolTeacher,
+  NonSchoolTeacherUser,
+  OtpBypassToken,
+  School,
+  SchoolTeacher,
+  SchoolTeacherUser,
+  Student,
+  StudentUser,
+  Teacher,
+  TeacherUser,
+  User,
 } from "./models"
+import { COUNTRY_ISO_CODES, UK_COUNTIES } from "../utils/general"
 import {
-  unicodeAlphanumericString,
-  uppercaseAsciiAlphanumericString,
   lowercaseAsciiAlphanumericString,
   numericId,
+  unicodeAlphanumericString,
+  uppercaseAsciiAlphanumericString,
 } from "../utils/schema"
 import { type Schemas } from "../utils/api"
 
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5acd8f04..a416ef17 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,14 +1,14 @@
+import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
 import { CssBaseline, ThemeProvider } from "@mui/material"
-import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider"
-import { type FC, type ReactNode, type JSX } from "react"
+import { type FC, type JSX, type ReactNode } from "react"
 import { Provider, type ProviderProps } from "react-redux"
-import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
-import { StaticRouter } from "react-router-dom/server"
 import { type Action } from "redux"
+import { StaticRouter } from "react-router-dom/server"
+import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider"
 
 import "./App.css"
-import { useLocation } from "../hooks"
 import { SSR } from "../settings"
+import { useLocation } from "../hooks"
 // import { InactiveDialog, ScreenTimeDialog } from "../features"
 // import { useCountdown, useEventListener } from "../hooks"
 // import "../scripts"
@@ -60,7 +60,9 @@ const App = <A extends Action = Action, S = unknown>({
   path,
   theme,
   store,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxIdleSeconds = 60 * 60,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxTotalSeconds = 60 * 60,
   ...routesProps
 }: AppProps<A, S>): JSX.Element => {
diff --git a/src/components/CopyIconButton.test.tsx b/src/components/CopyIconButton.test.tsx
index 76b3491c..8a42d313 100644
--- a/src/components/CopyIconButton.test.tsx
+++ b/src/components/CopyIconButton.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 
-import { renderWithUser } from "../utils/test"
 import CopyIconButton from "./CopyIconButton"
+import { renderWithUser } from "../utils/test"
 
 test("Clicking button should copy content", async () => {
   const content = "Example string to be copied."
diff --git a/src/components/CopyIconButton.tsx b/src/components/CopyIconButton.tsx
index 79c4a6cc..9b302ef8 100644
--- a/src/components/CopyIconButton.tsx
+++ b/src/components/CopyIconButton.tsx
@@ -1,5 +1,5 @@
-import { ContentCopy as ContentCopyIcon } from "@mui/icons-material"
 import { IconButton, type IconButtonProps } from "@mui/material"
+import { ContentCopy as ContentCopyIcon } from "@mui/icons-material"
 import type { FC } from "react"
 
 export interface CopyIconButtonProps extends Omit<IconButtonProps, "onClick"> {
@@ -15,7 +15,7 @@ const CopyIconButton: FC<CopyIconButtonProps> = ({
     <IconButton
       data-testid="copy-icon-button"
       onClick={() => {
-        navigator.clipboard.writeText(content)
+        void navigator.clipboard.writeText(content)
       }}
       {...otherIconButtonProps}
     >
diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
index de7e6dc5..07063e1e 100644
--- a/src/components/Countdown.tsx
+++ b/src/components/Countdown.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { type FC, useState } from "react"
 import { Typography, type TypographyProps } from "@mui/material"
 
 import { useCountdown } from "../hooks"
@@ -9,7 +9,7 @@ export interface CountdownProps extends Omit<TypographyProps, "children"> {
   onEnd: () => void
 }
 
-const Countdown: React.FC<CountdownProps> = ({
+const Countdown: FC<CountdownProps> = ({
   seconds,
   start = true,
   onEnd,
@@ -17,7 +17,7 @@ const Countdown: React.FC<CountdownProps> = ({
 }) => {
   seconds = Math.floor(seconds)
   const _seconds = useCountdown(seconds)[0]
-  const [end, setEnd] = React.useState(!start)
+  const [end, setEnd] = useState(!start)
 
   if (_seconds === 0 && !end) {
     setEnd(true)
diff --git a/src/components/DownloadFileButton.tsx b/src/components/DownloadFileButton.tsx
index b19aad8c..f7a62d41 100644
--- a/src/components/DownloadFileButton.tsx
+++ b/src/components/DownloadFileButton.tsx
@@ -24,7 +24,8 @@ const DownloadFileButton: FC<DownloadFileButtonProps> = ({
   let url: undefined | string = undefined
   let anchorProps: undefined | { download?: string; href: string } = undefined
   if ("mimeType" in file) {
-    let { text, mimeType, name, charset = "utf-8", extension } = file
+    const { text, mimeType, name, charset = "utf-8" } = file
+    let { extension } = file
 
     if (!extension) extension = "." + { plain: "txt", csv: "csv" }[mimeType]
 
diff --git a/src/components/ElevatedAppBar.tsx b/src/components/ElevatedAppBar.tsx
index 5891cb8e..b05d20c5 100644
--- a/src/components/ElevatedAppBar.tsx
+++ b/src/components/ElevatedAppBar.tsx
@@ -1,20 +1,20 @@
-import React from "react"
 import {
   AppBar,
   type AppBarProps,
+  Container,
+  type ContainerProps,
   Toolbar,
   type ToolbarProps,
   useScrollTrigger,
-  Container,
-  type ContainerProps,
 } from "@mui/material"
+import { type FC, cloneElement } from "react"
 
 export interface ElevatedAppBarProps extends Omit<AppBarProps, "position"> {
   containerProps: ContainerProps
   toolbarProps?: ToolbarProps
 }
 
-const ElevatedAppBar: React.FC<ElevatedAppBarProps> = ({
+const ElevatedAppBar: FC<ElevatedAppBarProps> = ({
   containerProps,
   toolbarProps,
   elevation = 4,
@@ -26,7 +26,7 @@ const ElevatedAppBar: React.FC<ElevatedAppBarProps> = ({
     threshold: 0,
   })
 
-  return React.cloneElement(
+  return cloneElement(
     <AppBar elevation={elevation} {...otherProps}>
       <Container {...containerProps}>
         <Toolbar {...toolbarProps}>{children}</Toolbar>
diff --git a/src/components/Image.tsx b/src/components/Image.tsx
index a83c655d..43e0ee14 100644
--- a/src/components/Image.tsx
+++ b/src/components/Image.tsx
@@ -1,5 +1,5 @@
 import { Box, type BoxProps } from "@mui/material"
-import type React from "react"
+import { type FC } from "react"
 
 import { openInNewTab } from "../utils/general"
 
@@ -10,12 +10,12 @@ export interface ImageProps extends Omit<BoxProps, "component"> {
   hrefInNewTab?: boolean
 }
 
-const Image: React.FC<ImageProps> = ({
-  href,
-  hrefInNewTab = false,
-  ...props
-}) => {
-  let { onClick, style = {}, ...otherProps } = props
+const Image: FC<ImageProps> = ({ href, hrefInNewTab = false, ...props }) => {
+  let {
+    onClick,
+    style = {},
+    ...otherProps // eslint-disable-line prefer-const
+  } = props
 
   if (style.width === undefined) {
     style.width = "100%"
diff --git a/src/components/InputFileButton.tsx b/src/components/InputFileButton.tsx
index e8796859..05e8c929 100644
--- a/src/components/InputFileButton.tsx
+++ b/src/components/InputFileButton.tsx
@@ -1,9 +1,9 @@
+import { Button, type ButtonProps } from "@mui/material"
 import {
-  type FC,
   type DetailedHTMLProps,
+  type FC,
   type InputHTMLAttributes,
 } from "react"
-import { Button, type ButtonProps } from "@mui/material"
 
 export interface InputFileButtonProps
   extends Omit<ButtonProps<"label">, "component"> {
diff --git a/src/components/ItemizedList.tsx b/src/components/ItemizedList.tsx
index f9d02278..200c8291 100644
--- a/src/components/ItemizedList.tsx
+++ b/src/components/ItemizedList.tsx
@@ -1,12 +1,12 @@
-import type React from "react"
+import { type FC, type ReactElement } from "react"
 import {
   List,
-  type ListProps,
   type ListItem,
   type ListItemText,
+  type ListProps,
 } from "@mui/material"
 
-type ListItemElement = React.ReactElement<typeof ListItem | typeof ListItemText>
+type ListItemElement = ReactElement<typeof ListItem | typeof ListItemText>
 
 export interface ItemizedListProps {
   styleType:
@@ -33,7 +33,7 @@ export interface ItemizedListProps {
   children: ListItemElement | ListItemElement[]
 }
 
-const ItemizedList: React.FC<ItemizedListProps> = ({
+const ItemizedList: FC<ItemizedListProps> = ({
   styleType,
   listProps = {},
   pl = 4,
diff --git a/src/components/OrderedGrid.tsx b/src/components/OrderedGrid.tsx
index 9ddc0f1c..3874c617 100644
--- a/src/components/OrderedGrid.tsx
+++ b/src/components/OrderedGrid.tsx
@@ -1,4 +1,4 @@
-import type React from "react"
+import { type FC, type ReactElement } from "react"
 import { Unstable_Grid2 as Grid, type Grid2Props } from "@mui/material"
 
 interface ItemProps
@@ -29,7 +29,7 @@ interface GlobalItemProps extends ItemProps {
 export interface OrderedGridProps {
   rows: Array<
     Array<{
-      element: React.ReactElement
+      element: ReactElement
       itemProps?: ItemProps
     }>
   >
@@ -37,7 +37,7 @@ export interface OrderedGridProps {
   globalItemProps: GlobalItemProps
 }
 
-const OrderedGrid: React.FC<OrderedGridProps> = ({
+const OrderedGrid: FC<OrderedGridProps> = ({
   rows,
   containerProps = {},
   globalItemProps,
diff --git a/src/components/ScrollIntoViewLink.tsx b/src/components/ScrollIntoViewLink.tsx
index 8b6ffd6d..0d8aec06 100644
--- a/src/components/ScrollIntoViewLink.tsx
+++ b/src/components/ScrollIntoViewLink.tsx
@@ -1,6 +1,5 @@
-import { type FC } from "react"
 import { Link, type LinkProps } from "@mui/material"
-
+import { type FC } from "react"
 export interface ScrollIntoViewLinkProps extends Omit<LinkProps, "onClick"> {
   elementId: string
   options?: ScrollIntoViewOptions
diff --git a/src/components/SyncError.tsx b/src/components/SyncError.tsx
index 1a50941b..eeac61dc 100644
--- a/src/components/SyncError.tsx
+++ b/src/components/SyncError.tsx
@@ -1,6 +1,6 @@
-import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
 import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
+import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
 
 export interface SyncErrorProps {}
 
diff --git a/src/components/TablePagination.tsx b/src/components/TablePagination.tsx
index 133c4388..460b9704 100644
--- a/src/components/TablePagination.tsx
+++ b/src/components/TablePagination.tsx
@@ -1,3 +1,10 @@
+import {
+  type ElementType,
+  type JSX,
+  type JSXElementConstructor,
+  type ReactNode,
+  useEffect,
+} from "react"
 import {
   TablePagination as MuiTablePagination,
   type TablePaginationProps as MuiTablePaginationProps,
@@ -6,16 +13,9 @@ import {
   type TablePaginationBaseProps,
 } from "@mui/material"
 import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
-import {
-  type ElementType,
-  type JSXElementConstructor,
-  type ReactNode,
-  useEffect,
-  type JSX,
-} from "react"
 
-import { type Pagination, usePagination } from "../hooks/api"
 import { type ListArg, type ListResult, handleResultState } from "../utils/api"
+import { type Pagination, usePagination } from "../hooks/api"
 
 export type TablePaginationProps<
   QueryArg extends ListArg,
@@ -84,10 +84,17 @@ const TablePagination = <
 
   useEffect(
     () => {
-      trigger({ limit, offset, ...filters } as QueryArg, preferCacheValue)
+      void trigger({ limit, offset, ...filters } as QueryArg, preferCacheValue)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [trigger, limit, offset, ...Object.values(filters || {}), preferCacheValue],
+    [
+      trigger,
+      limit,
+      offset,
+      // eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unsafe-assignment
+      ...Object.values(filters || {}),
+      preferCacheValue,
+    ],
   )
 
   const { count, max_limit } = result.data || {}
@@ -115,11 +122,13 @@ const TablePagination = <
         rowsPerPage={limit}
         onRowsPerPageChange={event => {
           setPagination({ limit: parseInt(event.target.value), page: 0 })
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
           if (onRowsPerPageChange) onRowsPerPageChange(event)
         }}
         page={page}
         onPageChange={(event, page) => {
           setPagination(({ limit }) => ({ limit, page }))
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
           if (onPageChange) onPageChange(event, page)
         }}
         // ascending order
diff --git a/src/components/YouTubeVideo.tsx b/src/components/YouTubeVideo.tsx
index 8097db2c..c4a407c1 100644
--- a/src/components/YouTubeVideo.tsx
+++ b/src/components/YouTubeVideo.tsx
@@ -1,11 +1,11 @@
-import type React from "react"
 import { Box, type BoxProps } from "@mui/material"
+import { type FC } from "react"
 
 export interface YouTubeVideoProps extends Omit<BoxProps, "component"> {
   src: string
 }
 
-const YouTubeVideo: React.FC<YouTubeVideoProps> = ({
+const YouTubeVideo: FC<YouTubeVideoProps> = ({
   src,
   style = {},
   ...otherProps
diff --git a/src/components/form/ApiAutocompleteField.tsx b/src/components/form/ApiAutocompleteField.tsx
index 27f94234..91228afd 100644
--- a/src/components/form/ApiAutocompleteField.tsx
+++ b/src/components/form/ApiAutocompleteField.tsx
@@ -1,21 +1,23 @@
-import { Button, CircularProgress, type ChipTypeMap } from "@mui/material"
-import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
+import { Button, type ChipTypeMap, CircularProgress } from "@mui/material"
 import {
   Children,
+  type ElementType,
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type JSX,
   forwardRef,
   useEffect,
   useState,
-  type ElementType,
-  type JSX,
 } from "react"
+import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
 
 import {
   AutocompleteField,
   type AutocompleteFieldProps,
 } from "../../components/form"
-import { usePagination } from "../../hooks/api"
 import type { ListArg, ListResult, ModelId } from "../../utils/api"
 import SyncError from "../SyncError"
+import { usePagination } from "../../hooks/api"
 
 export interface ApiAutocompleteFieldProps<
   SearchKey extends keyof Omit<QueryArg, "limit" | "offset">,
@@ -63,7 +65,7 @@ const ApiAutocompleteField = <
   useLazyListQuery,
   filterOptions,
   getOptionLabel,
-  getOptionKey = result => result.id,
+  getOptionKey = result => result.id as ModelId,
   searchKey,
   ...otherAutocompleteFieldProps
 }: ApiAutocompleteFieldProps<
@@ -89,7 +91,7 @@ const ApiAutocompleteField = <
   useEffect(
     () => {
       const arg = { limit, offset, ...filterOptions } as QueryArg
-      // @ts-expect-error
+      // @ts-expect-error search key can index arg
       if (search) arg[searchKey] = search
 
       trigger(arg, true)
@@ -131,6 +133,44 @@ const ApiAutocompleteField = <
     setPagination(({ page, limit }) => ({ page: page + 1, limit }))
   }
 
+  const ListboxComponent: ForwardRefRenderFunction<
+    unknown,
+    HTMLAttributes<HTMLElement>
+  > = ({ children, ...props }, ref) => {
+    const listItems = Children.toArray(children)
+    if (isLoading) listItems.push(<CircularProgress key="is-loading" />)
+    else {
+      if (isError) listItems.push(<SyncError key="is-error" />)
+      if (hasMore) {
+        listItems.push(
+          <Button key="load-more" onClick={loadNextPage}>
+            Load more
+          </Button>,
+        )
+      }
+    }
+
+    return (
+      <ul
+        {...props}
+        // @ts-expect-error ref is assignable
+        ref={ref}
+        onScroll={event => {
+          // If not already loading and scrolled to bottom
+          if (
+            !isLoading &&
+            event.currentTarget.clientHeight + event.currentTarget.scrollTop >=
+              event.currentTarget.scrollHeight
+          ) {
+            loadNextPage()
+          }
+        }}
+      >
+        {listItems}
+      </ul>
+    )
+  }
+
   return (
     <AutocompleteField
       options={optionKeys}
@@ -138,41 +178,7 @@ const ApiAutocompleteField = <
       onInputChange={(_, value, reason) => {
         setSearch(reason === "input" ? value : "")
       }}
-      ListboxComponent={forwardRef(({ children, ...props }, ref) => {
-        const listItems = Children.toArray(children)
-        if (isLoading) listItems.push(<CircularProgress key="is-loading" />)
-        else {
-          if (isError) listItems.push(<SyncError key="is-error" />)
-          if (hasMore) {
-            listItems.push(
-              <Button key="load-more" onClick={loadNextPage}>
-                Load more
-              </Button>,
-            )
-          }
-        }
-
-        return (
-          <ul
-            {...props}
-            // @ts-expect-error
-            ref={ref}
-            onScroll={event => {
-              // If not already loading and scrolled to bottom
-              if (
-                !isLoading &&
-                event.currentTarget.clientHeight +
-                  event.currentTarget.scrollTop >=
-                  event.currentTarget.scrollHeight
-              ) {
-                loadNextPage()
-              }
-            }}
-          >
-            {listItems}
-          </ul>
-        )
-      })}
+      ListboxComponent={forwardRef(ListboxComponent)}
       {...otherAutocompleteFieldProps}
     />
   )
diff --git a/src/components/form/AutocompleteField.tsx b/src/components/form/AutocompleteField.tsx
index 3edcb330..f2e57c40 100644
--- a/src/components/form/AutocompleteField.tsx
+++ b/src/components/form/AutocompleteField.tsx
@@ -1,19 +1,19 @@
 import {
   Autocomplete,
-  TextField,
   type AutocompleteProps,
   type ChipTypeMap,
+  TextField,
   type TextFieldProps,
 } from "@mui/material"
-import { Field, type FieldConfig, type FieldProps } from "formik"
 import { type ElementType, type JSX } from "react"
+import { Field, type FieldConfig, type FieldProps } from "formik"
 import {
+  type ValidateOptions,
   number as YupNumber,
   string as YupString,
-  type ValidateOptions,
 } from "yup"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export interface AutocompleteFieldProps<
@@ -86,17 +86,28 @@ const AutocompleteField = <
   return (
     <Field {...fieldConfig}>
       {({ form, meta }: FieldProps) => {
-        const value = getNestedProperty(form.values, dotPath)
-        const touched = getNestedProperty(form.touched, dotPath)
-        const error = getNestedProperty(form.errors, dotPath)
+        const value = getNestedProperty(
+          form.values as FormValues,
+          dotPath,
+        ) as string
+        const touched = getNestedProperty(form.touched, dotPath) as boolean
+        const error = getNestedProperty(form.errors, dotPath) as
+          | string
+          | undefined
 
         return (
           <Autocomplete
             options={options}
+            // @ts-expect-error value can be assigned
             defaultValue={
-              meta.initialValue === "" ? undefined : meta.initialValue
+              meta.initialValue === ""
+                ? undefined
+                : (meta.initialValue as string)
             }
-            renderInput={({ id: _, ...otherParams }) => (
+            renderInput={({
+              id: _, // eslint-disable-line @typescript-eslint/no-unused-vars
+              ...otherParams
+            }) => (
               <TextField
                 id={id ?? name}
                 name={name}
@@ -104,13 +115,13 @@ const AutocompleteField = <
                 type="text" // Force to be string to avoid number incrementor/decrementor
                 value={value}
                 error={touched && Boolean(error)}
-                helperText={(touched && error) as false | string}
+                helperText={touched && error}
                 {...otherTextFieldProps}
                 {...otherParams}
               />
             )}
             onChange={(_, value) => {
-              form.setFieldValue(name, value ?? undefined, true)
+              void form.setFieldValue(name, value ?? undefined, true)
             }}
             onBlur={form.handleBlur}
             {...otherAutocompleteProps}
diff --git a/src/components/form/CheckboxField.tsx b/src/components/form/CheckboxField.tsx
index d46aaa2d..433bb27f 100644
--- a/src/components/form/CheckboxField.tsx
+++ b/src/components/form/CheckboxField.tsx
@@ -1,16 +1,16 @@
 import {
   Checkbox,
+  type CheckboxProps,
   FormControl,
   FormControlLabel,
-  FormHelperText,
-  type CheckboxProps,
   type FormControlLabelProps,
+  FormHelperText,
 } from "@mui/material"
 import { Field, type FieldConfig, type FieldProps } from "formik"
+import { type ValidateOptions, bool as YupBool } from "yup"
 import { type FC } from "react"
-import { bool as YupBool, type ValidateOptions } from "yup"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export interface CheckboxFieldProps
@@ -47,9 +47,14 @@ const CheckboxField: FC<CheckboxFieldProps> = ({
   return (
     <Field {...fieldConfig}>
       {({ form, meta }: FieldProps) => {
-        const touched = getNestedProperty(form.touched, dotPath)
-        const error = getNestedProperty(form.errors, dotPath)
-        const value = getNestedProperty(form.values, dotPath)
+        const touched = getNestedProperty(form.touched, dotPath) as boolean
+        const error = getNestedProperty(form.errors, dotPath) as
+          | string
+          | undefined
+        const value = getNestedProperty(
+          form.values as FormValues,
+          dotPath,
+        ) as boolean
 
         const hasError = touched && Boolean(error)
 
@@ -59,7 +64,7 @@ const CheckboxField: FC<CheckboxFieldProps> = ({
             <FormControlLabel
               control={
                 <Checkbox
-                  defaultChecked={meta.initialValue}
+                  defaultChecked={meta.initialValue as boolean}
                   id={id ?? name}
                   name={name}
                   value={value}
@@ -70,7 +75,7 @@ const CheckboxField: FC<CheckboxFieldProps> = ({
               }
               {...formControlLabelProps}
             />
-            {hasError && <FormHelperText>{error as string}</FormHelperText>}
+            {hasError && <FormHelperText>{error}</FormHelperText>}
           </FormControl>
         )
       }}
diff --git a/src/components/form/CountryField.tsx b/src/components/form/CountryField.tsx
index 1d81133f..de59eea3 100644
--- a/src/components/form/CountryField.tsx
+++ b/src/components/form/CountryField.tsx
@@ -1,13 +1,14 @@
-import { type ChipTypeMap } from "@mui/material"
 import { type ElementType, type JSX } from "react"
+import { type ChipTypeMap } from "@mui/material"
+
+import AutocompleteField, {
+  type AutocompleteFieldProps,
+} from "./AutocompleteField"
 import {
   COUNTRY_ISO_CODES,
   COUNTRY_ISO_CODE_MAPPING,
   type CountryIsoCodes,
 } from "../../utils/general"
-import AutocompleteField, {
-  type AutocompleteFieldProps,
-} from "./AutocompleteField"
 
 export interface CountryFieldProps<
   Multiple extends boolean | undefined = false,
diff --git a/src/components/form/DatePickerField.tsx b/src/components/form/DatePickerField.tsx
index fc831f33..5cf99ed5 100644
--- a/src/components/form/DatePickerField.tsx
+++ b/src/components/form/DatePickerField.tsx
@@ -1,17 +1,17 @@
+import "dayjs/locale/en-gb"
 import {
   DatePicker,
-  LocalizationProvider,
   type DatePickerProps,
+  LocalizationProvider,
   type PickerValidDate,
 } from "@mui/x-date-pickers"
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
-import dayjs, { type Dayjs } from "dayjs"
-import "dayjs/locale/en-gb"
 import { Field, type FieldConfig, type FieldProps } from "formik"
-import { date as YupDate, type ValidateOptions } from "yup"
+import { type ValidateOptions, date as YupDate } from "yup"
+import dayjs, { type Dayjs } from "dayjs"
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
 import { type JSX } from "react"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export interface DatePickerFieldProps<
@@ -70,14 +70,19 @@ const DatePickerField = <
   return (
     <Field {...fieldConfig}>
       {({ form }: FieldProps) => {
-        const error = getNestedProperty(form.errors, dotPath)
-        const touched = getNestedProperty(form.touched, dotPath)
-        let value = getNestedProperty(form.values, dotPath)
+        const error = getNestedProperty(form.errors, dotPath) as
+          | string
+          | undefined
+        const touched = getNestedProperty(form.touched, dotPath) as boolean
+        let value: Dayjs | null | string = getNestedProperty(
+          form.values as FormValues,
+          dotPath,
+        ) as string
 
         value = value ? dayjs(value) : null
 
         function handleChange(value: Dayjs | null) {
-          form.setFieldValue(
+          void form.setFieldValue(
             name,
             value && value.isValid() ? value.format("YYYY-MM-DD") : null,
             true,
@@ -89,6 +94,7 @@ const DatePickerField = <
             dateAdapter={AdapterDayjs}
             adapterLocale="en-gb"
           >
+            {/* @ts-expect-error value is compatible */}
             <DatePicker
               name={name}
               value={value}
@@ -99,7 +105,7 @@ const DatePickerField = <
                 textField: {
                   id: name,
                   onChange: value => {
-                    // @ts-expect-error
+                    // @ts-expect-error value is compatible
                     handleChange(value as Dayjs | null)
                   },
                   onBlur: form.handleBlur,
diff --git a/src/components/form/EmailField.tsx b/src/components/form/EmailField.tsx
index 22fcbea0..79250e5c 100644
--- a/src/components/form/EmailField.tsx
+++ b/src/components/form/EmailField.tsx
@@ -1,6 +1,6 @@
 import { EmailOutlined as EmailOutlinedIcon } from "@mui/icons-material"
-import { InputAdornment } from "@mui/material"
 import type { FC } from "react"
+import { InputAdornment } from "@mui/material"
 import { string as YupString } from "yup"
 
 import TextField, { type TextFieldProps } from "./TextField"
diff --git a/src/components/form/FirstNameField.tsx b/src/components/form/FirstNameField.tsx
index 1dadb9c5..aa74b249 100644
--- a/src/components/form/FirstNameField.tsx
+++ b/src/components/form/FirstNameField.tsx
@@ -1,6 +1,6 @@
-import { PersonOutlined as PersonOutlinedIcon } from "@mui/icons-material"
-import { InputAdornment } from "@mui/material"
 import type { FC } from "react"
+import { InputAdornment } from "@mui/material"
+import { PersonOutlined as PersonOutlinedIcon } from "@mui/icons-material"
 
 import TextField, { type TextFieldProps } from "./TextField"
 import { schemas } from "../../api"
diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx
index a34d03a2..494cc7e1 100644
--- a/src/components/form/Form.tsx
+++ b/src/components/form/Form.tsx
@@ -1,27 +1,27 @@
+import {
+  type FC,
+  type JSX,
+  type ReactNode,
+  type RefObject,
+  useEffect,
+  useRef,
+} from "react"
 import { FormHelperText, type FormHelperTextProps } from "@mui/material"
 import {
   Formik,
-  Form as FormikForm,
   type FormikConfig,
   type FormikErrors,
+  Form as FormikForm,
   type FormikProps,
 } from "formik"
-import {
-  type ReactNode,
-  type FC,
-  useRef,
-  useEffect,
-  type RefObject,
-  type JSX,
-} from "react"
 import type { TypedUseMutation } from "@reduxjs/toolkit/query/react"
 
-import { getKeyPaths } from "../../utils/general"
 import {
-  submitForm,
-  type SubmitFormOptions,
   type FormValues,
+  type SubmitFormOptions,
+  submitForm,
 } from "../../utils/form"
+import { getKeyPaths } from "../../utils/general"
 
 const SCROLL_INTO_VIEW_OPTIONS: ScrollIntoViewOptions = {
   behavior: "smooth",
@@ -68,7 +68,7 @@ const BaseForm = <Values extends FormValues>({
   ...otherFormikProps
 }: BaseFormProps<Values>) => (
   <Formik {...otherFormikProps}>
-    {/* @ts-expect-error */}
+    {/* @ts-expect-error value is assignable */}
     {(formik: _FormikProps<Values>) => {
       const hasErrors = Boolean(Object.keys(formik.errors).length)
       const hasNonFieldErrors =
diff --git a/src/components/form/PasswordField.tsx b/src/components/form/PasswordField.tsx
index 42b55501..96c69636 100644
--- a/src/components/form/PasswordField.tsx
+++ b/src/components/form/PasswordField.tsx
@@ -1,9 +1,9 @@
+import { type FC, useState } from "react"
+import { IconButton, InputAdornment } from "@mui/material"
 import {
   Visibility as VisibilityIcon,
   VisibilityOff as VisibilityOffIcon,
 } from "@mui/icons-material"
-import { IconButton, InputAdornment } from "@mui/material"
-import { useState, type FC } from "react"
 import { string as YupString } from "yup"
 
 import RepeatField, { type RepeatFieldProps } from "./RepeatField"
diff --git a/src/components/form/RepeatField.tsx b/src/components/form/RepeatField.tsx
index 0397d363..b7ba5a6b 100644
--- a/src/components/form/RepeatField.tsx
+++ b/src/components/form/RepeatField.tsx
@@ -1,15 +1,15 @@
-import { TextField as MuiTextField, type TextFieldProps } from "@mui/material"
-import { Field, type FieldConfig, type FieldProps } from "formik"
 import {
-  useEffect,
-  useState,
   type Dispatch,
   type FC,
   type SetStateAction,
+  useEffect,
+  useState,
 } from "react"
-import { string as YupString, type ValidateOptions } from "yup"
+import { Field, type FieldConfig, type FieldProps } from "formik"
+import { TextField as MuiTextField, type TextFieldProps } from "@mui/material"
+import { type ValidateOptions, string as YupString } from "yup"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export type RepeatFieldProps = Omit<
@@ -47,12 +47,20 @@ const TextField: FC<
   const { form } = fieldProps
 
   const dotPath = name.split(".")
-  const value = getNestedProperty(form.values, dotPath)
+  const value = getNestedProperty(form.values as FormValues, dotPath) as string
 
   const repeatDotPath = repeatName.split(".")
-  const repeatValue = getNestedProperty(form.values, repeatDotPath)
-  const repeatTouched = getNestedProperty(form.touched, repeatDotPath)
-  const repeatError = getNestedProperty(form.errors, repeatDotPath)
+  const repeatValue = getNestedProperty(
+    form.values as FormValues,
+    repeatDotPath,
+  ) as string
+  const repeatTouched = getNestedProperty(
+    form.touched,
+    repeatDotPath,
+  ) as boolean
+  const repeatError = getNestedProperty(form.errors, repeatDotPath) as
+    | string
+    | undefined
 
   useEffect(() => {
     setValue(value)
diff --git a/src/components/form/SubmitButton.tsx b/src/components/form/SubmitButton.tsx
index 248ea2e7..009d832a 100644
--- a/src/components/form/SubmitButton.tsx
+++ b/src/components/form/SubmitButton.tsx
@@ -2,6 +2,8 @@ import { Button, type ButtonProps } from "@mui/material"
 import { Field, type FieldProps } from "formik"
 import type { FC } from "react"
 
+import { type FormValues } from "../../utils/form"
+
 export interface SubmitButtonProps
   extends Omit<ButtonProps, "type" | "onClick"> {}
 
@@ -15,7 +17,7 @@ const SubmitButton: FC<SubmitButtonProps> = ({
   ) {
     touched = touched || {}
     for (const key in values) {
-      const value = values[key]
+      const value: unknown = values[key]
       touched[key] =
         value instanceof Object && value.constructor === Object
           ? getTouched(value, touched)
@@ -31,15 +33,17 @@ const SubmitButton: FC<SubmitButtonProps> = ({
         <Button
           type="button"
           onClick={() => {
-            form.setTouched(getTouched(form.values), true).then(errors => {
-              const hasErrors = Boolean(errors && Object.keys(errors).length)
-              // If has errors, set isSubmitting=true so fields in the form are
-              // aware that a submission was attempted. Else, set
-              // isSubmitting=false as it will be set to true when calling
-              // submitForm().
-              form.setSubmitting(hasErrors)
-              if (!hasErrors) form.submitForm()
-            })
+            void form
+              .setTouched(getTouched(form.values as FormValues), true)
+              .then(errors => {
+                const hasErrors = Boolean(errors && Object.keys(errors).length)
+                // If has errors, set isSubmitting=true so fields in the form are
+                // aware that a submission was attempted. Else, set
+                // isSubmitting=false as it will be set to true when calling
+                // submitForm().
+                form.setSubmitting(hasErrors)
+                if (!hasErrors) void form.submitForm()
+              })
           }}
           {...otherButtonProps}
         >
diff --git a/src/components/form/TextField.tsx b/src/components/form/TextField.tsx
index b43e32cb..08a05b7d 100644
--- a/src/components/form/TextField.tsx
+++ b/src/components/form/TextField.tsx
@@ -1,12 +1,12 @@
+import { type FC, useEffect, useState } from "react"
+import { Field, type FieldConfig, type FieldProps } from "formik"
 import {
   TextField as MuiTextField,
   type TextFieldProps as MuiTextFieldProps,
 } from "@mui/material"
-import { Field, type FieldConfig, type FieldProps } from "formik"
-import { type FC, useState, useEffect } from "react"
 import { type StringSchema, type ValidateOptions, array as YupArray } from "yup"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export type TextFieldProps = Omit<
@@ -79,7 +79,7 @@ const TextField: FC<TextFieldProps> = ({
             return (
               new Set(
                 uniqueCaseInsensitive
-                  ? values.map(value => (value as string).toLowerCase())
+                  ? values.map(value => value.toLowerCase())
                   : values,
               ).size === values.length
             )
@@ -104,18 +104,24 @@ const TextField: FC<TextFieldProps> = ({
     validate: schemaToFieldValidator(buildSchema(), validateOptions),
   }
 
-  const _Field: FC<FieldProps> = ({ form }) => {
-    const initialValue = getNestedProperty(form.initialValues, dotPath)
-    const value = getNestedProperty(form.values, dotPath)
-    const error = getNestedProperty(form.errors, dotPath)
-    const touched = getNestedProperty(form.touched, dotPath)
+  const FieldInternal: FC<FieldProps> = ({ form }) => {
+    const initialValue = getNestedProperty(
+      form.initialValues as FormValues,
+      dotPath,
+    ) as string
+    const value = getNestedProperty(
+      form.values as FormValues,
+      dotPath,
+    ) as string
+    const error = getNestedProperty(form.errors, dotPath) as string | undefined
+    const touched = getNestedProperty(form.touched, dotPath) as boolean
 
     useEffect(() => {
       setInitialValue(initialValue)
     }, [initialValue])
 
     useEffect(() => {
-      form.setFieldValue(
+      void form.setFieldValue(
         name,
         split && typeof value === "string" ? value.split(split) : value,
         true,
@@ -138,7 +144,7 @@ const TextField: FC<TextFieldProps> = ({
     )
   }
 
-  return <Field {...fieldConfig}>{_Field}</Field>
+  return <Field {...fieldConfig}>{FieldInternal}</Field>
 }
 
 export default TextField
diff --git a/src/components/form/UkCountyField.tsx b/src/components/form/UkCountyField.tsx
index 0ab37ed1..e0aa5f5a 100644
--- a/src/components/form/UkCountyField.tsx
+++ b/src/components/form/UkCountyField.tsx
@@ -1,9 +1,10 @@
-import { type ChipTypeMap } from "@mui/material"
 import { type ElementType, type JSX } from "react"
-import { UK_COUNTIES } from "../../utils/general"
+import { type ChipTypeMap } from "@mui/material"
+
 import AutocompleteField, {
   type AutocompleteFieldProps,
 } from "./AutocompleteField"
+import { UK_COUNTIES } from "../../utils/general"
 
 export interface UkCountyFieldProps<
   Multiple extends boolean | undefined = false,
diff --git a/src/components/form/index.tsx b/src/components/form/index.tsx
index ca5fe472..928f4db8 100644
--- a/src/components/form/index.tsx
+++ b/src/components/form/index.tsx
@@ -1,28 +1,35 @@
-export * from "./ApiAutocompleteField"
-export { default as ApiAutocompleteField } from "./ApiAutocompleteField"
-export * from "./AutocompleteField"
-export { default as AutocompleteField } from "./AutocompleteField"
-export * from "./CheckboxField"
-export { default as CheckboxField } from "./CheckboxField"
-export * from "./CountryField"
-export { default as CountryField } from "./CountryField"
-export * from "./DatePickerField"
-export { default as DatePickerField } from "./DatePickerField"
-export * from "./EmailField"
-export { default as EmailField } from "./EmailField"
-export * from "./FirstNameField"
-export { default as FirstNameField } from "./FirstNameField"
-export * from "./Form"
-export { default as Form } from "./Form"
-export * from "./OtpField"
-export { default as OtpField } from "./OtpField"
-export * from "./PasswordField"
-export { default as PasswordField } from "./PasswordField"
-export * from "./RepeatField"
-export { default as RepeatField } from "./RepeatField"
-export * from "./SubmitButton"
-export { default as SubmitButton } from "./SubmitButton"
-export * from "./TextField"
-export { default as TextField } from "./TextField"
-export * from "./UkCountyField"
-export { default as UkCountyField } from "./UkCountyField"
+export {
+  default as ApiAutocompleteField,
+  type ApiAutocompleteFieldProps,
+} from "./ApiAutocompleteField"
+export {
+  default as AutocompleteField,
+  type AutocompleteFieldProps,
+} from "./AutocompleteField"
+export {
+  default as CheckboxField,
+  type CheckboxFieldProps,
+} from "./CheckboxField"
+export { default as CountryField, type CountryFieldProps } from "./CountryField"
+export {
+  default as DatePickerField,
+  type DatePickerFieldProps,
+} from "./DatePickerField"
+export { default as EmailField, type EmailFieldProps } from "./EmailField"
+export {
+  default as FirstNameField,
+  type FirstNameFieldProps,
+} from "./FirstNameField"
+export { default as Form, type FormProps, type FormErrors } from "./Form"
+export { default as OtpField, type OtpFieldProps } from "./OtpField"
+export {
+  default as PasswordField,
+  type PasswordFieldProps,
+} from "./PasswordField"
+export { default as RepeatField, type RepeatFieldProps } from "./RepeatField"
+export { default as SubmitButton, type SubmitButtonProps } from "./SubmitButton"
+export { default as TextField, type TextFieldProps } from "./TextField"
+export {
+  default as UkCountyField,
+  type UkCountyFieldProps,
+} from "./UkCountyField"
diff --git a/src/components/page/Banner.tsx b/src/components/page/Banner.tsx
index 89dcbf9b..4d9be6c6 100644
--- a/src/components/page/Banner.tsx
+++ b/src/components/page/Banner.tsx
@@ -1,10 +1,10 @@
 import { Stack, Typography } from "@mui/material"
 
+import Image, { type ImageProps } from "../Image"
 import { LinkButton, type LinkButtonProps } from "../router"
 import { primary, secondary, tertiary } from "../../theme/colors"
-import palette from "../../theme/palette"
-import Image, { type ImageProps } from "../Image"
 import Section from "./Section"
+import palette from "../../theme/palette"
 
 export interface BannerProps<
   Button1State extends Record<string, any> = Record<string, any>,
@@ -32,7 +32,7 @@ const Banner = <
   bgcolor = "primary",
 }: BannerProps<Button1State, Button2State>) => {
   // @ts-expect-error guaranteed to be in palette
-  const contrastText = palette[bgcolor].contrastText
+  const contrastText = palette[bgcolor].contrastText as string
 
   return (
     <Section
diff --git a/src/components/page/Notification.tsx b/src/components/page/Notification.tsx
index 25fab793..b5c99dd7 100644
--- a/src/components/page/Notification.tsx
+++ b/src/components/page/Notification.tsx
@@ -3,11 +3,11 @@ import {
   ErrorOutline as ErrorOutlineIcon,
   InfoOutlined as InfoOutlinedIcon,
 } from "@mui/icons-material"
+import { type FC, type ReactNode, useEffect, useState } from "react"
 import { IconButton, Stack, Typography } from "@mui/material"
-import { useEffect, useState, type FC, type ReactNode } from "react"
 
-import palette from "../../theme/palette"
 import Section from "./Section"
+import palette from "../../theme/palette"
 
 export interface NotificationProps {
   open?: boolean
@@ -33,7 +33,7 @@ const Notification: FC<NotificationProps> = ({
   if (!_open) return <></>
 
   // @ts-expect-error guaranteed to be in palette
-  const contrastText = palette[bgcolor].contrastText
+  const contrastText = palette[bgcolor].contrastText as string
 
   return (
     <Section
diff --git a/src/components/page/Page.tsx b/src/components/page/Page.tsx
index ac83780f..86c26f54 100644
--- a/src/components/page/Page.tsx
+++ b/src/components/page/Page.tsx
@@ -1,14 +1,14 @@
-import { Children, useEffect, type JSX } from "react"
-import { useLocation, type Location } from "react-router-dom"
+import { Children, type JSX, useEffect } from "react"
+import { type Location, useLocation } from "react-router-dom"
 
+import Notification, { type NotificationProps } from "./Notification"
 import {
-  useSession,
   type SessionMetadata,
   type UseSessionChildren,
   type UseSessionChildrenFunction,
   type UseSessionOptions,
+  useSession,
 } from "../../hooks/auth"
-import Notification, { type NotificationProps } from "./Notification"
 
 export type PageState = {
   notifications: Array<{
@@ -54,7 +54,7 @@ const Page = <
           const childrenArray = Children.toArray(children)
 
           notifications.forEach((notification, index) => {
-            childrenArray.splice(
+            void childrenArray.splice(
               notification.index ?? index,
               0,
               <Notification {...notification.props} />,
diff --git a/src/components/page/Section.tsx b/src/components/page/Section.tsx
index 238ea970..eafcbcc0 100644
--- a/src/components/page/Section.tsx
+++ b/src/components/page/Section.tsx
@@ -1,7 +1,7 @@
 import {
   Box,
-  Container,
   type BoxProps,
+  Container,
   type ContainerProps,
 } from "@mui/material"
 import type { FC } from "react"
diff --git a/src/components/page/TabBar.tsx b/src/components/page/TabBar.tsx
index 2a1b9495..d418c513 100644
--- a/src/components/page/TabBar.tsx
+++ b/src/components/page/TabBar.tsx
@@ -2,20 +2,20 @@ import {
   ChevronLeft as ChevronLeftIcon,
   ChevronRight as ChevronRightIcon,
 } from "@mui/icons-material"
+import { type FC, type ReactNode, useEffect, useState } from "react"
 import {
   IconButton,
   Tab,
+  type TabScrollButtonProps,
   Tabs,
   Typography,
-  type TabScrollButtonProps,
 } from "@mui/material"
-import { useEffect, useState, type FC, type ReactNode } from "react"
-import { generatePath, useNavigate, useParams } from "react-router-dom"
 import { object as YupObject, string as YupString } from "yup"
+import { generatePath, useNavigate, useParams } from "react-router-dom"
 
+import Section from "./Section"
 import { primary } from "../../theme/colors"
 import { tryValidateSync } from "../../utils/schema"
-import Section from "./Section"
 
 export interface TabBarProps {
   header: string
@@ -79,7 +79,7 @@ const TabBar: FC<TabBarProps> = ({ header, tabs, originalPath, value = 0 }) => {
       >
         <Tabs
           value={_value}
-          onChange={(_, value) => {
+          onChange={(_, value: number) => {
             navigate(
               generatePath(originalPath, {
                 tab: paths[value],
diff --git a/src/components/router/Link.tsx b/src/components/router/Link.tsx
index 000d4900..8fc7551a 100644
--- a/src/components/router/Link.tsx
+++ b/src/components/router/Link.tsx
@@ -1,6 +1,6 @@
 import { Link as MuiLink, type LinkProps as MuiLinkProps } from "@mui/material"
-import { Link as RouterLink } from "react-router-dom"
 import { type JSX } from "react"
+import { Link as RouterLink } from "react-router-dom"
 
 import { type LinkProps as RouterLinkProps } from "../../utils/router"
 
@@ -16,7 +16,7 @@ const Link: {
     props: LinkProps<"to", State>,
   ): JSX.Element
 } = (props: LinkProps<"delta"> | LinkProps<"to">) => {
-  // @ts-expect-error
+  // @ts-expect-error props are assignable
   return <MuiLink component={RouterLink} {...props} />
 }
 
diff --git a/src/components/router/LinkButton.tsx b/src/components/router/LinkButton.tsx
index 9949db22..c03c9bfc 100644
--- a/src/components/router/LinkButton.tsx
+++ b/src/components/router/LinkButton.tsx
@@ -1,6 +1,6 @@
 import { Button, type ButtonProps } from "@mui/material"
-import { Link } from "react-router-dom"
 import { type JSX } from "react"
+import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"
 
diff --git a/src/components/router/LinkIconButton.tsx b/src/components/router/LinkIconButton.tsx
index 696bd09e..b4330f00 100644
--- a/src/components/router/LinkIconButton.tsx
+++ b/src/components/router/LinkIconButton.tsx
@@ -1,6 +1,6 @@
 import { IconButton, type IconButtonProps } from "@mui/material"
-import { Link } from "react-router-dom"
 import { type JSX } from "react"
+import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"
 
diff --git a/src/components/router/LinkListItem.tsx b/src/components/router/LinkListItem.tsx
index e68c560c..5e403835 100644
--- a/src/components/router/LinkListItem.tsx
+++ b/src/components/router/LinkListItem.tsx
@@ -1,6 +1,6 @@
 import { ListItem, type ListItemProps } from "@mui/material"
-import { Link } from "react-router-dom"
 import { type JSX } from "react"
+import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"
 
diff --git a/src/components/router/LinkTab.tsx b/src/components/router/LinkTab.tsx
index 81cdef3a..373515cd 100644
--- a/src/components/router/LinkTab.tsx
+++ b/src/components/router/LinkTab.tsx
@@ -1,6 +1,6 @@
 import { Tab, type TabProps } from "@mui/material"
-import { Link } from "react-router-dom"
 import { type JSX } from "react"
+import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"
 
diff --git a/src/components/router/Navigate.tsx b/src/components/router/Navigate.tsx
index 440b20f9..adfbfb9c 100644
--- a/src/components/router/Navigate.tsx
+++ b/src/components/router/Navigate.tsx
@@ -1,7 +1,7 @@
-import { useEffect, type JSX } from "react"
+import { type JSX, useEffect } from "react"
 import { type To } from "react-router-dom"
 
-import { useNavigate, type NavigateOptions } from "../../hooks"
+import { type NavigateOptions, useNavigate } from "../../hooks"
 
 export type NavigateProps<
   Override extends "delta" | "to",
diff --git a/src/components/router/index.tsx b/src/components/router/index.tsx
index 3131ff24..bf2be8a9 100644
--- a/src/components/router/index.tsx
+++ b/src/components/router/index.tsx
@@ -1,12 +1,9 @@
-export * from "./Link"
-export { default as Link } from "./Link"
-export * from "./LinkButton"
-export { default as LinkButton } from "./LinkButton"
-export * from "./LinkIconButton"
-export { default as LinkIconButton } from "./LinkIconButton"
-export * from "./LinkListItem"
-export { default as LinkListItem } from "./LinkListItem"
-export * from "./LinkTab"
-export { default as LinkTab } from "./LinkTab"
-export * from "./Navigate"
-export { default as Navigate } from "./Navigate"
+export { default as Link, type LinkProps } from "./Link"
+export { default as LinkButton, type LinkButtonProps } from "./LinkButton"
+export {
+  default as LinkIconButton,
+  type LinkIconButtonProps,
+} from "./LinkIconButton"
+export { default as LinkListItem, type LinkListItemProps } from "./LinkListItem"
+export { default as LinkTab, type LinkTabProps } from "./LinkTab"
+export { default as Navigate, type NavigateProps } from "./Navigate"
diff --git a/src/components/table/CellStack.tsx b/src/components/table/CellStack.tsx
index 95386b13..968bdca9 100644
--- a/src/components/table/CellStack.tsx
+++ b/src/components/table/CellStack.tsx
@@ -1,10 +1,10 @@
-import { type FC } from "react"
 import {
   Stack,
+  type StackProps,
   TableCell,
   type TableCellProps,
-  type StackProps,
 } from "@mui/material"
+import { type FC } from "react"
 
 export interface CellStackProps extends StackProps {
   cellProps?: TableCellProps
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
index 2bc5df74..6cebd2fa 100644
--- a/src/components/table/index.tsx
+++ b/src/components/table/index.tsx
@@ -1,7 +1,5 @@
-export { default as Table } from "./Table"
-export * from "./Table"
-export { default as CellStack } from "./CellStack"
-export * from "./CellStack"
+export { default as Table, type TableProps } from "./Table"
+export { default as CellStack, type CellStackProps } from "./CellStack"
 export {
   TableCell as Cell,
   type TableCellProps as CellProps,
diff --git a/src/features/InactiveDialog.tsx b/src/features/InactiveDialog.tsx
index 99907b8c..c7f19f7e 100644
--- a/src/features/InactiveDialog.tsx
+++ b/src/features/InactiveDialog.tsx
@@ -1,5 +1,5 @@
-import type React from "react"
 import { Button, Dialog, Typography } from "@mui/material"
+import { type FC } from "react"
 
 import { Countdown } from "../components"
 
@@ -8,7 +8,7 @@ export interface InactiveDialogProps {
   onClose: () => void
 }
 
-const InactiveDialog: React.FC<InactiveDialogProps> = ({ open, onClose }) => {
+const InactiveDialog: FC<InactiveDialogProps> = ({ open, onClose }) => {
   return (
     <Dialog open={open} onClose={onClose}>
       <Typography variant="h5" textAlign="center">
diff --git a/src/features/ScreenTimeDialog.tsx b/src/features/ScreenTimeDialog.tsx
index f1eef85e..091e9096 100644
--- a/src/features/ScreenTimeDialog.tsx
+++ b/src/features/ScreenTimeDialog.tsx
@@ -1,18 +1,15 @@
-import type React from "react"
 import { Button, Dialog, Typography } from "@mui/material"
+import { type FC } from "react"
 
-import { Image } from "../components"
 import BrainImage from "../images/svg/brain.svg"
+import { Image } from "../components"
 
 export interface ScreenTimeDialogProps {
   open: boolean
   onClose: () => void
 }
 
-const ScreenTimeDialog: React.FC<ScreenTimeDialogProps> = ({
-  open,
-  onClose,
-}) => {
+const ScreenTimeDialog: FC<ScreenTimeDialogProps> = ({ open, onClose }) => {
   return (
     <Dialog open={open} onClose={onClose} maxWidth="sm">
       <Image src={BrainImage} alt="brain" maxWidth={100} marginY={3} />
diff --git a/src/hooks/api.tsx b/src/hooks/api.tsx
index 1c53664f..0376c944 100644
--- a/src/hooks/api.tsx
+++ b/src/hooks/api.tsx
@@ -1,4 +1,4 @@
-import { useState, type Dispatch, type SetStateAction } from "react"
+import { type Dispatch, type SetStateAction, useState } from "react"
 
 export type Pagination = { page: number; limit: number; offset: number }
 export type SetPagination = Dispatch<
@@ -22,10 +22,12 @@ export function usePagination(
 
   const setPagination: SetPagination = value => {
     _setPagination(({ page: previousPage, limit: previousLimit }) => {
-      let { page, limit } =
+      const pagination =
         typeof value === "function"
           ? value({ page: previousPage, limit: previousLimit })
           : value
+      let page = pagination.page
+      const limit = pagination.limit
 
       if (limit !== previousLimit) page = 0
 
diff --git a/src/hooks/auth.tsx b/src/hooks/auth.tsx
index 2e3b8439..d2640019 100644
--- a/src/hooks/auth.tsx
+++ b/src/hooks/auth.tsx
@@ -1,23 +1,24 @@
 import * as yup from "yup"
+import { type ReactNode, useCallback, useEffect, useState } from "react"
 import Cookies from "js-cookie"
-import { useEffect, useState, useCallback, type ReactNode } from "react"
-import { createSearchParams } from "react-router-dom"
 import type { TypedUseMutation } from "@reduxjs/toolkit/query/react"
+import { createSearchParams } from "react-router-dom"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useSelector } from "react-redux"
 
 import { type AuthFactor, type User } from "../api"
-import { generateSecureRandomString } from "../utils/general"
 import {
-  makeOAuth2StorageKey,
-  generateOAuth2CodeChallenge,
-  type OAuth2CodeChallengeLengths,
   type OAuth2CodeChallenge,
-  type OAuth2RequestCodeUrlSearchParams,
+  type OAuth2CodeChallengeLengths,
   type OAuth2ReceiveCodeUrlSearchParams,
+  type OAuth2RequestCodeUrlSearchParams,
+  generateOAuth2CodeChallenge,
+  makeOAuth2StorageKey,
 } from "../utils/auth"
+import { useLocation, useNavigate, useSearchParams } from "./router"
 import { type ExchangeOAuth2CodeArg } from "../api/endpoints/session"
-import { useSearchParams, useLocation, useNavigate } from "./router"
 import { SESSION_METADATA_COOKIE_NAME } from "../settings"
+import { generateSecureRandomString } from "../utils/general"
 import { selectIsLoggedIn } from "../slices/session"
 
 // -----------------------------------------------------------------------------
@@ -232,7 +233,7 @@ interface UseOAuth2KwArgs<SessionMetadata>
 export type OAuth2 = [string, OAuth2RequestCodeUrlSearchParams] | []
 
 // https://datatracker.ietf.org/doc/html/rfc7636
-function _useOAuth2<SessionMetadata>({
+function useOAuth2Internal<SessionMetadata>({
   provider,
   authUri,
   clientId,
@@ -389,7 +390,8 @@ export const useOAuth2: {
     | UseOAuth2KwArgs<_SessionMetadata>
     | BaseUseOAuth2KwArgs<SessionMetadata>,
 ): OAuth2 => {
-  return "useSessionMetadata" in kwargs
-    ? _useOAuth2(kwargs)
-    : _useOAuth2({ ...kwargs, useSessionMetadata })
+  return useOAuth2Internal(
+    // @ts-expect-error value is assignable
+    "useSessionMetadata" in kwargs ? kwargs : { ...kwargs, useSessionMetadata },
+  )
 }
diff --git a/src/hooks/general.tsx b/src/hooks/general.tsx
index 2f75a791..987aad47 100644
--- a/src/hooks/general.tsx
+++ b/src/hooks/general.tsx
@@ -1,9 +1,9 @@
 import {
-  useEffect,
-  useState,
   type DependencyList,
   type Dispatch,
   type SetStateAction,
+  useEffect,
+  useState,
 } from "react"
 
 export function useExternalScript<EventType extends keyof HTMLElementEventMap>({
@@ -27,7 +27,7 @@ export function useExternalScript<EventType extends keyof HTMLElementEventMap>({
     const script = document.createElement("script")
 
     Object.entries(props).forEach(([key, value]) => {
-      // @ts-expect-error
+      // @ts-expect-error value is assignable
       script[key] = value
     })
 
diff --git a/src/hooks/router.tsx b/src/hooks/router.tsx
index f6fc3597..08f37cd4 100644
--- a/src/hooks/router.tsx
+++ b/src/hooks/router.tsx
@@ -1,25 +1,25 @@
-import { useEffect, type ReactNode } from "react"
 import {
+  type Location,
+  type Params,
+  type To,
+  type NavigateOptions as _NavigateOptions,
   useLocation as _useLocation,
   useNavigate as _useNavigate,
   useParams as _useParams,
   useSearchParams as _useSearchParams,
-  type Location,
-  type NavigateOptions as _NavigateOptions,
-  type Params,
-  type To,
 } from "react-router-dom"
-import { object as objectSchema, type ObjectShape } from "yup"
+import { type ObjectShape, object as objectSchema } from "yup"
+import { type ReactNode, useEffect } from "react"
 
-import { type PageState } from "../components/page"
-import { type ReadOnly } from "../utils/router"
 import {
-  tryValidateSync,
   type ObjectSchemaFromShape,
   type TryValidateSyncOnErrorRT,
   type TryValidateSyncOptions,
   type TryValidateSyncRT,
+  tryValidateSync,
 } from "../utils/schema"
+import { type PageState } from "../components/page"
+import { type ReadOnly } from "../utils/router"
 
 export type NavigateOptions<
   State extends Record<string, any> = Record<string, any>,
diff --git a/src/middlewares/session.ts b/src/middlewares/session.ts
index a86407a2..ad69d2ec 100644
--- a/src/middlewares/session.ts
+++ b/src/middlewares/session.ts
@@ -2,15 +2,20 @@ import { type Middleware, isAction } from "@reduxjs/toolkit"
 
 import { logout } from "../utils/auth"
 
-export const logoutMiddleware: Middleware = _ => next => action => {
-  const response = next(action)
+export const logoutMiddleware: Middleware =
+  (
+    _, // eslint-disable-line @typescript-eslint/no-unused-vars
+  ) =>
+  next =>
+  action => {
+    const response = next(action)
 
-  // The backend should delete these cookie upon calling the logout endpoint.
-  // However, as a precaution, we also delete the session cookies in case the
-  // backend fails to delete the cookies.
-  if (isAction(action) && action.type === "session/logout") {
-    logout()
-  }
+    // The backend should delete these cookie upon calling the logout endpoint.
+    // However, as a precaution, we also delete the session cookies in case the
+    // backend fails to delete the cookies.
+    if (isAction(action) && action.type === "session/logout") {
+      logout()
+    }
 
-  return response
-}
+    return response
+  }
diff --git a/src/setupTests.ts b/src/setupTests.ts
index b9e76229..2c0f4a94 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -1 +1,2 @@
+// TODO: investigate if this can be moved to the workspace
 import "@testing-library/jest-dom/vitest"
diff --git a/src/theme/ThemedBox.tsx b/src/theme/ThemedBox.tsx
index a04ec9bb..0ead3251 100644
--- a/src/theme/ThemedBox.tsx
+++ b/src/theme/ThemedBox.tsx
@@ -1,27 +1,27 @@
-import {
-  Circle as CircleIcon,
-  Hexagon as HexagonIcon,
-} from "@mui/icons-material"
 import {
   Box,
-  ThemeProvider,
-  buttonClasses,
-  createTheme,
-  responsiveFontSizes,
   type BoxProps,
   type CSSObject,
   type PaletteColor,
   type SxProps,
   type ThemeOptions,
+  ThemeProvider,
+  buttonClasses,
+  createTheme,
+  responsiveFontSizes,
 } from "@mui/material"
+import {
+  Circle as CircleIcon,
+  Hexagon as HexagonIcon,
+} from "@mui/icons-material"
 import { type CommonProps } from "@mui/material/OverridableComponent"
 import type React from "react"
 
-import { themeOptions } from "."
 import { getStyleOverrides, includesClassNames } from "../utils/theme"
 import { primary, secondary, tertiary } from "./colors"
 import type Components from "./components/_components"
 import palette from "./palette"
+import { themeOptions } from "."
 
 export interface ThemedBoxProps extends BoxProps {
   options?: ThemeOptions
diff --git a/src/theme/components/MuiButton.ts b/src/theme/components/MuiButton.ts
index f1cc0e65..374bb8ad 100644
--- a/src/theme/components/MuiButton.ts
+++ b/src/theme/components/MuiButton.ts
@@ -1,8 +1,8 @@
 import { buttonClasses } from "@mui/material"
 
+import type Components from "./_components"
 import { includesClassNames } from "../../utils/theme"
 import typography from "../typography"
-import type Components from "./_components"
 
 const MuiButton: Components["MuiButton"] = {
   defaultProps: {
diff --git a/src/theme/components/MuiCardActions.tsx b/src/theme/components/MuiCardActions.tsx
index 55f829db..be3d6f28 100644
--- a/src/theme/components/MuiCardActions.tsx
+++ b/src/theme/components/MuiCardActions.tsx
@@ -1,5 +1,5 @@
-import spacing from "../spacing"
 import type Components from "./_components"
+import spacing from "../spacing"
 
 const MuiCardActions: Components["MuiCardActions"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiContainer.ts b/src/theme/components/MuiContainer.ts
index 02248258..02f6770c 100644
--- a/src/theme/components/MuiContainer.ts
+++ b/src/theme/components/MuiContainer.ts
@@ -1,6 +1,6 @@
-import spacing from "../spacing"
 import type Components from "./_components"
 import { getFlexStyleOverrides } from "./_components"
+import spacing from "../spacing"
 
 const MuiContainer: Components["MuiContainer"] = {
   defaultProps: {
diff --git a/src/theme/components/MuiFormControlLabel.ts b/src/theme/components/MuiFormControlLabel.ts
index bd6fe2cb..4d3388a0 100644
--- a/src/theme/components/MuiFormControlLabel.ts
+++ b/src/theme/components/MuiFormControlLabel.ts
@@ -1,7 +1,7 @@
 import { typographyClasses } from "@mui/material"
 
-import { form } from "../typography"
 import type Components from "./_components"
+import { form } from "../typography"
 
 const MuiFormControlLabel: Components["MuiFormControlLabel"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiFormHelperText.ts b/src/theme/components/MuiFormHelperText.ts
index fe2921e7..d546a0f5 100644
--- a/src/theme/components/MuiFormHelperText.ts
+++ b/src/theme/components/MuiFormHelperText.ts
@@ -1,5 +1,5 @@
-import { form } from "../typography"
 import type Components from "./_components"
+import { form } from "../typography"
 
 const MuiFormHelperText: Components["MuiFormHelperText"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiInputBase.ts b/src/theme/components/MuiInputBase.ts
index 43555339..c27c466c 100644
--- a/src/theme/components/MuiInputBase.ts
+++ b/src/theme/components/MuiInputBase.ts
@@ -1,5 +1,5 @@
-import typography from "../typography"
 import type Components from "./_components"
+import typography from "../typography"
 
 const MuiInputBase: Components["MuiInputBase"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiLink.ts b/src/theme/components/MuiLink.ts
index c0b2f205..a1b87cdd 100644
--- a/src/theme/components/MuiLink.ts
+++ b/src/theme/components/MuiLink.ts
@@ -1,6 +1,6 @@
+import type Components from "./_components"
 import { includesClassNames } from "../../utils/theme"
 import typography from "../typography"
-import type Components from "./_components"
 
 const MuiLink: Components["MuiLink"] = {
   defaultProps: {
diff --git a/src/theme/components/MuiListItemText.ts b/src/theme/components/MuiListItemText.ts
index 533a9607..9ae37030 100644
--- a/src/theme/components/MuiListItemText.ts
+++ b/src/theme/components/MuiListItemText.ts
@@ -1,7 +1,7 @@
 import { listItemTextClasses } from "@mui/material"
 
-import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
+import { includesClassNames } from "../../utils/theme"
 
 const MuiListItemText: Components["MuiListItemText"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiMenuItem.ts b/src/theme/components/MuiMenuItem.ts
index 9477069a..c9607cc8 100644
--- a/src/theme/components/MuiMenuItem.ts
+++ b/src/theme/components/MuiMenuItem.ts
@@ -1,5 +1,5 @@
-import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
+import { includesClassNames } from "../../utils/theme"
 
 const MuiMenuItem: Components["MuiMenuItem"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiSelect.ts b/src/theme/components/MuiSelect.ts
index 2f738a57..2a3d4a7f 100644
--- a/src/theme/components/MuiSelect.ts
+++ b/src/theme/components/MuiSelect.ts
@@ -1,11 +1,11 @@
-import { type StyleOverridesWithRoot } from "./_components"
 import type Components from "./_components"
+import { type StyleOverridesWithRoot } from "./_components"
 
 const MuiSelect: Components["MuiSelect"] = {
   defaultProps: {
     color: "black",
   },
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+
   styleOverrides: {
     root: {
       borderRadius: "0px",
diff --git a/src/theme/components/MuiTable.ts b/src/theme/components/MuiTable.ts
index c17d524b..f0f5b94a 100644
--- a/src/theme/components/MuiTable.ts
+++ b/src/theme/components/MuiTable.ts
@@ -1,8 +1,8 @@
 import { tableCellClasses } from "@mui/material"
 
+import type Components from "./_components"
 import { includesClassNames } from "../../utils/theme"
 import typography from "../typography"
-import type Components from "./_components"
 
 const MuiTable: Components["MuiTable"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiTableBody.ts b/src/theme/components/MuiTableBody.ts
index 381f8652..d2ea159c 100644
--- a/src/theme/components/MuiTableBody.ts
+++ b/src/theme/components/MuiTableBody.ts
@@ -1,5 +1,5 @@
-import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
+import { includesClassNames } from "../../utils/theme"
 
 const MuiTableBody: Components["MuiTableBody"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiTableHead.ts b/src/theme/components/MuiTableHead.ts
index 038652a6..6e9629f1 100644
--- a/src/theme/components/MuiTableHead.ts
+++ b/src/theme/components/MuiTableHead.ts
@@ -1,7 +1,7 @@
-import { typographyClasses, tableCellClasses } from "@mui/material"
+import { tableCellClasses, typographyClasses } from "@mui/material"
 
-import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
+import { includesClassNames } from "../../utils/theme"
 
 const MuiTableHead: Components["MuiTableHead"] = {
   styleOverrides: {
diff --git a/src/theme/components/MuiTextField.ts b/src/theme/components/MuiTextField.ts
index f1acfd12..6a62d94b 100644
--- a/src/theme/components/MuiTextField.ts
+++ b/src/theme/components/MuiTextField.ts
@@ -8,10 +8,10 @@ import {
   svgIconClasses,
 } from "@mui/material"
 
+import type Components from "./_components"
 import { includesClassNames } from "../../utils/theme"
 import palette from "../palette"
 import typography from "../typography"
-import type Components from "./_components"
 
 const MuiTextField: Components["MuiTextField"] = {
   defaultProps: {
@@ -31,7 +31,7 @@ const MuiTextField: Components["MuiTextField"] = {
               },
               border: "0px !important",
               borderRadius: "0px !important",
-              // @ts-expect-error
+              // @ts-expect-error value is assignable
               backgroundColor: `${palette.info!.main} !important`,
             }
           : {
@@ -41,7 +41,7 @@ const MuiTextField: Components["MuiTextField"] = {
             }),
       },
       [`& > .${inputBaseClasses.root}.${inputBaseClasses.error}`]: {
-        // @ts-expect-error
+        // @ts-expect-error value is assignable
         border: `1px solid ${palette.error!.main} !important`,
       },
       [`& .${outlinedInputClasses.root}.${inputClasses.focused} > fieldset`]: {
diff --git a/src/theme/components/_components.ts b/src/theme/components/_components.ts
index 51784abc..872c9777 100644
--- a/src/theme/components/_components.ts
+++ b/src/theme/components/_components.ts
@@ -7,6 +7,7 @@ import {
 } from "@mui/material"
 import { type CommonProps } from "@mui/material/OverridableComponent"
 import { type OverridesStyleRules } from "@mui/material/styles/overrides"
+import { type TypographyOptions } from "@mui/material/styles/createTypography"
 
 import {
   getClassNames,
@@ -72,8 +73,9 @@ export function getFontStyleOverrides(props: CommonProps): CSSObject {
   ;["h1", "h2", "h3", "h4", "h5", "h6", "body1", "body2"]
     .filter(className => className in typography)
     .forEach(className => {
-      // @ts-expect-error
-      const typographyClass = typography[className]
+      const typographyClass = typography[
+        className as keyof TypographyOptions
+      ] as CSSObject
 
       if (includesClassNames(classNames, [className])) {
         styleOverrides = { ...styleOverrides, ...typographyClass }
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
index 756ab2c7..aec4674d 100644
--- a/src/theme/palette.ts
+++ b/src/theme/palette.ts
@@ -1,8 +1,8 @@
 import {
-  createTheme,
   type PaletteColor,
-  type PaletteOptions,
   type PaletteColorOptions,
+  type PaletteOptions,
+  createTheme,
 } from "@mui/material"
 
 import { primary, secondary, tertiary } from "./colors"
diff --git a/src/theme/typography.ts b/src/theme/typography.ts
index 8fc41068..0584c06f 100644
--- a/src/theme/typography.ts
+++ b/src/theme/typography.ts
@@ -1,6 +1,6 @@
 import {
-  type TypographyOptions,
   type CSSProperties,
+  type TypographyOptions,
 } from "@mui/material/styles/createTypography"
 
 // Pseudo typography variant for all form text.
diff --git a/src/utils/api.tsx b/src/utils/api.tsx
index 8e110a3d..75e6c05f 100644
--- a/src/utils/api.tsx
+++ b/src/utils/api.tsx
@@ -1,10 +1,10 @@
-import { CircularProgress } from "@mui/material"
 import type {
   FetchBaseQueryError,
+  TypedUseMutationResult,
   TypedUseQueryHookResult,
   TypedUseQueryStateResult,
-  TypedUseMutationResult,
 } from "@reduxjs/toolkit/query/react"
+import { CircularProgress } from "@mui/material"
 import { type ReactNode } from "react"
 
 import { type Optional, type Required, getNestedProperty } from "./general"
@@ -181,6 +181,7 @@ export function buildUrl(
       if (Array.isArray(values)) {
         for (const value of values) searchParams.push([key, String(value)])
       } else {
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
         searchParams.push([key, String(values)])
       }
     }
@@ -244,7 +245,7 @@ export function tagData<Type extends string, M extends Model<any>>(
   }
 
   function getModelId(result: Result<M, any>) {
-    return getNestedProperty(result, id)
+    return getNestedProperty(result, id) as ModelId
   }
 
   return (result, error, arg) => {
@@ -305,7 +306,8 @@ export function handleResultState<QueryArg, ResultType>(
   children: (data: NonNullable<ResultType>) => ReactNode,
   options?: HandleQueryStateOptions,
 ): ReactNode {
-  const { data, isLoading, isSuccess, error } = result
+  const { data, isLoading, isSuccess } = result
+  const error = result.error as string | undefined
 
   const {
     loading: loadingNode = <CircularProgress />,
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 5401b68a..1372da80 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,9 +1,9 @@
 import Cookies from "js-cookie"
 
 import {
+  CSRF_COOKIE_NAME,
   SESSION_COOKIE_NAME,
   SESSION_METADATA_COOKIE_NAME,
-  CSRF_COOKIE_NAME,
 } from "../settings"
 import { generateSecureRandomString } from "./general"
 
diff --git a/src/utils/form.test.ts b/src/utils/form.test.ts
index 7cb54a21..b502a47d 100644
--- a/src/utils/form.test.ts
+++ b/src/utils/form.test.ts
@@ -1,4 +1,4 @@
-import { isDirty, getDirty, getCleanNames } from "./form"
+import { getCleanNames, getDirty, isDirty } from "./form"
 
 const VALUES = {
   name: { first: "Peter", last: "Parker" },
diff --git a/src/utils/form.ts b/src/utils/form.ts
index d6b9d4dc..13f2ddc2 100644
--- a/src/utils/form.ts
+++ b/src/utils/form.ts
@@ -1,8 +1,8 @@
-import type { TypedMutationTrigger } from "@reduxjs/toolkit/query/react"
 import type { FieldValidator, FormikHelpers } from "formik"
-import { ValidationError, type Schema, type ValidateOptions } from "yup"
+import { type Schema, type ValidateOptions, ValidationError } from "yup"
+import type { TypedMutationTrigger } from "@reduxjs/toolkit/query/react"
 
-import { excludeKeyPaths, getNestedProperty, getKeyPaths } from "./general"
+import { excludeKeyPaths, getKeyPaths, getNestedProperty } from "./general"
 
 export type FormValues = Record<string, any>
 
@@ -92,14 +92,14 @@ export function submitForm<
   initialValues: Values,
   options?: SubmitFormOptions<Values, QueryArg, ResultType>,
 ): SubmitFormHandler<Values> {
-  let {
-    exclude = [],
+  const {
     include,
     onlyDirtyValues = false,
     then,
     catch: _catch,
     finally: _finally,
   } = options || {}
+  let { exclude = [] } = options || {}
 
   return (values, helpers) => {
     let arg =
@@ -118,7 +118,7 @@ export function submitForm<
 
     if (include) exclude = exclude.filter(name => !include.includes(name))
 
-    if (exclude.length) arg = excludeKeyPaths(arg, exclude)
+    if (exclude.length) arg = excludeKeyPaths(arg, exclude) as QueryArg
 
     trigger(arg)
       .unwrap()
@@ -171,8 +171,8 @@ export function isDirty<Values extends FormValues>(
   initialValues: Values,
   name: string,
 ): boolean {
-  const value = getNestedProperty(values, name)
-  const initialValue = getNestedProperty(initialValues, name)
+  const value: unknown = getNestedProperty(values, name)
+  const initialValue: unknown = getNestedProperty(initialValues, name)
 
   return value !== initialValue
 }
@@ -183,6 +183,11 @@ export function getCleanNames<Values extends FormValues>(
   names?: string[],
 ): string[] {
   return Object.entries(getDirty(values, initialValues, names))
-    .filter(([_, isDirty]) => !isDirty)
+    .filter(
+      ([
+        _, // eslint-disable-line @typescript-eslint/no-unused-vars
+        isDirty,
+      ]) => !isDirty,
+    )
     .map(([name]) => name)
 }
diff --git a/src/utils/general.test.ts b/src/utils/general.test.ts
index c8cf46c6..93656c53 100644
--- a/src/utils/general.test.ts
+++ b/src/utils/general.test.ts
@@ -1,8 +1,8 @@
 import {
   excludeKeyPaths,
+  getKeyPaths,
   getNestedProperty,
   withKeyPaths,
-  getKeyPaths,
 } from "./general"
 
 // getNestedProperty
@@ -10,19 +10,19 @@ import {
 const PERSON = { father: { father: { name: "John" } } }
 
 test("get a nested property with dot notation", () => {
-  const name = getNestedProperty(PERSON, "father.father.name")
+  const name = getNestedProperty(PERSON, "father.father.name") as string
 
   expect(name).toEqual("John")
 })
 
 test("get a nested property with string array", () => {
-  const name = getNestedProperty(PERSON, ["father", "father", "name"])
+  const name = getNestedProperty(PERSON, ["father", "father", "name"]) as string
 
   expect(name).toEqual("John")
 })
 
 test("get a nested property that doesn't exist", () => {
-  const name = getNestedProperty(PERSON, "mother.mother.name")
+  const name = getNestedProperty(PERSON, "mother.mother.name") as undefined
 
   expect(name).toBeUndefined()
 })
@@ -49,7 +49,7 @@ test("exclude nested keys by their path", () => {
   const obj = excludeKeyPaths({ a: 1, b: { c: 2, d: { e: 3 } } }, [
     "b.c",
     "b.d.e",
-  ])
+  ]) as object
 
   expect(obj).toMatchObject({ a: 1, b: { d: {} } })
 })
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 6177ce62..e207d53e 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -19,14 +19,14 @@ export function wrap(
 ): (...args: any[]) => any {
   return (...args) => {
     if (newFn.before !== undefined) {
-      newFn.before(...args)
+      newFn.before(...(args as unknown[]))
     }
     let value
     if (fn !== undefined) {
-      value = fn(...args)
+      value = fn(...(args as unknown[])) as unknown
     }
     if (newFn.after !== undefined) {
-      newFn.after(...args)
+      newFn.after(...(args as unknown[]))
     }
     return value
   }
@@ -34,30 +34,28 @@ export function wrap(
 
 export function snakeCaseToCamelCase(obj: Record<string, any>): void {
   Object.entries(obj).forEach(([snakeKey, value]) => {
-    if (typeof value === "object") snakeCaseToCamelCase(value)
+    if (typeof value === "object") snakeCaseToCamelCase(value as object)
 
     const camelKey = snakeKey.replace(/_+[a-z]/g, _char =>
       _char[_char.length - 1].toUpperCase(),
     )
 
-    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete obj[snakeKey]
-    obj[camelKey] = value
+    obj[camelKey] = value as unknown
   })
 }
 
 export function camelCaseToSnakeCase(obj: Record<string, any>): void {
   Object.entries(obj).forEach(([camelKey, value]) => {
-    if (typeof value === "object") camelCaseToSnakeCase(value)
+    if (typeof value === "object") camelCaseToSnakeCase(value as object)
 
     const snakeKey = camelKey.replace(
       /[A-Z]/g,
       char => `_${char.toLowerCase()}`,
     )
 
-    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete obj[camelKey]
-    obj[snakeKey] = value
+    obj[snakeKey] = value as unknown
   })
 }
 
@@ -972,7 +970,7 @@ export function withKeyPaths(obj: object, delimiter: string = "."): object {
         const _path = [...path, key]
 
         if (typeof value === "object" && value !== null)
-          value = _withKeyPaths(value, _path)
+          value = _withKeyPaths(value as object, _path)
 
         return [_path.join(delimiter), value]
       }),
@@ -990,7 +988,7 @@ export function getKeyPaths(obj: object, delimiter: string = "."): string[] {
         const keyPath = _path.join(delimiter)
 
         return typeof value === "object" && value !== null
-          ? [keyPath, ..._getKeyPaths(value, _path)]
+          ? [keyPath, ..._getKeyPaths(value as object, _path)]
           : [keyPath]
       })
       .flat()
@@ -1020,7 +1018,7 @@ export function excludeKeyPaths(
           return exclude.includes(_path.join(delimiter)) ? [] : [key, value]
         })
         .filter(entry => entry.length),
-    )
+    ) as object
   }
 
   return exclude.length ? _excludeKeyPaths(obj, []) : obj
diff --git a/src/utils/router.test.ts b/src/utils/router.test.ts
index b5567538..1d349c17 100644
--- a/src/utils/router.test.ts
+++ b/src/utils/router.test.ts
@@ -1,4 +1,4 @@
-import { path as p, type Parameters, type Path } from "./router"
+import { type Parameters, type Path, path as p } from "./router"
 
 const m = <SubMatches extends Record<string, Path>>(
   _: string,
diff --git a/src/utils/router.ts b/src/utils/router.ts
index f920b4f4..1e604a9f 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -1,7 +1,7 @@
 import {
-  generatePath,
-  type LinkProps as _LinkProps,
   type To,
+  type LinkProps as _LinkProps,
+  generatePath,
 } from "react-router-dom"
 
 import { type PageState } from "../components/page/Page"
diff --git a/src/utils/schema.ts b/src/utils/schema.ts
index 74be05f9..d0c650d9 100644
--- a/src/utils/schema.ts
+++ b/src/utils/schema.ts
@@ -1,21 +1,21 @@
 import {
-  ValidationError,
   type AnyObject,
+  type BooleanSchema,
+  type DateSchema,
   type DefaultFromShape,
+  type Flags,
   type InferType,
   type MakePartial,
+  type NumberSchema,
   type ObjectSchema,
   type ObjectShape,
   type Schema,
+  type StringSchema,
   type TypeFromShape,
   type ValidateOptions,
-  type StringSchema,
-  type NumberSchema,
-  type Flags,
-  type BooleanSchema,
-  type DateSchema,
-  string as YupString,
+  ValidationError,
   number as YupNumber,
+  string as YupString,
 } from "yup"
 
 export type _<T> = T extends {}
@@ -137,11 +137,11 @@ export function buildUnicodeCharSet(
   description: string,
   options: BuildCharSetOptions = {},
 ) {
-  let { flags = "u", ...otherOptions } = options
+  let { flags = "u" } = options
 
   if (!flags.includes("u")) flags += "u"
 
-  return buildCharSet(charSet, description, { flags, ...otherOptions })
+  return buildCharSet(charSet, description, { ...options, flags })
 }
 
 export function asciiAlphaString(options?: BuildCharSetOptions) {
@@ -282,9 +282,9 @@ export function tryValidateSync<
   const { onError, ...validateOptions } = options || {}
 
   try {
-    return schema.validateSync(value, validateOptions)
+    return schema.validateSync(value, validateOptions) as unknown
   } catch (error) {
     if (!(error instanceof ValidationError)) throw error
-    else if (onError) return onError(error)
+    else if (onError) return onError(error) as unknown
   }
 }
diff --git a/src/utils/test.tsx b/src/utils/test.tsx
index 4a3474dd..c47c339f 100644
--- a/src/utils/test.tsx
+++ b/src/utils/test.tsx
@@ -1,9 +1,9 @@
 import type { Middleware, Reducer, Store } from "@reduxjs/toolkit"
+import type { PropsWithChildren, ReactElement } from "react"
+import { Provider } from "react-redux"
 import type { RenderOptions } from "@testing-library/react"
 import { render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import type { PropsWithChildren, ReactElement } from "react"
-import { Provider } from "react-redux"
 
 import { makeStore } from "./store"
 
diff --git a/src/utils/theme.tsx b/src/utils/theme.tsx
index 359e14a0..945ebcb5 100644
--- a/src/utils/theme.tsx
+++ b/src/utils/theme.tsx
@@ -1,6 +1,6 @@
-import type React from "react"
 import { Divider, type DividerProps, type ThemeOptions } from "@mui/material"
 import { type CommonProps } from "@mui/material/OverridableComponent"
+import { type ReactElement } from "react"
 
 import _components from "../theme/components"
 
@@ -8,9 +8,9 @@ export function insertDividerBetweenElements({
   elements,
   dividerProps,
 }: {
-  elements: React.ReactElement[]
+  elements: ReactElement[]
   dividerProps?: DividerProps
-}): React.ReactElement[] {
+}): ReactElement[] {
   return elements.map((element, index) => (
     <>
       {element}
@@ -38,11 +38,12 @@ export function getStyleOverrides(
     ) {
       const muiClass = (component.styleOverrides as Record<string, any>)[
         muiClassName
-      ]
+      ] as object
 
       switch (typeof muiClass) {
         case "function":
-          return muiClass({ ownerState })
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          return muiClass({ ownerState }) as object
         case "object":
           return muiClass
       }
@@ -78,5 +79,5 @@ export function matchClassNames(
   return classNames
     .map(className => className.match(pattern))
     .filter(match => match !== null)
-    .map(match => match as RegExpMatchArray)
+    .map(match => match)
 }
diff --git a/src/utils/window.ts b/src/utils/window.ts
index 6ee8a295..df6c5e7e 100644
--- a/src/utils/window.ts
+++ b/src/utils/window.ts
@@ -1,9 +1,11 @@
 export function configureFreshworksWidget(display: "open" | "hide"): void {
   // @ts-expect-error defined in external script
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   window.FreshworksWidget(display)
 }
 
 export function toggleOneTrustInfoDisplay(): void {
   // @ts-expect-error defined in external script
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
   window.Optanon.ToggleInfoDisplay()
 }
diff --git a/vite.config.ts b/vite.config.ts
index e9e06094..ac8c7b17 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,5 @@
-import react from "@vitejs/plugin-react"
 import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
 
 // https://vitejs.dev/config/
 // TODO: https://vite.dev/guide/build.html#library-mode