diff --git a/frontend/src/apis/loginAPI.js b/frontend/src/apis/loginAPI.js
index 55e32e6dd..62ea680df 100644
--- a/frontend/src/apis/loginAPI.js
+++ b/frontend/src/apis/loginAPI.js
@@ -88,6 +88,37 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
   },
+  changePasswordProfil: async (sessionId, email, password, passwordNew) => {
+    const payload = {
+      session_id: sessionId,
+      email,
+      update: {
+        'User.password': password,
+        'User.passwordNew': passwordNew,
+      },
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
+  },
+  changeEmailProfil: async (sessionId, email, emailNew) => {
+    const payload = {
+      session_id: sessionId,
+      email,
+      update: {
+        'User.emailNew': emailNew,
+      },
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
+  },
+  changeUsernameProfil: async (sessionId, email, usernameNew) => {
+    const payload = {
+      session_id: sessionId,
+      email,
+      update: {
+        'User.usernameNew': usernameNew,
+      },
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
+  },
   updateLanguage: async (sessionId, email, language) => {
     const payload = {
       session_id: sessionId,
@@ -98,6 +129,18 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
   },
+  updateUserdata: async (sessionId, email, firstName, lastName, description) => {
+    const payload = {
+      session_id: sessionId,
+      email,
+      update: {
+        'User.first_name': firstName,
+        'User.last_name': lastName,
+        'User.description': description,
+      },
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
+  },
 }
 
 export default loginAPI
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
index e0d112ad3..2e27db338 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@@ -1,73 +1,103 @@
 <template>
-  <b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
+  <b-card id="userdata_form" class="bg-transparent" style="background-color: #ebebeba3 !important">
     <b-container>
       <b-row class="mb-4 text-right">
-        <b-col class="text-right" @click="edit_userdata = !edit_userdata">
-          <span v-if="edit_userdata">{{ $t('form.edit') }}</span>
+        <b-col class="text-right">
+          <a href="#userdata_form" v-if="edit_userdata" @click="edit_userdata = !edit_userdata">
+            <span>{{ $t('form.edit') }}</span>
+          </a>
           <div v-else>
-            <span>
-              {{ $t('form.edit') }}
-              <b>{{ $t('form.cancel') }}</b>
-            </span>
-            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
+            <a href="#userdata_form" @click="onSubmit">
+              <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
+            </a>
+            <a href="#userdata_form" @click="edit_userdata = !edit_userdata">
+              <span>
+                <b>{{ $t('form.cancel') }}</b>
+              </span>
+            </a>
           </div>
         </b-col>
       </b-row>
+
+      <div>
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+            <small>{{ $t('form.firstname') }}</small>
+          </b-col>
+          <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
+            {{ UserProfileTestData.name }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-input type="text" v-model="name"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+            <small>{{ $t('form.lastname') }}</small>
+          </b-col>
+          <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
+            {{ UserProfileTestData.lastname }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-input type="text" v-model="lastname"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+            <small>{{ $t('form.description') }}</small>
+          </b-col>
+          <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
+            {{ UserProfileTestData.desc }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-textarea
+              rows="3"
+              max-rows="6"
+              placeholder="UserProfileTestData.dec"
+              v-model="dec"
+            ></b-textarea>
+          </b-col>
+        </b-row>
+      </div>
     </b-container>
-    <div>
-      <b-row class="mb-3">
-        <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-          <small>{{ $t('form.firstname') }}</small>
-        </b-col>
-        <b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
-          {{ UserProfileTestData.name }}
-        </b-col>
-        <b-col v-else class="col-lg-9 col-md-12 col-sm-12">
-          <b-input type="text" v-model="$props.UserProfileTestData.name"></b-input>
-        </b-col>
-      </b-row>
-      <b-row class="mb-3">
-        <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-          <small>{{ $t('form.lastname') }}</small>
-        </b-col>
-        <b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
-          {{ UserProfileTestData.lastname }}
-        </b-col>
-        <b-col v-else class="col-lg-9 col-md-12 col-sm-12">
-          <b-input type="text" v-model="$props.UserProfileTestData.lastname"></b-input>
-        </b-col>
-      </b-row>
-      <b-row class="mb-3">
-        <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-          <small>{{ $t('form.description') }}</small>
-        </b-col>
-        <b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
-          {{ UserProfileTestData.desc }}
-        </b-col>
-        <b-col v-else class="col-lg-9 col-md-12 col-sm-12">
-          <b-textarea
-            rows="3"
-            max-rows="6"
-            placeholder="UserProfileTestData.dec"
-            v-model="$props.UserProfileTestData.dec"
-          ></b-textarea>
-        </b-col>
-      </b-row>
-    </div>
   </b-card>
 </template>
 <script>
+import loginAPI from '../../../apis/loginAPI'
+
 export default {
   name: 'FormUserData',
 
   data() {
     return {
       edit_userdata: true,
+      sessionId: null,
+      email: null,
+      name: this.UserProfileTestData.name,
+      lastname: this.UserProfileTestData.lastname,
+      desc: this.UserProfileTestData.desc,
     }
   },
   props: {
     UserProfileTestData: { type: Object },
   },
+  methods: {
+    async onSubmit() {
+      // console.log(this.$props.UserProfileTestData)
+      const result = await loginAPI.updateUserdata(
+        this.sessionId,
+        this.email,
+        this.name,
+        this.lastname,
+        this.desc,
+      )
+      if (result.success) {
+        alert('updateUserdata success')
+      } else {
+        alert(result.result.message)
+      }
+    },
+  },
 }
 </script>
 <style></style>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue
index b46898907..524a1d8e2 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue
@@ -1,31 +1,39 @@
 <template>
-  <b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
+  <b-card id="formusermail" class="bg-transparent" style="background-color: #ebebeba3 !important">
     <b-container>
       <b-row class="mb-4 text-right">
-        <b-col class="text-right" @click="edit_email = !edit_email">
-          <span v-if="edit_email">E-Mail {{ $t('form.change') }}</span>
+        <b-col class="text-right">
+          <a href="#formusermail" v-if="edit_email" @click="edit_email = !edit_email">
+            <span>E-Mail {{ $t('form.change') }}</span>
+          </a>
           <div v-else>
-            <span>
-              E-Mail {{ $t('form.change') }}
-              <b>{{ $t('form.cancel') }}</b>
-            </span>
-            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
+            <a href="#formusermail" @click="onSubmit">
+              <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
+            </a>
+            <a href="#formusermail" @click="edit_email = !edit_email">
+              <span>
+                <b>{{ $t('form.cancel') }}</b>
+              </span>
+            </a>
           </div>
         </b-col>
       </b-row>
+
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>E-Mail</small>
+        </b-col>
+        <b-col v-if="edit_email" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
+        <b-col v-else class="col-md-9 col-sm-10">
+          <b-input type="text" v-model="$store.state.email"></b-input>
+        </b-col>
+      </b-row>
     </b-container>
-    <b-row class="mb-3">
-      <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-        <small>E-Mail</small>
-      </b-col>
-      <b-col v-if="edit_email" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
-      <b-col v-else class="col-md-9 col-sm-10">
-        <b-input type="text" v-model="$store.state.email"></b-input>
-      </b-col>
-    </b-row>
   </b-card>
 </template>
 <script>
+import loginAPI from '../../../apis/loginAPI'
+
 export default {
   name: 'FormUserMail',
   data() {
@@ -33,8 +41,21 @@ export default {
       edit_email: true,
     }
   },
-  props: {
-    UserProfileTestData: { type: Object },
+  methods: {
+    async onSubmit() {
+      // console.log(this.data)
+      const result = await loginAPI.changeEmailProfil(
+        this.sessionId,
+        this.email,
+        this.password,
+        this.passwordNew,
+      )
+      if (result.success) {
+        alert('changePassword success')
+      } else {
+        alert(result.result.message)
+      }
+    },
   },
 }
 </script>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
index 50f67976b..1affed191 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
@@ -1,15 +1,20 @@
 <template>
-  <b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
+  <b-card id="change_pwd" class="bg-transparent" style="background-color: #ebebeba3 !important">
     <b-container>
       <b-row class="mb-4 text-right">
-        <b-col class="text-right" @click="edit_pwd = !edit_pwd">
-          <span v-if="edit_pwd">{{ $t('form.password') }} {{ $t('form.change') }}</span>
+        <b-col class="text-right">
+          <a href="#change_pwd" v-if="edit_pwd" @click="edit_pwd = !edit_pwd">
+            <span>{{ $t('form.password') }} {{ $t('form.change') }}</span>
+          </a>
           <div v-else>
-            <span>
-              {{ $t('form.password') }} {{ $t('form.change') }}
-              <b>{{ $t('form.cancel') }}</b>
-            </span>
-            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
+            <a href="#change_pwd" @click="onSubmit">
+              <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
+            </a>
+            <a href="#change_pwd" @click="edit_pwd = !edit_pwd">
+              <span>
+                <b>{{ $t('form.cancel') }}</b>
+              </span>
+            </a>
           </div>
         </b-col>
       </b-row>
@@ -20,7 +25,11 @@
             <small>{{ $t('form.password_old') }}</small>
           </b-col>
           <b-col class="col-md-9 col-sm-10">
-            <b-input type="text" :placeholder="$t('form.password_old')"></b-input>
+            <b-input
+              type="text"
+              :placeholder="$t('form.password_old')"
+              v-model="password"
+            ></b-input>
           </b-col>
         </b-row>
         <b-row class="mb-3">
@@ -28,7 +37,11 @@
             <small>{{ $t('form.password_new') }}</small>
           </b-col>
           <b-col class="col-md-9 col-sm-10">
-            <b-input type="text" :placeholder="$t('form.password_new')"></b-input>
+            <b-input
+              type="text"
+              :placeholder="$t('form.password_new')"
+              v-model="passwordNew"
+            ></b-input>
           </b-col>
         </b-row>
         <b-row class="mb-3">
@@ -36,7 +49,11 @@
             <small>{{ $t('form.password_new_repeat') }}</small>
           </b-col>
           <b-col class="col-md-9 col-sm-10">
-            <b-input type="text" :placeholder="$t('form.password_new_repeat')"></b-input>
+            <b-input
+              type="text"
+              :placeholder="$t('form.password_new_repeat')"
+              v-model="passwordNew2"
+            ></b-input>
           </b-col>
         </b-row>
       </div>
@@ -44,15 +61,35 @@
   </b-card>
 </template>
 <script>
+import loginAPI from '../../../apis/loginAPI'
+
 export default {
   name: 'FormUserPasswort',
   data() {
     return {
       edit_pwd: true,
+      sessionId: null,
+      email: null,
+      password: '',
+      passwordNew: '',
+      passwordNew2: '',
     }
   },
-  props: {
-    UserProfileTestData: { type: Object },
+  methods: {
+    async onSubmit() {
+      // console.log(this.data)
+      const result = await loginAPI.changePasswordProfil(
+        this.sessionId,
+        this.email,
+        this.password,
+        this.passwordNew,
+      )
+      if (result.success) {
+        alert('changePassword success')
+      } else {
+        alert(result.result.message)
+      }
+    },
   },
 }
 </script>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
index 3992d993e..a5c08cff4 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
@@ -1,46 +1,64 @@
 <template>
-  <b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
+  <b-card id="formusername" class="bg-transparent" style="background-color: #ebebeba3 !important">
     <b-container>
       <b-row class="mb-4 text-right">
-        <b-col class="text-right" @click="edit_username = !edit_username">
-          <span v-if="edit_username">{{ $t('form.username') }} {{ $t('form.change') }}</span>
+        <b-col class="text-right">
+          <a href="#formusername" v-if="edit_username" @click="edit_username = !edit_username">
+            <span>{{ $t('form.username') }} {{ $t('form.change') }}</span>
+          </a>
           <div v-else>
-            <span>
-              {{ $t('form.username') }} {{ $t('form.change') }}
-              <b>{{ $t('form.cancel') }}</b>
-            </span>
-            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
+            <a href="#formusername" @click="onSubmit">
+              <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
+            </a>
+            <a href="#formusername" @click="edit_username = !edit_username">
+              <span>
+                <b>{{ $t('form.cancel') }}</b>
+              </span>
+            </a>
+          </div>
+        </b-col>
+      </b-row>
+
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>{{ $t('form.username') }}</small>
+        </b-col>
+        <b-col v-if="edit_username" class="col-md-9 col-sm-10">@{{ username }}</b-col>
+        <b-col v-else class="col-md-9 col-sm-10">
+          <b-input type="text" v-model="this.username"></b-input>
+          <div>
+            {{ $t('form.change_username_info') }}
           </div>
         </b-col>
       </b-row>
     </b-container>
-    <b-row class="mb-3">
-      <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-        <small>{{ $t('form.username') }}</small>
-      </b-col>
-      <b-col v-if="edit_username" class="col-md-9 col-sm-10">
-        @{{ UserProfileTestData.username }}
-      </b-col>
-      <b-col v-else class="col-md-9 col-sm-10">
-        <b-input type="text" v-model="$props.UserProfileTestData.username"></b-input>
-        <div>
-          {{ $t('form.change_username_info') }}
-        </div>
-      </b-col>
-    </b-row>
   </b-card>
 </template>
 <script>
+import loginAPI from '../../../apis/loginAPI'
+
 export default {
   name: 'FormUsername',
   data() {
     return {
       edit_username: true,
+      username: this.UserProfileTestData.username,
     }
   },
   props: {
     UserProfileTestData: { type: Object },
   },
+  methods: {
+    async onSubmit() {
+      // console.log(this.data)
+      const result = await loginAPI.changeUsernameProfil(this.username)
+      if (result.success) {
+        alert('changeUsername success')
+      } else {
+        alert(result.result.message)
+      }
+    },
+  },
 }
 </script>
 <style></style>
diff --git a/frontend/src/views/Pages/UserProfileOverview.vue b/frontend/src/views/Pages/UserProfileOverview.vue
index c51d38b1d..c67afacfb 100644
--- a/frontend/src/views/Pages/UserProfileOverview.vue
+++ b/frontend/src/views/Pages/UserProfileOverview.vue
@@ -4,8 +4,8 @@
 
     <form-user-data :UserProfileTestData="UserProfileTestData" />
     <form-username :UserProfileTestData="UserProfileTestData" />
-    <form-user-mail :UserProfileTestData="UserProfileTestData" />
-    <form-user-passwort :UserProfileTestData="UserProfileTestData" />
+    <form-user-mail />
+    <form-user-passwort />
   </b-container>
 </template>
 <script>
@@ -28,6 +28,7 @@ export default {
     transactionCount: { type: Number, default: 0 },
     UserProfileTestData: { type: Object },
   },
+  methods: {},
 }
 </script>
 <style></style>