diff --git a/frontend/scss/components/_status.scss b/frontend/scss/components/_status.scss
index 57fadfa..204cb6e 100644
--- a/frontend/scss/components/_status.scss
+++ b/frontend/scss/components/_status.scss
@@ -1,11 +1,11 @@
-.status {
-  @apply inline-block w-[12px] h-[12px] rounded-full mr-2;
+.status-damage {
+  @apply inline-block w-[12px] h-[12px] rounded-full mr-2 bg-gray-200;
   
-  &-good {
+  &-none {
     @apply bg-[#15803d];
   }
 
-  &-alert {
+  &-light {
     @apply bg-[#ffae42];
   }
 
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index 50ce378..05e00de 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -91,22 +91,20 @@
 	  {% if only_ones %}
 	  	{% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
 	{% endif %}
-	  	{% for boat in boats %}
-        {% set status = 'good' %}
-
-        {% if loop.index == 3 %} 
-          {% set status = 'locked' %}
-        {% endif %}
-
-        {% if loop.index == 1 %} 
-            {% set status = 'alert' %}
-        {% endif %}
-
-			  <div id="boat-{{ boat.id }}" {% if status != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %}>
-          <span class="status status-{{ status }}"></span>
-          <span {% if status == 'locked' %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
-        </div>
-		  {% endfor %}
+      {% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
+        <div class="pb-2">
+           <div class="bg-gray-100 text-primary-950 text-center text-sm mb-2">
+              <strong>{{ amount_seats }}x</strong>
+            </div>
+            {% for boat in grouped_boats %}
+                <div id="boat-{{ boat.id }}" {% if boat.damage != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %} class="px-3">
+                  <span class="status-damage status-damage-{{ boat.damage }}"></span>
+                  <span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
+                </div>
+            {% endfor %}
+          </div>
+        {% endfor %}
+        
 	<script>
           function updateElementsBasedOnSelectedOption() {
             var selectElement = document.getElementById('boat_id');
diff --git a/templates/kiosk.html.tera b/templates/kiosk.html.tera
index b161881..96f3f7a 100644
--- a/templates/kiosk.html.tera
+++ b/templates/kiosk.html.tera
@@ -13,20 +13,20 @@
   {% endif %}
 
   <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
-    <div class="bg-white rounded-md hidden md:block">
+    <div class="bg-white rounded-md hidden md:block shadow">
       <h2 class="h2">Boote</h2>
       
-      <div class="p-3">
+      <div>
         {{ log::show_boats(only_ones=false) }}
       </div>
     </div>
-    <div class="md:col-span-3 bg-white rounded-md">
+    <div class="md:col-span-3 bg-white rounded-md shadow">
       <h2 class="h2">Neue Ausfahrt</h2>
       <div class="p-3">
         {{ log::new(only_ones=false, allow_any_shipmaster=true, shipmaster=-1) }}
       </div>
     </div>
-    <div class="bg-white rounded-md">
+    <div class="bg-white rounded-md shadow">
       <h2 class="h2">Am Wasser</h2>
 
       <div>
diff --git a/templates/log.html.tera b/templates/log.html.tera
index f7b93cc..045d169 100644
--- a/templates/log.html.tera
+++ b/templates/log.html.tera
@@ -12,20 +12,20 @@
 		<h1 class="h1">Logbuch</h1>
 
   <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
-    <div class="bg-white rounded-md hidden md:block">
+    <div class="bg-white rounded-md hidden md:block shadow">
       <h2 class="h2">Boote</h2>
       
-      <div class="p-3">
+      <div>
         {{ log::show_boats(only_ones=false) }}
       </div>
     </div>
-    <div class="md:col-span-3 bg-white rounded-md">
+    <div class="md:col-span-3 bg-white rounded-md shadow">
       <h2 class="h2">Neue Ausfahrt</h2>
       <div class="p-3">
         {{ log::new(only_ones=loggedin_user.is_cox==false, allow_any_shipmaster=loggedin_user.is_cox, shipmaster=loggedin_user.id) }}
       </div>
     </div>
-    <div class="bg-white rounded-md">
+    <div class="bg-white rounded-md shadow">
       <h2 class="h2">Am Wasser</h2>
 
       {% for log in on_water %}