diff --git a/build.gradle b/build.gradle
index 5421d52..2ce16c7 100644
--- a/build.gradle
+++ b/build.gradle
@@ -18,7 +18,7 @@ apply plugin: 'war'
 apply plugin: 'application'
 
 group = 'de.jottyfan.camporganizer'
-version = '0.4.8'
+version = '0.4.9'
 sourceCompatibility = 17
 mainClassName = "de.jottyfan.camporganizer.Main"
 
diff --git a/src/main/resources/templates/fragments/camplist.html b/src/main/resources/templates/fragments/camplist.html
index abaa45d..5e74340 100644
--- a/src/main/resources/templates/fragments/camplist.html
+++ b/src/main/resources/templates/fragments/camplist.html
@@ -2,46 +2,47 @@
 <html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{template}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
 <body>
 	<div th:fragment="camplist(camps)">
-		<script type="text/javascript">
-			var mytoggle = new MyToggle();
-		</script>
-		<div class="card bottomdist16 block660" style="background: transparent" th:each="c : ${camps}">
-			<div class="card-header mytoggle_btn" style="background: transparent" th:onclick="mytoggle.toggle('campdiv_[[${c.pk}]]')">
-				<div style="margin-left: auto; margin-right: auto;">
-					<span th:text="${c.name}" class="headlinefont"></span><span class="headlinefont">&nbsp;</span><span th:text="${#numbers.formatInteger(c.year, 0)}" class="headlinefont"
-						th:if="${c.year != null}"></span>
-				</div>
-			</div>
-			<div th:id="'campdiv_' + ${c.pk}" class="card-body mytoggle_collapsed">
-				<table style="width: 100%">
-					<tr>
-						<td rowspan="4"><img th:src="@{/images/Icon_Stern.svg}" width="36px" height="36px" style="margin-left: 24px" /></td>
-						<td rowspan="4">
-							<div>
-								Biblische Geschichten<br /> Nachtwanderung<br /> Gruppenspiele<br /> Ausflüge<br /> Überraschungen
-							</div>
-						</td>
-						<td><span class="cabin">Ort</span></td>
-						<td><a th:href="${c.url}" th:text="${c.locationName}" target="_blank"></a></td>
-					</tr>
-					<tr>
-						<td><img th:src="@{/images/Icon_Alter.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
-						<td><div th:text="${c.minAge} + ' - ' + ${c.maxAge} + ' Jahre'" style="margin-top: 24px"></div></td>
-					</tr>
-					<tr>
-						<td><img th:src="@{/images/Icon_Datum.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
-						<td><div th:text="${#temporals.format(c.arrive, 'dd.MM.')} + ' - ' + ${#temporals.format(c.depart, 'dd.MM.yyyy')}" th:if="${c.arrive != null&&  c.depart != null}"
-								style="margin-top: 24px"></div></td>
-					</tr>
-					<tr>
-						<td><img th:src="@{/images/Icon_Preis.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
-						<td><div style="margin-top: 24px">
-								<p th:text="${c.price}"></p>
-							</div></td>
-					</tr>
-				</table>
-				<div style="text-align: center; margin-top: 64px">
-					<a class="btn btn-linda buttonfont" th:href="@{/registration/{id}(id=${c.pk})}">jetzt anmelden</a>
+		<div class="accordion block660" id="accordionExample">
+			<div class="accordion-item" th:each="c : ${camps}">
+				<h2 class="accordion-header" style="background: transparent" th:id="'heading' + ${c.pk}">
+					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" th:data-bs-target="'#collapse' + ${c.pk}" aria-expanded="false" th:aria-controls="'collapse' + ${c.pk}">
+						<span th:text="${c.name}" class="headlinefont"></span><span class="headlinefont">&nbsp;</span><span th:text="${#numbers.formatInteger(c.year, 0)}" class="headlinefont"
+							th:if="${c.year != null}"></span>
+					</button>
+				</h2>
+				<div th:id="'collapse' + ${c.pk}" class="accordion-collapse collapse" th:aria-labelledby="'heading' + ${c.pk}" data-bs-parent="#accordionExample">
+					<div class="accordion-body">
+						<table style="width: 100%">
+							<tr>
+								<td rowspan="4"><img th:src="@{/images/Icon_Stern.svg}" width="36px" height="36px" style="margin-left: 24px" /></td>
+								<td rowspan="4">
+									<div>
+										Biblische Geschichten<br /> Nachtwanderung<br /> Gruppenspiele<br /> Ausflüge<br /> Überraschungen
+									</div>
+								</td>
+								<td><span class="cabin">Ort</span></td>
+								<td><a th:href="${c.url}" th:text="${c.locationName}" target="_blank"></a></td>
+							</tr>
+							<tr>
+								<td><img th:src="@{/images/Icon_Alter.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
+								<td><div th:text="${c.minAge} + ' - ' + ${c.maxAge} + ' Jahre'" style="margin-top: 24px"></div></td>
+							</tr>
+							<tr>
+								<td><img th:src="@{/images/Icon_Datum.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
+								<td><div th:text="${#temporals.format(c.arrive, 'dd.MM.')} + ' - ' + ${#temporals.format(c.depart, 'dd.MM.yyyy')}" th:if="${c.arrive != null&&  c.depart != null}"
+										style="margin-top: 24px"></div></td>
+							</tr>
+							<tr>
+								<td><img th:src="@{/images/Icon_Preis.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
+								<td><div style="margin-top: 24px">
+										<p th:text="${c.price}"></p>
+									</div></td>
+							</tr>
+						</table>
+						<div style="text-align: center; margin-top: 64px">
+							<a class="btn btn-linda buttonfont" th:href="@{/registration/{id}(id=${c.pk})}">jetzt anmelden</a>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>

- - Biblische Geschichten Nachtwanderung Gruppenspiele Ausflüge Überraschungen - -	Ort


		- -
+ + Biblische Geschichten Nachtwanderung Gruppenspiele Ausflüge Überraschungen + +	Ort


		+ +