diff --git a/public/calendar.webp b/public/calendar.webp
new file mode 100644
index 0000000..dde7d5a
Binary files /dev/null and b/public/calendar.webp differ
diff --git a/src/views/admin/club/protocol/ProtocolRouting.vue b/src/views/admin/club/protocol/ProtocolRouting.vue
index ab7d77f..e333896 100644
--- a/src/views/admin/club/protocol/ProtocolRouting.vue
+++ b/src/views/admin/club/protocol/ProtocolRouting.vue
@@ -91,6 +91,12 @@ export default defineComponent({
   },
   // this.syncState is undefined, so it will never work
   // beforeRouteLeave(to, from, next) {
+  //   const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
+  //   if (answer) {
+  //      next()
+  //   } else {
+  //     next(false)
+  //   }
   //   if (this.syncState != "synced") {
   //     this.executeSyncAll = Date.now();
   //     this.wantToClose = true;
diff --git a/src/views/public/calendar/CalendarExplain.vue b/src/views/public/calendar/CalendarExplain.vue
index 0aa1ac2..306d3c2 100644
--- a/src/views/public/calendar/CalendarExplain.vue
+++ b/src/views/public/calendar/CalendarExplain.vue
@@ -12,10 +12,53 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center gap-2 pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kalender-Erklärung</h1>
+        <h1 class="font-bold text-xl h-fit">Kalender-Erklärung - WebCal Kalendar einbinden</h1>
+      </div>
+    </template>
+    <template #main>
+      <div class="instruction">
+        <h2>iOS: Webcal-Link einbinden</h2>
+        <ol>
+          <li>Öffne die <strong>"Einstellungen"</strong> auf deinem iPhone oder iPad.</li>
+          <li>Scrolle nach unten und wähle <strong>"Kalender"</strong>.</li>
+          <li>Tippe auf <strong>"Accounts"</strong> und dann auf <strong>"Account hinzufügen"</strong>.</li>
+          <li>Wähle <strong>"Andere"</strong> und anschließend <strong>"Kalender abonnieren"</strong>.</li>
+          <li>Gib den <strong>Webcal-Link</strong> in das Feld ein und tippe auf <strong>"Weiter"</strong>.</li>
+          <li>Der Kalender wird nun hinzugefügt und im Standard-Kalender angezeigt.</li>
+        </ol>
+        <!-- <img src="images/ios_calendar_step1.png" alt="iOS Kalender Einstellungen" /> -->
+        <!-- <img src="images/ios_calendar_step2.png" alt="Webcal-Link eingeben" /> -->
+      </div>
+      <br />
+      <div class="instruction">
+        <h2>Android: Webcal-Link einbinden</h2>
+        <p>
+          Auf Android-Geräten musst du den Webcal-Link über den Google Kalender hinzufügen, da es keine direkte Option
+          gibt:
+        </p>
+        <ol>
+          <li>
+            Öffne auf einem Computer oder im Browser den
+            <strong> <a href="https://calendar.google.com" target="_blank">Google Kalender</a> </strong>.
+          </li>
+          <li>Klicke auf das <strong>"+"-Symbol</strong> neben "Weitere Kalender" (links im Menü).</li>
+          <li>Wähle <strong>"Per URL"</strong> aus.</li>
+          <li>Gib den <strong>Webcal-Link</strong> ein und klicke auf <strong>"Kalender hinzufügen"</strong>.</li>
+          <li>Öffne die Google Kalender App auf deinem Android-Gerät und synchronisiere die Änderungen.</li>
+        </ol>
+        <!-- <img src="images/android_google_calendar_step1.png" alt="Google Kalender im Browser" /> -->
+        <!-- <img src="images/android_google_calendar_step2.png" alt="Webcal-Link einfügen" /> -->
+      </div>
+
+      <div class="instruction">
+        <h2>Hinweise</h2>
+        <ul>
+          <li>Der Webcal-Link muss korrekt formatiert sein (beginnt mit <strong>webcal://</strong>).</li>
+          <li>Wenn der Kalender nicht sofort angezeigt wird, überprüfe die Synchronisierungseinstellungen.</li>
+          <li>Für Android kann es hilfreich sein, die Google Kalender App zu aktualisieren.</li>
+        </ul>
       </div>
     </template>
-    <template #main> Kalender-Erklärung zur Nutzung </template>
   </MainTemplate>
 </template>