diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index aa1a94c1..0bc80c42 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -1,106 +1,140 @@
-import React, { ReactNode, ComponentType } from "react";
-import styles from "./OrganizedContent.module.css";
-
-export interface LinkProps {
-  children: string | ReactNode | (string | ReactNode)[]
-  url: string
-}
-
-type Link = ComponentType<LinkProps>
-
-
-interface Heading {
-  name: string;
-  url: string;
-}
-
-interface Props {
-  headings: Heading[];
-  currentIndex: number;
-  link: Link
-  children: ReactNode;
-}
-
-export const OrganizedContent: React.FC<Props> = ({
-  headings,
-  currentIndex,
-  children,
-  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.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 : '')}
-            >
-              <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>}
-        {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>
-  );
-};
+import React, { ReactNode, ComponentType } from "react";
+import styles from "./OrganizedContent.module.css";
+
+export interface LinkProps {
+  children: string | ReactNode | (string | ReactNode)[];
+  url: string;
+}
+
+type Link = ComponentType<LinkProps>;
+
+interface Heading {
+  name: string;
+  url: string;
+  content: ReactNode;
+}
+
+interface Props {
+  headings: Heading[];
+  currentIndex: number;
+  link: Link;
+  children: ReactNode;
+}
+
+export const OrganizedContent: React.FC<Props> = ({
+  headings,
+  currentIndex,
+  children,
+  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.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
+                  : "")
+              }
+            >
+              <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>
+  );
+};
diff --git a/components/playground.tsx b/components/playground.tsx
index e1cc9b63..91eab1f4 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -116,7 +116,6 @@ export function OrganizedContentDemo() {
     {
       name: "Consequences of Unacceptable Behavior",
       url: "d",
-      key: "d",
       content: <div> CODEY </div>,
     },
   ];
@@ -124,8 +123,7 @@ export function OrganizedContentDemo() {
   const readAllSection = {
     name: "Read All",
     url: "readall",
-    key: "readall",
-    content: <div> CODEY FAN CLUB </div>,
+    content: <div> </div>,
   };
 
   sections = [readAllSection, ...sections];