diff --git a/pom.xml b/pom.xml
index 2446177..735f82b 100644
--- a/pom.xml
+++ b/pom.xml
@@ -45,6 +45,13 @@
 			Use Maven Central for package search (https://search.maven.org/).
 		-->
 
+		<dependency>
+			<groupId>org.webjars</groupId>
+			<artifactId>bootstrap</artifactId>
+			<version>5.3.2</version>
+			<scope>runtime</scope>
+		</dependency>
+
 	</dependencies>
 
 	<repositories>
diff --git a/src/main/resources/static/resources/css/customer/edit-style.css b/src/main/resources/static/resources/css/customer/edit-style.css
deleted file mode 100644
index f102890..0000000
--- a/src/main/resources/static/resources/css/customer/edit-style.css
+++ /dev/null
@@ -1,21 +0,0 @@
-body {
-	font: 13px/22px Helvetica, Arial, sans-serif;
-	background: #f0f0f0;
-}
-
-h2 {
-	text-decoration: underline;
-}
-
-.button {
-	cursor: pointer;
-	font-size: 13px;
-	text-decoration: none;
-	background-color: #EEEEEE;
-	color: #333333;
-	padding: 2px 6px 2px 6px;
-	border-top: 1px solid #333333;
-	border-right: 1px solid #333333;
-	border-bottom: 1px solid #333333;
-	border-left: 1px solid #333333;
-}
diff --git a/src/main/resources/static/resources/css/customer/style.css b/src/main/resources/static/resources/css/customer/style.css
deleted file mode 100644
index 9aeb7b4..0000000
--- a/src/main/resources/static/resources/css/customer/style.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* CSS RESET */
-
-body {
-	margin: 0 auto;
-	width: 940px;
-	font: 13px/22px Helvetica, Arial, sans-serif;
-	background: #f0f0f0;
-}
-
-h1 {
-	font-size: 3em;
-	line-height: 3.2em;
-	text-align:center;
-}
-
-table {
-	border-collapse: collapse;
-	width: 95%;
-	margin-top: 20px;
-
-}
-th,
-td {
-	border: 1px solid #dddddd;
-	text-align: left;
-	padding: 8px;
-}
-th {
-	background-color: #f2f2f2;
-	text-decoration: underline;
-	font-size: 19px;
-}
-tr{
-	font-size: 17px;
-}
-
-td:last-child,
-td:nth-child(5) {
-	width: 50px;
-	text-align: center;
-}
-tr:nth-child(even) {
-	background-color: rgb(214, 236, 216);
-}
-
-button {
-	cursor: pointer;
-	font-size: 13px;
-	margin-left: 4px;
-	margin-right: 4px;
-}
-
-.button {
-	cursor: pointer;
-	font-size: 13px;
-	text-decoration: none;
-	background-color: #EEEEEE;
-	color: #333333;
-	padding: 2px 6px 2px 6px;
-	border-top: 1px solid #333333;
-	border-right: 1px solid #333333;
-	border-bottom: 1px solid #333333;
-	border-left: 1px solid #333333;
-}
diff --git a/src/main/resources/static/resources/css/profile/style.css b/src/main/resources/static/resources/css/profile/style.css
deleted file mode 100644
index 42f0afe..0000000
--- a/src/main/resources/static/resources/css/profile/style.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/* CSS RESET */
-
-* {
-	margin: 0;
-	padding: 0;
-}
-
-body {
-	margin: 0 auto;
-	width: 940px;
-	font: 13px/22px Helvetica, Arial, sans-serif;
-	background: #f0f0f0;
-}
-
-h1 {
-	font-size: 3em;
-	line-height: 3.2em;
-	text-align:center;
-}
-
-table {
-	border-collapse: separate;
-	border-spacing: 5 2em;
-	padding: 20px;
-	padding-left: 50px;
-	font-size: 20px;
-}
-
-h2 {
-	margin: 10px;
-}
-
-th, td {
-	padding: 15px;
-}
-
-.horizontal_center {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-div.danger_zone {
-	margin-bottom: 50px;
-}
-
-button.danger_zone {
-	padding-top: 15px;
-	padding-bottom: 15px;
-	padding-right: 25px;
-	padding-left: 25px;
-	margin-left: 40px;
-	margin-right: 40px;
-	color: red;
-	border: 2px solid red;
-	border-radius: 4px;
-}
diff --git a/src/main/resources/static/resources/css/staff/edit-style.css b/src/main/resources/static/resources/css/staff/edit-style.css
deleted file mode 100644
index f102890..0000000
--- a/src/main/resources/static/resources/css/staff/edit-style.css
+++ /dev/null
@@ -1,21 +0,0 @@
-body {
-	font: 13px/22px Helvetica, Arial, sans-serif;
-	background: #f0f0f0;
-}
-
-h2 {
-	text-decoration: underline;
-}
-
-.button {
-	cursor: pointer;
-	font-size: 13px;
-	text-decoration: none;
-	background-color: #EEEEEE;
-	color: #333333;
-	padding: 2px 6px 2px 6px;
-	border-top: 1px solid #333333;
-	border-right: 1px solid #333333;
-	border-bottom: 1px solid #333333;
-	border-left: 1px solid #333333;
-}
diff --git a/src/main/resources/static/resources/css/staff/style.css b/src/main/resources/static/resources/css/staff/style.css
deleted file mode 100644
index faba771..0000000
--- a/src/main/resources/static/resources/css/staff/style.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/* CSS RESET */
-
-body {
-	margin: 0 auto;
-	width: 940px;
-	font: 13px/22px Helvetica, Arial, sans-serif;
-	background: #f0f0f0;
-}
-
-h1 {
-	font-size: 3em;
-	line-height: 3.2em;
-	text-align:center;
-}
-
-h2 {
-	text-decoration: underline;
-}
-
-table {
-	border-collapse: collapse;
-	width: 95%;
-	margin-top: 20px;
-}
-th,
-td {
-	border: 1px solid #dddddd;
-	text-align: left;
-	padding: 8px;
-}
-th {
-	background-color: #f2f2f2;
-	text-decoration: underline;
-	font-size: 19px;
-}
-tr {
-	font-size: 17px;
-}
-
-td:last-child,
-td:nth-child(5) {
-	width: 50px;
-	text-align: center;
-}
-tr:nth-child(even) {
-	background-color: rgb(214, 236, 216);
-}
-.add-button {
-	margin-top: 20px;
-	font-size: 16px;
-}
-button {
-	cursor: pointer;
-	font-size: 13px;
-	margin-left: 4px;
-	margin-right: 4px;
-}
-
-.button {
-	cursor: pointer;
-	font-size: 13px;
-	text-decoration: none;
-	background-color: #EEEEEE;
-	color: #333333;
-	padding: 2px 6px 2px 6px;
-	border-top: 1px solid #333333;
-	border-right: 1px solid #333333;
-	border-bottom: 1px solid #333333;
-	border-left: 1px solid #333333;
-}
diff --git a/src/main/resources/static/resources/css/style.css b/src/main/resources/static/resources/css/style.css
index ed03f7e..3e93e1d 100644
--- a/src/main/resources/static/resources/css/style.css
+++ b/src/main/resources/static/resources/css/style.css
@@ -1,19 +1,14 @@
-/* CSS RESET */
+/* specific to login */
 
-* {
-	margin: 0;
-	padding: 0;
+.login-container {
+	max-width: 24rem;
 }
 
-body {
-	margin: 0 auto;
-	width: 940px;
-	font: 13px/22px Helvetica, Arial, sans-serif;
-	background: #f0f0f0;
+.calendar {
+	border-collapse: separate;
 }
 
-h1 {
-	font-size: 3em;
-	line-height: 3.2em;
-	text-align:center;
+.calendar th,
+.calendar td {
+	font-weight: bold;
 }
diff --git a/src/main/resources/templates/catalog.html b/src/main/resources/templates/catalog.html
index b7613b6..a75b70c 100644
--- a/src/main/resources/templates/catalog.html
+++ b/src/main/resources/templates/catalog.html
@@ -4,25 +4,25 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Katalog')}">
 	<head>
-		<link rel="stylesheet" th:href="@{/resources/css/style.css}">
 	</head>
 	<body>
-		<section layout:fragment="content">
+		<div layout:fragment="content">
 			<div>
-				<table style="width: 100%;">
-					<tr style="text-align: left;">
+				<table class="table">
+					<tr>
 						<th></th>
 						<th>Name</th>
 						<th>Mindestzeitraum</th>
 						<th>Basisausstattung</th>
 						<th>Preis ab</th>
+						<th></th>
 					</tr>
 					<tr th:each="catalogEntry : ${catalogEntries}">
 						<td>
 							**BILD**
 						</td>
 						<td th:text="${catalogEntry.getEventType()}">
-						<td th:text="${catalogEntry.getMinimumTimePeriod()}">h
+						<td th:text="${catalogEntry.getMinimumTimePeriod()}">
 						<td>
 							<ul th:each="product : ${catalogEntry.getProducts()}">
 								<li th:text="${product}"/>
@@ -32,7 +32,7 @@
 						<td sec:authorize="hasRole('ADMIN')">
 							<form method="post" th:action="@{/catalog/remove}">
 								<input type="hidden" name="catalogEntryID" th:value="${catalogEntry.getId()}">
-								<button type="submit">Entfernen</button>
+								<button class="btn btn-danger" type="submit">Entfernen</button>
 							</form>
 						</td>
 					</tr>
@@ -40,10 +40,10 @@
 			</div>
 
 			<div sec:authorize="hasRole('ADMIN')">
-				<form th:action="@{/catalog_editor}">
-					<button type="submit">Hinzufügen</button>
-				</form>
+				<a th:href="@{/catalog_editor}">
+					<button class="btn btn-success" type="submit">Hinzufügen</button>
+				</a>
 			</div>
-		</section>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/catalog_editor.html b/src/main/resources/templates/catalog_editor.html
index a210146..ae53931 100644
--- a/src/main/resources/templates/catalog_editor.html
+++ b/src/main/resources/templates/catalog_editor.html
@@ -5,32 +5,32 @@
 	layout:decorate="~{layout.html(title='Katalog bearbeiten')}">
 
 	<body>
-		<section layout:fragment="content">
+		<div layout:fragment="content">
 			<input type="hidden" name="addCatalog">
 			<div class="content">
 				<h2>Dienstleistung</h2>
-				<label for="events"></label>
+				<label class="form-label" for="events"></label>
 				<form th:object="${formCatalogEntry}" method="post" th:action="@{/catalog_editor/chooseEvent}">
-					<select name="events" id="events">
+					<select class="form-select w-auto d-inline-block" name="events" id="events">
 						<option value="event_catering">Eventcatering</option>
 						<option value="party_service">Partyservice</option>
 						<option value="mobile_breakfast">Mobile Breakfast</option>
 						<option value="rent_a_cook">Rent-a-Cook</option>
 					</select>
-					<button type="submit">Event auswählen</button>
+					<button class="btn btn-secondary" type="submit">Event auswählen</button>
 				</form>
 				Eventbasispreis: 500€
 
 				<h2>Mindestzeitraum</h2>
 				<form th:object="${formCatalogEntry}" method="post" th:action="@{/catalog_editor/add_time}">
-					<label>Mindestzeitraum:</label>
+					<label class="form-label">Mindestzeitraum:</label>
 					<input type="hidden" th:field="*{eventType}">
-					<input th:field="*{minimumTimePeriod}" type="number" min="0" step="1" value="1"/>
-					<button type="submit">Zum Model hinzufügen</button>
+					<input class="form-control w-auto d-inline-block" th:field="*{minimumTimePeriod}" type="number" min="0" step="1" value="1"/>
+					<button class="btn btn-secondary" type="submit">Zum Model hinzufügen</button>
 				</form>
 
 				<h2>Basisausstattung</h2>
-				<table>
+				<table class="table">
 					<tr>
 						<th>Produktname</th>
 						<th>Menge</th>
@@ -42,21 +42,20 @@
 						<td th:text="${item.getCost()}"> €
 						<td>
 							<form method="post" th:action="@{/catalog_editor/remove_product}">
-								<input type="hidden" name="id" th:value="${item.getItemId()}">
-								<button type="submit">Entfernen</button>
+								<input class="form-control w-auto d-inline-block" type="hidden" name="id" th:value="${item.getItemId()}">
+								<button class="btn btn-danger" type="submit">Entfernen</button>
 							</form>
 						</td>
+					</tr>
 				</table>
-				<hr>
-				<div style="height: 20px;"></div>
 				<form method="post" th:action="@{/catalog_editor/product_add}">
-					<label for="name">Produktname</label>
-					<input type="text" id="name" name="name" required>
-					<label for="amount">Menge</label>
-					<input type="number" id="amount" name="amount" min="1" required>
+					<label class="form-label" for="name">Produktname</label>
+					<input class="form-control w-auto d-inline-block" type="text" id="name" name="name" required>
+					<label class="form-label" for="amount">Menge</label>
+					<input class="form-control w-auto d-inline-block" type="number" id="amount" name="amount" min="1" required>
 					<input type="hidden" name="cost" value="50.0">
-					<button type="submit">Artikel hinzufügen</button>
-				</form>hinzufügen
+					<button class="btn btn-primary" type="submit">Artikel hinzufügen</button>
+				</form>
 				<br>
 				<h3>Momentane Auswahl</h3>
 				Eventtyp: <span th:text="${formCatalogEntry.getEventType()}"></span><br>
@@ -67,9 +66,9 @@
 					<input type="hidden" name="products" th:value="${inventory}">
 					<input type="hidden" name="minimumTimePeriod" th:value="${formCatalogEntry.getMinimumTimePeriod}">
 					<input type="hidden" name="totalCost" th:value="${formCatalogEntry.getTotalCost()}">
-					<button type="submit">Zum Katalog hinzufügen</button>
+					<button class="btn btn-primary" type="submit">Zum Katalog hinzufügen</button>
 				</form>
 			</div>
-		</section>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/customers.html b/src/main/resources/templates/customers.html
index 7b313b2..f813f01 100644
--- a/src/main/resources/templates/customers.html
+++ b/src/main/resources/templates/customers.html
@@ -4,14 +4,13 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Kunden')}">
 	<head>
-		<link rel="stylesheet" th:href="@{/resources/css/customer/style.css}" />
 		<title th:text="${title}"></title>
 	</head>
 	<body>
-		<section layout:fragment="content">
-			<div class="verwaltung">
+		<div layout:fragment="content">
+			<div>
 				<h1>Kundenverwaltung</h1>
-				<table>
+				<table class="table">
 					<tr>
 						<th>Nutzername</th>
 						<th>Aufträge</th>
@@ -21,15 +20,15 @@
 					<tr th:each="customer : ${customers}">
 						<td th:text="${customer.username}">Musterkoch</td>
 						<td>Aufträge</td>
-						<td><a th:href="@{/customers/edit/{id}(id=${customer.id})}" class="button">Bearbeiten</a></td>
+						<td><a th:href="@{/customers/edit/{id}(id=${customer.id})}"><button class="btn btn-warning">Bearbeiten</button></a></td>
 						<td>
-							<a th:if="${customer.isEnabled}" th:href="@{/customers/remove/{id}(id=${customer.id})}" class="button">Entfernen</a>
+							<a th:if="${customer.isEnabled}" th:href="@{/customers/remove/{id}(id=${customer.id})}"><button class="btn btn-danger">Entfernen</button></a>
 							<b th:if="${!customer.isEnabled}">Deaktiviert</b>
 						</td>
 						</td>
 					</tr>
 				</table>
 			</div>
-		</section>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/edit-customer.html b/src/main/resources/templates/edit-customer.html
index edc0ca6..3e8b1c9 100644
--- a/src/main/resources/templates/edit-customer.html
+++ b/src/main/resources/templates/edit-customer.html
@@ -5,24 +5,20 @@
 	layout:decorate="~{layout.html(title='Kunden bearbeiten')}">
 	<head>
 		<title>Kunde Bearbeiten</title>
-
-		<link
-			rel="stylesheet"
-			th:href="@{/resources/css/customer/edit-style.css}"
-		/>
 	</head>
 	<body>
-		<section layout:fragment="content">
-			<div class="edit-customer-form">
-				<h2>Kunde Bearbeiten</h2>
-				<form method="post">
-					<h3>Nutzername</h3>
-					<input type="text" name="username" th:value="${customer.username}"/>
-					<h3>Addresse</h3>
-					<input type="text" name="address" th:value="${customer.address}"/>
-					<button type="submit">Save</button>
-				</form>
-			</div>
-		</section>
+		<div layout:fragment="content">
+			<form method="post">
+				<div class="mb-3">
+					<label class="form-label" for="username">Nutzername</label>
+					<input class="form-control" type="text" name="username" th:value="${customer.username}"/>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="address">Adresse</label>
+					<input class="form-control" type="text" name="address" th:value="${customer.address}"/>
+				</div>
+				<button class="btn btn-primary" type="submit">Speichern</button>
+			</form>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/edit-staff.html b/src/main/resources/templates/edit-staff.html
index 319c272..e4be582 100644
--- a/src/main/resources/templates/edit-staff.html
+++ b/src/main/resources/templates/edit-staff.html
@@ -5,29 +5,26 @@
 	layout:decorate="~{layout.html(title='Personal bearbeiten')}">
 	<head>
 		<title>Personal Bearbeiten</title>
-
-		<link rel="stylesheet" th:href="@{/resources/css/staff/edit-style.css}" />
 	</head>
 	<body>
-		<section layout:fragment="content">
-			<div class="edit-staff-form">
-				<h2>Personal Bearbeiten</h2>
-				<form th:action="@{/staff/update}" th:object="${staff}" method="post">
-					<input type="hidden" th:field="*{id}" />
-
-					<label for="name">Name:</label>
-					<input type="text" th:field="*{name}" required />
-
-					<label for="surname">Nachname:</label>
-					<input type="text" th:field="*{surname}" required />
-
-					<label for="job">Beruf:</label>
-					<input type="text" th:field="*{job}" required />
-
-					<button type="submit">Save</button>
-				</form>
-				<a th:href="@{/staff}" class="button">Cancel</a>
-			</div>
-		</section>
+		<div layout:fragment="content">
+			<form th:action="@{/staff/update}" th:object="${staff}" method="post">
+				<input type="hidden" th:field="*{id}" />
+				<div class="mb-3">
+					<label class="form-label" for="name">Name:</label>
+					<input class="form-control" type="text" th:field="*{name}" required />
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="surname">Nachname:</label>
+					<input class="form-control" type="text" th:field="*{surname}" required />
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="job">Beruf:</label>
+					<input class="form-control" type="text" th:field="*{job}" required />
+				</div>
+				<button class="btn btn-primary" type="submit">Speichern</button>
+				<a th:href="@{/staff}"><button type="button" class="btn btn-danger">Abbrechen</button></a>
+			</form>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/event.html b/src/main/resources/templates/event.html
index c45a869..e9c8c64 100644
--- a/src/main/resources/templates/event.html
+++ b/src/main/resources/templates/event.html
@@ -5,21 +5,21 @@
 	layout:decorate="~{layout.html(title='Event konfigurieren')}">
 
 	<body>
-		<section layout:fragment="content">
+		<div layout:fragment="content">
 			<span th:text="'Typ: ' + ${orderType}"/>
 
 			<form th:action="@{/event/changeOrderType}" method="post">
-				<select name="orderType">
+				<select class="form-select w-auto d-inline-block" name="orderType">
 					<option disabled="disabled" selected value="NULL" th:text="' -- Wählen Sie eine Option -- '"/>
 					<option th:value="'SE'" th:text="'Something else'"/>
 					<option th:value="'RaK'" th:text="Rent-a-Cook"/>
 					<option th:value="'EK'" th:text="Eventcatering"/>
 					<option th:value="'SN'" th:text="'Sushi Night'"/>
 				</select>
-				<input type="submit" value="Eventtypen ändern"/>
+				<button class="btn btn-primary" type="submit">Eventtypen ändern</button>
 			</form>
 
-			<table style="width:100%; text-align:left">
+			<table class="table">
 				<tr>
 					<th>Produkt</th>
 					<th>Anzahl</th>
@@ -32,25 +32,24 @@
 
 			<h4>Product hinzufügen</h4>
 
-			<form th:action="@{/event/addProduct}" th:object="${productForm}" method="post">
-				<div>
-					<label>Produkt</label>
-					<input type="text" th:field="*{product}" placeholder="Produktname" required/>
-				</div>
+			<div class="mb-4">
+				<form th:action="@{/event/addProduct}" th:object="${productForm}" method="post">
+					<div class="mb-3">
+						<label class="form-label">Produkt</label>
+						<input class="form-control" type="text" th:field="*{product}" placeholder="Produktname" required/>
+					</div>
 
-				<div>
-					<label>Anzahl</label>
-					<input type="number" th:field="*{number}" placeholder="Anzahl" min="1" required/>
-				</div>
+					<div class="mb-3">
+						<label class="form-label">Anzahl</label>
+						<input class="form-control" type="number" th:field="*{number}" placeholder="Anzahl" min="1" required/>
+					</div>
 
-				<input type="submit" value="Submit"/>
-			</form>
-
-			<div>
-				<form method="post" th:action="@{/event/checkout}">
-					<input type="submit" th:value="'Kostenpflichtig bestellen'"/>
+					<button class="btn btn-primary" type="submit">Submit</button>
 				</form>
 			</div>
-		</section>
-	</body>
+
+			<form method="post" th:action="@{/event/checkout}">
+				<button class="btn btn-primary" type="submit">Kostenpflichtig bestellen</button>
+			</form>
+		</div>
 </html>
diff --git a/src/main/resources/templates/inventory-mutate.html b/src/main/resources/templates/inventory-mutate.html
index 0d07eba..79f5f35 100644
--- a/src/main/resources/templates/inventory-mutate.html
+++ b/src/main/resources/templates/inventory-mutate.html
@@ -4,40 +4,40 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Lagerverwaltung')}">
 	<body>
-		<section layout:fragment="content">
+		<div layout:fragment="content">
 			<h2 th:text="${'Produkt ' + (product == null ? 'anlegen' : 'bearbeiten')}"></h2>
 			<!-- TODO: maybe migrate to th:field (which is a pain) -->
 			<form method="post">
-				<div>
-					<label for="type">Typ</label>
-					<input type="radio" name="type" th:each="type : ${T(catering.catalog.CatalogDummyType).values()}" th:value="${type}" th:text="${type}" th:checked="${type.name() == product?.type?.name()}" required/>
+				<div class="mb-3">
+					<label class="form-label" for="type">Typ</label>
+					<div class="form-check form-check-inline" th:each="type : ${T(catering.catalog.CatalogDummyType).values()}">
+						<input class="form-check-input" type="radio" name="type" th:value="${type}" th:text="${type}" th:checked="${type.name() == product?.type?.name()}" required/>
+					</div>
 				</div>
-				<div>
-					<label for="name">Produktname</label>
-					<input type="text" name="name" th:value="${product?.name}" required/>
+				<div class="mb-3">
+					<label class="form-label" for="name">Produktname</label>
+					<input class="form-control" type="text" name="name" th:value="${product?.name}" required/>
 				</div>
-				<div>
-					<label for="quantity">Menge im Bestand</label>
-					<input type="number" name="quantity" th:value="${item?.quantity}" required/>
+				<div class="mb-3">
+					<label class="form-label" for="quantity">Menge im Bestand</label>
+					<input class="form-control" type="number" name="quantity" th:value="${item?.quantity}" required/>
 				</div>
-				<div>
-					<label for="wholesalePrice">Einkaufspreis</label>
-					<input type="number" name="wholesalePrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.wholesalePrice?.getNumber()?.doubleValueExact(), 1, 2)}" required/>
+				<div class="mb-3">
+					<label class="form-label" for="wholesalePrice">Einkaufspreis</label>
+					<input class="form-control" type="number" name="wholesalePrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.wholesalePrice?.getNumber()?.doubleValueExact(), 1, 2)}" required/>
 				</div>
-				<div>
-					<label for="retailPrice">UVP</label>
-					<input type="number" name="retailPrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.price?.getNumber()?.doubleValueExact(), 1, 2)}" required/>
+				<div class="mb-3">
+					<label class="form-label" for="retailPrice">UVP</label>
+					<input class="form-control" type="number" name="retailPrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.price?.getNumber()?.doubleValueExact(), 1, 2)}" required/>
 				</div>
-				<div>
+				<div class="mb-3">
 					<!-- FIXME darf nur bei angeboten als teil von partyservice angezeigt werden -->
-					<label for="promotionPrice">Aktionspreis</label>
-					<input type="number" name="promotionPrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.promotionPrice?.getNumber()?.doubleValueExact(), 1, 2)}"/>
-				</div>
-				<div>
-					<button type="submit" th:text="${product == null ? 'Hinzufügen' : 'Bearbeiten'}"></button>
+					<label class="form-label" for="promotionPrice">Aktionspreis</label>
+					<input class="form-control" type="number" name="promotionPrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.promotionPrice?.getNumber()?.doubleValueExact(), 1, 2)}"/>
 				</div>
+				<button class="btn btn-primary" type="submit" th:text="${product == null ? 'Hinzufügen' : 'Bearbeiten'}"></button>
 				<!-- KANN: Bild und Beschreibungstext -->
 			</form>
-		</section>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/inventory.html b/src/main/resources/templates/inventory.html
index b82dbdc..826eb26 100644
--- a/src/main/resources/templates/inventory.html
+++ b/src/main/resources/templates/inventory.html
@@ -4,8 +4,8 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Inventar')}">
 	<body>
-		<section layout:fragment="content">
-			<table border>
+		<div layout:fragment="content">
+			<table class="table">
 				<thead>
 					<!-- TODO: i18n? -->
 					<tr>
@@ -27,19 +27,14 @@
 						<td th:if="${item.product.promotionPrice != null}"><del th:text="${item.product.price}"></del> <span th:text="${item.product.promotionPrice}"></span></td>
 						<td th:if="${item.product.promotionPrice == null}" th:text="${item.product.price}"></td>
 						<td th:text="${item.product.wholesalePrice.multiply(item.quantity.getAmount())}"></td>
-						<td><a th:href="@{/inventory/edit/{id}(id=${item.product.id})}"><button>✏</button></a><a th:href="@{/inventory/delete/{id}(id=${item.product.id})}"><button>X</button></a></td>
-					</tr>
-					<tr>
-						<td><a href="/inventory/add"><button>⊕</button></a></td>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td></td><!-- TODO (optional): add total monetary value of inventory -->
-						<td></td>
+						<td>
+							<a th:href="@{/inventory/edit/{id}(id=${item.product.id})}"><button class="btn btn-warning">Bearbeiten</button></a>
+							<a th:href="@{/inventory/delete/{id}(id=${item.product.id})}"><button class="btn btn-danger">Entfernen</button></a>
+						</td>
 					</tr>
 				</tbody>
 			</table>
-		</section>
+			<a href="/inventory/add"><button class="btn btn-primary">Artikel hinzufügen</button></a>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
index 09930b8..0175ef1 100644
--- a/src/main/resources/templates/layout.html
+++ b/src/main/resources/templates/layout.html
@@ -5,26 +5,26 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
 	<head>
 		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
 		<link rel="stylesheet" th:href="@{/resources/css/style.css}">
 
-		<!--<link th:href="@{/resources/css/style.css}" rel="stylesheet"-->
-		<!--href="../static/resources/css/style.css" type="text/css"/>-->
-
 		<title th:text="${#strings.isEmpty(title)} ? #{home.title} : ${title}">Catering</title>
 	</head>
 	<body>
-		<div>
-			<header>
-				<h1 th:text="${#strings.isEmpty(title)} ? #{home.title} : ${title}">Catering</h1>
-			</header>
-			<nav th:insert="~{navigation :: navigation}"></nav>
-			<section layout:fragment="content"></section>
+		<nav th:replace="~{navigation :: navigation}"></nav>
+		<main class="container py-4">
+			<h1 class="mb-4" th:text="${#strings.isEmpty(title)} ? #{home.title} : ${title}"></h1>
+			<div layout:fragment="content"></div>
+		</main>
+		<div class="container">
+			<footer class="border-top my-4 py-4">
+				<p class="text-center">© Hannes Wurst @ Mampf GmbH</p>
+				<p class="text-center">
+					<a href="mailto:catering@mampf.com">catering@mampf.com</a>
+				</p>
+			</footer>
 		</div>
-		<footer style="bottom: 0; position: absolute;">
-			<p>© Hannes Wurst @ Mampf GmbH</p>
-			<p>
-				<a href="mailto:catering@mampf.com">catering@mampf.com</a>
-			</p>
-		</footer>
+		<script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
 	</body>
 </html>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 43841dd..3ed33bd 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -4,70 +4,20 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Login')}">
 
-	<!-- FIXME no inline styles -->
-
-	<style>
-
-	form#login {
-
-		display: flex;
-
-		flex-direction: column;
-
-		gap: 1em;
-
-	}
-
-
-
-	form#login > div {
-
-		display: flex;
-
-		flex-direction: column;
-
-		gap: .5em;
-
-	}
-
-
-
-	form#login > div > * {
-
-		display: flex;
-
-	}
-
-	</style>
-
-	<section layout:fragment="content">
-		<form class="ui form" role="form" th:action="@{/login}" method="post">
-
-			<div class="field">
-
-				<label for="username">Nutzername</label>
-
-				<input class="form-control" type="text" id="username" name="username" autofocus="autofocus" placeholder="Username">
-
-			</div>
-
-			<div class="field">
-
-				<label for="password">Passwort</label>
-
-				<input type="password" id="password" name="password" placeholder="Password">
-
-			</div>
-
-			<div>
-
-				<button type="submit" class="ui button">Login</button>
-
-			</div>
-
-		</form>
-
+	<div layout:fragment="content">
+		<div class="login-container mb-4">
+			<form th:action="@{/login}" method="post">
+				<div class="mb-3">
+					<label class="form-label" for="username">Nutzername</label>
+					<input class="form-control" type="text" id="username" name="username" autofocus="autofocus">
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="password">Passwort</label>
+					<input class="form-control" type="password" id="password" name="password">
+				</div>
+				<button class="btn btn-primary" type="submit">Login</button>
+			</form>
+		</div>
 		<p>Haben Sie noch keinen Account? Registrieren Sie sich <a th:href="@{/register}">hier</a>.</p>
-	</section>
-
+	</div>
 </html>
diff --git a/src/main/resources/templates/navigation.html b/src/main/resources/templates/navigation.html
index 309759b..5e9370f 100644
--- a/src/main/resources/templates/navigation.html
+++ b/src/main/resources/templates/navigation.html
@@ -4,25 +4,52 @@
 	<head>
 	</head>
 	<body>
-		<nav th:fragment="navigation">
-			<div class="ui menu">
-				<a class="item" th:href="@{/}">Startseite</a>
-				<a class="item" th:href="@{/inventory}" sec:authorize="hasRole('ADMIN')">Inventar</a>
-				<a class="item" th:href="@{/catalog}">Katalog</a>
-				<a class="item" th:href="@{/staff}" sec:authorize="hasRole('ADMIN')">Angestellte</a>
-				<a class="item" th:href="@{/customers}" sec:authorize="hasRole('ADMIN')">Kunden</a>
-				<a class="item" th:href="@{/orders}" sec:authorize="isAuthenticated()">Bestellungen</a>
-				<a class="item" th:href="@{/event}" sec:authorize="hasRole('CUSTOMER')">Event planen</a>
-				<a class="item" th:href="@{/orders/calender}" sec:authorize="hasRole('ADMIN')">Kalender</a>
-
-				<div class="right menu">
-					<a class="item" th:href="@{/login}" sec:authorize="!isAuthenticated()">Login</a>
-					<a class="item" th:href="@{/register}" sec:authorize="!isAuthenticated()">Registrierung</a>
-					<a class="item" th:href="@{/profile}" sec:authorize="isAuthenticated()">Profil</a>
-					<a class="item" th:href="@{/logout}" sec:authorize="isAuthenticated()">Logout</a>
+		<nav th:fragment="navigation" class="navbar navbar-expand-lg bg-body-secondary">
+			<div class="container">
+				<a class="navbar-brand" th:href="@{/}">Catering Mampf</a>
+				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse" id="navbarSupportedContent">
+					<ul class="navbar-nav">
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/inventory}" sec:authorize="hasRole('ADMIN')">Inventar</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/catalog}">Katalog</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/staff}" sec:authorize="hasRole('ADMIN')">Angestellte</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/customers}" sec:authorize="hasRole('ADMIN')">Kunden</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/orders}" sec:authorize="isAuthenticated()">Bestellungen</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/event}" sec:authorize="hasRole('CUSTOMER')">Event planen</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/orders/calender}" sec:authorize="hasRole('ADMIN')">Kalender</a>
+						</li>
+					</ul>
+					<ul class="navbar-nav ms-auto">
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/login}" sec:authorize="!isAuthenticated()">Login</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/register}" sec:authorize="!isAuthenticated()">Registrierung</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/profile}" sec:authorize="isAuthenticated()">Profil</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/logout}" sec:authorize="isAuthenticated()">Logout</a>
+						</li>
+					</ul>
 				</div>
 			</div>
-		<br/>
 		</nav>
 	</body>
 </html>
diff --git a/src/main/resources/templates/orders.html b/src/main/resources/templates/orders.html
index 3fda4fb..515f9e1 100644
--- a/src/main/resources/templates/orders.html
+++ b/src/main/resources/templates/orders.html
@@ -4,15 +4,15 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Bestellungen')}">
 	<body>
-		<section layout:fragment="content">
+		<div layout:fragment="content">
 			<div>    <!--th:unless"${cart.empty}"-->
-				<table style="width:100%; text-align:left">
+				<table class="table">
 					<tr>
-						<th style="width:10%">Von</th>
-						<th style="width:10%">Bis</th>
-						<th style="width:15%">Kunde</th>
-						<th style="width:30%">Produktdetails</th>
-						<th style="width:10%">Rechnung</th>
+						<th>Von</th>
+						<th>Bis</th>
+						<th>Kunde</th>
+						<th>Produktdetails</th>
+						<th>Rechnung</th>
 						<th>Bezahlt</th>
 						<th>Preis</th>
 						<th></th>
@@ -45,7 +45,7 @@
 						<td sec:authorize="hasRole('ADMIN')">
 							<form method="post" th:action="@{/orders/remove}">
 								<input type="hidden" name="orderID" value="0" th:value="${order.getId()}"/>
-								<input type="submit" value="remove" th:value="Entfernen"/>
+								<input class="btn btn-danger" type="submit" value="remove" th:value="Entfernen"/>
 							</form>
 						</td>
 					</tr>
@@ -56,6 +56,6 @@
 				<th:block th:text="${total}"/>
 				<th:block th:text=" Aufträge"/>
 			</span>
-		</section>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/orders_calender.html b/src/main/resources/templates/orders_calender.html
index 53df363..0ad20c9 100644
--- a/src/main/resources/templates/orders_calender.html
+++ b/src/main/resources/templates/orders_calender.html
@@ -4,24 +4,10 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Kalender')}">
 	<head>
-		<style>
-			table {
-				border-collapse: collapse;
-				background: white;
-				color: black;
-			}
-
-			th,
-			td {
-				font-weight: bold;
-			}
-		</style>
 	</head>
 	<body>
-		<section layout:fragment="content">
-<!--			class="ui celled table"-->
-			<table bgcolor="lightgrey" align="center"
-				cellspacing="21" cellpadding="21">
+		<div layout:fragment="content">
+			<table class="calendar bg-secondary-subtle">
 
 				<!-- The tr tag is used to enter
 					rows in the table -->
@@ -47,7 +33,7 @@
 					<tr>
 						<!-- Here we have applied inline style
 							to make it more attractive-->
-						<th th:each="dayName : ${dayNames}" style="color: white; background: purple;"
+						<th th:each="dayName : ${dayNames}" class="bg-primary"
 						>
 							<div
 								class="header"
@@ -80,7 +66,7 @@
 					</tr>
 				</tbody>
 			</table>
-		</section>
+		</div>
 	</body>
 </html>
 <!--th:href="@{/orders/{id}(id=${day.id})}"-->
diff --git a/src/main/resources/templates/profile.html b/src/main/resources/templates/profile.html
index e640a83..a050fa1 100644
--- a/src/main/resources/templates/profile.html
+++ b/src/main/resources/templates/profile.html
@@ -4,41 +4,40 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Profil')}">
 	<head>
-		<link rel="stylesheet" th:href="@{/resources/css/profile/style.css}" />
 		<title th:text="#{profile.title}" />
 	</head>
 	<body>
-		<section layout:fragment="content">
-			<form th:action="@{/profile}" method="post" >
-				<h1 th:text="#{profile.title}"></h1>
-				<h2 class="settings" th:text="#{profile.authentification}"></h2>
-				<table>
-					<tr>
-						<td th:text="#{profile.username}"></td>
-						<td><input name="username" th:value="${user.username}" type="text"/></td>
-					</tr>
-					<tr>
-						<td th:text="#{profile.password}"></td>
-						<td><input name="password" type="password"/></td>
-					</tr>
-				</table>
-				<h2 class="settings" th:text="#{profile.userinformation}"></h2>
-				<table>
-					<tr>
-						<td th:text="#{profile.address}"></td>
-						<td><input name="address" th:value="${user.address}" type="text"/></td>
-					</tr>
-				</table>
-				<div class="danger_zone">
-					<h1 class="danger_zone" th:text="#{profile.danger_zone}"></h1>
-					<div class="horizontal_center">
-						<button class="danger_zone" th:text="#{profile.edit}" type="submit"></button>
-						<a th:href="@{/profile/disable}">
-							<button th:if="${user.hasRole('CUSTOMER')}" class="danger_zone" th:text="#{profile.delete}" type="button"></button>
-						</a>
+		<div layout:fragment="content">
+			<div class="mb-4">
+				<form th:action="@{/profile}" method="post">
+					<h2 th:text="#{profile.authentification}"></h2>
+					<div class="mb-3">
+						<label class="form-label" for="username" th:text="#{profile.username}"></label>
+						<input class="form-control" name="username" th:value="${user.username}" type="text">
 					</div>
+					<div class="mb-3">
+						<label class="form-label" for="password" th:text="#{profile.password}"></label>
+						<input class="form-control" name="password" type="password">
+					</div>
+
+					<h2 th:text="#{profile.userinformation}"></h2>
+					<div class="mb-3">
+						<label class="form-label" for="address" th:text="#{profile.address}"></label>
+						<input class="form-control" name="address" th:value="${user.address}" type="text">
+					</div>
+
+					<button class="btn btn-primary" th:text="#{profile.edit}" type="submit"></button>
+				</form>
+			</div>
+
+			<div th:if="${user.hasRole('CUSTOMER')}" class="card">
+				<div class="card-header text-danger" th:text="#{profile.danger_zone}"></div>
+				<div class="card-body">
+					<a th:href="@{/profile/disable}">
+						<button class="btn btn-danger" th:text="#{profile.delete}" type="button"></button>
+					</a>
 				</div>
-			</form>
-		</section>
+			</div>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/register.html b/src/main/resources/templates/register.html
index cc285db..340b0c6 100644
--- a/src/main/resources/templates/register.html
+++ b/src/main/resources/templates/register.html
@@ -4,40 +4,21 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Registrierung')}">
 
-	<section layout:fragment="content">
-		<form method="post" role="form" class="ui form" id="form" th:action="@{/register}">
-
-			<div class="field">
-
-				<label for="username">Nutzername</label>
-
-				<input id="username" name="username" type="text" required="required">
-
+	<div layout:fragment="content">
+		<form method="post" th:action="@{/register}">
+			<div class="mb-3">
+				<label class="form-label" for="username">Nutzername</label>
+				<input class="form-control" name="username" type="text" required>
 			</div>
-
-			<div class="field">
-
-				<label for="password">Passwort</label>
-
-				<input id="password" name="password" type="password"
-					required="required">
+			<div class="mb-3">
+				<label class="form-label" for="password">Passwort</label>
+				<input class="form-control" name="password" type="password" required>
 			</div>
-
-			<div class="field">
-
-				<label for="address">Adresse</label>
-
-				<input id="address" name="address" type="text"><!-- FIXME: Address should be required!-->
-
+			<div class="mb-3">
+				<label class="form-label" for="address">Adresse</label>
+				<input class="form-control" name="address" type="text" required>
 			</div>
-
-			<div>
-
-				<button type="submit" class="ui button">Registrieren</button>
-
-			</div>
-
+			<button type="submit" class="btn btn-primary">Registrieren</button>
 		</form>
-	</section>
-
+	</div>
 </html>
diff --git a/src/main/resources/templates/staff.html b/src/main/resources/templates/staff.html
index d012cf0..ccb3c71 100644
--- a/src/main/resources/templates/staff.html
+++ b/src/main/resources/templates/staff.html
@@ -4,19 +4,20 @@
 	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 	layout:decorate="~{layout.html(title='Angestellte')}">
 	<head>
-		<link rel="stylesheet" th:href="@{/resources/css/staff/style.css}" />
 		<title th:text="${title}"></title>
 	</head>
 	<body>
-		<section layout:fragment="content">
-			<div class="verwaltung">
+		<div layout:fragment="content">
+			<div>
 				<h2>Mitarbeiterdetails</h2>
-				<table>
+				<table class="table">
 					<tr>
 						<th>ID</th>
 						<th>Nachname</th>
 						<th>Vorname</th>
 						<th>Beruf</th>
+						<th></th>
+						<th></th>
 					</tr>
 
 					<tr th:each="staff : ${staffs}">
@@ -25,34 +26,35 @@
 						<td th:text="${staff.name}">Max</td>
 						<td th:text="${staff.job}">Koch</td>
 						<td>
-							<a th:href="@{'/staff/edit/' + ${staff.id}}" class="button"
-							>Bearbeiten</a
-							>
+							<a th:href="@{'/staff/edit/' + ${staff.id}}"><button class="btn btn-warning">Bearbeiten</button></a>
 						</td>
 						<td>
 							<form th:action="@{/staff/remove}" method="post">
 								<input type="hidden" th:name="staffID" th:value="${staff.id}" />
-								<button type="submit" class="delete-icon">Entfernen</button>
+								<button type="submit" class="btn btn-danger">Entfernen</button>
 							</form>
 						</td>
 					</tr>
 				</table>
 			</div>
-			<div class="add-staff-form">
+			<div>
 				<h2>Personal Hinzufügen</h2>
 				<form action="/staff/add" method="post">
-					<label for="name">Name:</label>
-					<input type="text" id="name" name="name" required />
-
-					<label for="surname">Nachname:</label>
-					<input type="text" id="surname" name="surname" required />
-
-					<label for="job">Beruf:</label>
-					<input type="text" id="job" name="job" required />
-
-					<button type="submit">Hinzufügen</button>
+					<div class="mb-3">
+						<label class="form-label" for="name">Name</label>
+						<input class="form-control" type="text" name="name" required />
+					</div>
+					<div class="mb-3">
+						<label class="form-label" for="surname">Nachname</label>
+						<input class="form-control" type="text" name="surname" required />
+					</div>
+					<div class="mb-3">
+						<label class="form-label" for="job">Beruf</label>
+						<input class="form-control" type="text" name="job" required />
+					</div>
+					<button class="btn btn-primary" type="submit">Hinzufügen</button>
 				</form>
 			</div>
-		</section>
+		</div>
 	</body>
 </html>
diff --git a/src/main/resources/templates/welcome.html b/src/main/resources/templates/welcome.html
index 2e94107..5a6093e 100644
--- a/src/main/resources/templates/welcome.html
+++ b/src/main/resources/templates/welcome.html
@@ -5,16 +5,9 @@
 	layout:decorate="~{layout.html(title='Wilkommen bei Wurst’s Catering')}">
 
 	<body>
-		<section layout:fragment="content">
+		<div layout:fragment="content">
 			<p>Hier bekommen Sie übrigens nicht nur Wurst.</p>
 			<p>Test: (äöüß)</p>
-		</section>
+		</div>
 	</body>
-
-	<footer style="bottom: 0; position: absolute;">
-		<p>© Hannes Wurst @ Mampf GmbH</p>
-		<p>
-			<a href="mailto:catering@mampf.com">catering@mampf.com</a>
-		</p>
-	</footer>
 </html>