diff --git a/app/components/BackButton.tsx b/app/components/BackButton.tsx
new file mode 100644
index 0000000..c9e07bd
--- /dev/null
+++ b/app/components/BackButton.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+
+const BackButton: React.FC<{ href: string }> = ({ href }) => {
+  return (
+    <Link href={href} legacyBehavior>
+      <a className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 mt-4 rounded inline-flex items-center">
+        <FontAwesomeIcon icon={faArrowLeft} className="mr-2" />
+        Back
+      </a>
+    </Link>
+  );
+};
+
+export default BackButton;
\ No newline at end of file
diff --git a/app/components/MusicInfo.tsx b/app/components/MusicInfo.tsx
new file mode 100644
index 0000000..19752d8
--- /dev/null
+++ b/app/components/MusicInfo.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import Link from 'next/link';
+
+const MusicInfo: React.FC = () => {
+  return (
+    <div className="max-w-2xl mx-auto text-center text-gray-200">
+      <section className="mb-12">
+        <h2 className="text-2xl font-semibold mb-4">Late Summer 2024</h2>
+        <div className="flex justify-center space-x-4">
+          <Link href="/time-periods/late-summer-2024/what-was-going-on" legacyBehavior>
+            <a className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
+              WHAT WAS GOING ON
+            </a>
+          </Link>
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-2xl font-semibold mb-4">Early Summer 2024</h2>
+        <div className="flex justify-center space-x-4">
+          <Link href="/time-periods/early-summer-2024/what-was-going-on" legacyBehavior>
+            <a className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
+              WHAT WAS GOING ON
+            </a>
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default MusicInfo;
\ No newline at end of file
diff --git a/app/components/pages/time-periods/early-summer-2024/WhatWasGoingOn.tsx b/app/components/pages/time-periods/early-summer-2024/WhatWasGoingOn.tsx
new file mode 100644
index 0000000..2560d8e
--- /dev/null
+++ b/app/components/pages/time-periods/early-summer-2024/WhatWasGoingOn.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import BackButton from '../../../BackButton';
+
+const WhatWasGoingOnLateSummer2024: React.FC = () => {
+  return (
+    <div className="max-w-2xl mx-auto text-center">
+      <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
+        What was going on during the start of summer 2024?
+      </h1>
+      <div className="px-6 pt-6">
+        <p className="text-gray-300 mb-4">
+          During Early Summer 2024, I was walking a ton in towns all across Massachusetts. During this time, I would listen to a <i>lot</i> of music. I regret not finding out about LastFM for so long... During this time, I was always happy, especially when I had music or a YouTube video playing. I would also call my friends often during this time.
+        </p>
+        <h2 className="text-2xl font-semibold mb-4 mt-12 text-gray-200">Context</h2>
+        <p className="text-gray-300 mb-4">
+          This summer was the one where I came back from my abusive treatment center. I was finally free from the place that had been holding me back for so long. So as you can imagine, I felt free as a bird.
+        </p>
+        <p className="text-gray-300 mb-4">
+          With this chance to explore, being in so many different towns, I really had a good time and made good memories, which I will not be writing about.
+        </p>
+        <BackButton href="/music" />
+      </div>
+    </div>
+  );
+};
+
+export default WhatWasGoingOnLateSummer2024;
\ No newline at end of file
diff --git a/app/components/pages/time-periods/late-summer-2024/WhatWasGoingOn.tsx b/app/components/pages/time-periods/late-summer-2024/WhatWasGoingOn.tsx
new file mode 100644
index 0000000..8374feb
--- /dev/null
+++ b/app/components/pages/time-periods/late-summer-2024/WhatWasGoingOn.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import BackButton from '../../../BackButton';
+
+const WhatWasGoingOnLateSummer2024: React.FC = () => {
+  return (
+    <div className="max-w-2xl mx-auto text-center">
+      <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
+        What was going on during the end of summer 2024?
+      </h1>
+      <div className="px-6 pt-6">
+        <p className="text-gray-300 mb-4">
+          During late summer 2024, my depression and the "after effects" of treatment really kicked in. I had quit going to my therapist as I didn't feel like they were doing much of anything for me. I am very happy to say that since I quit my therapist, I have been doing much better.
+        </p>
+        <p className="text-gray-300 mb-4">
+          At this time, the baseball season was over, so I was walking around much less. I was still listening to a lot of music and I started getting into less depressed songs. I was also starting to get into more "normal" music, which was an interesting phase (which I believe I'm still in).
+        </p>
+        <p className="text-gray-300 mb-4">
+          A highlight of late summer 2024 was a vacation I took. This vacation has entire albums which remind me of it and I will always cherish those memories deeply.
+        </p>
+        <BackButton href="/music" />
+      </div>
+    </div>
+  );
+};
+
+export default WhatWasGoingOnLateSummer2024;
\ No newline at end of file
diff --git a/app/music/page.tsx b/app/music/page.tsx
index 88dc59b..0f75857 100644
--- a/app/music/page.tsx
+++ b/app/music/page.tsx
@@ -1,5 +1,6 @@
 import Header from '../components/Header'
 import MusicWidget from '../components/Music'
+import MusicInfo from '../components/MusicInfo'
 import Footer from '../components/Footer'
 
 export default function Music() {
@@ -8,6 +9,7 @@ export default function Music() {
       <Header />
       <main className="flex-grow container mx-auto px-4 py-12">
         <MusicWidget />
+        <MusicInfo />
       </main>
       <Footer />
     </div>
diff --git a/app/time-periods/early-summer-2024/page.tsx b/app/time-periods/early-summer-2024/page.tsx
new file mode 100644
index 0000000..9094a9e
--- /dev/null
+++ b/app/time-periods/early-summer-2024/page.tsx
@@ -0,0 +1,15 @@
+import Header from '../../components/Header'
+import WhatWasGoingOn from '../../components/pages/time-periods/early-summer-2024/WhatWasGoingOn'
+import Footer from '../../components/Footer'
+
+export default function Music() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-grow container mx-auto px-4 py-12">
+        <WhatWasGoingOn />
+      </main>
+      <Footer />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/time-periods/early-summer-2024/what-was-going-on/page.tsx b/app/time-periods/early-summer-2024/what-was-going-on/page.tsx
new file mode 100644
index 0000000..c94df7b
--- /dev/null
+++ b/app/time-periods/early-summer-2024/what-was-going-on/page.tsx
@@ -0,0 +1,15 @@
+import Header from '../../../components/Header'
+import WhatWasGoingOn from '../../../components/pages/time-periods/early-summer-2024/WhatWasGoingOn'
+import Footer from '../../../components/Footer'
+
+export default function Music() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-grow container mx-auto px-4 py-12">
+        <WhatWasGoingOn />
+      </main>
+      <Footer />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/time-periods/late-summer-2024/page.tsx b/app/time-periods/late-summer-2024/page.tsx
new file mode 100644
index 0000000..8675989
--- /dev/null
+++ b/app/time-periods/late-summer-2024/page.tsx
@@ -0,0 +1,15 @@
+import Header from '../../components/Header'
+import WhatWasGoingOn from '../../components/pages/time-periods/late-summer-2024/WhatWasGoingOn'
+import Footer from '../../components/Footer'
+
+export default function Music() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-grow container mx-auto px-4 py-12">
+        <WhatWasGoingOn />
+      </main>
+      <Footer />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/time-periods/late-summer-2024/what-was-going-on/page.tsx b/app/time-periods/late-summer-2024/what-was-going-on/page.tsx
new file mode 100644
index 0000000..9522331
--- /dev/null
+++ b/app/time-periods/late-summer-2024/what-was-going-on/page.tsx
@@ -0,0 +1,15 @@
+import Header from '../../../components/Header'
+import WhatWasGoingOn from '../../../components/pages/time-periods/late-summer-2024/WhatWasGoingOn'
+import Footer from '../../../components/Footer'
+
+export default function Music() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-grow container mx-auto px-4 py-12">
+        <WhatWasGoingOn />
+      </main>
+      <Footer />
+    </div>
+  )
+}
\ No newline at end of file