diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css
index 990d5343..95c8b32f 100644
--- a/components/OrganizedContent.module.css
+++ b/components/OrganizedContent.module.css
@@ -2,7 +2,7 @@
   display: flex; 
 }
 
-.contentHeading {
+.organizedContent h1 {
   font-size: 1.5rem;
   margin: 1rem 0 1rem 0;
   color: var(--blue-2);
@@ -35,7 +35,7 @@
   display: flex; 
 }
 
-.selectedHeading {
+.selectedHeadingArea > .navOption {
   color: var(--blue-2);
   font-weight: bold;
 }
diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index 7a0e8f1a..bdbd7782 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -27,58 +27,49 @@ interface ChildProps {
   link: Link;
 }
 
-export const OrganizedContent: React.FC<Props> = ({
+export const OrganizedContent = ({
   headings,
   currentIndex,
-  children,
   link: Link,
-}) => {
+  children,
+}: Props) => {
   const isReadAll = headings[currentIndex].name === "Read All";
-  const isMobile = false;
+
   const readAllContent = headings
     .filter((heading: { name: string }) => heading.name !== "Read All")
     .map((heading) => (
       <div key={heading.url}>
-        <h2 className={styles.contentHeading}>{heading.name}</h2>
+        <h1>{heading.name}</h1>
         {heading.content}
       </div>
     ));
 
-  if (isMobile) {
-    return (
+  const childProps: ChildProps = {
+    headings: headings,
+    currentIndex: currentIndex,
+    link: Link,
+  };
+
+  return (
+    <div className={styles.organizedContent}>
+      <Nav {...childProps} />
       <div>
         {isReadAll ? (
-          <div>{readAllContent}</div>
+          <>{readAllContent}</>
         ) : (
-          <h2 className={styles.contentHeading}>
-            {headings[currentIndex].name}
-          </h2>
+          <>
+            <h1>{headings[currentIndex].name}</h1>
+            {children}
+            <Footer {...childProps} />
+          </>
         )}
-        {children}
-        <Footer headings={headings} currentIndex={currentIndex} link={Link} />
       </div>
-    );
-  } else {
-    return (
-      <div className={styles.organizedContent}>
-        <Nav headings={headings} currentIndex={currentIndex} link={Link} />
-        <div>
-          {isReadAll ? (
-            <div>{readAllContent}</div>
-          ) : (
-            <h2 className={styles.contentHeading}>
-              {headings[currentIndex].name}
-            </h2>
-          )}
-          {children}
-          <Footer headings={headings} currentIndex={currentIndex} link={Link} />
-        </div>
-      </div>
-    );
-  }
+    </div>
+  );
 };
 
-const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
+//todo push class to link
+const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
   return (
     <div className={styles.nav}>
       {headings.map((heading, index) => (
@@ -90,11 +81,7 @@ const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
             className={
               styles.navOption +
               " " +
-              (index === currentIndex
-                ? styles.selectedHeading
-                : heading.name === "Read All"
-                ? styles.readAll
-                : "")
+              (heading.name === "Read All" ? styles.readAll : "")
             }
           >
             {index === currentIndex && (
@@ -109,67 +96,60 @@ const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
   );
 };
 
-const Footer: React.FC<ChildProps> = ({
-  headings,
-  currentIndex,
-  link: Link,
-}) => {
-  const isReadAll = headings[currentIndex].name === "Read All";
+const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
   const prevHeading =
     currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
       ? headings[currentIndex - 1]
       : undefined;
   const nextHeading =
-    currentIndex < headings.length - 1 && !isReadAll
+    currentIndex < headings.length - 1 &&
+    headings[currentIndex + 1].name !== "Read All"
       ? 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>
+        <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>
-          </Link>
-        </div>
+          </div>
+        </Link>
       )}
+      {/* used to always push options to the edges with space-between */}
       <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>
+        <Link url={nextHeading.url}>
+          <div className={styles.footerSection}>
+            <div>
+              <div className={styles.prevNext + " " + styles.nextText}>
+                Next
               </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 className={styles.arrowHeading}>{nextHeading.name}</div>
             </div>
-          </Link>
-        </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>
   );