diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx
index ae685fccc..43587e26c 100644
--- a/components/Modal/Modal.tsx
+++ b/components/Modal/Modal.tsx
@@ -35,6 +35,10 @@ export type ModalPropsType = {
    * Applies style classes to the child content.
    */
   childrenClassName?: string;
+  /**
+   * Applies classNames to the overlay.
+   */
+  overlayClassName?: string;
 };
 
 function Modal({
diff --git a/components/Timeline/Timeline.js b/components/Timeline/Timeline.tsx
similarity index 90%
rename from components/Timeline/Timeline.js
rename to components/Timeline/Timeline.tsx
index 8aeba612c..f1b873a46 100644
--- a/components/Timeline/Timeline.js
+++ b/components/Timeline/Timeline.tsx
@@ -1,11 +1,12 @@
 import historyData from './historyData';
 import styles from './Timeline.module.css';
 import TimelineEvent from './TimelineEvent/TimelineEvent';
+import { objectKeys } from 'utils/types';
 
 function Timeline() {
   return (
     <div className={styles.timeline}>
-      {Object.keys(historyData).map(year => (
+      {objectKeys(historyData).map(year => (
         <div className={styles.segment} key={year}>
           <div className={styles.date}>
             <h3>{year}</h3>
diff --git a/components/Timeline/TimelineEvent/TimelineEvent.js b/components/Timeline/TimelineEvent/TimelineEvent.tsx
similarity index 58%
rename from components/Timeline/TimelineEvent/TimelineEvent.js
rename to components/Timeline/TimelineEvent/TimelineEvent.tsx
index be69d71d8..e3b29eb7a 100644
--- a/components/Timeline/TimelineEvent/TimelineEvent.js
+++ b/components/Timeline/TimelineEvent/TimelineEvent.tsx
@@ -1,12 +1,11 @@
-import { array, node, oneOfType, string } from 'prop-types';
 import styles from './TimelineEvent.module.css';
 
-TimelineEvent.propTypes = {
-  content: oneOfType([string, array, node]).isRequired,
-  title: string.isRequired,
+export type TimelineEventPropsType = {
+  content: React.ReactNode | React.ReactNode[];
+  title: string;
 };
 
-function TimelineEvent({ content, title }) {
+function TimelineEvent({ content, title }: TimelineEventPropsType) {
   return (
     <div className="mb-8 border-1 border-solid border-[#c5c5c5] p-5 rounded-md">
       <h4 className="capitalize md:text-2xl">{title}</h4>
diff --git a/components/Timeline/TimelineEvent/__tests__/TimelineEvent.test.js b/components/Timeline/TimelineEvent/__tests__/TimelineEvent.test.tsx
similarity index 100%
rename from components/Timeline/TimelineEvent/__tests__/TimelineEvent.test.js
rename to components/Timeline/TimelineEvent/__tests__/TimelineEvent.test.tsx
diff --git a/components/Timeline/TimelineEvent/__tests__/__snapshots__/TimelineEvent.test.js.snap b/components/Timeline/TimelineEvent/__tests__/__snapshots__/TimelineEvent.test.tsx.snap
similarity index 100%
rename from components/Timeline/TimelineEvent/__tests__/__snapshots__/TimelineEvent.test.js.snap
rename to components/Timeline/TimelineEvent/__tests__/__snapshots__/TimelineEvent.test.tsx.snap
diff --git a/components/Timeline/TimelineNav/TimelineNav.js b/components/Timeline/TimelineNav/TimelineNav.tsx
similarity index 97%
rename from components/Timeline/TimelineNav/TimelineNav.js
rename to components/Timeline/TimelineNav/TimelineNav.tsx
index 5e4566f76..267979490 100644
--- a/components/Timeline/TimelineNav/TimelineNav.js
+++ b/components/Timeline/TimelineNav/TimelineNav.tsx
@@ -1,3 +1,4 @@
+// @ts-expect-error
 import { Link } from 'react-scroll';
 import historyData from '../historyData';
 
diff --git a/components/Timeline/TimelineNav/__tests__/TimelineNav.test.js b/components/Timeline/TimelineNav/__tests__/TimelineNav.test.tsx
similarity index 100%
rename from components/Timeline/TimelineNav/__tests__/TimelineNav.test.js
rename to components/Timeline/TimelineNav/__tests__/TimelineNav.test.tsx
diff --git a/components/Timeline/TimelineNav/__tests__/__snapshots__/TimelineNav.test.js.snap b/components/Timeline/TimelineNav/__tests__/__snapshots__/TimelineNav.test.tsx.snap
similarity index 100%
rename from components/Timeline/TimelineNav/__tests__/__snapshots__/TimelineNav.test.js.snap
rename to components/Timeline/TimelineNav/__tests__/__snapshots__/TimelineNav.test.tsx.snap
diff --git a/components/Timeline/__tests__/Timeline.test.js b/components/Timeline/__tests__/Timeline.test.tsx
similarity index 100%
rename from components/Timeline/__tests__/Timeline.test.js
rename to components/Timeline/__tests__/Timeline.test.tsx
diff --git a/components/Timeline/__tests__/__snapshots__/Timeline.test.js.snap b/components/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
similarity index 100%
rename from components/Timeline/__tests__/__snapshots__/Timeline.test.js.snap
rename to components/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
diff --git a/components/UpgradeBrowserOverlay/UpgradeBrowserOverlay.js b/components/UpgradeBrowserOverlay/UpgradeBrowserOverlay.tsx
similarity index 100%
rename from components/UpgradeBrowserOverlay/UpgradeBrowserOverlay.js
rename to components/UpgradeBrowserOverlay/UpgradeBrowserOverlay.tsx
diff --git a/components/UpgradeBrowserOverlay/__stories__/UpgradeBrowserOverlay.stories.js b/components/UpgradeBrowserOverlay/__stories__/UpgradeBrowserOverlay.stories.js
deleted file mode 100644
index 3326452b1..000000000
--- a/components/UpgradeBrowserOverlay/__stories__/UpgradeBrowserOverlay.stories.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import UpgradeBrowserOverlay from '../UpgradeBrowserOverlay';
-
-export default {
-  component: UpgradeBrowserOverlay,
-  title: 'UpgradeBrowserOverlay',
-};
-
-const Template = arguments_ => <UpgradeBrowserOverlay {...arguments_} />;
-
-export const Default = Template.bind({});
diff --git a/components/UpgradeBrowserOverlay/__stories__/UpgradeBrowserOverlay.stories.tsx b/components/UpgradeBrowserOverlay/__stories__/UpgradeBrowserOverlay.stories.tsx
new file mode 100644
index 000000000..fb2e9f1b5
--- /dev/null
+++ b/components/UpgradeBrowserOverlay/__stories__/UpgradeBrowserOverlay.stories.tsx
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import UpgradeBrowserOverlay from '../UpgradeBrowserOverlay';
+
+type UpgradeBrowserOverlayStoryType = StoryObj<typeof UpgradeBrowserOverlay>;
+
+const meta: Meta<typeof UpgradeBrowserOverlay> = {
+  title: 'UpgradeBrowserOverlay',
+  component: UpgradeBrowserOverlay,
+};
+
+export default meta;
+
+export const Default: UpgradeBrowserOverlayStoryType = {
+  render: () => <UpgradeBrowserOverlay />,
+};
diff --git a/components/UpgradeBrowserOverlay/__tests__/UpgradeBrowserOverlay.test.js b/components/UpgradeBrowserOverlay/__tests__/UpgradeBrowserOverlay.test.tsx
similarity index 100%
rename from components/UpgradeBrowserOverlay/__tests__/UpgradeBrowserOverlay.test.js
rename to components/UpgradeBrowserOverlay/__tests__/UpgradeBrowserOverlay.test.tsx
diff --git a/components/UpgradeBrowserOverlay/__tests__/__snapshots__/UpgradeBrowserOverlay.test.js.snap b/components/UpgradeBrowserOverlay/__tests__/__snapshots__/UpgradeBrowserOverlay.test.tsx.snap
similarity index 100%
rename from components/UpgradeBrowserOverlay/__tests__/__snapshots__/UpgradeBrowserOverlay.test.js.snap
rename to components/UpgradeBrowserOverlay/__tests__/__snapshots__/UpgradeBrowserOverlay.test.tsx.snap