diff --git a/src/Beamershow.svelte b/src/Beamershow.svelte
index 23bf466..44b1ddf 100644
--- a/src/Beamershow.svelte
+++ b/src/Beamershow.svelte
@@ -1,416 +1,420 @@
 <script>
-  import axios from "axios";
-  import bg from "/beamershow_background.png?import";
-  import { _ } from "svelte-i18n";
-  import { slide } from "svelte/transition";
-  import { apikey, api_endpoint, laptime_track } from "./store.js";
-  function init(el) {
-    el.focus();
-  }
-  $: pages = [
-    "general",
-    "runners_distance",
-    // "runners_laptime",
-    "orgs_distance",
-    // "teams_distance",
-  ];
-  $: current_page = "general";
-  $: general = {};
-  $: runners = [];
-  $: runners_by_laptime = [];
-  $: orgs = [];
-  $: teams = [];
+	import axios from "axios";
+	import bg from "/beamershow_background.png?inline";
+	import { _ } from "svelte-i18n";
+	import { slide } from "svelte/transition";
+	import { apikey, api_endpoint, laptime_track } from "./store.js";
+	$: pages = [
+		"general",
+		"runners_distance",
+		// "runners_laptime",
+		"orgs_distance",
+		// "teams_distance",
+	];
+	$: current_page = "general";
+	$: general = {};
+	$: runners = [];
+	$: runners_by_laptime = [];
+	$: orgs = [];
+	$: teams = [];
 
-  let time = new Date();
-  $: hours = (time.getHours() + "").padStart(2, "0");
-  $: minutes = (time.getMinutes() + "").padStart(2, "0");
-  $: seconds = (time.getSeconds() + "").padStart(2, "0");
-  function format_laptime(laptime) {
-    if (laptime < 60) {
-      return `${laptime}s`;
-    }
-    if (laptime < 3600) {
-      return `${Math.floor(laptime / 60)}min ${
-        laptime - Math.floor(laptime / 60) * 60
-      }s`;
-    }
-    return `${Math.floor(laptime / 3600)}h ${
-      laptime - Math.floor(laptime / 3600) * 3600
-    }min ${
-      laptime -
-      Math.floor(laptime / 3600) * 3600 -
-      Math.floor(laptime / 60) * 60
-    }`;
-  }
-  function stats_general() {
-    axios
-      .request({
-        method: "GET",
-        url: $api_endpoint + "api/stats/",
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        general = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  function stats_runners() {
-    axios
-      .request({
-        method: "GET",
-        url: $api_endpoint + "api/stats/runners/distance",
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        runners = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  function stats_runners_by_laptime() {
-    axios
-      .request({
-        method: "GET",
-        url:
-          $api_endpoint + "api/stats/runners/laptime?track=" + $laptime_track,
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        runners_by_laptime = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  function stats_orgs() {
-    axios
-      .request({
-        method: "GET",
-        url: $api_endpoint + "api/stats/organizations/distance",
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        orgs = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  function stats_teams() {
-    axios
-      .request({
-        method: "GET",
-        url: $api_endpoint + "api/stats/teams/distance",
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        teams = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  Array.prototype.cycle = function (str) {
-    const i = this.indexOf(str);
-    if (i === -1) return undefined;
-    return this[(i + 1) % this.length];
-  };
-  function fetch_all() {
-    stats_general();
-    stats_runners();
-    // stats_runners_by_laptime();
-    stats_orgs();
-    stats_teams();
-  }
-  fetch_all();
-  setInterval(() => {
-    time = new Date();
-  }, 1000);
-  setInterval(() => {
-    fetch_all();
-  }, 50000);
-  setInterval(() => {
-    current_page = pages.cycle(current_page);
-  }, 20000);
+	let time = new Date();
+	$: hours = (time.getHours() + "").padStart(2, "0");
+	$: minutes = (time.getMinutes() + "").padStart(2, "0");
+	$: seconds = (time.getSeconds() + "").padStart(2, "0");
+	function format_laptime(laptime) {
+		if (laptime < 60) {
+			return `${laptime}s`;
+		}
+		if (laptime < 3600) {
+			return `${Math.floor(laptime / 60)}min ${
+				laptime - Math.floor(laptime / 60) * 60
+			}s`;
+		}
+		return `${Math.floor(laptime / 3600)}h ${
+			laptime - Math.floor(laptime / 3600) * 3600
+		}min ${
+			laptime -
+			Math.floor(laptime / 3600) * 3600 -
+			Math.floor(laptime / 60) * 60
+		}`;
+	}
+	function stats_general() {
+		axios
+			.request({
+				method: "GET",
+				url: $api_endpoint + "api/stats/",
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				general = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	function stats_runners() {
+		axios
+			.request({
+				method: "GET",
+				url: $api_endpoint + "api/stats/runners/distance",
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				runners = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	function stats_runners_by_laptime() {
+		axios
+			.request({
+				method: "GET",
+				url:
+					$api_endpoint + "api/stats/runners/laptime?track=" + $laptime_track,
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				runners_by_laptime = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	function stats_orgs() {
+		axios
+			.request({
+				method: "GET",
+				url: $api_endpoint + "api/stats/organizations/distance",
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				orgs = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	function stats_teams() {
+		axios
+			.request({
+				method: "GET",
+				url: $api_endpoint + "api/stats/teams/distance",
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				teams = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	Array.prototype.cycle = function (str) {
+		const i = this.indexOf(str);
+		if (i === -1) return undefined;
+		return this[(i + 1) % this.length];
+	};
+	function fetch_all() {
+		stats_general();
+		stats_runners();
+		// stats_runners_by_laptime();
+		stats_orgs();
+		stats_teams();
+	}
+	fetch_all();
+	setInterval(() => {
+		time = new Date();
+	}, 1000);
+	setInterval(() => {
+		fetch_all();
+	}, 50000);
+	setInterval(() => {
+		current_page = pages.cycle(current_page);
+	}, 20000);
 </script>
 
 <div
-  class="min-h-screen flex items-center justify-center bg-gray-100"
-  style="background-image: url({bg});background-position: center;background-size: contain;background-repeat:no-repeat;"
+	class="min-h-screen flex items-center justify-center bg-gray-100"
+	style="background-image: url({bg});background-position: center;background-size: contain;background-repeat:no-repeat;"
 >
-  <div class="w-full">
-    <div class="w-3/4 xl:w-1/2 mx-auto">
-      <!--  -->
-      {#if current_page === "general"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900"
-          >
-            Statistiken
-          </h1>
-          <!--  -->
-          <div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-              <h1 class="text-5xl font-bold text-center text-gray-900">
-                {general.total_runners || "0"}
-              </h1>
-              <h1 class="text-2xl font-semibold text-center text-gray-900">
-                {$_("laeufer")}
-              </h1>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-              <h1 class="text-5xl font-bold text-center text-gray-900">
-                {general.total_distance / 1000 || 0}
-              </h1>
-              <h1 class="text-2xl font-semibold text-center text-gray-900">
-                {$_("kilometer-gesamt")}
-              </h1>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-              <h1 class="text-5xl font-bold text-center text-gray-900">
-                {parseFloat(
-                  ((general.total_donation || 0) / 100).toFixed(2)
-                ).toLocaleString(undefined, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
-                }) || "0"} €
-              </h1>
-              <h1 class="text-2xl font-semibold text-center text-gray-900">
-                {$_("spendensumme")}
-              </h1>
-            </div>
-          </div>
-        </div>
-      {:else if current_page === "runners_distance"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
-          >
-            {$_("top-laeufer")} ({$_("distanz")})
-          </h1>
-          {#if runners.length === 0}
-            <p class="w-full text-center text-3xl font-semibold">
-              Noch keine Daten...
-            </p>
-          {:else}
-            <table
-              class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
-            >
-              <thead>
-                <tr>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("platz")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("laeufer")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("organisation")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("kilometer")}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each runners as r, i}
-                  <tr class="text-gray-700">
-                    <td class="border p-4 dark:border-dark-5">
-                      {i + 1}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.firstname}
-                      {r.lastname}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.group.name}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.distance / 1000} km
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {/if}
-        </div>
-      {:else if current_page === "runners_laptime"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
-          >
-            {$_("top-laeufer")} ({$_("rundenzeit")})
-          </h1>
-          {#if runners_by_laptime.length === 0}
-            <p class="w-full text-center text-3xl font-semibold">
-              Noch keine Daten...
-            </p>
-          {:else}
-            <table
-              class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
-            >
-              <thead>
-                <tr>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("platz")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("laeufer")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("organisation")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("schnellste-rundenzeit")}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each runners_by_laptime as r, i}
-                  <tr class="text-gray-700">
-                    <td class="border p-4 dark:border-dark-5">
-                      {i + 1}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.firstname}
-                      {r.lastname}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.group.name}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {format_laptime(r.minLaptime)}
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {/if}
-        </div>
-      {:else if current_page === "orgs_distance"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
-          >
-            {$_("top-organisationen")}
-          </h1>
-          <table
-            class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
-          >
-            <thead>
-              <tr>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("platz")}
-                </th>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("organsiation")}
-                </th>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("kilometer")}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each orgs as o, i}
-                <tr class="text-gray-700">
-                  <td class="border p-4 dark:border-dark-5">
-                    {i + 1}
-                  </td>
-                  <td class="border p-4 dark:border-dark-5">
-                    {o.name}
-                  </td>
-                  <td class="border p-4 dark:border-dark-5">
-                    {o.distance / 1000} km
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {:else if current_page === "teams_distance"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
-          >
-            {$_("top-teams")}
-          </h1>
-          <table
-            class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
-          >
-            <thead>
-              <tr>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("platz")}
-                </th>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("team")}
-                </th>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("kilometer")}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each teams as t, i}
-                <tr class="text-gray-700">
-                  <td class="border p-4 dark:border-dark-5">
-                    {i + 1}
-                  </td>
-                  <td class="border p-4 dark:border-dark-5">
-                    {t.name}
-                  </td>
-                  <td class="border p-4 dark:border-dark-5">
-                    {t.distance / 1000} km
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {:else}
-        <!-- content here -->
-      {/if}
-    </div>
-  </div>
-  <h1
-    class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8"
-  >
-    {hours}:{minutes}:{seconds}
-  </h1>
-  <h1
-    class="text-xl xl:text-3xl font-medium text-center text-gray-900 font-mono bottom-2 xl:bottom-4 w-full fixed"
-  >
-    <span class="text-black font-extrabold">Lauf für Kaya!</span> - powered by ODIT.Services
-  </h1>
+	<div class="w-full">
+		<div class="w-3/4 xl:w-1/2 mx-auto">
+			<!--  -->
+			{#if current_page === "general"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900"
+					>
+						Statistiken
+					</h1>
+					<!--  -->
+					<div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
+						<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+							<h1 class="text-5xl font-bold text-center text-gray-900">
+								{general.total_runners || "0"}
+							</h1>
+							<h1 class="text-2xl font-semibold text-center text-gray-900">
+								{$_("laeufer")}
+							</h1>
+						</div>
+						<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+							<h1 class="text-5xl font-bold text-center text-gray-900">
+								{general.total_distance / 1000 || 0}
+							</h1>
+							<h1 class="text-2xl font-semibold text-center text-gray-900">
+								{$_("kilometer-gesamt")}
+							</h1>
+						</div>
+						<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+							<h1 class="text-5xl font-bold text-center text-gray-900">
+								{parseFloat(
+									((general.total_donation || 0) / 100).toFixed(2)
+								).toLocaleString(undefined, {
+									minimumFractionDigits: 2,
+									maximumFractionDigits: 2,
+								}) || "0"} €
+							</h1>
+							<h1 class="text-2xl font-semibold text-center text-gray-900">
+								{$_("spendensumme")}
+							</h1>
+						</div>
+					</div>
+				</div>
+			{:else if current_page === "runners_distance"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
+					>
+						{$_("top-laeufer")} ({$_("distanz")})
+					</h1>
+					{#if runners.length === 0}
+						<p class="w-full text-center text-3xl font-semibold">
+							Noch keine Daten...
+						</p>
+					{:else}
+						<table
+							class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
+						>
+							<thead>
+								<tr>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("platz")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("laeufer")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("organisation")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("kilometer")}
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each runners as r, i}
+									<tr class="text-gray-700">
+										<td class="border p-4 dark:border-dark-5">
+											{i + 1}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.firstname}
+											{r.lastname}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.group.name}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.distance / 1000} km
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					{/if}
+				</div>
+			{:else if current_page === "runners_laptime"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
+					>
+						{$_("top-laeufer")} ({$_("rundenzeit")})
+					</h1>
+					{#if runners_by_laptime.length === 0}
+						<p class="w-full text-center text-3xl font-semibold">
+							Noch keine Daten...
+						</p>
+					{:else}
+						<table
+							class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
+						>
+							<thead>
+								<tr>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("platz")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("laeufer")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("organisation")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("schnellste-rundenzeit")}
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each runners_by_laptime as r, i}
+									<tr class="text-gray-700">
+										<td class="border p-4 dark:border-dark-5">
+											{i + 1}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.firstname}
+											{r.lastname}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.group.name}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{format_laptime(r.minLaptime)}
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					{/if}
+				</div>
+			{:else if current_page === "orgs_distance"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
+					>
+						{$_("top-organisationen")}
+					</h1>
+					{#if orgs.length === 0}
+						<p class="w-full text-center text-3xl font-semibold">
+							Noch keine Daten...
+						</p>
+					{:else}
+						<table
+							class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
+						>
+							<thead>
+								<tr>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("platz")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("organsiation")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("kilometer")}
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each orgs as o, i}
+									<tr class="text-gray-700">
+										<td class="border p-4 dark:border-dark-5">
+											{i + 1}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{o.name}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{o.distance / 1000} km
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					{/if}
+				</div>
+			{:else if current_page === "teams_distance"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
+					>
+						{$_("top-teams")}
+					</h1>
+					<table
+						class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
+					>
+						<thead>
+							<tr>
+								<th
+									class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+								>
+									{$_("platz")}
+								</th>
+								<th
+									class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+								>
+									{$_("team")}
+								</th>
+								<th
+									class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+								>
+									{$_("kilometer")}
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each teams as t, i}
+								<tr class="text-gray-700">
+									<td class="border p-4 dark:border-dark-5">
+										{i + 1}
+									</td>
+									<td class="border p-4 dark:border-dark-5">
+										{t.parent.name}<br />
+										{t.name}
+									</td>
+									<td class="border p-4 dark:border-dark-5">
+										{t.distance / 1000} km
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{:else}
+				<!-- content here -->
+			{/if}
+		</div>
+	</div>
+	<h1
+		class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8"
+	>
+		{hours}:{minutes}:{seconds}
+	</h1>
+	<h1
+		class="text-xl xl:text-3xl font-medium text-center text-gray-900 font-mono bottom-2 xl:bottom-4 w-full fixed"
+	>
+		<span class="text-black font-extrabold">Lauf für Kaya!</span> - powered by ODIT.Services
+	</h1>
 </div>