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/pages/Settings.spec.js b/frontend/src/pages/Settings.spec.js
index a257f2dad..e784a8c7e 100644
--- a/frontend/src/pages/Settings.spec.js
+++ b/frontend/src/pages/Settings.spec.js
@@ -1,16 +1,67 @@
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount, 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,
+})
 
 const localVue = global.localVue
 
 describe('Settings', () => {
+  let Wrapper
   let wrapper
 
+  const storeCommitMock = jest.fn()
+  const mockToastSuccess = jest.fn()
+
   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,
+    },
   }
 
-  const Wrapper = () => {
+  Wrapper = () => {
+    return mount(Settings, { localVue, mocks, apolloProvider })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      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 })
   }
 
@@ -19,24 +70,52 @@ describe('Settings', () => {
       wrapper = Wrapper()
     })
 
-    it('has a user card', () => {
-      expect(wrapper.findComponent({ name: 'UserCard' }).exists()).toBeTruthy()
-    })
+    it('data function returns correct data object', () => {
+      expect(wrapper.vm.darkMode).toBe(true)
 
-    it('has a user first and last name form', () => {
-      expect(wrapper.findComponent({ name: 'UserData' }).exists()).toBeTruthy()
+      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: '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', () => {
+        wrapper.vm.firstName = 'John'
+        wrapper.vm.lastName = 'Doe'
+
+        const result = wrapper.vm.isDisabled
+
+        expect(result).toBe(true)
+      })
+
+      it('returns true when either firstName or lastName do not match the state', () => {
+        wrapper.vm.firstName = 'Jane'
+        wrapper.vm.lastName = 'Doe'
+
+        const result = wrapper.vm.isDisabled
+
+        expect(result).toBe(false)
+      })
     })
   })
 })
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 35e9c062e..66dd50e79 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,91 +1,66 @@
 <template>
   <div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
-    <b-form @submit="onSubmit('personalDetails')" @change="disabled = !disabled">
-      <div class="h2">{{ $t('PersonalDetails') }}</div>
-      <b-row>
-        <b-col cols="12" md="6" lg="6">
-          <div role="group">
-            <label for="input-live0">{{ $t('form.username') }}</label>
-            <b-form-input
-              id="input-live0"
-              v-model="username"
-              placeholder="Enter your username"
-              trim
-              readonly
-            ></b-form-input>
-          </div>
-        </b-col>
-        <b-col cols="12" md="6" lg="6">
-          <div role="group">
-            <label for="input-live0">{{ $t('form.email') }}</label>
-            <b-form-input id="input-live0" v-model="email" trim readonly></b-form-input>
-          </div>
-        </b-col>
-      </b-row>
-      <div class="text-small mt-3">
-        Dein Nutzername und E-Mail können momentan nicht geändert werden.
-      </div>
-      <hr />
+    <div class="h2">{{ $t('PersonalDetails') }}</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>
+      </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-input v-model="email" readonly></b-form-input>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <hr />
+    <b-form @submit="onSubmit('personalDetails')">
       <b-row class="mt-3">
         <b-col cols="12" md="6" lg="6">
-          <div role="group">
-            <label for="input-live1">{{ $t('form.firstname') }}</label>
-            <b-form-input
-              id="input-live1"
-              v-model="firstName"
-              placeholder="Enter your firstname"
-              trim
-            ></b-form-input>
-          </div>
+          <label>{{ $t('form.firstname') }}</label>
+          <b-form-input v-model="firstName" placeholder="Enter your firstname" trim></b-form-input>
         </b-col>
         <b-col cols="12" md="6" lg="6">
-          <div role="group">
-            <label for="input-live2">{{ $t('form.lastname') }}</label>
-            <b-form-input
-              id="input-live2"
-              v-model="lastName"
-              placeholder="Enter your lastname"
-              trim
-            ></b-form-input>
-          </div>
+          <label>{{ $t('form.lastname') }}</label>
+          <b-form-input v-model="lastName" placeholder="Enter your lastname" trim></b-form-input>
         </b-col>
       </b-row>
-
-      <div v-if="!disabled" class="mt-4 pt-4 text-center">
-        <b-button type="submit" variant="primary" :disabled="disabled">
+      {{ isDisabled }}
+      <div v-if="!isDisabled" class="mt-4 pt-4 text-center">
+        <b-button type="submit" variant="primary">
           {{ $t('form.save') }}
         </b-button>
       </div>
-      <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 />
-      <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" class="text-right">
-          <b-form-checkbox
-            v-model="newsletterState"
-            name="check-button"
-            switch
-            @change="onSubmit('newsletters')"
-          ></b-form-checkbox>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="12" md="6" lg="6">Dark - light mode</b-col>
-        <b-col cols="12" md="6" lg="6" class="text-right">
-          <b-form-checkbox v-model="darkMode" name="dark-mode" switch></b-form-checkbox>
-        </b-col>
-      </b-row>
     </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 />
+    <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" class="text-right">
+        <b-form-checkbox
+          v-model="newsletterState"
+          name="check-button"
+          switch
+          @change="onSubmit('newsletters')"
+        ></b-form-checkbox>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col cols="12" md="6" lg="6">Dark - light mode</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>
@@ -103,23 +78,37 @@ export default {
     balance: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
   },
+
   data() {
+    const { state } = this.$store
+    const { darkMode, firstName, lastName, email, language, newsletterState } = state
+
     return {
-      darkMode: this.$store.state.darkMode,
+      darkMode,
       username: '',
-      firstName: this.$store.state.firstName,
-      lastName: this.$store.state.lastName,
-      email: this.$store.state.email,
-      selected: this.$store.state.language,
-      newsletterState: this.$store.state.newsletterState,
+      firstName,
+      lastName,
+      email,
+      selected: language,
+      newsletterState,
       mutation: '',
       variables: {},
-      disabled: true,
     }
   },
+
+  computed: {
+    isDisabled() {
+      const { firstName, lastName } = this.$store.state
+      return firstName === this.firstName && lastName === this.lastName
+    },
+  },
   watch: {
     darkMode(val) {
+      const text = this.darkMode
+        ? this.$t('Style changed to dark mode')
+        : this.$t('Style changed to light mode')
       this.$store.commit('setDarkMode', this.darkMode)
+      this.toastSuccess(text)
     },
   },
   methods: {
@@ -131,55 +120,39 @@ export default {
             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
       }
-      this.$apollo
-        .mutate({
+      try {
+        await this.$apollo.mutate({
           mutation: this.mutation,
           variables: this.variables,
         })
-        .then(() => {
-          switch (key) {
-            case 'personalDetails':
-              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.$store.commit('newsletterState', this.newsletterState)
-              this.toastSuccess(
-                this.newsletterState
-                  ? this.$t('settings.newsletter.newsletterTrue')
-                  : this.$t('settings.newsletter.newsletterFalse'),
-              )
-              break
-            default:
-              break
-          }
-        })
-        .catch((error) => {
-          switch (key) {
-            case 'newsletters':
-              this.newsletterState = this.$store.state.newsletterState
-              this.toastError(error.message)
-              break
-            default:
-              break
-          }
-        })
+      } catch (error) {
+        switch (key) {
+          case 'newsletters':
+            this.newsletterState = this.$store.state.newsletterState
+            this.toastError(error.message)
+            break
+          default:
+            break
+        }
+      }
     },
-    updateTransactions(pagination) {
-      this.$emit('update-transactions', pagination)
-    },
-  },
-  created() {
-    this.updateTransactions(0)
   },
 }
 </script>