diff --git a/Wonky.Client/Components/AppVersion.razor b/Wonky.Client/Components/AppVersion.razor
index a6ad2ae8..12fa7988 100644
--- a/Wonky.Client/Components/AppVersion.razor
+++ b/Wonky.Client/Components/AppVersion.razor
@@ -19,6 +19,6 @@
 <span class="version">@Version</span>@if(IsBeta){<span class="version">-beta</span>}
 @code
 {
-        private const string Version = "0.3";
+        private const string Version = "0.3.1";
     private const bool IsBeta = true;
 }
diff --git a/Wonky.Client/Pages/SalesReport.razor b/Wonky.Client/Pages/SalesReport.razor
index 39378dc1..cf3a5711 100644
--- a/Wonky.Client/Pages/SalesReport.razor
+++ b/Wonky.Client/Pages/SalesReport.razor
@@ -19,78 +19,80 @@
 @attribute [Authorize(Roles = "Adviser")]
 
 @page "/sales-report"
-<h3>Dagsrapport</h3>
-<EditForm EditContext="_editContext">
-    <hr/>
-    <div class="row mb-1">
-        <label for="dayType" class="col-md-1 col-form-label">Dag</label>
-        <div class="col-md-3">
-            <select id="dayType" class="form-select" @bind-Value="_reportDto.DayTypeEnum" @bind-Value:event="oninput" @onchange="CheckDayType">
-                <option value="" selected>"IKKE VALGT"</option>
-                <option value="sales">Salgsdag</option>
-                <option value="meeting">Salgsmøde</option>
-                <option value="office">Kontordag</option>
-                <option value="supervisor">Supervisor</option>
-                <option value="sickLeave">Sygdom</option>
-                <option value="leave">Ferie</option>
-                <option value="noReport">Ingen Rapport</option>
-            </select>
-            <ValidationMessage For="@(() => _reportDto.DayTypeEnum)"></ValidationMessage>
-        </div>
-        @if (_reportDto.DayTypeEnum == "sales")
-        {
-            <label for="checkIn" class="col-md-1 col-form½">Begyndt</label>
-            <div class="col-md-3 form-control">
-                <InputDateTime id="checkIn" class="form-control" @bind-Value="_reportDto.CheckIn"></InputDateTime>
-                <ValidationMessage For="@(() => _reportDto.CheckIn)"></ValidationMessage>
-            </div>
-            <label for="checkOut" class="col-md-1 col-form½">Afsluttet</label>
-            <div class="col-md-3 form-control">
-                <InputDateTime id="checkOut" class="form-control" @bind-Value="_reportDto.CheckOut"></InputDateTime>
-                <ValidationMessage For="@(() => _reportDto.CheckOut)"></ValidationMessage>
-            </div>
-        }
-        @if (_reportDto.DayTypeEnum.Contains("leave"))
-        {
-            <label for="checkIn" class="col-md-1 col-form½">Begyndt</label>
-            <div class="col-md-3 form-control">
-                <InputDate id="checkIn" class="form-control" @bind-Value="_reportDto.CheckIn"></InputDate>
-                <ValidationMessage For="@(() => _reportDto.CheckIn)"></ValidationMessage>
-            </div>
-            <label for="checkOut" class="col-md-1 col-form½">Afsluttet</label>
-            <div class="col-md-3 form-control">
-                <InputDate id="checkOut" class="form-control" @bind-Value="_reportDto.CheckOut"></InputDate>
-                <ValidationMessage For="@(() => _reportDto.CheckOut)"></ValidationMessage>
-            </div>
-        }
 
-        <div class="col-md-2">
-            <button type="button" class="btn btn-info" @onclick="GetActivities">Hent</button>
+<EditForm EditContext="_editContext">
+    <div class="card">
+        <div class="card-header">
+            <h3>Dagsrapport</h3>
         </div>
-    </div>
-    <hr/>
-    <h5>Km regnskab</h5>
-    <div class="row mb-1">
-        <label for="kmMorning" class="col-md-1 col-form-label">Morgen</label>
-        <div class="col-md-2">
-            <InputNumber id="kmMorning" class="form-control" @bind-Value="_reportDto.KmMorning"/>
-            <ValidationMessage For="@(() => _reportDto.KmMorning)"></ValidationMessage>
+        <div class="card-body">
+            <table class="table">
+                <thead>
+                <th scope="col">Dagtype</th>
+                <th scope="col">Begyndt</th>
+                <th scope="col">Afsluttet</th>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>
+                        <select id="dayType" class="col-md-3 form-select" @bind-Value="_reportDto.DayTypeEnum" @bind-Value:event="oninput" @onchange="CheckDayType">
+                            <option value="" selected>"IKKE VALGT"</option>
+                            <option value="sales">Salgsdag</option>
+                            <option value="meeting">Salgsmøde</option>
+                            <option value="office">Kontordag</option>
+                            <option value="supervisor">Supervisor</option>
+                            <option value="sickLeave">Sygdom</option>
+                            <option value="leave">Ferie</option>
+                            <option value="noReport">Ingen Rapport</option>
+                        </select>
+                        <ValidationMessage For="@(() => _reportDto.DayTypeEnum)"></ValidationMessage>
+                    </td>
+                    <td>
+                        <InputDateTime id="checkIn" class="form-control" @bind-Value="_reportDto.CheckIn"></InputDateTime>
+                        <ValidationMessage For="@(() => _reportDto.CheckIn)"></ValidationMessage>
+                    </td>
+                    <td>
+                        <InputDateTime id="checkOut" class="form-control" @bind-Value="_reportDto.CheckOut"></InputDateTime>
+                        <ValidationMessage For="@(() => _reportDto.CheckOut)"></ValidationMessage>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
         </div>
-        <label for="kmEvening" class="col-md-1 col-form-label">Aften</label>
-        <div class="col-md-2">
-            <InputNumber id="kmEvening" class="form-control" @bind-Value="_reportDto.KmEvening"/>
-            <ValidationMessage For="@(() => _reportDto.KmEvening)"></ValidationMessage>
-        </div>
-        <label for="distance" class="col-md-1 col-form-label">Afstand</label>
-        <div class="col-md-2">
-            <InputNumber id="distance" class="form-control" @bind-Value="_reportDto.Distance"/>
-            <ValidationMessage For="@(() => _reportDto.Distance)"></ValidationMessage>
-        </div>
-        <label for="kmPrivate" class="col-md-1 col-form-label">Privat</label>
-        <div class="col-md-2">
-            <InputNumber id="kmPrivate" class="form-control" @bind-Value="_reportDto.DistancePrivate"/>
-            <ValidationMessage For="@(() => _reportDto.DistancePrivate)"></ValidationMessage>
+        <div class="card-body">
+            <table class="table">
+                <thead>
+                <th scope="col">Km Morgen</th>
+                <th scope="col">Km Aften</th>
+                <th scope="col">Km Kørt</th>
+                <th scope="col">Km Privat</th>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>
+                        <InputNumber id="kmMorning" class="form-control" @bind-Value="_reportDto.KmMorning"/>
+                        <ValidationMessage For="@(() => _reportDto.KmMorning)"></ValidationMessage>
+                    </td>
+                    <td>
+                        <InputNumber id="kmEvening" class="form-control" @bind-Value="_reportDto.KmEvening"/>
+                        <ValidationMessage For="@(() => _reportDto.KmEvening)"></ValidationMessage>
+                    </td>
+                    <td>
+                        <InputNumber id="distance" class="form-control" @bind-Value="_reportDto.Distance" readonly=""/>
+                    </td>
+                    <td>
+                        <InputNumber id="kmPrivate" class="form-control" @bind-Value="_reportDto.DistancePrivate"/>
+                        <ValidationMessage For="@(() => _reportDto.DistancePrivate)"></ValidationMessage>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
         </div>
+        <dic class="card-footer">
+            <div class="col-md-2">
+                <button type="button" class="btn btn-info" @onclick="GetActivities">Hent</button>
+            </div>
+        </dic>
     </div>
 </EditForm>
 <hr/>
diff --git a/Wonky.Client/Pages/SalesReport.razor.cs b/Wonky.Client/Pages/SalesReport.razor.cs
index 89a0d934..a7864dec 100644
--- a/Wonky.Client/Pages/SalesReport.razor.cs
+++ b/Wonky.Client/Pages/SalesReport.razor.cs
@@ -53,6 +53,7 @@ public partial class SalesReport
 
     private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
     {
+        _reportDto.Distance = (int) (_reportDto.KmEvening - _reportDto.KmMorning);
         _formInvalid = !_editContext.Validate();
         StateHasChanged();
     }