diff --git a/webui/src/lib/Header.svelte b/webui/src/lib/Header.svelte
index fc2fdde..56096a7 100644
--- a/webui/src/lib/Header.svelte
+++ b/webui/src/lib/Header.svelte
@@ -15,7 +15,8 @@
 
     <ul class="menu">
         <li><a href="/">Home</a></li>
-        <li><a href="/sauna">Sauna</a></li>
+        <li><a href="/bicycle">Bicycle</a></li>
         <!-- <li><a href="/chicken">Chicken</a></li> -->
+        <li><a href="/sauna">Sauna</a></li>
     </ul>
 </header>
diff --git a/webui/src/lib/images/wheels.svg b/webui/src/lib/images/wheels.svg
new file mode 100644
index 0000000..b6e8e33
--- /dev/null
+++ b/webui/src/lib/images/wheels.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 397.6 397.6" style="enable-background:new 0 0 397.6 397.6;" xml:space="preserve">
+<path d="M313.1,147.875c-6.057,0-11.962,0.654-17.661,1.871l-15.805-53.435l37.842-2.565c4.447-0.301,8.487,2.613,9.602,6.932
+	c0.689,2.671,0.161,5.488-1.45,7.728c-1.611,2.24-4.113,3.638-6.865,3.834l-9.126,0.652c-3.581,0.256-6.276,3.366-6.02,6.947
+	s3.361,6.289,6.947,6.02l9.126-0.652c6.611-0.472,12.623-3.829,16.493-9.21c3.87-5.382,5.14-12.148,3.484-18.566
+	c-2.677-10.375-12.376-17.364-23.069-16.654l-45.936,3.114c-1.969,0.134-3.77,1.154-4.896,2.773
+	c-1.127,1.62-1.457,3.663-0.897,5.556l6.405,21.656H145.477l-6.316-12H155.5c3.59,0,6.5-2.91,6.5-6.5s-2.91-6.5-6.5-6.5h-47
+	c-3.59,0-6.5,2.91-6.5,6.5s2.91,6.5,6.5,6.5h16.086l9.542,18.349l-18.836,33.485c-9.549-3.751-19.929-5.834-30.792-5.834
+	c-46.593,0-84.5,37.906-84.5,84.5s37.907,84.5,84.5,84.5c44.404,0,80.892-34.436,84.225-78c0,0,31.695,0,31.776,0
+	c2.235,0,4.32-1.15,5.511-3.055l68.779-110.047l8.185,27.672c-31.758,12.162-54.376,42.945-54.376,78.93
+	c0,46.594,37.907,84.5,84.5,84.5s84.5-37.906,84.5-84.5S359.693,147.875,313.1,147.875z M84.5,303.875
+	c-39.425,0-71.5-32.075-71.5-71.5s32.075-71.5,71.5-71.5c8.549,0,16.75,1.513,24.355,4.276l-31.482,55.968
+	c-3.726,2.365-6.206,6.516-6.206,11.256c0,7.363,5.969,13.333,13.333,13.333c5.002,0,9.354-2.759,11.636-6.833h59.556
+	C152.395,275.263,121.733,303.875,84.5,303.875z M96.136,225.875c-0.99-1.769-2.37-3.285-4.025-4.439l28.528-50.717
+	c19.37,11.397,32.922,31.647,35.052,55.156H96.136z M168.725,225.875c-2.17-28.365-18.393-52.845-41.715-66.482l14.327-25.471
+	l48.396,91.953H168.725z M200.983,219.337l-48.665-92.462h106.454L200.983,219.337z M313.1,303.875c-39.425,0-71.5-32.075-71.5-71.5
+	c0-30.093,18.697-55.885,45.077-66.418l16.89,57.105c-2.348,2.403-3.8,5.687-3.8,9.313c0,7.363,5.969,13.333,13.333,13.333
+	s13.333-5.97,13.333-13.333c0-6.354-4.449-11.661-10.399-12.999l-16.895-57.123c4.518-0.897,9.184-1.378,13.962-1.378
+	c39.425,0,71.5,32.075,71.5,71.5S352.525,303.875,313.1,303.875z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/webui/src/routes/bicycle/+page.js b/webui/src/routes/bicycle/+page.js
new file mode 100644
index 0000000..ba58d86
--- /dev/null
+++ b/webui/src/routes/bicycle/+page.js
@@ -0,0 +1,2 @@
+export const prerender = true;
+export const trailingSlash = 'always';
diff --git a/webui/src/routes/bicycle/+page.svelte b/webui/src/routes/bicycle/+page.svelte
new file mode 100644
index 0000000..52c0652
--- /dev/null
+++ b/webui/src/routes/bicycle/+page.svelte
@@ -0,0 +1,50 @@
+<script>
+	import { onMount } from "../../../node_modules/svelte/internal";
+	import icon from "$lib/images/wheels.svg"
+
+	let backend_url = "https://home.blackfinn.de/api/bicycle";
+	// let backend_url = "http://localhost:5000/api/bicycle";
+
+	let year = 2023;
+	let total_distance_value = 0.0;
+	let total_distance_unit = "m"
+	let year_result_value = 0.0;
+	let year_result_unit = "m"
+
+	function get_api() {
+		fetch(backend_url)
+		.then(response => response.json())
+		.then(data => {
+			console.log(data.Years[year])
+			total_distance_value = data.Years[year].total_distance.value
+			total_distance_unit = data.Years[year].total_distance.unit
+			year_result_value = data.Years[year].year_result.value
+			year_result_unit = data.Years[year].year_result.unit
+		}).catch(error => {
+			console.log(error);
+			return [];
+		});
+	}
+
+	setInterval(() => {
+		get_api();
+	}, 1000)
+
+	onMount(async () => {
+		get_api();
+	});
+</script>
+
+<svelte:head>
+	<title>Bicycle</title>
+	<meta name="description" content="Bicycle"/>
+</svelte:head>
+
+<section id='content_id' class='content'>
+	<h1>Bicycle</h1>
+	<figure>
+		<img src={icon} alt="Bicycle" width=150/>
+	</figure>
+	<h1>Total distance: {total_distance_value} {total_distance_unit}</h1>
+	<h1>Year result: {year_result_value} {year_result_unit}</h1>
+</section>