diff --git a/.eslintrc b/.eslintrc
index 0c9597ce98..8de3693a9e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -29,6 +29,7 @@
         "tsx": "never"
       }
     ],
+    "import/prefer-default-export": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "default-param-last": 0,
@@ -131,7 +132,8 @@
       "rules": {
         "no-use-before-define": "off",
         "import/no-extraneous-dependencies": "off",
-        "no-unused-vars": "off"
+        "no-unused-vars": "off",
+        "react/require-default-props": "off"
       }
     },
     {
diff --git a/.prettierrc b/.prettierrc
index e2da8bb25a..df6b0841b0 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -5,7 +5,6 @@
   "insertPragma": false,
   "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
-  "parser": "babel",
   "printWidth": 80,
   "proseWrap": "never",
   "requirePragma": false,
diff --git a/client/common/Button.test.tsx b/client/common/Button.test.tsx
new file mode 100644
index 0000000000..863f2d89b2
--- /dev/null
+++ b/client/common/Button.test.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../test-utils';
+import Button from './Button';
+
+const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg data-testid="mock-icon" {...props} />
+);
+
+describe('Button', () => {
+  // Tag
+  it('renders as an anchor when href is provided', () => {
+    render(<Button href="https://example.com">Link</Button>);
+    const anchor = screen.getByRole('link');
+    expect(anchor.tagName.toLowerCase()).toBe('a');
+    expect(anchor).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('renders as a React Router <Link> when `to` is provided', () => {
+    render(<Button to="/dashboard">Go</Button>);
+    const link = screen.getByRole('link');
+    expect(link.tagName.toLowerCase()).toBe('a'); // Link renders as <a>
+    expect(link).toHaveAttribute('href', '/dashboard');
+  });
+
+  it('renders as a <button> with a type of "button" by default', () => {
+    render(<Button>Click Me</Button>);
+    const el = screen.getByRole('button');
+    expect(el.tagName.toLowerCase()).toBe('button');
+    expect(el).toHaveAttribute('type', 'button');
+  });
+
+  // Children & Icons
+  it('renders children', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeInTheDocument();
+  });
+
+  it('renders an iconBefore and button text', () => {
+    render(
+      <Button iconBefore={<MockIcon aria-label="iconbefore" />}>
+        This has a before icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconbefore')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'This has a before icon'
+    );
+  });
+
+  it('renders with iconAfter', () => {
+    render(
+      <Button iconAfter={<MockIcon aria-label="iconafter" />}>
+        This has an after icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconafter')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'This has an after icon'
+    );
+  });
+
+  it('renders only the icon if iconOnly', () => {
+    render(
+      <Button iconAfter={<MockIcon aria-label="iconafter" />} iconOnly>
+        This has an after icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconafter')).toBeInTheDocument();
+    expect(screen.getByRole('button')).not.toHaveTextContent(
+      'This has an after icon'
+    );
+  });
+
+  // HTML attributes
+  it('calls onClick handler when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+    fireEvent.click(screen.getByText('Click'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders disabled state', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('uses aria-label when provided', () => {
+    render(<Button aria-label="Upload" iconOnly />);
+    expect(screen.getByLabelText('Upload')).toBeInTheDocument();
+  });
+});
diff --git a/client/common/Button.jsx b/client/common/Button.tsx
similarity index 74%
rename from client/common/Button.jsx
rename to client/common/Button.tsx
index 516536fb2b..cc83ad26d0 100644
--- a/client/common/Button.jsx
+++ b/client/common/Button.tsx
@@ -1,24 +1,94 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-
+import { Link, LinkProps } from 'react-router-dom';
 import { remSize, prop } from '../theme';
 
 const kinds = {
   primary: 'primary',
   secondary: 'secondary'
-};
+} as const;
 
 const displays = {
   block: 'block',
   inline: 'inline'
+} as const;
+
+const buttonTypes = {
+  button: 'button',
+  submit: 'submit'
+} as const;
+
+type Kind = keyof typeof kinds;
+type Display = keyof typeof displays;
+type ButtonType = keyof typeof buttonTypes;
+
+type StyledButtonProps = {
+  kind: Kind;
+  display: Display;
+};
+
+type SharedButtonProps = {
+  /**
+   * The visible part of the button, telling the user what
+   * the action is
+   */
+  children?: React.ReactNode;
+  /**
+      If the button can be activated or not
+    */
+  disabled?: boolean;
+  /**
+   * The display type of the button—inline or block
+   */
+  display?: Display;
+  /**
+   * SVG icon to place after child content
+   */
+  iconAfter?: React.ReactNode;
+  /**
+   * SVG icon to place before child content
+   */
+  iconBefore?: React.ReactNode;
+  /**
+   * If the button content is only an SVG icon
+   */
+  iconOnly?: boolean;
+  /**
+   * The kind of button - determines how it appears visually
+   */
+  kind?: Kind;
+  /**
+   * Specifying an href will use an <a> to link to the URL
+   */
+  href?: string | null;
+  /**
+   * An ARIA Label used for accessibility
+   */
+  'aria-label'?: string | null;
+  /**
+   * Specifying a to URL will use a react-router Link
+   */
+  to?: string | null;
+  /**
+   * If using a button, then type is defines the type of button
+   */
+  type?: ButtonType;
+  /**
+   * Allows for IconButton to pass `focusable="false"` as a prop for SVGs.
+   * See @types/react > interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T>
+   */
+  focusable?: boolean | 'true' | 'false';
 };
 
+export type ButtonProps = SharedButtonProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  Partial<LinkProps>;
+
 // The '&&&' will increase the specificity of the
 // component's CSS so that it overrides the more
 // general global styles
-const StyledButton = styled.button`
+const StyledButton = styled.button<StyledButtonProps>`
   &&& {
     font-weight: bold;
     display: ${({ display }) =>
@@ -112,31 +182,29 @@ const StyledInlineButton = styled.button`
  * A Button performs an primary action
  */
 const Button = ({
-  children,
-  display,
+  children = null,
+  display = displays.block,
   href,
-  kind,
-  iconBefore,
-  iconAfter,
-  iconOnly,
+  kind = kinds.primary,
+  iconBefore = null,
+  iconAfter = null,
+  iconOnly = false,
   'aria-label': ariaLabel,
   to,
-  type,
+  type = buttonTypes.button,
   ...props
-}) => {
+}: ButtonProps) => {
   const hasChildren = React.Children.count(children) > 0;
   const content = (
     <>
       {iconBefore}
-      {hasChildren && <span>{children}</span>}
+      {hasChildren && !iconOnly && <span>{children}</span>}
       {iconAfter}
     </>
   );
-  let StyledComponent = StyledButton;
-
-  if (iconOnly) {
-    StyledComponent = StyledInlineButton;
-  }
+  const StyledComponent: React.ElementType = iconOnly
+    ? StyledInlineButton
+    : StyledButton;
 
   if (href) {
     return (
@@ -181,69 +249,7 @@ const Button = ({
   );
 };
 
-Button.defaultProps = {
-  children: null,
-  disabled: false,
-  display: displays.block,
-  iconAfter: null,
-  iconBefore: null,
-  iconOnly: false,
-  kind: kinds.primary,
-  href: null,
-  'aria-label': null,
-  to: null,
-  type: 'button'
-};
-
 Button.kinds = kinds;
 Button.displays = displays;
 
-Button.propTypes = {
-  /**
-   * The visible part of the button, telling the user what
-   * the action is
-   */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  /**
-    If the button can be activated or not
-  */
-  disabled: PropTypes.bool,
-  /**
-   * The display type of the button—inline or block
-   */
-  display: PropTypes.oneOf(Object.values(displays)),
-  /**
-   * SVG icon to place after child content
-   */
-  iconAfter: PropTypes.element,
-  /**
-   * SVG icon to place before child content
-   */
-  iconBefore: PropTypes.element,
-  /**
-   * If the button content is only an SVG icon
-   */
-  iconOnly: PropTypes.bool,
-  /**
-   * The kind of button - determines how it appears visually
-   */
-  kind: PropTypes.oneOf(Object.values(kinds)),
-  /**
-   * Specifying an href will use an <a> to link to the URL
-   */
-  href: PropTypes.string,
-  /**
-   * An ARIA Label used for accessibility
-   */
-  'aria-label': PropTypes.string,
-  /**
-   * Specifying a to URL will use a react-router Link
-   */
-  to: PropTypes.string,
-  /**
-   * If using a button, then type is defines the type of button
-   */
-  type: PropTypes.oneOf(['button', 'submit'])
-};
-
 export default Button;
diff --git a/client/common/ButtonOrLink.test.jsx b/client/common/ButtonOrLink.test.tsx
similarity index 100%
rename from client/common/ButtonOrLink.test.jsx
rename to client/common/ButtonOrLink.test.tsx
diff --git a/client/common/ButtonOrLink.jsx b/client/common/ButtonOrLink.tsx
similarity index 55%
rename from client/common/ButtonOrLink.jsx
rename to client/common/ButtonOrLink.tsx
index f759aa8ffb..558a1c41a3 100644
--- a/client/common/ButtonOrLink.jsx
+++ b/client/common/ButtonOrLink.tsx
@@ -1,14 +1,47 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
 
 /**
- * Helper for switching between <button>, <a>, and <Link>
+ * Accepts all the props of an HTML <a> or <button> tag.
  */
+export type ButtonOrLinkProps = {
+  /**
+   * Can be internal or external ('http'- or 'https'-).
+   */
+  href?: string;
+  isDisabled?: boolean;
+  /**
+   * Content of the button/link.
+   * Can be either a string or a complex element.
+   */
+  children: React.ReactNode;
+  onClick?: (
+    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
+};
+
+export type Ref = HTMLAnchorElement | HTMLButtonElement;
 
+/**
+ * Helper for switching between `<button>`, `<a>`, and `<Link>`
+ * If providing an `href`, will render as a link instead of a button.
+ *   - Internal links will use react-router.
+ *   - External links should start with 'http' or 'https' and will open in a new window.
+ */
 const ButtonOrLink = React.forwardRef(
-  ({ href, children, isDisabled, onClick, ...props }, ref) => {
-    const handleClick = (e) => {
+  (
+    {
+      href,
+      children,
+      isDisabled = false,
+      onClick,
+      ...props
+    }: ButtonOrLinkProps,
+    ref: React.Ref<Ref>
+  ) => {
+    const handleClick = (
+      e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+    ) => {
       if (isDisabled) {
         e.preventDefault();
         e.stopPropagation();
@@ -23,7 +56,7 @@ const ButtonOrLink = React.forwardRef(
       if (href.startsWith('http')) {
         return (
           <a
-            ref={ref}
+            ref={ref as React.Ref<HTMLAnchorElement>}
             href={href}
             target="_blank"
             rel="noopener noreferrer"
@@ -37,7 +70,7 @@ const ButtonOrLink = React.forwardRef(
       }
       return (
         <Link
-          ref={ref}
+          ref={ref as React.Ref<HTMLAnchorElement>}
           to={href}
           aria-disabled={isDisabled}
           {...props}
@@ -49,7 +82,7 @@ const ButtonOrLink = React.forwardRef(
     }
     return (
       <button
-        ref={ref}
+        ref={ref as React.Ref<HTMLButtonElement>}
         aria-disabled={isDisabled}
         {...props}
         onClick={handleClick}
@@ -60,30 +93,4 @@ const ButtonOrLink = React.forwardRef(
   }
 );
 
-/**
- * Accepts all the props of an HTML <a> or <button> tag.
- */
-ButtonOrLink.propTypes = {
-  /**
-   * If providing an href, will render as a link instead of a button.
-   * Can be internal or external.
-   * Internal links will use react-router.
-   * External links should start with 'http' or 'https' and will open in a new window.
-   */
-  href: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  /**
-   * Content of the button/link.
-   * Can be either a string or a complex element.
-   */
-  children: PropTypes.node.isRequired,
-  onClick: PropTypes.func
-};
-
-ButtonOrLink.defaultProps = {
-  href: null,
-  isDisabled: false,
-  onClick: null
-};
-
 export default ButtonOrLink;
diff --git a/client/common/IconButton.jsx b/client/common/IconButton.jsx
deleted file mode 100644
index 8cf732f91d..0000000000
--- a/client/common/IconButton.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import Button from './Button';
-import { remSize } from '../theme';
-
-const ButtonWrapper = styled(Button)`
-  width: ${remSize(48)};
-  > svg {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-const IconButton = (props) => {
-  const { icon, ...otherProps } = props;
-  const Icon = icon;
-
-  return (
-    <ButtonWrapper
-      iconBefore={icon && <Icon />}
-      iconOnly
-      display={Button.displays.inline}
-      focusable="false"
-      {...otherProps}
-    />
-  );
-};
-
-IconButton.propTypes = {
-  icon: PropTypes.func
-};
-
-IconButton.defaultProps = {
-  icon: null
-};
-
-export default IconButton;
diff --git a/client/common/IconButton.test.tsx b/client/common/IconButton.test.tsx
new file mode 100644
index 0000000000..811a795184
--- /dev/null
+++ b/client/common/IconButton.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '../test-utils';
+import IconButton from './IconButton';
+
+const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg data-testid="mock-icon" {...props} />
+);
+
+describe('IconButton', () => {
+  test('renders with an icon', () => {
+    render(<IconButton icon={MockIcon} aria-label="test button" />);
+    expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'test button' })
+    ).toBeInTheDocument();
+  });
+
+  test('renders without an icon', () => {
+    render(<IconButton />);
+    expect(screen.queryByTestId('mock-icon')).not.toBeInTheDocument();
+  });
+
+  test('passes other props to the button', () => {
+    render(<IconButton icon={MockIcon} id="my-button" />);
+    expect(screen.getByRole('button')).toHaveAttribute('id', 'my-button');
+  });
+});
diff --git a/client/common/IconButton.tsx b/client/common/IconButton.tsx
new file mode 100644
index 0000000000..9739bb3fcd
--- /dev/null
+++ b/client/common/IconButton.tsx
@@ -0,0 +1,31 @@
+import React, { ComponentType } from 'react';
+import styled from 'styled-components';
+import Button, { ButtonProps } from './Button';
+import { remSize } from '../theme';
+
+const ButtonWrapper = styled(Button)`
+  width: ${remSize(48)};
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export type IconButtonProps = Omit<
+  ButtonProps,
+  'iconBefore' | 'display' | 'focusable'
+> & {
+  icon?: ComponentType<{ 'aria-label'?: string }> | null;
+};
+
+const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
+  <ButtonWrapper
+    iconBefore={Icon ? <Icon /> : undefined}
+    iconOnly
+    display={Button.displays.inline}
+    focusable="false"
+    {...otherProps}
+  />
+);
+
+export default IconButton;
diff --git a/client/common/RouterTab.test.tsx b/client/common/RouterTab.test.tsx
new file mode 100644
index 0000000000..95f451ffef
--- /dev/null
+++ b/client/common/RouterTab.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor, history } from '../test-utils';
+import Tab from './RouterTab';
+
+const mockPath = '/projects';
+const mockLinkText = 'Projects';
+
+describe('Tab', () => {
+  function mountComponent() {
+    return render(<Tab to={mockPath}>{mockLinkText}</Tab>);
+  }
+
+  it('renders a react-router NavLink with correct text and path', async () => {
+    mountComponent();
+
+    const linkElement = screen.getByText(mockLinkText);
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement.getAttribute('href')).toBe(mockPath);
+
+    fireEvent.click(linkElement);
+    await waitFor(() => expect(history.location.pathname).toEqual('/projects'));
+  });
+
+  it('includes the dashboard-header class names', () => {
+    const { container } = mountComponent();
+
+    const listItem = container.querySelector('li');
+    const link = container.querySelector('a');
+
+    expect(listItem).toHaveClass('dashboard-header__tab');
+    expect(link).toHaveClass('dashboard-header__tab__title');
+  });
+});
diff --git a/client/common/RouterTab.jsx b/client/common/RouterTab.tsx
similarity index 68%
rename from client/common/RouterTab.jsx
rename to client/common/RouterTab.tsx
index d08c839855..cd20455f49 100644
--- a/client/common/RouterTab.jsx
+++ b/client/common/RouterTab.tsx
@@ -1,11 +1,14 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
 
+export type TabProps = {
+  children: ReactNode;
+  to: string;
+};
 /**
  * Wraps the react-router `NavLink` with dashboard-header__tab styling.
  */
-const Tab = ({ children, to }) => (
+const Tab = ({ children, to }: TabProps) => (
   <li className="dashboard-header__tab">
     <NavLink
       className="dashboard-header__tab__title"
@@ -17,9 +20,4 @@ const Tab = ({ children, to }) => (
   </li>
 );
 
-Tab.propTypes = {
-  children: PropTypes.string.isRequired,
-  to: PropTypes.string.isRequired
-};
-
 export default Tab;
diff --git a/client/common/useKeyDownHandlers.test.tsx b/client/common/useKeyDownHandlers.test.tsx
new file mode 100644
index 0000000000..f1d3480d96
--- /dev/null
+++ b/client/common/useKeyDownHandlers.test.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import useKeyDownHandlers from './useKeyDownHandlers';
+import { isMac } from '../utils/device';
+
+jest.mock('../utils/device');
+
+function fireKeyboardEvent(key: string, options: Partial<KeyboardEvent> = {}) {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    code: `Key${key.toUpperCase()}`,
+    bubbles: true,
+    cancelable: true,
+    ...options
+  });
+  document.dispatchEvent(event);
+}
+
+// Component for testing the hook
+const HookConsumer = ({
+  handlers
+}: {
+  handlers: Record<string, jest.Mock>;
+}) => {
+  useKeyDownHandlers(handlers);
+  return null;
+};
+
+describe('useKeyDownHandlers', () => {
+  let handlers: Record<string, jest.Mock>;
+
+  beforeEach(() => {
+    handlers = {
+      f: jest.fn(),
+      'ctrl-f': jest.fn(),
+      'ctrl-shift-f': jest.fn(),
+      'ctrl-alt-n': jest.fn()
+    };
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls "ctrl-f" handler on Windows (isMac false)', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { ctrlKey: true });
+
+    expect(handlers['ctrl-f']).toHaveBeenCalled();
+    expect(handlers.f).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-f" handler on Mac (isMac true)', () => {
+    (isMac as jest.Mock).mockReturnValue(true);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { metaKey: true });
+
+    expect(handlers['ctrl-f']).toHaveBeenCalled();
+    expect(handlers.f).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-shift-f" handler with both ctrl and shift keys', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { ctrlKey: true, shiftKey: true });
+
+    expect(handlers['ctrl-shift-f']).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-alt-n" handler with ctrl and alt', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('n', { ctrlKey: true, altKey: true, code: 'KeyN' });
+
+    expect(handlers['ctrl-alt-n']).toHaveBeenCalled();
+  });
+});
diff --git a/client/common/useKeyDownHandlers.js b/client/common/useKeyDownHandlers.ts
similarity index 60%
rename from client/common/useKeyDownHandlers.js
rename to client/common/useKeyDownHandlers.ts
index 7259574e82..2c8da5a3eb 100644
--- a/client/common/useKeyDownHandlers.js
+++ b/client/common/useKeyDownHandlers.ts
@@ -1,18 +1,19 @@
 import { mapKeys } from 'lodash';
-import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef } from 'react';
+import { isMac } from '../utils/device';
+
+/** Function to call upon keydown */
+export type KeydownHandler = (e: KeyboardEvent) => void;
+/** An object mapping from keys like 'ctrl-s' or 'ctrl-shift-1' to handlers. */
+export type KeydownHandlerMap = Record<string, KeydownHandler>;
 
 /**
  * Attaches keydown handlers to the global document.
- *
  * Handles Mac/PC switching of Ctrl to Cmd.
- *
- * @param {Record<string, (e: KeyboardEvent) => void>} keyHandlers - an object
- * which maps from the key to its event handler.  The object keys are a combination
- * of the key and prefixes `ctrl-` `shift-` (ie. 'ctrl-f', 'ctrl-shift-f')
- * and the values are the function to call when that specific key is pressed.
+ * @param keyHandlers - an object which maps from the key to its event handler. The object keys are a combination of the key and prefixes `ctrl-` `shift-`
+ * (ie. 'ctrl-f', 'ctrl-shift-f') and the values are the function to call when that specific key is pressed.
  */
-export default function useKeyDownHandlers(keyHandlers) {
+export default function useKeyDownHandlers(keyHandlers: KeydownHandlerMap) {
   /**
    * Instead of memoizing the handlers, use a ref and call the current
    * handler at the time of the event.
@@ -30,8 +31,7 @@ export default function useKeyDownHandlers(keyHandlers) {
    */
   const handleEvent = useCallback((e) => {
     if (!e.key) return;
-    const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
-    const isCtrl = isMac ? e.metaKey : e.ctrlKey;
+    const isCtrl = isMac() ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
       handlers.current[
         `ctrl-shift-${
@@ -53,20 +53,3 @@ export default function useKeyDownHandlers(keyHandlers) {
     return () => document.removeEventListener('keydown', handleEvent);
   }, [handleEvent]);
 }
-
-/**
- * Component version can be used in class components where hooks can't be used.
- *
- * @param {Record<string, (e: KeyboardEvent) => void>} handlers
- */
-export const DocumentKeyDown = ({ handlers }) => {
-  useKeyDownHandlers(handlers);
-  return null;
-};
-DocumentKeyDown.propTypes = {
-  handlers: PropTypes.objectOf(PropTypes.func)
-};
-
-DocumentKeyDown.defaultProps = {
-  handlers: {}
-};
diff --git a/client/common/useModalClose.test.tsx b/client/common/useModalClose.test.tsx
new file mode 100644
index 0000000000..64d26f7308
--- /dev/null
+++ b/client/common/useModalClose.test.tsx
@@ -0,0 +1,65 @@
+import React, { useRef, useEffect } from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import useModalClose from './useModalClose';
+import useKeyDownHandlers from './useKeyDownHandlers';
+
+jest.mock('./useKeyDownHandlers');
+
+describe('useModalClose', () => {
+  let onClose: jest.Mock;
+
+  beforeEach(() => {
+    onClose = jest.fn();
+    jest.clearAllMocks();
+  });
+
+  function TestModal({ handleClose }: { handleClose: () => void }) {
+    const ref = useModalClose(handleClose);
+    return (
+      <div>
+        <div data-testid="outside">Outside</div>
+        <div
+          data-testid="modal"
+          ref={ref as React.RefObject<HTMLDivElement>}
+          tabIndex={-1}
+          style={{ border: '1px solid black' }}
+        >
+          Modal content
+        </div>
+      </div>
+    );
+  }
+
+  function mountComponent() {
+    return render(<TestModal handleClose={onClose} />);
+  }
+
+  it('calls onClose when clicking outside the modal', () => {
+    const { getByTestId } = mountComponent();
+
+    fireEvent.click(getByTestId('outside'));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('does not call onClose when clicking inside the modal', () => {
+    const { getByTestId } = mountComponent();
+
+    fireEvent.click(getByTestId('modal'));
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('returns a ref that is focused on mount', () => {
+    const { getByTestId } = mountComponent();
+    const modal = getByTestId('modal');
+
+    expect(document.activeElement).toBe(modal);
+  });
+
+  it('calls useKeyDownHandlers with escape handler', () => {
+    mountComponent();
+
+    expect(useKeyDownHandlers).toHaveBeenCalledWith({ escape: onClose });
+  });
+});
diff --git a/client/common/useModalClose.js b/client/common/useModalClose.ts
similarity index 57%
rename from client/common/useModalClose.js
rename to client/common/useModalClose.ts
index 2bab24b5de..cd19da2b04 100644
--- a/client/common/useModalClose.js
+++ b/client/common/useModalClose.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, MutableRefObject } from 'react';
 import useKeyDownHandlers from './useKeyDownHandlers';
 
 /**
@@ -14,21 +14,24 @@ import useKeyDownHandlers from './useKeyDownHandlers';
  *
  * Returns a ref to attach to the outermost element of the modal.
  *
- * @param {() => void} onClose
- * @param {React.MutableRefObject<HTMLElement | null>} [passedRef]
- * @return {React.MutableRefObject<HTMLElement | null>}
+ * @param onClose - Function called when modal should close
+ * @param passedRef - Optional ref to the modal element. If not provided, one is created internally.
+ * @returns A ref to be attached to the modal DOM element
  */
-export default function useModalClose(onClose, passedRef) {
-  const createdRef = useRef(null);
-  const modalRef = passedRef || createdRef;
+export default function useModalClose(
+  onClose: () => void,
+  passedRef?: MutableRefObject<HTMLElement | null>
+): MutableRefObject<HTMLElement | null> {
+  const createdRef = useRef<HTMLElement | null>(null);
+  const modalRef = passedRef ?? createdRef;
 
   useEffect(() => {
     modalRef.current?.focus();
 
-    function handleClick(e) {
+    function handleClick(e: MouseEvent) {
       // ignore clicks on the component itself
-      if (modalRef.current && !modalRef.current.contains(e.target)) {
-        onClose?.();
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
       }
     }
 
diff --git a/client/common/usePrevious.js b/client/common/usePrevious.js
deleted file mode 100644
index ed46581cb0..0000000000
--- a/client/common/usePrevious.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export default function usePrevious(value) {
-  const ref = useRef();
-
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-}
diff --git a/client/common/usePrevious.test.tsx b/client/common/usePrevious.test.tsx
new file mode 100644
index 0000000000..13a1731feb
--- /dev/null
+++ b/client/common/usePrevious.test.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { render, screen } from '../test-utils';
+import usePrevious from './usePrevious';
+
+function TestComponent({ value }: { value: number }) {
+  const prev = usePrevious(value);
+
+  return (
+    <div>
+      <div>current: {value}</div>
+      <div>previous: {prev ?? 'undefined'}</div>
+    </div>
+  );
+}
+
+describe('usePrevious', () => {
+  it('should return undefined on first render and previous value after update', () => {
+    const { rerender } = render(<TestComponent value={1} />);
+
+    // First render: previous should be undefined
+    expect(screen.getByText('current: 1')).toBeInTheDocument();
+    expect(screen.getByText('previous: undefined')).toBeInTheDocument();
+
+    // Update value
+    rerender(<TestComponent value={2} />);
+
+    // Second render: previous should be 1
+    expect(screen.getByText('current: 2')).toBeInTheDocument();
+    expect(screen.getByText('previous: 1')).toBeInTheDocument();
+
+    // Update value again
+    rerender(<TestComponent value={3} />);
+
+    expect(screen.getByText('current: 3')).toBeInTheDocument();
+    expect(screen.getByText('previous: 2')).toBeInTheDocument();
+  });
+});
diff --git a/client/common/usePrevious.ts b/client/common/usePrevious.ts
new file mode 100644
index 0000000000..b285241130
--- /dev/null
+++ b/client/common/usePrevious.ts
@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Used in Menubar to store the previous value of a number.
+ * @param value - The current value to track.
+ * @returns The previous value before the current render, or undefined if none.
+ */
+export default function usePrevious(value: number): number | undefined {
+  const ref = useRef<number>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}
diff --git a/client/common/useSyncFormTranslations.js b/client/common/useSyncFormTranslations.js
deleted file mode 100644
index 411c942363..0000000000
--- a/client/common/useSyncFormTranslations.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-
-// Usage: useSyncFormTranslations(formRef, language)
-// This hook ensures that form values are preserved when the language changes.
-// Pass a ref to the form instance and the current language as arguments.
-const useSyncFormTranslations = (formRef, language) => {
-  useEffect(() => {
-    const form = formRef.current;
-    if (!form) return;
-
-    const { values } = form.getState();
-    form.reset();
-
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        form.change(field, values[field]);
-      }
-    });
-  }, [language]);
-};
-
-export default useSyncFormTranslations;
diff --git a/client/common/useSyncFormTranslations.test.tsx b/client/common/useSyncFormTranslations.test.tsx
new file mode 100644
index 0000000000..63622de2e0
--- /dev/null
+++ b/client/common/useSyncFormTranslations.test.tsx
@@ -0,0 +1,46 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { render } from '@testing-library/react';
+import useSyncFormTranslations from './useSyncFormTranslations';
+
+describe('useSyncFormTranslations', () => {
+  it('resets and re-applies non-empty form values on language change', () => {
+    const reset = jest.fn();
+    const change = jest.fn();
+    const getState = jest.fn().mockReturnValue({
+      values: {
+        name: 'Alice',
+        email: 'alice@example.com',
+        emptyField: ''
+      }
+    });
+
+    const formMock = { getState, reset, change };
+
+    function TestComponent({ language }: { language: string }) {
+      const formRef = useRef<any>(formMock);
+      useSyncFormTranslations(formRef, language);
+
+      return null;
+    }
+
+    const { rerender } = render(<TestComponent language="en" />);
+    rerender(<TestComponent language="fr" />); // simulate language change
+
+    expect(reset).toHaveBeenCalled();
+
+    expect(change).toHaveBeenCalledWith('name', 'Alice');
+    expect(change).toHaveBeenCalledWith('email', 'alice@example.com');
+    expect(change).not.toHaveBeenCalledWith('emptyField', '');
+  });
+
+  it('does nothing if formRef.current is null', () => {
+    function TestComponent({ language }: { language: string }) {
+      const formRef = useRef<any>(null);
+      useSyncFormTranslations(formRef, language);
+      return null;
+    }
+
+    render(<TestComponent language="en" />);
+    // No error = pass
+  });
+});
diff --git a/client/common/useSyncFormTranslations.ts b/client/common/useSyncFormTranslations.ts
new file mode 100644
index 0000000000..0a3ed46725
--- /dev/null
+++ b/client/common/useSyncFormTranslations.ts
@@ -0,0 +1,33 @@
+import { useEffect, MutableRefObject } from 'react';
+
+export interface FormLike {
+  getState(): { values: Record<string, unknown> };
+  reset(): void;
+  change(field: string, value: unknown): void;
+}
+
+/**
+ * This hook ensures that form values are preserved when the language changes.
+ * @param formRef
+ * @param language
+ */
+const useSyncFormTranslations = (
+  formRef: MutableRefObject<FormLike>,
+  language: string
+) => {
+  useEffect(() => {
+    const form = formRef.current;
+    if (!form) return;
+
+    const { values } = form.getState();
+    form.reset();
+
+    Object.keys(values).forEach((field) => {
+      if (values[field]) {
+        form.change(field, values[field]);
+      }
+    });
+  }, [language]);
+};
+
+export default useSyncFormTranslations;
diff --git a/client/components/SkipLink.tsx b/client/components/SkipLink.tsx
index d70af6a999..c5b7b15e57 100644
--- a/client/components/SkipLink.tsx
+++ b/client/components/SkipLink.tsx
@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 type SkipLinkProps = {
-  targetId: string,
-  text: string
+  targetId: string;
+  text: string;
 };
 
 const SkipLink = ({ targetId, text }: SkipLinkProps) => {
diff --git a/client/utils/device.js b/client/utils/device.js
deleted file mode 100644
index 040b16b7d4..0000000000
--- a/client/utils/device.js
+++ /dev/null
@@ -1 +0,0 @@
-export const isMac = () => navigator.userAgent.toLowerCase().indexOf('mac') !== -1; // eslint-disable-line
diff --git a/client/utils/device.test.ts b/client/utils/device.test.ts
new file mode 100644
index 0000000000..b748bb47f1
--- /dev/null
+++ b/client/utils/device.test.ts
@@ -0,0 +1,45 @@
+import { isMac } from './device';
+
+describe('isMac', () => {
+  const originalUserAgent = navigator.userAgent;
+
+  afterEach(() => {
+    // Restore the original userAgent after each test
+    Object.defineProperty(navigator, 'userAgent', {
+      value: originalUserAgent,
+      configurable: true
+    });
+  });
+
+  it('returns true when userAgent contains "Mac"', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)',
+      configurable: true
+    });
+    expect(isMac()).toBe(true);
+  });
+
+  it('returns false when userAgent does not contain "Mac"', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
+      configurable: true
+    });
+    expect(isMac()).toBe(false);
+  });
+
+  it('returns false when navigator agent is null', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: null,
+      configurable: true
+    });
+    expect(isMac()).toBe(false);
+  });
+
+  it('returns false when navigator agent is undefined', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: undefined,
+      configurable: true
+    });
+    expect(isMac()).toBe(false);
+  });
+});
diff --git a/client/utils/device.ts b/client/utils/device.ts
new file mode 100644
index 0000000000..db9ffe1980
--- /dev/null
+++ b/client/utils/device.ts
@@ -0,0 +1,10 @@
+/**
+ * Checks if the user's OS is macOS based on the user agent string.
+ * This is the preferred method over navigator.platform, which is now deprecated:
+ *   - see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform
+ */
+export function isMac(): boolean {
+  return typeof navigator?.userAgent === 'string'
+    ? navigator.userAgent.toLowerCase().includes('mac')
+    : false;
+}
diff --git a/package-lock.json b/package-lock.json
index aa67ab3b9d..2cab375e99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -158,6 +158,8 @@
         "@types/node": "^16.18.126",
         "@types/react": "^16.14.0",
         "@types/react-dom": "^16.9.25",
+        "@types/react-router-dom": "^5.3.3",
+        "@types/styled-components": "^5.1.34",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-core": "^7.0.0-bridge.0",
@@ -14131,6 +14133,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -14368,6 +14377,29 @@
         "redux": "^4.0.0"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/react/node_modules/csstype": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
@@ -14434,6 +14466,25 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "node_modules/@types/styled-components": {
+      "version": "5.1.34",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz",
+      "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/styled-components/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.0",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz",
@@ -50465,6 +50516,12 @@
         "@types/unist": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -50706,6 +50763,27 @@
         "redux": "^4.0.0"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/redux-devtools-themes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/redux-devtools-themes/-/redux-devtools-themes-1.0.0.tgz",
@@ -50767,6 +50845,25 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "@types/styled-components": {
+      "version": "5.1.34",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz",
+      "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+          "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+          "dev": true
+        }
+      }
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.0",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz",
diff --git a/package.json b/package.json
index ccf2842f22..3067280481 100644
--- a/package.json
+++ b/package.json
@@ -130,6 +130,8 @@
     "@types/node": "^16.18.126",
     "@types/react": "^16.14.0",
     "@types/react-dom": "^16.9.25",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "babel-core": "^7.0.0-bridge.0",