diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index c3cb820..25e96e9 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -90,7 +90,7 @@
 	  	{% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
 	{% endif %}
 	  	{% for boat in boats %}
-			<div onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()">{{ boat.name }}</div>
+			<div id="boat-{{ boat.id }}" onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()">{{ boat.name }}</div>
 		{% endfor %}
 	<script>
           function updateElementsBasedOnSelectedOption() {
@@ -99,6 +99,7 @@
             var shipmaster_only_steering = selectedOption.getAttribute("extra-default_shipmaster_only_steering") === 'true';
             document.getElementById('shipmaster_only_steering').checked = shipmaster_only_steering;
             document.getElementById('newrower-max_rower_allowed').innerHTML = selectedOption.getAttribute("extra-amount_seats");
+
           }
           
           document.addEventListener('DOMContentLoaded', function() {
@@ -238,7 +239,12 @@
             }
           }">
     </div>
-    {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
+
+    <div class="relative">
+      {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
+      <span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
+    </div>
+  
     {{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}
 
     <div>