diff --git a/package-lock.json b/package-lock.json
index 548b5ab25a66f107e3a4397df95d3523f888d942..24c3e6c8d057b0b5f7edeaec879a1a97568acb28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1770,17 +1770,6 @@
           "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1807,34 +1796,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1856,25 +1817,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1939,16 +1881,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1965,18 +1897,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.8",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
-          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -11265,6 +11185,88 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+      "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-password": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/vue-password/-/vue-password-3.0.0.tgz",
diff --git a/src/assets/identification.svg b/src/assets/identification.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8af720d6e2530ea253ffedd5ac72dcc2eae318cc
--- /dev/null
+++ b/src/assets/identification.svg
@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 -43 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m453.332031 426.667969h-394.664062c-32.363281 0-58.667969-26.304688-58.667969-58.667969v-266.667969c0-32.363281 26.304688-58.664062 58.667969-58.664062h128c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16h-128c-14.699219 0-26.667969 11.964843-26.667969 26.664062v266.667969c0 14.699219 11.96875 26.667969 26.667969 26.667969h394.664062c14.699219 0 26.667969-11.96875 26.667969-26.667969v-266.667969c0-14.699219-11.96875-26.664062-26.667969-26.664062h-128c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h128c32.363281 0 58.667969 26.300781 58.667969 58.664062v266.667969c0 32.363281-26.304688 58.667969-58.667969 58.667969zm0 0"/><path d="m304 117.332031h-96c-20.585938 0-37.332031-16.746093-37.332031-37.332031v-42.667969c0-20.585937 16.746093-37.332031 37.332031-37.332031h96c20.585938 0 37.332031 16.746094 37.332031 37.332031v42.667969c0 20.585938-16.746093 37.332031-37.332031 37.332031zm-96-85.332031c-2.945312 0-5.332031 2.390625-5.332031 5.332031v42.667969c0 2.945312 2.386719 5.332031 5.332031 5.332031h96c2.945312 0 5.332031-2.386719 5.332031-5.332031v-42.667969c0-2.941406-2.386719-5.332031-5.332031-5.332031zm0 0"/><path d="m160 256c-29.398438 0-53.332031-23.9375-53.332031-53.332031 0-29.398438 23.933593-53.335938 53.332031-53.335938s53.332031 23.9375 53.332031 53.335938c0 29.394531-23.933593 53.332031-53.332031 53.332031zm0-74.667969c-11.753906 0-21.332031 9.578125-21.332031 21.335938 0 11.753906 9.578125 21.332031 21.332031 21.332031s21.332031-9.578125 21.332031-21.332031c0-11.757813-9.578125-21.335938-21.332031-21.335938zm0 0"/><path d="m240 362.667969c-8.832031 0-16-7.167969-16-16v-10.667969c0-14.699219-11.96875-26.667969-26.667969-26.667969h-74.664062c-14.699219 0-26.667969 11.96875-26.667969 26.667969v10.667969c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-10.667969c0-32.363281 26.304688-58.667969 58.667969-58.667969h74.664062c32.363281 0 58.667969 26.304688 58.667969 58.667969v10.667969c0 8.832031-7.167969 16-16 16zm0 0"/><path d="m432 192h-117.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h117.332031c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m432 277.332031h-117.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h117.332031c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m432 362.667969h-117.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h117.332031c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/></svg>
\ No newline at end of file
diff --git a/src/assets/user.svg b/src/assets/user.svg
new file mode 100644
index 0000000000000000000000000000000000000000..65a96abe5636e49e292e2e7ff0afbbe645c7db22
--- /dev/null
+++ b/src/assets/user.svg
@@ -0,0 +1 @@
+<svg viewBox="-42 0 512 512.001" xmlns="http://www.w3.org/2000/svg"><path d="m210.351562 246.632812c33.882813 0 63.21875-12.152343 87.195313-36.128906 23.96875-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.128906 87.195312 23.980469 23.96875 53.316406 36.125 87.191406 36.125zm-65.972656-189.292968c18.394532-18.394532 39.972656-27.335938 65.972656-27.335938 25.996094 0 47.578126 8.941406 65.976563 27.335938 18.394531 18.398437 27.339844 39.980468 27.339844 65.972656 0 26-8.945313 47.578125-27.339844 65.976562-18.398437 18.398438-39.980469 27.339844-65.976563 27.339844-25.992187 0-47.570312-8.945312-65.972656-27.339844-18.398437-18.394531-27.34375-39.976562-27.34375-65.976562 0-25.992188 8.945313-47.574219 27.34375-65.972656zm0 0"/><path d="m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.3125-10.339844-7.808594-20.550781-13.375-30.335938-5.769532-10.15625-12.550782-19-20.160157-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.042969 5.339844-10.96875 0-22.085937-1.796876-33.042968-5.339844-11.210938-3.621094-20.300782-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.753906-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.609375 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.0625 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.777344-1.023438 19.953125-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.4375 23.730469 65.066406 23.730469h246.53125c26.621094 0 48.511719-7.984375 65.0625-23.730469 16.757813-15.945312 25.253906-37.589843 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm-44.90625 72.828125c-10.933594 10.40625-25.449218 15.464844-44.378906 15.464844h-246.527344c-18.933594 0-33.449218-5.058594-44.378906-15.460938-10.722656-10.207031-15.933594-24.140625-15.933594-42.585937 0-9.59375.316406-19.066407.949219-28.160157.617187-8.921874 1.878906-18.722656 3.75-29.136718 1.847656-10.285156 4.199219-19.9375 6.996094-28.675782 2.683593-8.378906 6.34375-16.675781 10.882812-24.667968 4.332031-7.617188 9.316407-14.152344 14.816407-19.417969 5.144531-4.925781 11.628906-8.957031 19.269531-11.980469 7.066406-2.796875 15.007812-4.328125 23.628906-4.558594 1.050781.558594 2.921875 1.625 5.953125 3.601563 6.167969 4.019531 13.277344 8.605469 21.136719 13.625 8.859375 5.648437 20.273437 10.75 33.910156 15.152344 13.941406 4.507812 28.160156 6.796875 42.273437 6.796875 14.113282 0 28.335938-2.289063 42.269532-6.792969 13.648437-4.410156 25.058594-9.507813 33.929687-15.164063 8.042969-5.140624 14.953125-9.59375 21.121094-13.617187 3.03125-1.972656 4.902344-3.042969 5.953125-3.601563 8.625.230469 16.566406 1.761719 23.636719 4.558594 7.636719 3.023438 14.121093 7.058594 19.265625 11.980469 5.5 5.261719 10.484375 11.796875 14.816406 19.421875 4.542969 7.988281 8.207031 16.289062 10.886719 24.660156 2.800781 8.75 5.15625 18.398438 7 28.675782 1.867187 10.433593 3.132812 20.238281 3.75 29.144531v.007812c.636719 9.058594.957031 18.527344.960937 28.148438-.003906 18.449219-5.214844 32.378906-15.9375 42.582031zm0 0"/></svg>
\ No newline at end of file
diff --git a/src/components/LogIn.vue b/src/components/LogIn.vue
index d1cbb97cd1ace8c4ce98ee7b808adc2e8f90696d..dc2cb752fdb398217548ff2d465f5d32db15b932 100644
--- a/src/components/LogIn.vue
+++ b/src/components/LogIn.vue
@@ -19,7 +19,7 @@
                   <img src="../assets/error.svg" class="inputwrong_img">
                   <label id="wronginputlabel" style="color: #d75a4a;">E-Mail-Adresse oder Passwort ungültig.</label>
                 </div>
-                <h1 class="formTitle" style="margin-top: 30px">E-Mail-Adresse</h1>
+                <h1 class="formTitle" style="margin-top: 30px">Benutzername</h1>
                 <div class="input_container">
                   <img src="../assets/ic_mail.svg" class="input_img">
                   <input v-model="user.username" type="text" class="form-control inputField" placeholder="Benutzername" aria-label="username">
@@ -29,11 +29,11 @@
             <div class="form-row">
               <div class="col-md-11 mb-3">
                 <h1  class="formTitle" style="margin-top: 10px">Passwort</h1>
-                  <div class="input_container">
-                    <img src="../assets/ic_password.svg" class="input_img">
-                    <input v-model="user.password" :type="passwordFieldType" class="form-control inputField" placeholder="Passwort" aria-label="password">
-                    <img src="../assets/ic_password_toggle.svg" :class="passwordToggleStyle" @click="changeVisibility">
-                  </div>
+                <div class="input_container">
+                  <img src="../assets/ic_password.svg" class="input_img">
+                  <input v-model="user.password" :type="passwordFieldType" class="form-control inputField" placeholder="Passwort" aria-label="password">
+                  <img src="../assets/ic_password_toggle.svg" :class="passwordToggleStyle" @click="changeVisibility">
+                </div>
               </div>
             </div>
             <div class="form-row">
diff --git a/src/components/SignIn.vue b/src/components/SignIn.vue
index 522195e28c67698d9bea5ca12a77127476eea16d..5c202ed31acc383092f6b9547d39175d45e1a6d3 100644
--- a/src/components/SignIn.vue
+++ b/src/components/SignIn.vue
@@ -2,45 +2,61 @@
   <div>
     <div class="row col-md-12">
       <div id="content" class="content col-md-12">
-        <h2>Signup Page</h2>
-        <form @submit="register2" class="col-md-10" style="margin-bottom: 20px">
+        <form @submit="validateBeforeSubmit" class="col-md-10" style="margin-bottom: 20px">
           <div class="form-row">
             <div class="col-md-11 mb-3">
               <h1 class="formTitle" style="margin-top: 30px">Name</h1>
               <div class="input_container">
-                <img src="../assets/ic_mail.svg" class="input_img">
-                <input v-model="user.name" type="text" class="form-control inputField" placeholder="Name" aria-label="username">
+                <img src="../assets/identification.svg" class="input_img">
+                <input v-model="user.name" type="text" class="form-control inputField" placeholder="Name" aria-label="username" required>
               </div>
             </div>
           </div>
           <div class="form-row">
             <div class="col-md-11 mb-3">
-              <h1 class="formTitle" style="margin-top: 30px">Benutzername</h1>
+              <h1 class="formTitle">Vorname</h1>
               <div class="input_container">
-                <img src="../assets/ic_mail.svg" class="input_img">
-                <input v-model="user.username" type="text" class="form-control inputField" placeholder="Benutzername" aria-label="username">
+                <img src="../assets/identification.svg" class="input_img">
+                <input v-model="user.firstname" type="text" class="form-control inputField" placeholder="Vorname" aria-label="userfirstname" required>
               </div>
             </div>
           </div>
           <div class="form-row">
             <div class="col-md-11 mb-3">
-              <div id="wronginputwarning" class="wronginput_container" style="visibility: hidden;">
-                <img src="../assets/error.svg" class="inputwrong_img">
-                <label id="wronginputlabel" style="color: #d75a4a;">E-Mail-Adresse oder Passwort ungültig.</label>
-              </div>
               <h1 class="formTitle" style="margin-top: 10px">E-Mail-Adresse</h1>
               <div class="input_container">
                 <img src="../assets/ic_mail.svg" class="input_img">
-                <input v-model="user.email" type="text" class="form-control inputField" placeholder="E-Mail-Adresse" aria-label="username">
+                <input v-model="user.email" type="text" class="form-control inputField" placeholder="E-Mail-Adresse" aria-label="username" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle" style="margin-top: 30px">Benutzername</h1>
+              <div class="input_container">
+                <img src="../assets/user.svg" class="input_img">
+                <input v-model="user.username" type="text" class="form-control inputField" placeholder="Benutzername" aria-label="username" required>
               </div>
             </div>
           </div>
           <div class="form-row">
+            <p class="alert alert-danger" id="errorpassvar" style="visibility: hidden;">Die Passwörter stimmen nicht überein!</p>
             <div class="col-md-11 mb-3">
               <h1  class="formTitle" style="margin-top: 10px">Passwort</h1>
               <div class="input_container">
                 <img src="../assets/ic_password.svg" class="input_img">
-                <input v-model="user.password" :type="passwordFieldType" class="form-control inputField" placeholder="Passwort" aria-label="password">
+                <input v-validate="'required'" name="password" v-model="user.password" :type="passwordFieldType" class="form-control inputField" placeholder="Passwort" aria-label="password" ref="password" required>
+                <img src="../assets/ic_password_toggle.svg" :class="passwordToggleStyle" @click="changeVisibility">
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Passwort bestätigen</h1>
+              <div class="input_container">
+                <img src="../assets/ic_password.svg" class="input_img">
+                <input v-validate="'required|confirmed:password'" data-vv-as="password" name="password2" v-model="password2" :type="passwordFieldType" class="form-control inputField" placeholder="Passwort bestätigen" aria-label="passwordverify" required>
+                <img src="../assets/ic_password_toggle.svg" :class="passwordToggleStyle" @click="changeVisibility">
               </div>
             </div>
           </div>
@@ -49,6 +65,10 @@
               <button class="btn btn-primary btn-lg btn-block" style="margin-top: 20px; border-radius: 10px" type="submit">Registrieren</button>
             </div>
           </div>
+          <div class="row">
+            <div class="col-md-12 mb-3">
+            </div>
+          </div>
         </form>
       </div>
     </div>
@@ -60,33 +80,60 @@ import User from "@/models/user";
 
 export default {
   name: "SignIn.vue",
+
   data(){
     return {
-      user: new User('','', '', '')
+      user: new User('','', '', '', ''),
+      password: "",
+      password2: "",
+      passwordFieldType: 'password',
+      passwordToggleStyle: "password_toggle_img",
     }
   },
 
   methods: {
-    register2: function () {
-
-      this.$validator.validate().then(isValid => {
-        if (isValid) {
-          this.$store.dispatch('auth/register', this.user).then(
-              data => {
-                this.message = data.message;
-                this.successful = true;
-              },
-              error => {
-                this.message =
-                    (error.response && error.response.data) ||
-                    error.message ||
-                    error.toString();
-                this.successful = false;
-              }
-          );
+    validateBeforeSubmit(e) {
+      this.$validator.validateAll().then(response => {
+        if (response) {
+          console.log("Passwörter gleich");
+          this.$validator.validate().then(isValid => {
+            if (isValid) {
+              this.$store.dispatch('auth/register', this.user).then(
+                  data => {
+                    this.message = data.message;
+                    this.successful = true;
+                  },
+                  error => {
+                    this.message =
+                        (error.response && error.response.data) ||
+                        error.message ||
+                        error.toString();
+                    this.successful = false;
+                  }
+              );
+            }
+          });
+        } else {
+          console.log("Passwörter ungleich");
+          this.user.password = "";
+          this.password2 = "";
+
+          document.getElementById("errorpassvar").style.visibility = "visible";
+
+          // To prevent the form from submitting
+          e.preventDefault();
         }
-      });
-
+      })
+    },
+
+    changeVisibility() {
+      if (this.passwordFieldType === 'password'){
+        this.passwordFieldType = "text"
+        this.passwordToggleStyle = "password_toggle_img password_toggle_img_active"
+      } else {
+        this.passwordFieldType = "password"
+        this.passwordToggleStyle = "password_toggle_img"
+      }
     }
   }
 }
diff --git a/src/models/user.js b/src/models/user.js
index c507b49a37407a72b15071c1ab7a3d695b227ecb..e35436c44960a93f7cb76fcd8fabd3fbc2f0badd 100644
--- a/src/models/user.js
+++ b/src/models/user.js
@@ -1,6 +1,7 @@
 export default class User {
 
-    constructor(name, username, email, password) {
+    constructor(firstname, name, username, email, password) {
+        this.firstname = firstname;
         this.name = name;
         this.username = username;
         this.email = email;
diff --git a/src/services/auth.service.js b/src/services/auth.service.js
index a67d93d73415612ba8b62569bfcaa8dfdac3cdfe..fe87078f40f1a9f18406d7f43d84ff1413557782 100644
--- a/src/services/auth.service.js
+++ b/src/services/auth.service.js
@@ -27,6 +27,8 @@ class AuthService {
 
     register(user) {
         return axios.post(API_URL + 'register', {
+            firstname: user.firstname,
+            name: user.name,
             username: user.username,
             email: user.email,
             password: user.password