diff --git a/package-lock.json b/package-lock.json
index e692fda..9bc8487 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "wegwichtel-next",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "wegwichtel-next",
-      "version": "0.7.0",
+      "version": "0.7.1",
       "hasInstallScript": true,
       "dependencies": {
         "express": "5.2.1",
diff --git a/package.json b/package.json
index cf724c7..0efd379 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wegwichtel-next",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "private": true,
   "description": "GPS-gestützte Lern- und Wanderwege mit GPX, POIs, Bildern und Audioansagen.",
   "type": "module",
diff --git a/public/css/app.css b/public/css/app.css
index 3744978..a5b0566 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -9,6 +9,7 @@
   --notice-border: #d4a72c;
   --focus: #1e6fba;
   --footer-height: 5.25rem;
+  --icon-button-size: 3.25rem;
 }
 
 html,
@@ -68,7 +69,7 @@ button,
 }
 
 .app-page > header:has(.back-button) {
-  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
+  grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
   gap: .5rem;
 }
 
@@ -89,14 +90,25 @@ button,
 }
 
 .app-page > header .back-button.ui-button {
-  width: 5.5rem;
-  min-height: 2.75rem;
+  display: grid;
+  place-items: center;
+  width: var(--icon-button-size);
+  min-width: var(--icon-button-size);
+  min-height: var(--icon-button-size);
   margin: 0;
+  padding: .35rem;
   border-color: rgba(255, 255, 255, .45);
+  border-radius: .45rem;
   background: rgba(255, 255, 255, .12);
   color: #fff;
 }
 
+.app-page > header .back-button.ui-button img {
+  width: 1.25rem;
+  height: 1.25rem;
+  pointer-events: none;
+}
+
 .content {
   width: min(48rem, 100%);
   box-sizing: border-box;
@@ -374,34 +386,56 @@ button,
   background: #111;
 }
 
-#slideshow figcaption {
-  min-height: 1.4rem;
-  padding: .5rem .75rem;
-}
-
 #slide-controls {
   display: grid;
-  grid-template-columns: auto minmax(4rem, 1fr) auto;
-  align-items: center;
+  grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
+  align-items: stretch;
+  gap: .5rem;
   width: 100%;
   box-sizing: border-box;
-  padding: .5rem;
-  text-align: center;
-}
-
-#slide-controls.ui-controlgroup-horizontal .ui-controlgroup-item {
-  float: none;
+  padding: .65rem;
 }
 
 #slide-controls .ui-button {
-  min-width: 3rem;
-  min-height: 3rem;
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 100%;
+  margin: 0;
+  padding: .45rem;
+}
+
+#slide-controls .ui-button img {
+  width: 1.2rem;
+  height: 1.2rem;
+  pointer-events: none;
+}
+
+.slide-meta {
+  display: flex;
+  min-width: 0;
+  min-height: var(--icon-button-size);
+  padding: .25rem .4rem;
+  border-radius: .45rem;
+  background: rgba(255, 255, 255, .06);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+#slide-caption {
+  margin: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.3;
 }
 
 #slide-position {
-  display: grid;
-  align-items: center;
-  min-height: 2.75rem;
+  display: block;
+  margin-top: .15rem;
+  color: rgba(255, 255, 255, .86);
+  font-size: .9rem;
+  font-weight: 600;
 }
 
 #poi-audio {
diff --git a/public/images/icons/back.svg b/public/images/icons/back.svg
new file mode 100644
index 0000000..f4fff69
--- /dev/null
+++ b/public/images/icons/back.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+  <path d="M30 10 16 24l14 14" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/icons/chevron-left.svg b/public/images/icons/chevron-left.svg
new file mode 100644
index 0000000..f4688b4
--- /dev/null
+++ b/public/images/icons/chevron-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+  <path d="M29 12 17 24l12 12" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/icons/chevron-right.svg b/public/images/icons/chevron-right.svg
new file mode 100644
index 0000000..467a81e
--- /dev/null
+++ b/public/images/icons/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+  <path d="m19 12 12 12-12 12" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/index.html b/public/index.html
index 84d8e51..807cfa8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -66,7 +66,9 @@
 
     <section id="route-page" class="app-page" aria-label="Ausgewählte Route" hidden>
       <header>
-        <button class="back-button" type="button" data-page-target="#routes-page">Zurück</button>
+        <button class="back-button" type="button" data-page-target="#routes-page" aria-label="Zurück zur Routenauswahl" title="Zurück zur Routenauswahl">
+          <img src="images/icons/back.svg" alt="">
+        </button>
         <h1 id="route-title">Route</h1>
       </header>
 
@@ -99,7 +101,9 @@
 
     <section id="poi-page" class="app-page" aria-label="Station" hidden>
       <header>
-        <button class="back-button" type="button" data-page-target="#route-page">Zurück</button>
+        <button class="back-button" type="button" data-page-target="#route-page" aria-label="Zurück zur Route" title="Zurück zur Route">
+          <img src="images/icons/back.svg" alt="">
+        </button>
         <h1 id="poi-title">Station</h1>
       </header>
 
@@ -107,13 +111,19 @@
         <div id="slideshow" aria-live="polite">
           <figure>
             <img id="slide-image" alt="">
-            <figcaption id="slide-caption"></figcaption>
           </figure>
 
-          <div id="slide-controls">
-            <button id="slide-prev" type="button">Vorheriges Bild</button>
-            <span id="slide-position" aria-live="polite">0 / 0</span>
-            <button id="slide-next" type="button">Nächstes Bild</button>
+          <div id="slide-controls" role="group" aria-label="Bildnavigation">
+            <button id="slide-prev" type="button" aria-label="Vorheriges Bild" title="Vorheriges Bild">
+              <img src="images/icons/chevron-left.svg" alt="">
+            </button>
+            <div class="slide-meta">
+              <p id="slide-caption"></p>
+              <span id="slide-position" aria-live="polite">0 / 0</span>
+            </div>
+            <button id="slide-next" type="button" aria-label="Nächstes Bild" title="Nächstes Bild">
+              <img src="images/icons/chevron-right.svg" alt="">
+            </button>
           </div>
         </div>
 
diff --git a/public/js/bootstrap-loader.js b/public/js/bootstrap-loader.js
index b59b89c..9baf6a7 100644
--- a/public/js/bootstrap-loader.js
+++ b/public/js/bootstrap-loader.js
@@ -43,11 +43,10 @@
   function initializeJqueryUi() {
     const $ = window.jQuery;
     $('#bootstrap-retry').button({ icon: 'ui-icon-refresh' });
-    $('.back-button').button({ icon: 'ui-icon-caret-1-w' });
+    $('.back-button').button();
     $('#clear-route-search').button({ icon: 'ui-icon-close', showLabel: false });
-    $('#slide-prev').button({ icon: 'ui-icon-caret-1-w', showLabel: false });
-    $('#slide-next').button({ icon: 'ui-icon-caret-1-e', showLabel: false });
-    $('#slide-controls').controlgroup();
+    $('#slide-prev').button();
+    $('#slide-next').button();
   }
 
   async function boot() {
diff --git a/public/js/slideshow.js b/public/js/slideshow.js
index 1245c32..9ea0b03 100644
--- a/public/js/slideshow.js
+++ b/public/js/slideshow.js
@@ -29,6 +29,7 @@
   function render() {
     const hasImages = images.length > 0;
     $('#slideshow').toggle(hasImages);
+    $('#slide-controls').attr('data-image-count', images.length);
     if (!hasImages) return;
 
     const image = images[index];