diff --git a/components/TableOfContents.jsx b/components/TableOfContents.jsx
new file mode 100644
index 00000000..3a5710b1
--- /dev/null
+++ b/components/TableOfContents.jsx
@@ -0,0 +1,101 @@
+import React from "react";
+import "../src/css/toc.css";
+
+/**
+ * A Table of Contents for the Honeycomb Docs page
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function TableOfContents() {
+  return (
+    <div className="TOC-container">
+      <h2>Table of Contents</h2>
+      <div className="TOC-content">
+        <div className="TOC-col">
+          <ul>
+            <li>
+              <a href="../docs">Introduction</a>
+            </li>
+            <li>
+              <a href="../docs/quick_start">Quick Start</a>
+            </li>
+            <li>
+              <a href="../docs/prerequisites">Prerequisites</a>
+            </li>
+            <li>
+              Project Organization
+              <ul>
+                <li>
+                  <a href="../docs/directory_structure">Directory Structure</a>
+                </li>
+                <li>
+                  <a href="../docs/npm_scripts">NPM Scripts</a>
+                </li>
+                <li>
+                  <a href="../docs/environment_variables">
+                    Environment Variables
+                  </a>
+                </li>
+                <li>
+                  <a href="../docs/ci_cd">
+                    Continuous Integration / Deployment
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+        <div className="TOC-col">
+          <ul>
+            <li>
+              Deployment
+              <ul>
+                <li>
+                  <a href="../docs/local_application">Local Application</a>
+                </li>
+                <li>
+                  <a href="../docs/firebase">Firebase</a>
+                </li>
+                <li>
+                  <a href="../docs/psiturk">PsiTurk</a>
+                </li>
+                <li>
+                  <a href="../docs/gh_pages">GitHub Pages</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              External Tools
+              <ul>
+                <li>
+                  <a href="../docs/event_triggers">Event Triggers</a>
+                </li>
+                <li>
+                  <a href="../docs/prolific">Prolific</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              Further Reading
+              <ul>
+                <li>
+                  <a href="../docs/github_discussions">Github Discussions</a>
+                </li>
+                <li>
+                  <a href="../docs/version_control">Version Control</a>
+                </li>
+                <li>
+                  <a href="../docs/javascript">JavaScript</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <a href="../docs/troubleshooting">Troubleshooting</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/css/toc.css b/src/css/toc.css
new file mode 100644
index 00000000..46585db8
--- /dev/null
+++ b/src/css/toc.css
@@ -0,0 +1,48 @@
+/**
+* For table of contents items 
+*/
+.TOC-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.TOC-content {
+  display: flex;
+  flex-direction: row;
+  align-items: top;
+  justify-self: center;
+  margin: 1.5vh 0;
+  gap: 5.5vw;
+  padding: 0;
+}
+
+.TOC-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-self: center;
+  margin: 1.5vh 0;
+  padding: 0;
+}
+
+.TOC-col > ul {
+  display: inline-block;
+  text-align: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.TOC-col > ul > li {
+  margin-bottom: 1.5vh;
+  font-size: large;
+}
+
+.TOC-col > ul > li > ul {
+  text-align: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: smaller;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 7352b0fd..544caec8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,50 +1,51 @@
-import React from 'react';
-import clsx from 'clsx';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import TableOfContents from "../../components/TableOfContents.jsx";
 
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 
 const features = [
   {
-    title: 'Modular and Configurable',
-    imageUrl: 'img/undraw_Content_creator_re_pt5b.svg',
+    title: "Modular and Configurable",
+    imageUrl: "img/undraw_Content_creator_re_pt5b.svg",
     description: (
       <>
-        Honeycomb was designed to be modular, composable, easily configured to deploy to Linux, Mac,
-
-        Windows, Browsers, PsiTurk, and more
-
+        Honeycomb was designed to be modular, composable, easily configured to
+        deploy to Linux, Mac, Windows, Browsers, PsiTurk, and more
       </>
     ),
   },
   {
-    title: 'Packed with automation',
-    imageUrl: 'img/undraw_User_flow_re_bvfx.svg',
+    title: "Packed with automation",
+    imageUrl: "img/undraw_User_flow_re_bvfx.svg",
     description: (
-      <>Honeycomb includes GitHub Actions that build the executables/deployments for you.</>
+      <>
+        Honeycomb includes GitHub Actions that build the executables/deployments
+        for you.
+      </>
     ),
   },
   {
-    title: 'Based on trusted and mature libraries',
-    imageUrl: 'img/undraw_Code_review_re_woeb.svg',
-    description: <>Honeycomb relies on mature libraries such as JSPsych, React and Electron</>,
+    title: "Based on trusted and mature libraries",
+    imageUrl: "img/undraw_Code_review_re_woeb.svg",
+    description: (
+      <>
+        Honeycomb relies on mature libraries such as JSPsych, React and Electron
+      </>
+    ),
   },
 ];
 
 function Feature({ imageUrl, title, description }) {
   const imgUrl = useBaseUrl(imageUrl);
   return (
-    <div className={clsx('col col--4', styles.feature)}>
+    <div className={clsx("col col--4", styles.feature)}>
       {imgUrl && (
-        <div className='text--center'>
-          <img
-            className={styles.featureImage}
-            src={imgUrl}
-            alt={title}
-          />
+        <div className="text--center">
+          <img className={styles.featureImage} src={imgUrl} alt={title} />
         </div>
       )}
       <h3>{title}</h3>
@@ -59,35 +60,24 @@ function Home() {
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description='Description will go into a meta tag in <head />'
+      description="Description will go into a meta tag in <head />"
     >
-      <header className={clsx('hero', styles.heroBanner)}>
-        <div className='container'>
-          <h1 className='hero__title'>{siteConfig.title}</h1>
-          <p className='hero__subtitle'>{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
-            <Link
-              className={clsx(
-                'button button--outline button--secondary button--lg',
-                styles.getStarted
-              )}
-              to={useBaseUrl('/docs')}
-            >
-              Read the Docs
-            </Link>
-          </div>
+      <header className={clsx("hero", styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
         </div>
+
+        <TableOfContents />
       </header>
+
       <main>
         {features && features.length > 0 && (
           <section className={styles.features}>
-            <div className='container'>
-              <div className='row'>
+            <div className="container">
+              <div className="row">
                 {features.map((props, idx) => (
-                  <Feature
-                    key={idx}
-                    {...props}
-                  />
+                  <Feature key={idx} {...props} />
                 ))}
               </div>
             </div>
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index c1aa8512..244507cf 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -10,6 +10,8 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 @media screen and (max-width: 966px) {