diff --git a/admin/src/components/UserQuery.vue b/admin/src/components/UserQuery.vue
new file mode 100644
index 000000000..2a31a8dea
--- /dev/null
+++ b/admin/src/components/UserQuery.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <b-input-group>
+      <b-form-input
+        type="text"
+        class="test-input-criteria"
+        v-model="currentValue"
+        :placeholder="$t('user_search')"
+      ></b-form-input>
+      <b-input-group-append class="test-click-clear-criteria" @click="currentValue = ''">
+        <b-input-group-text class="pointer">
+          <b-icon icon="x" />
+        </b-input-group-text>
+      </b-input-group-append>
+    </b-input-group>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UserQuery',
+  props: {
+    value: { type: String, default: '' },
+  },
+  data() {
+    return {
+      currentValue: this.value,
+    }
+  },
+  watch: {
+    currentValue() {
+      if (this.value !== this.currentValue) {
+        this.$emit('input', this.currentValue)
+      }
+    },
+  },
+}
+</script>
diff --git a/admin/src/graphql/adminListContributions.js b/admin/src/graphql/adminListContributions.js
index 3c1dcd69c..6a9a69b17 100644
--- a/admin/src/graphql/adminListContributions.js
+++ b/admin/src/graphql/adminListContributions.js
@@ -7,6 +7,7 @@ export const adminListContributions = gql`
     $order: Order = DESC
     $statusFilter: [ContributionStatus!]
     $userId: Int
+    $query: String
   ) {
     adminListContributions(
       currentPage: $currentPage
@@ -14,6 +15,7 @@ export const adminListContributions = gql`
       order: $order
       statusFilter: $statusFilter
       userId: $userId
+      query: $query
     ) {
       contributionCount
       contributionList {
diff --git a/admin/src/pages/CreationConfirm.spec.js b/admin/src/pages/CreationConfirm.spec.js
index c8f01d40d..9e1ddb4a4 100644
--- a/admin/src/pages/CreationConfirm.spec.js
+++ b/admin/src/pages/CreationConfirm.spec.js
@@ -341,6 +341,7 @@ describe('CreationConfirm', () => {
             currentPage: 1,
             order: 'DESC',
             pageSize: 25,
+            query: '',
             statusFilter: ['CONFIRMED'],
           })
         })
@@ -356,6 +357,7 @@ describe('CreationConfirm', () => {
               currentPage: 1,
               order: 'DESC',
               pageSize: 25,
+              query: '',
               statusFilter: ['IN_PROGRESS', 'PENDING'],
             })
           })
@@ -372,6 +374,7 @@ describe('CreationConfirm', () => {
               currentPage: 1,
               order: 'DESC',
               pageSize: 25,
+              query: '',
               statusFilter: ['DENIED'],
             })
           })
@@ -388,6 +391,7 @@ describe('CreationConfirm', () => {
               currentPage: 1,
               order: 'DESC',
               pageSize: 25,
+              query: '',
               statusFilter: ['DELETED'],
             })
           })
@@ -404,6 +408,7 @@ describe('CreationConfirm', () => {
               currentPage: 1,
               order: 'DESC',
               pageSize: 25,
+              query: '',
               statusFilter: ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED', 'DELETED'],
             })
           })
@@ -424,6 +429,7 @@ describe('CreationConfirm', () => {
                   currentPage: 2,
                   order: 'DESC',
                   pageSize: 25,
+                  query: '',
                   statusFilter: ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED', 'DELETED'],
                 })
               })
@@ -439,6 +445,7 @@ describe('CreationConfirm', () => {
                     currentPage: 1,
                     order: 'DESC',
                     pageSize: 25,
+                    query: '',
                     statusFilter: ['IN_PROGRESS', 'PENDING'],
                   })
                 })
@@ -449,6 +456,40 @@ describe('CreationConfirm', () => {
       })
     })
 
+    describe('user query', () => {
+      describe('with user query', () => {
+        beforeEach(() => {
+          wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', 'query')
+        })
+
+        it('calls the API with query', () => {
+          expect(adminListContributionsMock).toBeCalledWith({
+            currentPage: 1,
+            order: 'DESC',
+            pageSize: 25,
+            query: 'query',
+            statusFilter: ['IN_PROGRESS', 'PENDING'],
+          })
+        })
+
+        describe('reset query', () => {
+          beforeEach(() => {
+            wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', '')
+          })
+
+          it('calls the API with empty query', () => {
+            expect(adminListContributionsMock).toBeCalledWith({
+              currentPage: 1,
+              order: 'DESC',
+              pageSize: 25,
+              query: '',
+              statusFilter: ['IN_PROGRESS', 'PENDING'],
+            })
+          })
+        })
+      })
+    })
+
     describe('update status', () => {
       beforeEach(async () => {
         await wrapper.findComponent({ name: 'OpenCreationsTable' }).vm.$emit('update-status', 2)
diff --git a/admin/src/pages/CreationConfirm.vue b/admin/src/pages/CreationConfirm.vue
index c8e756223..34458e0aa 100644
--- a/admin/src/pages/CreationConfirm.vue
+++ b/admin/src/pages/CreationConfirm.vue
@@ -1,6 +1,7 @@
 <!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys -->
 <template>
   <div class="creation-confirm">
+    <user-query class="mb-4 mt-2" v-model="query" />
     <div>
       <b-tabs v-model="tabIndex" content-class="mt-3" fill>
         <b-tab active :title-link-attributes="{ 'data-test': 'open' }">
@@ -85,6 +86,7 @@
 <script>
 import Overlay from '../components/Overlay'
 import OpenCreationsTable from '../components/Tables/OpenCreationsTable'
+import UserQuery from '../components/UserQuery'
 import { adminListContributions } from '../graphql/adminListContributions'
 import { adminDeleteContribution } from '../graphql/adminDeleteContribution'
 import { confirmContribution } from '../graphql/confirmContribution'
@@ -103,6 +105,7 @@ export default {
   components: {
     OpenCreationsTable,
     Overlay,
+    UserQuery,
   },
   data() {
     return {
@@ -114,6 +117,7 @@ export default {
       rows: 0,
       currentPage: 1,
       pageSize: 25,
+      query: '',
     }
   },
   watch: {
@@ -409,6 +413,7 @@ export default {
           currentPage: this.currentPage,
           pageSize: this.pageSize,
           statusFilter: this.statusFilter,
+          query: this.query,
         }
       },
       fetchPolicy: 'no-cache',
diff --git a/admin/src/pages/UserSearch.spec.js b/admin/src/pages/UserSearch.spec.js
index 1f9b0ce6e..7979ed6d0 100644
--- a/admin/src/pages/UserSearch.spec.js
+++ b/admin/src/pages/UserSearch.spec.js
@@ -186,7 +186,7 @@ describe('UserSearch', () => {
       describe('reset the search field', () => {
         it('calls the API with empty criteria', async () => {
           jest.clearAllMocks()
-          await wrapper.find('.test-click-clear-criteria').trigger('click')
+          await wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', '')
           expect(apolloQueryMock).toBeCalledWith(
             expect.objectContaining({
               variables: {
diff --git a/admin/src/pages/UserSearch.vue b/admin/src/pages/UserSearch.vue
index d4e4083c2..95b9a6833 100644
--- a/admin/src/pages/UserSearch.vue
+++ b/admin/src/pages/UserSearch.vue
@@ -23,21 +23,7 @@
       </b-button>
     </div>
     <label>{{ $t('user_search') }}</label>
-    <div>
-      <b-input-group>
-        <b-form-input
-          type="text"
-          class="test-input-criteria"
-          v-model="criteria"
-          :placeholder="$t('user_search')"
-        ></b-form-input>
-        <b-input-group-append class="test-click-clear-criteria" @click="criteria = ''">
-          <b-input-group-text class="pointer">
-            <b-icon icon="x" />
-          </b-input-group-text>
-        </b-input-group-append>
-      </b-input-group>
-    </div>
+    <user-query class="mb-4 mt-2" v-model="criteria" />
     <search-user-table
       type="PageUserSearch"
       :items="searchResult"
@@ -61,12 +47,14 @@
 import SearchUserTable from '../components/Tables/SearchUserTable'
 import { searchUsers } from '../graphql/searchUsers'
 import { creationMonths } from '../mixins/creationMonths'
+import UserQuery from '../components/UserQuery'
 
 export default {
   name: 'UserSearch',
   mixins: [creationMonths],
   components: {
     SearchUserTable,
+    UserQuery,
   },
   data() {
     return {
diff --git a/backend/src/graphql/arg/CreateUserArgs.ts b/backend/src/graphql/arg/CreateUserArgs.ts
index cb263b84a..c348b9b4c 100644
--- a/backend/src/graphql/arg/CreateUserArgs.ts
+++ b/backend/src/graphql/arg/CreateUserArgs.ts
@@ -2,6 +2,9 @@ import { ArgsType, Field, Int } from 'type-graphql'
 
 @ArgsType()
 export class CreateUserArgs {
+  @Field(() => String, { nullable: true })
+  alias?: string | null
+
   @Field(() => String)
   email: string
 
diff --git a/backend/src/graphql/resolver/ContributionResolver.test.ts b/backend/src/graphql/resolver/ContributionResolver.test.ts
index c6fb180e7..735b6ee69 100644
--- a/backend/src/graphql/resolver/ContributionResolver.test.ts
+++ b/backend/src/graphql/resolver/ContributionResolver.test.ts
@@ -2890,6 +2890,97 @@ describe('ContributionResolver', () => {
           ]),
         })
       })
+
+      describe('with user query', () => {
+        it('returns only contributions of the queried user', async () => {
+          const {
+            data: { adminListContributions: contributionListObject },
+          } = await query({
+            query: adminListContributions,
+            variables: {
+              query: 'Peter',
+            },
+          })
+          expect(contributionListObject.contributionList).toHaveLength(3)
+          expect(contributionListObject).toMatchObject({
+            contributionCount: 3,
+            contributionList: expect.arrayContaining([
+              expect.objectContaining({
+                amount: expect.decimalEqual(400),
+                firstName: 'Peter',
+                id: expect.any(Number),
+                lastName: 'Lustig',
+                memo: 'Herzlich Willkommen bei Gradido!',
+                messagesCount: 0,
+                status: 'PENDING',
+              }),
+              expect.objectContaining({
+                amount: expect.decimalEqual(100),
+                firstName: 'Peter',
+                id: expect.any(Number),
+                lastName: 'Lustig',
+                memo: 'Test env contribution',
+                messagesCount: 0,
+                status: 'PENDING',
+              }),
+              expect.objectContaining({
+                amount: expect.decimalEqual(200),
+                firstName: 'Peter',
+                id: expect.any(Number),
+                lastName: 'Lustig',
+                memo: 'Das war leider zu Viel!',
+                messagesCount: 0,
+                status: 'DELETED',
+              }),
+            ]),
+          })
+        })
+
+        // test for case sensitivity and email
+        it('returns only contributions of the queried user email', async () => {
+          const {
+            data: { adminListContributions: contributionListObject },
+          } = await query({
+            query: adminListContributions,
+            variables: {
+              query: 'RAEUBER', // only found in lowercase in the email
+            },
+          })
+          expect(contributionListObject.contributionList).toHaveLength(3)
+          expect(contributionListObject).toMatchObject({
+            contributionCount: 3,
+            contributionList: expect.arrayContaining([
+              expect.objectContaining({
+                amount: expect.decimalEqual(166),
+                firstName: 'Räuber',
+                id: expect.any(Number),
+                lastName: 'Hotzenplotz',
+                memo: 'Whatever contribution',
+                messagesCount: 0,
+                status: 'DENIED',
+              }),
+              expect.objectContaining({
+                amount: expect.decimalEqual(166),
+                firstName: 'Räuber',
+                id: expect.any(Number),
+                lastName: 'Hotzenplotz',
+                memo: 'Whatever contribution',
+                messagesCount: 0,
+                status: 'DELETED',
+              }),
+              expect.objectContaining({
+                amount: expect.decimalEqual(166),
+                firstName: 'Räuber',
+                id: expect.any(Number),
+                lastName: 'Hotzenplotz',
+                memo: 'Whatever contribution',
+                messagesCount: 0,
+                status: 'CONFIRMED',
+              }),
+            ]),
+          })
+        })
+      })
     })
   })
 })
diff --git a/backend/src/graphql/resolver/ContributionResolver.ts b/backend/src/graphql/resolver/ContributionResolver.ts
index a400166e6..21bc416e5 100644
--- a/backend/src/graphql/resolver/ContributionResolver.ts
+++ b/backend/src/graphql/resolver/ContributionResolver.ts
@@ -138,7 +138,7 @@ export class ContributionResolver {
       currentPage,
       pageSize,
       withDeleted: true,
-      relations: ['messages'],
+      relations: { messages: true },
       userId: user.id,
       statusFilter,
     })
@@ -160,7 +160,7 @@ export class ContributionResolver {
       order,
       currentPage,
       pageSize,
-      relations: ['user'],
+      relations: { user: true },
       statusFilter,
     })
 
@@ -372,6 +372,8 @@ export class ContributionResolver {
     statusFilter?: ContributionStatus[] | null,
     @Arg('userId', () => Int, { nullable: true })
     userId?: number | null,
+    @Arg('query', () => String, { nullable: true })
+    query?: string | null,
   ): Promise<ContributionListResult> {
     const [dbContributions, count] = await findContributions({
       order,
@@ -379,8 +381,14 @@ export class ContributionResolver {
       pageSize,
       withDeleted: true,
       userId,
-      relations: ['user', 'messages'],
+      relations: {
+        user: {
+          emailContact: true,
+        },
+        messages: true,
+      },
       statusFilter,
+      query,
     })
 
     return new ContributionListResult(
diff --git a/backend/src/graphql/resolver/UserResolver.ts b/backend/src/graphql/resolver/UserResolver.ts
index 227684b7a..da58ea096 100644
--- a/backend/src/graphql/resolver/UserResolver.ts
+++ b/backend/src/graphql/resolver/UserResolver.ts
@@ -195,7 +195,15 @@ export class UserResolver {
   @Mutation(() => User)
   async createUser(
     @Args()
-    { email, firstName, lastName, language, publisherId = null, redeemCode = null }: CreateUserArgs,
+    {
+      alias = null,
+      email,
+      firstName,
+      lastName,
+      language,
+      publisherId = null,
+      redeemCode = null,
+    }: CreateUserArgs,
   ): Promise<User> {
     logger.addContext('user', 'unknown')
     logger.info(
@@ -231,6 +239,9 @@ export class UserResolver {
         user.lastName = lastName
         user.language = language
         user.publisherId = publisherId
+        if (alias && (await validateAlias(alias))) {
+          user.alias = alias
+        }
         logger.debug('partly faked user', user)
 
         void sendAccountMultiRegistrationEmail({
@@ -264,6 +275,9 @@ export class UserResolver {
     dbUser.firstName = firstName
     dbUser.lastName = lastName
     dbUser.language = language
+    if (alias && (await validateAlias(alias))) {
+      dbUser.alias = alias
+    }
     dbUser.publisherId = publisherId ?? 0
     dbUser.passwordEncryptionType = PasswordEncryptionType.NO_PASSWORD
     logger.debug('new dbUser', dbUser)
diff --git a/backend/src/graphql/resolver/util/findContributions.ts b/backend/src/graphql/resolver/util/findContributions.ts
index 28984d5b1..b35d75b6b 100644
--- a/backend/src/graphql/resolver/util/findContributions.ts
+++ b/backend/src/graphql/resolver/util/findContributions.ts
@@ -1,38 +1,73 @@
-import { In } from '@dbTools/typeorm'
+import { In, Like } from '@dbTools/typeorm'
 import { Contribution as DbContribution } from '@entity/Contribution'
 
 import { ContributionStatus } from '@enum/ContributionStatus'
 import { Order } from '@enum/Order'
 
+interface Relations {
+  [key: string]: boolean | Relations
+}
+
 interface FindContributionsOptions {
   order: Order
   currentPage: number
   pageSize: number
   withDeleted?: boolean
-  relations?: string[]
+  relations?: Relations | undefined
   userId?: number | null
   statusFilter?: ContributionStatus[] | null
+  query?: string | null
 }
 
 export const findContributions = async (
   options: FindContributionsOptions,
 ): Promise<[DbContribution[], number]> => {
-  const { order, currentPage, pageSize, withDeleted, relations, userId, statusFilter } = {
+  const { order, currentPage, pageSize, withDeleted, relations, userId, statusFilter, query } = {
     withDeleted: false,
-    relations: [],
+    relations: undefined,
+    query: '',
     ...options,
   }
+
+  const requiredWhere = {
+    ...(statusFilter?.length && { contributionStatus: In(statusFilter) }),
+    ...(userId && { userId }),
+  }
+
+  const where =
+    query && relations?.user
+      ? [
+          {
+            ...requiredWhere,
+            user: {
+              firstName: Like(`%${query}%`),
+            },
+          },
+          {
+            ...requiredWhere,
+            user: {
+              lastName: Like(`%${query}%`),
+            },
+          },
+          {
+            ...requiredWhere,
+            user: {
+              emailContact: {
+                email: Like(`%${query}%`),
+              },
+            },
+          },
+        ]
+      : requiredWhere
+
   return DbContribution.findAndCount({
-    where: {
-      ...(statusFilter?.length && { contributionStatus: In(statusFilter) }),
-      ...(userId && { userId }),
-    },
+    relations,
+    where,
     withDeleted,
     order: {
       createdAt: order,
       id: order,
     },
-    relations,
     skip: (currentPage - 1) * pageSize,
     take: pageSize,
   })
diff --git a/backend/src/seeds/graphql/mutations.ts b/backend/src/seeds/graphql/mutations.ts
index 29d08b20a..d604b1f72 100644
--- a/backend/src/seeds/graphql/mutations.ts
+++ b/backend/src/seeds/graphql/mutations.ts
@@ -50,6 +50,7 @@ export const updateUserInfos = gql`
 
 export const createUser = gql`
   mutation (
+    $alias: String
     $firstName: String!
     $lastName: String!
     $email: String!
@@ -58,6 +59,7 @@ export const createUser = gql`
     $redeemCode: String
   ) {
     createUser(
+      alias: $alias
       email: $email
       firstName: $firstName
       lastName: $lastName
diff --git a/backend/src/seeds/graphql/queries.ts b/backend/src/seeds/graphql/queries.ts
index 061898ae1..1239e2131 100644
--- a/backend/src/seeds/graphql/queries.ts
+++ b/backend/src/seeds/graphql/queries.ts
@@ -235,6 +235,7 @@ export const adminListContributions = gql`
     $order: Order = DESC
     $statusFilter: [ContributionStatus!]
     $userId: Int
+    $query: String
   ) {
     adminListContributions(
       currentPage: $currentPage
@@ -242,6 +243,7 @@ export const adminListContributions = gql`
       order: $order
       statusFilter: $statusFilter
       userId: $userId
+      query: $query
     ) {
       contributionCount
       contributionList {
diff --git a/backend/src/seeds/users/UserInterface.ts b/backend/src/seeds/users/UserInterface.ts
index 08aa5d19d..181eb3f8e 100644
--- a/backend/src/seeds/users/UserInterface.ts
+++ b/backend/src/seeds/users/UserInterface.ts
@@ -1,4 +1,5 @@
 export interface UserInterface {
+  alias?: string
   email?: string
   firstName?: string
   lastName?: string
diff --git a/backend/src/seeds/users/bob-baumeister.ts b/backend/src/seeds/users/bob-baumeister.ts
index ac88611b8..b7902f7bc 100644
--- a/backend/src/seeds/users/bob-baumeister.ts
+++ b/backend/src/seeds/users/bob-baumeister.ts
@@ -1,6 +1,7 @@
 import { UserInterface } from './UserInterface'
 
 export const bobBaumeister: UserInterface = {
+  alias: 'MeisterBob',
   email: 'bob@baumeister.de',
   firstName: 'Bob',
   lastName: 'der Baumeister',
diff --git a/backend/yarn.lock b/backend/yarn.lock
index 1cfb4d8ff..d5a27d2fa 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -324,6 +324,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/runtime@^7.21.0":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
+  integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.15.4", "@babel/template@^7.3.3":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
@@ -835,7 +842,7 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@sqltools/formatter@^1.2.2":
+"@sqltools/formatter@^1.2.5":
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/@sqltools/formatter/-/formatter-1.2.5.tgz#3abc203c79b8c3e90fd6c156a0c62d5403520e12"
   integrity sha512-Uy0+khmZqUrUGm5dmMqVlnvufZRSK0FbYzVgp0UMstm+F5+W2/jnEEQyc9vo1ZR/E5ZI/B1WjjoTqBqwJL6Krw==
@@ -1230,11 +1237,6 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@types/zen-observable@0.8.3":
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.3.tgz#781d360c282436494b32fe7d9f7f8e64b3118aa3"
-  integrity sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw==
-
 "@typescript-eslint/eslint-plugin@^5.57.1":
   version "5.57.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.57.1.tgz#d1ab162a3cd2671b8a1c9ddf6e2db73b14439735"
@@ -1720,7 +1722,7 @@ apollo-utilities@^1.0.1, apollo-utilities@^1.3.0:
     ts-invariant "^0.4.0"
     tslib "^1.10.0"
 
-app-root-path@^3.0.0:
+app-root-path@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-3.1.0.tgz#5971a2fc12ba170369a7a1ef018c71e6e47c2e86"
   integrity sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==
@@ -2010,6 +2012,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -2142,7 +2151,7 @@ chalk@^2.0.0, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2564,6 +2573,13 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.29.3:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 date-format@^4.0.9:
   version "4.0.9"
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.9.tgz#4788015ac56dedebe83b03bc361f00c1ddcf1923"
@@ -2576,7 +2592,7 @@ debug@2.6.9, debug@^2.2.0:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
+debug@4, debug@^4.1.0, debug@^4.1.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -2818,10 +2834,10 @@ dotenv@^10.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
   integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
-dotenv@^8.2.0:
-  version "8.6.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
-  integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
+dotenv@^16.0.3:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
 
 duplexer3@^0.1.4:
   version "0.1.4"
@@ -3751,6 +3767,17 @@ glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 global-dirs@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.0.tgz#70a76fe84ea315ab37b1f5576cbde7d48ef72686"
@@ -3855,7 +3882,7 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0:
     mysql2 "^2.3.0"
     reflect-metadata "^0.1.13"
     ts-mysql-migrate "^1.0.2"
-    typeorm "^0.2.38"
+    typeorm "^0.3.16"
     uuid "^8.3.2"
 
 grapheme-splitter@^1.0.4:
@@ -5062,7 +5089,7 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^4.0.0, js-yaml@^4.1.0:
+js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
   integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
@@ -5487,6 +5514,13 @@ minimatch@^3.0.5, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@@ -5507,10 +5541,10 @@ mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 
-mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+mkdirp@^2.1.3:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-2.1.6.tgz#964fbcb12b2d8c5d6fbc62a963ac95a273e2cc19"
+  integrity sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==
 
 moo@^0.5.0, moo@^0.5.1:
   version "0.5.1"
@@ -6454,6 +6488,11 @@ reflect-metadata@^0.1.13:
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
   integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regexp-tree@~0.1.1:
   version "0.1.27"
   resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.27.tgz#2198f0ef54518ffa743fe74d983b56ffd631b6cd"
@@ -6630,11 +6669,6 @@ safe-regex@^2.1.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sax@>=0.6.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
-
 saxes@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
@@ -7442,28 +7476,26 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typeorm@^0.2.38:
-  version "0.2.45"
-  resolved "https://registry.yarnpkg.com/typeorm/-/typeorm-0.2.45.tgz#e5bbb3af822dc4646bad96cfa48cd22fa4687cea"
-  integrity sha512-c0rCO8VMJ3ER7JQ73xfk0zDnVv0WDjpsP6Q1m6CVKul7DB9iVdWLRjPzc8v2eaeBuomsbZ2+gTaYr8k1gm3bYA==
+typeorm@^0.3.16:
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/typeorm/-/typeorm-0.3.17.tgz#a73c121a52e4fbe419b596b244777be4e4b57949"
+  integrity sha512-UDjUEwIQalO9tWw9O2A4GU+sT3oyoUXheHJy4ft+RFdnRdQctdQ34L9SqE2p7LdwzafHx1maxT+bqXON+Qnmig==
   dependencies:
-    "@sqltools/formatter" "^1.2.2"
-    app-root-path "^3.0.0"
+    "@sqltools/formatter" "^1.2.5"
+    app-root-path "^3.1.0"
     buffer "^6.0.3"
-    chalk "^4.1.0"
+    chalk "^4.1.2"
     cli-highlight "^2.1.11"
-    debug "^4.3.1"
-    dotenv "^8.2.0"
-    glob "^7.1.6"
-    js-yaml "^4.0.0"
-    mkdirp "^1.0.4"
+    date-fns "^2.29.3"
+    debug "^4.3.4"
+    dotenv "^16.0.3"
+    glob "^8.1.0"
+    mkdirp "^2.1.3"
     reflect-metadata "^0.1.13"
     sha.js "^2.4.11"
-    tslib "^2.1.0"
-    uuid "^8.3.2"
-    xml2js "^0.4.23"
-    yargs "^17.0.1"
-    zen-observable-ts "^1.0.0"
+    tslib "^2.5.0"
+    uuid "^9.0.0"
+    yargs "^17.6.2"
 
 typescript@^4.3.4:
   version "4.4.3"
@@ -7614,6 +7646,11 @@ uuid@^8.0.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 v8-to-istanbul@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz#0aeb763894f1a0a1676adf8a8b7612a38902446c"
@@ -7853,19 +7890,6 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xml2js@^0.4.23:
-  version "0.4.23"
-  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
-  integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==
-  dependencies:
-    sax ">=0.6.0"
-    xmlbuilder "~11.0.0"
-
-xmlbuilder@~11.0.0:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
-  integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
-
 xmlchars@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
@@ -7917,10 +7941,10 @@ yargs@^16.0.0, yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@^17.0.1:
-  version "17.7.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.1.tgz#34a77645201d1a8fc5213ace787c220eabbd0967"
-  integrity sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==
+yargs@^17.6.2:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
   dependencies:
     cliui "^8.0.1"
     escalade "^3.1.1"
@@ -7948,15 +7972,7 @@ zen-observable-ts@^0.8.21:
     tslib "^1.9.3"
     zen-observable "^0.8.0"
 
-zen-observable-ts@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.1.0.tgz#2d1aa9d79b87058e9b75698b92791c1838551f83"
-  integrity sha512-1h4zlLSqI2cRLPJUHJFL8bCWHhkpuXkF+dbGkRaWjgDIG26DmzyshUMrdV/rL3UnR+mhaX4fRq8LPouq0MYYIA==
-  dependencies:
-    "@types/zen-observable" "0.8.3"
-    zen-observable "0.8.15"
-
-zen-observable@0.8.15, zen-observable@^0.8.0:
+zen-observable@^0.8.0:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
diff --git a/e2e-tests/cypress/support/step_definitions/user_profile_change_password_steps.ts b/e2e-tests/cypress/support/step_definitions/user_profile_change_password_steps.ts
index c939b8de2..84ffe46c6 100644
--- a/e2e-tests/cypress/support/step_definitions/user_profile_change_password_steps.ts
+++ b/e2e-tests/cypress/support/step_definitions/user_profile_change_password_steps.ts
@@ -7,7 +7,7 @@ const profilePage = new ProfilePage()
 When('the user opens the change password menu', () => {
   cy.get(profilePage.openChangePassword).click()
   cy.get(profilePage.newPasswordRepeatInput).should('be.visible')
-  cy.get(profilePage.submitNewPasswordBtn).should('be.disabled')
+  cy.get(profilePage.submitNewPasswordBtn).should('have.class','btn-light')
 })
 
 When('the user fills the password form with:', (table: DataTable) => {
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index da2182c54..80a0d2d22 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -56,6 +56,8 @@ module.exports = {
           'settings.password.subtitle',
           'math.asterisk',
           '/pageTitle./',
+          'error.empty-transactionlist',
+          'error.no-transactionlist',
         ],
         enableFix: false,
       },
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a35017836..46f7dacb8 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" ref="app" :class="darkMode ? 'dark-mode' : ''">
     <div :class="$route.meta.requiresAuth ? 'appContent' : ''">
       <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayout'" />
       <div class="goldrand position-fixed fixed-bottom zindex1000"></div>
@@ -13,6 +13,11 @@ import AuthLayout from '@/layouts/AuthLayout'
 
 export default {
   name: 'App',
+  computed: {
+    darkMode() {
+      return this.$store.state.darkMode
+    },
+  },
   components: {
     DashboardLayout,
     AuthLayout,
diff --git a/frontend/src/assets/scss/gradido-template-dark.scss b/frontend/src/assets/scss/gradido-template-dark.scss
index 0c6f6656d..7f06203c1 100644
--- a/frontend/src/assets/scss/gradido-template-dark.scss
+++ b/frontend/src/assets/scss/gradido-template-dark.scss
@@ -3,7 +3,7 @@ $mode-toggle-bg: #262626;
 
 #app {
   &.dark-mode {
-    background-color: black;
+    background-color: $dark;
     color: #fff;
   }
 }
diff --git a/frontend/src/components/Inputs/InputPassword.vue b/frontend/src/components/Inputs/InputPassword.vue
index b457e7673..cd60d94d5 100644
--- a/frontend/src/components/Inputs/InputPassword.vue
+++ b/frontend/src/components/Inputs/InputPassword.vue
@@ -17,6 +17,7 @@
           :placeholder="placeholder"
           :type="showPassword ? 'text' : 'password'"
           :state="validated ? valid : false"
+          data-test="password-input-field"
         ></b-form-input>
         <b-input-group-append>
           <b-button
diff --git a/frontend/src/components/Inputs/InputUsername.spec.js b/frontend/src/components/Inputs/InputUsername.spec.js
new file mode 100644
index 000000000..b09ddf328
--- /dev/null
+++ b/frontend/src/components/Inputs/InputUsername.spec.js
@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import InputUsername from './InputUsername'
+
+const localVue = global.localVue
+
+describe('UserName Form', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        username: '',
+      },
+    },
+  }
+
+  const propsData = {
+    value: '',
+    unique: false,
+  }
+
+  const Wrapper = () => {
+    return mount(InputUsername, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+    it('renders the component', () => {
+      expect(wrapper.find('[data-test="username"]').exists()).toBeTruthy()
+    })
+
+    describe('currentValue', () => {
+      beforeEach(async () => {
+        wrapper = Wrapper()
+
+        await wrapper.setProps({ value: 'petra' })
+        await wrapper.find('[data-test="username"]').setValue('petra')
+      })
+      it('emits input event with the current value', () => {
+        expect(wrapper.emitted('input')).toEqual([['petra']])
+      })
+    })
+  })
+})
diff --git a/frontend/src/components/Inputs/InputUsername.vue b/frontend/src/components/Inputs/InputUsername.vue
index e2048a781..4354d0c1d 100644
--- a/frontend/src/components/Inputs/InputUsername.vue
+++ b/frontend/src/components/Inputs/InputUsername.vue
@@ -1,42 +1,59 @@
 <template>
-  <validation-provider
-    tag="div"
-    :rules="rules"
-    :name="name"
-    :bails="!showAllErrors"
-    :immediate="immediate"
-    vid="username"
-    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
-  >
-    <b-form-group :label-for="labelFor">
-      <b-form-input
-        v-model="currentValue"
-        v-bind="ariaInput"
-        :id="labelFor"
-        :name="name"
-        :placeholder="placeholder"
-        type="text"
-        :state="validated ? valid : false"
-        autocomplete="off"
-      ></b-form-input>
-      <b-form-invalid-feedback v-bind="ariaMsg">
-        <div v-if="showAllErrors">
-          <span v-for="error in errors" :key="error">
-            {{ error }}
-            <br />
-          </span>
-        </div>
-        <div v-else>
-          {{ errors[0] }}
-        </div>
-      </b-form-invalid-feedback>
-    </b-form-group>
-  </validation-provider>
+  <div class="input-username">
+    <validation-provider
+      tag="div"
+      :rules="rules"
+      :name="name"
+      :bails="!showAllErrors"
+      :immediate="immediate"
+      vid="username"
+      v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
+    >
+      <b-form-group :label="$t('form.username')">
+        <b-input-group>
+          <b-form-input
+            v-model="currentValue"
+            v-bind="ariaInput"
+            :id="labelFor"
+            :name="name"
+            :placeholder="placeholder"
+            type="text"
+            :state="validated ? valid : false"
+            autocomplete="off"
+            data-test="username"
+          ></b-form-input>
+          <b-input-group-append>
+            <b-button
+              size="lg"
+              text="Button"
+              variant="secondary"
+              icon="x-lg"
+              @click="$emit('set-is-edit', false)"
+            >
+              <b-icon-x-circle></b-icon-x-circle>
+            </b-button>
+          </b-input-group-append>
+        </b-input-group>
+        <b-form-invalid-feedback v-bind="ariaMsg">
+          <div v-if="showAllErrors">
+            <span v-for="error in errors" :key="error">
+              {{ error }}
+              <br />
+            </span>
+          </div>
+          <div v-else>
+            {{ errors[0] }}
+          </div>
+        </b-form-invalid-feedback>
+      </b-form-group>
+    </validation-provider>
+  </div>
 </template>
 <script>
 export default {
   name: 'InputUsername',
   props: {
+    isEdit: { type: Boolean, default: false },
     rules: {
       default: () => {
         return {
diff --git a/frontend/src/components/LanguageSwitch2.vue b/frontend/src/components/LanguageSwitch2.vue
index 46b2a5277..94f7c328d 100644
--- a/frontend/src/components/LanguageSwitch2.vue
+++ b/frontend/src/components/LanguageSwitch2.vue
@@ -68,10 +68,10 @@ export default {
             },
           })
           .then(() => {
-            // toast success message
+            this.toastSuccess(this.$t('settings.language.success'))
           })
           .catch(() => {
-            // toast error message
+            this.toastSuccess(this.$t('error'))
           })
       }
     },
diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
index e6e4cfe2a..a978be0bb 100644
--- a/frontend/src/components/Menu/Sidebar.spec.js
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -69,7 +69,7 @@ describe('Sidebar', () => {
         })
 
         it('has nav-item "navigation.settings" in navbar', () => {
-          expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(0).text()).toEqual(
+          expect(wrapper.find('[data-test="settings-menu"]').find('span').text()).toBe(
             'navigation.settings',
           )
         })
@@ -92,7 +92,7 @@ describe('Sidebar', () => {
         })
 
         it('has nav-item "navigation.settings" in navbar', () => {
-          expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(0).text()).toEqual(
+          expect(wrapper.find('[data-test="settings-menu"]').find('span').text()).toBe(
             'navigation.settings',
           )
         })
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 644fb37e0..b43afd9f9 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -35,9 +35,17 @@
         </b-nav>
         <hr class="m-3" />
         <b-nav vertical class="w-100">
-          <b-nav-item to="/settings" class="mb-3" active-class="activeRoute">
+          <b-nav-item
+            to="/settings"
+            class="mb-3"
+            active-class="activeRoute"
+            data-test="settings-menu"
+          >
             <b-img src="/img/svg/settings.svg" height="20" class="svg-icon" />
             <span class="ml-2">{{ $t('navigation.settings') }}</span>
+            <b-badge v-if="!$store.state.username" variant="warning">
+              {{ $t('settings.newSettings') }}
+            </b-badge>
           </b-nav-item>
           <b-nav-item
             class="mb-3 text-light"
diff --git a/frontend/src/components/UserSettings/UserName.spec.js b/frontend/src/components/UserSettings/UserName.spec.js
index 012ba367a..e3ffe04e3 100644
--- a/frontend/src/components/UserSettings/UserName.spec.js
+++ b/frontend/src/components/UserSettings/UserName.spec.js
@@ -17,7 +17,7 @@ describe('UserName Form', () => {
     $t: jest.fn((t) => t),
     $store: {
       state: {
-        username: 'peter',
+        username: null,
       },
       commit: storeCommitMock,
     },
@@ -36,121 +36,142 @@ describe('UserName Form', () => {
     })
 
     it('renders the component', () => {
-      expect(wrapper.find('div#username_form').exists()).toBeTruthy()
+      expect(wrapper.find('div#username_form').exists()).toBe(true)
     })
 
-    it('has an edit icon', () => {
-      expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
-    })
+    describe('has no username', () => {
+      // it('renders the username', () => {
+      //   expect(wrapper.find('[data-test="username-input-group"]')).toBe(true)
+      // })
 
-    it('renders the username', () => {
-      expect(wrapper.findAll('div.col').at(2).text()).toBe('peter')
+      it('has a component username change ', () => {
+        expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBe(true)
+      })
     })
-
-    describe('edit username', () => {
+    describe('change / edit  username', () => {
       beforeEach(async () => {
-        await wrapper.find('svg.bi-pencil').trigger('click')
+        wrapper.vm.isEdit = true
       })
 
-      it('shows an cancel icon', () => {
-        expect(wrapper.find('svg.bi-x-circle').exists()).toBeTruthy()
+      it('has no the username', () => {
+        expect(wrapper.find('[data-test="username-input-group"]')).toBeTruthy()
       })
 
-      it('closes the input when cancel icon is clicked', async () => {
-        await wrapper.find('svg.bi-x-circle').trigger('click')
-        expect(wrapper.find('input').exists()).toBeFalsy()
+      it('has a component username change ', () => {
+        expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBeTruthy()
       })
 
-      it('does not change the username when cancel is clicked', async () => {
-        await wrapper.find('input').setValue('petra')
-        await wrapper.find('svg.bi-x-circle').trigger('click')
-        expect(wrapper.findAll('div.col').at(2).text()).toBe('peter')
+      it('first step is username empty ', () => {
+        expect(wrapper.vm.username).toEqual('')
       })
 
-      it('has a submit button', () => {
-        expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy()
-      })
-
-      it('does not enable submit button when data is not changed', async () => {
-        await wrapper.find('form').trigger('keyup')
-        expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
-      })
-
-      describe('successfull submit', () => {
+      describe('change / edit  username', () => {
         beforeEach(async () => {
-          mockAPIcall.mockResolvedValue({
-            data: {
-              updateUserInfos: {
-                validValues: 3,
-              },
-            },
-          })
-          jest.clearAllMocks()
-          await wrapper.find('input').setValue('petra')
-          await wrapper.find('form').trigger('keyup')
-          await wrapper.find('button[type="submit"]').trigger('click')
-          await flushPromises()
+          mocks.$store.state.username = ''
+          await wrapper.setData({ isEdit: true })
         })
 
-        it('calls the API', () => {
-          expect(mockAPIcall).toBeCalledWith(
-            expect.objectContaining({
-              variables: {
-                alias: 'petra',
-              },
-            }),
+        it('first step is isEdit false ', () => {
+          expect(wrapper.vm.isEdit).toEqual(true)
+        })
+        it(' has username-alert text ', () => {
+          expect(wrapper.find('[data-test="username-alert"]').text()).toBe(
+            'settings.username.no-username',
           )
         })
-
-        it('commits username to store', () => {
-          expect(storeCommitMock).toBeCalledWith('username', 'petra')
-        })
-
-        it('toasts a success message', () => {
-          expect(toastSuccessSpy).toBeCalledWith('settings.username.change-success')
-        })
-
-        it('has an edit button again', () => {
-          expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
+        it('has a submit button with disabled true', () => {
+          expect(wrapper.find('[data-test="submit-username-button"]').exists()).toBe(false)
         })
       })
 
-      describe('submit results in server error', () => {
+      describe('edit username', () => {
         beforeEach(async () => {
-          mockAPIcall.mockRejectedValue({
-            message: 'Error',
-          })
-          jest.clearAllMocks()
-          await wrapper.find('input').setValue('petra')
-          await wrapper.find('form').trigger('keyup')
-          await wrapper.find('button[type="submit"]').trigger('click')
-          await flushPromises()
+          await wrapper.setData({ username: 'petra' })
         })
 
-        it('calls the API', () => {
-          expect(mockAPIcall).toBeCalledWith(
-            expect.objectContaining({
-              variables: {
-                alias: 'petra',
+        it('has a submit button', () => {
+          expect(wrapper.find('[data-test="submit-username-button"]').exists()).toBe(true)
+        })
+
+        describe('successfull submit', () => {
+          beforeEach(async () => {
+            mockAPIcall.mockResolvedValue({
+              data: {
+                updateUserInfos: {
+                  validValues: 3,
+                },
               },
-            }),
-          )
+            })
+            jest.clearAllMocks()
+            await wrapper.find('input').setValue('petra')
+            await wrapper.find('form').trigger('keyup')
+            await wrapper.find('[data-test="submit-username-button"]').trigger('click')
+            await flushPromises()
+          })
+
+          it('calls the API', () => {
+            expect(mockAPIcall).toBeCalledWith(
+              expect.objectContaining({
+                variables: {
+                  alias: 'petra',
+                },
+              }),
+            )
+          })
+
+          it('commits username to store', () => {
+            expect(storeCommitMock).toBeCalledWith('username', 'petra')
+          })
+
+          it('toasts a success message', () => {
+            expect(toastSuccessSpy).toBeCalledWith('settings.username.change-success')
+          })
         })
 
-        it('toasts an error message', () => {
-          expect(toastErrorSpy).toBeCalledWith('Error')
+        describe('submit results in server error', () => {
+          beforeEach(async () => {
+            mockAPIcall.mockRejectedValue({
+              message: 'Error',
+            })
+            jest.clearAllMocks()
+            await wrapper.find('input').setValue('petra')
+            await wrapper.find('form').trigger('keyup')
+            await wrapper.find('[data-test="submit-username-button"]').trigger('click')
+            await flushPromises()
+          })
+
+          it('calls the API', () => {
+            expect(mockAPIcall).toBeCalledWith(
+              expect.objectContaining({
+                variables: {
+                  alias: 'petra',
+                },
+              }),
+            )
+          })
+
+          it('toasts an error message', () => {
+            expect(toastErrorSpy).toBeCalledWith('Error')
+          })
         })
       })
-    })
 
-    describe('no username in store', () => {
-      beforeEach(() => {
-        mocks.$store.state.username = null
-        wrapper = Wrapper()
-      })
+      describe('has a username', () => {
+        beforeEach(async () => {
+          mocks.$store.state.username = 'petra'
+        })
 
-      it('displays an information why to enter a username', () => {
-        expect(wrapper.findAll('div.col').at(2).text()).toBe('settings.username.no-username')
+        it('has isEdit true', () => {
+          expect(wrapper.vm.isEdit).toBe(true)
+        })
+
+        it(' has no username-alert text ', () => {
+          expect(wrapper.find('[data-test="username-alert"]').exists()).toBe(false)
+        })
+
+        it('has no component username change ', () => {
+          expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBe(false)
+        })
       })
     })
   })
diff --git a/frontend/src/components/UserSettings/UserName.vue b/frontend/src/components/UserSettings/UserName.vue
index 4fc1b2f3a..bb9576237 100644
--- a/frontend/src/components/UserSettings/UserName.vue
+++ b/frontend/src/components/UserSettings/UserName.vue
@@ -1,38 +1,20 @@
 <template>
-  <b-card id="username_form" class="card-border-radius card-background-gray">
-    <div>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right">
-          <a
-            class="cursor-pointer"
-            @click="showUserData ? (showUserData = !showUserData) : cancelEdit()"
-          >
-            <span class="pointer mr-3">{{ $t('settings.username.change-username') }}</span>
-            <b-icon v-if="showUserData" class="pointer ml-3" icon="pencil"></b-icon>
-            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
-          </a>
-        </b-col>
-      </b-row>
+  <div id="username_form">
+    <div v-if="$store.state.username">
+      <label>{{ $t('form.username') }}</label>
+      <b-input-group class="mb-3" data-test="username-input-group">
+        <b-form-input
+          v-model="username"
+          readonly
+          data-test="username-input-readonly"
+        ></b-form-input>
+      </b-input-group>
     </div>
-
-    <div>
+    <div v-else>
       <validation-observer ref="usernameObserver" v-slot="{ handleSubmit, invalid }">
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row class="mb-3">
             <b-col class="col-12">
-              <small>
-                <b>{{ $t('form.username') }}</b>
-              </small>
-            </b-col>
-            <b-col v-if="showUserData" class="col-12">
-              <span v-if="username">
-                {{ username }}
-              </span>
-              <div v-else class="alert">
-                {{ $t('settings.username.no-username') }}
-              </div>
-            </b-col>
-            <b-col v-else class="col-12">
               <input-username
                 v-model="username"
                 :name="$t('form.username')"
@@ -40,10 +22,18 @@
                 :showAllErrors="true"
                 :unique="true"
                 :rules="rules"
+                :isEdit="isEdit"
+                @set-is-edit="setIsEdit"
+                data-test="component-input-username"
               />
             </b-col>
+            <b-col class="col-12">
+              <div v-if="!username" class="alert" data-test="username-alert">
+                {{ $t('settings.username.no-username') }}
+              </div>
+            </b-col>
           </b-row>
-          <b-row class="text-right" v-if="!showUserData">
+          <b-row class="text-right" v-if="newUsername">
             <b-col>
               <div class="text-right" ref="submitButton">
                 <b-button
@@ -51,6 +41,7 @@
                   @click="onSubmit"
                   type="submit"
                   :disabled="disabled(invalid)"
+                  data-test="submit-username-button"
                 >
                   {{ $t('form.save') }}
                 </b-button>
@@ -60,7 +51,7 @@
         </b-form>
       </validation-observer>
     </div>
-  </b-card>
+  </div>
 </template>
 <script>
 import { updateUserInfos } from '@/graphql/mutations'
@@ -73,7 +64,7 @@ export default {
   },
   data() {
     return {
-      showUserData: true,
+      isEdit: false,
       username: this.$store.state.username || '',
       usernameUnique: false,
       rules: {
@@ -87,10 +78,6 @@ export default {
     }
   },
   methods: {
-    cancelEdit() {
-      this.username = this.$store.state.username || ''
-      this.showUserData = true
-    },
     async onSubmit(event) {
       event.preventDefault()
       this.$apollo
@@ -102,7 +89,6 @@ export default {
         })
         .then(() => {
           this.$store.commit('username', this.username)
-          this.showUserData = true
           this.toastSuccess(this.$t('settings.username.change-success'))
         })
         .catch((error) => {
@@ -112,6 +98,10 @@ export default {
     disabled(invalid) {
       return !this.newUsername || invalid
     },
+    setIsEdit(bool) {
+      this.username = this.$store.state.username
+      this.isEdit = bool
+    },
   },
   computed: {
     newUsername() {
diff --git a/frontend/src/components/UserSettings/UserNewsletter.spec.js b/frontend/src/components/UserSettings/UserNewsletter.spec.js
index 7ae3ddd7c..f35cd3fc2 100644
--- a/frontend/src/components/UserSettings/UserNewsletter.spec.js
+++ b/frontend/src/components/UserSettings/UserNewsletter.spec.js
@@ -38,22 +38,22 @@ describe('UserCard_Newsletter', () => {
     })
 
     it('renders the component', () => {
-      expect(wrapper.find('div#formusernewsletter').exists()).toBeTruthy()
+      expect(wrapper.find('div.formusernewsletter').exists()).toBeTruthy()
     })
 
     it('has an edit BFormCheckbox switch', () => {
-      expect(wrapper.find('.Test-BFormCheckbox').exists()).toBeTruthy()
+      expect(wrapper.find('[test="BFormCheckbox"]').exists()).toBeTruthy()
     })
 
     describe('unsubscribe with success', () => {
       beforeEach(async () => {
-        await wrapper.setData({ newsletterState: true })
+        wrapper.setData({ newsletterState: true })
         mockAPIcall.mockResolvedValue({
           data: {
             unsubscribeNewsletter: true,
           },
         })
-        await wrapper.find('input').setChecked(false)
+        wrapper.find('input').setChecked(false)
       })
 
       it('calls the unsubscribe mutation', () => {
diff --git a/frontend/src/components/UserSettings/UserNewsletter.vue b/frontend/src/components/UserSettings/UserNewsletter.vue
index 50e442a29..12f8adc14 100644
--- a/frontend/src/components/UserSettings/UserNewsletter.vue
+++ b/frontend/src/components/UserSettings/UserNewsletter.vue
@@ -1,30 +1,13 @@
 <template>
-  <b-card id="formusernewsletter" class="card-border-radius card-background-gray">
-    <div>
-      <b-row class="mb-3">
-        <b-col class="mb-2 col-12">
-          <small>
-            <b>{{ $t('settings.newsletter.newsletter') }}</b>
-          </small>
-        </b-col>
-        <b-col class="col-12">
-          <b-form-checkbox
-            class="Test-BFormCheckbox"
-            v-model="newsletterState"
-            name="check-button"
-            switch
-            @change="onSubmit"
-          >
-            {{
-              newsletterState
-                ? $t('settings.newsletter.newsletterTrue')
-                : $t('settings.newsletter.newsletterFalse')
-            }}
-          </b-form-checkbox>
-        </b-col>
-      </b-row>
-    </div>
-  </b-card>
+  <div class="formusernewsletter">
+    <b-form-checkbox
+      test="BFormCheckbox"
+      v-model="newsletterState"
+      name="check-button"
+      switch
+      @change="onSubmit"
+    ></b-form-checkbox>
+  </div>
 </template>
 <script>
 import { subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
diff --git a/frontend/src/components/UserSettings/UserPassword.vue b/frontend/src/components/UserSettings/UserPassword.vue
index 2f571d400..9eeac80d4 100644
--- a/frontend/src/components/UserSettings/UserPassword.vue
+++ b/frontend/src/components/UserSettings/UserPassword.vue
@@ -17,7 +17,7 @@
     </div>
 
     <div v-if="!showPassword">
-      <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <validation-observer ref="observer" v-slot="{ handleSubmit, invalid }">
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row class="mb-2">
             <b-col>
@@ -34,9 +34,9 @@
               <div class="text-right">
                 <b-button
                   type="submit"
-                  :variant="disabled ? 'light' : 'success'"
+                  :variant="invalid ? 'light' : 'success'"
                   class="mt-4"
-                  :disabled="disabled"
+                  :disabled="invalid && disabled"
                   data-test="submit-new-password-btn"
                 >
                   {{ $t('form.save') }}
@@ -101,10 +101,7 @@ export default {
   },
   computed: {
     disabled() {
-      return !(
-        this.form.newPassword.password !== '' &&
-        this.form.newPassword.password === this.form.newPassword.passwordRepeat
-      )
+      return this.form.newPassword.password !== this.form.newPassword.passwordRepeat
     },
   },
 }
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index ab93bed85..215898046 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -169,8 +169,8 @@
     "thx": "Danke",
     "to": "bis",
     "to1": "an",
-    "username": "Nutzername",
-    "username-placeholder": "Gebe einen eindeutigen Nutzernamen ein",
+    "username": "Benutzername",
+    "username-placeholder": "Wähle deinen Benutzernamen",
     "validation": {
       "gddCreationTime": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens einer Nachkommastelle sein",
       "gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
@@ -280,6 +280,7 @@
     "settings": "Einstellungen",
     "transactions": "Deine Transaktionen"
   },
+  "PersonalDetails": "Persönliche Angaben",
   "qrCode": "QR Code",
   "send_gdd": "GDD versenden",
   "send_per_link": "GDD versenden per Link",
@@ -291,8 +292,10 @@
     "warningText": "Bist du noch da?"
   },
   "settings": {
+    "emailInfo": "Kann aktuell noch nicht geändert werden.",
     "hideAmountGDD": "Dein GDD Betrag ist versteckt.",
     "hideAmountGDT": "Dein GDT Betrag ist versteckt.",
+    "info": "Transaktionen können nun per Benutzername oder E-Mail-Adresse getätigt werden.",
     "language": {
       "changeLanguage": "Sprache ändern",
       "de": "Deutsch",
@@ -304,8 +307,11 @@
     },
     "name": {
       "change-name": "Name ändern",
-      "change-success": "Dein Name wurde erfolgreich geändert."
+      "change-success": "Dein Name wurde erfolgreich geändert.",
+      "enterFirstname": "Vorname eingeben",
+      "enterLastname": "Nachname eingeben"
     },
+    "newSettings": "Neue Einstellungen",
     "newsletter": {
       "newsletter": "Informationen per E-Mail",
       "newsletterFalse": "Du erhältst keine Informationen per E-Mail.",
@@ -330,8 +336,7 @@
     "showAmountGDT": "Dein GDT Betrag ist sichtbar.",
     "username": {
       "change-success": "Dein Nutzername wurde erfolgreich geändert.",
-      "change-username": "Nutzername ändern",
-      "no-username": "Bitte gebe einen Nutzernamen ein. Damit hilfst du anderen Benutzern dich zu finden, ohne deine Email preisgeben zu müssen."
+      "no-username": "Bitte gib einen Benutzernamen ein. Damit hilfst du anderen Benutzern dich zu finden, ohne deine E-Mail-Adresse preisgeben zu müssen."
     }
   },
   "signin": "Anmelden",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index ed0836e29..df87bbccf 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -170,7 +170,7 @@
     "to": "to",
     "to1": "to",
     "username": "Username",
-    "username-placeholder": "Enter a unique username",
+    "username-placeholder": "Choose your username",
     "validation": {
       "gddCreationTime": "The field {_field_} must be a number between {min} and {max} with at most one decimal place.",
       "gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits after the decimal point",
@@ -280,6 +280,7 @@
     "settings": "Settings",
     "transactions": "Your transactions"
   },
+  "PersonalDetails": "Personal details",
   "qrCode": "QR Code",
   "send_gdd": "Send GDD",
   "send_per_link": "Send GDD via Link",
@@ -291,8 +292,10 @@
     "warningText": "Are you still there?"
   },
   "settings": {
+    "emailInfo": "NCannot be changed at this time.",
     "hideAmountGDD": "Your GDD amount is hidden.",
     "hideAmountGDT": "Your GDT amount is hidden.",
+    "info": "Transactions can now be made by username or email address.",
     "language": {
       "changeLanguage": "Change language",
       "de": "Deutsch",
@@ -304,8 +307,11 @@
     },
     "name": {
       "change-name": "Change name",
-      "change-success": "Your name has been successfully changed."
+      "change-success": "Your name has been successfully changed.",
+      "enterFirstname": "Enter your firstname",
+      "enterLastname": "Enter your lastname"
     },
+    "newSettings": "New Settings",
     "newsletter": {
       "newsletter": "Information by email",
       "newsletterFalse": "You will not receive any information by email.",
@@ -330,8 +336,7 @@
     "showAmountGDT": "Your GDT amount is visible.",
     "username": {
       "change-success": "Your username has been changed successfully.",
-      "change-username": "Change username",
-      "no-username": "Please enter a username. This helps other users to find you without exposing your email."
+      "no-username": "Please enter a username. This will help other users find you without having to reveal your email address."
     }
   },
   "signin": "Sign in",
diff --git a/frontend/src/pages/Settings.spec.js b/frontend/src/pages/Settings.spec.js
index a257f2dad..fef51edcc 100644
--- a/frontend/src/pages/Settings.spec.js
+++ b/frontend/src/pages/Settings.spec.js
@@ -1,42 +1,140 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Settings from './Settings'
+import flushPromises from 'flush-promises'
+import { toastSuccessSpy } from '@test/testSetup'
 
 const localVue = global.localVue
 
+const mockAPIcall = jest.fn()
+
+const storeCommitMock = jest.fn()
+
 describe('Settings', () => {
   let wrapper
 
   const mocks = {
     $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        darkMode: true,
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'john.doe@test.com',
+        language: 'en',
+        newsletterState: false,
+      },
+      commit: storeCommitMock,
+    },
+    $apollo: {
+      mutate: mockAPIcall,
+    },
   }
 
   const Wrapper = () => {
-    return shallowMount(Settings, { localVue, mocks })
+    return mount(Settings, { localVue, mocks })
   }
 
-  describe('shallow Mount', () => {
+  describe('mount', () => {
     beforeEach(() => {
       wrapper = Wrapper()
     })
 
-    it('has a user card', () => {
-      expect(wrapper.findComponent({ name: 'UserCard' }).exists()).toBeTruthy()
-    })
-
-    it('has a user first and last name form', () => {
-      expect(wrapper.findComponent({ name: 'UserData' }).exists()).toBeTruthy()
-    })
-
     it('has a user change language form', () => {
-      expect(wrapper.findComponent({ name: 'UserLanguage' }).exists()).toBeTruthy()
+      expect(wrapper.findComponent({ name: 'LanguageSwitch' }).exists()).toBeTruthy()
     })
 
     it('has a user change password form', () => {
       expect(wrapper.findComponent({ name: 'UserPassword' }).exists()).toBeTruthy()
     })
 
-    it('has a user change newsletter form', () => {
-      expect(wrapper.findComponent({ name: 'UserNewsletter' }).exists()).toBeTruthy()
+    describe('isDisabled', () => {
+      it('returns false when firstName and lastName match the state', async () => {
+        // wrapper.vm.firstName = 'John'
+        // wrapper.vm.lastName = 'Doe'
+        wrapper.find('[data-test="firstname"]').setValue('John')
+        wrapper.find('[data-test="lastname"]').setValue('Doe')
+        await wrapper.find('[data-test="firstname"]').trigger('keyup')
+        const result = wrapper.find('[data-test="submit-userdata"]')
+        expect(result.exists()).toBe(false)
+      })
+
+      it('returns true when either firstName or lastName do not match the state', async () => {
+        wrapper.find('[data-test="firstname"]').setValue('Janer')
+        wrapper.find('[data-test="lastname"]').setValue('Does')
+        await wrapper.find('[data-test="firstname"]').trigger('keyup')
+        const result = wrapper.find('[data-test="submit-userdata"]')
+        expect(result.exists()).toBe(true)
+      })
     })
+
+    describe('successfull submit', () => {
+      beforeEach(async () => {
+        wrapper.find('[data-test="firstname"]').setValue('Janer')
+        wrapper.find('[data-test="lastname"]').setValue('Does')
+
+        mockAPIcall.mockResolvedValue({
+          data: {
+            updateUserInfos: {
+              validValues: 3,
+            },
+          },
+        })
+      })
+
+      it('Cange first and lastname', async () => {
+        await wrapper.find('[data-test="submit-userdata"]').trigger('click')
+        await flushPromises()
+
+        expect(mockAPIcall).toBeCalledWith(
+          expect.objectContaining({
+            variables: {
+              firstName: 'Janer',
+              lastName: 'Does',
+            },
+          }),
+        )
+      })
+
+      it('commits firstname to store', () => {
+        expect(storeCommitMock).toBeCalledWith('firstName', 'Janer')
+      })
+
+      it('commits lastname to store', () => {
+        expect(storeCommitMock).toBeCalledWith('lastName', 'Does')
+      })
+
+      it('toasts a success message', () => {
+        expect(toastSuccessSpy).toBeCalledWith('settings.name.change-success')
+      })
+    })
+
+    // TODO: describe('darkMode style', () => {
+    //   it('default darkMode is true', () => {
+    //     expect(wrapper.vm.darkMode).toBe(true)
+    //   })
+
+    //   describe('dark mode is false', () => {
+    //     beforeEach(() => {
+    //       wrapper.vm.darkMode = false
+    //     })
+
+    //     it('commits darkMode to store', () => {
+    //       expect(storeCommitMock).toBeCalledWith('setDarkMode', false)
+    //     })
+    //     it('toasts a success message', () => {
+    //       expect(toastSuccessSpy).toBeCalledWith('settings.modeLight')
+    //     })
+
+    //     describe('set dark mode is true', () => {
+    //       beforeEach(() => {
+    //         wrapper.vm.darkMode = true
+    //       })
+    //       // Test case 1: Test setting dark mode
+    //       test('darkMode sets the dark mode', () => {
+    //         expect(storeCommitMock).toBeCalledWith('setDarkMode', true)
+    //       })
+    //     })
+    //   })
+    // })
   })
 })
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index c5ca00f08..c1377c97b 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,30 +1,99 @@
 <template>
-  <div class="container bg-white appBoxShadow p-3 mt--3">
-    <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-    <user-data />
+  <div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
+    <div class="h2">{{ $t('PersonalDetails') }}</div>
+    <div class="m-4 text-small">
+      {{ $t('settings.info') }}
+    </div>
+
+    <b-row>
+      <b-col cols="12" md="6" lg="6">
+        <user-name />
+      </b-col>
+      <b-col cols="12" md="6" lg="6">
+        <b-form-group :label="$t('form.email')" :description="$t('settings.emailInfo')">
+          <b-form-input v-model="email" readonly></b-form-input>
+        </b-form-group>
+      </b-col>
+    </b-row>
+
     <hr />
-    <user-name />
+    <b-form>
+      <b-row class="mt-3">
+        <b-col cols="12" md="6" lg="6">
+          <label>{{ $t('form.firstname') }}</label>
+          <b-form-input
+            v-model="firstName"
+            :placeholder="$t('settings.name.enterFirstname')"
+            data-test="firstname"
+            trim
+          ></b-form-input>
+        </b-col>
+        <b-col cols="12" md="6" lg="6">
+          <label>{{ $t('form.lastname') }}</label>
+          <b-form-input
+            v-model="lastName"
+            :placeholder="$t('settings.name.enterLastname')"
+            data-test="lastname"
+            trim
+          ></b-form-input>
+        </b-col>
+      </b-row>
+      <div v-if="!isDisabled" class="mt-4 pt-4 text-center">
+        <b-button
+          type="submit"
+          variant="primary"
+          @click.prevent="onSubmit"
+          data-test="submit-userdata"
+        >
+          {{ $t('form.save') }}
+        </b-button>
+      </div>
+    </b-form>
     <hr />
+    <b-row>
+      <b-col cols="12" md="6" lg="6">{{ $t('language') }}</b-col>
+      <b-col cols="12" md="6" lg="6" class="text-right">
+        <user-language />
+      </b-col>
+    </b-row>
+
+    <hr />
+    <div class="h3 mt-5">{{ $t('form.password') }}</div>
     <user-password />
     <hr />
-    <user-language />
-    <hr />
-    <user-newsletter />
+    <b-row class="mb-5">
+      <b-col cols="12" md="6" lg="6">
+        {{ $t('settings.newsletter.newsletter') }}
+        <div class="text-small">
+          {{
+            newsletterState
+              ? $t('settings.newsletter.newsletterTrue')
+              : $t('settings.newsletter.newsletterFalse')
+          }}
+        </div>
+      </b-col>
+      <b-col cols="12" md="6" lg="6" class="text-right">
+        <user-newsletter />
+      </b-col>
+    </b-row>
+    <!-- TODO<b-row>
+      <b-col cols="12" md="6" lg="6">{{ $t('settings.darkMode') }}</b-col>
+      <b-col cols="12" md="6" lg="6" class="text-right">
+        <b-form-checkbox v-model="darkMode" name="dark-mode" switch aligne></b-form-checkbox>
+      </b-col>
+    </b-row> -->
   </div>
 </template>
 <script>
-import UserCard from '@/components/UserSettings/UserCard'
-import UserData from '@/components/UserSettings/UserData'
-import UserName from '@/components/UserSettings/UserName'
+import UserName from '@/components/UserSettings/UserName.vue'
 import UserPassword from '@/components/UserSettings/UserPassword'
-import UserLanguage from '@/components/UserSettings/UserLanguage'
-import UserNewsletter from '@/components/UserSettings/UserNewsletter'
+import UserLanguage from '@/components/LanguageSwitch2.vue'
+import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
+import { updateUserInfos } from '@/graphql/mutations'
 
 export default {
   name: 'Profile',
   components: {
-    UserCard,
-    UserData,
     UserName,
     UserPassword,
     UserLanguage,
@@ -34,13 +103,53 @@ export default {
     balance: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
   },
-  methods: {
-    updateTransactions(pagination) {
-      this.$emit('update-transactions', pagination)
+
+  data() {
+    const { state } = this.$store
+    const { darkMode, firstName, lastName, email, newsletterState } = state
+
+    return {
+      darkMode,
+      username: '',
+      firstName,
+      lastName,
+      email,
+      newsletterState,
+      mutation: '',
+      variables: {},
+    }
+  },
+
+  computed: {
+    isDisabled() {
+      const { firstName, lastName } = this.$store.state
+      return firstName === this.firstName && lastName === this.lastName
     },
   },
-  created() {
-    this.updateTransactions(0)
+  // TODO: watch: {
+  //   darkMode(val) {
+  //     this.$store.commit('setDarkMode', this.darkMode)
+  //     this.toastSuccess(
+  //       this.darkMode ? this.$t('settings.modeDark') : this.$t('settings.modeLight'),
+  //     )
+  //   },
+  // },
+  methods: {
+    async onSubmit(key) {
+      try {
+        await this.$apollo.mutate({
+          mutation: updateUserInfos,
+          variables: {
+            firstName: this.firstName,
+            lastName: this.lastName,
+          },
+        })
+        this.$store.commit('firstName', this.firstName)
+        this.$store.commit('lastName', this.lastName)
+        this.showUserData = true
+        this.toastSuccess(this.$t('settings.name.change-success'))
+      } catch (error) {}
+    },
   },
 }
 </script>
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index 4036626d8..6241d1744 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -4,7 +4,6 @@ import createPersistedState from 'vuex-persistedstate'
 import { localeChanged } from 'vee-validate'
 import i18n from '@/i18n.js'
 import jwtDecode from 'jwt-decode'
-
 Vue.use(Vuex)
 
 export const mutations = {
@@ -56,6 +55,9 @@ export const mutations = {
   email: (state, email) => {
     state.email = email || ''
   },
+  setDarkMode: (state, darkMode) => {
+    state.darkMode = !!darkMode
+  },
 }
 
 export const actions = {
@@ -71,6 +73,7 @@ export const actions = {
     commit('isAdmin', data.isAdmin)
     commit('hideAmountGDD', data.hideAmountGDD)
     commit('hideAmountGDT', data.hideAmountGDT)
+    commit('setDarkMode', data.darkMode)
   },
   logout: ({ commit, state }) => {
     commit('token', null)
@@ -85,6 +88,7 @@ export const actions = {
     commit('hideAmountGDD', false)
     commit('hideAmountGDT', true)
     commit('email', '')
+    commit('setDarkMode', false)
     localStorage.clear()
   },
 }
@@ -114,6 +118,7 @@ try {
       hideAmountGDD: null,
       hideAmountGDT: null,
       email: '',
+      darkMode: false,
     },
     getters: {},
     // Syncronous mutation of the state
diff --git a/frontend/src/store/store.test.js b/frontend/src/store/store.test.js
index a6a596209..e72b984f7 100644
--- a/frontend/src/store/store.test.js
+++ b/frontend/src/store/store.test.js
@@ -199,7 +199,7 @@ describe('Vuex store', () => {
 
       it('calls eleven commits', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenCalledTimes(11)
+        expect(commit).toHaveBeenCalledTimes(12)
       })
 
       it('commits gradidoID', () => {
@@ -264,7 +264,7 @@ describe('Vuex store', () => {
 
       it('calls twelve commits', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenCalledTimes(12)
+        expect(commit).toHaveBeenCalledTimes(13)
       })
 
       it('commits token', () => {