diff --git a/package.json b/package.json
index 77bfca9..75eba11 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "got": "^11.8.2",
     "redaxios": "^0.4.1",
     "toastify-js": "^1.9.3",
+    "validator": "^13.5.2",
     "vue": "^3.0.5",
     "vue-phone-number-input": "^1.1.10",
     "vue-router": "4"
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 90bc51f..16ed785 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -47,13 +47,16 @@
           <span class="font-bold">*</span>
         </label>
         <input
+          v-model="userdetails.mail"
           name="email_address"
           id="email_address"
           autocomplete="off"
           placeholder="E-Mail Adresse"
-          type="text"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          type="email"
+          :class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-gray-300': (isEmail(userdetails.mail)) }"
+          class="dark:bg-gray-800 mt-1 block w-full shadow-sm rounded-l-md sm:text-sm border bg-gray-50 text-gray-100 rounded-md p-2"
         />
+        <p class="text-sm">Bitte geben Sie eine gültige E-Mail Adresse an</p>
         <div class="grid grid-cols-6 mt-6">
           <div class="col-span-6"></div>
           <div class="flex items-start col-span-6">
@@ -155,7 +158,9 @@
 import { ref } from "vue";
 import axios from "redaxios";
 import Toastify from "toastify-js";
+import isEmail from 'validator/es/lib/isEmail';
 
+let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "" });
 let provide_address = ref(false);
 let agb_accepted = ref(false);
 function login() {