diff --git a/src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/main.scss b/src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/main.scss
new file mode 100644
index 0000000..b4dd9dd
--- /dev/null
+++ b/src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/main.scss
@@ -0,0 +1,37 @@
+body {
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+header {
+  top: 0;
+}
+
+header .ui.grid > .column, .title.ui.grid > .column {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.box h2 {
+  font-size: 1rem !important;
+}
+
+a .icon {
+  text-decoration: none;
+}
+
+a, a:hover, a:visited {
+  color: #000000;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+#mission-statement {
+  overflow: hidden;
+
+  img {
+    margin-bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/Hackspace/Bundle/CalciferBundle/Resources/assets/images/logo.png b/src/Hackspace/Bundle/CalciferBundle/Resources/assets/images/logo.png
new file mode 100644
index 0000000..a377dab
Binary files /dev/null and b/src/Hackspace/Bundle/CalciferBundle/Resources/assets/images/logo.png differ
diff --git a/src/Hackspace/Bundle/CalciferBundle/Resources/views/layout.html.twig b/src/Hackspace/Bundle/CalciferBundle/Resources/views/layout.html.twig
index 5850fde..5f8f997 100755
--- a/src/Hackspace/Bundle/CalciferBundle/Resources/views/layout.html.twig
+++ b/src/Hackspace/Bundle/CalciferBundle/Resources/views/layout.html.twig
@@ -5,9 +5,14 @@
     <title>{% block title %}Terminverwaltung Calcifer{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap -->
-    <link href="{{ asset('css/semantic.css') }}" rel="stylesheet" media="screen">
     <link href='//fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
-    <link href="{{ asset('css/custom.css') }}" rel="stylesheet" media="screen">
+    {% stylesheets filter="compass"
+        "@CalciferBundle/Resources/assets/css/main.scss"
+        "css/semantic.scss"
+        "css/custom.scss"
+    %}
+    <link rel="stylesheet" href="{{ asset_url }}" media="screen" />
+    {% endstylesheets %}
     {% block css %}
 
     {% endblock %}
@@ -17,6 +22,21 @@
 <body>
 {% include "CalciferBundle::navigation.html.twig" %}
 
+<div class="ui one column page grid">
+    <div class="column">
+        <div id="mission-statement" class="ui message green">
+            {% image '@CalciferBundle/Resources/assets/images/logo.png' %}
+            <img
+                    title="Eine Zeichnung von Calcifer. Gezeichnet von simply-Sylvan (http://simply-sylvan.deviantart.com/art/Calcifer-Purple-176746086)"
+                    alt="Eine Zeichnung von Calcifer. Gezeichnet von simply-Sylvan (http://simply-sylvan.deviantart.com/art/Calcifer-Purple-176746086)"
+                    src="{{ asset_url }}"
+                    class="ui image small floated left" />
+            {% endimage %}
+            <p>Calcifer ist ein Daemon aus dem Anime <a href="http://anidb.net/perl-bin/animedb.pl?show=anime&amp;aid=1218">„Das wandelnde Schloss“</a>, der sich darum kümmert das sich Howls Schloss weiter bewegt. Diese Terminverwaltung soll dafür sorgen das sich der <a href="https://www.krautspace.de/">Hackspace Jena</a> auch weiter bewegt und viele tolle Termine statfinden.</p>
+        </div>
+    </div>
+</div>
+
 <div id="main" class="segment">
     {% block body %}{% endblock %}
 </div>
diff --git a/web/css/custom.css b/web/css/custom.css
deleted file mode 100755
index eeefcc3..0000000
--- a/web/css/custom.css
+++ /dev/null
@@ -1,33 +0,0 @@
-body {
-    margin: 0;
-    font-family: 'Roboto', sans-serif;
-}
-
-header {
-    top: 0;
-}
-
-header .ui.grid > .column, .title.ui.grid > .column {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.box h2 {
-    font-size: 1rem !important;
-}
-
-#main {
-    margin-top: 4rem;
-}
-
-a .icon {
-    text-decoration: none;
-}
-
-a, a:hover, a:visited {
-    color: #000000;
-}
-
-a:hover {
-    text-decoration: none;
-}
\ No newline at end of file
diff --git a/web/css/custom.scss b/web/css/custom.scss
new file mode 100644
index 0000000..e69de29
diff --git a/web/css/semantic.css b/web/css/semantic.scss
old mode 100755
new mode 100644
similarity index 100%
rename from web/css/semantic.css
rename to web/css/semantic.scss
