diff --git a/src/main/resources/messages_de.properties b/src/main/resources/messages_de.properties
index 0d4a959..653d377 100644
--- a/src/main/resources/messages_de.properties
+++ b/src/main/resources/messages_de.properties
@@ -1,4 +1,4 @@
-﻿# ATTENTION:
+# ATTENTION:
 # Spring Boot expects this file to be UTF-8 encoded 👍 However, some IDEs will open it in
 # the wrong mode. For example, IntelliJ users must go to Preferences > Editor > File Encodings
 # and set "Default encoding for properties files" to "UTF-8".
@@ -7,3 +7,11 @@
 
 welcome.title = Willkommen zurück!
 welcome.text = Wenn Umlaute (äöü) falsch dargestellt werden, ist irgendwas kaputt
+
+nav.register=Registrierung
+nav.login=Login
+nav.inventory=Inventar
+nav.employee=Angestellte
+nav.customer=Kunden
+nav.orders=Bestellungen
+nav.orders.calender=Kalender
diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
index 5c2be64..b0aa556 100644
--- a/src/main/resources/messages_en.properties
+++ b/src/main/resources/messages_en.properties
@@ -1,6 +1,14 @@
-﻿# ATTENTION:
+# ATTENTION:
 # Spring Boot expects this file to be UTF-8 encoded 👍 However, some IDEs will open it in
 # the wrong mode. For example, IntelliJ users must go to Preferences > Editor > File Encodings
 # and set "Default encoding for properties files" to "UTF-8".
 #
 # HINT: Entries that are missing here are looked up in messages.properties
+
+nav.register=Register
+nav.login=Login
+nav.inventory=Inventory
+nav.employee=Employee
+nav.customer=Customer
+nav.orders=Orders
+nav.orders.calender=Calender
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
new file mode 100644
index 0000000..6d1e688
--- /dev/null
+++ b/src/main/resources/templates/layout.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org"
+	xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+
+		<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 class="ui container">
+			<header>
+				<h1 th:text="${#strings.isEmpty(title)} ? #{home.title} : ${title}">Catering</h1>
+			</header>
+			<nav th:include="navigation :: navigation"></nav>
+			<section layout:fragment="content"></section>
+		</div>
+	</body>
+</html>
diff --git a/src/main/resources/templates/navigation.html b/src/main/resources/templates/navigation.html
new file mode 100644
index 0000000..facd503
--- /dev/null
+++ b/src/main/resources/templates/navigation.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org"
+	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+	<head>
+	</head>
+	<body>
+		<nav th:fragment="navigation">
+			<div class="ui menu">
+
+
+				<!--prototype-paul-simon-->
+				<a
+					class="item"
+					href="register.html"
+					th:href="@{/register}"
+					sec:authorize="hasRole('CUSTOMER')"
+					th:text="#{nav.register}"
+				>
+					Registrierung
+				</a>
+
+				<a
+					class="item"
+					href="login.html"
+					th:href="@{/login}"
+					sec:authorize="hasAnyRole('BOSS','CUSTOMER')"
+					th:text="#{nav.login}"
+				>
+					Login
+				</a>
+
+				<a
+					class="item"
+					href="inventory.html"
+					th:href="@{/inventory}"
+					sec:authorize="hasRole('BOSS')"
+					th:text="#{nav.inventory}"
+				>
+					Inventar
+				</a>
+
+
+				<!--prototype-eren-denis-->
+				<a
+					class="item"
+					href="employee.html"
+					th:href="@{/employee}"
+					sec:authorize="hasRole('BOSS')"
+					th:text="#{nav.employee}"
+				>
+					Angestellte
+				</a>
+
+				<a
+					class="item"
+					href="customer.html"
+					th:href="@{/customer}"
+					sec:authorize="hasRole('BOSS')"
+					th:text="#{nav.customer}"
+				>
+					Kunden
+				</a>
+
+				<a
+					class="item"
+					href="profile.html"
+					th:href="@{/profile}"
+					sec:authorize="hasAnyRole('BOSS','CUSTOMER')"
+					th:text="#{nav.profile}"
+				>
+					Registrierung
+				</a>
+
+
+				<!--prototype-eric-mathis-->
+				<a
+					class="item"
+					href="orders.html"
+					th:href="@{/orders}"
+					sec:authorize="hasAnyRole('BOSS','CUSTOMER')"
+					th:text="#{nav.orders}"
+				>
+					Bestellungen
+				</a>
+
+				<a
+					class="item"
+					href="event.html"
+					th:href="@{/event}"
+					sec:authorize="hasAnyRole('BOSS','CUSTOMER')"
+					th:text="#{nav.event}"
+				>
+					Events
+				</a>
+
+				<!--prototpye-theo-->
+				<a
+					class="item"
+					href="orders.calender.html"
+					th:href="@{/orders/calender}"
+					sec:authorize="hasRole('BOSS')"
+					th:text="#{nav.orders.calender}"
+				>
+					Kalender der Bestellungen
+				</a>
+
+				<div class="right menu">
+					<a class="item" th:href="@{/login}" sec:authorize="isAuthenticated()" th:text="#{nav.login}">Login</a>
+					<form class="item" sec:authorize="isAuthenticated()" th:action="@{/logout}" method="post">
+						<button type="submit" class="ui button" th:text="#{nav.logout}">Logout</button>
+					</form>
+				</div>
+			</div>
+			<br/>
+		</nav>
+	</body>
+</html>
