diff --git a/components/TableOfContents.jsx b/components/TableOfContents.jsx
index 9ca3e835..3a5710b1 100644
--- a/components/TableOfContents.jsx
+++ b/components/TableOfContents.jsx
@@ -9,81 +9,93 @@ import "../src/css/toc.css";
  */
 export default function TableOfContents() {
   return (
-    <div className="TOC">
+    <div className="TOC-container">
       <h2>Table of Contents</h2>
-      <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
+      <div className="TOC-content">
+        <div className="TOC-col">
           <ul>
             <li>
-              <a href="../docs/directory_structure">Directory Structure</a>
+              <a href="../docs">Introduction</a>
             </li>
             <li>
-              <a href="../docs/npm_scripts">NPM Scripts</a>
+              <a href="../docs/quick_start">Quick Start</a>
             </li>
             <li>
-              <a href="../docs/environment_variables">Environment Variables</a>
+              <a href="../docs/prerequisites">Prerequisites</a>
             </li>
             <li>
-              <a href="../docs/ci_cd">Continuous Integration / Deployment</a>
+              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>
-        </li>
-        <li>
-          Deployment
+        </div>
+        <div className="TOC-col">
           <ul>
             <li>
-              <a href="../docs/local_application">Local Application</a>
+              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>
-              <a href="../docs/firebase">Firebase</a>
+              External Tools
+              <ul>
+                <li>
+                  <a href="../docs/event_triggers">Event Triggers</a>
+                </li>
+                <li>
+                  <a href="../docs/prolific">Prolific</a>
+                </li>
+              </ul>
             </li>
             <li>
-              <a href="../docs/psiturk">PsiTurk</a>
+              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/gh_pages">GitHub Pages</a>
+              <a href="../docs/troubleshooting">Troubleshooting</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
index b36151b1..46585db8 100644
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -1,7 +1,23 @@
 /**
 * For table of contents items 
 */
-.TOC {
+.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;
@@ -10,7 +26,7 @@
   padding: 0;
 }
 
-.TOC > ul {
+.TOC-col > ul {
   display: inline-block;
   text-align: center;
   list-style: none;
@@ -18,12 +34,12 @@
   margin: 0;
 }
 
-.TOC > ul > li {
+.TOC-col > ul > li {
   margin-bottom: 1.5vh;
   font-size: large;
 }
 
-.TOC > ul > li > ul {
+.TOC-col > ul > li > ul {
   text-align: center;
   list-style: none;
   padding: 0;