diff --git a/input/static/css/base.css b/input/static/css/base.css
new file mode 100644
index 0000000..b476720
--- /dev/null
+++ b/input/static/css/base.css
@@ -0,0 +1,24 @@
+ul > li {
+    list-style-type: none;
+}
+
+ul {
+    padding-left: 10px;
+}
+
+label.required::after {
+    content: ' *';
+    color: red;
+}
+
+.spacer-15 {
+    height: 15%;
+}
+
+.spacer-5 {
+    height: 5%;
+}
+
+.page-centered {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/input/static/css/button.css b/input/static/css/button.css
new file mode 100644
index 0000000..a954671
--- /dev/null
+++ b/input/static/css/button.css
@@ -0,0 +1,23 @@
+.page-centered .button-login {
+    width: 40vw;
+    height: 6vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 4vh;
+    margin: 0 auto;
+    background-color: #79AEC8;
+    color: #000000;
+    text-decoration: none;
+    padding: 10px 15px;
+}
+
+.page-centered .button-login:hover {
+    background-color: #659DB8;
+}
+
+.page-centered .button-login:focus-visible {
+    outline: 2px solid #000;
+    outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/input/templates/input/index.html b/input/templates/input/index.html
index 3c2a9f3..308d04c 100755
--- a/input/templates/input/index.html
+++ b/input/templates/input/index.html
@@ -1,69 +1,38 @@
-{% load static  %}
-
-
-<link rel="stylesheet" type="text/css" href="{% static 'admin/css/base.css' %}" />
-<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}" />
-
-
+{% load static %}
 {% load i18n %}
 
-{% csrf_token %}
-
-
-<center>
-  <style>
-    ul > li {
-      list-style-type: none;
-    }
-    ul {
-      padding-left: 10;
-    }
-    label.required::after {
-      content: ' *';
-      color: red;
-    }
-    .div15 {
-      height: 15%;
-    }
-    .div5 {
-      height: 5%;
-    }
-    .button1 {
-      width: 40vw;
-      height: 6vh;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-weight: bold;
-      font-size: 4vh;
-    }
-      
-  </style>
-
-<div class="div5"></div>
-<p>
-Herzlich willkommen im Förderanfrageportal von Wikimedia Deutschland!
-</p>
-<div class="div5"></div>
-<!-- <a href="http://fdb-devel.wikimedia.de/extern"style="float:right;padding-right:10%;">OAUTH</a>
-<a href="http://fdb-devel.wikimedia.de/extern" style="float:left;padding-left:10%;">OAUTH</a> -->
-<p>
-<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Figuren_klein.jpg"><p>
-Um eine Unterstützungsleistung im Rahmen der Förderangebote anfragen zu können, verifiziere dich bitte mit deinem Wikimedia-Konto. 
-<br>Weitere Informationen und Hintergründe findest du unter
-<a href="https://de.wikipedia.org/wiki/Wikipedia:Förderung/Förderangebote">
-  Förderportal</a> in der deutschsprachigen Wikipedia.
-<p>
-<div class="div5"></div>
-<div class="button button1"><a href="/extern"><div class="button1_text">Anmelden</div></a></div>
-<div class="div5"></div>
-<div class="div5"></div>
-<br>Für alle Fragen wende dich gern an das <a href="https://de.wikipedia.org/wiki/Wikipedia:Förderung/Wikimedia_Deutschland">Team Communitys und Engagement</a>.
-<br>Für interessierte Hacker gibts auch den <a href="https://srcsrv.wikimedia.de/beba/foerderbarometer">Sourcecode</a> zum Formular und was damit passiert.
-<p>
-  <a href="https://www.wikimedia.de/impressum/">Impressum</a>
-<p>
-</center>
-
+<link rel="stylesheet" type="text/css" href="{% static 'admin/css/base.css' %}"/>
+<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}"/>
+<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>
+<link rel="stylesheet" type="text/css" href="{% static 'css/button.css' %}">
 
+<div class="page-centered">
+    <div class="spacer-5"></div>
+    <p role="heading" aria-level="1">
+        Herzlich willkommen im Förderanfrageportal von Wikimedia Deutschland!
+    </p>
+    <div class="spacer-5"></div>
+    <p>
+        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Figuren_klein.jpg">
+    </p>
+    <p>
+        Um eine Unterstützungsleistung im Rahmen der Förderangebote anfragen zu können, verifiziere dich bitte mit
+        deinem Wikimedia-Konto.
+        <br>Weitere Informationen und Hintergründe findest du unter
+        <a href="https://de.wikipedia.org/wiki/Wikipedia:Förderung/Förderangebote">
+            Förderportal</a> in der deutschsprachigen Wikipedia.
+    </p>
+    <div class="spacer-5"></div>
+    <a href="/extern" class="button button-login">Anmelden</a>
+    <div class="spacer-5"></div>
+    <div class="spacer-5"></div>
+    <br>Für alle Fragen wende dich gern an das <a
+        href="https://de.wikipedia.org/wiki/Wikipedia:Förderung/Wikimedia_Deutschland">Team Communitys und
+    Engagement</a>.
+    <br>Für interessierte Hacker gibts auch den <a
+        href="https://srcsrv.wikimedia.de/beba/foerderbarometer">Sourcecode</a> zum Formular und was damit passiert.
+    <p>
+        <a href="https://www.wikimedia.de/impressum/">Impressum</a>
+    </p>
+</div>