diff --git a/package-lock.json b/package-lock.json
index 76df5954..76d1157e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1653,6 +1653,12 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -1918,6 +1924,15 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -3280,6 +3295,12 @@
         }
       }
     },
+    "css-parse": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
+      "integrity": "sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=",
+      "dev": true
+    },
     "css-select": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
@@ -4878,7 +4899,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
       "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
-      "dev": true,
       "requires": {
         "debug": "^3.2.6"
       },
@@ -4887,7 +4907,6 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -6304,8 +6323,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-callable": {
       "version": "1.1.4",
@@ -6858,6 +6876,12 @@
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
     "lodash.defaultsdeep": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.0.tgz",
@@ -7248,8 +7272,7 @@
     "ms": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-      "dev": true
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -10033,6 +10056,62 @@
         }
       }
     },
+    "stylus": {
+      "version": "0.54.5",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.5.tgz",
+      "integrity": "sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=",
+      "dev": true,
+      "requires": {
+        "css-parse": "1.7.x",
+        "debug": "*",
+        "glob": "7.0.x",
+        "mkdirp": "0.5.x",
+        "sax": "0.5.x",
+        "source-map": "0.1.x"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
+          "integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.2",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "sax": {
+          "version": "0.5.8",
+          "resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
+          "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "stylus-loader": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz",
+      "integrity": "sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "when": "~3.6.x"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -10776,6 +10855,12 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-0.5.0.tgz",
+      "integrity": "sha512-TigfiZUs7SN3Z6uxKilqJUtYxte8vp0F4QxabCli6hkKPqU97JzAZc3P7AL6omkRAd2DMI26fOrIGjuALTvXww==",
+      "dev": true
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -10859,6 +10944,25 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "1.5.14",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.14.tgz",
+      "integrity": "sha512-7iM+TfghR/wu/Gl+k37lKr0N8Ddr6SxzqHtoK1dIyHgCH6SJRkpaXPw2MC5/FsAg9aUDJbYNWrzSeu5eHw+Q/w=="
+    },
+    "vuetify-loader": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.2.2.tgz",
+      "integrity": "sha512-j6KWPuwQ4xTxPDksbFwbSJle7+3oSjNvJ/CViTEgbPLFPqnNsR8JUtRldURIQ0cmAmr0/CoLSZkj0B8JKqOBMA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0"
+      }
+    },
+    "vuex": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
+      "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
@@ -11250,6 +11354,12 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "when": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
+      "integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=",
+      "dev": true
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index bc2bcb0a..be7d5a08 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vuetify": "^1.5.5",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.7.0",
@@ -18,7 +21,11 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.5.21"
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue-cli-plugin-vuetify": "^0.5.0",
+    "vue-template-compiler": "^2.5.21",
+    "vuetify-loader": "^1.0.5"
   },
   "eslintConfig": {
     "root": true,
diff --git a/public/index.html b/public/index.html
index 53df92ab..635531a5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,9 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>keksaccountgui</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index fcc56627..3f883af0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,93 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <v-app v-scroll="handleScroll" v-if="$store.state.settingsLoaded">
+    <v-toolbar app :flat="flat"  :prominent="big" :dense="!big" :color="bgcolor" clipped-left >
+      <v-toolbar-title class="headline text-uppercase" >
+        <span>{{ nameBig }}</span>
+        <span class="font-weight-light">{{ nameSmall }}</span>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-toolbar-items class="hidden-sm-and-down">
+        <v-btn
+                v-for="item in menu"
+                :key="item.icon"
+                :to="item.link"
+                flat
+        >{{ item.title }}</v-btn>
+      </v-toolbar-items>
+      <v-menu class="hidden-md-and-up">
+        <v-toolbar-side-icon slot="activator"></v-toolbar-side-icon>
+        <v-list>
+          <v-list-tile v-for="item in menu" :key="item.icon">
+            <v-list-tile-content>
+              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </v-menu>
+
+    </v-toolbar>
+
+
+    <v-content style="background-color: #fff;">
+      <Startpage/>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from './components/HelloWorld'
+import Startpage from './components/Startpage'
 
 export default {
-  name: 'app',
+  name: 'App',
   components: {
-    HelloWorld
+    HelloWorld,
+    Startpage
+  },
+  data () {
+    return {
+      big: true,
+      bgcolor: "transparent",
+      flat: true,
+      nameBig: '',
+      nameSmall: '',
+      menu: [
+        { icon: 'home', title: 'Login' },
+        { icon: 'info', title: 'Invited' },
+        { icon: 'warning', title: 'Register' }
+      ],
+      menu2: [
+        { icon: 'home', title: 'Apps' },
+        { icon: 'info', title: 'Admin' },
+        { icon: 'warning', title: 'Account' }
+      ]
+    }
+  },
+  computed: {
+    setting: (name) => {
+      //this.$store.getters.getSettingValue(this.$store.state, name);
+    }
+  },
+  methods: {
+    handleScroll: function (evt, el) {
+      if(evt.pageY > 100) {
+        this.big = false;
+        this.bgcolor = "#fff";
+        this.flat = false;
+      } else {
+        this.big = true;
+        this.bgcolor = "transparent";
+        this.flat = true;
+      }
+    }
+  },
+  mounted: function () {
+
+    this.$store.dispatch('getSettings').then(() => {
+      this.nameBig = this.$store.getters.getSettingValue("name_big");
+      this.nameSmall = this.$store.getters.getSettingValue("name_small");
+    });
+
   }
 }
 </script>
-
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
diff --git a/src/assets/background-image-for-website-19.jpg b/src/assets/background-image-for-website-19.jpg
new file mode 100644
index 00000000..ae661a84
Binary files /dev/null and b/src/assets/background-image-for-website-19.jpg differ
diff --git a/src/assets/connect.png b/src/assets/connect.png
new file mode 100644
index 00000000..b5b158eb
Binary files /dev/null and b/src/assets/connect.png differ
diff --git a/src/assets/diagonal-squares.png b/src/assets/diagonal-squares.png
new file mode 100644
index 00000000..3a66d072
Binary files /dev/null and b/src/assets/diagonal-squares.png differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 00000000..145b6d13
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
diff --git a/src/assets/manhattan-407703_1920.jpg b/src/assets/manhattan-407703_1920.jpg
new file mode 100644
index 00000000..d384fc56
Binary files /dev/null and b/src/assets/manhattan-407703_1920.jpg differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 879051a2..270a6a97 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,58 +1,108 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
+  <v-container grid-list-md>
+
+    <v-layout row wrap >
+      <v-flex xm12 md12>
+        <h1>App Test</h1>
+        <v-alert
+                :value="true"
+                type="warning"
+        >
+          This app is still in testing mode. To remove the testing flag contact the Administrator.
+        </v-alert>
+        <v-card class="mx-auto" flat style="margin-top: 10px;">
+          <v-tabs
+                  background-color="white"
+                  color="fff"
+                  left
+
+          >
+            <v-tab>Overview</v-tab>
+            <v-tab>API Access</v-tab>
+            <v-tab>Settings</v-tab>
+            <v-tab disabled>Users</v-tab>
+
+            <v-tab-item :key="1" :transition="false"  :reverse-transition="false" >
+              <v-container style="padding-right: 0px; padding-left:0px;">
+                <img src="https://account.keks.cloud/gui/apps/3/icon" style="float: right;width: 100px;">
+                <b>Description</b><br>
+                Keks Cloud Mattermost Chat App<br><br>
+                <a href="https://chat.keks.cloud">https://chat.keks.cloud</a>
+              </v-container>
+
+            </v-tab-item>
+            <v-tab-item :key="2" :transition="false"  :reverse-transition="false">
+              <v-container style="padding-right: 0px; padding-left:0px;">
+                <h2>oAuth Token</h2>
+                <p>
+                  Here are the oAuth API-Keys. You use this Keys to start the oAuth authorization work flow.
+                </p>
+                <v-text-field
+                        label="API Key"
+                        value="d21ec9146c3c327211b8b7fd44003916b938d751d458fece25ef51fa9c8896c97ceb22d032e6dc7388c6143a3b3157764949a7b2cbb062e005dd5f009310ab00"
+                ></v-text-field>
+                <v-text-field
+                        label="API Secret"
+                        value="fc769296b4b411c93b22c296b2e8c979ca31de11aadaac9c73ff4972bfc9df57c021fe33575c6e080d21039ecfeb1ae4efb2566e6ad4c463b8e139d0612867a9"
+                ></v-text-field>
+                <br>
+                <h2>API Access</h2>
+                <p>
+                  You can access the API to get informations about this APP with the following API Credentials:
+                  <v-text-field
+                          label="API Token"
+                          value="sadfwef42fwqefergw"
+                  ></v-text-field>
+                  <v-text-field
+                          label="Refresh Token"
+                          value="asdfdsafjöoiajsefoiaösjdfo"
+                  ></v-text-field>
+                <h2>Development Access</h2>
+                <p>
+                  To test the App you can use the following Developer Access and Refresh token, they are connected to your user.
+                  <v-text-field
+                          label="Access Token"
+                          value="3916b938d751d458fece25ef51fa9c8896c97ceb22d032e6dc7388c6143a3b31577649"
+                  ></v-text-field>
+                  <v-text-field
+                          label="Refresh Token"
+                          value="411c93b22c296b2e8c979ca31de11aadaac9c73ff4972bfc9df57c021"
+                  ></v-text-field>
+                </p>
+              </v-container>
+            </v-tab-item>
+            <v-tab-item :key="3" :transition="false"  :reverse-transition="false">
+              <v-container style="padding-right: 0px; padding-left:0px;">
+                FooBar
+              </v-container>
+            </v-tab-item>
+            <v-tab-item :key="4" :transition="false"  :reverse-transition="false">
+              <v-container style="padding-right: 0px; padding-left:0px;">
+                FooBar
+              </v-container>
+            </v-tab-item>
+
+          </v-tabs>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </v-container>
 </template>
 
 <script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
+  export default {
+    data () {
+      return {
+        menu: [
+          { icon: 'home', title: 'Login' },
+          { icon: 'info', title: 'Invited' },
+          { icon: 'warning', title: 'Register' }
+        ]
+      }
+    }
+      }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+<style>
+
 </style>
diff --git a/src/components/Startpage.vue b/src/components/Startpage.vue
new file mode 100644
index 00000000..5b610ba7
--- /dev/null
+++ b/src/components/Startpage.vue
@@ -0,0 +1,215 @@
+<template>
+  <div style="">
+  <div class="header">
+    <h1>{{ nameBig }}<span class="small">{{ nameSmall }}</span></h1>
+    <h2>{{ slogen }}</h2>
+  </div>
+    <v-container grid-list-md>
+      <v-layout row wrap>
+        <v-flex md12>
+          <h1>Services</h1>
+          <p>Mit deinem KeksAccount Username kannst du dich u.a. bei folgenden Servicen einloggen und diese nutzten. </p>
+        </v-flex>
+        <v-flex md4 text-xs-center>
+          <v-card>
+            <v-layout>
+              <v-flex xs5>
+                <v-img
+                        src="https://account.keks.cloud/gui/apps/1/icon"
+                        height="125px"
+                        contain
+                ></v-img>
+              </v-flex>
+              <v-flex xs7>
+                <v-card-title primary-title>
+                  <div>
+                    <div class="headline">Git</div>
+                    <div>Git-Server von keks.cloud</div>
+                  </div>
+                </v-card-title>
+              </v-flex>
+            </v-layout>
+            <v-divider light></v-divider>
+            <v-card-actions class="pa-3">
+
+              <v-spacer></v-spacer>
+              <v-icon>exit_to_app</v-icon>
+            </v-card-actions>
+          </v-card>
+        </v-flex>
+        <v-flex md4 text-xs-center>
+          <v-card>
+            <v-layout>
+              <v-flex xs5>
+                <v-img
+                        src="https://account.keks.cloud/gui/apps/3/icon"
+                        height="125px"
+                        contain
+                ></v-img>
+              </v-flex>
+              <v-flex xs7>
+                <v-card-title primary-title>
+                  <div>
+                    <div class="headline">Chat</div>
+                    <div>Mattermost Chat Server</div>
+                  </div>
+                </v-card-title>
+              </v-flex>
+            </v-layout>
+            <v-divider light></v-divider>
+            <v-card-actions class="pa-3">
+
+              <v-spacer></v-spacer>
+              <v-icon>exit_to_app</v-icon>
+            </v-card-actions>
+          </v-card>
+        </v-flex>
+        <v-flex md4 text-xs-center>
+          <v-card>
+            <v-layout>
+              <v-flex xs5>
+                <v-img
+                        src="https://account.keks.cloud/gui/apps/4/icon"
+                        height="125px"
+                        contain
+                ></v-img>
+              </v-flex>
+              <v-flex xs7>
+                <v-card-title primary-title>
+                  <div>
+                    <div class="headline">Nextcloud</div>
+                    <div>Share Files with other Users</div>
+                  </div>
+                </v-card-title>
+              </v-flex>
+            </v-layout>
+            <v-divider light></v-divider>
+            <v-card-actions class="pa-3">
+
+              <v-spacer></v-spacer>
+              <v-icon>exit_to_app</v-icon>
+            </v-card-actions>
+          </v-card>
+        </v-flex>
+        <v-flex md4 text-xs-center>
+          <v-card>
+            <v-layout>
+              <v-flex xs5>
+                <v-img
+                        src="https://account.keks.cloud/gui/apps/5/icon"
+                        height="125px"
+                        contain
+                ></v-img>
+              </v-flex>
+              <v-flex xs7>
+                <v-card-title primary-title>
+                  <div>
+                    <div class="headline">Jenkins</div>
+                    <div>Build pipelines for Developer</div>
+                  </div>
+                </v-card-title>
+              </v-flex>
+            </v-layout>
+            <v-divider light></v-divider>
+            <v-card-actions class="pa-3">
+
+              <v-spacer></v-spacer>
+              <v-icon>exit_to_app</v-icon>
+            </v-card-actions>
+          </v-card>
+        </v-flex>
+        <v-flex md4 text-xs-center>
+          <v-card>
+            <v-layout>
+              <v-flex xs5>
+                <v-img
+                        src="https://account.keks.cloud/gui/apps/7/icon"
+                        height="125px"
+                        contain
+                ></v-img>
+              </v-flex>
+              <v-flex xs7>
+                <v-card-title primary-title>
+                  <div>
+                    <div class="headline">Wiki</div>
+                    <div>Dokumentation von Servicen und Projekten</div>
+                  </div>
+                </v-card-title>
+              </v-flex>
+            </v-layout>
+            <v-divider light></v-divider>
+            <v-card-actions class="pa-3">
+
+              <v-spacer></v-spacer>
+              <v-icon>exit_to_app</v-icon>
+            </v-card-actions>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+
+
+  </div>
+
+</template>
+
+<script>
+  import ServerService from '../services/Server'
+  export default {
+    data () {
+      return {
+        nameBig: '',
+        nameSmall: '',
+        slogen: '',
+        menu: [
+          { icon: 'home', title: 'Login' },
+          { icon: 'info', title: 'Invited' },
+          { icon: 'warning', title: 'Register' }
+        ]
+      }
+    },
+    mounted: function() {
+      this.nameBig = this.$store.getters.getSettingValue("name_big");
+      this.nameSmall = this.$store.getters.getSettingValue("name_small");
+      this.slogen = this.$store.getters.getSettingValue("name_slogen");
+    }
+      }
+</script>
+
+<style>
+.header {
+  background-image: url('~@/assets/manhattan-407703_1920.jpg');
+  background-repeat: no-repeat;
+  margin-top: -100px;
+  height: 45vh;
+  height: 90vh;
+  text-align: center;
+}
+  .header h1{
+    padding-top: 200px;
+    font-size: 56px !important;
+    font-weight: 400;
+    line-height: 32px !important;
+    letter-spacing: normal !important;
+  }
+  .header h1 .small{
+    font-weight: 300 !important;
+  }
+.header h2{
+  padding-top: 30px;
+  font-size: 34px !important;
+  font-weight: 300;
+  line-height: 32px !important;
+  letter-spacing: normal !important;
+}
+h1{
+  font-weight: 300;
+  line-height: 32px !important;
+  letter-spacing: normal !important;
+}
+h2{
+  font-weight: 300;
+  line-height: 32px !important;
+  letter-spacing: normal !important;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 63eb05f7..d5b3650f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,24 @@
 import Vue from 'vue'
+import './plugins/vuetify'
 import App from './App.vue'
+import store from './store/store'
+
+
+
+Vue.directive('scroll', {
+  inserted: function (el, binding) {
+    let f = function (evt) {
+      if (binding.value(evt, el)) {
+        window.removeEventListener('scroll', f)
+      }
+    }
+    window.addEventListener('scroll', f)
+  }
+})
 
 Vue.config.productionTip = false
 
 new Vue({
+  store,
   render: h => h(App),
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 00000000..975696e7
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+import 'vuetify/src/stylus/app.styl'
+
+Vue.use(Vuetify, {
+  iconfont: 'md',
+})
diff --git a/src/services/Api.js b/src/services/Api.js
new file mode 100644
index 00000000..dcc9553c
--- /dev/null
+++ b/src/services/Api.js
@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+export default() => {
+    return axios.create({
+        baseURL: `http://localhost:8000/api/`,
+        withCredentials: false,
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/services/Server.js b/src/services/Server.js
new file mode 100644
index 00000000..f574b19d
--- /dev/null
+++ b/src/services/Server.js
@@ -0,0 +1,7 @@
+import Api from '@/services/Api'
+
+export default {
+    getSettings (params) {
+        return Api().get('/v1/server/settings')
+    }
+}
\ No newline at end of file
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 00000000..1d295b47
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,46 @@
+import Vuex from 'vuex'
+import Vue from 'vue'
+import ServerService from '../services/Server'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        settingsLoaded: false,
+        settings: [] // The TV inventory
+    },
+
+    getters: {
+        // Here we will create a getter
+        getSettingValue: (state) => (name) => {
+            if(state.settingsLoaded == false) {
+                return null;
+            }
+            for(var i = 0; i < state.settings.length; i++) {
+                if(state.settings[i]["name"] == name) {
+                    return state.settings[i]["value"];
+                }
+            }
+        }
+    },
+
+    mutations: {
+        setSettings: function(state, settings) {
+            state.settings = settings;
+            state.settingsLoaded = true;
+        }
+    },
+
+    actions: {
+        getSettings: function (context) {
+            return new Promise((resolve, reject) => {
+                ServerService.getSettings().then((res) => {
+                    console.log(res);
+                    context.commit('setSettings', res.data.data)
+                    resolve()
+                });
+            })
+
+        }
+    }
+});
\ No newline at end of file