diff --git a/build.gradle b/build.gradle
index 8f72a5b..02f8eab 100644
--- a/build.gradle
+++ b/build.gradle
@@ -8,7 +8,7 @@ plugins {
 }
 
 group = 'de.jottyfan.camporganizer'
-version = '0.9.5'
+version = '0.9.6'
 
 description = """CampOrganizer2"""
 
@@ -53,6 +53,7 @@ dependencies {
 	implementation 'org.webjars:popper.js:2.11.7'
   implementation 'org.webjars:datatables:1.13.5'
   implementation 'org.webjars:select2:4.0.13'
+  implementation 'org.webjars.npm:fancyapps__fancybox:3.5.7'
 
   implementation 'net.sf.biweekly:biweekly:0.6.7'
 
diff --git a/src/main/resources/templates/allgemeines.html b/src/main/resources/templates/allgemeines.html
index 02923ce..01fb739 100644
--- a/src/main/resources/templates/allgemeines.html
+++ b/src/main/resources/templates/allgemeines.html
@@ -7,7 +7,7 @@
 <body>
 	<th:block layout:fragment="content">
 		<div class="container">
-			<div id="welcomeblock" class="row">
+			<div id="welcomeblock" class="row displayblock">
 				<div class="col-12">
 					<h2 class="headlinefont center">Willkommen bei den</h2>
 					<h1 class="titlefont center">Mittelpunkt<br />Freizeiten</h1>
@@ -16,23 +16,49 @@
 					<a th:href="@{/camplist}" class="btn btn-outline-danger">zur Anmeldung</a>
 				</div>
 				<div class="col-12 center mt-3">
-					<a href="#" onclick="$('#infoblock').show();$('#welcomeblock').hide()" class="hoverlink"><i class="fas fa-arrow-down"></i>&nbsp;weitere Infos</a>
+					<a href="#" onclick="$('#welcomeblock').slideUp('slow'); $('#fotoblock').fadeIn(1000);" class="btn btn-outline-secondary"><i class="fas fa-arrow-down"></i>&nbsp;weitere Informationen</a>
 				</div>
 			</div>
-			<div id="infoblock" class="row" style="display: none">
-				<div class="col-12 center">
-					<a href="#" onclick="$('#infoblock').hide();$('#welcomeblock').show()" class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i></a>
+			<div id="fotoblock" class="row displayblock" style="display: none">
+				<div class="col-12 center mb-3">
+					<a href="#" onclick="$('#fotoblock').fadeOut(1000); $('#welcomeblock').slideDown('slow');" class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i>&nbsp;Startseite</a>
+				</div>
+				<div class="col-12">
+					<th:block th:each="i : ${#numbers.sequence(1, 7)}">
+					  <a th:href="'https://www.onkelwernerfreizeiten.de/stock/stock' + ${i} + '.jpg'" data-fancybox="gallery" th:data-caption="'Bild ' + ${i}">
+					    <img th:src="'https://www.onkelwernerfreizeiten.de/stock/stock' + ${i} + '.jpg'" height="96px" class="m-1" />
+					  </a>
+				  </th:block>
+				  <script th:inline="javascript">
+				    Fancybox.bind('[data-fancybox="gallery"]', {
+						});
+				  </script>
+				</div>
+				<div class="col-12 center mt-3">
+					<a href="#" onclick="$('#fotoblock').slideUp('slow'); $('#infoblock').fadeIn(1000);" class="btn btn-outline-secondary"><i class="fas fa-arrow-down"></i>&nbsp;weitere Infos</a>
+				</div>
+			</div>
+			<div id="infoblock" class="row displayblock" style="display: none">
+				<div class="col-12 center mb-3">
+					<a href="#" onclick="$('#infoblock').fadeOut(1000); $('#fotoblock').slideDown('slow');" class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i>&nbsp;Bilder</a>
 				</div>
-				<div class="col-12">TODO: Diashow</div>
 				<div class="col-12 center">
 					<h2 class="headlinefont">Unsere Freizeiten</h2>
 				</div>
+				<script th:inline="javascript">
+          function selectCamp(name) {
+            $('.description').hide();
+            $('.campbtn').removeClass('btn-secondary').removeClass('text-white').addClass("btn-secondary-outline");
+            $('#camp_' + name).show();
+            $('#btn_' + name).addClass('btn-secondary').removeClass("btn-secondary-outline").addClass('text-white');
+          }
+				</script>
 				<div class="col-12 center">
-					<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_rehe').show();">Rehe</button>
-					<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_olfen').show();">Olfen</button>
-					<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_growup').show();">Grow Up</button>
-					<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_schweiz').show();">Schweiz</button>
-					<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_heimfreizeit').show();">Heimfreizeit</button>
+					<button id="btn_rehe" class="btn btn-outline-secondary campbtn" onclick="selectCamp('rehe')">Rehe</button>
+					<button id="btn_olfen" class="btn btn-outline-secondary campbtn" onclick="selectCamp('olfen')">Olfen</button>
+					<button id="btn_growup" class="btn btn-outline-secondary campbtn" onclick="selectCamp('growup')">Grow Up</button>
+					<button id="btn_schweiz" class="btn btn-outline-secondary campbtn" onclick="selectCamp('schweiz')">Schweiz</button>
+					<button id="btn_heimfreizeit" class="btn btn-outline-secondary campbtn" onclick="selectCamp('heimfreizeit')">Heimfreizeit</button>
 				</div>
 				<div id="camp_rehe" class="col-12 description" style="display: none">
 					<h2 class="headlinefont">Wochenendfreizeit in Rehe</h2>
@@ -130,7 +156,7 @@
 						ein spannendes Nachtspiel handelt.</p>
 					<p>Gemeinschaft und Spaß kommen auf jeden Fall nicht zu kurz und auch im Glauben bietet dir die Hohenhaslach-Freizeit Herausforderung, wenn du dazu bereit bist!</p>
 				</div>
-				<div class="col-12 center">
+				<div class="col-12 center mt-3">
 					<a th:href="@{/camplist}" class="btn btn-outline-danger">zur Anmeldung</a>
 				</div>
 			</div>
diff --git a/src/main/resources/templates/template.html b/src/main/resources/templates/template.html
index e632b3d..d74fcb8 100644
--- a/src/main/resources/templates/template.html
+++ b/src/main/resources/templates/template.html
@@ -10,7 +10,9 @@
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/select2/4.0.13/css/select2.min.css}" />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/css/select2-bootstrap-5-theme.min.css}" />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/css/style.css}" />
+<link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/fancyapps__fancybox/3.5.7/dist/jquery.fancybox.min.css}">
 <script th:src="@{/webjars/jquery/3.7.1/jquery.min.js}"></script>
+<script th:src="@{/webjars/fancyapps__fancybox/3.5.7/dist/jquery.fancybox.min.js}"></script>
 <script th:src="@{/webjars/bootstrap/5.3.3/js/bootstrap.bundle.min.js}"></script>
 <script th:src="@{/webjars/datatables/1.13.5/js/jquery.dataTables.min.js}"></script>
 <script th:src="@{/webjars/select2/4.0.13/js/select2.full.min.js}"></script>
