diff --git a/schickmacher/static/css/render.css b/schickmacher/static/css/render.css
index adc68fa..3c55fc7 100644
--- a/schickmacher/static/css/render.css
+++ b/schickmacher/static/css/render.css
@@ -1,3 +1,59 @@
-h1 {
-  color: red;
+@page {
+  size: A4;
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #333;
+  font-size: 15px;
+  margin: 70pt 60pt 70pt;
+}
+
+@page{
+  @bottom-right {
+    content: counter(page) " / " counter(pages);
+  }
+}
+body {
+  margin: 0;
+  font-family: 'Source Sans Pro', sans-serif;
+}
+.header {
+  width: 100%;
+  color: rgb(255, 105, 15);
+}
+.header h1 {
+  text-align: center;
+}
+.logo {
+  position: absolute;
+  top: -24pt;
+  right: -15pt;
+  max-height: 30pt;
+}
+.header-date {
+  padding-right: 30px;
+  text-align: right;
+}
+h1, h2, h3, h4,
+.h1, .h2, .h3 {
+  font-weight: bold;
+  break-after: avoid-page;
+  page-break-after: avoid;
+}
+
+body > div {
+  background-color: #fff;
+  padding-bottom: 15px;
+}
+
+.document {
+  padding-top: 10pt;
+}
+
+p {
+  page-break-inside: avoid;
+  orphans: 2;
+  widows: 2;
+}
+
+ul {
+  page-break-inside: avoid;
 }
diff --git a/schickmacher/static/images/favicons/favicon.ico b/schickmacher/static/images/favicons/favicon.ico
index e1c1dd1..a40e91d 100644
Binary files a/schickmacher/static/images/favicons/favicon.ico and b/schickmacher/static/images/favicons/favicon.ico differ
diff --git a/schickmacher/static/images/qabel-kl.png b/schickmacher/static/images/qabel-kl.png
new file mode 100644
index 0000000..5164222
Binary files /dev/null and b/schickmacher/static/images/qabel-kl.png differ
diff --git a/schickmacher/templates/renderer/render_form.html b/schickmacher/templates/renderer/render_form.html
index 3c2214a..cb7e8b0 100644
--- a/schickmacher/templates/renderer/render_form.html
+++ b/schickmacher/templates/renderer/render_form.html
@@ -9,13 +9,13 @@
 {% block content %}
   <h1>{% trans "Renderer" %}</h1>
   <form class="form-horizontal" method="post" action="{% url 'renderer:render' %}">
-      {% csrf_token %}
-      {{ form|crispy }}
     <div class="control-group">
       <div class="controls">
         <button type="submit" class="btn btn-primary">{% trans "Compile" %}</button>
       </div>
     </div>
+      {% csrf_token %}
+      {{ form|crispy }}
   </form>
   {{ form.media }}
 {% endblock %}
diff --git a/schickmacher/templates/renderer/rendered.html b/schickmacher/templates/renderer/rendered.html
index ab7baf4..a8be7a9 100644
--- a/schickmacher/templates/renderer/rendered.html
+++ b/schickmacher/templates/renderer/rendered.html
@@ -4,11 +4,32 @@
     <meta charset="UTF-8">
     <title>{{ title }}</title>
     <link href="{% static 'css/render.css' %}" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
 </head>
+<style>
+@page{
+  @top-right {
+    content: "{{ date | date:'d.m.Y' }}";
+  }
+  @top-left {
+    content: "{{ title }}"
+  }
+  @top-right-corner {
+  }
+}
+</style>
 <body>
 
-{{ date | date:'d.m.Y' }}
-{{ content | safe }}
+<div class="container">
+  <img class="logo" alt="Qabel Logo" src="{% static '/images/qabel-kl.png' %}"/>
+  <div class="header">
+      <h1>{{ title }}</h1>
+  </div>
+  <div class="document">
+      {{ content | safe }}
+  </div>
+</div>
 
 </body>
 </html>
