diff --git a/static/upcoming-nhl-games.html b/static/upcoming-games.html
similarity index 80%
rename from static/upcoming-nhl-games.html
rename to static/upcoming-games.html
index 200af1d..62839e3 100644
--- a/static/upcoming-nhl-games.html
+++ b/static/upcoming-games.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Upcoming NHL Games | BannerGen</title>
     <link href="bootstrap.min.css" rel="stylesheet">
+    <script src="bootstrap.bundle.min.js"></script>
     <style>
       img {
         max-width: 100%;
@@ -32,9 +33,10 @@
                 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>
+                <li><a class="dropdown-item" href="upcoming-games.html?league=hockey/nhl">NHL</a></li>
+                <li><a class="dropdown-item" href="upcoming-games.html?league=baseball/mlb">MLB</a></li>
+                <li><a class="dropdown-item" href="upcoming-games.html?league=football/nfl">NFL</a></li>
+                <li><a class="dropdown-item" href="upcoming-games.html?league=basketball/nba">NBA</a></li>
               </ul>
             </li>
             <li class="nav-item">
@@ -56,6 +58,10 @@
     </div>
   </body>
   <script>
+    const league_sport = (new URLSearchParams(document.location.search)).get("league") ?? "hockey/nhl";
+    if (league_sport == "football/nfl") {
+      alert("Heads up! ESPN tracks NFL dates differently, and as such the datepicker doesn't currently work. This is a known defect.");
+    }
     let dates, current_date_index;
     function populateUpcomingGames(scoreboard_data) {
       const upcoming_games_div = document.getElementById('upcoming-games');
@@ -84,13 +90,14 @@
       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_res = await fetch(`https://site.api.espn.com/apis/site/v2/sports/${league_sport}/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_res = await fetch(`https://site.api.espn.com/apis/site/v2/sports/${league_sport}/scoreboard`);
       const scoreboard_data = await scoreboard_res.json();
+      window.data = scoreboard_data;
       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]
diff --git a/templates/about.html b/templates/about.html
index aec6cf6..e297a26 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>About | BannerGen</title>
     <link href="static/bootstrap.min.css" rel="stylesheet">
+    <script src="static/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@@ -18,23 +19,20 @@
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="./">Home</a>
             </li>
-            <li class="nav-item">
-              <a class="nav-link" href="static/upcoming-nhl-games.html">Upcoming NHL Games</a>
+            <li class="nav-item dropdown">
+              <a class="nav-link 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="static/upcoming-games.html?league=hockey/nhl">NHL</a></li>
+                <li><a class="dropdown-item" href="static/upcoming-games.html?league=baseball/mlb">MLB</a></li>
+                <li><a class="dropdown-item" href="static/upcoming-games.html?league=football/nfl">NFL</a></li>
+                <li><a class="dropdown-item" href="static/upcoming-games.html?league=basketball/nba">NBA</a></li>
+              </ul>
             </li>
             <li class="nav-item">
               <a class="nav-link active" 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>
diff --git a/templates/index.html b/templates/index.html
index 3697a96..ff15478 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>BannerGen</title>
     <link href="static/bootstrap.min.css" rel="stylesheet">
+    <script src="static/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@@ -18,23 +19,20 @@
             <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="./">Home</a>
             </li>
-            <li class="nav-item">
-              <a class="nav-link" href="static/upcoming-nhl-games.html">Upcoming NHL Games</a>
+            <li class="nav-item dropdown">
+              <a class="nav-link 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="static/upcoming-games.html?league=hockey/nhl">NHL</a></li>
+                <li><a class="dropdown-item" href="static/upcoming-games.html?league=baseball/mlb">MLB</a></li>
+                <li><a class="dropdown-item" href="static/upcoming-games.html?league=football/nfl">NFL</a></li>
+                <li><a class="dropdown-item" href="static/upcoming-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>
