diff --git a/static/style.css b/static/style.css
index 2cb0e8e..1b6fb79 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,27 +1,225 @@
+* {
+  box-sizing:border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
 body {
-	padding: 0;
-	margin: 0;
-	background: #ffffff;
+    text-size-adjust:100%
+    background-attachment: fixed;
+    background-color: #000000;
+    color: rgba(255, 255, 255, 0.75);
+    display: flex;
+    flex-direction: column;
+    min-height:100vh
+}
+
+main {
+  display: block
+}
+
+a {
+    color: #268bd2;
+    text-decoration:none
+}
+
+a:hover, a:focus {
+    text-decoration:underline
+}
+
+a strong {
+    color:inherit
+}
+
+h1, h2, h3, h4, h5, h6, .site-title {
+    color: #313131;
+    font-weight: 600;
+    line-height: 1.25;
+    margin-bottom: .5rem;
+    text-rendering:optimizeLegibility
 }
 
-.navbar {
-	background: #000000;
+h1 {
+    font-size:2rem
 }
 
-.nav-link,
-.navbar-brand {
-	color: #ffff;
-	cursor: pointer;
+h2 {
+    font-size: 1.5rem;
+    margin-top:1rem
 }
 
-.nav-link {
-	margin-right: 1em !important;
+#sidebar {
+    flex: 0 0 auto;
+    padding:2rem
 }
 
-.nav-link:hover {
-	color: #e70c0c;
+#sidebar .site-title {
+    font-family: 'Abril Fatface', serif;
+    font-size: 1.25rem;
+    font-weight: normal;
+    margin-bottom: .5rem;
+    margin-top:0
 }
 
-.navbar-collapse {
-	justify-content: flex-end;
+#sidebar nav {
+  display: flex;
+}
+
+#sidebar-nav-links {
+  flex-flow: column nowrap;
+}
+
+.content {
+    background: #fff;
+    color: #515151;
+    padding:2rem
+}
+
+.container {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction:column
+}
+
+.container > .content {
+    flex-grow: 1;
+    padding-bottom:4rem
+}
+
+.container > header {
+    background: transparent;
+    color: #fff;
+    margin:-1.5rem 2rem 2rem
+}
+
+.container > header h1, .container > header h2 {
+    color:inherit
+}
+
+.home #sidebar {
+    text-align:center
+}
+
+.home #sidebar .site-title {
+    font-size:3.25rem
+}
+
+.home #sidebar header ~ nav {
+    display:flex
+}
+
+.home #sidebar > * :last-child {
+    margin-bottom:0.5rem
+}
+
+@media (min-width: 49rem) {
+    body {
+        flex-direction: row;
+        min-height: 100vh;
+        -webkit-overflow-scrolling: touch;
+        overflow-y:auto
+    }
+
+    body > * {
+        -webkit-overflow-scrolling: touch;
+        overflow-y:auto
+    }
+
+    #sidebar, .home #sidebar {
+        text-align: left;
+        width:18rem
+    }
+
+    #sidebar > * :last-child, .home #sidebar > * :last-child {
+        margin-bottom:0
+    }
+
+    #sidebar {
+        position: fixed;
+        bottom: 0;
+        left:0
+    }
+
+    #sidebar .site-title {
+        font-size:3.25rem
+    }
+
+    #sidebar .site-title .back-arrow {
+        display:none
+    }
+
+    #sidebar p.lead, #sidebar header ~ * {
+        display:block
+    }
+
+    #sidebar header ~ nav {
+        display:flex
+    }
+
+    .index #sidebar {
+        margin-bottom:0
+    }
+
+    .container {
+        background: #fff;
+        color: #515151;
+        min-height: 100vh;
+        padding: 4rem 4rem 0;
+        margin-left:18rem
+    }
+
+    .container > header {
+        color: #313131;
+        margin:0
+    }
+
+    .container > header h1, .container > header h2 {
+        color:inherit
+    }
+
+    .container > header h1:last-child, .container > header h2:last-child {
+        margin-bottom:.5rem
+    }
+
+    .container > * {
+        max-width: 38rem;
+        padding:0
+    }
+}
+
+#sidebar a {
+    color:#fff
+}
+
+#sidebar a:hover, #sidebar a:focus {
+    text-decoration:underline
+}
+
+@media screen and (max-width: 783px) {
+    .container > .content {
+        padding:1.5rem
+    }
+
+    #sidebar #sidebar-nav-links {
+        flex-direction: row;
+        justify-content:space-evenly
+    }
+
+    #sidebar #sidebar-nav-links a {
+        display: inline-block;
+        margin:0 .5em
+    }
+
+    .home.index #sidebar {
+        padding: 1rem
+    }
 }
diff --git a/templates/template.html b/templates/template.html
index 3ef017d..0994def 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -1,44 +1,43 @@
 <!DOCTYPE html>
-<head>
-  <title>F.D.G.L e. V.</title>
-  <meta charset="utf-8">
-  <!-- Bootstrap CSS file -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
-  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-</head>
-<body>
-  <nav class="navbar navbar-expand-md">
-    <a class="navbar-brand" href="/index.html"><img src="/static/logo.png" alt="logo"
-      height="100"></a>
-    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="main-navigation">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" href="/index.html">Home</a>
-        </li>                                                                           <li class="nav-item">
-          <a class="nav-link" href="/verein.html">Verein</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="/impressum.html">Impressum</a>
-        </li>
-      </ul>
+<html lang="de">
+  <head>
+    <!-- CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+  </head>
+  <body class=post>
+    <div id="sidebar">
+      <header>
+        <div class="site-title">
+          <a href="{{ url_for("index") }}">
+            <img src="{{ url_for('static', filename='logo.png') }}" alt="F.D.G.L." height="150"/>
+            F.D.G.L. e.V.
+          </a>
+        </div>
+      </header>
+      <nav id="sidebar-nav-links">
+        <a class="page-link" href="{{ url_for('verein') }}">Verein</a>
+        <a class="page-link" href="#">News</a>
+        <a class="page-link" href="{{ url_for('impressum') }}">Impressum</a>
+      </nav>
     </div>
-  </nav>
-  <header class="page-header header container-fluid">
-  </header>
-  <main>
-  {% block content %}
-  {% endblock %}
-  </main>
-  <footer class="page-footer">
-    <div class="footer-copyright text-center">&copy; F.D.G.L. e.V.</div>
-  </footer>
-  <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
-  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
-  <script src="{{ url_for('static', filename='main.js') }}"></script>
-</body>
+    <main class="container">
+      <header>
+        <h1 class="post-title">Lorem Ipsum</h1>
+      </header>
+      <div class="content">
+        <div class="post-body">
+          {% block content %}
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+          {% endblock content %}
+        </div>
+      </div>
+    </main>
+  </body>
+</html>