diff --git a/games/templates/view_game.html b/games/templates/view_game.html
index e606b55..d120deb 100644
--- a/games/templates/view_game.html
+++ b/games/templates/view_game.html
@@ -84,17 +84,11 @@
                     <div class="inline-flex rounded-md shadow-xs" role="group" @click.outside="open = false">
                         <button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
                             <span class="flex flex-row gap-4 justify-between items-center">
-                                <span class="flex gap-2 items-center text-slate-300">
-                                    <span class="rounded-xl w-3 h-3"
-                                          :class="{
-                                            'bg-gray-500': status == 'u',
-                                            'bg-orange-400': status == 'p',
-                                            'bg-green-500': status == 'f',
-                                            'bg-red-500': status == 'a',
-                                            'bg-purple-500': status == 'r'
-                                          }">&nbsp;</span>
-                                    <span x-text="status_display"></span>
-                                </span>
+                                {% for status_value, status_label in game_statuses %}
+                                    <template x-if="status == '{{ status_value }}'">
+                                        <c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus>
+                                    </template>
+                                {% endfor %}
                                 <svg class="text-white w-3" viewBox="5 8 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
@@ -103,10 +97,11 @@
                                 class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700"
                                 x-show="open"
                             >
-                                <ul class="[&_li:first-of-type]:rounded-none [&_li:last-of-type]:rounded-t-none">
+                                <ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">
                                     {% for status_value, status_label in game_statuses %}
-                                        <li class="px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded">
+                                        <li>
                                             <a href="#" @click.prevent.stop="setStatus('{{ status_value }}', '{{ status_label }}'); open = false;"
+                                               class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded"
                                                :class="{ 'font-bold': status === '{{ status_value }}' }">
                                                 <c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus>
                                             </a>