diff --git a/frontend/src/components/Inputs/InputUsername.spec.js b/frontend/src/components/Inputs/InputUsername.spec.js
new file mode 100644
index 000000000..341d2f391
--- /dev/null
+++ b/frontend/src/components/Inputs/InputUsername.spec.js
@@ -0,0 +1,41 @@
+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 Wrapper = () => {
+    return mount(InputUsername, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+    it('renders the component', () => {
+      expect(wrapper.find('div.input-username').exists()).toBeTruthy()
+    })
+
+    describe('currentValue', () => {
+      beforeEach(async () => {
+        wrapper = Wrapper()
+        await wrapper.setProps({ value: 'petra' })
+        wrapper.vm.currentValue = 'petra swastiska'
+      })
+      it('emits input event with the current value', () => {
+        expect(wrapper.emitted('input')).toEqual([['petra swastiska']])
+      })
+    })
+  })
+})
diff --git a/frontend/src/components/Inputs/InputUsername.vue b/frontend/src/components/Inputs/InputUsername.vue
index e2048a781..77f4722f5 100644
--- a/frontend/src/components/Inputs/InputUsername.vue
+++ b/frontend/src/components/Inputs/InputUsername.vue
@@ -1,42 +1,57 @@
 <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"
+          ></b-form-input>
+          <b-input-group-append>
+            <b-button
+              size="lg"
+              text="Button"
+              variant="secondary"
+              @click="$emit('set-is-edit', false)"
+            >
+              {{ $t('x') }}
+            </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/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..4d0f84a59 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: '',
       },
       commit: storeCommitMock,
     },
@@ -39,41 +39,49 @@ describe('UserName Form', () => {
       expect(wrapper.find('div#username_form').exists()).toBeTruthy()
     })
 
-    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"]')).toBeTruthy()
+      })
+
+      it('has no component username change ', () => {
+        expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBeFalsy()
+      })
+    })
+    describe('change / edit  username', () => {
+      beforeEach(async () => {
+        wrapper.vm.isEdit = true
+      })
+
+      it('has no the username', () => {
+        expect(wrapper.find('[data-test="username-input-group"]')).toBeTruthy()
+      })
+
+      it('has a component username change ', () => {
+        expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBeTruthy()
+      })
     })
 
-    it('renders the username', () => {
-      expect(wrapper.findAll('div.col').at(2).text()).toBe('peter')
-    })
+    // describe('has a username', () => {
+    //   beforeEach(async () => {
+    //     wrapper.$store.state.username = 'petra'
+    //   })
+    //   it('has no the username', () => {
+    //     expect(wrapper.find('[data-test="username-input-group"]')).toBeTruthy()
+    //   })
+
+    //   it('has no component username change ', () => {
+    //     expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBeTruthy()
+    //   })
+    // })
 
     describe('edit username', () => {
       beforeEach(async () => {
-        await wrapper.find('svg.bi-pencil').trigger('click')
-      })
-
-      it('shows an cancel icon', () => {
-        expect(wrapper.find('svg.bi-x-circle').exists()).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('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')
+        wrapper.vm.username = 'petra'
       })
 
       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')
+        expect(wrapper.find('[data-test="submit-username-button"]').exists()).toBeTruthy()
       })
 
       describe('successfull submit', () => {
@@ -88,7 +96,7 @@ describe('UserName Form', () => {
           jest.clearAllMocks()
           await wrapper.find('input').setValue('petra')
           await wrapper.find('form').trigger('keyup')
-          await wrapper.find('button[type="submit"]').trigger('click')
+          await wrapper.find('[data-test="submit-username-button"]').trigger('click')
           await flushPromises()
         })
 
@@ -109,10 +117,6 @@ describe('UserName Form', () => {
         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()
-        })
       })
 
       describe('submit results in server error', () => {
@@ -123,7 +127,7 @@ describe('UserName Form', () => {
           jest.clearAllMocks()
           await wrapper.find('input').setValue('petra')
           await wrapper.find('form').trigger('keyup')
-          await wrapper.find('button[type="submit"]').trigger('click')
+          await wrapper.find('[data-test="submit-username-button"]').trigger('click')
           await flushPromises()
         })
 
@@ -142,16 +146,5 @@ describe('UserName Form', () => {
         })
       })
     })
-
-    describe('no username in store', () => {
-      beforeEach(() => {
-        mocks.$store.state.username = null
-        wrapper = Wrapper()
-      })
-
-      it('displays an information why to enter a username', () => {
-        expect(wrapper.findAll('div.col').at(2).text()).toBe('settings.username.no-username')
-      })
-    })
   })
 })
diff --git a/frontend/src/components/UserSettings/UserName.vue b/frontend/src/components/UserSettings/UserName.vue
index 4fc1b2f3a..b2aed677a 100644
--- a/frontend/src/components/UserSettings/UserName.vue
+++ b/frontend/src/components/UserSettings/UserName.vue
@@ -1,38 +1,27 @@
 <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()"
+  <div id="username_form">
+    <div v-if="!isEdit && !newUsername">
+      <label>{{ $t('form.username') }}</label>
+      <b-input-group class="mb-3" data-test="username-input-group">
+        <b-form-input v-model="username" readonly></b-form-input>
+        <b-input-group-append>
+          <b-button
+            size="lg"
+            text="Button"
+            variant="secondary"
+            @click="isEdit = !isEdit"
+            data-test="BButton"
           >
-            <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>
+            {{ $t('change') }}
+          </b-button>
+        </b-input-group-append>
+      </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 +29,17 @@
                 :showAllErrors="true"
                 :unique="true"
                 :rules="rules"
+                :isEdit="isEdit"
+                @set-is-edit="setIsEdit"
               />
             </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 +47,7 @@
                   @click="onSubmit"
                   type="submit"
                   :disabled="disabled(invalid)"
+                  data-test="submit-username-button"
                 >
                   {{ $t('form.save') }}
                 </b-button>
@@ -60,7 +57,7 @@
         </b-form>
       </validation-observer>
     </div>
-  </b-card>
+  </div>
 </template>
 <script>
 import { updateUserInfos } from '@/graphql/mutations'
@@ -73,7 +70,7 @@ export default {
   },
   data() {
     return {
-      showUserData: true,
+      isEdit: false,
       username: this.$store.state.username || '',
       usernameUnique: false,
       rules: {
@@ -87,10 +84,6 @@ export default {
     }
   },
   methods: {
-    cancelEdit() {
-      this.username = this.$store.state.username || ''
-      this.showUserData = true
-    },
     async onSubmit(event) {
       event.preventDefault()
       this.$apollo
@@ -102,7 +95,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 +104,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/locales/de.json b/frontend/src/locales/de.json
index 256eee18f..6d988e710 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -19,6 +19,7 @@
     }
   },
   "back": "Zurück",
+  "change":"Ändern",
   "community": {
     "choose-another-community": "Eine andere Gemeinschaft auswählen",
     "community": "Gemeinschaft",
@@ -291,11 +292,14 @@
     "warningText": "Bist du noch da?"
   },
   "settings": {
+    "info":"Es können GDD Überweisungen per Username oder E-Mail-Adresse getätigt werden. Deine E-Mail-Adresse wird nicht mehr durch diese Anwendung angezeigt.",
+    "emailInfo":"Wird nicht angezeigt, kann nicht geändert werden.",
     "hideAmountGDD": "Dein GDD Betrag ist versteckt.",
     "hideAmountGDT": "Dein GDT Betrag ist versteckt.",
-    "darkMode": "dunkel - hell Style",
+    "darkMode": "Dunkler Modus",
     "modeDark": "Nachtmodus",
     "modeLight": "Tagmodus",
+    "newSettings":"Neue Einstellungen",
     "language": {
       "changeLanguage": "Sprache ändern",
       "de": "Deutsch",
@@ -306,6 +310,9 @@
       "success": "Deine Sprache wurde erfolgreich geändert."
     },
     "name": {
+      "enterFirstname":"Vorname eingeben",
+      "enterLastname":"Nachname eingeben",
+      "change-username": "Username ändern",
       "change-name": "Name ändern",
       "change-success": "Dein Name wurde erfolgreich geändert."
     },
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index ed56027c7..b2f852ca6 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -19,6 +19,7 @@
     }
   },
   "back": "Back",
+  "change":"Change",
   "community": {
     "choose-another-community": "Choose another community",
     "community": "Community",
@@ -291,11 +292,14 @@
     "warningText": "Are you still there?"
   },
   "settings": {
+    "info":"GDD transfers can be made by username or email address. Your email address will no longer be displayed by this application.",
+    "emailInfo":"Not displayed, cannot be changed.",
     "hideAmountGDD": "Your GDD amount is hidden.",
     "hideAmountGDT": "Your GDT amount is hidden.",
-    "darkMode": "dark - light Style",
+    "darkMode": "Dark Mode",
     "modeDark": "Style changed to dark mode",
     "modeLight": "Style changed to light mode",
+    "newSettings":"New Settings",
     "language": {
       "changeLanguage": "Change language",
       "de": "Deutsch",
@@ -306,6 +310,9 @@
       "success": "Your language has been successfully updated."
     },
     "name": {
+      "enterFirstname":"Enter your firstname",
+      "enterLastname":"Enter your lastname",
+      "change-username": "Change username",
       "change-name": "Change name",
       "change-success": "Your name has been successfully changed."
     },
diff --git a/frontend/src/pages/Settings.spec.js b/frontend/src/pages/Settings.spec.js
index e784a8c7e..57ed02818 100644
--- a/frontend/src/pages/Settings.spec.js
+++ b/frontend/src/pages/Settings.spec.js
@@ -1,23 +1,16 @@
-import { shallowMount, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Settings from './Settings'
-import { toastSuccessSpy } from '../../test/testSetup'
-// import { updateUserInfos, subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
-import VueApollo from 'vue-apollo'
-import { createMockClient } from 'mock-apollo-client'
-
-const mockClient = createMockClient()
-const apolloProvider = new VueApollo({
-  defaultClient: mockClient,
-})
+import flushPromises from 'flush-promises'
+import { toastSuccessSpy } from '@test/testSetup'
 
 const localVue = global.localVue
 
-describe('Settings', () => {
-  let Wrapper
-  let wrapper
+const mockAPIcall = jest.fn()
 
-  const storeCommitMock = jest.fn()
-  const mockToastSuccess = jest.fn()
+const storeCommitMock = jest.fn()
+
+describe('Settings', () => {
+  let wrapper
 
   const mocks = {
     $t: jest.fn((t) => t),
@@ -32,10 +25,13 @@ describe('Settings', () => {
       },
       commit: storeCommitMock,
     },
+    $apollo: {
+      mutate: mockAPIcall,
+    },
   }
 
-  Wrapper = () => {
-    return mount(Settings, { localVue, mocks, apolloProvider })
+  const Wrapper = () => {
+    return mount(Settings, { localVue, mocks })
   }
 
   describe('mount', () => {
@@ -43,53 +39,6 @@ describe('Settings', () => {
       wrapper = Wrapper()
     })
 
-    describe.skip('watch - darkMode', () => {
-      it('commits correct value to store and calls toastSuccess with the appropriate text for dark mode', () => {
-        wrapper.vm.darkMode = true
-
-        expect(storeCommitMock).toHaveBeenCalledWith('setDarkMode', true)
-        // expect(mockToastSuccess).toHaveBeenCalledWith('Style changed to dark mode')
-        expect(toastSuccessSpy).toBeCalledWith('Style changed to dark mode')
-      })
-
-      it('commits correct value to store and calls toastSuccess with the appropriate text for light mode', () => {
-        wrapper.vm.darkMode = false
-
-        expect(storeCommitMock).toHaveBeenCalledWith('setDarkMode', false)
-        expect(mockToastSuccess).toHaveBeenCalledWith('Style changed to light mode')
-      })
-    })
-  })
-
-  Wrapper = () => {
-    return shallowMount(Settings, { localVue, mocks })
-  }
-
-  describe('shallow Mount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
-    it('data function returns correct data object', () => {
-      expect(wrapper.vm.darkMode).toBe(true)
-
-      expect(wrapper.vm.username).toBe('')
-
-      expect(wrapper.vm.firstName).toBe('John')
-
-      expect(wrapper.vm.lastName).toBe('Doe')
-
-      expect(wrapper.vm.email).toBe('john.doe@test.com')
-
-      expect(wrapper.vm.selected).toBe('en')
-
-      expect(wrapper.vm.newsletterState).toBe(false)
-
-      expect(wrapper.vm.mutation).toBe('')
-
-      expect(wrapper.vm.variables).toEqual({})
-    })
-
     it('has a user change language form', () => {
       expect(wrapper.findComponent({ name: 'LanguageSwitch' }).exists()).toBeTruthy()
     })
@@ -117,5 +66,68 @@ describe('Settings', () => {
         expect(result).toBe(false)
       })
     })
+
+    describe('successfull submit', () => {
+      beforeEach(async () => {
+        wrapper.vm.firstName = 'Janer'
+        wrapper.vm.lastName = 'Does'
+
+        mockAPIcall.mockResolvedValue({
+          data: {
+            updateUserInfos: {
+              validValues: 3,
+            },
+          },
+        })
+      })
+
+      it('Cange first and lastname', async () => {
+        wrapper.find('[data-test="test-firstname"]')
+        wrapper.find('[data-test="lastname"]')
+
+        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')
+      })
+    })
+
+    describe('darkMode style', () => {
+      it('default darkMode is true', () => {
+        expect(wrapper.vm.darkMode).toBe(true)
+      })
+
+      describe('sets dark mode ', () => {
+        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')
+        })
+      })
+    })
   })
 })
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 62dda6442..b60056d90 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,33 +1,50 @@
 <template>
   <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">
-        <b-form-group :label="$t('form.username')" description="kann nicht geändert werden">
-          <b-form-input v-model="username" readonly></b-form-input>
-        </b-form-group>
+        <user-name />
       </b-col>
       <b-col cols="12" md="6" lg="6">
-        <b-form-group :label="$t('form.email')" description="kann nicht geändert werden">
+        <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 />
-    <b-form @submit="onSubmit('personalDetails')">
+    <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="Enter your firstname" trim></b-form-input>
+          <b-form-input
+            v-model="firstName"
+            :placeholder="$t('settings.name.enterFirstname')"
+            data-test="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="Enter your lastname" trim></b-form-input>
+          <b-form-input
+            v-model="lastName"
+            :placeholder="$t('settings.name.enterLastname')"
+            data-test="test-lastname"
+            trim
+          ></b-form-input>
         </b-col>
       </b-row>
-      {{ isDisabled }}
       <div v-if="!isDisabled" class="mt-4 pt-4 text-center">
-        <b-button type="submit" variant="primary">
+        <b-button
+          data-test="submit-userdata"
+          type="submit"
+          variant="primary"
+          @click.prevent="onSubmit"
+        >
           {{ $t('form.save') }}
         </b-button>
       </div>
@@ -45,14 +62,18 @@
     <user-password />
     <hr />
     <b-row class="mb-5">
-      <b-col cols="12" md="6" lg="6">{{ $t('settings.newsletter.newsletter') }}</b-col>
+      <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">
-        <b-form-checkbox
-          v-model="newsletterState"
-          name="check-button"
-          switch
-          @change="onSubmit('newsletters')"
-        ></b-form-checkbox>
+        <user-newsletter />
       </b-col>
     </b-row>
     <b-row>
@@ -64,15 +85,19 @@
   </div>
 </template>
 <script>
+import UserName from '@/components/UserSettings/UserName.vue'
 import UserPassword from '@/components/UserSettings/UserPassword'
 import UserLanguage from '@/components/LanguageSwitch2.vue'
-import { updateUserInfos, subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
+import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
+import { updateUserInfos } from '@/graphql/mutations'
 
 export default {
   name: 'Profile',
   components: {
+    UserName,
     UserPassword,
     UserLanguage,
+    UserNewsletter,
   },
   props: {
     balance: { type: Number, default: 0 },
@@ -81,7 +106,7 @@ export default {
 
   data() {
     const { state } = this.$store
-    const { darkMode, firstName, lastName, email, language, newsletterState } = state
+    const { darkMode, firstName, lastName, email, newsletterState } = state
 
     return {
       darkMode,
@@ -89,7 +114,6 @@ export default {
       firstName,
       lastName,
       email,
-      selected: language,
       newsletterState,
       mutation: '',
       variables: {},
@@ -104,52 +128,27 @@ export default {
   },
   watch: {
     darkMode(val) {
-      const text = this.darkMode ? this.$t('settings.modeDark') : this.$t('settings.modeLight')
       this.$store.commit('setDarkMode', this.darkMode)
-      this.toastSuccess(text)
+      this.toastSuccess(
+        this.darkMode ? this.$t('settings.modeDark') : this.$t('settings.modeLight'),
+      )
     },
   },
   methods: {
     async onSubmit(key) {
-      switch (key) {
-        case 'personalDetails':
-          this.mutation = updateUserInfos
-          this.variables = {
-            firstName: this.firstName,
-            lastName: this.lastName,
-          }
-          this.$store.commit('firstName', this.firstName)
-          this.$store.commit('lastName', this.form.lastName)
-          this.showUserData = true
-          this.toastSuccess(this.$t('settings.name.change-success'))
-          break
-        case 'newsletters':
-          this.mutation = this.newsletterState ? subscribeNewsletter : unsubscribeNewsletter
-          this.$store.commit('newsletterState', this.newsletterState)
-          this.toastSuccess(
-            this.newsletterState
-              ? this.$t('settings.newsletter.newsletterTrue')
-              : this.$t('settings.newsletter.newsletterFalse'),
-          )
-          break
-        default:
-          break
-      }
       try {
         await this.$apollo.mutate({
-          mutation: this.mutation,
-          variables: this.variables,
+          mutation: updateUserInfos,
+          variables: {
+            firstName: this.firstName,
+            lastName: this.lastName,
+          },
         })
-      } catch (error) {
-        switch (key) {
-          case 'newsletters':
-            this.newsletterState = this.$store.state.newsletterState
-            this.toastError(error.message)
-            break
-          default:
-            break
-        }
-      }
+        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) {}
     },
   },
 }