diff --git a/.eslintrc b/.eslintrc
index e9539865dd..137d893825 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -136,6 +136,9 @@
         "no-unused-vars": "off",
         "import/no-default-export": "warn",
         "no-underscore-dangle": "warn",
+        "react/require-default-props": "off",
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error"
       }
     },
     {
diff --git a/client/common/Button.stories.jsx b/client/common/Button.stories.jsx
index d11634ae28..0a0150a5b6 100644
--- a/client/common/Button.stories.jsx
+++ b/client/common/Button.stories.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import Button from './Button';
+import { Button, ButtonDisplays, ButtonKinds, ButtonTypes } from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {
@@ -15,13 +15,13 @@ export default {
 };
 
 export const AllFeatures = (args) => (
-  <Button disabled={args.disabled} type="submit" label={args.label}>
+  <Button disabled={args.disabled} type={ButtonTypes.SUBMIT} label={args.label}>
     {args.children}
   </Button>
 );
 
 export const SubmitButton = () => (
-  <Button type="submit" label="submit">
+  <Button type={ButtonTypes.SUBMIT} label="submit">
     This is a submit button
   </Button>
 );
@@ -59,7 +59,7 @@ export const ButtonWithIconAfter = () => (
 );
 
 export const InlineButtonWithIconAfter = () => (
-  <Button iconAfter={<DropdownArrowIcon />} display={Button.displays.inline}>
+  <Button iconAfter={<DropdownArrowIcon />} display={ButtonDisplays.INLINE}>
     File name
   </Button>
 );
@@ -68,6 +68,6 @@ export const InlineIconOnlyButton = () => (
   <Button
     aria-label="Add to collection"
     iconBefore={<PlusIcon />}
-    display={Button.displays.inline}
+    display={ButtonDisplays.INLINE}
   />
 );
diff --git a/client/common/Button.test.tsx b/client/common/Button.test.tsx
new file mode 100644
index 0000000000..b49e40c78f
--- /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 60%
rename from client/common/Button.jsx
rename to client/common/Button.tsx
index 516536fb2b..d52abf3140 100644
--- a/client/common/Button.jsx
+++ b/client/common/Button.tsx
@@ -1,28 +1,112 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-
 import { remSize, prop } from '../theme';
 
-const kinds = {
-  primary: 'primary',
-  secondary: 'secondary'
-};
+/**
+ * Enum for the visual style of a Button.
+ *
+ * These values transpile to lowercase strings (`'primary' | 'secondary'`)
+ * that map directly to keys in the `Button` object in `theme.js` for styling.
+ */
+export enum ButtonKinds {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary'
+}
+/**
+ * Enum for the display type of a Button.
+ *
+ * These values transpile to lowercase strings (`'block' | 'inline'`)
+ * and map to display styles in the `Button` object in `theme.js`.
+ */
+export enum ButtonDisplays {
+  BLOCK = 'block',
+  INLINE = 'inline'
+}
+/**
+ * Enum for the native HTML button type.
+ *
+ * These values transpile to lowercase strings (`'button' | 'submit'`)
+ * and correspond to the `type` attribute on a native <button>.
+ * They can also be used in `theme.js` if needed for button-specific styles.
+ */
+export enum ButtonTypes {
+  BUTTON = 'button',
+  SUBMIT = 'submit'
+}
 
-const displays = {
-  block: 'block',
-  inline: 'inline'
-};
+export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * 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?: ButtonDisplays;
+  /**
+   * 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?: ButtonKinds;
+  /**
+   * Specifying an href will use an <a> to link to the URL
+   */
+  href?: string;
+  /**
+   * An ARIA Label used for accessibility
+   */
+  'aria-label'?: string;
+  /**
+   * Specifying a to URL will use a react-router Link
+   */
+  to?: string;
+  /**
+   * If using a native button, specifies on an onClick action
+   */
+  onClick?: () => void;
+  /**
+   * If using a button, then type is defines the type of button
+   */
+  type?: ButtonTypes;
+  /**
+   * Controls whether the underlying SVG is focusable.
+   * Only relevant for IconButton (or buttons that render an SVG as content).
+   * In SVGs, the `focusable` attribute must be a string (`"true"` or `"false"`),
+   * but React will automatically convert a boolean prop to the correct string value.
+   */
+  focusable?: boolean;
+}
+
+interface StyledButtonProps extends ButtonProps {
+  kind: ButtonKinds;
+  display: ButtonDisplays;
+}
 
 // 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 }) =>
-      display === displays.inline ? 'inline-flex' : 'flex'};
+      display === ButtonDisplays.INLINE ? 'inline-flex' : 'flex'};
     justify-content: center;
     align-items: center;
 
@@ -109,35 +193,37 @@ const StyledInlineButton = styled.button`
 `;
 
 /**
- * A Button performs an primary action
+ * Renders a component with a button appearance, but which is:
+ *  - External anchor link if passed a `href`
+ *  - Internal React Router link if passed a `to`
+ *  - Default: Native Button
  */
-const Button = ({
-  children,
-  display,
+export const Button = ({
+  children = null,
+  display = ButtonDisplays.BLOCK,
   href,
-  kind,
-  iconBefore,
-  iconAfter,
-  iconOnly,
+  kind = ButtonKinds.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;
 
+  // Anchor Link
   if (href) {
     return (
       <StyledComponent
@@ -153,6 +239,7 @@ const Button = ({
     );
   }
 
+  // Internal React Router Link
   if (to) {
     return (
       <StyledComponent
@@ -168,6 +255,7 @@ const Button = ({
     );
   }
 
+  // Native Button
   return (
     <StyledComponent
       kind={kind}
@@ -180,70 +268,3 @@ const Button = ({
     </StyledComponent>
   );
 };
-
-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 96%
rename from client/common/ButtonOrLink.test.jsx
rename to client/common/ButtonOrLink.test.tsx
index 7b1a6326a4..c2dfb37d10 100644
--- a/client/common/ButtonOrLink.test.jsx
+++ b/client/common/ButtonOrLink.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor, history } from '../test-utils';
-import ButtonOrLink from './ButtonOrLink';
+import { ButtonOrLink } from './ButtonOrLink';
 
 describe('ButtonOrLink', () => {
   const clickHandler = jest.fn();
diff --git a/client/common/ButtonOrLink.jsx b/client/common/ButtonOrLink.tsx
similarity index 51%
rename from client/common/ButtonOrLink.jsx
rename to client/common/ButtonOrLink.tsx
index f759aa8ffb..ce1ac5f1ed 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 interface ButtonOrLinkProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * 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;
 
-const ButtonOrLink = React.forwardRef(
-  ({ href, children, isDisabled, onClick, ...props }, ref) => {
-    const handleClick = (e) => {
+/**
+ * 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.
+ */
+export const ButtonOrLink = React.forwardRef(
+  (
+    {
+      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}
@@ -59,31 +92,3 @@ 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..5ddaf854ba
--- /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..22c7620606
--- /dev/null
+++ b/client/common/IconButton.tsx
@@ -0,0 +1,30 @@
+import React, { ComponentType } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonProps, ButtonDisplays } from './Button';
+import { remSize } from '../theme';
+
+const ButtonWrapper = styled(Button)`
+  width: ${remSize(48)};
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export interface IconButtonProps
+  extends Omit<ButtonProps, 'iconBefore' | 'display' | 'focusable'> {
+  icon?: ComponentType<{ 'aria-label'?: string }>;
+  href?: string;
+  to?: string;
+  onClick?: () => void;
+}
+
+export const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
+  <ButtonWrapper
+    iconBefore={Icon ? <Icon /> : undefined}
+    iconOnly
+    display={ButtonDisplays.INLINE}
+    focusable={false}
+    {...otherProps}
+  />
+);
diff --git a/client/common/RouterTab.test.tsx b/client/common/RouterTab.test.tsx
new file mode 100644
index 0000000000..b9652b6a37
--- /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 { RouterTab } from './RouterTab';
+
+const mockPath = '/projects';
+const mockLinkText = 'Projects';
+
+describe('RouterTab', () => {
+  function mountComponent() {
+    return render(<RouterTab to={mockPath}>{mockLinkText}</RouterTab>);
+  }
+
+  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 64%
rename from client/common/RouterTab.jsx
rename to client/common/RouterTab.tsx
index d08c839855..aa4f9aee92 100644
--- a/client/common/RouterTab.jsx
+++ b/client/common/RouterTab.tsx
@@ -1,11 +1,15 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
 
+export interface RouterTabProps {
+  children: ReactNode;
+  to: string;
+}
+
 /**
  * Wraps the react-router `NavLink` with dashboard-header__tab styling.
  */
-const Tab = ({ children, to }) => (
+export const RouterTab = ({ children, to }: RouterTabProps) => (
   <li className="dashboard-header__tab">
     <NavLink
       className="dashboard-header__tab__title"
@@ -16,10 +20,3 @@ const Tab = ({ children, to }) => (
     </NavLink>
   </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..3b3f023c10
--- /dev/null
+++ b/client/common/useKeyDownHandlers.test.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '../test-utils';
+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 62%
rename from client/common/useKeyDownHandlers.js
rename to client/common/useKeyDownHandlers.ts
index f47fbc7c8a..b1f51bb7af 100644
--- a/client/common/useKeyDownHandlers.js
+++ b/client/common/useKeyDownHandlers.ts
@@ -1,19 +1,19 @@
 import { mapKeys } from 'lodash';
-import PropTypes from 'prop-types';
-import { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { isMac } from '../utils/device';
 
+/** Function to call upon keydown */
+export type KeydownHandler = (e: KeyboardEvent | React.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 function useKeyDownHandlers(keyHandlers: KeydownHandlerMap) {
   /**
    * Instead of memoizing the handlers, use a ref and call the current
    * handler at the time of the event.
@@ -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..252f78b61e
--- /dev/null
+++ b/client/common/useModalClose.test.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, fireEvent } from '../test-utils';
+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 53%
rename from client/common/useModalClose.js
rename to client/common/useModalClose.ts
index 2bab24b5de..044cd5d190 100644
--- a/client/common/useModalClose.js
+++ b/client/common/useModalClose.ts
@@ -1,5 +1,5 @@
-import { useEffect, useRef } from 'react';
-import useKeyDownHandlers from './useKeyDownHandlers';
+import { useEffect, useRef, MutableRefObject } from 'react';
+import { useKeyDownHandlers } from './useKeyDownHandlers';
 
 /**
  * Common logic for Modal, Overlay, etc.
@@ -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 function useModalClose<T extends HTMLElement = HTMLElement>(
+  onClose: () => void,
+  passedRef?: MutableRefObject<T | null>
+): MutableRefObject<T | null> {
+  const createdRef = useRef<T | 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..35f6e6c001
--- /dev/null
+++ b/client/common/usePrevious.test.tsx
@@ -0,0 +1,37 @@
+import React 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..dbb1d2cf5b
--- /dev/null
+++ b/client/common/usePrevious.ts
@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Used in Menubar to store the previous value.
+ * @param value - The current value to track.
+ * @returns The previous value before the current render, or undefined if none.
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+
+  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..67c90d114f
--- /dev/null
+++ b/client/common/useSyncFormTranslations.test.tsx
@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import { render } from '../test-utils';
+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..4a90362750
--- /dev/null
+++ b/client/common/useSyncFormTranslations.ts
@@ -0,0 +1,31 @@
+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
+ */
+export 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]);
+};
diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
deleted file mode 100644
index c04f961d75..0000000000
--- a/client/components/Dropdown.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { remSize, prop } from '../theme';
-import IconButton from '../common/IconButton';
-
-export const DropdownWrapper = styled.ul`
-  background-color: ${prop('Modal.background')};
-  border: 1px solid ${prop('Modal.border')};
-  box-shadow: 0 0 18px 0 ${prop('shadowColor')};
-  color: ${prop('primaryTextColor')};
-
-  position: absolute;
-  right: ${(props) => (props.right ? 0 : 'initial')};
-  left: ${(props) => (props.left ? 0 : 'initial')};
-
-  ${(props) => props.align === 'right' && 'right: 0;'}
-  ${(props) => props.align === 'left' && 'left: 0;'}
-
-
-  text-align: left;
-  width: ${remSize(180)};
-  display: flex;
-  flex-direction: column;
-  height: auto;
-  z-index: 2;
-  border-radius: ${remSize(6)};
-
-  & li:first-child {
-    border-radius: ${remSize(5)} ${remSize(5)} 0 0;
-  }
-  & li:last-child {
-    border-radius: 0 0 ${remSize(5)} ${remSize(5)};
-  }
-
-  & li:hover {
-    background-color: ${prop('Button.primary.hover.background')};
-    color: ${prop('Button.primary.hover.foreground')};
-
-    * {
-      color: ${prop('Button.primary.hover.foreground')};
-    }
-  }
-
-  li {
-    height: ${remSize(36)};
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-
-    & button,
-    & button span,
-    & a {
-      padding: ${remSize(8)} ${remSize(16)};
-      font-size: ${remSize(12)};
-    }
-
-    * {
-      text-align: left;
-      justify-content: left;
-
-      color: ${prop('primaryTextColor')};
-      width: 100%;
-      justify-content: flex-start;
-    }
-
-    & button span {
-      padding: 0px;
-    }
-  }
-`;
-
-// TODO: Add Icon to the left of the items in the menu
-// const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
-
-const Dropdown = ({ items, align }) => (
-  <DropdownWrapper align={align}>
-    {/* className="nav__items-left" */}
-    {items &&
-      items.map(({ title, icon, href, action }) => (
-        <li key={`nav-${title && title.toLowerCase()}`}>
-          {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
-          {href ? (
-            <IconButton to={href}>{title}</IconButton>
-          ) : (
-            <IconButton onClick={() => action()}>{title}</IconButton>
-          )}
-        </li>
-      ))}
-  </DropdownWrapper>
-);
-
-Dropdown.propTypes = {
-  align: PropTypes.oneOf(['left', 'right']),
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      action: PropTypes.func,
-      icon: PropTypes.func,
-      href: PropTypes.string,
-      title: PropTypes.string
-    })
-  )
-};
-
-Dropdown.defaultProps = {
-  items: [],
-  align: null
-};
-
-export default Dropdown;
diff --git a/client/components/Dropdown/DropdownMenu.jsx b/client/components/Dropdown/DropdownMenu.jsx
deleted file mode 100644
index ddaa1c338a..0000000000
--- a/client/components/Dropdown/DropdownMenu.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { forwardRef, useCallback, useRef, useState } from 'react';
-import useModalClose from '../../common/useModalClose';
-import DownArrowIcon from '../../images/down-filled-triangle.svg';
-import { DropdownWrapper } from '../Dropdown';
-
-// TODO: enable arrow keys to navigate options from list
-
-const DropdownMenu = forwardRef(
-  (
-    {
-      children,
-      anchor,
-      'aria-label': ariaLabel,
-      align,
-      className,
-      classes,
-      maxHeight
-    },
-    ref
-  ) => {
-    // Note: need to use a ref instead of a state to avoid stale closures.
-    const focusedRef = useRef(false);
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    const close = useCallback(() => setIsOpen(false), [setIsOpen]);
-
-    const anchorRef = useModalClose(close, ref);
-
-    const toggle = useCallback(() => {
-      setIsOpen((prevState) => !prevState);
-    }, [setIsOpen]);
-
-    const handleFocus = () => {
-      focusedRef.current = true;
-    };
-
-    const handleBlur = () => {
-      focusedRef.current = false;
-      setTimeout(() => {
-        if (!focusedRef.current) {
-          // close();
-        }
-      }, 200);
-    };
-
-    return (
-      <div ref={anchorRef} className={className} aria-haspopup="menu">
-        <button
-          className={classes.button}
-          aria-label={ariaLabel}
-          tabIndex="0"
-          onClick={toggle}
-          onBlur={handleBlur}
-          onFocus={handleFocus}
-        >
-          {anchor ?? <DownArrowIcon focusable="false" aria-hidden="true" />}
-        </button>
-        {isOpen && (
-          <DropdownWrapper
-            role="menu"
-            className={classes.list}
-            align={align}
-            onMouseUp={() => {
-              setTimeout(close, 0);
-            }}
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            style={maxHeight && { maxHeight, overflowY: 'auto' }}
-          >
-            {children}
-          </DropdownWrapper>
-        )}
-      </div>
-    );
-  }
-);
-
-DropdownMenu.propTypes = {
-  /**
-   * Provide <MenuItem> elements as children to control the contents of the menu.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Can optionally override the contents of the button which opens the menu.
-   * Defaults to <DownArrowIcon>
-   */
-  anchor: PropTypes.node,
-  'aria-label': PropTypes.string.isRequired,
-  align: PropTypes.oneOf(['left', 'right']),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    button: PropTypes.string,
-    list: PropTypes.string
-  }),
-  maxHeight: PropTypes.string
-};
-
-DropdownMenu.defaultProps = {
-  anchor: null,
-  align: 'right',
-  className: '',
-  classes: {},
-  maxHeight: undefined
-};
-
-export default DropdownMenu;
diff --git a/client/components/Dropdown/DropdownMenu.tsx b/client/components/Dropdown/DropdownMenu.tsx
new file mode 100644
index 0000000000..258f681832
--- /dev/null
+++ b/client/components/Dropdown/DropdownMenu.tsx
@@ -0,0 +1,160 @@
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { useModalClose } from '../../common/useModalClose';
+import DownArrowIcon from '../../images/down-filled-triangle.svg';
+import { remSize, prop } from '../../theme';
+
+export interface DropdownMenuProps extends StyledDropdownMenuProps {
+  /**
+   * Provide <MenuItem> elements as children to control the contents of the menu.
+   */
+  children: React.ReactNode;
+  /**
+   * Can optionally override the contents of the button which opens the menu.
+   * Defaults to <DownArrowIcon>
+   */
+  anchor?: React.ReactNode;
+  'aria-label': string;
+  className?: string;
+  classes?: {
+    button?: string;
+    list?: string;
+  };
+  maxHeight?: string;
+}
+
+interface StyledDropdownMenuProps {
+  align: 'right' | 'left';
+}
+
+const StyledDropdownMenu = styled.ul<StyledDropdownMenuProps>`
+  background-color: ${prop('Modal.background')};
+  border: 1px solid ${prop('Modal.border')};
+  box-shadow: 0 0 18px 0 ${prop('shadowColor')};
+  color: ${prop('primaryTextColor')};
+
+  position: absolute;
+  ${(props) => (props.align === 'right' ? 'right: 0;' : 'left: 0;')}
+
+  text-align: left;
+  width: ${remSize(180)};
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  z-index: 2;
+  border-radius: ${remSize(6)};
+
+  & li:first-child {
+    border-radius: ${remSize(5)} ${remSize(5)} 0 0;
+  }
+  & li:last-child {
+    border-radius: 0 0 ${remSize(5)} ${remSize(5)};
+  }
+
+  & li:hover {
+    background-color: ${prop('Button.primary.hover.background')};
+    color: ${prop('Button.primary.hover.foreground')};
+
+    * {
+      color: ${prop('Button.primary.hover.foreground')};
+    }
+  }
+
+  li {
+    height: ${remSize(36)};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    & button,
+    & button span,
+    & a {
+      padding: ${remSize(8)} ${remSize(16)};
+      font-size: ${remSize(12)};
+    }
+
+    * {
+      text-align: left;
+      justify-content: left;
+
+      color: ${prop('primaryTextColor')};
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    & button span {
+      padding: 0px;
+    }
+  }
+`;
+
+export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(
+  (
+    {
+      children,
+      anchor,
+      'aria-label': ariaLabel,
+      align = 'right',
+      className = '',
+      classes = {},
+      maxHeight
+    },
+    ref
+  ) => {
+    // Note: need to use a ref instead of a state to avoid stale closures.
+    const focusedRef = useRef(false);
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+
+    const anchorRef = useModalClose<HTMLDivElement>(close, ref);
+
+    const toggle = useCallback(() => {
+      setIsOpen((prevState) => !prevState);
+    }, [setIsOpen]);
+
+    const handleFocus = () => {
+      focusedRef.current = true;
+    };
+
+    const handleBlur = () => {
+      focusedRef.current = false;
+      setTimeout(() => {
+        if (!focusedRef.current) {
+          // close();
+        }
+      }, 200);
+    };
+
+    return (
+      <div ref={anchorRef} className={className} aria-haspopup="menu">
+        <button
+          className={classes.button}
+          aria-label={ariaLabel}
+          tabIndex={0}
+          onClick={toggle}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+        >
+          {anchor ?? <DownArrowIcon focusable="false" aria-hidden="true" />}
+        </button>
+        {isOpen && (
+          <StyledDropdownMenu
+            role="menu"
+            className={classes.list}
+            align={align}
+            onMouseUp={() => {
+              setTimeout(close, 0);
+            }}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            style={maxHeight ? { maxHeight, overflowY: 'auto' } : undefined}
+          >
+            {children}
+          </StyledDropdownMenu>
+        )}
+      </div>
+    );
+  }
+);
diff --git a/client/components/Dropdown/MenuItem.jsx b/client/components/Dropdown/MenuItem.jsx
deleted file mode 100644
index a7908e487d..0000000000
--- a/client/components/Dropdown/MenuItem.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ButtonOrLink from '../../common/ButtonOrLink';
-
-// TODO: combine with NavMenuItem
-
-function MenuItem({ hideIf, ...rest }) {
-  if (hideIf) {
-    return null;
-  }
-
-  return (
-    <li role="menuitem">
-      <ButtonOrLink {...rest} />
-    </li>
-  );
-}
-
-MenuItem.propTypes = {
-  ...ButtonOrLink.propTypes,
-  onClick: PropTypes.func,
-  value: PropTypes.string,
-  /**
-   * Provides a way to deal with optional items.
-   */
-  hideIf: PropTypes.bool
-};
-
-MenuItem.defaultProps = {
-  onClick: null,
-  value: null,
-  hideIf: false
-};
-
-export default MenuItem;
diff --git a/client/components/Dropdown/MenuItem.tsx b/client/components/Dropdown/MenuItem.tsx
new file mode 100644
index 0000000000..401aae3361
--- /dev/null
+++ b/client/components/Dropdown/MenuItem.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { ButtonOrLink, ButtonOrLinkProps } from '../../common/ButtonOrLink';
+
+// TODO: combine with NavMenuItem
+
+export interface MenuItemProps extends ButtonOrLinkProps {
+  /**
+   * Provides a way to deal with optional items.
+   */
+  hideIf?: boolean;
+  value?: string;
+}
+
+export function MenuItem({ hideIf = false, ...rest }: MenuItemProps) {
+  if (hideIf) {
+    return null;
+  }
+
+  return (
+    <li role="menuitem">
+      <ButtonOrLink {...rest} />
+    </li>
+  );
+}
diff --git a/client/components/Dropdown/TableDropdown.jsx b/client/components/Dropdown/TableDropdown.tsx
similarity index 82%
rename from client/components/Dropdown/TableDropdown.jsx
rename to client/components/Dropdown/TableDropdown.tsx
index 44f4f27fd6..32351cadf1 100644
--- a/client/components/Dropdown/TableDropdown.jsx
+++ b/client/components/Dropdown/TableDropdown.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
-import DropdownMenu from './DropdownMenu';
+import { DropdownMenu, DropdownMenuProps } from './DropdownMenu';
 
 import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
 import MoreIconSvg from '../../images/more.svg';
@@ -20,7 +20,9 @@ const TableDropdownIcon = () => {
   );
 };
 
-const TableDropdown = styled(DropdownMenu).attrs({
+export interface TableDropdownProps extends DropdownMenuProps {}
+
+export const TableDropdown = styled(DropdownMenu).attrs<TableDropdownProps>({
   align: 'right',
   anchor: <TableDropdownIcon />
 })`
@@ -42,5 +44,3 @@ const TableDropdown = styled(DropdownMenu).attrs({
     right: calc(100% - 26px);
   }
 `;
-
-export default TableDropdown;
diff --git a/client/components/Menubar/Menubar.test.jsx b/client/components/Menubar/Menubar.test.tsx
similarity index 97%
rename from client/components/Menubar/Menubar.test.jsx
rename to client/components/Menubar/Menubar.test.tsx
index 0f78d2f547..ade21a4138 100644
--- a/client/components/Menubar/Menubar.test.jsx
+++ b/client/components/Menubar/Menubar.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { render, screen, fireEvent } from '../../test-utils';
-import Menubar from './Menubar';
-import MenubarSubmenu from './MenubarSubmenu';
-import MenubarItem from './MenubarItem';
+import { Menubar } from './Menubar';
+import { MenubarSubmenu } from './MenubarSubmenu';
+import { MenubarItem } from './MenubarItem';
 
 describe('Menubar', () => {
   const renderMenubar = () => {
diff --git a/client/components/Menubar/Menubar.jsx b/client/components/Menubar/Menubar.tsx
similarity index 80%
rename from client/components/Menubar/Menubar.jsx
rename to client/components/Menubar/Menubar.tsx
index 8a358fceb6..46cacdcdb9 100644
--- a/client/components/Menubar/Menubar.jsx
+++ b/client/components/Menubar/Menubar.tsx
@@ -1,23 +1,27 @@
-import PropTypes from 'prop-types';
 import React, {
   useCallback,
   useMemo,
   useRef,
   useState,
-  useEffect
+  useEffect,
+  MouseEvent
 } from 'react';
-import useModalClose from '../../common/useModalClose';
+import { useModalClose } from '../../common/useModalClose';
 import { MenuOpenContext, MenubarContext } from './contexts';
-import usePrevious from '../../common/usePrevious';
+import { usePrevious } from '../../common/usePrevious';
+import { KeydownHandlerMap } from '../../common/useKeyDownHandlers';
+
+export interface MenubarProps {
+  // Menu items that will be rendered in the menubar
+  children?: React.ReactNode;
+  // CSS class name to apply to the menubar
+  className?: string;
+}
 
 /**
  * Menubar manages a collection of menu items and their submenus. It provides keyboard navigation,
  * focus and state management, and other accessibility features for the menu items and submenus.
  *
- * @param {React.ReactNode} props.children - Menu items that will be rendered in the menubar
- * @param {string} [props.className='nav__menubar'] - CSS class name to apply to the menubar
- * @returns {JSX.Element}
- *
  * @example
  * <Menubar>
  *  <MenubarSubmenu id="file" title="File">
@@ -25,20 +29,22 @@ import usePrevious from '../../common/usePrevious';
  *  </MenubarSubmenu>
  * </Menubar>
  */
+export function Menubar({
+  children,
+  className = 'nav__menubar'
+}: MenubarProps) {
+  const [menuOpen, setMenuOpen] = useState<string>('none');
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const prevIndex = usePrevious<number>(activeIndex);
+  const [hasFocus, setHasFocus] = useState<boolean>(false);
 
-function Menubar({ children, className }) {
-  const [menuOpen, setMenuOpen] = useState('none');
-  const [activeIndex, setActiveIndex] = useState(0);
-  const prevIndex = usePrevious(activeIndex);
-  const [hasFocus, setHasFocus] = useState(false);
+  const menuItems = useRef<Set<HTMLElement>>(new Set()).current;
+  const menuItemToId = useRef<Map<HTMLElement, string>>(new Map()).current;
 
-  const menuItems = useRef(new Set()).current;
-  const menuItemToId = useRef(new Map()).current;
-
-  const timerRef = useRef(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const getMenuId = useCallback(
-    (index) => {
+    (index: number): string | undefined => {
       const items = Array.from(menuItems);
       const itemNode = items[index];
       return menuItemToId.get(itemNode);
@@ -52,7 +58,7 @@ function Menubar({ children, className }) {
 
     if (menuOpen !== 'none') {
       const newMenuId = getMenuId(newIndex);
-      setMenuOpen(newMenuId);
+      if (newMenuId) setMenuOpen(newMenuId);
     }
   }, [activeIndex, menuItems, menuOpen, getMenuId]);
 
@@ -62,7 +68,7 @@ function Menubar({ children, className }) {
 
     if (menuOpen !== 'none') {
       const newMenuId = getMenuId(newIndex);
-      setMenuOpen(newMenuId);
+      if (newMenuId) setMenuOpen(newMenuId);
     }
   }, [activeIndex, menuItems, menuOpen, getMenuId]);
 
@@ -83,9 +89,9 @@ function Menubar({ children, className }) {
     activeNode.focus();
   }, [activeIndex, menuItems, menuOpen]);
 
-  const toggleMenuOpen = useCallback((id) => {
+  const toggleMenuOpen = useCallback((id: string) => {
     setMenuOpen((prevState) => (prevState === id ? 'none' : id));
-  });
+  }, []);
 
   const registerTopLevelItem = useCallback(
     (ref, submenuId) => {
@@ -116,7 +122,7 @@ function Menubar({ children, className }) {
     setMenuOpen('none');
   }, [setMenuOpen]);
 
-  const nodeRef = useModalClose(handleClose);
+  const nodeRef = useModalClose<HTMLUListElement>(handleClose);
 
   const handleFocus = useCallback(() => {
     setHasFocus(true);
@@ -138,7 +144,7 @@ function Menubar({ children, className }) {
     [nodeRef]
   );
 
-  const keyHandlers = {
+  const keyHandlers: KeydownHandlerMap = {
     ArrowLeft: (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -174,7 +180,7 @@ function Menubar({ children, className }) {
     if (activeIndex !== prevIndex) {
       const items = Array.from(menuItems);
       const activeNode = items[activeIndex];
-      const prevNode = items[prevIndex];
+      const prevNode = prevIndex ? items[prevIndex] : undefined;
 
       prevNode?.setAttribute('tabindex', '-1');
       activeNode?.setAttribute('tabindex', '0');
@@ -191,7 +197,7 @@ function Menubar({ children, className }) {
 
   const contextValue = useMemo(
     () => ({
-      createMenuHandlers: (menu) => ({
+      createMenuHandlers: (menu: string) => ({
         onMouseOver: () => {
           setMenuOpen((prevState) => (prevState === 'none' ? 'none' : menu));
         },
@@ -210,8 +216,8 @@ function Menubar({ children, className }) {
         onBlur: handleBlur,
         onFocus: clearHideTimeout
       }),
-      createMenuItemHandlers: (menu) => ({
-        onMouseUp: (e) => {
+      createMenuItemHandlers: (menu: string) => ({
+        onMouseUp: (e: MouseEvent) => {
           if (e.button === 2) {
             return;
           }
@@ -278,15 +284,3 @@ function Menubar({ children, className }) {
     </MenubarContext.Provider>
   );
 }
-
-Menubar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-Menubar.defaultProps = {
-  children: null,
-  className: 'nav__menubar'
-};
-
-export default Menubar;
diff --git a/client/components/Menubar/MenubarItem.jsx b/client/components/Menubar/MenubarItem.tsx
similarity index 80%
rename from client/components/Menubar/MenubarItem.jsx
rename to client/components/Menubar/MenubarItem.tsx
index ab3b741e34..438d06a68e 100644
--- a/client/components/Menubar/MenubarItem.jsx
+++ b/client/components/Menubar/MenubarItem.tsx
@@ -1,13 +1,19 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useContext, useRef } from 'react';
 import { MenubarContext, SubmenuContext, ParentMenuContext } from './contexts';
-import ButtonOrLink from '../../common/ButtonOrLink';
+import { ButtonOrLink, ButtonOrLinkProps } from '../../common/ButtonOrLink';
+
+export interface MenubarItemProps extends ButtonOrLinkProps {
+  selected?: boolean;
+  /**
+   * Provides a way to deal with optional items.
+   */
+  role?: 'menuitem' | 'option';
+}
 
 /**
  * MenubarItem wraps a button or link in an accessible list item that
  * integrates with keyboard navigation and other submenu behaviors.
  *
- * TO DO: how to document props passed through spread operator?
  * @component
  * @param {object} props
  * @param {string} [props.className='nav__dropdown-item'] - CSS class name to apply to the list item
@@ -35,15 +41,14 @@ import ButtonOrLink from '../../common/ButtonOrLink';
  *   {languageKeyToLabel(key)}
  * </MenubarItem>
  */
-
-function MenubarItem({
-  className,
+export function MenubarItem({
+  className = 'nav__dropdown-item',
   id,
-  role: customRole,
-  isDisabled,
-  selected,
+  role: customRole = 'menuitem',
+  isDisabled = false,
+  selected = false,
   ...rest
-}) {
+}: MenubarItemProps) {
   const { createMenuItemHandlers, hasFocus } = useContext(MenubarContext);
   const {
     setSubmenuActiveIndex,
@@ -94,25 +99,3 @@ function MenubarItem({
     </li>
   );
 }
-
-MenubarItem.propTypes = {
-  ...ButtonOrLink.propTypes,
-  className: PropTypes.string,
-  id: PropTypes.string,
-  /**
-   * Provides a way to deal with optional items.
-   */
-  role: PropTypes.oneOf(['menuitem', 'option']),
-  isDisabled: PropTypes.bool,
-  selected: PropTypes.bool
-};
-
-MenubarItem.defaultProps = {
-  className: 'nav__dropdown-item',
-  id: undefined,
-  role: 'menuitem',
-  isDisabled: false,
-  selected: false
-};
-
-export default MenubarItem;
diff --git a/client/components/Menubar/MenubarSubmenu.jsx b/client/components/Menubar/MenubarSubmenu.tsx
similarity index 72%
rename from client/components/Menubar/MenubarSubmenu.jsx
rename to client/components/Menubar/MenubarSubmenu.tsx
index 38683f2310..ca159742d3 100644
--- a/client/components/Menubar/MenubarSubmenu.jsx
+++ b/client/components/Menubar/MenubarSubmenu.tsx
@@ -1,7 +1,6 @@
 // https://blog.logrocket.com/building-accessible-menubar-component-react
 
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, {
   useState,
   useEffect,
@@ -18,11 +17,12 @@ import {
 } from './contexts';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 
-export function useMenuProps(id) {
+/* -------------------------------------------------------------------------------------------------
+ * useMenuProps
+ * -----------------------------------------------------------------------------------------------*/
+export function useMenuProps(id: string) {
   const activeMenu = useContext(MenuOpenContext);
-
   const isOpen = id === activeMenu;
-
   const { createMenuHandlers } = useContext(MenubarContext);
 
   const handlers = useMemo(() => createMenuHandlers(id), [
@@ -36,7 +36,11 @@ export function useMenuProps(id) {
 /* -------------------------------------------------------------------------------------------------
  * MenubarTrigger
  * -----------------------------------------------------------------------------------------------*/
-
+interface MenubarTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  role?: string;
+  hasPopup?: 'menu' | 'listbox' | 'true';
+}
 /**
  * MenubarTrigger renders a button that toggles a submenu. It handles keyboard navigation and supports
  * screen readers. It needs to be within a submenu context.
@@ -63,111 +67,111 @@ export function useMenuProps(id) {
  * </li>
  */
 
-const MenubarTrigger = React.forwardRef(({ role, hasPopup, ...props }, ref) => {
-  const {
-    setActiveIndex,
-    menuItems,
-    registerTopLevelItem,
-    hasFocus
-  } = useContext(MenubarContext);
-  const { id, title, first, last } = useContext(SubmenuContext);
-  const { isOpen, handlers } = useMenuProps(id);
-
-  const handleMouseEnter = () => {
-    if (hasFocus) {
-      const items = Array.from(menuItems);
-      const index = items.findIndex((item) => item === ref.current);
-
-      if (index !== -1) {
-        setActiveIndex(index);
-      }
-    }
-  };
+const MenubarTrigger = React.forwardRef<HTMLButtonElement, MenubarTriggerProps>(
+  (
+    { role = 'menuitem', hasPopup = 'menu', ...props }: MenubarTriggerProps,
+    ref
+  ) => {
+    const {
+      setActiveIndex,
+      menuItems,
+      registerTopLevelItem,
+      hasFocus
+    } = useContext(MenubarContext);
+    const { id, title, first, last } = useContext(SubmenuContext);
+    const { isOpen, handlers } = useMenuProps(id);
+
+    const handleMouseEnter = () => {
+      if (hasFocus) {
+        const items = Array.from(menuItems);
+        const index = items.findIndex(
+          (item) =>
+            item ===
+            (ref as React.MutableRefObject<HTMLButtonElement | null>).current
+        );
 
-  const handleKeyDown = (e) => {
-    switch (e.key) {
-      case 'ArrowDown':
-        if (!isOpen) {
-          e.preventDefault();
-          e.stopPropagation();
-          first();
-        }
-        break;
-      case 'ArrowUp':
-        if (!isOpen) {
-          e.preventDefault();
-          e.stopPropagation();
-          last();
+        if (index !== -1) {
+          setActiveIndex(index);
         }
-        break;
-      case 'Enter':
-      case ' ':
-        if (!isOpen) {
-          e.preventDefault();
-          e.stopPropagation();
-          first();
-        }
-        break;
-      default:
-        break;
-    }
-  };
-
-  useEffect(() => {
-    const unregister = registerTopLevelItem(ref, id);
-    return unregister;
-  }, [menuItems, registerTopLevelItem]);
-
-  return (
-    <button
-      {...props}
-      {...handlers}
-      ref={ref}
-      role={role}
-      onMouseEnter={handleMouseEnter}
-      onKeyDown={handleKeyDown}
-      aria-haspopup={hasPopup}
-      aria-expanded={isOpen}
-    >
-      <span className="nav__item-header">{title}</span>
-      <TriangleIcon
-        className="nav__item-header-triangle"
-        focusable="false"
-        aria-hidden="true"
-      />
-    </button>
-  );
-});
+      }
+    };
 
-MenubarTrigger.propTypes = {
-  role: PropTypes.string,
-  hasPopup: PropTypes.oneOf(['menu', 'listbox', 'true'])
-};
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          if (!isOpen) {
+            e.preventDefault();
+            e.stopPropagation();
+            first();
+          }
+          break;
+        case 'ArrowUp':
+          if (!isOpen) {
+            e.preventDefault();
+            e.stopPropagation();
+            last();
+          }
+          break;
+        case 'Enter':
+        case ' ':
+          if (!isOpen) {
+            e.preventDefault();
+            e.stopPropagation();
+            first();
+          }
+          break;
+        default:
+          break;
+      }
+    };
 
-MenubarTrigger.defaultProps = {
-  role: 'menuitem',
-  hasPopup: 'menu'
-};
+    useEffect(() => {
+      const unregister = registerTopLevelItem(ref, id);
+      return unregister;
+    }, [menuItems, registerTopLevelItem]);
+
+    return (
+      <button
+        {...props}
+        {...handlers}
+        ref={ref}
+        role={role}
+        onMouseEnter={handleMouseEnter}
+        onKeyDown={handleKeyDown}
+        aria-haspopup={hasPopup}
+        aria-expanded={isOpen}
+      >
+        <span className="nav__item-header">{title}</span>
+        <TriangleIcon
+          className="nav__item-header-triangle"
+          focusable="false"
+          aria-hidden="true"
+        />
+      </button>
+    );
+  }
+);
 
 /* -------------------------------------------------------------------------------------------------
  * MenubarList
  * -----------------------------------------------------------------------------------------------*/
 
+interface MenubarListProps {
+  // MenubarItems that should be rendered in the list
+  children?: React.ReactNode;
+  // The ARIA role of the list element
+  role?: 'menu' | 'listbox';
+}
+
 /**
  * MenubarList renders the container for menu items in a submenu. It provides context and handles ARIA roles.
  *
- * @param {Object} props
- * @param {React.ReactNode} props.children - MenubarItems that should be rendered in the list
- * @param {string} [props.role='menu'] - The ARIA role of the list element
- * @returns {JSX.Element}
- *
  * @example
  * <MenubarList role={listRole}>
  *  ... <MenubarItem> elements
  * </MenubarList>
  */
-
-function MenubarList({ children, role, ...props }) {
+function MenubarList({ children, role = 'menu', ...props }: MenubarListProps) {
   const { id, title } = useContext(SubmenuContext);
 
   return (
@@ -184,20 +188,18 @@ function MenubarList({ children, role, ...props }) {
   );
 }
 
-MenubarList.propTypes = {
-  children: PropTypes.node,
-  role: PropTypes.oneOf(['menu', 'listbox'])
-};
-
-MenubarList.defaultProps = {
-  children: null,
-  role: 'menu'
-};
-
 /* -------------------------------------------------------------------------------------------------
  * MenubarSubmenu
  * -----------------------------------------------------------------------------------------------*/
 
+export interface MenubarSubmenuProps {
+  id: string;
+  children?: React.ReactNode;
+  title: string;
+  triggerRole?: string;
+  listRole?: 'menu' | 'listbox';
+}
+
 /**
  * MenubarSubmenu manages a triggerable submenu within a menubar. It is a compound component
  * that manages the state of the submenu and its items. It also provides keyboard navigation
@@ -219,19 +221,18 @@ MenubarList.defaultProps = {
  *  </MenubarSubmenu>
  * </Menubar>
  */
-
-function MenubarSubmenu({
+export function MenubarSubmenu({
   children,
   id,
   title,
-  triggerRole: customTriggerRole,
-  listRole: customListRole,
+  triggerRole: customTriggerRole = 'menuItem',
+  listRole: customListRole = 'menu',
   ...props
-}) {
+}: MenubarSubmenuProps) {
   const { isOpen, handlers } = useMenuProps(id);
   const [submenuActiveIndex, setSubmenuActiveIndex] = useState(0);
   const { setMenuOpen, toggleMenuOpen } = useContext(MenubarContext);
-  const submenuItems = useRef(new Set()).current;
+  const submenuItems = useRef<Set<HTMLElement>>(new Set()).current;
 
   const buttonRef = useRef(null);
   const listItemRef = useRef(null);
@@ -275,6 +276,8 @@ function MenubarSubmenu({
     if (activeItem) {
       const activeItemNode = activeItem.firstChild;
 
+      if (!activeItemNode) return;
+
       const isDisabled =
         activeItemNode.getAttribute('aria-disabled') === 'true';
 
@@ -442,19 +445,3 @@ function MenubarSubmenu({
     </SubmenuContext.Provider>
   );
 }
-
-MenubarSubmenu.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node,
-  title: PropTypes.node.isRequired,
-  triggerRole: PropTypes.string,
-  listRole: PropTypes.string
-};
-
-MenubarSubmenu.defaultProps = {
-  children: null,
-  triggerRole: 'menuitem',
-  listRole: 'menu'
-};
-
-export default MenubarSubmenu;
diff --git a/client/components/Menubar/contexts.jsx b/client/components/Menubar/contexts.jsx
deleted file mode 100644
index 18cad6c36b..0000000000
--- a/client/components/Menubar/contexts.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createContext } from 'react';
-
-export const ParentMenuContext = createContext('none');
-
-export const MenuOpenContext = createContext('none');
-
-export const MenubarContext = createContext({
-  createMenuHandlers: () => ({}),
-  createMenuItemHandlers: () => ({}),
-  toggleMenuOpen: () => {}
-});
-
-export const SubmenuContext = createContext({});
diff --git a/client/components/Menubar/contexts.tsx b/client/components/Menubar/contexts.tsx
new file mode 100644
index 0000000000..5369b1f497
--- /dev/null
+++ b/client/components/Menubar/contexts.tsx
@@ -0,0 +1,55 @@
+import React, { createContext } from 'react';
+
+export const ParentMenuContext = createContext<string>('none');
+
+export const MenuOpenContext = createContext<string>('none');
+
+interface MenubarContextType {
+  // Menubar
+  createMenuHandlers: (id: string) => Record<string, any>;
+  toggleMenuOpen: (id: string) => void;
+  setMenuOpen: (id: string) => void;
+
+  // MenubarItem
+  createMenuItemHandlers: (id: string) => Record<string, any>;
+  hasFocus: boolean;
+
+  // MenubarSubmenu
+  setActiveIndex: (index: number) => void;
+  menuItems: Set<HTMLButtonElement>;
+  registerTopLevelItem: (
+    ref: React.Ref<HTMLButtonElement>,
+    id: string
+  ) => () => void; // returns unregister fn
+}
+
+export const MenubarContext = createContext<MenubarContextType>({
+  createMenuHandlers: () => ({}),
+  createMenuItemHandlers: () => ({}),
+  toggleMenuOpen: () => {},
+  setMenuOpen: () => {},
+  setActiveIndex: () => {},
+  hasFocus: false,
+  menuItems: new Set<HTMLButtonElement>(),
+  registerTopLevelItem: () => () => {}
+});
+
+interface SubmenuContextType {
+  submenuItems: Set<HTMLLIElement>;
+  setSubmenuActiveIndex: (index: number) => void;
+  registerSubmenuItem: (ref: React.Ref<HTMLLIElement>) => () => void;
+  id: string;
+  title: string;
+  first: () => void;
+  last: () => void;
+}
+
+export const SubmenuContext = createContext<SubmenuContextType>({
+  submenuItems: new Set(),
+  setSubmenuActiveIndex: () => {},
+  registerSubmenuItem: () => () => {},
+  id: '',
+  title: '',
+  first: () => {},
+  last: () => {}
+});
diff --git a/client/components/PreviewNav.test.tsx b/client/components/PreviewNav.test.tsx
new file mode 100644
index 0000000000..f5566cfa8c
--- /dev/null
+++ b/client/components/PreviewNav.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '../test-utils';
+import { PreviewNav } from './PreviewNav';
+
+describe('PreviewNav', () => {
+  const owner = { username: 'alice' };
+  const project = { id: '123', name: 'My Project' };
+
+  test('renders with correct links and icons using provided data-testid attributes', () => {
+    render(<PreviewNav owner={owner} project={project} />);
+
+    // Logo link to /alice/sketches
+    const iconLinkUserSketches = screen.getByTestId('icon-link_user-sketches');
+    expect(iconLinkUserSketches).toHaveAttribute(
+      'href',
+      `/${owner.username}/sketches`
+    );
+
+    // p5js logo icon presence
+    const iconP5Logo = screen.getByTestId('icon_p5-logo');
+    expect(iconP5Logo).toBeInTheDocument();
+
+    // Current project link to /alice/sketches/123
+    const linkCurrentProject = screen.getByTestId('link_current-project');
+    expect(linkCurrentProject).toHaveAttribute(
+      'href',
+      `/${owner.username}/sketches/${project.id}`
+    );
+    expect(linkCurrentProject).toHaveTextContent(project.name);
+
+    // Owner username link to /alice/sketches
+    const linkUserSketches = screen.getByTestId('link_user-sketches');
+    expect(linkUserSketches).toHaveAttribute(
+      'href',
+      `/${owner.username}/sketches`
+    );
+    expect(linkUserSketches).toHaveTextContent(owner.username);
+
+    // Edit project code link to /alice/sketches/123
+    const linkProjectCode = screen.getByTestId('link_project-code');
+    expect(linkProjectCode).toHaveAttribute(
+      'href',
+      `/${owner.username}/sketches/${project.id}`
+    );
+
+    // Code icon presence
+    const iconCode = screen.getByTestId('icon_code');
+    expect(iconCode).toBeInTheDocument();
+
+    // Check nav container presence
+    const nav = screen.getByTestId('preview-nav');
+    expect(nav).toBeInTheDocument();
+  });
+});
diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.tsx
similarity index 55%
rename from client/components/PreviewNav.jsx
rename to client/components/PreviewNav.tsx
index f66476d92b..65f429db49 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -6,56 +5,60 @@ import { useTranslation } from 'react-i18next';
 import LogoIcon from '../images/p5js-logo-small.svg';
 import CodeIcon from '../images/code.svg';
 
-const PreviewNav = ({ owner, project }) => {
+interface PreviewNavProps {
+  owner: { username: string };
+  project: { name: string; id: string };
+}
+
+export const PreviewNav = ({ owner, project }: PreviewNavProps) => {
   const { t } = useTranslation();
   return (
-    <nav className="nav preview-nav">
-      <div className="nav__items-left">
-        <div className="nav__item-logo">
-          <Link to={`/${owner.username}/sketches`}>
+    <nav className="nav preview-nav" data-testid="preview-nav">
+      <div className="nav__items-left" data-testid="nav-items-left">
+        <div className="nav__item-logo" data-testid="nav-item-logo">
+          <Link
+            to={`/${owner.username}/sketches`}
+            data-testid="icon-link_user-sketches"
+          >
             <LogoIcon
               role="img"
               aria-label={t('Common.p5logoARIA')}
               focusable="false"
               className="svg__logo"
+              data-testid="icon_p5-logo"
             />
           </Link>
         </div>
         <Link
           className="nav__item"
           to={`/${owner.username}/sketches/${project.id}`}
+          data-testid="link_current-project"
         >
           {project.name}
         </Link>
         <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
-        <Link className="nav__item" to={`/${owner.username}/sketches/`}>
+        <Link
+          className="nav__item"
+          to={`/${owner.username}/sketches`}
+          data-testid="link_user-sketches"
+        >
           {owner.username}
         </Link>
       </div>
-      <div className="nav__items-right">
+      <div className="nav__items-right" data-testid="nav-items-right">
         <Link
           to={`/${owner.username}/sketches/${project.id}`}
           aria-label={t('PreviewNav.EditSketchARIA')}
+          data-testid="link_project-code"
         >
           <CodeIcon
             className="preview-nav__editor-svg"
             focusable="false"
             aria-hidden="true"
+            data-testid="icon_code"
           />
         </Link>
       </div>
     </nav>
   );
 };
-
-PreviewNav.propTypes = {
-  owner: PropTypes.shape({
-    username: PropTypes.string.isRequired
-  }).isRequired,
-  project: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired
-  }).isRequired
-};
-
-export default PreviewNav;
diff --git a/client/components/RootPage.jsx b/client/components/RootPage.tsx
similarity index 81%
rename from client/components/RootPage.jsx
rename to client/components/RootPage.tsx
index 7cb3b35cc4..24e35b0dc2 100644
--- a/client/components/RootPage.jsx
+++ b/client/components/RootPage.tsx
@@ -1,7 +1,11 @@
 import styled from 'styled-components';
 import { prop } from '../theme';
 
-const RootPage = styled.div`
+interface RootPageProps {
+  fixedHeight?: string;
+}
+
+export const RootPage = styled.div<RootPageProps>`
   min-height: 100vh;
   height: ${({ fixedHeight }) => fixedHeight || '100vh'};
   display: flex;
@@ -21,5 +25,3 @@ const RootPage = styled.div`
     }
   }
 `;
-
-export default RootPage;
diff --git a/client/components/SkipLink.test.tsx b/client/components/SkipLink.test.tsx
index 692a08a616..8cf2e40052 100644
--- a/client/components/SkipLink.test.tsx
+++ b/client/components/SkipLink.test.tsx
@@ -1,15 +1,7 @@
-import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '../test-utils';
 import { SkipLink } from './SkipLink';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key
-  })
-}));
-
 describe('SkipLink', () => {
   const defaultProps = {
     targetId: 'main-content',
diff --git a/client/components/useAsModal.jsx b/client/components/useAsModal.jsx
deleted file mode 100644
index 1ea8d71aa7..0000000000
--- a/client/components/useAsModal.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { useModalBehavior } from '../modules/IDE/hooks/custom-hooks';
-
-const BackgroundOverlay = styled.div`
-  position: fixed;
-  z-index: 2;
-  width: 100% !important;
-  height: 100% !important;
-
-  background: black;
-  opacity: 0.3;
-`;
-
-export default (Element, hasOverlay = false) => {
-  const [visible, toggle, setRef] = useModalBehavior();
-
-  const wrapper = () =>
-    visible && (
-      <div>
-        {hasOverlay && <BackgroundOverlay />}
-        <div ref={setRef}>
-          {typeof Element === 'function' ? Element(toggle) : Element}
-        </div>
-      </div>
-    );
-
-  return [toggle, wrapper];
-};
diff --git a/client/custom.d.ts b/client/custom.d.ts
new file mode 100644
index 0000000000..216fa99ad4
--- /dev/null
+++ b/client/custom.d.ts
@@ -0,0 +1,8 @@
+declare module '*.svg' {
+  import * as React from 'react';
+
+  const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  export default ReactComponent;
+}
diff --git a/client/modules/About/pages/About.jsx b/client/modules/About/pages/About.jsx
index 5690aba0a0..ab069f5812 100644
--- a/client/modules/About/pages/About.jsx
+++ b/client/modules/About/pages/About.jsx
@@ -21,7 +21,7 @@ import {
 
 import { ContactSectionLinks, AboutSectionInfo } from '../statics/aboutData';
 import Nav from '../../IDE/components/Header/Nav';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 import packageData from '../../../../package.json';
 
 import HeartIcon from '../../../images/heart.svg';
diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 2dedc82656..6ae400add7 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -4,7 +4,7 @@ import MediaQuery from 'react-responsive';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import useModalClose from '../../../common/useModalClose';
+import { useModalClose } from '../../../common/useModalClose';
 
 import ExitIcon from '../../../images/exit.svg';
 
diff --git a/client/modules/IDE/components/AssetListRow.jsx b/client/modules/IDE/components/AssetListRow.jsx
index 7e7af8f013..756f5a2d79 100644
--- a/client/modules/IDE/components/AssetListRow.jsx
+++ b/client/modules/IDE/components/AssetListRow.jsx
@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
-import MenuItem from '../../../components/Dropdown/MenuItem';
-import TableDropdown from '../../../components/Dropdown/TableDropdown';
+import { MenuItem } from '../../../components/Dropdown/MenuItem';
+import { TableDropdown } from '../../../components/Dropdown/TableDropdown';
 import { deleteAssetRequest } from '../actions/assets';
 
 const AssetMenu = ({ item: asset }) => {
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 35b0ae6b09..6ae24e74e9 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -5,8 +5,8 @@ import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
 import styled from 'styled-components';
-import MenuItem from '../../../../components/Dropdown/MenuItem';
-import TableDropdown from '../../../../components/Dropdown/TableDropdown';
+import { MenuItem } from '../../../../components/Dropdown/MenuItem';
+import { TableDropdown } from '../../../../components/Dropdown/TableDropdown';
 import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx
index 76bf2f03f2..4e4b7c784d 100644
--- a/client/modules/IDE/components/Editor/index.jsx
+++ b/client/modules/IDE/components/Editor/index.jsx
@@ -71,7 +71,7 @@ import EditorAccessibility from '../EditorAccessibility';
 import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
 import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
-import IconButton from '../../../../common/IconButton';
+import { IconButton } from '../../../../common/IconButton';
 
 emmet(CodeMirror);
 
diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx
index fb13dec9ef..ce4a4cd49d 100644
--- a/client/modules/IDE/components/Header/MobileNav.jsx
+++ b/client/modules/IDE/components/Header/MobileNav.jsx
@@ -6,12 +6,12 @@ import { Link } from 'react-router-dom';
 import { sortBy } from 'lodash';
 import classNames from 'classnames';
 import { ParentMenuContext } from '../../../../components/Menubar/contexts';
-import Menubar from '../../../../components/Menubar/Menubar';
+import { Menubar } from '../../../../components/Menubar/Menubar';
 import { useMenuProps } from '../../../../components/Menubar/MenubarSubmenu';
-import ButtonOrLink from '../../../../common/ButtonOrLink';
+import { ButtonOrLink } from '../../../../common/ButtonOrLink';
 import { prop, remSize } from '../../../../theme';
 import AsteriskIcon from '../../../../images/p5-asterisk.svg';
-import IconButton from '../../../../common/IconButton';
+import { IconButton } from '../../../../common/IconButton';
 import {
   AccountIcon,
   AddIcon,
diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index f8f19cdb9f..511b70adc4 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -4,14 +4,14 @@ import { sortBy } from 'lodash';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import MenubarSubmenu from '../../../../components/Menubar/MenubarSubmenu';
-import MenubarItem from '../../../../components/Menubar/MenubarItem';
+import { MenubarSubmenu } from '../../../../components/Menubar/MenubarSubmenu';
+import { MenubarItem } from '../../../../components/Menubar/MenubarItem';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
 import { getConfig } from '../../../../utils/getConfig';
 import { parseBoolean } from '../../../../utils/parseStringToType';
 import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
-import Menubar from '../../../../components/Menubar/Menubar';
+import { Menubar } from '../../../../components/Menubar/Menubar';
 import CaretLeftIcon from '../../../../images/left-arrow.svg';
 import LogoIcon from '../../../../images/p5js-logo-small.svg';
 import { selectRootFile } from '../../selectors/files';
diff --git a/client/modules/IDE/components/Header/Nav.unit.test.jsx b/client/modules/IDE/components/Header/Nav.unit.test.jsx
index a15df02f4f..d5c2465c0c 100644
--- a/client/modules/IDE/components/Header/Nav.unit.test.jsx
+++ b/client/modules/IDE/components/Header/Nav.unit.test.jsx
@@ -3,53 +3,57 @@ import React from 'react';
 import { reduxRender } from '../../../../test-utils';
 
 import Nav from './Nav';
+import { MenubarSubmenu } from '../../../../components/Menubar/MenubarSubmenu';
 
 jest.mock('../../../../utils/generateRandomName');
 
 // mock Menubar
-jest.mock(
-  '../../../../components/Menubar/Menubar',
-  () =>
-    function Menubar({ children, className = 'nav__menubar' }) {
-      return (
-        <ul className={className} role="menubar">
-          {children}
-        </ul>
-      );
-    }
-);
+jest.mock('../../../../components/Menubar/Menubar', () => ({
+  Menubar: ({ children, className = 'nav__menubar' }) => (
+    <ul className={className} role="menubar">
+      {children}
+    </ul>
+  )
+}));
 
 // mock MenubarSubmenu
-jest.mock('../../../../components/Menubar/MenubarSubmenu', () => {
-  function MenubarSubmenu({ children, title }) {
-    return (
-      <li className="nav__item">
-        <span role="menuitem">{title}</span>
-        <ul role="menu" aria-label={`${title} menu`}>
-          {children}
-        </ul>
-      </li>
-    );
-  }
+jest.mock('../../../../components/Menubar/MenubarSubmenu', () => ({
+  MenubarSubmenu: ({ children, title }) => (
+    <li className="nav__item">
+      <span role="menuitem">{title}</span>
+      <ul role="menu" aria-label={`${title} menu`}>
+        {children}
+      </ul>
+    </li>
+  )
+}));
+// jest.mock('../../../../components/Menubar/MenubarSubmenu', () => {
+//   function MenubarSubmenu({ children, title }) {
+//     return (
+//       <li className="nav__item">
+//         <span role="menuitem">{title}</span>
+//         <ul role="menu" aria-label={`${title} menu`}>
+//           {children}
+//         </ul>
+//       </li>
+//     );
+//   }
 
-  MenubarSubmenu.useMenuProps = () => ({
-    isOpen: false,
-    handlers: {}
-  });
+//   MenubarSubmenu.useMenuProps = () => ({
+//     isOpen: false,
+//     handlers: {}
+//   });
 
-  return MenubarSubmenu;
-});
+//   return MenubarSubmenu;
+// });
 
 // mock MenubarItem
-jest.mock(
-  '../../../../components/Menubar/MenubarItem',
-  () =>
-    function MenubarItem({ children, hideIf }) {
-      if (hideIf) return null;
-
-      return <li>{children}</li>;
-    }
-);
+jest.mock('../../../../components/Menubar/MenubarItem', () => ({
+  MenubarItem: ({ children, hideIf }) => {
+    if (hideIf) return null;
+    return <li>{children}</li>;
+  }
+}));
 
 describe('Nav', () => {
   it('renders editor version for desktop', () => {
diff --git a/client/modules/IDE/components/IDEKeyHandlers.jsx b/client/modules/IDE/components/IDEKeyHandlers.jsx
index fc0219f27d..14e3cf2cba 100644
--- a/client/modules/IDE/components/IDEKeyHandlers.jsx
+++ b/client/modules/IDE/components/IDEKeyHandlers.jsx
@@ -13,7 +13,7 @@ import {
 } from '../actions/ide';
 import { setAllAccessibleOutput } from '../actions/preferences';
 import { cloneProject, saveProject } from '../actions/project';
-import useKeyDownHandlers from '../../../common/useKeyDownHandlers';
+import { useKeyDownHandlers } from '../../../common/useKeyDownHandlers';
 import {
   getAuthenticated,
   getIsUserOwner,
diff --git a/client/modules/IDE/components/Modal.jsx b/client/modules/IDE/components/Modal.jsx
index 831527b266..c3456373c0 100644
--- a/client/modules/IDE/components/Modal.jsx
+++ b/client/modules/IDE/components/Modal.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import useModalClose from '../../../common/useModalClose';
+import { useModalClose } from '../../../common/useModalClose';
 import ExitIcon from '../../../images/exit.svg';
 
 // Common logic from NewFolderModal, NewFileModal, UploadFileModal
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
index 9620e321dc..dda19e343c 100644
--- a/client/modules/IDE/components/NewFileForm.jsx
+++ b/client/modules/IDE/components/NewFileForm.jsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { handleCreateFile } from '../actions/files';
 import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 
 function NewFileForm() {
   const fileNameInput = useRef(null);
@@ -57,7 +57,7 @@ function NewFileForm() {
             </Field>
             <Field name="submitButton">
               {() => (
-                <Button type="submit" disabled={submitting}>
+                <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
                   {t('NewFileForm.AddFileSubmit')}
                 </Button>
               )}
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index b0935397ff..381520c47e 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { handleCreateFolder } from '../actions/files';
 
 function NewFolderForm() {
@@ -54,7 +54,7 @@ function NewFolderForm() {
             </Field>
             <Field name="submitButton">
               {() => (
-                <Button type="submit" disabled={submitting}>
+                <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
                   {t('NewFolderForm.AddFolderSubmit')}
                 </Button>
               )}
diff --git a/client/modules/IDE/components/SketchListRowBase.jsx b/client/modules/IDE/components/SketchListRowBase.jsx
index 62eff65c03..4d83ee0304 100644
--- a/client/modules/IDE/components/SketchListRowBase.jsx
+++ b/client/modules/IDE/components/SketchListRowBase.jsx
@@ -6,8 +6,8 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as ProjectActions from '../actions/project';
 import * as IdeActions from '../actions/ide';
-import TableDropdown from '../../../components/Dropdown/TableDropdown';
-import MenuItem from '../../../components/Dropdown/MenuItem';
+import { TableDropdown } from '../../../components/Dropdown/TableDropdown';
+import { MenuItem } from '../../../components/Dropdown/MenuItem';
 import { formatDateToString } from '../../../utils/formatDate';
 import { getConfig } from '../../../utils/getConfig';
 import VisibilityDropdown from '../../User/components/VisibilityDropdown';
diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx
index cd891d020c..8b00fcf40d 100644
--- a/client/modules/IDE/components/VersionPicker.jsx
+++ b/client/modules/IDE/components/VersionPicker.jsx
@@ -7,8 +7,8 @@ import styled from 'styled-components';
 import { prop } from '../../../theme';
 import { useP5Version } from '../hooks/useP5Version';
 import { p5Versions } from '../../../../common/p5Versions';
-import MenuItem from '../../../components/Dropdown/MenuItem';
-import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
+import { MenuItem } from '../../../components/Dropdown/MenuItem';
+import { DropdownMenu } from '../../../components/Dropdown/DropdownMenu';
 import { updateFileContent } from '../actions/files';
 // eslint-disable-next-line import/no-cycle
 import { CmControllerContext } from '../pages/IDEView';
diff --git a/client/modules/IDE/pages/FullView.jsx b/client/modules/IDE/pages/FullView.jsx
index 31f58a7df3..bf2e66fdcb 100644
--- a/client/modules/IDE/pages/FullView.jsx
+++ b/client/modules/IDE/pages/FullView.jsx
@@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import PreviewFrame from '../components/PreviewFrame';
-import PreviewNav from '../../../components/PreviewNav';
+import { PreviewNav } from '../../../components/PreviewNav';
 import { getProject } from '../actions/project';
 import { startSketch } from '../actions/ide';
 import {
@@ -12,7 +12,7 @@ import {
   MessageTypes
 } from '../../../utils/dispatcher';
 import useInterval from '../hooks/useInterval';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 
 function FullView() {
   const dispatch = useDispatch();
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 8f253c67d7..f3d869937b 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -16,7 +16,7 @@ import {
   getProject
 } from '../actions/project';
 import { getIsUserOwner } from '../selectors/users';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 import Header from '../components/Header';
 import FloatingActionButton from '../components/FloatingActionButton';
 import Editor from '../components/Editor';
diff --git a/client/modules/Legal/pages/Legal.jsx b/client/modules/Legal/pages/Legal.jsx
index 0e629f789a..4ba5cb5bbc 100644
--- a/client/modules/Legal/pages/Legal.jsx
+++ b/client/modules/Legal/pages/Legal.jsx
@@ -4,8 +4,8 @@ import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
-import RouterTab from '../../../common/RouterTab';
-import RootPage from '../../../components/RootPage';
+import { RouterTab } from '../../../common/RouterTab';
+import { RootPage } from '../../../components/RootPage';
 import { remSize } from '../../../theme';
 import Loader from '../../App/components/loader';
 import Nav from '../../IDE/components/Header/Nav';
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index eff0ae2d7b..fda5945f87 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { PlusIcon } from '../../../common/icons';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { createApiKey, removeApiKey } from '../actions';
@@ -78,7 +78,7 @@ const APIKeyForm = () => {
             disabled={keyLabel === ''}
             iconBefore={<PlusIcon />}
             label="Create new key"
-            type="submit"
+            type={ButtonTypes.SUBMIT}
           >
             {t('APIKeyForm.CreateTokenSubmit')}
           </Button>
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx
index c738e79db2..4ef40e4298 100644
--- a/client/modules/User/components/AccountForm.jsx
+++ b/client/modules/User/components/AccountForm.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, Field } from 'react-final-form';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import { updateSettings, initiateVerification } from '../actions';
 import { apiClient } from '../../../utils/apiClient';
@@ -175,7 +175,7 @@ function AccountForm() {
               )}
             </Field>
           )}
-          <Button type="submit" disabled={submitting || invalid}>
+          <Button type={ButtonTypes.SUBMIT} disabled={submitting || invalid}>
             {t('AccountForm.SaveAccountDetails')}
           </Button>
         </form>
diff --git a/client/modules/User/components/CollectionCreate.jsx b/client/modules/User/components/CollectionCreate.jsx
index 02d3fb59f0..3b2ccdefed 100644
--- a/client/modules/User/components/CollectionCreate.jsx
+++ b/client/modules/User/components/CollectionCreate.jsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { generateCollectionName } from '../../../utils/generateRandomName';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { createCollection } from '../../IDE/actions/collections';
 
 const CollectionCreate = () => {
@@ -74,7 +74,7 @@ const CollectionCreate = () => {
               rows="6"
             />
           </p>
-          <Button type="submit" disabled={invalid}>
+          <Button type={ButtonTypes.SUBMIT} disabled={invalid}>
             {t('CollectionCreate.SubmitCollectionCreate')}
           </Button>
         </form>
diff --git a/client/modules/User/components/CollectionMetadata.jsx b/client/modules/User/components/CollectionMetadata.jsx
index 88dc6d0312..dcb47e0929 100644
--- a/client/modules/User/components/CollectionMetadata.jsx
+++ b/client/modules/User/components/CollectionMetadata.jsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import Button from '../../../common/Button';
+import { Button } from '../../../common/Button';
 import Overlay from '../../App/components/Overlay';
 import { editCollection } from '../../IDE/actions/collections';
 import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
diff --git a/client/modules/User/components/CollectionShareButton.jsx b/client/modules/User/components/CollectionShareButton.jsx
index c4fd06bcb6..a5d8705dcd 100644
--- a/client/modules/User/components/CollectionShareButton.jsx
+++ b/client/modules/User/components/CollectionShareButton.jsx
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Button from '../../../common/Button';
+import { Button } from '../../../common/Button';
 import { DropdownArrowIcon } from '../../../common/icons';
-import useModalClose from '../../../common/useModalClose';
+import { useModalClose } from '../../../common/useModalClose';
 import CopyableInput from '../../IDE/components/CopyableInput';
 
 const ShareURL = ({ value }) => {
diff --git a/client/modules/User/components/CookieConsent.jsx b/client/modules/User/components/CookieConsent.jsx
index 0817e10c70..9cfff74ac6 100644
--- a/client/modules/User/components/CookieConsent.jsx
+++ b/client/modules/User/components/CookieConsent.jsx
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { getConfig } from '../../../utils/getConfig';
 import { setUserCookieConsent } from '../actions';
 import { remSize, prop, device } from '../../../theme';
-import Button from '../../../common/Button';
+import { Button, ButtonKinds } from '../../../common/Button';
 
 const CookieConsentContainer = styled.div`
   position: fixed;
@@ -177,10 +177,7 @@ function CookieConsent({ hide }) {
                 />
               </CookieConsentCopy>
               <CookieConsentButtons>
-                <Button
-                  kind={Button.kinds.secondary}
-                  onClick={acceptAllCookies}
-                >
+                <Button kind={ButtonKinds.SECONDARY} onClick={acceptAllCookies}>
                   {t('Cookies.AllowAll')}
                 </Button>
                 <Button onClick={acceptEssentialCookies}>
diff --git a/client/modules/User/components/DashboardTabSwitcher.jsx b/client/modules/User/components/DashboardTabSwitcher.jsx
index 6bfdb9bb22..7afbe5aec8 100644
--- a/client/modules/User/components/DashboardTabSwitcher.jsx
+++ b/client/modules/User/components/DashboardTabSwitcher.jsx
@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { FilterIcon } from '../../../common/icons';
-import IconButton from '../../../common/IconButton';
-import RouterTab from '../../../common/RouterTab';
+import { IconButton } from '../../../common/IconButton';
+import { RouterTab } from '../../../common/RouterTab';
 import { Options } from '../../IDE/components/Header/MobileNav';
 import { toggleDirectionForField } from '../../IDE/actions/sorting';
 import useIsMobile from '../../IDE/hooks/useIsMobile';
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index 6d5d6a1b2e..5bac902ecf 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
-import useSyncFormTranslations from '../../../common/useSyncFormTranslations';
+import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
 
 function LoginForm() {
   const { t, i18n } = useTranslation();
@@ -105,7 +105,7 @@ function LoginForm() {
                 {t('LoginForm.Errors.invalidCredentials')}
               </span>
             )}
-            <Button type="submit" disabled={submitting}>
+            <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
               {t('LoginForm.Submit')}
             </Button>
           </form>
diff --git a/client/modules/User/components/LoginForm.unit.test.jsx b/client/modules/User/components/LoginForm.unit.test.jsx
index 7ab207fb01..2f4262c16b 100644
--- a/client/modules/User/components/LoginForm.unit.test.jsx
+++ b/client/modules/User/components/LoginForm.unit.test.jsx
@@ -23,7 +23,9 @@ jest.mock('../actions', () => ({
   )
 }));
 
-jest.mock('../../../common/useSyncFormTranslations', () => jest.fn());
+jest.mock('../../../common/useSyncFormTranslations', () => ({
+  useSyncFormTranslations: jest.fn()
+}));
 
 const subject = () => {
   reduxRender(<LoginForm />, {
diff --git a/client/modules/User/components/NewPasswordForm.jsx b/client/modules/User/components/NewPasswordForm.jsx
index 95e96ec4a3..feca326c77 100644
--- a/client/modules/User/components/NewPasswordForm.jsx
+++ b/client/modules/User/components/NewPasswordForm.jsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { validateNewPassword } from '../../../utils/reduxFormUtils';
 import { updatePassword } from '../actions';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 
 function NewPasswordForm(props) {
   const { resetPasswordToken } = props;
@@ -64,7 +64,10 @@ function NewPasswordForm(props) {
               </p>
             )}
           </Field>
-          <Button type="submit" disabled={submitting || invalid || pristine}>
+          <Button
+            type={ButtonTypes.SUBMIT}
+            disabled={submitting || invalid || pristine}
+          >
             {t('NewPasswordForm.SubmitSetNewPassword')}
           </Button>
         </form>
diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx
index f44e7649bd..fe3752fdf4 100644
--- a/client/modules/User/components/ResetPasswordForm.jsx
+++ b/client/modules/User/components/ResetPasswordForm.jsx
@@ -4,7 +4,7 @@ import { Form, Field } from 'react-final-form';
 import { useDispatch, useSelector } from 'react-redux';
 import { validateResetPassword } from '../../../utils/reduxFormUtils';
 import { initiateResetPassword } from '../actions';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 
 function ResetPasswordForm(props) {
   const { t } = useTranslation();
@@ -45,7 +45,7 @@ function ResetPasswordForm(props) {
             )}
           </Field>
           <Button
-            type="submit"
+            type={ButtonTypes.SUBMIT}
             disabled={
               submitting || invalid || pristine || resetPasswordInitiate
             }
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index 26fb6fa97d..45d44da875 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -5,9 +5,9 @@ import { useDispatch } from 'react-redux';
 import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
-import Button from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { apiClient } from '../../../utils/apiClient';
-import useSyncFormTranslations from '../../../common/useSyncFormTranslations';
+import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
 
 const timeoutRef = { current: null };
 
@@ -204,7 +204,10 @@ function SignupForm() {
                 </div>
               )}
             </Field>
-            <Button type="submit" disabled={submitting || invalid || pristine}>
+            <Button
+              type={ButtonTypes.SUBMIT}
+              disabled={submitting || invalid || pristine}
+            >
               {t('SignupForm.SubmitSignup')}
             </Button>
           </form>
diff --git a/client/modules/User/components/SocialAuthButton.jsx b/client/modules/User/components/SocialAuthButton.jsx
index ac4a8b3b11..e48c660b67 100644
--- a/client/modules/User/components/SocialAuthButton.jsx
+++ b/client/modules/User/components/SocialAuthButton.jsx
@@ -6,7 +6,7 @@ import { useDispatch } from 'react-redux';
 
 import { remSize } from '../../../theme';
 import { GithubIcon, GoogleIcon } from '../../../common/icons';
-import Button from '../../../common/Button';
+import { Button } from '../../../common/Button';
 import { unlinkService } from '../actions';
 import { persistState } from '../../IDE/actions/project';
 
diff --git a/client/modules/User/pages/CollectionView.jsx b/client/modules/User/pages/CollectionView.jsx
index e52eb2c279..8207388086 100644
--- a/client/modules/User/pages/CollectionView.jsx
+++ b/client/modules/User/pages/CollectionView.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import Nav from '../../IDE/components/Header/Nav';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 import Collection from '../components/Collection';
 
 const CollectionView = () => {
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index fcde949cd7..1626d0d369 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -3,14 +3,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import Button from '../../../common/Button';
+import { Button } from '../../../common/Button';
 import Nav from '../../IDE/components/Header/Nav';
 import Overlay from '../../App/components/Overlay';
 import AssetList from '../../IDE/components/AssetList';
 import AssetSize from '../../IDE/components/AssetSize';
 import CollectionList from '../../IDE/components/CollectionList';
 import SketchList from '../../IDE/components/SketchList';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 import { newProject } from '../../IDE/actions/project';
 import {
   CollectionSearchbar,
diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.jsx
index 7ad9d2fa79..d21d2446b9 100644
--- a/client/modules/User/pages/EmailVerificationView.jsx
+++ b/client/modules/User/pages/EmailVerificationView.jsx
@@ -4,7 +4,7 @@ import { useLocation, useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { verifyEmailConfirmation } from '../actions';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 import Nav from '../../IDE/components/Header/Nav';
 
 const EmailVerificationView = () => {
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index 1847c84b50..b931c50ea8 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import LoginForm from '../components/LoginForm';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../IDE/components/Header/Nav';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 
 function LoginView() {
   const { t } = useTranslation();
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx
index cb9d7cbe1d..2bc310e6a3 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.jsx
@@ -7,7 +7,7 @@ import { useParams } from 'react-router-dom';
 import NewPasswordForm from '../components/NewPasswordForm';
 import { validateResetPasswordToken } from '../actions';
 import Nav from '../../IDE/components/Header/Nav';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 
 function NewPasswordView() {
   const { t } = useTranslation();
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 9188a5e2c8..e744311b7c 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.jsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import ResetPasswordForm from '../components/ResetPasswordForm';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 import Nav from '../../IDE/components/Header/Nav';
 
 function ResetPasswordView() {
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index 6b1e1fff51..16e038c6e0 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -5,7 +5,7 @@ import { useTranslation, Trans } from 'react-i18next';
 import SignupForm from '../components/SignupForm';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../IDE/components/Header/Nav';
-import RootPage from '../../../components/RootPage';
+import { RootPage } from '../../../components/RootPage';
 
 function SignupView() {
   const { t } = useTranslation();
diff --git a/package-lock.json b/package-lock.json
index f968228de1..31ceb6c724 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",
@@ -50505,6 +50556,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",
@@ -50746,6 +50803,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",
@@ -50807,6 +50885,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 a6117f966d..431913dd97 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",