diff --git a/frontend/src/Components/H1/H1.module.scss b/frontend/src/Components/H1/H1.module.scss
new file mode 100644
index 000000000..c386d0c6b
--- /dev/null
+++ b/frontend/src/Components/H1/H1.module.scss
@@ -0,0 +1,16 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  letter-spacing: -0.05rem;
+  font-weight: 800;
+  padding-bottom: 0.5rem;
+
+  @include for-desktop-up {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
diff --git a/frontend/src/Components/H1/H1.tsx b/frontend/src/Components/H1/H1.tsx
new file mode 100644
index 000000000..4cca77c35
--- /dev/null
+++ b/frontend/src/Components/H1/H1.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H1.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H1({ className, ...props }: Props) {
+  return <h1 className={classNames(styles.header, className)} {...props} />;
+}
diff --git a/frontend/src/Components/H1/index.ts b/frontend/src/Components/H1/index.ts
new file mode 100644
index 000000000..e50995d70
--- /dev/null
+++ b/frontend/src/Components/H1/index.ts
@@ -0,0 +1 @@
+export { H1 } from './H1';
diff --git a/frontend/src/Components/H2/H2.module.scss b/frontend/src/Components/H2/H2.module.scss
new file mode 100644
index 000000000..2cbcf50d9
--- /dev/null
+++ b/frontend/src/Components/H2/H2.module.scss
@@ -0,0 +1,11 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+}
diff --git a/frontend/src/Components/H2/H2.tsx b/frontend/src/Components/H2/H2.tsx
new file mode 100644
index 000000000..d2a0e7d20
--- /dev/null
+++ b/frontend/src/Components/H2/H2.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H2.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H2({ className, ...props }: Props) {
+  return <h2 className={classNames(styles.header, className)} {...props} />;
+}
diff --git a/frontend/src/Components/H2/index.ts b/frontend/src/Components/H2/index.ts
new file mode 100644
index 000000000..a744ec27c
--- /dev/null
+++ b/frontend/src/Components/H2/index.ts
@@ -0,0 +1 @@
+export { H2 } from './H2';
diff --git a/frontend/src/Components/H3/H3.module.scss b/frontend/src/Components/H3/H3.module.scss
new file mode 100644
index 000000000..c37968cf8
--- /dev/null
+++ b/frontend/src/Components/H3/H3.module.scss
@@ -0,0 +1,11 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+  padding-bottom: 0.25rem;
+}
diff --git a/frontend/src/Components/H3/H3.tsx b/frontend/src/Components/H3/H3.tsx
new file mode 100644
index 000000000..3fd04d037
--- /dev/null
+++ b/frontend/src/Components/H3/H3.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H3.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H3({ className, ...props }: Props) {
+  return <h3 className={classNames(styles.header, className)} {...props} />;
+}
diff --git a/frontend/src/Components/H3/index.ts b/frontend/src/Components/H3/index.ts
new file mode 100644
index 000000000..58bc36186
--- /dev/null
+++ b/frontend/src/Components/H3/index.ts
@@ -0,0 +1 @@
+export { H3 } from './H3';
diff --git a/frontend/src/Components/H4/H4.module.scss b/frontend/src/Components/H4/H4.module.scss
new file mode 100644
index 000000000..1d449e109
--- /dev/null
+++ b/frontend/src/Components/H4/H4.module.scss
@@ -0,0 +1,11 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+  padding-bottom: 0.25rem;
+}
diff --git a/frontend/src/Components/H4/H4.tsx b/frontend/src/Components/H4/H4.tsx
new file mode 100644
index 000000000..c98cab378
--- /dev/null
+++ b/frontend/src/Components/H4/H4.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H4.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H4({ className, ...props }: Props) {
+  return <h4 className={classNames(styles.header, className)} {...props} />;
+}
diff --git a/frontend/src/Components/H4/index.ts b/frontend/src/Components/H4/index.ts
new file mode 100644
index 000000000..c03b89992
--- /dev/null
+++ b/frontend/src/Components/H4/index.ts
@@ -0,0 +1 @@
+export { H4 } from './H4';
diff --git a/frontend/src/Components/H5/H5.module.scss b/frontend/src/Components/H5/H5.module.scss
new file mode 100644
index 000000000..ded6ac9d3
--- /dev/null
+++ b/frontend/src/Components/H5/H5.module.scss
@@ -0,0 +1,11 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+  padding-bottom: 0.25rem;
+}
diff --git a/frontend/src/Components/H5/H5.tsx b/frontend/src/Components/H5/H5.tsx
new file mode 100644
index 000000000..010145d78
--- /dev/null
+++ b/frontend/src/Components/H5/H5.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H5.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H5({ className, ...props }: Props) {
+  return <h5 className={classNames(styles.header, className)} {...props} />;
+}
diff --git a/frontend/src/Components/H5/index.ts b/frontend/src/Components/H5/index.ts
new file mode 100644
index 000000000..d9d05eb8d
--- /dev/null
+++ b/frontend/src/Components/H5/index.ts
@@ -0,0 +1 @@
+export { H5 } from './H5';
diff --git a/frontend/src/Components/H6/H6.module.scss b/frontend/src/Components/H6/H6.module.scss
new file mode 100644
index 000000000..c444337ea
--- /dev/null
+++ b/frontend/src/Components/H6/H6.module.scss
@@ -0,0 +1,10 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+}
diff --git a/frontend/src/Components/H6/H6.tsx b/frontend/src/Components/H6/H6.tsx
new file mode 100644
index 000000000..cea49760a
--- /dev/null
+++ b/frontend/src/Components/H6/H6.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H6.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H6({ className, ...props }: Props) {
+  return <h6 className={classNames(styles.header, className)} {...props} />;
+}
diff --git a/frontend/src/Components/H6/index.ts b/frontend/src/Components/H6/index.ts
new file mode 100644
index 000000000..bab6ee7c8
--- /dev/null
+++ b/frontend/src/Components/H6/index.ts
@@ -0,0 +1 @@
+export { H6 } from './H6';
diff --git a/frontend/src/Components/index.ts b/frontend/src/Components/index.ts
index c68d11ceb..29182c1ed 100644
--- a/frontend/src/Components/index.ts
+++ b/frontend/src/Components/index.ts
@@ -18,6 +18,12 @@ export { EventQuery } from './EventQuery';
 export { ExpandableHeader } from './ExpandableHeader';
 export { ExpandableList } from './ExpandableList';
 export { Footer } from './Footer';
+export { H1 } from './H1';
+export { H2 } from './H2';
+export { H3 } from './H3';
+export { H4 } from './H4';
+export { H5 } from './H5';
+export { H6 } from './H6';
 export { IconButton } from './IconButton';
 export { Image } from './Image';
 export { ImageCard } from './ImageCard';
diff --git a/frontend/src/Pages/ComponentPage/ComponentPage.tsx b/frontend/src/Pages/ComponentPage/ComponentPage.tsx
index 85c0dd87f..e4871b675 100644
--- a/frontend/src/Pages/ComponentPage/ComponentPage.tsx
+++ b/frontend/src/Pages/ComponentPage/ComponentPage.tsx
@@ -1,4 +1,4 @@
-import { Button, Countdown, InputField, ProgressBar, RadioButton, ToolTip } from '~/Components';
+import { Button, Countdown, H1, H2, H3, H4, H5, H6, InputField, ProgressBar, RadioButton, ToolTip } from '~/Components';
 import { Checkbox } from '~/Components/Checkbox';
 import { Link } from '~/Components/Link';
 import { List } from '~/Components/List';
@@ -15,6 +15,15 @@ import styles from './ComponentPage.module.scss';
 export function ComponentPage() {
   return (
     <div className={styles.wrapper}>
+      <H1>Heading 1</H1>
+      <H2>Heading 2</H2>
+      <H3>Heading 3</H3>
+      <H4>Heading 4</H4>
+      <H5>Heading 5</H5>
+      <H6>Heading 6</H6>
+
+      <br />
+
       <MultiSelect
         options={[
           {