diff --git a/static/upcoming-nhl-games.html b/static/upcoming-nhl-games.html
index 8d16820..200af1d 100644
--- a/static/upcoming-nhl-games.html
+++ b/static/upcoming-nhl-games.html
@@ -8,6 +8,9 @@
     <style>
       img {
         max-width: 100%;
+        max-height: 300px;
+        display: block;
+        margin: auto;
         padding: 1em;
       }
     </style>
@@ -24,42 +27,39 @@
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="../">Home</a>
             </li>
-            <li class="nav-item">
-              <a class="nav-link active" href="upcoming-nhl-games.html">Upcoming NHL Games</a>
+            <li class="nav-item dropdown">
+              <a class="nav-link active dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Upcoming Games
+              </a>
+              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <li><a class="dropdown-item" href="upcoming-nhl-games.html?league=hockey/nhl">NHL</a></li>
+                <li><a class="dropdown-item" href="upcoming-nhl-games.html?league=football/nfl">NFL</a></li>
+                <li><a class="dropdown-item" href="upcoming-nhl-games.html?league=basketball/nba">NBA</a></li>
+              </ul>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="../about.html">About</a>
             </li>
-            <!-- <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                Dropdown
-              </a>
-              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <li><a class="dropdown-item" href="#">Action</a></li>
-                <li><a class="dropdown-item" href="#">Another action</a></li>
-                <li><hr class="dropdown-divider"></li>
-                <li><a class="dropdown-item" href="#">Something else here</a></li>
-              </ul>
-            </li> -->
           </ul>
         </div>
       </div>
     </nav>
 
     <div class="container my-5">
-      <h1>Upcoming NHL Games</h1>
+      <h1>Upcoming Games</h1>
+      <div class="btn-group">
+        <button class="btn btn-outline-primary" id="older">&laquo;</button>
+        <button class="btn btn-outline-primary btn-disabled" id="current" disabled></button>
+        <button class="btn btn-outline-primary" id="newer">&raquo;</button>
+      </div>
       <div id="upcoming-games"></div>
     </div>
   </body>
   <script>
-    (async function(){
-      const scoreboard_res = await fetch("https://site.api.espn.com/apis/site/v2/sports/hockey/nhl/scoreboard");
-      const scoreboard_data = await scoreboard_res.json();
-
-      const events_res = await fetch("https://site.api.espn.com/apis/site/v2/sports/hockey/nhl/events");
-      const events_data = await events_res.json();
-
-      const upcoming_games_div = document.getElementById('upcoming-games')
+    let dates, current_date_index;
+    function populateUpcomingGames(scoreboard_data) {
+      const upcoming_games_div = document.getElementById('upcoming-games');
+      upcoming_games_div.replaceChildren();
       for (const event of scoreboard_data.events) {
           const competition = event.competitions[0];
           console.log(competition);
@@ -77,6 +77,32 @@
           a.appendChild(img);
           upcoming_games_div.appendChild(a);
       }
+    }
+    async function updateDate(date_index) {
+      current_date_index = date_index;
+      const date = dates[date_index];
+      document.getElementById('older').disabled = date_index == 0;
+      document.getElementById('current').innerHTML = date;
+      document.getElementById('newer').disabled = date_index == dates.length - 1;
+      const scoreboard_res = await fetch(`https://site.api.espn.com/apis/site/v2/sports/hockey/nhl/scoreboard?dates=${date.replaceAll('-', '')}`);
+      const scoreboard_data = await scoreboard_res.json();
+      populateUpcomingGames(scoreboard_data);
+    }
+    (async function(){
+      const scoreboard_res = await fetch("https://site.api.espn.com/apis/site/v2/sports/hockey/nhl/scoreboard");
+      const scoreboard_data = await scoreboard_res.json();
+      populateUpcomingGames(scoreboard_data);
+      dates = scoreboard_data.leagues[0].calendar.map(s => s.split('T')[0]);
+      const date = scoreboard_data.events[0].date.split('T')[0]
+      current_date_index = dates.indexOf(date);
+
+      document.getElementById("older").addEventListener('click', function(){
+        updateDate(current_date_index-1);
+      });
+      document.getElementById("current").innerHTML = date;
+      document.getElementById("newer").addEventListener('click', function(){
+        updateDate(current_date_index+1);
+      });
     })();
   </script>
 </html>