diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 0000000..3f72752
Binary files /dev/null and b/img/logo.png differ
diff --git a/index.html b/index.html
index 9c704b1..46a332d 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>FTMS Rower | Concept</title>
+    <title>FTMS Video Rower | Demo</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css">
@@ -12,56 +12,65 @@
 </head>
 
 <body>
-    <h1>FTMS Rower | Concept</h1>
 
-    <h2>Connect rower</h2>
+    <h1>FTMS Video Rower | Demo</h1>
+
     <p><button id="bleConnectionButton">Connect FTMS BLE Rower</button></p>
 
-	<h2>Training stats</h2>
-    <div class="cards">
-        <div class="card">
-            <div class="name">Pace</div>
-            <div class="unit" id="avg-pace">0:00</div>
-            <div class="value" id="pace">0:00</div>
-        </div>
+	<div class="setupinfo">
+		<h2>Usage information</h2>
+		<p>Connect your rower via bluetooth using the button above. Once connected, it will show your live training stats and the training video here.<br><br></p>
+		<p>If you found a bug, or want to contribute to this open source project, visit us at <a href="https://git.kmpr.at/FTMS-Rower" target="_blank">https://git.kmpr.at/FTMS-Rower</a>
+	</div>
+	<div class="training">
+		<div class="cards">
+			<div class="card">
+				<div class="name">Pace</div>
+				<div class="unit" id="avg-pace">0:00</div>
+				<div class="value" id="pace">0:00</div>
+			</div>
 
-        <div class="card">
-            <div class="name">Stroke rate</div>
-            <div class="unit" id="tot-strokes">0</div>
-            <div class="value" id="stroke-rate">0.0</div>
-        </div>
+			<div class="card">
+				<div class="name">Stroke rate</div>
+				<div class="unit" id="tot-strokes">0</div>
+				<div class="value" id="stroke-rate">0.0</div>
+			</div>
 
-        <div class="card">
-            <div class="name">Power</div>
-            <div class="unit" id="avg-power">0</div>
-            <div class="value" id="power">0.0</div>
-        </div>
+			<div class="card">
+				<div class="name">Power</div>
+				<div class="unit" id="avg-power">0</div>
+				<div class="value" id="power">0.0</div>
+			</div>
 
-        <div class="card">
-            <div class="name">Distance</div>
-            <div class="unit">m</div>
-            <div class="value" id="tot-distance">0</div>
-        </div>
-    </div>
+			<div class="card">
+				<div class="name">Distance</div>
+				<div class="unit">m</div>
+				<div class="value" id="tot-distance">0</div>
+			</div>
+		</div>
 	
-	<h2>Rowing video</h2>
-	<video id="rowing_video" class="video-js" controls preload="none" width="640" height="480" poster="video/posters/video.png" data-setup="{}">
-		<source src="video/video.mp4" type="video/mp4">
-		<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
-    </video>
-
+		<video id="rowing_video" class="video-js" controls preload="none" width="640" height="480" poster="video/posters/video.png" data-setup="{}">
+			<source src="video/video.mp4" type="video/mp4">
+			<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+		</video>
+	</div>
+	<footer>
+		<p>&copy; 2024 by <a href="https://www.kmpr.at" target="_blank">Manuel Kamper - kmpr.at</a> | Git: <a href="https://git.kmpr.at/FTMS-Rower" target="_blank">https://git.kmpr.at/FTMS-Rower</a></p>
+	</footer>
 </body>
 
 <script>
+	//navigation menu
 
-//hide player controls in video.js
-const player = videojs('rowing_video');
-player.bigPlayButton.hide(); //just don't show it
-player.controlBar.playToggle.dispose(); //remove completely
-player.controlBar.progressControl.disable(); //show, but disallow user to use it
-player.controlBar.fullscreenToggle.dispose();
-player.controlBar.pictureInPictureToggle.dispose();
-player.controlBar.playbackRateMenuButton.disable();
+
+	//hide player controls in video.js
+	const player = videojs('rowing_video');
+	player.bigPlayButton.hide(); //just don't show it
+	player.controlBar.playToggle.dispose(); //remove completely
+	player.controlBar.progressControl.disable(); //show, but disallow user to use it
+	player.controlBar.fullscreenToggle.dispose();
+	player.controlBar.pictureInPictureToggle.dispose();
+	player.controlBar.playbackRateMenuButton.disable();
 
     function handleNotifications(event) {
         let data = parseRowerData(event.target.value);
@@ -103,7 +112,5 @@ player.controlBar.playbackRateMenuButton.disable();
     }
 
     document.querySelector('#bleConnectionButton').addEventListener('click', what);
-	
 </script>
-
 </html>
\ No newline at end of file
diff --git a/js/ftms-rower.js b/js/ftms-rower.js
index 9b40542..04fb8ec 100644
--- a/js/ftms-rower.js
+++ b/js/ftms-rower.js
@@ -26,6 +26,8 @@ function connect() {
         .then(characteristic => {
             characteristic.startNotifications().then(_ => {
                 console.log('> Notifications started');
+				document.querySelector(".setupinfo").style.display="none";
+				document.querySelector(".training").style.display="block";
             });
             return characteristic;
         })
