diff --git a/static/main.css b/static/main.css
index 7f71b68..61e228b 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,4 +1,59 @@
 html{
-    font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-    font-size:0.9em;
+    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+    font-size: 0.9em;
+}
+
+/* Navigation bar */
+nav{
+    background-color: #4C4C4C;
+}
+
+nav > ul{
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+nav > ul >li {
+    display: inline-block;
+    padding: 14px 16px;
+}
+
+.active{
+    background-color: white
+}
+
+/*Buttons*/
+.button{
+    background-color: #4CAF50;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    display: inline-box;
+}
+
+.button:hover {
+  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+}
+
+.btn-group button {
+  background-color: #4CAF50; /* Green background */
+  border: 1px solid green; /* Green border */
+  color: white; /* White text */
+  padding: 10px 24px; /* Some padding */
+  cursor: pointer; /* Pointer/hand icon */
+  width: 50%; /* Set a width if needed */
+  display: block; /* Make the buttons appear below each other */
+}
+
+.btn-group button:not(:last-child) {
+  border-bottom: none; /* Prevent double borders */
+}
+
+/* Add a background color on hover */
+.btn-group button:hover {
+  background-color: #3e8e41;
 }
diff --git a/templates/base.html b/templates/base.html
index 034e30b..ed08aa5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,9 +8,9 @@
     <body>
 	    <nav>
 	         	<ul>
-		        	<li><a href="{{ url_for('index') }}">Home</a></li>
-			        <li><a href="{{ url_for('form') }}">Questionnaire</a></li>
-		        	<li><a href="{{ url_for('answers') }}">My Answers</a></li>
+                            <li {% if request.path == url_for('index') %} class="active" {% endif %}><a href="{{ url_for('index') }}">Home</a></li>
+			        <li {% if request.path == url_for('form') %} class="active" {% endif %}><a href="{{ url_for('form') }}">Questionnaire</a></li>
+		        	<li {% if request.path == url_for('answers') %} class="active" {% endif %}><a href="{{ url_for('answers') }}">My Answers</a></li>
 		       </ul>
 	    </nav>
             {% block content %}
diff --git a/templates/index.html b/templates/index.html
index 16c6d82..5beacb7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,10 +1,13 @@
 {% extends "base.html" %}
         {% block content %}
-	<div>
-		<ul>
-			<li><a href="{{ url_for('form') }}">Jetzt mitspielen</a></li>
-			<li><a href="{{ url_for('answers') }}">Hier geht's zu deinen Antworten</a></li>
-			<li><a href="{{ url_for('solution') }}">Lösung einreichen</a></li>
-		</ul>
+        <h1> Fooboars EET-Spiel </h1>
+        <h2> Wie funktioniert das Spiel? </h2>
+        <div> Anleitung leitet an. Oder erklärt die erklärt die Erklärung? Das ist alles gar nicht so schwer und überhaupt wollt ihr da alle mitmachen, weil es bestimmt Wildschweine gibt. Und wer will die nicht sehen?
+            Kein Alkohol mehr.
+        </div>
+        <div class="btn-group">
+                <a href="{{ url_for('form') }}"><button>Jetzt mitspielen</button></a>
+                <a href="{{ url_for('answers') }}"><button>Hier geht's zu deinen Antworten</button></a>
+		<a href="{{ url_for('solution') }}"><button>Lösung einreichen</button></a>
 	</div>
         {% endblock %}
