diff --git a/src/Home/App.svelte b/src/Home/App.svelte
index 9a23f03..0e90ae8 100644
--- a/src/Home/App.svelte
+++ b/src/Home/App.svelte
@@ -1,37 +1,44 @@
 <style>
-   .main {
-      padding: 2rem;
-   }
+  .main {
+    padding: 2rem;
+  }
 
-   li {
-      list-style: none;
-      padding: 1rem;
-   }
+  li {
+    list-style: none;
+    padding: 1rem;
+  }
 
-   li>a {
-      text-decoration: none;
-   }
+  li > a {
+    text-decoration: none;
+  }
 </style>
 
 <div class="main">
-   <h1>Home Page</h1>
+  <h1>Home Page</h1>
 
-   <h2>About</h2>
-   <p>
-      OpenAuth is a Service to provide simple Authentication to a veriaty of Applications.
-      With a simple to use API and different Strategies, it can be easily integrated
-      into most Applications.
-   </p>
+  <h2>About</h2>
+  <p>
+    OpenAuth is a Service to provide simple Authentication to a veriaty of
+    Applications. With a simple to use API and different Strategies, it can be
+    easily integrated into most Applications.
+  </p>
 
-   <h2>QickLinks</h2>
-   <p>
-      If you want to manage your Account, click <a href="user.html">here</a>
-   </p>
+  <h2>QickLinks</h2>
+  <p>
+    If you want to manage your Account, click
+    <a href="user.html">here</a>
+  </p>
 
-   <h2> Applications using OpenAuth </h2>
+  <h2>Applications using OpenAuth</h2>
 
-   <ul>
-      <li><a href="https://ebook.stamm.me">EBook Store and Reader</a></li>
-      <li><a href="https://notes.hibas123.de">Secure and Simple Notes application</a></li>
-   </ul>
-</div>
\ No newline at end of file
+  <ul>
+    <li>
+      <a href="https://ebook.stamm.me">EBook Store and Reader</a>
+    </li>
+    <li>
+      <a href="https://notes.hibas123.de">
+        Secure and Simple Notes application
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/src/User/App.svelte b/src/User/App.svelte
index cfdb678..8c8a826 100644
--- a/src/User/App.svelte
+++ b/src/User/App.svelte
@@ -1,195 +1,207 @@
 <script>
-   import AccountPage from "./Pages/Account.svelte";
-   import SecurityPage from "./Pages/Security.svelte";
-   import {
-      slide,
-      fade
-   } from 'svelte/transition';
+  import AccountPage from "./Pages/Account.svelte";
+  import SecurityPage from "./Pages/Security.svelte";
+  import { slide, fade } from "svelte/transition";
 
-   const pages = [{
-         id: "account",
-         title: "Account",
-         icon: "",
-         component: AccountPage
-      },
-      {
-         id: "security",
-         title: "Security",
-         icon: "",
-         component: SecurityPage
-      }
-   ];
+  const pages = [
+    {
+      id: "account",
+      title: "Account",
+      icon:
+        "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT4wMSBAZnVsbHdpZHRoPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj48ZyBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNDU3LjUsMjUwIEM0NTcuNSwxMzUuOTUzMTk5IDM2NS4wNDY4MDEsNDMuNSAyNTEsNDMuNSBDMTM2Ljk1MzE5OSw0My41IDQ0LjUsMTM1Ljk1MzE5OSA0NC41LDI1MCBDNDQuNSwzNjQuMDQ2ODAxIDEzNi45NTMxOTksNDU2LjUgMjUxLDQ1Ni41IEMzNjUuMDQ2ODAxLDQ1Ni41IDQ1Ny41LDM2NC4wNDY4MDEgNDU3LjUsMjUwIFogTTU3LjUsMjUwIEM1Ny41LDE0My4xMzI5MDEgMTQ0LjEzMjkwMSw1Ni41IDI1MSw1Ni41IEMzNTcuODY3MDk5LDU2LjUgNDQ0LjUsMTQzLjEzMjkwMSA0NDQuNSwyNTAgQzQ0NC41LDM1Ni44NjcwOTkgMzU3Ljg2NzA5OSw0NDMuNSAyNTEsNDQzLjUgQzE0NC4xMzI5MDEsNDQzLjUgNTcuNSwzNTYuODY3MDk5IDU3LjUsMjUwIFoiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD48cGF0aCBkPSJNMjUxLjUsMjUyLjkzMzk2MiBDMTk2Ljg1NDE5LDI1Mi45MzM5NjIgMTUyLjUsMjk2LjM2MDgwOSAxNTIuNSwzNTAgQzE1Mi41LDM1My41ODk4NTEgMTU1LjQxMDE0OSwzNTYuNSAxNTksMzU2LjUgTDM0NCwzNTYuNSBDMzQ3LjU4OTg1MSwzNTYuNSAzNTAuNSwzNTMuNTg5ODUxIDM1MC41LDM1MCBDMzUwLjUsMjk2LjM2MDgwOSAzMDYuMTQ1ODEsMjUyLjkzMzk2MiAyNTEuNSwyNTIuOTMzOTYyIFogTTE2NS41LDM0My41MDAwMDEgQzE2NS41LDMwMy42MDI3MDggMjAzLjk3MzEzMSwyNjUuOTMzOTYyIDI1MS41LDI2NS45MzM5NjIgQzI5OS4wMjY4NjksMjY1LjkzMzk2MiAzMzcuNSwzMDMuNjAyNzA4IDMzNy40OTk5OTcsMzQzLjUwMDAwMSBMMTY1LjUsMzQzLjUwMDAwMSBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PHBhdGggZD0iTTMwNC4yNSwxOTMuMzk2MjI2IEMzMDQuMjUsMTY1LjgwODIwMiAyODEuNDY1NDI0LDE0My41IDI1My40MjcwODMsMTQzLjUgQzIyNS4zODg3NDIsMTQzLjUgMjAyLjYwNDE2NywxNjUuODA4MjAyIDIwMi42MDQxNjcsMTkzLjM5NjIyNiBDMjAyLjYwNDE2NywyMjAuOTg0MjUgMjI1LjM4ODc0MiwyNDMuMjkyNDUzIDI1My40MjcwODMsMjQzLjI5MjQ1MyBDMjgxLjQ2NTQyNCwyNDMuMjkyNDUzIDMwNC4yNSwyMjAuOTg0MjUgMzA0LjI1LDE5My4zOTYyMjYgWiBNMjE1LjYwNDE2NywxOTMuMzk2MjI2IEMyMTUuNjA0MTY3LDE3My4wNTAxMDIgMjMyLjUwNzY4MywxNTYuNSAyNTMuNDI3MDgzLDE1Ni41IEMyNzQuMzQ2NDg0LDE1Ni41IDI5MS4yNSwxNzMuMDUwMTAyIDI5MS4yNSwxOTMuMzk2MjI2IEMyOTEuMjUsMjEzLjc0MjM1MSAyNzQuMzQ2NDg0LDIzMC4yOTI0NTMgMjUzLjQyNzA4MywyMzAuMjkyNDUzIEMyMzIuNTA3NjgzLDIzMC4yOTI0NTMgMjE1LjYwNDE2NywyMTMuNzQyMzUxIDIxNS42MDQxNjcsMTkzLjM5NjIyNiBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=",
+      component: AccountPage
+    },
+    {
+      id: "security",
+      title: "Security",
+      icon:
+        "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik00NDUuOCwzNy4zYy0xLjItMC43LTIuNy0wLjgtMy45LTAuMWMtNC4zLDIuMi0xMS42LDMuNC0yMS45LDMuNGMtMzMuNiwwLTkwLjgtMTIuNC0xMjguNy0yMC41Yy0xNC0zLTI2LjEtNS42LTM0LjEtNyAgIGMtMC40LTAuMS0wLjktMC4xLTEuNCwwYy03LjIsMS4yLTE4LjUsMy42LTMxLjcsNi4zQzE4NC4zLDI3LjYsMTI0LjIsNDAsOTAuNiw0MGMtMTEuNiwwLTE3LTEuNS0xOS41LTIuOCAgIGMtMS4yLTAuNi0yLjctMC42LTMuOSwwLjFzLTEuOSwyLTEuOSwzLjRjMCw3My4xLDMuOCwxNjguNCwzMy45LDI1Ny43YzE0LjMsNDIuOCwzMy41LDgwLjcsNTcuMSwxMTIuNyAgIGMyNi42LDM2LDU5LjcsNjUuNyw5OC4zLDg4LjNjMC42LDAuNCwxLjMsMC41LDIsMC41czEuNC0wLjIsMi0wLjVjMzguNi0yMi42LDcxLjYtNTIuMyw5OC4yLTg4LjNjMjMuNi0zMiw0Mi45LTY5LjksNTcuMS0xMTIuNyAgIGMyOS41LTg3LjYsMzMuNy0xNzkuNCwzMy45LTI1Ny43QzQ0Ny43LDM5LjQsNDQ3LDM4LjEsNDQ1LjgsMzcuM3ogTTQwNi4zLDI5NS45Yy0yOS4zLDg4LjEtNzkuNywxNTMuOC0xNDkuOCwxOTUuNCAgIEMxODYuNCw0NDkuNywxMzYsMzg0LDEwNi43LDI5NS45Qzc3LjgsMjEwLDczLjQsMTE4LjEsNzMuMiw0Ni40YzQuNSwxLjEsMTAuMiwxLjYsMTcuMywxLjZjMCwwLDAsMCwwLDAgICBjMzQuNSwwLDk1LjEtMTIuNiwxMzUuMi0yMC45YzEyLjctMi42LDIzLjYtNC45LDMwLjctNi4xYzcuOCwxLjQsMTkuNSwzLjksMzMuMSw2LjhDMzMwLDM2LjYsMzg1LjUsNDguNiw0MjAsNDguNiAgIGM4LjEsMCwxNC43LTAuNywxOS43LTJDNDM5LjMsMTIyLjksNDM0LjcsMjExLjUsNDA2LjMsMjk1Ljl6Ij48L3BhdGg+PHBhdGggZD0iTTI1Ni41LDIxNy44YzQ1LDAsODEuNi0zNi42LDgxLjYtODEuNmMwLTQ1LTM2LjYtODEuNi04MS42LTgxLjZjLTQ1LDAtODEuNiwzNi42LTgxLjYsODEuNiAgIEMxNzQuOSwxODEuMiwyMTEuNSwyMTcuOCwyNTYuNSwyMTcuOHogTTI1Ni41LDYyLjZjNDAuNiwwLDczLjYsMzMsNzMuNiw3My42YzAsNDAuNi0zMyw3My42LTczLjYsNzMuNmMtNDAuNiwwLTczLjYtMzMtNzMuNi03My42ICAgQzE4Mi45LDk1LjYsMjE1LjksNjIuNiwyNTYuNSw2Mi42eiI+PC9wYXRoPjxwYXRoIGQ9Ik0zMDkuMiwyMjguOUgyMDMuOGMtMjYuNSwwLTQ4LDIxLjUtNDgsNDh2NzljMCwyLjIsMS44LDQsNCw0aDE5My40YzIuMiwwLDQtMS44LDQtNHYtNzkgICBDMzU3LjIsMjUwLjQsMzM1LjYsMjI4LjksMzA5LjIsMjI4Ljl6IE0zNDkuMiwzNTEuOUgxNjMuOHYtNzVjMC0yMiwxNy45LTQwLDQwLTQwaDEwNS40YzIyLjEsMCw0MCwxNy45LDQwLDQwTDM0OS4yLDM1MS45ICAgTDM0OS4yLDM1MS45eiI+PC9wYXRoPjwvZz48L3N2Zz4=",
+      component: SecurityPage
+    }
+  ];
 
-   function getPage() {
-      let pageid = window.location.hash.slice(1);
-      return pages.find(e => e.id === pageid) || pages[0];
-   }
+  function getPage() {
+    let pageid = window.location.hash.slice(1);
+    return pages.find(e => e.id === pageid) || pages[0];
+  }
 
-   let page = getPage();
-   window.addEventListener("hashchange", () => {
+  let page = getPage();
+  window.addEventListener("hashchange", () => {
+    page = getPage();
+  });
+  // $: title = pages.find(e => e.id === page).title;
+
+  const mq = window.matchMedia("(min-width: 45rem)");
+  let sidebar_button = !mq.matches;
+  mq.addEventListener("change", ev => {
+    sidebar_button = !ev.matches;
+  });
+
+  let sidebar_active = false;
+
+  function setPage(pageid) {
+    let pg = pages.find(e => e.id === pageid);
+    if (!pg) {
+      throw new Error("Invalid Page " + pageid);
+    } else {
+      let url = new URL(window.location.href);
+      url.hash = pg.id;
+      window.history.pushState({}, pg.title, url);
       page = getPage();
-   })
-   // $: title = pages.find(e => e.id === page).title;
+    }
 
+    sidebar_active = false;
+  }
 
-   const mq = window.matchMedia("(min-width: 45rem)");
-   let sidebar_button = !mq.matches;
-   mq.addEventListener("change", (ev) => {
-      sidebar_button = !ev.matches;
-   })
+  let loading = true;
 
-   let sidebar_active = false;
-
-
-
-   function setPage(pageid) {
-      let pg = pages.find(e => e.id === pageid)
-      if (!pg) {
-         throw new Error("Invalid Page " + pageid);
-      } else {
-         let url = new URL(window.location.href);
-         url.hash = pg.id;
-         window.history.pushState({}, pg.title, url);
-         page = getPage();
-      }
-
-      sidebar_active = false;
-   }
-
-
-   let loading = true;
-
-   import NavigationBar from "./NavigationBar.svelte";
+  import NavigationBar from "./NavigationBar.svelte";
 </script>
+
+<style>
+  .loading {
+    background-color: rgba(0, 0, 0, 0.04);
+    filter: blur(10px);
+  }
+
+  :root {
+    --sidebar-width: 250px;
+  }
+
+  .root {
+    height: 100%;
+  }
+
+  .container {
+    display: grid;
+    height: 100%;
+    grid-template-columns: auto 100%;
+    grid-template-rows: 60px auto 60px;
+    grid-template-areas:
+      "sidebar header"
+      "sidebar mc"
+      "sidebar footer";
+  }
+
+  .header {
+    grid-area: header;
+    background-color: var(--primary);
+    padding: 12px;
+    display: flex;
+  }
+
+  .header > h1 {
+    margin: 0;
+    padding: 0;
+    font-size: 24px;
+    line-height: 36px;
+    color: white;
+    margin-left: 2rem;
+  }
+
+  .header > button {
+    height: 36px;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+  }
+
+  .header > button:hover {
+    background-color: rgba(255, 255, 255, 0.151);
+  }
+
+  .sidebar {
+    width: 0;
+    overflow: hidden;
+    grid-area: sidebar;
+    transition: width 0.2s;
+    background-color: lightgrey;
+    height: 100%;
+  }
+
+  .sidebar-visible {
+    width: var(--sidebar-width);
+    transition: width 0.2s;
+    box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
+  }
+
+  .content {
+    grid-area: mc;
+    padding: 1rem;
+  }
+
+  .footer {
+    grid-area: footer;
+  }
+
+  @media (min-width: 45rem) {
+    .container {
+      grid-template-columns: auto 1fr;
+    }
+
+    .sidebar {
+      width: var(--sidebar-width);
+      transition: all 0.2s;
+      box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
+    }
+
+    .content {
+      padding: 2rem;
+    }
+  }
+
+  .loader_container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+</style>
+
 <div class:loading class="root">
-   <div class="container">
-      <div class="header">
-         {#if sidebar_button}
-         <button on:click={()=>sidebar_active = !sidebar_active}>
-            <svg id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
-         </button>
-         {/if}
+  <div class="container">
+    <div class="header">
+      {#if sidebar_button}
+        <button on:click={() => (sidebar_active = !sidebar_active)}>
+          <svg
+            id="Layer_1"
+            style="enable-background:new 0 0 32 32;"
+            version="1.1"
+            viewBox="0 0 32 32"
+            width="32px"
+            xml:space="preserve"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink">
+            <path
+              d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z
+              M28,14H4c-1.104,0-2,0.896-2,2
+              s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z
+              M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2
+              S29.104,22,28,22z" />
+          </svg>
+        </button>
+      {/if}
       <h1>{page.title}</h1>
-      </div>
-      <div class="sidebar" class:sidebar-visible={sidebar_active}>
-         <NavigationBar open={setPage} pages={pages} />
-      </div>
-      <div class="content">
-            <svelte:component this={page.component} bind:loading />
-      </div>
-      <div class="footer"></div>
-   </div>
+    </div>
+    <div class="sidebar" class:sidebar-visible={sidebar_active}>
+      <NavigationBar open={setPage} {pages} active={page} />
+    </div>
+    <div class="content">
+      <svelte:component this={page.component} bind:loading />
+    </div>
+    <div class="footer" />
+  </div>
 </div>
 
 {#if loading}
-<div class="loader_container">
-   <div class="loader_box">
-      <div class="loader"></div>
-   </div>
-</div>
+  <div class="loader_container">
+    <div class="loader_box">
+      <div class="loader" />
+    </div>
+  </div>
 {/if}
-
-<style>
-      .loading {
-         background-color: rgba(0, 0, 0, 0.04);
-         filter: blur(10px);
-      }
-   
-      :root {
-         --sidebar-width: 250px;
-      }
-
-      .root {
-         height: 100%;
-      }
-   
-      .container {
-         display: grid;
-         height: 100%;
-         grid-template-columns: auto 100%;
-         grid-template-rows: 60px auto 60px;
-         grid-template-areas:
-            "sidebar header"
-            "sidebar mc"
-            "sidebar footer"
-      }
-   
-      .header {
-         grid-area: header;
-         background-color: var(--primary);
-         padding: 12px;
-         display: flex;
-      }
-   
-      .header > h1 {
-         margin: 0;
-         padding: 0;
-         font-size: 24px;
-         line-height: 36px;
-         color: white;
-         margin-left: 2rem;
-      }
-
-      .header>button {
-         height: 36px;
-         background-color: transparent;
-         border: none;
-         font-size: 20px;
-      }
-   
-      .header>button:hover {
-         background-color: rgba(255, 255, 255, 0.151)
-      }
-   
-      .sidebar {
-         width: 0;
-         overflow: hidden;
-         grid-area: sidebar;
-         transition: width .2s;
-         background-color: lightgrey;
-         height: 100%;
-      }
-   
-      .sidebar-visible {
-         width: var(--sidebar-width);
-         transition: width .2s;
-         box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
-      }
-   
-      .content {
-         grid-area: mc;
-         padding: 1rem;
-      }
-   
-      .footer {
-         grid-area: footer;
-      }
-   
-      @media (min-width: 45rem) {
-         .container {
-            grid-template-columns: auto 1fr;
-         }
-
-         .sidebar {
-            width: var(--sidebar-width);
-            transition: all .2s;
-            box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
-         }
-
-         .content {
-            padding: 2rem;
-         }
-      }
-
-      .loader_container {
-         position: absolute;
-         display: flex;
-         flex-direction: column;
-         justify-content: center;
-         top: 0;
-         bottom: 0;
-         left: 0;
-         right: 0;
-         z-index: 2;
-      }
-   </style>
\ No newline at end of file
diff --git a/src/User/NavigationBar.svelte b/src/User/NavigationBar.svelte
index 53e7205..43d58b2 100644
--- a/src/User/NavigationBar.svelte
+++ b/src/User/NavigationBar.svelte
@@ -1,5 +1,6 @@
 <script>
   export let open;
+  export let active;
   export let pages = [];
 </script>
 
@@ -17,6 +18,10 @@
     /* justify-content: center; */
   }
 
+  .active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
   .icon {
     /* float: left; */
     width: calc(var(--rel-size) * 3);
@@ -36,9 +41,11 @@
 </style>
 
 {#each pages as page}
-  <div class="container" on:click={() => open(page.id)}>
+  <div
+    class={'container' + (page === active ? ' active' : '')}
+    on:click={() => open(page.id)}>
     <div class="icon">
-      <img src={page.icon} />
+      <img alt={page.title} src={page.icon} />
     </div>
     <h3 class="title">{page.title}</h3>
   </div>
diff --git a/src/User/Pages/Account.svelte b/src/User/Pages/Account.svelte
index 92e2509..0e2135a 100644
--- a/src/User/Pages/Account.svelte
+++ b/src/User/Pages/Account.svelte
@@ -6,7 +6,8 @@
   import request from "../../request.ts";
 
   export let loading = false;
-  let error = undefined;
+  let account_error = undefined;
+  let contact_error = undefined;
 
   const genderMap = new Map();
   genderMap.set(0, "None");
@@ -36,6 +37,7 @@
         {},
         "GET",
         undefined,
+        true,
         true
       );
 
@@ -47,14 +49,32 @@
         : undefined;
     } catch (err) {
       console.error(err);
-      error = err.message;
+      account_error = err.message;
     }
   }
 
-  let email = ["mail@fabianstamm.de", "fabian.stamm.koe@gmail.com"];
-  let phone = ["+1 1233 123123123", "+21 1233 123 123 1"];
+  let email = [];
+  let phone = [];
 
-  async function loadContact() {}
+  async function loadContact() {
+    try {
+      let { contact } = await request(
+        "/api/user/contact",
+        {},
+        "GET",
+        undefined,
+        true,
+        true
+      );
+
+      email = contact.mails.map(e => e.mail);
+      phone = contact.phones.map(e => e.phone);
+      contact_error = undefined;
+    } catch (err) {
+      console.error(err);
+      contact_error = err.message;
+    }
+  }
 
   async function load() {
     loading = true;
@@ -128,8 +148,8 @@
 
 <Box>
   <h1>Profile</h1>
-  {#if error}
-    <p class="error">{error}</p>
+  {#if account_error}
+    <p class="error">{account_error}</p>
   {/if}
   <BoxItem name="Name" value={name}>
     <div class="input-container">
@@ -160,6 +180,9 @@
 
 <Box>
   <h1>Contact</h1>
-  <BoxItem name="E-Mail" value={email} />
-  <BoxItem name="Phone" value={phone} />
+  {#if contact_error}
+    <p class="error">{contact_error}</p>
+  {/if}
+  <BoxItem name="E-Mail" value={email} noOpen={true} />
+  <BoxItem name="Phone" value={phone} noOpen={true} />
 </Box>
diff --git a/src/User/Pages/BoxItem.svelte b/src/User/Pages/BoxItem.svelte
index 5332945..6ea24fd 100644
--- a/src/User/Pages/BoxItem.svelte
+++ b/src/User/Pages/BoxItem.svelte
@@ -1,97 +1,94 @@
 <script>
-   import {
-      slide
-   } from 'svelte/transition';
-   import NextIcon from "./NextIcon.svelte"
-   export let name = "";
-   export let value = "";
-   export let open = false;
-   export let highlight = false;
+  import { slide } from "svelte/transition";
+  import NextIcon from "./NextIcon.svelte";
+  export let name = "";
+  export let value = "";
+  export let noOpen = false;
+  export let open = false;
+  export let highlight = false;
 
-   function toggleOpen(ev) {
-
-   }
+  function toggleOpen(ev) {}
 </script>
 
 <style>
-   .root:hover {
-      background-color: rgba(0, 0, 0, 0.04);
-   }
+  .root:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
 
-   .container {
-      display: flex;
+  .container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .values {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - var(--default-font-size) - 16px);
+  }
+
+  .values > div:first-child {
+    transform-origin: left;
+    transform: scale(0.95);
+    margin-right: 24px;
+    font-weight: 500;
+  }
+
+  .values > div:nth-child(2) {
+    color: black;
+  }
+
+  :global(svg) {
+    margin: auto 8px auto 8px;
+    height: var(--default-font-size);
+    min-width: var(--default-font-size);
+  }
+
+  .body {
+    box-sizing: border-box;
+    padding: 0.1px;
+    margin-top: 2rem;
+  }
+
+  @media (min-width: 45rem) {
+    .values {
       flex-direction: row;
-   }
+    }
 
-   .values {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      max-width: calc(100% - var(--default-font-size) - 16px);
-   }
+    .values > div:first-child {
+      transform: unset;
+      flex-basis: 120px;
+      min-width: 120px;
+    }
+  }
 
-   .values>div:first-child {
-      transform-origin: left;
-      transform: scale(0.95);
-      margin-right: 24px;
-      font-weight: 500;
-   }
-
-   .values>div:nth-child(2) {
-      color: black;
-   }
-
-   :global(svg) {
-      margin: auto 8px auto 8px;
-      height: var(--default-font-size);
-      min-width: var(--default-font-size);
-   }
-
-   .body {
-      box-sizing: border-box;
-      padding: .1px;
-      margin-top: 2rem;
-   }
-
-   @media (min-width: 45rem) {
-      .values {
-         flex-direction: row;
-      }
-
-      .values>div:first-child {
-         transform: unset;
-         flex-basis: 120px;
-         min-width: 120px;
-      }
-   }
-
-   .highlight-element {
-      background-color: #7bff003b;
-   }
+  .highlight-element {
+    background-color: #7bff003b;
+  }
 </style>
 
 <div class="root" class:highlight-element={highlight}>
-   <div class="container" on:click={()=>open=!open}>
-      <div class="values">
-         <div>{name}</div>
-         <div>
-            {#if Array.isArray(value)}
-               {#each value as v, i}
-                  {v}
-                  {#if i < value.length - 1}
-                  <br/>
-                  {/if}
-               {/each}
-            {:else}
-               {value}
+  <div class="container" on:click={() => (open = !open)}>
+    <div class="values">
+      <div>{name}</div>
+      <div>
+        {#if Array.isArray(value)}
+          {#each value as v, i}
+            {v}
+            {#if i < value.length - 1}
+              <br />
             {/if}
-         </div>
+          {/each}
+        {:else}{value}{/if}
       </div>
+    </div>
+    {#if !noOpen}
       <NextIcon rotation={open ? -90 : 90} />
-   </div>
-   {#if open}
-      <div class="body" transition:slide>
-         <slot></slot>
-      </div>
-   {/if}
-</div>
\ No newline at end of file
+    {/if}
+  </div>
+  {#if open && !noOpen}
+    <div class="body" transition:slide>
+      <slot />
+    </div>
+  {/if}
+</div>
diff --git a/src/User/Pages/Security.svelte b/src/User/Pages/Security.svelte
index d14f5c6..fa76d17 100644
--- a/src/User/Pages/Security.svelte
+++ b/src/User/Pages/Security.svelte
@@ -22,6 +22,7 @@
       undefined,
       "DELETE",
       undefined,
+      true,
       true
     );
     loadTwoFactor();
@@ -33,6 +34,7 @@
       undefined,
       undefined,
       undefined,
+      true,
       true
     );
     twofactor = res.methods;
@@ -46,6 +48,7 @@
       undefined,
       "DELETE",
       undefined,
+      true,
       true
     );
     loadToken();
@@ -58,6 +61,7 @@
       undefined,
       undefined,
       undefined,
+      true,
       true
     );
     token = res.token;
diff --git a/src/global.css b/src/global.css
index 4244752..b311a2e 100644
--- a/src/global.css
+++ b/src/global.css
@@ -1,5 +1,5 @@
 :root {
-   --primary: #1E88E5;
+   --primary: #1e88e5;
    --mdc-theme-primary: var(--primary);
    --mdc-theme-primary-bg: var(--mdc-theme--primary);
    --mdc-theme-on-primary: white;
@@ -10,7 +10,7 @@
 }
 
 * {
-   font-family: 'Roboto', 'Helvetica', sans-serif;
+   font-family: "Roboto", "Helvetica", sans-serif;
 }
 
 html,
@@ -29,7 +29,7 @@ body {
    min-height: 45px;
 }
 
-.floating>input {
+.floating > input {
    font-size: 1.2rem;
    padding: 10px 10px 10px 5px;
    appearance: none;
@@ -46,13 +46,13 @@ body {
    box-sizing: border-box;
 }
 
-.floating>input:focus {
+.floating > input:focus {
    outline: none;
 }
 
 /* Label */
 
-.floating>label {
+.floating > label {
    color: #999;
    font-size: 18px;
    font-weight: normal;
@@ -65,10 +65,10 @@ body {
 
 /* active */
 
-.floating>input:focus~label,
-.floating>input.used~label {
-   top: -.75em;
-   transform: scale(.75);
+.floating > input:focus ~ label,
+.floating > input.used ~ label {
+   top: -0.75em;
+   transform: scale(0.75);
    left: -2px;
    /* font-size: 14px; */
    color: var(--primary);
@@ -85,7 +85,7 @@ body {
 
 .bar:before,
 .bar:after {
-   content: '';
+   content: "";
    height: 2px;
    width: 0;
    bottom: 1px;
@@ -104,8 +104,8 @@ body {
 
 /* active */
 
-.floating>input:focus~.bar:before,
-.floating>input:focus~.bar:after {
+.floating > input:focus ~ .bar:before,
+.floating > input:focus ~ .bar:after {
    width: 50%;
 }
 
@@ -123,7 +123,7 @@ body {
 
 /* active */
 
-.floating>input:focus~.highlight {
+.floating > input:focus ~ .highlight {
    animation: inputHighlighter 0.3s ease;
 }
 
@@ -140,7 +140,6 @@ body {
    }
 }
 
-
 .btn {
    position: relative;
 
@@ -153,12 +152,12 @@ body {
    border-width: 0;
    outline: none;
    border-radius: 4px;
-   box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
 
    background-color: #cccccc;
    color: #ecf0f1;
 
-   transition: background-color .3s;
+   transition: background-color 0.3s;
 
    height: 48px;
 
@@ -172,7 +171,7 @@ body {
    filter: brightness(90%);
 }
 
-.btn>* {
+.btn > * {
    position: relative;
 }
 
@@ -194,7 +193,7 @@ body {
 
    border-radius: 100%;
 
-   background-color: rgba(236, 240, 241, .3);
+   background-color: rgba(236, 240, 241, 0.3);
 
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
@@ -207,7 +206,7 @@ body {
    width: 120%;
    padding-top: 120%;
 
-   transition: width .2s ease-out, padding-top .2s ease-out;
+   transition: width 0.2s ease-out, padding-top 0.2s ease-out;
 }
 
 .loader_box {
@@ -242,4 +241,8 @@ body {
    100% {
       transform: rotate(360deg);
    }
-}
\ No newline at end of file
+}
+
+#content {
+   height: 100%;
+}
diff --git a/tsconfig.json b/tsconfig.json
index efa9663..82e875f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,12 +2,6 @@
    "compilerOptions": {
       "module": "commonjs",
       "allowSyntheticDefaultImports": true
-      // "noImplicitAny": true,
-      // "removeComments": true,
-      // "preserveConstEnums": true,
-      // "sourceMap": true
    },
-   "include": [
-      "build.ts"
-   ]
-}
\ No newline at end of file
+   "include": ["build.ts"]
+}