diff --git a/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/base.css b/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/base.css
new file mode 100644
index 0000000..2e7fcc4
--- /dev/null
+++ b/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/base.css
@@ -0,0 +1,132 @@
+body,html{
+    font-size: 16px;
+    line-height: 29px;
+    color:#0c1a30;
+    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
+    margin: 0;
+}
+
+#content {
+    width: 80%;
+    margin: 0 auto;
+    overflow:hidden;
+    position: relative;
+}
+
+h1 {
+    font-size: 22px;
+}
+
+h2{
+    font-size: 22px;
+}
+
+h3 a:link, h3 a:visited, h2 a:link, h2 a:visited {
+    color: #58ab27;
+}
+
+h3 {
+    font-size: 19px;
+}
+
+h4 {
+    font-size: 17px;
+}
+
+h1,h2,h3,h4{
+    color: #58ab27;
+    font-weight: normal;
+    text-shadow: #fff 0px 1px 1px;
+    letter-spacing:0.1em;
+}
+
+a {
+    color: #58ab27;
+    text-decoration: none;
+    outline: 0;
+}
+
+a:hover, a:focus {
+    color: #386d19;
+    text-decoration: none;
+    outline: 0;
+}
+
+div.navbar-header {
+    width: 83%;
+    margin: 0 auto;
+    overflow:hidden;
+    position: relative;
+}
+
+ul.navbar {
+    float: right;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.navbar > li {
+    float: left;
+    position: relative;
+    display: block;
+}
+
+a.navbar-brand {
+    line-height: 120px;
+    display: inline-block;
+    height: 120px;
+    opacity: 1;
+    padding: 23px 23px;
+    transition: opacity 0.15s linear;
+}
+
+a.navbar-brand:hover {
+    opacity: 0.8;
+    transition: opacity 0.15s linear;
+}
+
+.navbar > li a {
+    display: inline-block;
+    color: #777777;
+    text-align: center;
+    text-transform: uppercase;
+    padding: 16px;
+    line-height: 120px;
+}
+
+.navbar > li a:hover {
+    color: #333333;
+}
+
+.navbar > li a:before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 5px;
+    top: 0;
+    left: 0;
+    background-color: #58ab27;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s linear;
+}
+
+.navbar > li a:hover:before {
+    visibility: visible;
+    opacity: 0.5;
+    transition: opacity 0.3s linear;
+}
+
+.navbar > li.current a:before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 5px;
+    top: 0;
+    left: 0;
+    background-color: #58ab27;
+    visibility: visible;
+    opacity: 1;
+}
diff --git a/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/img/favicon.ico b/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/img/favicon.ico
new file mode 100644
index 0000000..df58720
Binary files /dev/null and b/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/img/favicon.ico differ
diff --git a/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/img/logo_dav.png b/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/img/logo_dav.png
new file mode 100644
index 0000000..893d9cc
Binary files /dev/null and b/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/img/logo_dav.png differ
diff --git a/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/termine.css b/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/termine.css
new file mode 100644
index 0000000..4783592
--- /dev/null
+++ b/jdav_web/ludwigsburgalpin/static/ludwigsburgalpin/termine.css
@@ -0,0 +1,9 @@
+table.termine {
+    text-align: left;
+}
+
+td {
+    padding-left: 50px;
+    display: block;
+    float: left;
+}
diff --git a/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/base.html b/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/base.html
new file mode 100644
index 0000000..4b6d484
--- /dev/null
+++ b/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/base.html
@@ -0,0 +1,47 @@
+{% load i18n %}
+{% load static %}
+<html>
+
+<head>
+	<title>
+		Ludwigsburg Alpin Terminverwaltung
+	</title>
+    <link rel="shortcut icon" href="{% static "ludwigsburgalpin/img/favicon.ico" %}" type="image/x-icon">
+    <link rel="stylesheet" href="{% static "ludwigsburgalpin/base.css" %}">
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script>
+    $( function() {
+        $( ".datepicker" ).datepicker({
+          dateFormat: "dd.mm.yy" 
+        });
+    } );
+    </script>
+</head>
+
+<body>
+
+<div class="navbar-header">
+    <a class="navbar-brand" href="http://www.alpenverein-ludwigsburg.de"> 
+        <img class="navbar-logo" src="{% static "ludwigsburgalpin/img/logo_dav.png" %}">
+    </a>
+    <ul class="navbar">
+
+        <li><a href="/">Jugendgruppen</a></li>
+        <li class="current"><a href="/ludwigsburgalpin">Ludwigsburg Alpin</a></li>
+        <li><a href="/kompass">Kompass</a></li>
+
+    </ul>
+</div>
+
+<div id=content>
+
+    {% block content %}
+    {% endblock %}
+
+</div>
+
+</body>
+
+</html>
diff --git a/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/published.html b/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/published.html
index d757994..ac9152e 100644
--- a/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/published.html
+++ b/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/published.html
@@ -1,3 +1,7 @@
+{% extends "ludwigsburgalpin/base.html" %}
+
+{% block content %}
 <p><b>Termin erfolgreich eingereicht</b></p>
 
 <p><a href="/ludwigsburgalpin">Hier</a> kannst du einen neuen Termin hinzufügen.</p>
+{% endblock %}
diff --git a/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/termine.html b/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/termine.html
index 45a1efe..24008dd 100644
--- a/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/termine.html
+++ b/jdav_web/ludwigsburgalpin/templates/ludwigsburgalpin/termine.html
@@ -1,31 +1,25 @@
+{% extends "ludwigsburgalpin/base.html" %}
 {% load i18n %}
+{% load static %}
 
-<head>
-	<title>
-		Ludwigsburg Alpin Terminverwaltung
-	</title>
-  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
-  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
-  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-  <script>
-  $( function() {
-      $( ".datepicker" ).datepicker({
-        dateFormat: "dd.mm.yy" 
-      });
-  } );
-  </script>
-</head>
+{% block content %}
 
-<p><b>Hier kannst Du Deinen Termin eintragen, pass bitte auf, weil danach kannst Du ihn nicht mehr ändern</b></p>
+<link rel="stylesheet" href="{% static "ludwigsburgalpin/termine.css" static %}">
+
+<h1>Ludwigsburg Alpin Termine</h1>
+
+<p>Hier kannst du einen Termin für deine Gruppe hinzufügen</p>
 
 {% if error_message %}
-	<p><b>{{ error_message }}</b></p>
+    <p><b>{{ error_message }}</b></p>
 {% endif %}
 
 <form action="" method="post">
-    <table>
-	{% csrf_token %}
+    <table class="termine">
+    {% csrf_token %}
     {{ form }}
-    <tr><td><input type="submit" value="Abschicken"/></td></tr>
     </table>
+    <p><input type="submit" value="Abschicken"/></p>
 </form>
+
+{% endblock %}
diff --git a/jdav_web/ludwigsburgalpin/views.py b/jdav_web/ludwigsburgalpin/views.py
index fae4527..93f19ca 100644
--- a/jdav_web/ludwigsburgalpin/views.py
+++ b/jdav_web/ludwigsburgalpin/views.py
@@ -10,7 +10,7 @@ datepicker = forms.TextInput(attrs={'class': 'datepicker'})
 
 
 class TerminForm(forms.Form):
-    title = forms.CharField(label='Termin')
+    title = forms.CharField(label='Titel')
     start_date = forms.DateField(label='Von',
                                  widget=datepicker)
     end_date = forms.DateField(label='Bis',
