diff --git a/.drone.yml b/.drone.yml
index 9130249..4dd7584 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -47,6 +47,10 @@ steps:
     ssh_key:
         from_secret: gitea-ssh-key
 
+trigger:
+  ref:
+  - refs/tags/v*
+  
 ---
 kind: pipeline
 name: release
diff --git a/web/index.css b/web/index.css
index bdc80aa..1c20522 100644
--- a/web/index.css
+++ b/web/index.css
@@ -28,12 +28,21 @@
     animation: blinker 2s ease infinite;
 } 
 
+html {
+    height: 100%;
+}
+
+body {
+    height: 100%;
+}
+
 main {
     padding-top: 0 !important;
+    height: 100%;
 }
 
 .timer-container-div {
-    height: 100vh;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,4 +59,21 @@ main {
     top: 0;
     left: 0;
     cursor: pointer;
+}
+
+.hide-before-init {
+    display: none;
+}
+
+.remote-connection-card {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    background-color: var(--background-color);
+    width: 100%;
+}
+
+details {
+    border-bottom: 0;
+    padding-bottom: 0;
 }
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 95a841c..4ec1f8a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -30,47 +30,72 @@
 </head>
 
 <body>
-    <script>
-        const event = new Event('wasm-loaded');
-        wasm_bindgen('lib/crypto_helper_bg.wasm').then(() => {
-            document.dispatchEvent(event);
-        });
-    </script>
-    <main class="container" x-data>
+    <div class="timer-container-div hide-after-init">
+        <h1 class="loading" aria-busy="true">Initializing...</h1>
+    </div>
+    <main class="container hide-before-init" x-data>
         <div class="timer-container-div" x-show="$store.localState._state !== 5">
             <div @click="$store.localState.next()" class="tap-area" x-show="$store.localState._state === 2"></div>
             <div @click="$store.localState.next()" class="timer-div">
                 <hgroup>
                     <h1>OK! .. READY! ... GO!</h1>
-                    <h2 x-text="$store.localState.stateHint"></h2>
+                    <h2><span x-text="$store.localState.stateHint"></span> <b x-show="$store.mqtt.connected">(connected)</b></h2>
                 </hgroup>
 
                 <div x-data="Timer">
-                    <p :class="'timer' + (over ? ($store.localState._state === 3 ? ' sending':' over'):'')" x-text="time + 's'"></p>
+                    <p :class="'timer' + (over ? ($store.localState._state === 3 ? ' sending':' over'):'')"
+                        x-text="time + 's'"></p>
                 </div>
             </div>
         </div>
 
-        <div x-show="$store.localState._state === 0">
+        <div x-show="$store.localState._state === 0" class="remote-connection-card">
+            <div class="container">
             <details>
-                <summary>Remote connection</summary>
-                
+                <div class="container">
+                <p>If you want to automatically transfer the time to a computer, follow these steps:</p>
+
                 <div x-show="!$store.mqtt.connected">
-                    <p>To send the times to a computer, please enter a password here:</p>
-                    <form x-data="PasswordForm()" @submit.prevent="submitForm">
-                        <label for="passwordForm_password">Password:</label>
-                        <input id="passwordForm_password" type="text" x-model="formData.password" placeholder="Password" />
-                        <small>Make sure, this is exactly the same on your computer!</small>
-                        <button type="submit">Connect</button>
-                    </form>
+                    <ul>
+                        <li>Enter a password and press tap connect</li>
+
+                        <li>
+                            <form x-data="PasswordForm()" @submit.prevent="submitForm">
+                                <label for="passwordForm_password">Password:</label>
+                                <input id="passwordForm_password" type="text" x-model="formData.password"
+                                    placeholder="Password" />
+                                <small>Make sure, this is exactly the same on your computer!</small>
+                                <button type="submit">Connect</button>
+                            </form>
+                        </li>
+                        <li>Download the receiver tool from <a
+                                href="https://itsblue.dev/dorian/ok-ready-go/releases/latest">here</a> to your computer
+                        </li>
+                        <li>Start the receiver tool on your computer</li>
+                        <li>Enter the same password on the receiver tool and click connect</li>
+                        <li>Done!</li>
+                    </ul>
                 </div>
 
                 <div x-show="$store.mqtt.connected">
-                    <p>Connected</p>
-                    <button @click="$store.localState.password = ''">Disconnect</button>
+                    <ul>
+                        <li>Download the receiver tool from <a
+                                href="https://itsblue.dev/dorian/ok-ready-go/releases/latest">here</a> to your computer
+                        </li>
+                        <li>Start the receiver tool on your computer</li>
+                        <li>Enter the password '<b x-text="$store.localState.password"></b>' on the receiver tool and click connect</li>
+                        <li>Done!</li>
+                        <li>
+                            <p>If you no longer want to send the time, tap Disconnect</p>
+                            <button @click="$store.localState.password = ''">Disconnect</button>
+                        </li>
+                    </ul>
                 </div>
+            </div>
+                <summary role="button">Remote connection</summary>
             </details>
         </div>
+        </div>
 
         <div class="timer-container-div" x-show="$store.localState._state === 5">
             <h1 class="loading" aria-busy="true">Connecting...</h1>
diff --git a/web/js/index.js b/web/js/index.js
index 06e5afa..18b1e45 100644
--- a/web/js/index.js
+++ b/web/js/index.js
@@ -59,4 +59,14 @@ function Timer() {
       }, 10);
     },
   };
-}
\ No newline at end of file
+}
+
+const event = new Event('wasm-loaded');
+wasm_bindgen('lib/crypto_helper_bg.wasm').then(() => {
+    document.dispatchEvent(event);
+});
+
+document.addEventListener("alpine:init", () => {
+    document.getElementsByClassName("hide-after-init").item(0).outerHTML = ""
+    document.getElementsByClassName("hide-before-init").item(0).classList.remove("hide-before-init")
+});
\ No newline at end of file
