diff --git a/.env.development b/.env.development
index a018793e..4f533623 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VUE_APP_API_URL=http://localhost:8000
+VUE_APP_API_URL=http://localhost:8000/
diff --git a/package-lock.json b/package-lock.json
index b33bc35b..9d914c5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12074,6 +12074,11 @@
         }
       }
     },
+    "vue-recaptcha": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-recaptcha/-/vue-recaptcha-1.2.0.tgz",
+      "integrity": "sha512-zgt8bAmlHbLT2XY0diwA/UgGcbp1cOYXJ8za17WM1zlOC8EiO0mpGvYzXaR1aeU0gaiv1qLO6GOUwQVVAjgwMw=="
+    },
     "vue-router": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.2.tgz",
diff --git a/package.json b/package.json
index 671b8338..10a66349 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "core-js": "^2.6.9",
     "vue": "^2.6.10",
     "vue-image-crop-upload": "^2.5.0",
+    "vue-recaptcha": "^1.2.0",
     "vue-router": "^3.1.2",
     "vuetify": "^2.0.5",
     "vuex": "^3.1.1"
diff --git a/public/index.html b/public/index.html
index 635531a5..39630aa9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,8 @@
     <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">
+    <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
+    </script>
   </head>
   <body>
     <noscript>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index f7072bc3..98c2cd04 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -19,6 +19,7 @@
                 type="password"
                 v-model="password"
         ></v-text-field>
+        <div v-if="recaptcha"><vue-recaptcha @verify="onCaptchaVerified" :sitekey="captchaCode"></vue-recaptcha></div>
         <v-checkbox
                 v-model="logintoMainAccount"
                 :label="loginText"
@@ -41,6 +42,7 @@
 
 <script>
     import UserService from '../services/User'
+    import VueRecaptcha from 'vue-recaptcha';
 
     export default {
         data () {
@@ -51,16 +53,22 @@
                 nameBig: '',
                 nameSmall: '',
                 loginText: '',
-                logintoMainAccount: true
+                logintoMainAccount: true,
+                recaptcha: false,
+                captchaCode: '',
+                recaptchaToken: ''
             }
         },
         props: [
             'loginToService',
             'serviceName'
         ],
+        components: {
+            VueRecaptcha
+        },
         methods: {
             'login': function () {
-                UserService.login(this.username, this.password).then((res) => {
+                UserService.login(this.username, this.password, this.recaptchaToken).then((res) => {
                     this.errorMessage = '';
                     UserService.setAccessToken(res.data.data["access_token"]);
                     console.log("Login ok, dispatch event");
@@ -79,12 +87,21 @@
                     return true;
                 }
                 return false;
+            },
+            onCaptchaVerified: function (recaptchaToken) {
+                this.recaptchaToken = recaptchaToken;
             }
         },
         mounted: function() {
             this.nameBig = this.$store.getters.getSettingValue("name_big");
             this.nameSmall = this.$store.getters.getSettingValue("name_small");
+            this.recaptcha = this.$store.getters.getSettingValue("");
             this.loginText = "Login to "+this.nameBig+this.nameSmall+" too"
+
+            UserService.getCaptchaSettings().then((res) => {
+                this.captchaCode = res.data.data.key;
+                this.recaptcha = res.data.data.login;
+            });
         }
     }
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index 06b100d9..7f45c4f8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,8 @@ import ListApps from '../views/ListApps'
 import AppDetails from '../views/AppDetails'
 import NewApp from '../views/NewApp'
 import Mail from '../views/Mail'
+import Invite from '../views/Invite'
+import Register from '../views/Register'
 
 Vue.use(Router)
 
@@ -33,6 +35,16 @@ export default new Router({
             name: 'Login',
             component: Login
         },
+        {
+            path: '/invited',
+            name: 'Invite',
+            component: Invite
+        },
+        {
+            path: '/register',
+            name: 'Register',
+            component: Register
+        },
         {
             path: '/oauth',
             name: 'oAuthPermission',
diff --git a/src/services/User.js b/src/services/User.js
index 4e6ca549..3b840c4f 100644
--- a/src/services/User.js
+++ b/src/services/User.js
@@ -1,8 +1,8 @@
 import Api from '@/services/Api'
 
 export default {
-    login(username, password) {
-        return Api().post('/v1/user/login', {username: username, password: password});
+    login(username, password, recaptchaToken) {
+        return Api().post('/v1/user/login', {username: username, password: password, "g-recaptcha-response": recaptchaToken});
     },
 
     setAccessToken(access_token) {
@@ -20,5 +20,11 @@ export default {
     },
     getMails() {
         return Api().get('/v1/user/me/mails');
+    },
+    getCaptchaSettings() {
+        return Api().get("/v1/user/captcha");
+    },
+    getInviteCodeInfo(code) {
+        return Api().get("/v1/user/invites?code="+code)
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/Invite.vue b/src/views/Invite.vue
new file mode 100644
index 00000000..c2f501b7
--- /dev/null
+++ b/src/views/Invite.vue
@@ -0,0 +1,133 @@
+<template>
+    <div style="min-height: 100pc;" class="bg">
+        <div class="header2">
+        </div>
+        <v-container grid-list-md>
+            <v-layout row wrap>
+                <v-flex md4></v-flex>
+                <v-flex md4 v-if="!$store.state.loggedIn" style="">
+                    <template>
+                        <v-card
+                                class="mx-auto"
+                        >
+                            <v-card-title>Invite</v-card-title>
+                            <v-card-text>
+                                <p>If you have an invite code, enter it here to register a new account.</p>
+
+                                <v-alert type="error" v-if="errorMsg">
+                                   {{ errorMsg }}
+                                </v-alert>
+
+                                <v-text-field
+                                        label="Invite Code"
+                                        value=""
+                                        v-model="code"
+                                ></v-text-field>
+
+                                <v-btn
+                                        color="success"
+                                        @click="checkInviteCode"
+                                >Check Invite Code</v-btn>
+                            </v-card-text>
+                        </v-card>
+                    </template>
+
+                </v-flex>
+                <v-flex md4 v-if="$store.state.loggedIn">
+                    <template>
+                        <v-card
+                                class="mx-auto"
+                        >
+                            <v-card-title>Login</v-card-title>
+                            <v-card-text><p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p></v-card-text>
+                        </v-card>
+                    </template>
+
+                </v-flex>
+
+
+
+            </v-layout>
+        </v-container>
+
+
+    </div>
+
+</template>
+
+<script>
+    import ServerService from '../services/Server'
+    import UserService from '../services/User'
+
+    export default {
+        data () {
+            return {
+                code: '',
+                errorMsg: ''
+            }
+        },
+        components: {
+        },
+        methods: {
+            checkInviteCode: function () {
+                UserService.getInviteCodeInfo(this.code).then((res) => {
+                    if(res.data.data.usable) {
+                        this.errorMsg = "";
+                        this.$router.push({name: 'Register', query: {code: this.code}});
+                    } else {
+                        this.errorMsg = "Invite code not valide";
+                    }
+                   console.log(res.data);
+                }).catch((res) => {
+                    if(res.response.data.msg == "Resource not Found") {
+                        this.errorMsg = "Invite code not found";
+                    }
+                });
+            }
+        },
+        mounted: function() {
+            this.nameBig = this.$store.getters.getSettingValue("name_big");
+            this.nameSmall = this.$store.getters.getSettingValue("name_small");
+        }
+    }
+</script>
+
+<style>
+    .bg {
+        background-image: url('~@/assets/texture-1485529_1920.jpg');
+    }
+    .header2 {
+        background-image: url('~@/assets/texture-1485529_1920.jpg');
+        background-repeat: no-repeat;
+        margin-top: -100px;
+        height: 50vh;
+        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/views/Register.vue b/src/views/Register.vue
new file mode 100644
index 00000000..1d55b093
--- /dev/null
+++ b/src/views/Register.vue
@@ -0,0 +1,150 @@
+<template>
+    <div style="min-height: 100pc;" class="bg">
+        <div class="header2">
+        </div>
+        <v-container grid-list-md>
+            <v-layout row wrap>
+                <v-flex md4></v-flex>
+                <v-flex md4 v-if="!$store.state.loggedIn" style="">
+                    <template>
+                        <v-card
+                                class="mx-auto"
+                        >
+                            <v-card-title>Register</v-card-title>
+                            <v-card-text>
+                                <p>Register a new Account</p>
+
+                                <v-alert type="error" v-if="errorMsg">
+                                   {{ errorMsg }}
+                                </v-alert>
+
+                                <v-text-field
+                                        label="Username"
+                                        value=""
+                                        v-model="username"
+                                        :disabled=usernameForced
+                                ></v-text-field>
+                                <v-text-field
+                                        label="Password"
+                                        value=""
+                                        v-model="password"
+                                ></v-text-field>
+                                <v-text-field
+                                        label="E-Mail"
+                                        value=""
+                                        v-model="mail"
+                                ></v-text-field>
+
+
+
+
+
+                            </v-card-text>
+                        </v-card>
+                    </template>
+
+                </v-flex>
+                <v-flex md4 v-if="$store.state.loggedIn">
+                    <template>
+                        <v-card
+                                class="mx-auto"
+                        >
+                            <v-card-title>Login</v-card-title>
+                            <v-card-text><p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p></v-card-text>
+                        </v-card>
+                    </template>
+
+                </v-flex>
+
+
+
+            </v-layout>
+        </v-container>
+
+
+    </div>
+
+</template>
+
+<script>
+    import ServerService from '../services/Server'
+    import UserService from '../services/User'
+
+    export default {
+        data () {
+            return {
+                inviteCode: '',
+                errorMsg: '',
+                username: '',
+                usernameForced: false,
+                password: '',
+                mail: ''
+
+            }
+        },
+        components: {
+        },
+        methods: {
+
+        },
+        mounted: function() {
+            this.nameBig = this.$store.getters.getSettingValue("name_big");
+            this.nameSmall = this.$store.getters.getSettingValue("name_small");
+            if(this.$route.query.code) {
+                UserService.getInviteCodeInfo(this.$route.query.code).then((res) => {
+                    if(res.data.data.usable == false) {
+                        this.errorMsg="Invite code not valide";
+                    } else {
+                        if(res.data.data.username != "") {
+                            this.usernameForced = true;
+                            this.username = res.data.data.username;
+                        }
+                    }
+                }).catch((res) => {
+                   this.errorMsg="Invite code not valide";
+                });
+            }
+            console.log(this.$route.query.code)
+        }
+    }
+</script>
+
+<style>
+    .bg {
+        background-image: url('~@/assets/texture-1485529_1920.jpg');
+    }
+    .header2 {
+        background-image: url('~@/assets/texture-1485529_1920.jpg');
+        background-repeat: no-repeat;
+        margin-top: -100px;
+        height: 50vh;
+        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>
