diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css
index f0839419..990d5343 100644
--- a/components/OrganizedContent.module.css
+++ b/components/OrganizedContent.module.css
@@ -3,6 +3,7 @@
 }
 
 .contentHeading {
+  font-size: 1.5rem;
   margin: 1rem 0 1rem 0;
   color: var(--blue-2);
 }
diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index f83f55fa..bfffb466 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -21,6 +21,12 @@ interface Props {
   children: ReactNode;
 }
 
+interface ChildProps {
+  headings: Heading[];
+  currentIndex: number;
+  link: Link;
+}
+
 export const OrganizedContent: React.FC<Props> = ({
   headings,
   currentIndex,
@@ -28,131 +34,12 @@ export const OrganizedContent: React.FC<Props> = ({
   link: Link,
 }) => {
   const isReadAll = headings[currentIndex].name === "Read All";
-  const prevHeading =
-    currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
-      ? headings[currentIndex - 1]
-      : undefined;
-  const nextHeading =
-    currentIndex < headings.length - 1 && !isReadAll
-      ? headings[currentIndex + 1]
-      : undefined;
-
   const isMobile = false;
 
-  if (!isMobile) {
-    return (
-      <div className={styles.organizedContent}>
-        <div className={styles.nav}>
-          {headings.map((heading, index) => (
-            <div
-              className={
-                index === currentIndex ? styles.selectedHeadingArea : ""
-              }
-              key={heading.url}
-            >
-              <div
-                className={
-                  styles.navOption +
-                  " " +
-                  (index === currentIndex
-                    ? styles.selectedHeading
-                    : heading.name === "Read All"
-                    ? styles.readAll
-                    : "")
-                }
-              >
-                {index === currentIndex && (
-                  <span className={styles.selectedMarker} />
-                )}
-                <Link url={heading.url}>{heading.name}</Link>
-              </div>
-              <div className={styles.divider}></div>
-            </div>
-          ))}
-        </div>
-
-        <div>
-          {!isReadAll ? (
-            <h2 className={styles.contentHeading}>
-              {headings[currentIndex].name}
-            </h2>
-          ) : (
-            <div>
-              {headings
-                .filter(
-                  (heading: { name: string }) => heading.name !== "Read All"
-                )
-                .map((heading) => (
-                  <div key={heading.url}>
-                    <h2 className={styles.contentHeading}>{heading.name}</h2>
-                    {heading.content}
-                  </div>
-                ))}
-            </div>
-          )}
-          {children}
-          <div className={styles.footer}>
-            {prevHeading && (
-              <div className={styles.clickable}>
-                <Link url={prevHeading.url}>
-                  <div className={styles.footerSection}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="14"
-                      height="9"
-                      viewBox="0 0 14 9"
-                      className={styles.arrow + " " + styles.prevArrow}
-                    >
-                      <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
-                    </svg>
-                    <div>
-                      <div className={styles.prevNext}>Previous</div>
-                      <div className={styles.arrowHeading}>
-                        {prevHeading.name}
-                      </div>
-                    </div>
-                  </div>
-                </Link>
-              </div>
-            )}
-            <div></div>
-            {nextHeading && (
-              <div className={styles.clickable}>
-                <Link url={nextHeading.url}>
-                  <div className={styles.footerSection}>
-                    <div>
-                      <div className={styles.prevNext + " " + styles.nextText}>
-                        Next
-                      </div>
-                      <div className={styles.arrowHeading}>
-                        {nextHeading.name}
-                      </div>
-                    </div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="14"
-                      height="9"
-                      viewBox="0 0 14 9"
-                      className={styles.arrow + " " + styles.nextArrow}
-                    >
-                      <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
-                    </svg>
-                  </div>
-                </Link>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  } else {
+  if (isMobile) {
     return (
       <div>
-        {!isReadAll ? (
-          <h2 className={styles.contentHeading}>
-            {headings[currentIndex].name}
-          </h2>
-        ) : (
+        {isReadAll ? (
           <div>
             {headings
               .filter(
@@ -165,60 +52,139 @@ export const OrganizedContent: React.FC<Props> = ({
                 </div>
               ))}
           </div>
+        ) : (
+          <h2 className={styles.contentHeading}>
+            {headings[currentIndex].name}
+          </h2>
         )}
         {children}
-        <div className={styles.footer}>
-          {prevHeading && (
-            <div className={styles.clickable}>
-              <Link url={prevHeading.url}>
-                <div className={styles.footerSection}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="9"
-                    viewBox="0 0 14 9"
-                    className={styles.arrow + " " + styles.prevArrow}
-                  >
-                    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
-                  </svg>
-                  <div>
-                    <div className={styles.prevNext}>Previous</div>
-                    <div className={styles.arrowHeading}>
-                      {prevHeading.name}
-                    </div>
+        <Footer headings={headings} currentIndex={currentIndex} link={Link} />
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.organizedContent}>
+        <Nav headings={headings} currentIndex={currentIndex} link={Link} />
+        <div>
+          {isReadAll ? (
+            <div>
+              {headings
+                .filter(
+                  (heading: { name: string }) => heading.name !== "Read All"
+                )
+                .map((heading) => (
+                  <div key={heading.url}>
+                    <h2 className={styles.contentHeading}>{heading.name}</h2>
+                    {heading.content}
                   </div>
-                </div>
-              </Link>
-            </div>
-          )}
-          <div></div>
-          {nextHeading && (
-            <div className={styles.clickable}>
-              <Link url={nextHeading.url}>
-                <div className={styles.footerSection}>
-                  <div>
-                    <div className={styles.prevNext + " " + styles.nextText}>
-                      Next
-                    </div>
-                    <div className={styles.arrowHeading}>
-                      {nextHeading.name}
-                    </div>
-                  </div>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="9"
-                    viewBox="0 0 14 9"
-                    className={styles.arrow + " " + styles.nextArrow}
-                  >
-                    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
-                  </svg>
-                </div>
-              </Link>
+                ))}
             </div>
+          ) : (
+            <h2 className={styles.contentHeading}>
+              {headings[currentIndex].name}
+            </h2>
           )}
+          {children}
+          <Footer headings={headings} currentIndex={currentIndex} link={Link} />
         </div>
       </div>
     );
   }
 };
+
+const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
+  return (
+    <div className={styles.nav}>
+      {headings.map((heading, index) => (
+        <div
+          className={index === currentIndex ? styles.selectedHeadingArea : ""}
+          key={heading.url}
+        >
+          <div
+            className={
+              styles.navOption +
+              " " +
+              (index === currentIndex
+                ? styles.selectedHeading
+                : heading.name === "Read All"
+                ? styles.readAll
+                : "")
+            }
+          >
+            {index === currentIndex && (
+              <span className={styles.selectedMarker} />
+            )}
+            <Link url={heading.url}>{heading.name}</Link>
+          </div>
+          <div className={styles.divider}></div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const Footer: React.FC<ChildProps> = ({
+  headings,
+  currentIndex,
+  link: Link,
+}) => {
+  const isReadAll = headings[currentIndex].name === "Read All";
+  const prevHeading =
+    currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
+      ? headings[currentIndex - 1]
+      : undefined;
+  const nextHeading =
+    currentIndex < headings.length - 1 && !isReadAll
+      ? headings[currentIndex + 1]
+      : undefined;
+
+  return (
+    <div className={styles.footer}>
+      {prevHeading && (
+        <div className={styles.clickable}>
+          <Link url={prevHeading.url}>
+            <div className={styles.footerSection}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="9"
+                viewBox="0 0 14 9"
+                className={styles.arrow + " " + styles.prevArrow}
+              >
+                <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
+              </svg>
+              <div>
+                <div className={styles.prevNext}>Previous</div>
+                <div className={styles.arrowHeading}>{prevHeading.name}</div>
+              </div>
+            </div>
+          </Link>
+        </div>
+      )}
+      <div></div>
+      {nextHeading && (
+        <div className={styles.clickable}>
+          <Link url={nextHeading.url}>
+            <div className={styles.footerSection}>
+              <div>
+                <div className={styles.prevNext + " " + styles.nextText}>
+                  Next
+                </div>
+                <div className={styles.arrowHeading}>{nextHeading.name}</div>
+              </div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="9"
+                viewBox="0 0 14 9"
+                className={styles.arrow + " " + styles.nextArrow}
+              >
+                <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
+              </svg>
+            </div>
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/pages/playground.mdx b/pages/playground.mdx
index 603f70f0..d642d77e 100644
--- a/pages/playground.mdx
+++ b/pages/playground.mdx
@@ -70,3 +70,5 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
 Codey is supposed to say something here...
 
 <OrganizedContentDemo />
+
+---
\ No newline at end of file