diff --git a/benchcoach/static/css/base.css b/benchcoach/static/css/base.css
new file mode 100644
index 0000000..523be88
--- /dev/null
+++ b/benchcoach/static/css/base.css
@@ -0,0 +1 @@
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");
\ No newline at end of file
diff --git a/lineups/templates/lineups/lineup.html b/lineups/templates/lineups/lineup.html
index a288036..259ec9b 100644
--- a/lineups/templates/lineups/lineup.html
+++ b/lineups/templates/lineups/lineup.html
@@ -2,13 +2,17 @@
 {% with events_active="active" %}
 {% block precontent %}
     <div class="d-flex justify-content-center justify-content-md-center border-bottom bg-white">
-        <a class="btn btn-outline-secondary btn-sm d-md-flex my-auto align-items-md-center my-3 mx-3" href="{% url 'edit lineup' event_id=previous_event.id %}" role="button">&lt; {{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}</a>
+        <a class="btn btn-outline-secondary btn-sm d-md-flex my-auto align-items-md-center my-3 mx-3" href="{% url 'edit lineup' event_id=previous_event.id %}" role="button">
+            <i class="bi bi-chevron-left"></i>{{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}
+        </a>
         <div>
             <h6 class="text-center m-1">{{ event.away_team.name }} vs. {{ event.home_team.name }}</h6>
             <p class="text-center text-muted m-1">{{ event.start|date:"l, F j, Y g:i A" }}<br>{{ event.venue.name }}</p>
             <h6 class="text-muted m-1"></h6>
         </div>
-        <a class="btn btn-outline-secondary btn-sm align-items-center my-auto my-3 mx-3" href="{% url 'edit lineup' event_id=next_event.id %}" role="button">{{ next_event.start|date:"D" }}&nbsp;{{ next_event.start|date:"n/j" }} &gt;</a>
+        <a class="btn btn-outline-secondary btn-sm align-items-center my-auto my-3 mx-3" href="{% url 'edit lineup' event_id=next_event.id %}" role="button">
+            {{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}<i class="bi bi-chevron-right"></i>
+        </a>
     </div>
 
     <ul class="nav nav-pills nav-fill bg-white" role="tablist">
@@ -54,7 +58,7 @@
                     <div class="card my-1">
                         <div class="card-header"><h5>Bench</h5></div>
                         <div class="card-body p-0">
-                            {% include 'lineups/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none"%}
+                            {% include 'lineups/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none" available_class="d-none"%}
                         </div>
                     </div>
                 </div>
diff --git a/lineups/templates/lineups/player-table.html b/lineups/templates/lineups/player-table.html
index 0be2593..807fe35 100644
--- a/lineups/templates/lineups/player-table.html
+++ b/lineups/templates/lineups/player-table.html
@@ -17,39 +17,7 @@
             {{ form.order.as_hidden }}
             {{ form.player.as_hidden }}
             {{ form.teamsnap_id.as_hidden }}
-            <td id="player-availability-{{ form.instance.player.id }}"
-                class="{{ available_class }}"
-            >
-                {% if form.availability.available == 1 %}
-                    <button class="btn btn-light bg-info p-1"
-                            id="player-available-{{ form.instance.player.id }}"
-                    >
-                        <span style="visibility: hidden">2</span>
-                        <span class="visually-hidden">Maybe</span>
-                    </button>
-                {% elif form.availability.available == 2%}
-                    <button class="btn btn-light bg-success p-1"
-                            id="player-available-{{ form.instance.player.id }}"
-                    >
-                        <span style="visibility: hidden">1</span>
-                    </button>
-                    <span class="visually-hidden">Yes</span>
-                {% elif form.availability.available == 0%}
-                    <button class="btn btn-light bg-danger p-1"
-                            id="player-available-{{ form.instance.player.id }}"
-                    >
-                        <span style="visibility: hidden">0</span>
-                    </button>
-                    <span class="visually-hidden">No</span>
-                {% else %}
-                    <button class="btn btn-light bg-secondary p-1"
-                            id="player-available-{{ form.instance.player.id }}"
-                    >
-                        <span style="visibility: hidden">X</span>
-                    </button>
-                    <span class="visually-hidden">Unknown</span>
-                {% endif %}
-            </td>
+
             <th scope="row"
                 id="player-order-{{ form.instance.player.id }}"
                 class="{{ order_class }}">
@@ -71,7 +39,21 @@
                     </button>
                 {% endif %}
             </th>
+
             <th>
+                <span id="player-availability-{{ form.instance.player.id }}" class="mx-1">
+                {% if form.availability.available == 2 %}
+                    <i class="bi bi-circle-fill text-success"></i>
+                {% elif form.availability.available == 1 %}
+                    <i class="bi bi-circle-fill text-info"></i>
+                {% elif form.availability.available == 0 %}
+                    <i class="bi bi-circle-fill text-danger"></i>
+                {% else %}
+                    <i class="bi bi-circle-fill text-secondary"></i>
+                {% endif %}
+                </span>
+
+
                 {{ form.instance.player.first_name }}&nbsp;{{ form.instance.player.last_name }}&nbsp;
                 <small class="text-muted fw-light">#{{ form.instance.player.jersey_number }}</small>
                 {#        <br><code><small>{{ form.statline }}</small></code>#}