diff --git a/dist/easier/index.html b/dist/easier/index.html
index b4c3e34..303f90e 100644
--- a/dist/easier/index.html
+++ b/dist/easier/index.html
@@ -41,7 +41,7 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="shortcut icon" href="/img/bike_ico.ico" type="image/x-icon" />
-    <title>WPG Bike Bingo</title>
+    <title>WPG Bike Bingo | Easier Bingo</title>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@@ -57,6 +57,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
+    <h1 class="text-2xl md:text-4xl">Easier Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
@@ -76,13 +78,13 @@
                 <th></th>
             </tr>
             <tr>
-              <th class="bingo-header"><button onclick="selectDiag('left')" class="drop-btn"><i class="material-icons">south_east</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header"><button onclick="selectDiag('right')" class="drop-btn"><i class="material-icons">south_west</i></button></th>
+              <th class="bingo-header"><button onclick="selectDiag('left')" class="drop-btn"><i class="material-icons -rotate-45">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header"><button onclick="selectDiag('right')" class="drop-btn"><i class="material-icons rotate-45">expand_more</i></button></th>
             </tr>
         </table>
     </main>
diff --git a/dist/harder/index.html b/dist/harder/index.html
index 379e01b..6f52e56 100644
--- a/dist/harder/index.html
+++ b/dist/harder/index.html
@@ -41,7 +41,7 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="shortcut icon" href="/img/bike_ico.ico" type="image/x-icon" />
-    <title>WPG Bike Bingo</title>
+    <title>WPG Bike Bingo | Harder Bingo</title>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@@ -56,6 +56,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
+    <h1 class="text-2xl md:text-4xl">Harder Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
@@ -75,13 +77,13 @@
                 <th></th>
             </tr>
             <tr>
-              <th class="bingo-header"><button onclick="selectDiag('left')" class="drop-btn"><i class="material-icons">south_east</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header"><button onclick="selectDiag('right')" class="drop-btn"><i class="material-icons">south_west</i></button></th>
+              <th class="bingo-header"><button onclick="selectDiag('left')" class="drop-btn"><i class="material-icons -rotate-45">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header"><button onclick="selectDiag('right')" class="drop-btn"><i class="material-icons rotate-45">expand_more</i></button></th>
             </tr>
         </table>
     </main>
diff --git a/dist/help/index.html b/dist/help/index.html
index aee0340..7f48c2c 100644
--- a/dist/help/index.html
+++ b/dist/help/index.html
@@ -41,7 +41,7 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="shortcut icon" href="/img/bike_ico.ico" type="image/x-icon" />
-    <title>WPG Bike Bingo</title>
+    <title>WPG Bike Bingo | About</title>
     <link rel="stylesheet" href="/style.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
diff --git a/dist/history/index.html b/dist/history/index.html
index b1444af..5a4d580 100644
--- a/dist/history/index.html
+++ b/dist/history/index.html
@@ -41,7 +41,7 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="shortcut icon" href="/img/bike_ico.ico" type="image/x-icon" />
-    <title>WPG Bike Bingo</title>
+    <title>WPG Bike Bingo | History Bingo</title>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@@ -56,6 +56,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
+    <h1 class="text-2xl md:text-4xl">History Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
@@ -76,11 +78,11 @@
             </tr>
             <tr>
               <th></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">south</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
             </tr>
         </table>
     </main>
diff --git a/dist/js/route-utils.js b/dist/js/route-utils.js
index 8daaaf0..91966e2 100644
--- a/dist/js/route-utils.js
+++ b/dist/js/route-utils.js
@@ -7,18 +7,32 @@
  * LOADING BINGOS AND IMAGES
  * This code block runs on page load
  */
-const toCardElement = (card, index) => {
+const toCardImageWithOverlay = (card) => {
   return el(
-    "td",
-    "bingo-card",
-    { id: `card-${index}` },
-    el("img", "card-img", {
+    "div",
+    "relative",
+    {},
+    el("img", "card-img block mx-auto", {
       src: card.img,
       alt: card.name,
       width: 125,
       height: 125,
     }),
-    el("h2", "w-fit text-gray-600 text-left", {}, t(card.name))
+    el(
+      "div",
+      "bingo-overlay",
+      { src: card.img },
+      el("h2", "w-fit text-gray-50 mb-0 mx-auto", {}, t(card.name))
+    )
+  );
+};
+
+const toCardElement = (card, index) => {
+  return el(
+    "td",
+    "bingo-card",
+    { id: `card-${index}` },
+    toCardImageWithOverlay(card)
   );
 };
 
@@ -35,7 +49,7 @@ const getSelectArrow = (row) =>
         "button",
         "drop-btn",
         { onclick: `selectRow("${row}")` },
-        el("i", "material-icons", {}, t("east"))
+        el("i", "material-icons", {}, t("chevron_right"))
       )
     )
   );
@@ -57,8 +71,8 @@ const appendRow = (selector) => (row) => {
 
 document.addEventListener("DOMContentLoaded", () => {
   cards.map(toCardRow).forEach(appendRow("#bingo-container"));
-  [...document.querySelectorAll(".card-img")].forEach((el) =>
-    el.addEventListener("click", imgPopup(el.src))
+  [...document.querySelectorAll(".bingo-overlay")].forEach((el) =>
+    el.addEventListener("click", imgPopup(el.getAttribute("src")))
   );
 });
 // ======= END OF LOADING CODE =======
diff --git a/dist/style.css b/dist/style.css
index b82bfcb..56abd05 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');
 
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -33,12 +33,9 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
 */
 
-html,
-:host {
+html {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -52,10 +49,6 @@ html,
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
-  font-variation-settings: normal;
-  /* 6 */
-  -webkit-tap-highlight-color: transparent;
-  /* 7 */
 }
 
 /*
@@ -127,10 +120,8 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -139,12 +130,8 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-feature-settings: normal;
-  /* 2 */
-  font-variation-settings: normal;
-  /* 3 */
   font-size: 1em;
-  /* 4 */
+  /* 2 */
 }
 
 /*
@@ -203,10 +190,6 @@ select,
 textarea {
   font-family: inherit;
   /* 1 */
-  font-feature-settings: inherit;
-  /* 1 */
-  font-variation-settings: inherit;
-  /* 1 */
   font-size: 100%;
   /* 1 */
   font-weight: inherit;
@@ -357,14 +340,6 @@ menu {
   padding: 0;
 }
 
-/*
-Reset default styling for dialogs.
-*/
-
-dialog {
-  padding: 0;
-}
-
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -460,9 +435,6 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -510,9 +482,6 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -632,6 +601,34 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.bingo-overlay{
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+  display: flex;
+  aspect-ratio: 1 / 1;
+  max-height: 100%;
+  max-width: 100%;
+  flex-direction: column;
+  justify-content: flex-end;
+  border-radius: 0.5rem;
+  text-align: center;
+  opacity: 0;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.bingo-overlay:hover{
+  background-color: rgb(0 0 0 / 0.6);
+  opacity: 1;
+}
+
 .card-width {
   width: 150px;
 }
@@ -640,9 +637,9 @@ video {
   margin-bottom: 1px;
   border-bottom-width: 2px;
   --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   padding-top: 0.25rem;
@@ -719,9 +716,9 @@ video {
   border-radius: 0.5rem;
   border-width: 2px;
   --tw-border-opacity: 1;
-  border-color: rgb(254 226 226 / var(--tw-border-opacity));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
   padding: 0.25rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -757,6 +754,10 @@ video {
   }
 }
 
+.relative{
+  position: relative;
+}
+
 .sticky{
   position: sticky;
 }
@@ -786,14 +787,9 @@ video {
   margin-right: 3rem;
 }
 
-.mx-4{
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-.mx-auto{
-  margin-left: auto;
-  margin-right: auto;
+.my-4{
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 .my-12{
@@ -801,35 +797,44 @@ video {
   margin-bottom: 3rem;
 }
 
+.mx-auto{
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .my-2{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-.my-4{
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .my-8{
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-.mb-1{
-  margin-bottom: 0.25rem;
+.mx-4{
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 
-.mb-2{
-  margin-bottom: 0.5rem;
+.mr-1{
+  margin-right: 0.25rem;
 }
 
 .ml-auto{
   margin-left: auto;
 }
 
-.mr-1{
-  margin-right: 0.25rem;
+.mb-2{
+  margin-bottom: 0.5rem;
+}
+
+.mb-0{
+  margin-bottom: 0px;
+}
+
+.mb-1{
+  margin-bottom: 0.25rem;
 }
 
 .block{
@@ -860,25 +865,25 @@ video {
   aspect-ratio: 1 / 1;
 }
 
-.h-fit{
-  height: -moz-fit-content;
-  height: fit-content;
+.h-screen{
+  height: 100vh;
 }
 
 .h-full{
   height: 100%;
 }
 
-.h-screen{
-  height: 100vh;
+.h-fit{
+  height: -moz-fit-content;
+  height: fit-content;
 }
 
-.w-11\/12{
-  width: 91.666667%;
+.w-screen{
+  width: 100vw;
 }
 
-.w-2\/3{
-  width: 66.666667%;
+.w-full{
+  width: 100%;
 }
 
 .w-fit{
@@ -886,12 +891,22 @@ video {
   width: fit-content;
 }
 
-.w-full{
-  width: 100%;
+.w-2\/3{
+  width: 66.666667%;
 }
 
-.w-screen{
-  width: 100vw;
+.w-11\/12{
+  width: 91.666667%;
+}
+
+.-rotate-45{
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-45{
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .transform{
@@ -957,19 +972,14 @@ video {
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
-.bg-blue-700{
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
 .bg-gray-100{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200{
+.bg-blue-700{
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
 .bg-gray-300{
@@ -982,6 +992,11 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200{
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-500{
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1004,16 +1019,16 @@ video {
   padding: 1rem;
 }
 
-.px-4{
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .py-2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.px-4{
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .pr-2{
   padding-right: 0.5rem;
 }
@@ -1022,17 +1037,17 @@ video {
   text-align: left;
 }
 
-.font-icon{
-  font-family: "Material Icons";
-}
-
 .font-sans{
   font-family: "DM Sans", sans-serif;
 }
 
-.text-2xl{
-  font-size: 1.5rem;
-  line-height: 2rem;
+.font-icon{
+  font-family: "Material Icons";
+}
+
+.text-5xl{
+  font-size: 3rem;
+  line-height: 1;
 }
 
 .text-3xl{
@@ -1040,19 +1055,19 @@ video {
   line-height: 2.25rem;
 }
 
-.text-4xl{
-  font-size: 2.25rem;
-  line-height: 2.5rem;
+.text-2xl{
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
-.text-5xl{
-  font-size: 3rem;
-  line-height: 1;
+.text-xs{
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
-.text-7xl{
-  font-size: 4.5rem;
-  line-height: 1;
+.text-sm{
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .text-base{
@@ -1060,9 +1075,14 @@ video {
   line-height: 1.5rem;
 }
 
-.text-sm{
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.text-7xl{
+  font-size: 4.5rem;
+  line-height: 1;
+}
+
+.text-4xl{
+  font-size: 2.25rem;
+  line-height: 2.5rem;
 }
 
 .text-xl{
@@ -1070,30 +1090,25 @@ video {
   line-height: 1.75rem;
 }
 
-.text-xs{
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .font-bold{
   font-weight: 700;
 }
 
-.font-extralight{
-  font-weight: 200;
-}
-
 .font-light{
   font-weight: 300;
 }
 
+.font-extralight{
+  font-weight: 200;
+}
+
 .font-semibold{
   font-weight: 600;
 }
 
-.text-blue-400{
+.text-blue-700{
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
 .text-blue-500{
@@ -1101,39 +1116,44 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.text-blue-600{
+.text-gray-100{
   --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
+  color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
-.text-blue-700{
+.text-gray-400{
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.text-gray-100{
+.text-gray-700{
   --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
+  color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-500{
+.text-blue-400{
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+  color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
-.text-gray-600{
+.text-gray-900{
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-gray-700{
+.text-gray-50{
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
+  color: rgb(249 250 251 / var(--tw-text-opacity));
 }
 
-.text-gray-900{
+.text-gray-500{
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-blue-600{
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
 .underline{
@@ -1156,14 +1176,14 @@ video {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.hover\:text-blue-600:hover{
+.hover\:text-gray-900:hover{
   --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
+  color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-900:hover{
+.hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
+  color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
 @media (min-width: 640px){
@@ -1190,16 +1210,26 @@ video {
   .md\:flex-row{
     flex-direction: row;
   }
+
+  .md\:text-4xl{
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-sm{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
 
 @media (min-width: 1024px){
-  .lg\:text-5xl{
-    font-size: 3rem;
+  .lg\:text-7xl{
+    font-size: 4.5rem;
     line-height: 1;
   }
 
-  .lg\:text-7xl{
-    font-size: 4.5rem;
+  .lg\:text-5xl{
+    font-size: 3rem;
     line-height: 1;
   }
 }
\ No newline at end of file
diff --git a/src/easier/index.html b/src/easier/index.html
index 05b1874..303f90e 100644
--- a/src/easier/index.html
+++ b/src/easier/index.html
@@ -57,8 +57,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
-    <h1 class="text-4xl">Easier Bingo Challenge</h1>
-    <p class="my-2 text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
+    <h1 class="text-2xl md:text-4xl">Easier Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
diff --git a/src/harder/index.html b/src/harder/index.html
index 64a8b0a..6f52e56 100644
--- a/src/harder/index.html
+++ b/src/harder/index.html
@@ -56,8 +56,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
-    <h1 class="text-4xl">Harder Bingo Challenge</h1>
-    <p class="my-2 text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
+    <h1 class="text-2xl md:text-4xl">Harder Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
diff --git a/src/history/index.html b/src/history/index.html
index d709fe9..5a4d580 100644
--- a/src/history/index.html
+++ b/src/history/index.html
@@ -56,8 +56,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
-    <h1 class="text-4xl">History Bingo Challenge</h1>
-    <p class="my-2 text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
+    <h1 class="text-2xl md:text-4xl">History Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
diff --git a/src/style.css b/src/style.css
index 412dc8b..56abd05 100644
--- a/src/style.css
+++ b/src/style.css
@@ -612,6 +612,9 @@ video {
   margin-top: auto;
   margin-bottom: auto;
   display: flex;
+  aspect-ratio: 1 / 1;
+  max-height: 100%;
+  max-width: 100%;
   flex-direction: column;
   justify-content: flex-end;
   border-radius: 0.5rem;
@@ -626,11 +629,6 @@ video {
   opacity: 1;
 }
 
-.bingo-overlay {
-  width: 117px;
-  height: 117px;
-}
-
 .card-width {
   width: 150px;
 }
@@ -1057,14 +1055,9 @@ video {
   line-height: 2.25rem;
 }
 
-.text-4xl{
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.text-sm{
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.text-2xl{
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
 .text-xs{
@@ -1072,6 +1065,11 @@ video {
   line-height: 1rem;
 }
 
+.text-sm{
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .text-base{
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1082,9 +1080,9 @@ video {
   line-height: 1;
 }
 
-.text-2xl{
-  font-size: 1.5rem;
-  line-height: 2rem;
+.text-4xl{
+  font-size: 2.25rem;
+  line-height: 2.5rem;
 }
 
 .text-xl{
@@ -1212,6 +1210,16 @@ video {
   .md\:flex-row{
     flex-direction: row;
   }
+
+  .md\:text-4xl{
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-sm{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
 
 @media (min-width: 1024px){
diff --git a/src/tailwind.css b/src/tailwind.css
index d896375..f73ee03 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -31,9 +31,7 @@
     }
 
     .bingo-overlay {
-        @apply flex flex-col justify-end absolute top-0 bottom-0 left-0 right-0 opacity-0 hover:opacity-100 hover:bg-black/[0.6] duration-200 ease-in text-center mx-auto my-auto rounded-lg;
-        width: 117px;
-        height: 117px;
+        @apply max-w-full max-h-full aspect-square flex flex-col justify-end absolute top-0 bottom-0 left-0 right-0 opacity-0 hover:opacity-100 hover:bg-black/[0.6] duration-200 ease-in text-center mx-auto my-auto rounded-lg;
     }
 
     .card-width {