diff --git a/docs/how-to-contribute/tutorials/how-to-add-splash-message.mdx b/docs/how-to-contribute/tutorials/how-to-add-splash-message.mdx
new file mode 100644
index 0000000..884f768
--- /dev/null
+++ b/docs/how-to-contribute/tutorials/how-to-add-splash-message.mdx
@@ -0,0 +1,96 @@
+import Admonition from '@theme/Admonition';
+
+# Tutorial: How to add a splash message to the site
+
+:::info
+
+To use all of the tools in this guide, you will need to be 13-years of age or older due to the terms of use of a software tool you will use, [GitHub](https://docs.github.com/en/site-policy/github-terms/github-terms-of-service). If you are under 13-years of age, please email me at [jpkerrane01@bvsd.org](mailto:jpkerrane01@bvsd.org) and we can adjust these steps so you can contribute!
+
+:::
+
+Hello there! In this tutorial, you will learn step-by-step how to add a "Splash" message to the homepage on the [homepage](https://theorybear.org) using GitHub codespaces.
+
+## Step 1: Fork the repository
+To start, [Fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo) the repository. A fork is a copy of the source code that you are free to edit, and later merge into the actual site! To do that:
+1. Navigate to https://github.com/thatrobotdev/theorybear
+2. Click the Fork button.
+3. Click "Create fork"
+
+## Step 2: Create a GitHub codespace for the site
+
+To start edtiting the site, you will be creating a **remote development environment** This is a computer running on GitHub's servers that downloads the source code of the site and allows you to edit a version of the website in your web browser!
+
+1. Navigate to your fork (usually, https://github.com/[username]/theorybear)
+2. Click the green "Code" button, and navigate to the "Codespaces" tab.
+3. Sign in/Create a new GitHub account.
+4. Click "Create codespace"
+
+You should now be able to see a copy of the website in your web browser that you can navigate through in the explore window. Clicking on a file in the left bar will allow you to edit it.
+
+## Step 3: Install the site's dependencies and start a development server
+
+Now is the time to install the packages like [docusarus](https://docusaurus.io/) and [React](https://react.dev/) that allow the site to run!
+
+1. In the bottom window, in the terminal, type in the following command and hit ENTER:
+
+`npm install`
+
+This command uses the [package manager](https://en.wikipedia.org/wiki/Package_manager) [npm](https://www.npmjs.com/) to download all of the tools that the site needs to build the website from the source code.
+
+2. Run `npm run start` to start a development server. You will see a pop-up asking to open a new window. Accept this, and you will see a live-updating version of the site that changes when you change the source code in the GitHub codespaces window!
+
+### Step 4: Add the splash message
+
+Now it's time to add the splash message! In the left window file explorer, navigate to `src/components/Splash/index.tsx`. Find the code that looks like this:
+
+```js
+let splashMessages = [
+  ["You've got this!", "JP"],
+  ["Need more cowbell!", "JP"],
+  ["Beary fun music theory ;)", "JP"],
+  ["Every Good Bear Does Fine", "JP"],
+  ["FACE!!!!!", "JP"],
+  ["Arctic Cubs Explore Glaciers :)", "JP"]
+];
+```
+
+This is the code that the website randomizes to display a splash message.
+
+The first string in the JavaScript array is the message, and the second string is the attribution. Add an element to the array with your unique splash message, and add your first name to the second string in the array.
+
+```js
+let splashMessages = [
+  ["You've got this!", "JP"],
+  ["Need more cowbell!", "JP"],
+  ["Beary fun music theory ;)", "JP"],
+  ["Every Good Bear Does Fine", "JP"],
+  ["FACE!!!!!", "JP"],
+  ["Arctic Cubs Explore Glaciers :)", "JP"],
+  ["Open source!!", "JP"]
+];
+```
+
+### Step 5: Create a pull request to add your changes to the site
+
+Now that you have edited your local version of the site, it's time to create a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) to add your change to the site!
+
+1. In VSCode, navigate to the [Source Code tab](https://code.visualstudio.com/docs/sourcecontrol/overview) on the left panel.
+2. Enter a message in the message box that describes your changes, like "Added splash message".
+3. On the green "Confirm" button, click the arrow on the side to open more actions, clicking "Confirm and Create Pull Request". If you are asked to stage all your changes and commit them directly, hit "Yes".
+4. On the pull request screen, create a title for the pull request that describes all of your changes, and add a description if needed.
+5. Click "Create"
+
+### Step 6: 🎉 Wait for Pull Request approval, and celebrate
+
+If you navigate to https://github.com/thatrobotdev/theorybear/pulls, you should see your pull request in the list on the main repository! This will be reviewed by project maintainers, and then if accepted, merged into the main site!
+
+Thank you very much for your contribution!
+
+### Further resources
+
+If you want to learn more about open-source development, we recommend these resources to get started!
+
+- [Git and GitHub learning resources](https://docs.github.com/en/get-started/quickstart/git-and-github-learning-resources)
+- [freeCodeCamp: Web Design, JavaScript, React, and more!](https://www.freecodecamp.org/)
+- [React](https://react.dev/learn)
+- [Docusaurus](https://docusaurus.io/docs)
\ No newline at end of file
diff --git a/sidebars.js b/sidebars.js
index 5abb151..a16caad 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -251,6 +251,10 @@ const sidebars = {
   howToContribute: [
     "how-to-contribute/overview",
     "how-to-contribute/tri-m",
+    {
+      type: "autogenerated",
+      dirName: "how-to-contribute/tutorials"
+    }
   ],
 };
 
diff --git a/src/components/Countdown/index.tsx b/src/components/Countdown/index.tsx
deleted file mode 100644
index 00fee02..0000000
--- a/src/components/Countdown/index.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react';
-import styles from './styles.module.css';
-import Link from '@docusaurus/Link';
-
-const today = new Date();
-
-type TestDate = {
-  number: Number;
-  date: Date;
-};
-
-const PumaPrideTestDates: TestDate[] = [
-  {
-    number: 1,
-    date: new Date('2023-10-06'),
-  }
-];
-
-const PhoenixFireTestDates: TestDate[] = [
-  {
-    number: 1,
-    date: new Date('2023-10-06'),
-  }
-];
-
-const ConcertChoirTestDates: TestDate[] = [
-  {
-    number: 1,
-    date: new Date('2023-10-13'),
-  }
-];
-
-function closestEventDate(testDates: TestDate[]): TestDate {
-  let closestEventDate: Date;
-  let closestEventNumber: Number;
-
-  for(let i = 0; i < testDates.length; i++) {
-    // Upcoming event must be after today
-    if(testDates[i].date > today) {
-        // If closestEvent is undefined, set it to the current event
-        if(typeof closestEventDate == 'undefined') {
-            closestEventDate = testDates[i].date;
-            closestEventNumber = testDates[i].number;
-        } else if(testDates[i].date < closestEventDate) {
-            // If closestEvent is defined, check if the current event is closer than the previous closest event
-
-            // If it is, set closestEvent to the current event
-            closestEventDate = testDates[i].date;
-            closestEventNumber = testDates[i].number;
-        }
-    }
-  }
-
-  const closestTest: TestDate = {
-      date: closestEventDate,
-      number: closestEventNumber,
-  };
-
-  return(closestTest);
-}
-
-export default function Countdown(): JSX.Element {
-  const closestPumaPrideTest: TestDate = closestEventDate(PumaPrideTestDates);
-  const closestConcertChoirTest: TestDate = closestEventDate(ConcertChoirTestDates);
-  const closestPhoenixFireTest: TestDate = closestEventDate(PhoenixFireTestDates);
-
-  let bearMessage = "Congratulations to 128 Grazer!";
-  let daysUntilPumaPrideTest: number
-  let daysUntilConcertChoirTest: number;
-  let daysUntilPhoenixFireTest: number;
-  
-  if (closestPumaPrideTest.date != undefined) {
-    daysUntilPumaPrideTest = Math.ceil(
-      (closestPumaPrideTest.date.getTime() - today.getTime()) /
-      (1000 * 60 * 60 * 24)
-    );
-
-    bearMessage += ` Puma Pride: Your music theory test ${closestConcertChoirTest.number} is in ${daysUntilPumaPrideTest} day`;
-    if (daysUntilPumaPrideTest > 1 || daysUntilPumaPrideTest == 0) {
-      bearMessage += "s";
-    }
-    bearMessage += "!";
-  
-  }
-
-  if (closestConcertChoirTest.date != undefined) {
-    daysUntilConcertChoirTest = Math.ceil(
-      (closestConcertChoirTest.date.getTime() - today.getTime()) /
-      (1000 * 60 * 60 * 24)
-    );
-
-    bearMessage += ` Concert Choir: Your music theory test ${closestConcertChoirTest.number} is in ${daysUntilConcertChoirTest} day`;
-    if (daysUntilConcertChoirTest > 1 || daysUntilConcertChoirTest == 0) {
-      bearMessage += "s";
-    }
-    bearMessage += "!";
-  }
-
-  if (closestPhoenixFireTest.date != undefined) {
-    daysUntilPhoenixFireTest = Math.ceil(
-      (closestPhoenixFireTest.date.getTime() - today.getTime()) /
-      (1000 * 60 * 60 * 24)
-    );
-
-    bearMessage += ` Phoenix Fire: Your music theory test ${closestPhoenixFireTest.number} is in ${daysUntilPhoenixFireTest} day`;
-  }
-
-  if (closestPumaPrideTest.date != undefined && closestConcertChoirTest.date != undefined && closestPhoenixFireTest.date != undefined) {
-    if (daysUntilPumaPrideTest == daysUntilConcertChoirTest && daysUntilPumaPrideTest == daysUntilPhoenixFireTest) {
-      bearMessage += ` You have a music theory test in ${daysUntilPumaPrideTest} day`;
-
-      if (daysUntilPumaPrideTest > 1 || daysUntilPumaPrideTest == 0) {
-        bearMessage += "s";
-      }
-
-      bearMessage += "!";
-    }
-  }
-
-  const buttonLink = "https://theorybear.org/docs/introduction";
-  let buttonMessage = "Let's get studying!";
-  //buttonMessage = "Brush up on some skills";
-
-  return (
-    <section className={styles.countdown}>
-    
-      <div className="container">
-        <div className="row">
-          <div className="col">
-            <img src="/img/logo.svg" alt="Countdown" height="100" />
-          </div>
-          <div className="col">
-            <p className={styles.typedOut}>{bearMessage.toString()}</p>
-            <div className={styles.buttons}>
-              <Link
-                className="button button--secondary button--lg"
-                to={buttonLink}>
-                {buttonMessage.toString()}
-              </Link>
-            </div>
-          </div>
-        </div>
-        
-      </div>
-    </section>
-  );
-}
\ No newline at end of file
diff --git a/src/components/Countdown/styles.module.css b/src/components/Countdown/styles.module.css
deleted file mode 100644
index 146e90d..0000000
--- a/src/components/Countdown/styles.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}
-
-/* Typewriter effect from https://www.sitepoint.com/css-typewriter-effect/ by Matt Nikonorov */
-
-.typedOut {
-  overflow: hidden;
-  border-right: .15em solid brown;
-  border-radius: 0px;
-  white-space: nowrap;
-  animation: 
-    typing 1s steps(20, end) forwards,
-    blinking 1.2s infinite;
-  width: 0;
-}
-
-@keyframes typing {
-  from { width: 0 }
-  to { width: 100% }
-}
-
-@keyframes blinking {
-  from { border-color: transparent }
-  to { border-color: brown; }
-}
\ No newline at end of file
diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx
new file mode 100644
index 0000000..dc2fac3
--- /dev/null
+++ b/src/components/Splash/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+
+export default function Splash(): JSX.Element {
+
+let splashMessages = [
+  ["You've got this!", "JP"],
+  ["Need more cowbell!", "JP"],
+  ["Beary fun music theory ;)", "JP"],
+  ["Every Good Bear Does Fine", "JP"],
+  ["FACE!!!!!", "JP"],
+  ["Arctic Cubs Explore Glaciers :)", "JP"]
+];
+  
+var randomSplash = Math.floor(Math.random() * splashMessages.length);
+
+  return (
+    <section>
+      <div className="container">
+        <div className="row">
+          <div className="col">
+            <img src="/img/logo.svg" alt="Countdown" height="100" />
+          </div>
+          <div className="col">
+            <p>{splashMessages[randomSplash][0]}</p>
+            <p>
+              <sub>
+                <Link to="/docs/how-to-contribute/tutorials/how-to-add-splash-message">
+                  Submitted by {splashMessages[randomSplash][1]}
+                </Link>
+              </sub>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f228e3e..d38c68a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,16 +2,17 @@ import React from 'react';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
+import Link from "@docusaurus/Link";
 import Alert from '@site/src/components/Alert';
 import JpsCorner from '@site/src/components/JPsCorner';
-import Countdown from '@site/src/components/Countdown';
+import Splash from '@site/src/components/Splash';
 
 import styles from './index.module.css';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <div className="row">
           <div className="col">
@@ -19,7 +20,15 @@ function HomepageHeader() {
             <p className="hero__subtitle">{siteConfig.tagline}</p>
           </div>
           <div className="col">
-            <Countdown />
+            <Splash />
+            <div className={styles.buttons}>
+              <Link
+                className="button button--secondary button--lg"
+                to="https://theorybear.org/docs/introduction"
+              >
+                {"Let's get studying!"}
+              </Link>
+            </div>
           </div>
         </div>
       </div>