diff --git a/main_controller.py b/main_controller.py
index 91df7c2..01d35a5 100644
--- a/main_controller.py
+++ b/main_controller.py
@@ -11,6 +11,10 @@ socketio = SocketIO(app)
 def index():
     return render_template("index.html")
 
+@app.route('/league')
+def league():
+    return render_template("index.html", league=request.args['name'])
+
 thread2 = threading.Thread(target=socketio.run,args=(app,'0.0.0.0'))
 thread2.start()
 
diff --git a/static/game.html b/static/game.html
deleted file mode 100644
index 633fa17..0000000
--- a/static/game.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div class="header">
-    <div class="inning"></div>
-    <div class="weather"></div>
-</div>
-<div class="body">
-    <div class="teams">
-        <div class="team">
-            <div class="team_name away_name"></div>
-            <div class="score away_score"></div>
-        </div>
-        <div class="team">
-            <div class="team_name home_name"></div>
-            <div class="score home_score"></div>
-        </div>
-    </div>
-    <div class="info">
-        <div class="field">
-            <img class="base base_2" src=""/>
-            <div style="display: flex;">
-                <img class="base base_3" src=""/>
-                <img class="base base_1" src=""/>
-            </div>
-        </div>
-        <div class="outs">
-            <div class="outs_title">OUTS</div>
-            <div class="outs_count">
-                <img class="out" src=""/>
-                <img class="out" src=""/>
-            </div>
-        </div>
-    </div>
-    <div class="players">
-        <div class="player pitcher">
-            <div class="player_type">Pitcher:</div>
-            <div class="player_name pitcher_name"></div>
-        </div>
-        <div class="player batter">
-            <div class="player_type">Batter:</div>
-            <div class="player_name batter_name"></div>
-        </div>
-    </div>
-    <div class="update">
-        <div class="update_emoji"></div>
-        <div class="update_text"></div>
-    </div>
-</div>
-<div class="footer">
-    <div class="batting"></div>
-    <div class="leagueoruser"></div>
-</div>
\ No newline at end of file
diff --git a/static/games_page.css b/static/games_page.css
index 12e4d62..68c032a 100644
--- a/static/games_page.css
+++ b/static/games_page.css
@@ -43,10 +43,13 @@ div, button {
     grid-gap: 50px 30px; /*space between rows, then columns*/
     align-items: center;
     justify-items: center;
-    grid-auto-rows: 360px;
     grid-auto-flow: row;
 }
 
+.container > div {
+    min-height: 350px;
+}
+
 #header {
     width: 100%;
     height: 150px;
@@ -80,6 +83,8 @@ div, button {
     min-width: 100px;
     text-align: center;
     border: none;
+    color: white;
+    text-decoration: none;
 }
 
 #selected_filter {
@@ -125,7 +130,6 @@ div, button {
     justify-self: stretch;
     text-align: center;
     color: white;
-    flex: 1;
 }
 
 .game {
@@ -175,12 +179,12 @@ h2 {
 .body {
     margin: 10px;
     display: grid;
-    grid-template-columns: 60% 40%;
+    grid-template-columns: 66% 33%;
     grid-template-areas:
       "teams info" "players info" "update update";
     grid-template-rows: 90px;
     grid-row-gap: 8px;
-    grid-column-gap: 10px;
+    grid-column-gap: 14px;
     flex: 1;
 }
 
@@ -189,6 +193,7 @@ h2 {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
+    margin-right: 12px;
 }
 
 .team {
@@ -200,6 +205,7 @@ h2 {
 
 .team_name {
     overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
 }
 
@@ -210,9 +216,7 @@ h2 {
     align-items: center;
     justify-content: space-around;
     background: #4f545c;
-    padding-top: 8px;
-    padding-bottom: 4px;
-    margin-left: 15%;
+    padding: 25px 0px;
     margin-right: 10px;
     border-radius: 4px;
 }
@@ -287,6 +291,7 @@ h2 {
 
 .player_name {
     overflow: hidden;
+    text-overflow: ellipsis;
     text-align: start;
     white-space: nowrap;
     width: 95%;
@@ -297,12 +302,13 @@ h2 {
     margin-right: 10px;
     margin-top: 5px;
     min-height: 50px;
+    padding: 0px 10px;
     height: 100%;
     background: var(--background-secondary);
     border-radius: 4px;
     align-items: center;
     display: flex;
-    justify-content: center;
+    justify-content: start;
 }
 
 .player_type {
@@ -311,8 +317,13 @@ h2 {
     font-weight: bolder;
 }
 
-.update_emoji, .update_text {
-    display: inline
+.update_emoji {
+    margin-right: 10px;
+    margin-left: 2px;
+}
+
+.update_text {
+    text-align: start;
 }
 
 .field {
diff --git a/static/loader.js b/static/loader.js
index fa83ceb..9c07c32 100644
--- a/static/loader.js
+++ b/static/loader.js
@@ -1,123 +1,147 @@
+var socket = io.connect();
+var lastupdate;
+var grid;
+
 $(document).ready(function (){
-    var socket = io.connect();
-    var lastupdate;
-    var grid = document.getElementById("container");
-    
+    grid = document.getElementById("container")
 
     socket.on('connect', function () {
-        socket.emit('recieved', { data: 'I\'m connected!' });
+        socket.emit('recieved', {});
     });
 
-    socket.on("states_update", function (json) { //json is an object containing all game updates
+    socket.on("states_update", function (json) { //json is an object containing all game updates\
         lastupdate = json;
         updateGames(json, $('#selected_filter').text());
-
-        //get all leagues
-        leagues = []
-        for (var game of json) {
-            if (game.league != "" && !leagues.includes(game.league)) {
-                leagues.push(game.league)
-            }
-        }
-
-        //remove leagues no longer present
-        $('#filters .filter').each(function(index) {
-            if (!leagues.includes($(this).text())) {
-                if ($(this).attr('id') != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter
-                    $(this).remove();
-                }
-            } else {
-                leagues.splice(leagues.indexOf($(this).text()), 1);
-            }
-        })
-
-        // add leagues not already present
-        for (var league of leagues) { // we removed the entries that are already there in the loop above
-            $('#filters').append("<button class='filter'>"+league+"</button>");
-        }
-
-        //add click handlers to each filter
-        $('#filters .filter').each(function(index) {
-            $(this).click(function() {
-                if ($('#filters #selected_filter').text() == 'All') {
-                    updateGames([], ""); // clear grid when switching off of All, to make games collapse to top
-                }
-                $('#filters #selected_filter').attr('id', '');
-                $(this).attr('id', 'selected_filter');
-                updateGames(lastupdate, $(this).text());
-            })
-        })
+        updateLeagues(json);
     });
+});
 
-    const updateGames = (json, filter) => {
+const updateGames = (json, filter) => {
 
-        filterjson = [];
-        for (var game of json) {
-            if (game.league == filter || filter == "All") {
-                filterjson.push(game);
-            }
+    filterjson = [];
+    for (var game of json) {
+        if (game.league == filter || filter == "All") {
+            filterjson.push(game);
         }
+    }
 
-        if (filterjson.length == 0) {
-            $('#footer div').html("No games right now. Why not head over to Discord and start one?");
-        } else {
-            $('#footer div').html("");
+    if (filterjson.length == 0) {
+        $('#footer div').html("No games right now. Why not head over to Discord and start one?");
+    } else {
+        $('#footer div').html("");
+    }
+
+    //replace games that have ended with empty slots
+    for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
+        if (grid.children[slotnum].className == "game" && !filterjson.some((x) => x.timestamp == grid.children[slotnum].timestamp)) {
+            grid.children[slotnum].className = "emptyslot";
+            grid.children[slotnum].timestamp = null;
+            grid.children[slotnum].innerHTML = "";
         }
+    }
 
-        //replace games that have ended with empty slots
+    for (var game of filterjson) {
+        //updates game in list
         for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
-            if (grid.children[slotnum].className == "game" && !filterjson.some((x) => x.timestamp == grid.children[slotnum].timestamp)) {
-                grid.children[slotnum].className = "emptyslot";
-                grid.children[slotnum].timestamp = null;
-                grid.children[slotnum].innerHTML = "";
-            }
-        }
-
-        for (var game of filterjson) {
-            //updates game in list
-            for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
-                if (grid.children[slotnum].timestamp == game.timestamp) {
-                    insertGame(slotnum, game);
-                };
+            if (grid.children[slotnum].timestamp == game.timestamp) {
+                insertGame(slotnum, game);
             };
-
-            //adds game to list if not there already
-            if (!Array.prototype.slice.call(grid.children).some((x) => x.timestamp == game.timestamp)) {
-                for (var slotnum = 0; true; slotnum++) { //this is really a while loop but shh don't tell anyone
-                    if (slotnum >= grid.children.length) {
-                        for (var i = 0; i < 3; i ++) {
-                            insertEmpty(grid);
-                        }
-                    }
-                    if (grid.children[slotnum].className == "emptyslot") {
-                        insertGame(slotnum, game);
-                        break;
-                    };
-                };
-            }
         };
 
-        //remove last rows if not needed
-        while (grid.children[grid.children.length-1].className == "emptyslot" &&
-               grid.children[grid.children.length-2].className == "emptyslot" &&
-               grid.children[grid.children.length-3].className == "emptyslot" &&
-               grid.children.length > 3) {
-            for (var i = 0; i < 3; i++) {
-                grid.removeChild(grid.children[grid.children.length-1]);
-            }
+        //adds game to list if not there already
+        if (!Array.prototype.slice.call(grid.children).some((x) => x.timestamp == game.timestamp)) {
+            for (var slotnum = 0; true; slotnum++) { //this is really a while loop but shh don't tell anyone
+                if (slotnum >= grid.children.length) {
+                    for (var i = 0; i < 3; i ++) {
+                        insertEmpty(grid);
+                    }
+                }
+                if (grid.children[slotnum].className == "emptyslot") {
+                    insertGame(slotnum, game);
+                    break;
+                };
+            };
+        }
+    };
+
+    //remove last rows if not needed
+    while (grid.children[grid.children.length-1].className == "emptyslot" &&
+           grid.children[grid.children.length-2].className == "emptyslot" &&
+           grid.children[grid.children.length-3].className == "emptyslot" &&
+           grid.children.length > 3) {
+        for (var i = 0; i < 3; i++) {
+            grid.removeChild(grid.children[grid.children.length-1]);
+        }
+    }
+}
+
+const insertEmpty = (grid) => {
+    var newBox = document.createElement("DIV");
+    newBox.className = "emptyslot";
+    grid.appendChild(newBox);
+}
+
+const insertGame = (gridboxnum, game) => {
+    var thisBox = grid.children[gridboxnum];
+    thisBox.innerHTML = game.html;
+    thisBox.className = "game";
+    thisBox.timestamp = game.timestamp;
+};
+
+const updateLeagues = (games) => {
+    //get all leagues
+    var leagues = []
+    for (var game of games) {
+        if (game.league != "" && !leagues.includes(game.league)) {
+            leagues.push(game.league)
         }
     }
 
-    const insertEmpty = (grid) => {
-        newBox = document.createElement("DIV");
-        newBox.className = "emptyslot";
-        grid.appendChild(newBox);
+     //remove leagues no longer present
+    $('#filters .filter').each(function(index) {
+        if (!leagues.includes($(this).text())) {
+            if (this.id != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter
+                $(this).remove();
+            }
+        } else {
+            leagues.splice(leagues.indexOf($(this).text()), 1);
+        }
+    })
+
+    // add leagues not already present
+    for (var league of leagues) { // we removed the entries that are already there in the loop above
+        var btn = document.createElement("BUTTON");
+        btn.className = "filter"
+        btn.innerHTML = league
+        $('#filters').append(btn);
     }
 
-    const insertGame = (gridboxnum, game) => {
-        var thisBox = grid.children[gridboxnum];
-        thisBox.innerHTML = game.html;
-        thisBox.className = "game";
-        thisBox.timestamp = game.timestamp;
-    };
-});
\ No newline at end of file
+    //add click handlers to each filter
+    $('#filters .filter').each(function(index) {
+        this.onclick = function() {
+            if ($('#filters #selected_filter').text() == 'All') {
+                updateGames([], ""); // clear grid when switching off of All, to make games collapse to top
+            }
+            $('#filters #selected_filter').attr('id', '');
+            this.id = 'selected_filter';
+
+            var search = new URLSearchParams();
+            search.append("name", this.textContent);
+            history.pushState({}, "", (this.textContent != 'All' ? "/league?" + search.toString() : "/"));
+            updateGames(lastupdate, this.textContent);
+        }
+    })
+}
+
+window.onpopstate = function(e) {
+    var searchparams = new URLSearchParams(window.location.search)
+    updateLeagues(lastupdate);
+    $('#filters #selected_filter').attr('id', '');
+    if (searchparams.has('name')) {
+        $('#filters .filter').each(function(i) { if (this.textContent == searchparams.get('name')) { this.id = 'selected_filter' }})
+        updateGames(lastupdate, searchparams.get('name'));
+    } else {
+        $('#filters .filter').each(function(i) { if (this.textContent == 'All') { this.id = 'selected_filter' }})
+        updateGames(lastupdate, "All");
+    }
+}
\ No newline at end of file
diff --git a/templates/game.html b/templates/game.html
index 6e49d0a..9c0306f 100644
--- a/templates/game.html
+++ b/templates/game.html
@@ -1,5 +1,5 @@
 {% macro base(number) -%}
-{% if state.bases[number] %}/static/img/base_filled.png{% else %}/static/img/base_empty.png{% endif %}
+src={% if state.bases[number] %}"/static/img/base_filled.png" alt="{{state.bases[number]}}"{% else %}"/static/img/base_empty.png"{% endif %}
 {%- endmacro %}
 {% macro out(number) -%}
 {% if number <= state.outs %}/static/img/out_out.png{% else %}/static/img/out_in.png{% endif %}
@@ -22,10 +22,10 @@
     </div>
     <div class="info">
         <div class="field">
-            <img class="base base_2" src="{{ base(2) }}"/>
+            <img class="base base_2" {{ base(2) }}/>
             <div style="display: flex;">
-                <img class="base base_3" src="{{ base(3) }}"/>
-                <img class="base base_1" src="{{ base(1) }}"/>
+                <img class="base base_3" {{ base(3) }}/>
+                <img class="base base_1" {{ base(1) }}/>
             </div>
         </div>
         <div class="outs">
diff --git a/templates/index.html b/templates/index.html
index fc9e1ce..f9968a5 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -23,7 +23,8 @@
         <h2 class="page_header">Join SIBR on <a href="https://discord.gg/UhAajY2NCW" class="link"><img src="static/discord.png" height="30"></a> to start your own games!</h2>
         <div id="filters">
             <div>Filter:</div>
-            <button class="filter" id="selected_filter">All</button>
+            <button class="filter" {% if not league %}id="selected_filter"{% endif %}>All</button>
+            {% if league %}<button class="filter" id="selected_filter">{{ league }}</button>{% endif %}
         </div>
     </div>
     <section class="container" id="container">
diff --git a/the_prestige.py b/the_prestige.py
index cfce42d..988bb8d 100644
--- a/the_prestige.py
+++ b/the_prestige.py
@@ -1,4 +1,4 @@
-import discord, json, math, os, roman, games, asyncio, random, main_controller, threading, time, leagues
+import discord, json, math, os, roman, games, asyncio, random, main_controller, threading, time, leagues, urllib
 import database as db
 import onomancer as ono
 from flask import Flask
@@ -731,7 +731,11 @@ async def watch_game(channel, newgame, user = None, league = None):
         discrim_string = "Unclaimed game."
         state_init["is_league"] = False
 
-    await channel.send(f"{newgame.teams['away'].name} vs. {newgame.teams['home'].name}, starting at {config()['simmadome_url']}")
+    if league is not None:
+        league_ext = "league?name=" + urllib.parse.quote_plus(league)
+    else:
+        league_ext = ""
+    await channel.send(f"{newgame.teams['away'].name} vs. {newgame.teams['home'].name}, starting at {config()['simmadome_url']+league_ext}")
     timestamp = str(time.time() * 1000.0)
     gamesarray.append((newgame, channel, user, timestamp))