diff --git a/games/static/base.css b/games/static/base.css
index 7a9bd46..e8342a9 100644
--- a/games/static/base.css
+++ b/games/static/base.css
@@ -910,6 +910,18 @@ select {
   height: 1.5rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.min-h-24 {
+  min-height: 6rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -946,6 +958,10 @@ select {
   max-width: 20rem;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1082,6 +1098,22 @@ select {
   padding-top: 0.25rem;
 }
 
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .text-center {
   text-align: center;
 }
diff --git a/games/templates/add_edition.html b/games/templates/add_edition.html
index 219c595..ae05699 100644
--- a/games/templates/add_edition.html
+++ b/games/templates/add_edition.html
@@ -18,8 +18,8 @@
                 <td></td>
                 <td>
                     <input type="submit"
-                           name="submit_and_redirect"
-                           value="Submit & Create Purchase" />
+                        name="submit_and_redirect"
+                        value="Submit & Create Purchase" />
                 </td>
             </tr>
         </table>
diff --git a/games/templates/add_game.html b/games/templates/add_game.html
index 7954a5d..8a70f4c 100644
--- a/games/templates/add_game.html
+++ b/games/templates/add_game.html
@@ -18,8 +18,8 @@
                 <td></td>
                 <td>
                     <input type="submit"
-                           name="submit_and_redirect"
-                           value="Submit & Create Edition" />
+                        name="submit_and_redirect"
+                        value="Submit & Create Edition" />
                 </td>
             </tr>
         </table>
diff --git a/games/templates/add_purchase.html b/games/templates/add_purchase.html
index cab7f60..93dbabb 100644
--- a/games/templates/add_purchase.html
+++ b/games/templates/add_purchase.html
@@ -18,8 +18,8 @@
                 <td></td>
                 <td>
                     <input type="submit"
-                           name="submit_and_redirect"
-                           value="Submit & Create Session" />
+                        name="submit_and_redirect"
+                        value="Submit & Create Session" />
                 </td>
             </tr>
         </table>
diff --git a/games/templates/add_session.html b/games/templates/add_session.html
index de21487..e78f03b 100644
--- a/games/templates/add_session.html
+++ b/games/templates/add_session.html
@@ -19,8 +19,8 @@
                             <div class="basic-button-container" hx-boost="false">
                                 <button class="basic-button" data-target="{{ field.name }}" data-type="now">Set to now</button>
                                 <button class="basic-button"
-                                        data-target="{{ field.name }}"
-                                        data-type="toggle">Toggle text</button>
+                                    data-target="{{ field.name }}"
+                                    data-type="toggle">Toggle text</button>
                                 <button class="basic-button" data-target="{{ field.name }}" data-type="copy">Copy</button>
                             </div>
                         </td>
diff --git a/games/templates/base.html b/games/templates/base.html
index 7ba30ae..03935a1 100644
--- a/games/templates/base.html
+++ b/games/templates/base.html
@@ -18,21 +18,21 @@
     </head>
     <body class="dark" hx-indicator="#indicator">
         <img id="indicator"
-             src="{% static 'icons/loading.png' %}"
-             class="absolute right-3 top-3 animate-spin htmx-indicator"
-             height="24"
-             width="24"
-             alt="loading indicator" />
-        <div class="dark:bg-gray-800 min-h-screen">
-            <nav class="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
+            src="{% static 'icons/loading.png' %}"
+            class="absolute right-3 top-3 animate-spin htmx-indicator"
+            height="24"
+            width="24"
+            alt="loading indicator" />
+        <div class="flex flex-col min-h-screen">
+            <nav class="dark:bg-gray-900 border-gray-200 h-24 flex items-center">
                 <div class="container flex flex-wrap items-center justify-between mx-auto">
                     <a href="{% url 'list_sessions_recent' %}" class="flex items-center">
                         <span class="text-4xl">
                             <img src="{% static 'icons/schedule.png' %}"
-                                 height="48"
-                                 width="48"
-                                 alt="Timetracker Logo"
-                                 class="mr-4" />
+                                height="48"
+                                width="48"
+                                alt="Timetracker Logo"
+                                class="mr-4" />
                         </span>
                         <span class="self-center text-xl font-semibold whitespace-nowrap text-white">Timetracker</span>
                     </a>
@@ -40,77 +40,79 @@
                         <ul class="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
                             <li class="relative group">
                                 {% if user.is_authenticated %}
-                                <a class="block py-2 pl-3 pr-4 hover:underline"
-                                   href="{% url 'add_game' %}">New</a>
-                                <ul class="absolute hidden text-gray-700 pt-1 group-hover:block  w-auto whitespace-nowrap">
-                                    {% if purchase_available %}
-                                        <li>
-                                            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-                                               href="{% url 'add_device' %}">Device</a>
-                                        </li>
-                                    {% endif %}
-                                    <li>
-                                        <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-                                           href="{% url 'add_game' %}">Game</a>
-                                    </li>
-                                    {% if game_available and platform_available %}
-                                        <li>
-                                            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-                                               href="{% url 'add_edition' %}">Edition</a>
-                                        </li>
-                                    {% endif %}
-                                    <li>
-                                        <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-                                           href="{% url 'add_platform' %}">Platform</a>
-                                    </li>
-                                    {% if edition_available %}
-                                        <li>
-                                            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-                                               href="{% url 'add_purchase' %}">Purchase</a>
-                                        </li>
-                                    {% endif %}
-                                    {% if purchase_available %}
-                                        <li>
-                                            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-                                               href="{% url 'add_session' %}">Session</a>
-                                        </li>
-                                    {% endif %}
-                                </ul>
-                            </li>
-                            {% if session_count > 0 %}
-                                <li class="relative group">
                                     <a class="block py-2 pl-3 pr-4 hover:underline"
-                                       href="{% url 'stats_current_year' %}">Stats</a>
-                                    <ul class="absolute hidden text-gray-700 pt-1 group-hover:block">
-                                        {% for year in stats_dropdown_year_range %}
+                                        href="{% url 'add_game' %}">New</a>
+                                    <ul class="absolute hidden text-gray-700 pt-1 group-hover:block  w-auto whitespace-nowrap">
+                                        {% if purchase_available %}
                                             <li>
                                                 <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-                                                   href="{% url 'stats_by_year' year %}">{{ year }}</a>
+                                                    href="{% url 'add_device' %}">Device</a>
                                             </li>
-                                        {% endfor %}
+                                        {% endif %}
+                                        <li>
+                                            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+                                                href="{% url 'add_game' %}">Game</a>
+                                        </li>
+                                        {% if game_available and platform_available %}
+                                            <li>
+                                                <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+                                                    href="{% url 'add_edition' %}">Edition</a>
+                                            </li>
+                                        {% endif %}
+                                        <li>
+                                            <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+                                                href="{% url 'add_platform' %}">Platform</a>
+                                        </li>
+                                        {% if edition_available %}
+                                            <li>
+                                                <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+                                                    href="{% url 'add_purchase' %}">Purchase</a>
+                                            </li>
+                                        {% endif %}
+                                        {% if purchase_available %}
+                                            <li>
+                                                <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+                                                    href="{% url 'add_session' %}">Session</a>
+                                            </li>
+                                        {% endif %}
                                     </ul>
-                                </li>
-                                <li>
-                                    <a class="block py-2 pl-3 pr-4 hover:underline"
-                                       href="{% url 'list_sessions' %}">All Sessions</a>
-                                </li>
-                                <li>
-                                    <a class="block py-2 pl-3 pr-4 hover:underline"
-                                       href="{% url 'logout' %}">Log Out</a>
-                                </li>
+                                    </li>
+                                    {% if session_count > 0 %}
+                                        <li class="relative group">
+                                            <a class="block py-2 pl-3 pr-4 hover:underline"
+                                                href="{% url 'stats_current_year' %}">Stats</a>
+                                            <ul class="absolute hidden text-gray-700 pt-1 group-hover:block">
+                                                {% for year in stats_dropdown_year_range %}
+                                                    <li>
+                                                        <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+                                                            href="{% url 'stats_by_year' year %}">{{ year }}</a>
+                                                    </li>
+                                                {% endfor %}
+                                            </ul>
+                                        </li>
+                                        <li>
+                                            <a class="block py-2 pl-3 pr-4 hover:underline"
+                                                href="{% url 'list_sessions' %}">All Sessions</a>
+                                        </li>
+                                        <li>
+                                            <a class="block py-2 pl-3 pr-4 hover:underline"
+                                                href="{% url 'logout' %}">Log Out</a>
+                                        </li>
+                                    {% endif %}
                                 {% endif %}
-                            {% endif %}
-                        </ul>
+                            </ul>
+                        </div>
                     </div>
+                </nav>
+                <div class="flex flex-1 dark:bg-gray-800 justify-center pt-8 pb-16">
+                    {% block content %}
+                        No content here.
+                    {% endblock content %}
                 </div>
-            </nav>
-            {% block content %}
-                No content here.
-            {% endblock content %}
-        </div>
-        {% load version %}
-        <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
-        {% block scripts %}
-        {% endblock scripts %}
-    </body>
-</html>
+                {% load version %}
+                <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
+            </div>
+            {% block scripts %}
+            {% endblock scripts %}
+        </body>
+    </html>
diff --git a/games/templates/list_sessions.html b/games/templates/list_sessions.html
index 70de2ae..fb36355 100644
--- a/games/templates/list_sessions.html
+++ b/games/templates/list_sessions.html
@@ -4,32 +4,33 @@
     {{ title }}
 {% endblock title %}
 {% block content %}
-    {% if dataset_count >= 1 %}
-        {% url 'list_sessions_start_session_from_session' last.id as start_session_url %}
-        <div class="mx-auto text-center my-4">
-            <a id="last-session-start"
-                href="{{ start_session_url }}"
-                hx-get="{{ start_session_url }}"
-                hx-swap="afterbegin"
-                hx-target=".responsive-table tbody"
-                onClick="document.querySelector('#last-session-start').classList.add('invisible')"
-                class="{% if last.timestamp_end == null %}invisible{% endif %}">
-                {% include 'components/button_start.html' with text=last.purchase title="Start session of last played game" only %}
-            </a>
-        </div>
-    {% endif %}
-    {% if dataset_count != 0 %}
-        <table class="responsive-table">
-            <thead>
-                <tr>
-                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
-                    <th class="hidden sm:table-cell px-2 sm:px-4 md:px-6 md:py-2">Start</th>
-                    <th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
-                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for session in dataset %}
+    <div class="flex-col">
+        {% if dataset_count >= 1 %}
+            {% url 'list_sessions_start_session_from_session' last.id as start_session_url %}
+            <div class="mx-auto text-center my-4">
+                <a id="last-session-start"
+                    href="{{ start_session_url }}"
+                    hx-get="{{ start_session_url }}"
+                    hx-swap="afterbegin"
+                    hx-target=".responsive-table tbody"
+                    onClick="document.querySelector('#last-session-start').classList.add('invisible')"
+                    class="{% if last.timestamp_end == null %}invisible{% endif %}">
+                    {% include 'components/button_start.html' with text=last.purchase title="Start session of last played game" only %}
+                </a>
+            </div>
+        {% endif %}
+        {% if dataset_count != 0 %}
+            <table class="responsive-table">
+                <thead>
+                    <tr>
+                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
+                        <th class="hidden sm:table-cell px-2 sm:px-4 md:px-6 md:py-2">Start</th>
+                        <th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
+                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for session in dataset %}
                         {% partialdef session-row inline=True %}
                             <tr>
                                 <td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char md:max-w-40char">
@@ -43,7 +44,7 @@
                                 </td>
                                 <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
                                     {% if not session.timestamp_end %}
-                                    {% url 'list_sessions_end_session' session.id as end_session_url %}
+                                        {% url 'list_sessions_end_session' session.id as end_session_url %}
                                         <a  href="{{ end_session_url }}"
                                             hx-get="{{ end_session_url }}"
                                             hx-target="closest tr"
@@ -61,10 +62,11 @@
                                 <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ session.duration_formatted }}</td>
                             </tr>
                         {% endpartialdef %}
-                {% endfor %}
-            </tbody>
-        </table>
-    {% else %}
-        <div class="mx-auto text-center text-slate-300 text-xl">No sessions found.</div>
-    {% endif %}
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% else %}
+            <div class="mx-auto text-center text-slate-300 text-xl">No sessions found.</div>
+        {% endif %}
+    </div>
 {% endblock content %}
diff --git a/games/templates/registration/login.html b/games/templates/registration/login.html
index 9fb368f..8df4f0d 100644
--- a/games/templates/registration/login.html
+++ b/games/templates/registration/login.html
@@ -5,17 +5,19 @@
     Login
 {% endblock title %}
 {% block content %}
-    <h2 class="text-3xl text-white mb-8 mx-auto text-center">Please log in to continue</h2>
-    <form method="post">
-            <table class="mx-auto">
-        {% csrf_token %}
-        {{ form.as_table }}
-        <tr>
-            <td></td>
-            <td>
-                <input type="submit" value="Login" />
-            </td>
-        </tr>
-        </form>
-    </table>
+    <div class="flex items-center flex-col">
+        <h2 class="text-3xl text-white mb-8">Please log in to continue</h2>
+        <form method="post">
+            <table>
+                {% csrf_token %}
+                {{ form.as_table }}
+                <tr>
+                    <td></td>
+                    <td>
+                        <input type="submit" value="Login" />
+                    </td>
+                </tr>
+            </form>
+        </table>
+    </div>
 {% endblock content %}
diff --git a/games/templates/stats.html b/games/templates/stats.html
index 290a92e..0be97dd 100644
--- a/games/templates/stats.html
+++ b/games/templates/stats.html
@@ -9,9 +9,9 @@
             <form method="get" class="text-center">
                 <label class="text-5xl text-center inline-block mb-10" for="yearSelect">Stats for:</label>
                 <select name="year"
-                        id="yearSelect"
-                        onchange="this.form.submit();"
-                        class="mx-2">
+                    id="yearSelect"
+                    onchange="this.form.submit();"
+                    class="mx-2">
                     {% for year_item in stats_dropdown_year_range %}
                         <option value="{{ year_item }}" {% if year == year_item %}selected{% endif %}>{{ year_item }}</option>
                     {% endfor %}
@@ -115,7 +115,7 @@
                     <tr>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                             <a class="underline decoration-slate-500 sm:decoration-2"
-                               href="{% url 'view_game' game.id %}">{{ game.name }}</a>
+                                href="{% url 'view_game' game.id %}">{{ game.name }}</a>
                         </td>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.formatted_playtime }}</td>
                     </tr>
@@ -152,7 +152,7 @@
                     <tr>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                             <a class="underline decoration-slate-500 sm:decoration-2"
-                               href="{% url 'edit_purchase' purchase.id %}">
+                                href="{% url 'edit_purchase' purchase.id %}">
                                 {% if purchase.type == 'dlc' %}
                                     {{ purchase.name }} ({{ purchase.edition.name }} DLC)
                                 {% else %}
@@ -178,7 +178,7 @@
                     <tr>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                             <a class="underline decoration-slate-500 sm:decoration-2"
-                               href="{% url 'edit_purchase' purchase.id %}">{{ purchase.edition.name }}</a>
+                                href="{% url 'edit_purchase' purchase.id %}">{{ purchase.edition.name }}</a>
                         </td>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
                     </tr>
@@ -198,7 +198,7 @@
                     <tr>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                             <a class="underline decoration-slate-500 sm:decoration-2"
-                               href="{% url 'edit_purchase' purchase.id %}">{{ purchase.edition.name }}</a>
+                                href="{% url 'edit_purchase' purchase.id %}">{{ purchase.edition.name }}</a>
                         </td>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
                     </tr>
@@ -220,7 +220,7 @@
                     <tr>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                             <a class="underline decoration-slate-500 sm:decoration-2"
-                               href="{% url 'edit_purchase' purchase.id %}">
+                                href="{% url 'edit_purchase' purchase.id %}">
                                 {{ purchase.edition.name }}
                                 {% if purchase.type == "dlc" %}({{ purchase.name }}, {{ purchase.get_type_display }}){% endif %}
                             </a>
@@ -246,7 +246,7 @@
                     <tr>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                             <a class="underline decoration-slate-500 sm:decoration-2"
-                               href="{% url 'edit_purchase' purchase.id %}">
+                                href="{% url 'edit_purchase' purchase.id %}">
                                 {{ purchase.edition.name }}
                                 {% if purchase.type != "game" %}({{ purchase.name }}, {{ purchase.get_type_display }}){% endif %}
                             </a>
diff --git a/games/templates/view_game.html b/games/templates/view_game.html
index 21a8f72..66edefe 100644
--- a/games/templates/view_game.html
+++ b/games/templates/view_game.html
@@ -80,20 +80,20 @@
                         {% url 'edit_session' session.id as edit_url %}
                         {% include 'components/edit_button.html' with edit_url=edit_url %}
                         {% if not session.timestamp_end %}
-                        {% url 'view_game_end_session' session.id as end_session_url %}
-                        <a
-                            class="flex bg-green-600 rounded-full px-2 w-7 h-4 text-white justify-center items-center"
-                            href="{{ end_session_url }}"
-                            hx-get="{{ end_session_url }}"
-                            hx-target="closest li"
-                            hx-swap="outerHTML"
-                            hx-vals="js:{session_count:getSessionCount()}"
-                            hx-indicator="#indicator"
-                        >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" class="h-3" x="0px" y="0px" viewBox="0 0 24 24">
-                            <path d="M 12 2 C 6.486 2 2 6.486 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 10.874 21.803984 9.7942031 21.458984 8.7832031 L 19.839844 10.402344 C 19.944844 10.918344 20 11.453 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 7.589 7.589 4 12 4 C 13.633 4 15.151922 4.4938906 16.419922 5.3378906 L 17.851562 3.90625 C 16.203562 2.71225 14.185 2 12 2 z M 21.292969 3.2929688 L 11 13.585938 L 7.7070312 10.292969 L 6.2929688 11.707031 L 11 16.414062 L 22.707031 4.7070312 L 21.292969 3.2929688 z"></path>
-                        </svg>
-                        </a>
+                            {% url 'view_game_end_session' session.id as end_session_url %}
+                            <a
+                                class="flex bg-green-600 rounded-full px-2 w-7 h-4 text-white justify-center items-center"
+                                href="{{ end_session_url }}"
+                                hx-get="{{ end_session_url }}"
+                                hx-target="closest li"
+                                hx-swap="outerHTML"
+                                hx-vals="js:{session_count:getSessionCount()}"
+                                hx-indicator="#indicator"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" class="h-3" x="0px" y="0px" viewBox="0 0 24 24">
+                                    <path d="M 12 2 C 6.486 2 2 6.486 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 10.874 21.803984 9.7942031 21.458984 8.7832031 L 19.839844 10.402344 C 19.944844 10.918344 20 11.453 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 7.589 7.589 4 12 4 C 13.633 4 15.151922 4.4938906 16.419922 5.3378906 L 17.851562 3.90625 C 16.203562 2.71225 14.185 2 12 2 z M 21.292969 3.2929688 L 11 13.585938 L 7.7070312 10.292969 L 6.2929688 11.707031 L 11 16.414062 L 22.707031 4.7070312 L 21.292969 3.2929688 z"></path>
+                                </svg>
+                            </a>
 
                         {% endif %}
                     </li>
