diff --git a/teamsnap/dashboard/templates/dashboard.html b/teamsnap/dashboard/templates/dashboard.html
index 9c473af..6bbb31d 100644
--- a/teamsnap/dashboard/templates/dashboard.html
+++ b/teamsnap/dashboard/templates/dashboard.html
@@ -19,54 +19,7 @@
     <div class="col">
       <div class="pb-3 flex-nowrap d-flex">
         {% for event, availability_summary in events_availabilities|slice:":5" %}
-          <div class="card mx-2" style="min-width: 320px;max-width: 375px;">
-            <div class="row m-0 p-2">
-              <div class="col p-0 m-auto" style="flex: 0 0 100px;">
-                <div class="d-inline-flex m-0 p-0">
-                  <div class="chart-container" style="height: 100px;width: 100px;">
-                    <canvas id="availability-donut-{{ event.data.id }}" class="availability-donut"
-                            data-event-id="{{ event.data.id }}"
-                            data-available-yes="{{ availability_summary.data.player_going_count }}"
-                            data-available-no="{{ availability_summary.data.player_not_going_count }}"
-                            data-available-maybe="{{ availability_summary.data.player_maybe_count }}"
-                            data-available-unknown="{{ availability_summary.data.player_unknown_count }}"
-                    >
-                    </canvas></div>
-                </div>
-              </div>
-              <div class="col">
-                <div>
-                  <h4><strong><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></strong></h4>
-                  <h6 class="text-muted mb-2">{{ event.data.start_date|date:"D, F j, g:i A" }}</h6>
-                  <h6 class="text-muted mb-2">{{ event.data.location_name }}</h6>
-                </div>
-                <div class="d-flex">
-                  <a class="btn btn-primary btn-sm mx-1 text-nowrap" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=event.data.team_id %}">
-                    Go to Lineup
-                  </a>
-                  <a class="btn btn-primary btn-sm mx-1" role="button" href="{% url 'gamecard' event_id=event.data.id team_id=event.data.team_id %}">
-                    <i class="bi bi-book"></i>
-                  </a>
-                  <form method="get"
-                        action="{% url 'instagen_generate' team_id=event.data.team_id event_id=event.data.id %}">
-                    <select hidden class="form-select" name="game_id" id="game_id">
-                      <optgroup label="Events">
-                        <option value="" disabled="disabled">Select an event...</option>
-                        <option selected
-                                value="{{ event.data.id }}">{{ event.data.formatted_title }}</option>
-                      </optgroup>
-                    </select>
-                    <input hidden class="form-check-input" type="radio" name="background"
-                           id="backgroundLocation" checked value="location">
-                    <input hidden class="form-check-input" type="radio" name="dimensions" id="square" checked
-                           value="1080x1080">
-                    <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-instagram"></i>
-                    </button>
-                  </form>
-                </div>
-              </div>
-            </div>
-          </div>
+        {% include "widgets/event-card.html"%}
         {% endfor %}
       </div>
     </div>
@@ -82,41 +35,7 @@
     <div class="col">
       <div class="pb-3 flex-nowrap d-flex">
         {% for event in ts_events_past|slice:":4" %}
-          <div class="card mx-2" style="min-width: 320px;max-width: 375px;">
-            <div class="row m-0 p-2">
-              <div class="col p-0 m-auto rounded-circle bg-light" style="flex: 0 0 100px;">
-                <div class="d-inline-flex m-0 p-0">
-                  <div class="d-flex align-items-center justify-content-center" style="height: 100px;width: 100px;">
-                    <h4 class="text-center"><strong>{{ event.data.formatted_results }}</strong></h4>
-                  </div>
-                </div>
-              </div>
-              <div class="col">
-                <h4 class=""><strong><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></strong></h4>
-                <h6 class="text-muted mb-2">{{ event.data.start_date|date:"D, F j" }}</h6>
-                {#                                <h6 class="text-muted mb-2">{{ event.data.location_name }}</h6><a class="btn btn-primary btn-sm" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=request.user.teamsnapsettings.managed_team.id %}">Go to Lineup</a>#}
-
-                <div class="d-flex">
-                  <form method="get"
-                        action="{% url 'instagen_generate' team_id=event.data.team_id event_id=event.data.id %}">
-                    <select hidden class="form-select" name="game_id" id="game_id">
-                      <optgroup label="Events">
-                        <option value="" disabled="disabled">Select an event...</option>
-                        <option selected
-                                value="{{ event.data.id }}">{{ event.data.formatted_title }}</option>
-                      </optgroup>
-                    </select>
-                    <input hidden class="form-check-input" type="radio" name="background"
-                           id="backgroundLocation" checked value="location">
-                    <input hidden class="form-check-input" type="radio" name="dimensions" id="square" checked
-                           value="1080x1080">
-                    <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-instagram"></i>
-                    </button>
-                  </form>
-                </div>
-              </div>
-            </div>
-          </div>
+          {% include "widgets/event-card.html"%}
         {% endfor %}
       </div>
     </div>
@@ -124,42 +43,3 @@
 
   </div>
 {% endblock %}
-{% block inline_javascript %}
-  <script>
-    function donut(ctx, yes_count, maybe_count, no_count, unknown_count) {
-      var style = getComputedStyle(document.body);
-      const myChart = new Chart(ctx, {
-        type: 'doughnut',
-        responsive: 'true',
-        data: {
-          datasets: [{
-            label: 'Availability',
-            labels: [
-              'Yes',
-              'Maybe',
-              'No',
-              'Unknown'
-            ],
-            data: [yes_count, maybe_count, no_count, unknown_count],
-            backgroundColor: [
-              style.getPropertyValue('--bs-success'),
-              style.getPropertyValue('--bs-info'),
-              style.getPropertyValue('--bs-danger'),
-              style.getPropertyValue('--bs-secondary')
-            ],
-            hoverOffset: 4
-          }]
-        },
-      });
-
-    }
-    for (ctx of document.querySelectorAll('.availability-donut')){
-      donut(ctx,
-        ctx.dataset.availableYes,
-        ctx.dataset.availableMaybe,
-        ctx.dataset.availableNo,
-        ctx.dataset.availableUnknown,
-      )
-    }
-  </script>
-{% endblock %}
diff --git a/teamsnap/dashboard/templates/widgets/event-card.html b/teamsnap/dashboard/templates/widgets/event-card.html
new file mode 100644
index 0000000..ff6da85
--- /dev/null
+++ b/teamsnap/dashboard/templates/widgets/event-card.html
@@ -0,0 +1,44 @@
+{% load availability_percentage %}
+<div class="card mx-2" style="min-width: 320px;max-width: 375px;">
+  <div class="row m-0 p-2">
+    <div class="col">
+      <div>
+        <span class="h4"><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></span>
+        <h6 class="text-muted mb-2">
+          {{ event.data.start_date|date:"D, F j, g:i A" }}<br>
+          {{ event.data.location_name }}
+        </h6>
+      </div>
+      {% if not event.data.results %}
+      <div>
+        <div class="progress">
+          <div class="progress-bar bg-success" role="progressbar" style="width: {% availability_percentage availability_summary 'player_going' %}%">{{ availability_summary.data.player_going_count }}</div>
+          <div class="progress-bar bg-info" role="progressbar" style="width: {% availability_percentage availability_summary 'player_maybe' %}%">{{ availability_summary.data.player_maybe_count }}</div>
+          <div class="progress-bar bg-danger" role="progressbar" style="width: {% availability_percentage availability_summary 'player_not_going' %}%" >{{ availability_summary.data.player_not_going_count }}</div>
+          <div class="progress-bar text-secondary" role="progressbar" style="width: {% availability_percentage availability_summary 'player_unknown' %}%;background-color:#e9ecef;">{{ availability_summary.data.player_unknown_count }}</div>
+        </div>
+      </div>
+      {% endif %}
+      {% if event.data.results %}
+      <div>
+        <span class="h4">{{ event.data.formatted_results }}</span>
+      </div>
+      {% endif %}
+      <hr/>
+      <div class="d-flex">
+        <a class="card-link m-auto" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=event.data.team_id %}">
+          <i class="bi bi-clipboard"></i>
+        </a>
+        <a class="card-link m-auto" role="button" href="{% url 'gamecard' event_id=event.data.id team_id=event.data.team_id %}">
+          <i class="bi bi-book"></i>
+        </a>
+        <a class="card-link m-auto"
+              href="{% url 'instagen' team_id=event.data.team_id event_id=event.data.id %}">
+          <i class="bi bi-instagram"></i>
+          </button>
+        </a>
+      </div>
+    </div>
+
+  </div>
+</div>
diff --git a/teamsnap/dashboard/views.py b/teamsnap/dashboard/views.py
index 8c6adf3..13163f1 100644
--- a/teamsnap/dashboard/views.py
+++ b/teamsnap/dashboard/views.py
@@ -1,9 +1,22 @@
 import datetime
 
+from django import template
 from django.shortcuts import redirect, render
 
 from teamsnap.views import get_teamsnap_client
 
+register = template.Library()
+
+
+@register.simple_tag
+def multiply(a, b):
+    return a * b
+
+
+@register.simple_tag
+def divide(a, b):
+    return int(a / b)
+
 
 def dashboard(request, team_id=None):
     if not team_id:
diff --git a/teamsnap/lineup/templates/lineup/edit.html b/teamsnap/lineup/templates/lineup/edit.html
index 7815256..6e713a4 100644
--- a/teamsnap/lineup/templates/lineup/edit.html
+++ b/teamsnap/lineup/templates/lineup/edit.html
@@ -4,40 +4,27 @@
 {#{% block page_subheading %}{% endblock %}#}
 
 {% block content %}
-    {#    <div class="container overflow-scroll mx-0 px-0">#}
-    {#        <div class="row flex-row flex-nowrap">#}
-    {#            {% for event_data in contexts  %}#}
-    {#                <div class="col border-start border-end">#}
-    {#                    <div class = "border-bottom">#}
-    {#                        <h4>{{ event_data.event.data.formatted_title }}</h4>#}
-    {#                        <h6 class="text-muted" >{{ event_data.data.start_date }}</h6>#}
-    {#                    </div>#}
-    {#                    {% include 'teamsnap/lineup/widgets/lineup.html' with formset_lineup=event_data.formset_lineup formset_bench=event_data.formset_bench event_id=event_data.event.data.id  %}#}
-    {#                </div>#}
-    {#            {% endfor %}#}
-    {#        </div>#}
-    {#    </div>#}
-    <div class="container overflow-scroll">
-      <div id="popup-messages-content">
-      </div>
-        <div class="row flex-row flex-nowrap">
-            <table>
-                <tbody>
-                <tr class="align-top mx-1">
-                    {% for event_data in contexts %}
-                        <td class="px-1">
-                            {% include "lineup/widgets/lineup.html" with event=event_data.event event_id=event_data.event.data.id formset=event_data.formset formset_startinglineup=event_data.formset_startinglineup formset_bench=event_data.formset_bench formset_out=event_data.formset_out formset_startingpositionalonly=event_data.formset_startingpositionalonly %}
-                        </td>
-                    {% endfor %}
-                </tr>
-                </tbody>
-            </table>
-        </div>
+  <div class="container overflow-scroll">
+    <div id="popup-messages-content">
     </div>
+    <div class="row flex-row flex-nowrap">
+      <table>
+        <tbody>
+        <tr class="align-top mx-1">
+          {% for event_data in contexts %}
+            <td class="px-1">
+              {% include "lineup/widgets/lineup.html" with event=event_data.event event_id=event_data.event.data.id formset=event_data.formset formset_startinglineup=event_data.formset_startinglineup formset_bench=event_data.formset_bench formset_out=event_data.formset_out formset_startingpositionalonly=event_data.formset_startingpositionalonly availability_summary=event_data.availability_summary %}
+            </td>
+          {% endfor %}
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 {% endblock %}
 
 {% block inline_javascript %}
- {{ block.super }}
+  {{ block.super }}
   <script src="{% static 'js/Sortable.js' %}"></script>
   <script src="{% static 'lineup/js/lineup.js' %}"></script>
   <script>
diff --git a/teamsnap/lineup/templates/lineup/widgets/lineup.html b/teamsnap/lineup/templates/lineup/widgets/lineup.html
index 522a025..02debf0 100644
--- a/teamsnap/lineup/templates/lineup/widgets/lineup.html
+++ b/teamsnap/lineup/templates/lineup/widgets/lineup.html
@@ -1,11 +1,21 @@
 {% load static %}
+{% load availability_percentage %}
 <div class="card mx-auto benchcoach-lineup" style="max-width: 455px" id="benchcoach-lineup-{{ event_id }}">
   <form method="post" id="form-lineup-{{ event.data.id }}">
     {{ formset.management_form }}
     {% csrf_token %}
     <div class="border-bottom p-2">
-      <h4 class="card-title text-nowrap">{{ event.data.formatted_title }}</h4>
-      <h6 class="text-muted card-subtitle text-nowrap">{{ event.data.start_date|date:"D, F j, Y g:i A" }}</h6>
+      <span class="h4"><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></span>
+        <h6 class="text-muted mb-2">
+          {{ event.data.start_date|date:"D, F j, g:i A" }}<br>
+          {{ event.data.location_name }}
+        </h6>
+    <div class="progress">
+          <div class="progress-bar bg-success" role="progressbar" style="width: {% availability_percentage availability_summary 'player_going' %}%">{{ availability_summary.data.player_going_count }}</div>
+          <div class="progress-bar bg-info" role="progressbar" style="width: {% availability_percentage availability_summary 'player_maybe' %}%">{{ availability_summary.data.player_maybe_count }}</div>
+          <div class="progress-bar bg-danger" role="progressbar" style="width: {% availability_percentage availability_summary 'player_not_going' %}%" >{{ availability_summary.data.player_not_going_count }}</div>
+          <div class="progress-bar text-secondary" role="progressbar" style="width: {% availability_percentage availability_summary 'player_unknown' %}%;background-color:#e9ecef;">{{ availability_summary.data.player_unknown_count }}</div>
+        </div>
 
       <div class="row">
         <div class="col text-end d-inline">
diff --git a/teamsnap/lineup/views.py b/teamsnap/lineup/views.py
index eea4dca..99953f6 100644
--- a/teamsnap/lineup/views.py
+++ b/teamsnap/lineup/views.py
@@ -42,7 +42,11 @@ def edit_lineup(request, event_ids, team_id):
         ][0]
         ts_availabilities = Availability.search(client, event_id=ts_event.data["id"])
         ts_lineup_entries = EventLineupEntry.search(client, event_id=event_id)
-
+        ts_availability_summary = [
+            i
+            for i in ts_bulkload
+            if isinstance(i, AvailabilitySummary) and i.data["event_id"] == event_id
+        ][0]
         ts_members = [i for i in ts_bulkload if isinstance(i, Member)]
         ts_member_lookup = {m.data["id"]: m for m in ts_members}
         gc_player_lookup = {
@@ -179,6 +183,7 @@ def edit_lineup(request, event_ids, team_id):
         contexts.append(
             {
                 "event": ts_event,
+                "availability_summary": ts_availability_summary,
                 "formset": formset,
                 "formset_bench": formset_bench,
                 "formset_startinglineup": formset_startinglineup,