diff --git a/css/custom.css b/css/custom.css
index 75d0e35..500fbea 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1,3 +1,59 @@
-.active {
+.activeWatch {
     background-color: lightgray;
+}
+
+h2 {
+    margin-left: 10px;
+    margin-top: 25px !important;
+}
+
+.table-bordered {
+    width: 100%;
+    table-layout: fixed;
+    text-align: center;
+    /*border: 1px solid #0e0017 !important;*/
+
+}
+
+button {
+    /*background-color: lightgray;*/
+    /*border: none;*/
+    /*color: white;*/
+    padding: 1% 5%;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    /*font-size: 16px;*/
+    border-radius: 20px;
+}
+
+button, .form-group{
+    margin: 5px !important;
+}
+
+input {
+    text-align: center;
+}
+
+.stopButton, .resetButton {
+    width: 98% !important;
+}
+
+.form-group {
+    width: 98%;
+}
+
+.tableHeader {
+    min-width: 100px;
+}
+
+footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 10.5rem;            /* Footer height */
+}
+.footer {
+    vertical-align: top;
+    text-align: left;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 20ab673..adc557c 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,42 @@
 <html lang="de">
     <head>
         <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="css/custom.css">
         <link rel="stylesheet" href="css/bootstrap.css">
         <title>Genderwatch-protocol</title>
 
     </head>
     <body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand" href="index.html">Genderwatch-protocol&nbsp;</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+        <div class="navbar-collapse collapse show" id="navbarSupportedContent">
+            <ul class="navbar-nav mr-auto">
+
+
+                <li class="nav-item active"> <a class="nav-link" href="index.html">Home</a> </li>
+
+                <li class="nav-item"> <a class="nav-link" href="beschreibung.php">Über uns</a> </li>
+
+
+            </ul>
+            <form class="form-inline my-2 my-lg-0">
+            </form>
+        </div>
+    </nav>
         <section>
             <div class="container">
                 <h1>Genderwatch-protocol</h1>
                 <a href="dataCollector/dataCollector.php">Alle Daten herunterladen (anonymisiert)</a>
-                <h2 style="margin-left: 10px;">Aktuelles Thema</h2>
+                <h2>Aktuelles Thema</h2>
                 <table class="table-bordered">
                     <tr>
                         <td colspan="2">
-                            <input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
+                            <div class="form-group">
+                                <input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
+                            </div>
                         </td>
                         <td>
                             <button class="" onclick="closeTopic()">
@@ -70,12 +91,12 @@
                     </tr>
                     <tr>
                         <td colspan="3">
-                            <button class="" style="width: 98%;" onclick="stop()">Hört auf zu Reden, -> Stille</button>
+                            <button class="stopButton" onclick="stop()">Hört auf zu Reden, -> Stille</button>
                         </td>
                     </tr>
                     <tr>
                         <td colspan="3">
-                            <button class="" style="width: 98%;" onclick="resetButton()">Reset</button>
+                            <button class="resetButton" onclick="resetButton()">Reset</button>
                         </td>
                     </tr>
                 </table>
@@ -91,16 +112,16 @@
                 <table class="table-bordered">
                     <thead>
                         <tr>
-                            <th style="min-width: 100px;">
+                            <th class="tableHeader">
                                 Thema
                             </th>
-                            <th style="min-width: 100px;">
+                            <th class="tableHeader">
                                 M
                             </th>
-                            <th style="min-width: 100px;">
+                            <th class="tableHeader">
                                 W
                             </th>
-                            <th style="min-width: 100px;">
+                            <th class="tableHeader">
                                 D
                             </th>
                         </tr>
@@ -116,6 +137,34 @@
             </div>
         </section>
 
+        <footer class="text-center">
+            <div class="container footer">
+                <div class="row">
+                    <table>
+                        <tr>
+                            <td class="footer">
+                                <div class="col-12">
+                                    <p><span><b>Impressum</b></span><br>
+                                        Maurus Pfalzgraf<br>
+                                        <a href="mailto:info@genderwatchprotocol.com">info@genderwatchprotocol.com</a></p>
+                                </div>
+                            </td>
+                            <td class="footer">
+                                <div class="col-12">
+                                    <p><span><b>Erstellt durch</b></span><br>
+                                        Silias KLG<br>
+                                        Toggenburgstrasse 31<br>
+                                        8245 Feuerthalen<br>
+                                        <a href="https://www.silias.ch" target="_blank">www.silias.ch</a><br>
+                                        <a href="mailto:info@silias.ch">info@silias.ch</a></p>
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+
+                </div>
+            </div>
+        </footer>
 
         <script src="js/functions.js"></script>
         <script>
diff --git a/js/functions.js b/js/functions.js
index 40719de..c2044aa 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -138,9 +138,9 @@ function refreshWatch(watchIndex) {
     let timeCell = document.getElementById("time-" + watchIndex)
     timeCell.textContent = timeToISO(sumForWatch(actualTopic.watches[watchIndex]))
     if(actualTopic.watches[watchIndex]["actions"].length !== 0 && actualTopic.watches[watchIndex]["actions"].slice(-1)[0]["type"] === "start"){
-        timeCell.classList.add("active")
+        timeCell.classList.add("activeWatch")
     } else {
-        timeCell.classList.remove("active")
+        timeCell.classList.remove("activeWatch")
     }
     let countCell = document.getElementById("count-" + watchIndex)
     countCell.textContent = countForWatch(actualTopic.watches[watchIndex]) + " Wortmeldungen"
