diff --git a/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap b/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
index 11b93c839..67ddec067 100644
--- a/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
+++ b/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
@@ -219,7 +219,6 @@ exports[`Footer > should render with no props passed 1`] = `
       </ForwardRef(LinkComponent)>
       <OutboundLink
         analyticsEventLabel="Privacy footer link"
-        hasIcon={true}
         href="https://www.iubenda.com/privacy-policy/8174861"
       >
         Privacy
diff --git a/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap b/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap
index c70db6a74..0c25435d3 100644
--- a/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap
+++ b/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap
@@ -13,7 +13,7 @@ exports[`UpdateProfileForm > should render with required props 1`] = `
     Professional Details
   </h3>
   <div
-    className="flex flex-col my-6 mx-0 items-center"
+    className="flex flex-col items-center mx-0 my-6"
   >
     <label
       htmlFor="steps-indicator"
diff --git a/components/Nav/Nav.js b/components/Nav/Nav.tsx
similarity index 88%
rename from components/Nav/Nav.js
rename to components/Nav/Nav.tsx
index af6cea340..11ebf6bc6 100644
--- a/components/Nav/Nav.js
+++ b/components/Nav/Nav.tsx
@@ -25,11 +25,6 @@ export const Nav = () => {
     document.body.style.overflow = 'auto';
   };
 
-  const redirectRightClick = event_ => {
-    event_.preventDefault();
-    Router.push('/branding');
-  };
-
   useEffect(() => {
     Router.events.on('routeChangeComplete', closeMobileMenu);
 
@@ -54,7 +49,10 @@ export const Nav = () => {
             <Link href="/" key="Home">
               <a
                 className={classNames(styles.logoLink, styles.link)}
-                onContextMenu={redirectRightClick}
+                onContextMenu={event => {
+                  event.preventDefault();
+                  Router.push('/branding');
+                }}
               >
                 <Logo className={styles.logo} style={{ width: 224, height: 42 }} fill="#f7f7f7" />
               </a>
@@ -66,7 +64,9 @@ export const Nav = () => {
                   key={navItem.name}
                   {...navItem}
                   icon={
-                    navItem.icon === 'UserLogo' ? <UserLogo className={styles.navIcon} /> : null
+                    'icon' in navItem && navItem.icon === 'UserLogo' ? (
+                      <UserLogo className={styles.navIcon} />
+                    ) : null
                   }
                 />
               ))}
diff --git a/components/Nav/NavListItem/NavListItem.js b/components/Nav/NavListItem/NavListItem.tsx
similarity index 82%
rename from components/Nav/NavListItem/NavListItem.js
rename to components/Nav/NavListItem/NavListItem.tsx
index d923f1392..58eee068c 100644
--- a/components/Nav/NavListItem/NavListItem.js
+++ b/components/Nav/NavListItem/NavListItem.tsx
@@ -1,33 +1,39 @@
 import { useState } from 'react';
 import classNames from 'classnames';
 import Link from 'next/link';
-import { arrayOf, shape, string, element } from 'prop-types';
 import PlusIcon from 'static/images/icons/plus.svg';
 import MinusIcon from 'static/images/icons/minus.svg';
 import styles from './NavListItem.module.css';
 
-NavListItem.propTypes = {
-  href: string.isRequired,
-  name: string.isRequired,
-  sublinks: arrayOf(
-    shape({
-      name: string.isRequired,
-      href: string.isRequired,
-    }),
-  ),
-  icon: element,
+type SublinkType = {
+  name: string;
+  href: string;
 };
 
-NavListItem.defaultProps = {
-  sublinks: [],
-  icon: null,
+export type NavListItemPropsType = {
+  /**
+   * Text used for the label.
+   */
+  name: string;
+  /**
+   * Url to be passed to the base anchor element.
+   */
+  href: string;
+  /**
+   * List of child links containing the `name` and `href`
+   */
+  sublinks?: SublinkType[];
+  /**
+   * Includes an optional icon.
+   */
+  icon?: React.ReactElement | null;
 };
 
-function NavListItem({ sublinks, href, name, icon }) {
+function NavListItem({ sublinks, href, name, icon = null }: NavListItemPropsType) {
   const [areSublinksVisible, setSublinksVisible] = useState(false);
 
-  const handleKeyDown = (event, indexKeyedOn) => {
-    const lastSublinkIndex = sublinks.length - 1;
+  const handleKeyDown = (event: React.KeyboardEvent, indexKeyedOn: number) => {
+    const lastSublinkIndex = sublinks && sublinks.length - 1;
     const isLastSublink = indexKeyedOn === lastSublinkIndex;
     const isFirstSublink = indexKeyedOn === 0;
 
@@ -43,7 +49,7 @@ function NavListItem({ sublinks, href, name, icon }) {
     }
   };
 
-  const hasSublinks = sublinks.length > 0;
+  const hasSublinks = sublinks && sublinks.length > 0;
   const exposeSublinks = () => setSublinksVisible(true);
   const hideSublinks = () => setSublinksVisible(false);
   const invertSublinkVisibility = () => setSublinksVisible(previousState => !previousState);
diff --git a/components/Nav/NavListItem/__tests__/NavListItem.test.js b/components/Nav/NavListItem/__tests__/NavListItem.test.tsx
similarity index 89%
rename from components/Nav/NavListItem/__tests__/NavListItem.test.js
rename to components/Nav/NavListItem/__tests__/NavListItem.test.tsx
index 9c7869775..249831bd6 100644
--- a/components/Nav/NavListItem/__tests__/NavListItem.test.js
+++ b/components/Nav/NavListItem/__tests__/NavListItem.test.tsx
@@ -60,7 +60,7 @@ describe('NavListItem', () => {
   it('should have visible sublinks on when button is clicked', () => {
     const { container } = render(<NavListItem {...testDataWithSublinks} />);
 
-    const button = container.querySelector('button');
+    const button = container.querySelector('button')!;
 
     fireEvent.click(button);
 
@@ -73,7 +73,9 @@ describe('NavListItem', () => {
     expect(queryByTestId('minus-icon')).toBeNull();
     expect(queryByTestId('plus-icon')).not.toBeNull();
 
-    fireEvent.mouseEnter(container.querySelector('button'));
+    const button = container.querySelector('button')!;
+
+    fireEvent.mouseEnter(button);
 
     expect(queryByTestId('minus-icon')).not.toBeNull();
     expect(queryByTestId('plus-icon')).toBeNull();
@@ -86,14 +88,18 @@ describe('NavListItem', () => {
     fireEvent.mouseEnter(link);
     expect(container.querySelector('ul')).not.toHaveClass('invisible');
 
-    fireEvent.click(container.querySelector('button'));
+    const button = container.querySelector('button')!;
+
+    fireEvent.click(button);
     expect(container.querySelector('ul')).toHaveClass('invisible');
   });
 
   it('should show sublinks on click, then hide them on pressing Shift+Tab on first sublink', () => {
     const { container, getByTestId } = render(<NavListItem {...testDataWithSublinks} />);
 
-    fireEvent.click(container.querySelector('button'));
+    const button = container.querySelector('button')!;
+
+    fireEvent.click(button);
     expect(container.querySelector('ul')).not.toHaveClass('invisible');
 
     fireEvent.keyDown(getByTestId('Nav Item Test - 1'), KEY_CODES.TAB_AND_SHIFT);
@@ -103,7 +109,9 @@ describe('NavListItem', () => {
   it('should show sublinks on click, then hide them on pressing Tab on last sublink', () => {
     const { container, getByTestId } = render(<NavListItem {...testDataWithSublinks} />);
 
-    fireEvent.click(container.querySelector('button'));
+    const button = container.querySelector('button')!;
+
+    fireEvent.click(button);
     expect(container.querySelector('ul')).not.toHaveClass('invisible');
 
     fireEvent.keyDown(getByTestId('Nav Item Test - 2'), KEY_CODES.TAB);
diff --git a/components/Nav/NavListItem/__tests__/__snapshots__/NavListItem.test.js.snap b/components/Nav/NavListItem/__tests__/__snapshots__/NavListItem.test.tsx.snap
similarity index 100%
rename from components/Nav/NavListItem/__tests__/__snapshots__/NavListItem.test.js.snap
rename to components/Nav/NavListItem/__tests__/__snapshots__/NavListItem.test.tsx.snap
diff --git a/components/Nav/NavMobile/NavMobile.js b/components/Nav/NavMobile/NavMobile.tsx
similarity index 68%
rename from components/Nav/NavMobile/NavMobile.js
rename to components/Nav/NavMobile/NavMobile.tsx
index 90ea76707..840dc204e 100644
--- a/components/Nav/NavMobile/NavMobile.js
+++ b/components/Nav/NavMobile/NavMobile.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { func, bool, string, arrayOf, shape } from 'prop-types';
 import classNames from 'classnames';
 import { s3 } from 'common/constants/urls';
 import HamburgerIcon from 'static/images/icons/hamburger.svg';
@@ -8,25 +7,53 @@ import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import Image from 'next/image';
 import styles from './NavMobile.module.css';
 
-NavMobile.propTypes = {
-  isOpen: bool.isRequired,
-  openMenu: func.isRequired,
-  closeMenu: func.isRequired,
-  navItems: arrayOf(
-    shape({
-      href: string.isRequired,
-      name: string.isRequired,
-      sublinks: arrayOf(
-        shape({
-          name: string.isRequired,
-          href: string.isRequired,
-        }),
-      ),
-    }),
-  ).isRequired,
+type SublinkType = {
+  /**
+   * String used as the link label.
+   */
+  name: string;
+  /**
+   * String used for the URL.
+   */
+  href: string;
 };
 
-function NavMobile({ isOpen, openMenu, closeMenu, navItems }) {
+type NavItemType = {
+  /**
+   * String used as the link label.
+   */
+  name: string;
+
+  /**
+   * String used for the URL.
+   */
+  href: string;
+  /**
+   * Adds nested sublinks.
+   */
+  sublinks?: SublinkType[];
+};
+
+export type NavMobilePropsType = {
+  /**
+   * Sets if the mobile navigation is open or closed.
+   */
+  isOpen: boolean;
+  /**
+   * Function called when open button is clicked.
+   */
+  openMenu: () => void;
+  /**
+   * Function called when close button is clicked.
+   */
+  closeMenu: () => void;
+  /**
+   * List of navigations items.
+   */
+  navItems: NavItemType[];
+};
+
+function NavMobile({ isOpen, openMenu, closeMenu, navItems }: NavMobilePropsType) {
   return (
     <header className={styles.NavMobile} data-testid="Mobile Nav Container">
       <Link href="/">
@@ -64,9 +91,7 @@ function NavMobile({ isOpen, openMenu, closeMenu, navItems }) {
           <ul className={styles.ul}>
             <li className={styles.li} key="Home">
               <Link href="/">
-                <a className={styles.link} name="dropdown">
-                  Home
-                </a>
+                <a className={styles.link}>Home</a>
               </Link>
             </li>
             {navItems.map(navlink => (
diff --git a/components/Nav/NavMobile/__tests__/NavMobile.test.js b/components/Nav/NavMobile/__tests__/NavMobile.test.tsx
similarity index 89%
rename from components/Nav/NavMobile/__tests__/NavMobile.test.js
rename to components/Nav/NavMobile/__tests__/NavMobile.test.tsx
index 5feacb8d1..494b8482d 100644
--- a/components/Nav/NavMobile/__tests__/NavMobile.test.js
+++ b/components/Nav/NavMobile/__tests__/NavMobile.test.tsx
@@ -49,7 +49,9 @@ describe('NavMobile', () => {
       />,
     );
 
-    fireEvent.click(wrapper.queryByTestId('Hamburger Button'));
+    const hamburgerButton = wrapper.queryByTestId('Hamburger Button')!;
+
+    fireEvent.click(hamburgerButton);
 
     expect(mockOpen).toHaveBeenCalled();
   });
@@ -61,7 +63,9 @@ describe('NavMobile', () => {
       <NavMobile navItems={mobileNavItems} isOpen openMenu={() => {}} closeMenu={mockClose} />,
     );
 
-    fireEvent.click(wrapper.queryByTestId(CLOSE_BUTTON));
+    const closeButton = wrapper.queryByTestId(CLOSE_BUTTON)!;
+
+    fireEvent.click(closeButton);
 
     expect(mockClose).toHaveBeenCalled();
   });
diff --git a/components/Nav/NavMobile/__tests__/__snapshots__/NavMobile.test.js.snap b/components/Nav/NavMobile/__tests__/__snapshots__/NavMobile.test.tsx.snap
similarity index 100%
rename from components/Nav/NavMobile/__tests__/__snapshots__/NavMobile.test.js.snap
rename to components/Nav/NavMobile/__tests__/__snapshots__/NavMobile.test.tsx.snap
diff --git a/components/Nav/__tests__/Nav.test.js b/components/Nav/__tests__/Nav.test.tsx
similarity index 91%
rename from components/Nav/__tests__/Nav.test.js
rename to components/Nav/__tests__/Nav.test.tsx
index 065d3adca..c79eb0ecf 100644
--- a/components/Nav/__tests__/Nav.test.js
+++ b/components/Nav/__tests__/Nav.test.tsx
@@ -1,3 +1,4 @@
+// @ts-expect-error
 import cookie from 'js-cookie';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { CLOSE_BUTTON } from 'common/constants/testIDs';
@@ -25,7 +26,9 @@ describe('Nav', () => {
 
     expect(screen.queryByTestId('Mobile Nav')).toBeNull();
 
-    fireEvent.click(screen.queryByTestId('Hamburger Button'));
+    const hamburgerButton = screen.queryByTestId('Hamburger Button')!;
+
+    fireEvent.click(hamburgerButton);
 
     expect(await screen.findByTestId('Mobile Nav')).not.toBeNull();
   });
diff --git a/components/Nav/__tests__/__snapshots__/Nav.test.js.snap b/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
similarity index 100%
rename from components/Nav/__tests__/__snapshots__/Nav.test.js.snap
rename to components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
diff --git a/components/OutboundLink/OutboundLink.js b/components/OutboundLink/OutboundLink.tsx
similarity index 65%
rename from components/OutboundLink/OutboundLink.js
rename to components/OutboundLink/OutboundLink.tsx
index 18fa8a9f9..5a534f3b5 100644
--- a/components/OutboundLink/OutboundLink.js
+++ b/components/OutboundLink/OutboundLink.tsx
@@ -1,23 +1,33 @@
-import { bool, node, string } from 'prop-types';
 import { gtag } from 'common/utils/thirdParty/gtag';
 import ExternalLinkIcon from 'static/images/icons/FontAwesome/external-link-square-alt-solid.svg';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import classNames from 'node_modules/classnames/index';
 
-OutboundLink.propTypes = {
-  // will report this label plus the URL from where it was clicked
-  analyticsEventLabel: string.isRequired,
-  children: node.isRequired,
-  className: string,
-  'data-testid': string,
-  hasIcon: bool,
-  href: string.isRequired,
-};
-
-OutboundLink.defaultProps = {
-  className: undefined,
-  'data-testid': undefined,
-  hasIcon: true,
+export type OutboundLinkPropsType = {
+  /**
+   * will report this label plus the URL from where it was clicked
+   */
+  analyticsEventLabel: string;
+  /**
+   * Url path for the link.
+   */
+  href: string;
+  /**
+   * Content to be rendered as the link.
+   */
+  children: React.ReactNode;
+  /**
+   * Name of style class to use.
+   */
+  className?: string;
+  /**
+   * Sets an id to the base element for testing.
+   */
+  'data-testid'?: string;
+  /**
+   * Adds an an icon to identify link is an external link.
+   */
+  hasIcon?: boolean;
 };
 
 function OutboundLink({
@@ -25,9 +35,9 @@ function OutboundLink({
   children,
   'data-testid': testID,
   className,
-  hasIcon,
+  hasIcon = true,
   href,
-}) {
+}: OutboundLinkPropsType) {
   const isNotMailToLink = !href.startsWith('mailto:');
 
   const trackOutboundLinkClick = () => {
diff --git a/components/OutboundLink/__stories__/OutboundLink.stories.js b/components/OutboundLink/__stories__/OutboundLink.stories.js
deleted file mode 100644
index 27d91369e..000000000
--- a/components/OutboundLink/__stories__/OutboundLink.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { descriptions } from 'common/constants/descriptions';
-import OutboundLink from '../OutboundLink';
-
-export default {
-  component: OutboundLink,
-  title: 'OutboundLink',
-};
-
-const Template = arguments_ => <OutboundLink {...arguments_} />;
-
-// Default OutboundLink supplied with only required args
-export const Default = Template.bind({});
-Default.args = {
-  analyticsEventLabel: 'Event label',
-  children: descriptions.short,
-  href: '#',
-};
diff --git a/components/OutboundLink/__stories__/OutboundLink.stories.tsx b/components/OutboundLink/__stories__/OutboundLink.stories.tsx
new file mode 100644
index 000000000..29fbf9894
--- /dev/null
+++ b/components/OutboundLink/__stories__/OutboundLink.stories.tsx
@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import OutboundLink from '../OutboundLink';
+
+type OutboudLinkStoryType = StoryObj<typeof OutboundLink>;
+
+const meta: Meta<typeof OutboundLink> = {
+  title: 'OutboundLink',
+  component: OutboundLink,
+  args: {
+    analyticsEventLabel: 'Event label',
+    children: descriptions.short,
+    href: '#',
+  },
+};
+
+export default meta;
+
+export const Default: OutboudLinkStoryType = {
+  render: args => <OutboundLink {...args} />,
+};
diff --git a/components/OutboundLink/__tests__/OutboundLink.test.js b/components/OutboundLink/__tests__/OutboundLink.test.tsx
similarity index 100%
rename from components/OutboundLink/__tests__/OutboundLink.test.js
rename to components/OutboundLink/__tests__/OutboundLink.test.tsx
diff --git a/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap b/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.tsx.snap
similarity index 100%
rename from components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap
rename to components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.tsx.snap
diff --git a/components/Pagination/Pagination.js b/components/Pagination/Pagination.tsx
similarity index 88%
rename from components/Pagination/Pagination.js
rename to components/Pagination/Pagination.tsx
index 3e05a05e5..792d88536 100644
--- a/components/Pagination/Pagination.js
+++ b/components/Pagination/Pagination.tsx
@@ -1,24 +1,38 @@
-import { number, string, object } from 'prop-types';
 import LeftAngleIcon from 'static/images/icons/FontAwesome/angle-left-solid.svg';
 import RightAngleIcon from 'static/images/icons/FontAwesome/angle-right-solid.svg';
 import { PREV_PAGE_BUTTON, NEXT_PAGE_BUTTON } from '../../common/constants/testIDs';
 import PaginationItem from './PaginationItem/PaginationItem';
 
-Pagination.propTypes = {
-  currentPage: number.isRequired,
-  pathname: string.isRequired,
-  query: object.isRequired,
-  totalPages: number.isRequired,
+export type PaginationPropsType = {
+  /**
+   * Sets the current page number to indicate which PaginationItem is styled differently.
+   */
+  currentPage: number;
+  /**
+   * Sets the current page number to indicate which PaginationItem is styled differently.
+   */
+  pathname: string;
+  /**
+   * Sets the URL path.
+   */
+  query: Record<string, any>;
+  /**
+   * Sets the total number of pages.
+   */
+  totalPages: number;
 };
 
 export const developmentErrors = {
-  currentPageValue: value => `The value passed for currentPage is ${value}.`,
+  currentPageValue: (value: number) => `The value passed for currentPage is ${value}.`,
   currentPageTooSmall: '"currentPage" cannot be less than 1.',
   currentPageTooBig: '"currentPage" cannot be larger than "totalPages".',
   mustUsePageAsPathParam: `Your path parameter must be "[page]". See https://nextjs.org/docs/routing/dynamic-routes for more`,
 };
 
-const getPagination = (currentPage, totalPages) => {
+const getPagination = (
+  currentPage: PaginationPropsType['currentPage'],
+  totalPages: PaginationPropsType['totalPages'],
+) => {
   // maximum length of the Pagination Bar, should be an odd integer, default is 11
   const MAX_VISIBLE_ELEMENTS = 11;
   const ELEMENTS_ON_ONE_SIDE = (MAX_VISIBLE_ELEMENTS - 1) / 2; // 5
@@ -59,7 +73,7 @@ const getPagination = (currentPage, totalPages) => {
 };
 
 // eslint-disable-next-line react/prop-types
-const PaginationItems = ({ currentPage, pathname, query, totalPages }) => {
+const PaginationItems = ({ currentPage, pathname, query, totalPages }: PaginationPropsType) => {
   const { paginationStart, paginationLength, shouldTruncateStart, shouldTruncateEnd } =
     getPagination(currentPage, totalPages);
 
@@ -118,7 +132,7 @@ const PaginationItems = ({ currentPage, pathname, query, totalPages }) => {
   );
 };
 
-function Pagination({ currentPage, pathname, query, totalPages }) {
+function Pagination({ currentPage, pathname, query, totalPages }: PaginationPropsType) {
   /* Developer Errors */
   if (process.env.NODE_ENV !== 'production') {
     const isCurrentPageTooSmall = currentPage < 1;
diff --git a/components/Pagination/PaginationItem/PaginationItem.js b/components/Pagination/PaginationItem/PaginationItem.tsx
similarity index 56%
rename from components/Pagination/PaginationItem/PaginationItem.js
rename to components/Pagination/PaginationItem/PaginationItem.tsx
index 340f66cfb..81e8c813c 100644
--- a/components/Pagination/PaginationItem/PaginationItem.js
+++ b/components/Pagination/PaginationItem/PaginationItem.tsx
@@ -1,28 +1,43 @@
 import Link from 'next/link';
 import omit from 'lodash/omit';
-import { bool, node, number, object, string } from 'prop-types';
 import classNames from 'classnames';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import styles from './PaginationItem.module.css';
 
-PaginationItem.propTypes = {
-  children: node.isRequired,
-  isCurrent: bool,
-  pathname: string.isRequired,
-  query: object,
-  testId: string.isRequired,
-  value: number,
+export type PaginationItemPropsType = {
+  /**
+   * Content to be rendered as the link.
+   */
+  children: React.ReactNode;
+  /**
+   * Sets the URL path
+   */
+  pathname: string;
+  /**
+   * Sets an id to the base element for testing.
+   */
+  testId: string;
+  /**
+   * Sets styles to indicate the current item is selected.
+   */
+  isCurrent?: boolean;
+  query?: Record<string, any>;
+  value?: number;
 };
 
-PaginationItem.defaultProps = {
-  isCurrent: false,
-  query: {},
-  value: undefined,
-};
-
-function PaginationItem({ children, isCurrent, pathname, query, testId, value }) {
+function PaginationItem({
+  children,
+  isCurrent = false,
+  pathname,
+  query,
+  testId,
+  value,
+}: PaginationItemPropsType) {
   const relevantQueryStringObject = omit(query, ['page']);
-  const realURL = { pathname: pathname.replace('[page]', value), query: relevantQueryStringObject };
+  const realURL = {
+    pathname: pathname.replace('[page]', String(value)),
+    query: relevantQueryStringObject,
+  };
 
   const isClickable = !!value;
 
diff --git a/components/Pagination/PaginationItem/__tests__/PaginationItem.test.js b/components/Pagination/PaginationItem/__tests__/PaginationItem.test.tsx
similarity index 100%
rename from components/Pagination/PaginationItem/__tests__/PaginationItem.test.js
rename to components/Pagination/PaginationItem/__tests__/PaginationItem.test.tsx
diff --git a/components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.js.snap b/components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.tsx.snap
similarity index 100%
rename from components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.js.snap
rename to components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.tsx.snap
diff --git a/components/Pagination/__stories__/Pagination.stories.js b/components/Pagination/__stories__/Pagination.stories.js
deleted file mode 100644
index db6a7f0f5..000000000
--- a/components/Pagination/__stories__/Pagination.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Pagination from '../Pagination';
-
-const totalPages = 20;
-
-export default {
-  component: Pagination,
-  title: 'Pagination',
-  argTypes: {
-    currentPage: {
-      control: {
-        type: 'number',
-        min: 1,
-        max: totalPages,
-      },
-    },
-  },
-};
-
-const Template = arguments_ => {
-  return (
-    <>
-      <span>
-        NOTE: This component cannot be interactive outside of the context of a Next.js router.
-        <br />
-        To see the different states, adjuct controls.
-      </span>
-      <Pagination {...arguments_} />
-    </>
-  );
-};
-export const Default = Template.bind({});
-Default.args = {
-  currentPage: 1,
-  pathname: '/resources/[page]',
-  query: {},
-  totalPages,
-};
diff --git a/components/Pagination/__stories__/Pagination.stories.tsx b/components/Pagination/__stories__/Pagination.stories.tsx
new file mode 100644
index 000000000..a56a8dd8c
--- /dev/null
+++ b/components/Pagination/__stories__/Pagination.stories.tsx
@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Pagination from '../Pagination';
+
+type PaginationStoryType = StoryObj<typeof Pagination>;
+
+const totalPages = 20;
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Pagination',
+  component: Pagination,
+  args: {
+    currentPage: 1,
+    pathname: '/resources/[page]',
+    query: {},
+    totalPages,
+  },
+  argTypes: {
+    currentPage: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: totalPages,
+      },
+    },
+  },
+  decorators: [
+    PaginationStory => (
+      <>
+        <span>
+          NOTE: This component cannot be interactive outside of the context of a Next.js router.
+          <br />
+          To see the different states, adjuct controls.
+        </span>
+        <PaginationStory />
+      </>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Default: PaginationStoryType = {
+  render: args => <Pagination {...args} />,
+};
diff --git a/components/Pagination/__tests__/Pagination.test.js b/components/Pagination/__tests__/Pagination.test.tsx
similarity index 97%
rename from components/Pagination/__tests__/Pagination.test.js
rename to components/Pagination/__tests__/Pagination.test.tsx
index 005ab379e..2add635eb 100644
--- a/components/Pagination/__tests__/Pagination.test.js
+++ b/components/Pagination/__tests__/Pagination.test.tsx
@@ -52,7 +52,7 @@ describe('Pagination', () => {
   it('should throw an error if given value of currentPage is less than 1', () => {
     /* eslint-disable function-paren-newline */
     expect(() =>
-      Pagination({ currentPage: 0, totalPages: 5, pathname: requiredProps.pathname }),
+      Pagination({ currentPage: 0, totalPages: 5, pathname: requiredProps.pathname, query: {} }),
     ).toThrow(developmentErrors.currentPageTooSmall);
     /* eslint-enable function-paren-newline */
   });
@@ -60,7 +60,7 @@ describe('Pagination', () => {
   it('should throw an error if given value of currentPage is greater than totalPages', () => {
     /* eslint-disable function-paren-newline */
     expect(() =>
-      Pagination({ currentPage: 6, totalPages: 5, pathname: requiredProps.pathname }),
+      Pagination({ currentPage: 6, totalPages: 5, pathname: requiredProps.pathname, query: {} }),
     ).toThrow(developmentErrors.currentPageTooBig);
     /* eslint-enable function-paren-newline */
   });
diff --git a/components/Pagination/__tests__/__snapshots__/Pagination.test.js.snap b/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
similarity index 100%
rename from components/Pagination/__tests__/__snapshots__/Pagination.test.js.snap
rename to components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
diff --git a/components/PartnerLogoLink/PartnerLogoLink.js b/components/PartnerLogoLink/PartnerLogoLink.tsx
similarity index 52%
rename from components/PartnerLogoLink/PartnerLogoLink.js
rename to components/PartnerLogoLink/PartnerLogoLink.tsx
index a3208d7dd..86da5422b 100644
--- a/components/PartnerLogoLink/PartnerLogoLink.js
+++ b/components/PartnerLogoLink/PartnerLogoLink.tsx
@@ -1,16 +1,26 @@
-import { string, oneOf } from 'prop-types';
 import Image from 'next/image';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
 
-PartnerLogoLink.propTypes = {
-  logoSource: string.isRequired,
-  name: string.isRequired,
-  url: string.isRequired,
-  size: oneOf(['small', 'medium', 'large']),
-};
+type SizeType = 'small' | 'medium' | 'large';
 
-PartnerLogoLink.defaultProps = {
-  size: 'medium',
+export type PartnerLogoLinkPropsType = {
+  /**
+   * Path to the logo image.
+   */
+  logoSource: string;
+  /**
+   * Applies a name for analytics label and alt text for the image.
+   */
+  name: string;
+  /**
+   * Url for the partner.
+   */
+  url: string;
+  /**
+   * Sets the size of the logo.
+   * @default 'medium'
+   */
+  size?: SizeType;
 };
 
 const sizeMappings = {
@@ -28,12 +38,17 @@ const sizeMappings = {
   },
 };
 
-export default function PartnerLogoLink({ logoSource, name, url, size }) {
+export default function PartnerLogoLink({
+  logoSource,
+  name,
+  url,
+  size = 'medium',
+}: PartnerLogoLinkPropsType) {
   return (
     <div className="text-center w-36">
       <OutboundLink href={url} analyticsEventLabel={`Partner Logo Click - ${name}`} hasIcon={false}>
         <Image
-          className="w-full grayscale h-full text-center opacity-60 transition-all duration-200 ease-linear hover:grayscale-0 hover:opacity-100 hover:transition-all hover:duration-200 hover:ease-linear"
+          className="w-full h-full text-center transition-all duration-200 ease-linear grayscale opacity-60 hover:grayscale-0 hover:opacity-100 hover:transition-all hover:duration-200 hover:ease-linear"
           src={logoSource}
           alt={`${name} logo`}
           {...sizeMappings[size]}
diff --git a/components/PartnerLogoLink/__stories__/PartnerLogoLink.stories.js b/components/PartnerLogoLink/__stories__/PartnerLogoLink.stories.js
deleted file mode 100644
index dfc4fc1a1..000000000
--- a/components/PartnerLogoLink/__stories__/PartnerLogoLink.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { s3 } from 'common/constants/urls';
-import PartnerLogoLink from '../PartnerLogoLink';
-
-export default {
-  component: PartnerLogoLink,
-  title: 'PartnerLogoLink',
-};
-
-const Template = arguments_ => <PartnerLogoLink {...arguments_} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  logoSource: `${s3}partnerLogos/github.png`,
-  name: 'Partner Name',
-  url: '#',
-};
diff --git a/components/PartnerLogoLink/__stories__/PartnerLogoLink.stories.tsx b/components/PartnerLogoLink/__stories__/PartnerLogoLink.stories.tsx
new file mode 100644
index 000000000..0b2ca9abc
--- /dev/null
+++ b/components/PartnerLogoLink/__stories__/PartnerLogoLink.stories.tsx
@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { s3 } from 'common/constants/urls';
+import PartnerLogoLink from '../PartnerLogoLink';
+
+type PartnerLogoLinkStoryType = StoryObj<typeof PartnerLogoLink>;
+
+const meta: Meta<typeof PartnerLogoLink> = {
+  title: 'PartnerLogoLink',
+  component: PartnerLogoLink,
+  args: {
+    logoSource: `${s3}partnerLogos/github.png`,
+    name: 'Partner Name',
+    url: '#',
+  },
+};
+
+export default meta;
+
+export const Default: PartnerLogoLinkStoryType = {
+  render: args => <PartnerLogoLink {...args} />,
+};
diff --git a/components/PartnerLogoLink/__tests__/PartnerLogoLink.test.js b/components/PartnerLogoLink/__tests__/PartnerLogoLink.test.tsx
similarity index 99%
rename from components/PartnerLogoLink/__tests__/PartnerLogoLink.test.js
rename to components/PartnerLogoLink/__tests__/PartnerLogoLink.test.tsx
index ef67cd49f..d40b239fd 100644
--- a/components/PartnerLogoLink/__tests__/PartnerLogoLink.test.js
+++ b/components/PartnerLogoLink/__tests__/PartnerLogoLink.test.tsx
@@ -1,5 +1,4 @@
 import createSnapshotTest from 'test-utils/createSnapshotTest';
-
 import PartnerLogoLink from '../PartnerLogoLink';
 
 describe('PartnerLogoLink', () => {
diff --git a/components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.js.snap b/components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.tsx.snap
similarity index 100%
rename from components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.js.snap
rename to components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.tsx.snap
diff --git a/components/Press/PressLinks/Articles.js b/components/Press/PressLinks/Articles.ts
similarity index 100%
rename from components/Press/PressLinks/Articles.js
rename to components/Press/PressLinks/Articles.ts
diff --git a/components/Press/PressLinks/PressLinks.js b/components/Press/PressLinks/PressLinks.tsx
similarity index 88%
rename from components/Press/PressLinks/PressLinks.js
rename to components/Press/PressLinks/PressLinks.tsx
index 49e541abf..8a8aefb70 100644
--- a/components/Press/PressLinks/PressLinks.js
+++ b/components/Press/PressLinks/PressLinks.tsx
@@ -1,6 +1,7 @@
 import * as Tabs from '@radix-ui/react-tabs';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
 import * as Articles from './Articles';
+import { objectKeys } from 'utils/types';
 import styles from './PressLinks.module.css';
 
 function PressLinks() {
@@ -19,13 +20,13 @@ function PressLinks() {
               </Tabs.Trigger>
             ))}
           </Tabs.List>
-          {Object.keys(Articles).map(region => (
+          {objectKeys(Articles).map(region => (
             <Tabs.Content
               key={`TabsContent_${region}`}
               value={region}
               className={styles.tabsContent}
             >
-              {Articles[region].map(link => (
+              {Articles[region].map((link: { url: string; title: string }) => (
                 <li key={`GroupLink_${link.url}`}>
                   <OutboundLink href={link.url} analyticsEventLabel="Press Article">
                     {link.title}
diff --git a/components/Press/PressLinks/__tests__/PressLinks.test.js b/components/Press/PressLinks/__tests__/PressLinks.test.tsx
similarity index 100%
rename from components/Press/PressLinks/__tests__/PressLinks.test.js
rename to components/Press/PressLinks/__tests__/PressLinks.test.tsx
diff --git a/components/Press/PressLinks/__tests__/__snapshots__/PressLinks.test.js.snap b/components/Press/PressLinks/__tests__/__snapshots__/PressLinks.test.tsx.snap
similarity index 92%
rename from components/Press/PressLinks/__tests__/__snapshots__/PressLinks.test.js.snap
rename to components/Press/PressLinks/__tests__/__snapshots__/PressLinks.test.tsx.snap
index b316be82d..0f5bdc2e0 100644
--- a/components/Press/PressLinks/__tests__/__snapshots__/PressLinks.test.js.snap
+++ b/components/Press/PressLinks/__tests__/__snapshots__/PressLinks.test.tsx.snap
@@ -45,7 +45,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://wtkr.com/2018/05/16/new-program-aims-to-help-veterans-land-jobs-in-tech-industry/"
           >
             New program aims to help veterans land jobs in tech industry
@@ -54,7 +53,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://www.wdtv.com/content/news/Veterans-in-Residence-program-helping-veterans-grow-businesses-482707221.html"
           >
             Veterans in Residence
@@ -63,7 +61,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.wework.com/blog/posts/after-flying-solo-veterans-find-others-who-have-their-back"
           >
             After Flying Solo, Veterans Find Others Who Have Their Backs
@@ -77,7 +74,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://insights.dice.com/2017/01/11/tech-pros-volunteer-fun-ways/"
           >
             How Tech Pros Can Volunteer in Fun Ways
@@ -86,7 +82,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.necn.com/news/business/MassChallenge-Finnest_-Operation-Code_-Sunrise-Health_NECN-441063423.html"
           >
             MassChallenge Finalists: Finnest, Operation Code, Sunrise Health
@@ -95,7 +90,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://www.wickedbandwidth.com/02072017-techbreakfast-microsoft-nerd/"
           >
             TechBreakfast at Microsoft NERD
@@ -104,7 +98,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.youtube.com/watch?v=YGaG_HL3oEQ"
           >
             Operation Code - #BNT80 Boston New Technology Startup Demo
@@ -113,7 +106,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.youtube.com/watch?v=GcvVsVsH-Gg"
           >
             MassChallenge Finalist | Operation Code | Conrad Hollomon
@@ -122,7 +114,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://venturefizz.com/stories/boston/operation-code-creating-coding-community-veterans-and-citizens"
           >
             Operation Code – Creating a Coding Community with Veterans and Citizens
@@ -131,7 +122,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.deepcoredata.com/innovation-spotlight-veterans-mission-operation-code/"
           >
             Innovation Spotlight: Operation Code
@@ -140,7 +130,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://blogs.microsoft.com/newengland/2017/11/10/tech4vets-masschallenge-veterans/"
           >
             tech4vets Masschallenge Veterans
@@ -154,7 +143,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://blog.opportunityatwork.org/techhire-educator-spotlight-operation-code-debd0a796f9d"
           >
             TechHire Educator Spotlight: Operation Code
@@ -163,7 +151,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.switchup.org/blog/why-veterans-will-make-excellent-programmers"
           >
             Why Veterans Will Make Excellent Programmers
@@ -172,7 +159,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.wired.com/story/thousands-of-veterans-want-to-learn-to-code-but-cant/"
           >
             THOUSANDS OF VETERANS WANT TO LEARN TO CODE — BUT CAN’T
@@ -181,7 +167,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://medium.com/the-hum/hacking-entrepreneurship-an-interview-with-david-molina-of-operation-code-12a7e199e4e0"
           >
             Hacking Entrepreneurship — An Interview with David Molina of Operation Code
@@ -190,7 +175,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://blog.teamtreehouse.com/operation-code-connecting-veterans-with-code"
           >
             Operation Code: Connecting Veterans with Code Skills
@@ -199,7 +183,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://blog.github.com/2016-11-11-operation-code-connecting-tech-and-veterans/"
           >
             Operation Code: connecting tech and veterans
@@ -208,7 +191,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.geekwire.com/2016/call-duty-technology-veterans-rally-support-operation-code/"
           >
             When the call of duty is technology, veterans rally to support each other through Operation Code
@@ -217,7 +199,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.youtube.com/watch?v=qoy7scC2SHk"
           >
             Get Coding Now with Operation Code Army Veteran and Founder David Molina
@@ -226,7 +207,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.youtube.com/watch?v=xN7yMoe38xc"
           >
             The New Developer - Operation Code - GitHub Universe 2016
@@ -235,7 +215,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.youtube.com/watch?v=-wSwlLeKFdE"
           >
             What happens when military veterans learn to code - CodeConf 2016
@@ -244,7 +223,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://opensource.com/article/17/4/operation-code-mentors-veterans"
           >
             How Operation Code helps veterans learn programming skills
@@ -253,7 +231,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://softwareengineeringdaily.com/2016/03/20/helping-veterans-learn-code-david-molina/"
           >
             Helping Veterans Learn to Code with David Molina
@@ -262,7 +239,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://developingstory.netlify.com/tds-66-david-molina-from-operation-code"
           >
             Podcast: a developing story as told by developers
@@ -271,7 +247,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.instagram.com/p/21p5bFxUjd/?taken-by=davidcmolina"
           >
             Instagram: David Molina
@@ -280,7 +255,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://blog.teamtreehouse.com/from-aviation-electrician-to-back-end-engineering-bret-funk-operation-code-story"
           >
             From Aviation Electrician to Back End Engineering: Bret Funk’s Operation Code story
@@ -289,7 +263,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://blog.teamtreehouse.com/navy-veteran-to-software-developer-geno-guerreros-operation-code-story"
           >
             Navy Veteran to Software Developer: Geno Guerrero’s Operation Code Story
@@ -298,7 +271,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://blog.teamtreehouse.com/marine-corps-veteran-front-end-developer-billy-le"
           >
             From Marine Corps Veteran to Front End Developer: Billy Le’s Operation Code Story
@@ -307,7 +279,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://techcrunch.com/2015/11/11/few-options-for-veterans-looking-to-enter-tech/"
           >
             Few Options For Veterans Looking To Enter Tech
@@ -316,7 +287,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.ibtimes.com/coding-boot-camps-go-after-veterans-take-silicon-valleys-vacant-tech-jobs-2174421"
           >
             Coding Boot Camps Go After Veterans To Take Silicon Valley's Vacant Tech Jobs
@@ -325,7 +295,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.makeschool.com/blog/20-diversity-and-inclusion-leaders-to-follow-in-2018"
           >
             20 Diversity and Inclusion Leaders to Follow in 2018
@@ -334,7 +303,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://bitshare.cm/news/tech-innovation-meets-military-service-geekwires-memorial-day-remembrance-and-update/"
           >
             Tech innovation meets military service: GeekWire’s Memorial Day remembrance and update
@@ -343,7 +311,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.millennialaction.org/press-archives/vetstechpr"
           >
             MAP HOSTS CONGRESSIONAL BRIEFING ON VETERANS' READINESS IN TECH CAREERS
@@ -352,7 +319,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.advfn.com/news_Analytics-Pros-Inc-Hosts-Training-for-Veterans-a_72657464.html"
           >
             Analytics Pros, Inc. Hosts Training for Veterans and Veterans' Spouses
@@ -361,7 +327,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://mentoringdevelopers.com/episode-36-how-to-pick-a-programming-language-to-learn-for-new-developers-part-2/"
           >
             Episode 36 – How to pick a programming language to learn for new developers – Part 2
@@ -370,7 +335,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.blogs.va.gov/VAntage/33028/upskill-veterans-training-technology-jobs/"
           >
             How to “upskill” Veterans’ training for technology jobs
@@ -379,7 +343,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.instagram.com/p/BbZT3Q-BBDC/"
           >
             Instagram: Operation Code made the front cover of Oregon Veterans News Magazine
@@ -388,7 +351,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://blog.sabio.la/jameel-from-jarhead-to-softwareengineer-9130702da5c1"
           >
             Jameel: From Marines to SoftwareEngineer
@@ -397,7 +359,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.seattletimes.com/business/technology/seattles-code-fellows-wins-approval-under-gi-bill/"
           >
             Seattle coding-school tuition to be covered by GI Bill
@@ -406,7 +367,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://www.koin.com/news/veteran-gi-bill-should-cover-code-school_20180208085618706/960235415"
           >
             Veteran: GI Bill should cover code school
@@ -415,7 +375,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://patriotbootcamp.org/blog/operation-code"
           >
             Patriot Boot Camp And Operation Code Join Forces To Help Military Veterans Become Technology Entrepreneurs
@@ -424,7 +383,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://www.maswired.com/operation-code-wants-veterans-to-work-in-tech/"
           >
             Operation Code wants veterans to work in tech
@@ -433,7 +391,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="http://diversemilitary.net/2017/06/27/coding-bootcamps-accepts-gi-bill/"
           >
             Coding Bootcamps Accepts GI Bill
@@ -442,7 +399,6 @@ exports[`PressLinks > should render with no props passed 1`] = `
         <li>
           <OutboundLink
             analyticsEventLabel="Press Article"
-            hasIcon={true}
             href="https://news.clearancejobs.com/2017/07/17/operation-code-looks-help-veterans-land-careers/"
           >
             Operation Code Looks to Help Veterans Land IT Careers
diff --git a/components/Press/PressPhotos/PressPhotos.js b/components/Press/PressPhotos/PressPhotos.tsx
similarity index 100%
rename from components/Press/PressPhotos/PressPhotos.js
rename to components/Press/PressPhotos/PressPhotos.tsx
diff --git a/components/Press/PressPhotos/__tests__/PressPhotos.test.js b/components/Press/PressPhotos/__tests__/PressPhotos.test.tsx
similarity index 100%
rename from components/Press/PressPhotos/__tests__/PressPhotos.test.js
rename to components/Press/PressPhotos/__tests__/PressPhotos.test.tsx
diff --git a/components/Press/PressPhotos/__tests__/__snapshots__/PressPhotos.test.js.snap b/components/Press/PressPhotos/__tests__/__snapshots__/PressPhotos.test.tsx.snap
similarity index 100%
rename from components/Press/PressPhotos/__tests__/__snapshots__/PressPhotos.test.js.snap
rename to components/Press/PressPhotos/__tests__/__snapshots__/PressPhotos.test.tsx.snap
diff --git a/components/Press/PressVideos/PressVideos.js b/components/Press/PressVideos/PressVideos.tsx
similarity index 100%
rename from components/Press/PressVideos/PressVideos.js
rename to components/Press/PressVideos/PressVideos.tsx
diff --git a/components/Press/PressVideos/__tests__/PressVideos.test.js b/components/Press/PressVideos/__tests__/PressVideos.test.tsx
similarity index 100%
rename from components/Press/PressVideos/__tests__/PressVideos.test.js
rename to components/Press/PressVideos/__tests__/PressVideos.test.tsx
diff --git a/components/Press/PressVideos/__tests__/__snapshots__/PressVideos.test.js.snap b/components/Press/PressVideos/__tests__/__snapshots__/PressVideos.test.tsx.snap
similarity index 100%
rename from components/Press/PressVideos/__tests__/__snapshots__/PressVideos.test.js.snap
rename to components/Press/PressVideos/__tests__/__snapshots__/PressVideos.test.tsx.snap
diff --git a/components/Press/index.js b/components/Press/index.ts
similarity index 100%
rename from components/Press/index.js
rename to components/Press/index.ts
diff --git a/components/ProgressIndicator/ProgressIndicator.js b/components/ProgressIndicator/ProgressIndicator.tsx
similarity index 67%
rename from components/ProgressIndicator/ProgressIndicator.js
rename to components/ProgressIndicator/ProgressIndicator.tsx
index 5ddf39208..0a9b89429 100644
--- a/components/ProgressIndicator/ProgressIndicator.js
+++ b/components/ProgressIndicator/ProgressIndicator.tsx
@@ -1,28 +1,30 @@
-import { number } from 'prop-types';
-
 export const developmentErrors = {
   currentStepTooLow: '"currentStep" cannot be negative',
   currentStepTooHigh: '"currentStep" cannot be greater than "totalSteps"',
   totalStepsTooLow: '"totalSteps" must be greater than zero',
 };
 
-const throwDevelopmentException = (expression, message) => {
+const throwDevelopmentException = (expression: boolean, message: string) => {
   if (process.env.NODE_ENV !== 'production' && expression) {
     throw new Error(message);
   }
 };
 
-ProgressIndicator.propTypes = {
-  stepNumber: number,
-  totalSteps: number,
-};
-
-ProgressIndicator.defaultProps = {
-  stepNumber: 0,
-  totalSteps: 1,
+export type ProgressIndicatorPropsType = {
+  /**
+   * Sets the current step number.
+   */
+  stepNumber: number;
+  /**
+   * Sets the total number of steps.
+   */
+  totalSteps: number;
 };
 
-export default function ProgressIndicator({ stepNumber, totalSteps }) {
+export default function ProgressIndicator({
+  stepNumber = 0,
+  totalSteps = 1,
+}: ProgressIndicatorPropsType) {
   throwDevelopmentException(totalSteps < 1, developmentErrors.totalStepsTooLow);
   throwDevelopmentException(stepNumber < 0, developmentErrors.currentStepTooLow);
   throwDevelopmentException(stepNumber > totalSteps, developmentErrors.currentStepTooHigh);
@@ -30,7 +32,7 @@ export default function ProgressIndicator({ stepNumber, totalSteps }) {
   const percentageCompleted = (stepNumber / totalSteps) * 100;
 
   return (
-    <div className="flex flex-col my-6 mx-0 items-center">
+    <div className="flex flex-col items-center mx-0 my-6">
       <label htmlFor="steps-indicator">
         {stepNumber}/{totalSteps} Complete
       </label>
diff --git a/components/ProgressIndicator/__stories__/ProgressIndicator.stories.js b/components/ProgressIndicator/__stories__/ProgressIndicator.stories.tsx
similarity index 84%
rename from components/ProgressIndicator/__stories__/ProgressIndicator.stories.js
rename to components/ProgressIndicator/__stories__/ProgressIndicator.stories.tsx
index 711cea993..b3239bf99 100644
--- a/components/ProgressIndicator/__stories__/ProgressIndicator.stories.js
+++ b/components/ProgressIndicator/__stories__/ProgressIndicator.stories.tsx
@@ -1,3 +1,4 @@
+import { Meta, StoryObj } from '@storybook/react';
 import {
   Title,
   ArgTypes,
@@ -9,28 +10,10 @@ import {
 } from '@storybook/blocks';
 import ProgressIndicator from '../ProgressIndicator';
 
-export const Default = {
-  render: args => <ProgressIndicator {...args} />,
-};
-
-export const TotalSteps = {
-  render: args => <ProgressIndicator {...args} />,
-  args: {
-    stepNumber: 0,
-    totalSteps: 100,
-  },
-};
-
-export const StepNumber = {
-  render: args => <ProgressIndicator {...args} />,
-  args: {
-    stepNumber: 40,
-    totalSteps: 100,
-  },
-};
+type ProgressIndicatorStoryType = StoryObj<typeof ProgressIndicator>;
 
-const meta = {
-  title: 'Progress Indicator',
+const meta: Meta<typeof ProgressIndicator> = {
+  title: 'ProgressIndicator',
   component: ProgressIndicator,
   argTypes: {
     stepNumber: {
@@ -90,3 +73,23 @@ const meta = {
 };
 
 export default meta;
+
+export const Default: ProgressIndicatorStoryType = {
+  render: args => <ProgressIndicator {...args} />,
+};
+
+export const TotalSteps: ProgressIndicatorStoryType = {
+  ...Default,
+  args: {
+    stepNumber: 0,
+    totalSteps: 100,
+  },
+};
+
+export const StepNumber: ProgressIndicatorStoryType = {
+  ...Default,
+  args: {
+    stepNumber: 40,
+    totalSteps: 100,
+  },
+};
diff --git a/components/ProgressIndicator/__tests__/ProgressIndicator.test.js b/components/ProgressIndicator/__tests__/ProgressIndicator.test.tsx
similarity index 100%
rename from components/ProgressIndicator/__tests__/ProgressIndicator.test.js
rename to components/ProgressIndicator/__tests__/ProgressIndicator.test.tsx
diff --git a/components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap b/components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.tsx.snap
similarity index 87%
rename from components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
rename to components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.tsx.snap
index 99303655c..9eb10a379 100644
--- a/components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
+++ b/components/ProgressIndicator/__tests__/__snapshots__/ProgressIndicator.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ProgressIndicator > should render with required props 1`] = `
 <div
-  className="flex flex-col my-6 mx-0 items-center"
+  className="flex flex-col items-center mx-0 my-6"
 >
   <label
     htmlFor="steps-indicator"
diff --git a/components/Timeline/__tests__/__snapshots__/Timeline.test.js.snap b/components/Timeline/__tests__/__snapshots__/Timeline.test.js.snap
index f31947bd8..980aeb6e2 100644
--- a/components/Timeline/__tests__/__snapshots__/Timeline.test.js.snap
+++ b/components/Timeline/__tests__/__snapshots__/Timeline.test.js.snap
@@ -36,7 +36,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Angel Hack"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://angelhack.com"
             >
               AngelHack,
@@ -81,7 +80,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Bmore On Rails"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://www.meetup.com/bmore-on-rails/"
             >
               "Bmore on Rails"
@@ -92,7 +90,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="One Mounth Rails"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://onemonth.com"
             >
               One Month's Rails
@@ -103,7 +100,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Patriot Boot Camp"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://patriotbootcamp.org/"
             >
               Patriot Boot Camp
@@ -163,7 +159,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Cascadia Conference"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="http://cascadiarubyconf.com/"
             >
               Cascadia Ruby,
@@ -174,7 +169,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Code Fellows"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://www.codefellows.org"
             >
               Code Fellows,
@@ -185,7 +179,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Operation Code Old Repository"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="//github.com/OperationCode/operationcode"
             >
               GitHub
@@ -204,7 +197,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Code Fellows"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://www.codefellows.org"
             >
               Code Fellows,
@@ -215,7 +207,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Hack Summit"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://hacksummit.org/"
             >
               hack.summit,
@@ -294,7 +285,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="VET TEC"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://www.va.gov/education/about-gi-bill-benefits/how-to-use-benefits/vettec-high-tech-program/"
             >
               VET TEC
@@ -305,7 +295,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="VET TEC"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://www.va.gov/education/about-gi-bill-benefits/how-to-use-benefits/vettec-high-tech-program/"
             >
               VET TEC
@@ -350,7 +339,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Guidestar"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://www.guidestar.org/"
             >
               Guidestar.org,
@@ -402,7 +390,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
              
             <OutboundLink
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://www.guidestar.org/profile/shared/52626ac8-5e8b-445a-889e-30bf1ac0b46e"
             >
               Platinum Seal of Transparency
@@ -413,7 +400,6 @@ exports[`Timeline > should render with no props passed passed 1`] = `
             <OutboundLink
               alt="Guidestar"
               analyticsEventLabel="History Link"
-              hasIcon={true}
               href="https://www.guidestar.org/"
             >
               Guidestar.org,
diff --git a/utils/types.ts b/utils/types.ts
new file mode 100644
index 000000000..90984c719
--- /dev/null
+++ b/utils/types.ts
@@ -0,0 +1,2 @@
+export const objectKeys = <Type extends object>(value: Type) =>
+  Object.keys(value) as Array<keyof Type>;