diff --git a/static/css/ab.css b/static/css/ab.css
index 6f6d9ba..3eb79b7 100644
--- a/static/css/ab.css
+++ b/static/css/ab.css
@@ -47,9 +47,13 @@ html, body {
     box-sizing: border-box;
     padding: 25px;
     border-radius: 10px;
+    border: 1px solid transparent;
     background-color: gold;
     color: #000000;
     font-weight: bold;
+    text-align:left;
+    font-family: 'Courier New', Courier, monospace;
+    cursor: pointer;
 }
 
 .b {
@@ -58,9 +62,30 @@ html, body {
     box-sizing: border-box;
     padding: 25px;
     border-radius: 10px;
+    border: 1px solid transparent;
     background-color: rgb(0, 0, 0);
     color: rgb(232, 230, 227);
     font-weight: bold;
+    text-align:left;
+    font-family: 'Courier New', Courier, monospace;
+    cursor: pointer;
+}
+
+input[type="radio"] {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    cursor: pointer;
+}
+
+.ab input:checked + label {
+    background-color: rgb(44, 116, 148);
+    border: 1px solid #000000;
+    color: #eeeeee;
 }
 
 .separator {
@@ -76,12 +101,35 @@ html, body {
 }
 
 #footer {
-    margin-top: 15px;
+    margin-top: 10px;
 }
 
 #questions {
     font-size: small;
     text-align: center;
+    width: 45%;
+    float: left;
+    border-radius: 10px;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    color: #eeeeee;
+    font-weight: bold;
+}
+
+#next {
+    text-align: center;
+    width: 45%;
+    float: left;
+    border: 0px;
+    border-radius: 10px;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    background-color: rgb(79, 86, 89);
+    color: #eeeeee;
+    font-weight: bold;
+    font-family: 'Courier New', Courier, monospace;
+    display: block;
+    cursor: pointer;
 }
 
 @media only screen and (max-width:480px) {
@@ -94,6 +142,16 @@ html, body {
         transform: translate(-50%);
         }
 
+    #next {
+        min-width: 95%;
+    }
+
+    #questions {
+        min-width: 95%;
+        padding-top: 0px;
+        padding-bottom: 5px;
+    }
+
     .a {
         font-size: small;
     }
diff --git a/templates/index.html b/templates/index.html
index ad229dd..18b5940 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,15 +16,21 @@
     <body>
         <div id="content">
             <div id="header">{{ title }}</div>
+            {% set id = namespace(value=0) %}
             {% for question in content %}
+                {% set id.value = id.value + 1 %}
                 <div class="ab">
-                    <div class="a">A) {{ question['A'] }}</div>
+                    <input type="radio" id="a{{ id.value }}" class="a" name="group-{{ id.value }}">
+                    <label for="a{{ id.value }}" class="a"> A) {{ question['A'] }}</label>
                     <div class="separator">{{ separator }}</div>
-                    <div class="b">B) {{ question['B'] }}</div>
+                    <input type="radio" id="b{{ id.value }}" class="b" name="group-{{ id.value }}">
+                    <label for="b{{ id.value }}" class="b">B) {{ question['B'] }}</label>
                 </div>
             {% endfor %}
             <div id="footer">
                 <div id="questions">Es gibt derzeit {{ num_lines }} Fragen.</div>
+                <div class="separator">&nbsp;</div>
+                <form action="/"><button id="next" type="submit">Neue Fragen</button></form>
             </div>
         </div>
     </body>
