diff --git a/backend/src/middleware/notifications/notificationsMiddleware.js b/backend/src/middleware/notifications/notificationsMiddleware.js
index 2bc53ab7c..5419771ea 100644
--- a/backend/src/middleware/notifications/notificationsMiddleware.js
+++ b/backend/src/middleware/notifications/notificationsMiddleware.js
@@ -41,7 +41,6 @@ const publishNotifications = async (context, promises) => {
   notifications.forEach((notificationAdded, index) => {
     pubsub.publish(NOTIFICATION_ADDED, { notificationAdded })
     if (notificationAdded.to.sendNotificationEmails) {
-      // Wolle await
       sendMail(
         notificationTemplate({
           email: notificationsEmailAddresses[index].email,
diff --git a/cypress/integration/UserProfile.SocialMedia/I_add_a_social_media_link.js b/cypress/integration/UserProfile.SocialMedia/I_add_a_social_media_link.js
index 9253709f9..ca2e36818 100644
--- a/cypress/integration/UserProfile.SocialMedia/I_add_a_social_media_link.js
+++ b/cypress/integration/UserProfile.SocialMedia/I_add_a_social_media_link.js
@@ -1,9 +1,12 @@
 import { When } from "cypress-cucumber-preprocessor/steps";
 
 When('I add a social media link', () => {
-  cy.get('input#addSocialMedia')
-    .type('https://freeradical.zone/peter-pan')
-    .get('button')
+  cy.get('button')
     .contains('Add link')
     .click()
+    .get('#editSocialMedia')
+    .type('https://freeradical.zone/peter-pan')
+    .get('button')
+    .contains('Save')
+    .click()
 })
\ No newline at end of file
diff --git a/cypress/integration/UserProfile.SocialMedia/I_have_added_a_social_media_link.js b/cypress/integration/UserProfile.SocialMedia/I_have_added_a_social_media_link.js
index 203b97032..93e35bf28 100644
--- a/cypress/integration/UserProfile.SocialMedia/I_have_added_a_social_media_link.js
+++ b/cypress/integration/UserProfile.SocialMedia/I_have_added_a_social_media_link.js
@@ -2,9 +2,12 @@ import { Given } from "cypress-cucumber-preprocessor/steps";
 
 Given('I have added a social media link', () => {
   cy.visit('/settings/my-social-media')
-    .get('input#addSocialMedia')
-    .type('https://freeradical.zone/peter-pan')
     .get('button')
     .contains('Add link')
     .click()
+    .get('#editSocialMedia')
+    .type('https://freeradical.zone/peter-pan')
+    .get('button')
+    .contains('Save')
+    .click()
 })
\ No newline at end of file
diff --git a/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js b/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js
new file mode 100644
index 000000000..513207110
--- /dev/null
+++ b/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js
@@ -0,0 +1,128 @@
+import { mount } from '@vue/test-utils'
+import MySomethingList from './MySomethingList.vue'
+import Vue from 'vue'
+
+const localVue = global.localVue
+
+describe('MySomethingList.vue', () => {
+  let wrapper
+  let propsData
+  let data
+  let mocks
+
+  beforeEach(() => {
+    propsData = {
+      useFormData: { dummy: '' },
+      useItems: [{ id: 'id', dummy: 'dummy' }],
+      namePropertyKey: 'dummy',
+      callbacks: { edit: jest.fn(), submit: jest.fn(), delete: jest.fn() },
+    }
+    data = () => {
+      return {}
+    }
+    mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        mutate: jest.fn(),
+      },
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn(),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    let form, slots
+    const Wrapper = () => {
+      slots = {
+        'list-item': '<div class="list-item"></div>',
+        'edit-item': '<div class="edit-item"></div>',
+      }
+      return mount(MySomethingList, {
+        propsData,
+        data,
+        mocks,
+        localVue,
+        slots,
+      })
+    }
+
+    describe('given existing item', () => {
+      beforeEach(() => {
+        wrapper = Wrapper()
+      })
+
+      describe('for each item it', () => {
+        it('displays the item as slot "list-item"', () => {
+          expect(wrapper.find('.list-item').exists()).toBe(true)
+        })
+
+        it('displays the edit button', () => {
+          expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
+        })
+
+        it('displays the delete button', () => {
+          expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
+        })
+      })
+
+      describe('editing item', () => {
+        beforeEach(async () => {
+          const editButton = wrapper.find('.base-button[data-test="edit-button"]')
+          editButton.trigger('click')
+          await Vue.nextTick()
+        })
+
+        it('disables adding items while editing', () => {
+          const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
+          expect(submitButton.text()).not.toContain('settings.social-media.submit')
+        })
+
+        it('allows the user to cancel editing', async () => {
+          expect(wrapper.find('.edit-item').exists()).toBe(true)
+          const cancelButton = wrapper.find('button#cancel')
+          cancelButton.trigger('click')
+          await Vue.nextTick()
+          expect(wrapper.find('.edit-item').exists()).toBe(false)
+        })
+      })
+
+      describe('calls callback functions', () => {
+        it('calls edit', async () => {
+          const editButton = wrapper.find('.base-button[data-test="edit-button"]')
+          editButton.trigger('click')
+          await Vue.nextTick()
+          const expectedItem = expect.objectContaining({ id: 'id', dummy: 'dummy' })
+          expect(propsData.callbacks.edit).toHaveBeenCalledTimes(1)
+          expect(propsData.callbacks.edit).toHaveBeenCalledWith(expect.any(Object), expectedItem)
+        })
+
+        it('calls submit', async () => {
+          form = wrapper.find('form')
+          form.trigger('submit')
+          await Vue.nextTick()
+          form.trigger('submit')
+          await Vue.nextTick()
+          const expectedItem = expect.objectContaining({ id: '' })
+          expect(propsData.callbacks.submit).toHaveBeenCalledTimes(1)
+          expect(propsData.callbacks.submit).toHaveBeenCalledWith(
+            expect.any(Object),
+            true,
+            expectedItem,
+            { dummy: '' },
+          )
+        })
+
+        it('calls delete', async () => {
+          const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
+          deleteButton.trigger('click')
+          await Vue.nextTick()
+          const expectedItem = expect.objectContaining({ id: 'id', dummy: 'dummy' })
+          expect(propsData.callbacks.delete).toHaveBeenCalledTimes(1)
+          expect(propsData.callbacks.delete).toHaveBeenCalledWith(expect.any(Object), expectedItem)
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/components/_new/features/MySomethingList/MySomethingList.vue b/webapp/components/_new/features/MySomethingList/MySomethingList.vue
new file mode 100644
index 000000000..fbfcca932
--- /dev/null
+++ b/webapp/components/_new/features/MySomethingList/MySomethingList.vue
@@ -0,0 +1,185 @@
+<template>
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+    @submit="handleSubmitItem"
+  >
+    <div v-if="isEditing">
+      <ds-space margin="base">
+        <ds-heading tag="h5">
+          {{
+            isCreation
+              ? $t('settings.social-media.addNewTitle')
+              : $t('settings.social-media.editTitle', { name: editingItem[namePropertyKey] })
+          }}
+        </ds-heading>
+      </ds-space>
+      <ds-space v-if="items" margin-top="base">
+        <slot name="edit-item" />
+      </ds-space>
+    </div>
+    <div v-else>
+      <ds-space v-if="items" margin-top="base">
+        <ds-list>
+          <ds-list-item v-for="item in items" :key="item.id" class="list-item--high">
+            <template>
+              <slot name="list-item" :item="item" />
+              <span class="divider">|</span>
+              <base-button
+                icon="edit"
+                circle
+                ghost
+                @click="handleEditItem(item)"
+                :title="$t('actions.edit')"
+                data-test="edit-button"
+              />
+              <base-button
+                icon="trash"
+                circle
+                ghost
+                @click="handleDeleteItem(item)"
+                :title="$t('actions.delete')"
+                data-test="delete-button"
+              />
+            </template>
+          </ds-list-item>
+        </ds-list>
+      </ds-space>
+    </div>
+
+    <ds-space margin-top="base">
+      <ds-space margin-top="base">
+        <base-button
+          filled
+          :disabled="loading || !(!isEditing || (isEditing && !disabled))"
+          :loading="loading"
+          type="submit"
+          data-test="add-save-button"
+        >
+          {{ isEditing ? $t('actions.save') : $t('settings.social-media.submit') }}
+        </base-button>
+        <base-button v-if="isEditing" id="cancel" danger @click="handleCancel()">
+          {{ $t('actions.cancel') }}
+        </base-button>
+      </ds-space>
+    </ds-space>
+  </ds-form>
+</template>
+
+<script>
+export default {
+  name: 'MySomethingList',
+  props: {
+    useFormData: {
+      type: Object,
+      default: () => ({}),
+    },
+    useFormSchema: {
+      type: Object,
+      default: () => ({}),
+    },
+    useItems: {
+      type: Array,
+      default: () => [],
+    },
+    defaultItem: {
+      type: Object,
+      default: () => ({}),
+    },
+    namePropertyKey: {
+      type: String,
+      required: true,
+    },
+    callbacks: {
+      type: Object,
+      default: () => ({
+        handleInput: () => {},
+        handleInputValid: () => {},
+        edit: () => {},
+        submit: () => {},
+        delete: () => {},
+      }),
+    },
+  },
+  data() {
+    return {
+      formData: this.useFormData,
+      formSchema: this.useFormSchema,
+      items: this.useItems,
+      disabled: true,
+      loading: false,
+      editingItem: null,
+    }
+  },
+  computed: {
+    isEditing() {
+      return this.editingItem !== null
+    },
+    isCreation() {
+      return this.editingItem !== null && this.editingItem.id === ''
+    },
+  },
+  watch: {
+    // can change by a parents callback and again given trough by v-bind from there
+    useItems(newItems) {
+      this.items = newItems
+    },
+  },
+  methods: {
+    handleInput(data) {
+      this.callbacks.handleInput(this, data)
+      this.disabled = true
+    },
+    handleInputValid(data) {
+      this.callbacks.handleInputValid(this, data)
+    },
+    handleEditItem(item) {
+      this.editingItem = item
+      this.callbacks.edit(this, item)
+    },
+    async handleSubmitItem() {
+      if (!this.isEditing) {
+        this.handleEditItem({ ...this.defaultItem, id: '' })
+      } else {
+        this.loading = true
+        if (await this.callbacks.submit(this, this.isCreation, this.editingItem, this.formData)) {
+          this.disabled = true
+          this.editingItem = null
+        }
+        this.loading = false
+      }
+    },
+    handleCancel() {
+      this.editingItem = null
+      this.disabled = true
+    },
+    async handleDeleteItem(item) {
+      await this.callbacks.delete(this, item)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scope>
+.divider {
+  opacity: 0.4;
+  padding: 0 $space-small;
+}
+
+.icon-button {
+  cursor: pointer;
+}
+
+.list-item--high {
+  .ds-list-item-prefix {
+    align-self: center;
+  }
+
+  .ds-list-item-content {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/webapp/components/_new/features/SocialMedia/SocialMediaListItem.spec.js b/webapp/components/_new/features/SocialMedia/SocialMediaListItem.spec.js
new file mode 100644
index 000000000..c7359d873
--- /dev/null
+++ b/webapp/components/_new/features/SocialMedia/SocialMediaListItem.spec.js
@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils'
+import SocialMediaListItem from './SocialMediaListItem.vue'
+
+describe('SocialMediaListItem.vue', () => {
+  let wrapper
+  let propsData
+  const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
+  const faviconUrl = 'https://freeradical.zone/favicon.ico'
+
+  beforeEach(() => {
+    propsData = {}
+  })
+
+  describe('shallowMount', () => {
+    const Wrapper = () => {
+      return shallowMount(SocialMediaListItem, { propsData })
+    }
+
+    describe('given existing social media links', () => {
+      beforeEach(() => {
+        propsData = { item: { id: 's1', url: socialMediaUrl, favicon: faviconUrl } }
+        wrapper = Wrapper()
+      })
+
+      describe('for each link item it', () => {
+        it('displays the favicon', () => {
+          expect(wrapper.find(`img[src="${faviconUrl}"]`).exists()).toBe(true)
+        })
+
+        it('displays the url', () => {
+          expect(wrapper.find(`a[href="${socialMediaUrl}"]`).exists()).toBe(true)
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/components/_new/features/SocialMedia/SocialMediaListItem.vue b/webapp/components/_new/features/SocialMedia/SocialMediaListItem.vue
new file mode 100644
index 000000000..75dea7ba8
--- /dev/null
+++ b/webapp/components/_new/features/SocialMedia/SocialMediaListItem.vue
@@ -0,0 +1,18 @@
+<template>
+  <a :href="item.url" target="_blank">
+    <img :src="item.favicon" alt="Link:" height="16" width="16" />
+    {{ item.url }}
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'SocialMediaListItem',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+}
+</script>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 9816e167a..a98f0a320 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -773,6 +773,8 @@
       "name": "Sicherheit"
     },
     "social-media": {
+      "addNewTitle": "Neuen Link hinzufügen",
+      "editTitle": "Link \"{name}\" ändern",
       "name": "Soziale Netzwerke",
       "placeholder": "Deine Webadresse des Sozialen Netzwerkes",
       "requireUnique": "Dieser Link existiert bereits",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 11b920056..f6606b933 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -773,6 +773,8 @@
       "name": "Security"
     },
     "social-media": {
+      "addNewTitle": "Add new link",
+      "editTitle": "Edit link \"{name}\"",
       "name": "Social media",
       "placeholder": "Your social media url",
       "requireUnique": "You added this url already",
diff --git a/webapp/pages/settings/my-social-media.spec.js b/webapp/pages/settings/my-social-media.spec.js
index 1aadbb750..7136e1e7c 100644
--- a/webapp/pages/settings/my-social-media.spec.js
+++ b/webapp/pages/settings/my-social-media.spec.js
@@ -33,7 +33,7 @@ describe('my-social-media.vue', () => {
   })
 
   describe('mount', () => {
-    let form, input, submitButton
+    let form, input
     const Wrapper = () => {
       const store = new Vuex.Store({
         getters,
@@ -42,11 +42,12 @@ describe('my-social-media.vue', () => {
     }
 
     describe('adding social media link', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper = Wrapper()
         form = wrapper.find('form')
-        input = wrapper.find('input#addSocialMedia')
-        submitButton = wrapper.find('button')
+        form.trigger('submit')
+        await Vue.nextTick()
+        input = wrapper.find('input#editSocialMedia')
       })
 
       it('requires the link to be a valid url', async () => {
@@ -79,7 +80,6 @@ describe('my-social-media.vue', () => {
           const expected = expect.objectContaining({
             variables: { url: newSocialMediaUrl },
           })
-
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
         })
 
@@ -88,10 +88,10 @@ describe('my-social-media.vue', () => {
           expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
         })
 
-        it('clears the form', async () => {
+        it('switches back to list', async () => {
           await flushPromises()
-          expect(input.value).toBe(undefined)
-          expect(submitButton.vm.$attrs.disabled).toBe(true)
+          const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
+          expect(submitButton.text()).not.toContain('settings.social-media.submit')
         })
       })
     })
@@ -100,10 +100,9 @@ describe('my-social-media.vue', () => {
       beforeEach(() => {
         getters = {
           'auth/user': () => ({
-            socialMedia: [{ id: 's1', url: socialMediaUrl }],
+            socialMedia: [{ id: 's1', url: socialMediaUrl, favicon: faviconUrl }],
           }),
         }
-
         wrapper = Wrapper()
         form = wrapper.find('form')
       })
@@ -116,18 +115,12 @@ describe('my-social-media.vue', () => {
         it('displays the url', () => {
           expect(wrapper.find(`a[href="${socialMediaUrl}"]`).exists()).toBe(true)
         })
-
-        it('displays the edit button', () => {
-          expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
-        })
-
-        it('displays the delete button', () => {
-          expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
-        })
       })
 
       it('does not accept a duplicate url', async () => {
-        wrapper.find('input#addSocialMedia').setValue(socialMediaUrl)
+        form.trigger('submit')
+        await Vue.nextTick()
+        wrapper.find('input#editSocialMedia').setValue(socialMediaUrl)
         form.trigger('submit')
         await Vue.nextTick()
         expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
@@ -141,12 +134,6 @@ describe('my-social-media.vue', () => {
           input = wrapper.find('input#editSocialMedia')
         })
 
-        it('disables adding new links while editing', () => {
-          const addInput = wrapper.find('input#addSocialMedia')
-
-          expect(addInput.exists()).toBe(false)
-        })
-
         it('sends the new url to the backend', async () => {
           const expected = expect.objectContaining({
             variables: { id: 's1', url: newSocialMediaUrl },
@@ -156,13 +143,6 @@ describe('my-social-media.vue', () => {
           await Vue.nextTick()
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
         })
-
-        it('allows the user to cancel editing', async () => {
-          const cancelButton = wrapper.find('button#cancel')
-          cancelButton.trigger('click')
-          await Vue.nextTick()
-          expect(wrapper.find('input#editSocialMedia').exists()).toBe(false)
-        })
       })
 
       describe('deleting social media link', () => {
@@ -176,7 +156,6 @@ describe('my-social-media.vue', () => {
           const expected = expect.objectContaining({
             variables: { id: 's1' },
           })
-
           expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
         })
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index 5753fc405..a985371d6 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -1,97 +1,73 @@
 <template>
-  <ds-form
-    v-model="formData"
-    :schema="formSchema"
-    @input="handleInput"
-    @input-valid="handleInputValid"
-    @submit="handleSubmitSocialMedia"
-  >
-    <base-card>
-      <h2 class="title">{{ $t('settings.social-media.name') }}</h2>
-      <ds-space v-if="socialMediaLinks" margin-top="base" margin="x-small">
-        <ds-list>
-          <ds-list-item v-for="link in socialMediaLinks" :key="link.id" class="list-item--high">
-            <ds-input
-              v-if="editingLink.id === link.id"
-              id="editSocialMedia"
-              model="socialMediaUrl"
-              type="text"
-              :placeholder="$t('settings.social-media.placeholder')"
-            />
-
-            <template v-else>
-              <a :href="link.url" target="_blank">
-                <img :src="link.favicon" alt="Link:" height="16" width="16" />
-                {{ link.url }}
-              </a>
-              <span class="divider">|</span>
-              <base-button
-                icon="edit"
-                circle
-                ghost
-                @click="handleEditSocialMedia(link)"
-                :title="$t('actions.edit')"
-                data-test="edit-button"
-              />
-              <base-button
-                icon="trash"
-                circle
-                ghost
-                @click="handleDeleteSocialMedia(link)"
-                :title="$t('actions.delete')"
-                data-test="delete-button"
-              />
-            </template>
-          </ds-list-item>
-        </ds-list>
-      </ds-space>
-
-      <ds-space margin-top="base">
+  <base-card>
+    <ds-heading tag="h2" class="title">{{ $t('settings.social-media.name') }}</ds-heading>
+    <my-something-list
+      :useFormData="useFormData"
+      :useFormSchema="useFormSchema"
+      :useItems="socialMediaLinks"
+      :defaultItem="{ url: '' }"
+      :namePropertyKey="'url'"
+      :callbacks="{
+        handleInput: () => {},
+        handleInputValid,
+        edit: callbackEditSocialMedia,
+        submit: handleSubmitSocialMedia,
+        delete: callbackDeleteSocialMedia,
+      }"
+    >
+      <template #list-item="{ item }">
+        <social-media-list-item :item="item" />
+      </template>
+      <template #edit-item>
         <ds-input
-          v-if="!editingLink.id"
-          id="addSocialMedia"
+          id="editSocialMedia"
           model="socialMediaUrl"
           type="text"
           :placeholder="$t('settings.social-media.placeholder')"
         />
-        <ds-space margin-top="base">
-          <base-button filled :disabled="disabled" type="submit">
-            {{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }}
-          </base-button>
-          <base-button v-if="editingLink.id" id="cancel" danger @click="handleCancel()">
-            {{ $t('actions.cancel') }}
-          </base-button>
-        </ds-space>
-      </ds-space>
-    </base-card>
-  </ds-form>
+      </template>
+    </my-something-list>
+  </base-card>
 </template>
 
 <script>
+import { mapGetters, mapMutations } from 'vuex'
 import unionBy from 'lodash/unionBy'
 import gql from 'graphql-tag'
-import { mapGetters, mapMutations } from 'vuex'
+import MySomethingList from '~/components/_new/features/MySomethingList/MySomethingList.vue'
+import SocialMediaListItem from '~/components/_new/features/SocialMedia/SocialMediaListItem.vue'
 
 export default {
+  components: {
+    MySomethingList,
+    SocialMediaListItem,
+  },
   data() {
     return {
-      formData: {
+      useFormData: {
         socialMediaUrl: '',
       },
-      formSchema: {
+      useFormSchema: {
         socialMediaUrl: {
           type: 'url',
           message: this.$t('common.validations.url'),
         },
       },
-      disabled: true,
-      editingLink: {},
     }
   },
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
     }),
+    currentSocialMediaLinks() {
+      const domainRegex = /^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:/\n?]+)/g
+      const { socialMedia = [] } = this.currentUser
+      return socialMedia.map(({ id, url }) => {
+        const [domain] = url.match(domainRegex) || []
+        const favicon = domain ? `${domain}/favicon.ico` : null
+        return { id, url, favicon }
+      })
+    },
     socialMediaLinks() {
       const domainRegex = /^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:/\n?]+)/g
       const { socialMedia = [] } = this.currentUser
@@ -106,28 +82,83 @@ export default {
     ...mapMutations({
       setCurrentUser: 'auth/SET_USER',
     }),
-    handleCancel() {
-      this.editingLink = {}
-      this.formData.socialMediaUrl = ''
-      this.disabled = true
-    },
-    handleEditSocialMedia(link) {
-      this.editingLink = link
-      this.formData.socialMediaUrl = link.url
-    },
-    handleInput(data) {
-      this.disabled = true
-    },
-    handleInputValid(data) {
+    handleInputValid(thisList, data) {
       if (data.socialMediaUrl.length < 1) {
-        this.disabled = true
+        thisList.disabled = true
       } else {
-        this.disabled = false
+        thisList.disabled = false
       }
     },
-    async handleDeleteSocialMedia(link) {
+    callbackEditSocialMedia(thisList, link) {
+      thisList.formData.socialMediaUrl = link.url
+      // try to set focus on link edit field
+      // thisList.$refs.socialMediaUrl.$el.focus()
+      // !!! Check for existenz
+      // this.$scopedSlots.default()[0].context.$refs
+      // thisList.$scopedSlots['edit-item']()[0].$el.focus()
+      // console.log(thisList.$scopedSlots['edit-item']()[0].context.$refs)
+      // console.log(thisList.$scopedSlots['edit-item']()[0].context.$refs)
+      // console.log(thisList.$refs)
+    },
+    async handleSubmitSocialMedia(thisList, isCreation, item, formData) {
+      item.url = formData.socialMediaUrl
+
+      const items = this.socialMediaLinks
+      const duplicateUrl = items.find((eleItem) => eleItem.url === item.url)
+      if (duplicateUrl && duplicateUrl.id !== item.id) {
+        return thisList.$toast.error(thisList.$t('settings.social-media.requireUnique'))
+      }
+
+      let mutation, variables, successMessage
+      if (isCreation) {
+        mutation = gql`
+          mutation($url: String!) {
+            CreateSocialMedia(url: $url) {
+              id
+              url
+            }
+          }
+        `
+        variables = { url: item.url }
+        successMessage = thisList.$t('settings.social-media.successAdd')
+      } else {
+        mutation = gql`
+          mutation($id: ID!, $url: String!) {
+            UpdateSocialMedia(id: $id, url: $url) {
+              id
+              url
+            }
+          }
+        `
+        variables = { id: item.id, url: item.url }
+        successMessage = thisList.$t('settings.data.success')
+      }
+
       try {
-        await this.$apollo.mutate({
+        await thisList.$apollo.mutate({
+          mutation,
+          variables,
+          update: (_store, { data }) => {
+            const newSocialMedia = !isCreation ? data.UpdateSocialMedia : data.CreateSocialMedia
+            this.setCurrentUser({
+              ...this.currentUser,
+              socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
+            })
+          },
+        })
+
+        thisList.$toast.success(successMessage)
+
+        return true
+      } catch (err) {
+        thisList.$toast.error(err.message)
+
+        return false
+      }
+    },
+    async callbackDeleteSocialMedia(thisList, item) {
+      try {
+        await thisList.$apollo.mutate({
           mutation: gql`
             mutation($id: ID!) {
               DeleteSocialMedia(id: $id) {
@@ -137,11 +168,11 @@ export default {
             }
           `,
           variables: {
-            id: link.id,
+            id: item.id,
           },
           update: (store, { data }) => {
             const socialMedia = this.currentUser.socialMedia.filter(
-              (element) => element.id !== link.id,
+              (element) => element.id !== item.id,
             )
             this.setCurrentUser({
               ...this.currentUser,
@@ -150,87 +181,11 @@ export default {
           },
         })
 
-        this.$toast.success(this.$t('settings.social-media.successDelete'))
+        thisList.$toast.success(thisList.$t('settings.social-media.successDelete'))
       } catch (err) {
-        this.$toast.error(err.message)
-      }
-    },
-    async handleSubmitSocialMedia() {
-      const isEditing = !!this.editingLink.id
-      const url = this.formData.socialMediaUrl
-
-      const duplicateUrl = this.socialMediaLinks.find((link) => link.url === url)
-      if (duplicateUrl && duplicateUrl.id !== this.editingLink.id) {
-        return this.$toast.error(this.$t('settings.social-media.requireUnique'))
-      }
-
-      let mutation = gql`
-        mutation($url: String!) {
-          CreateSocialMedia(url: $url) {
-            id
-            url
-          }
-        }
-      `
-      const variables = { url }
-      let successMessage = this.$t('settings.social-media.successAdd')
-
-      if (isEditing) {
-        mutation = gql`
-          mutation($id: ID!, $url: String!) {
-            UpdateSocialMedia(id: $id, url: $url) {
-              id
-              url
-            }
-          }
-        `
-        variables.id = this.editingLink.id
-        successMessage = this.$t('settings.data.success')
-      }
-
-      try {
-        await this.$apollo.mutate({
-          mutation,
-          variables,
-          update: (store, { data }) => {
-            const newSocialMedia = isEditing ? data.UpdateSocialMedia : data.CreateSocialMedia
-            this.setCurrentUser({
-              ...this.currentUser,
-              socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
-            })
-          },
-        })
-
-        this.$toast.success(successMessage)
-        this.formData.socialMediaUrl = ''
-        this.disabled = true
-        this.editingLink = {}
-      } catch (err) {
-        this.$toast.error(err.message)
+        thisList.$toast.error(err.message)
       }
     },
   },
 }
 </script>
-
-<style lang="scss">
-.divider {
-  opacity: 0.4;
-  padding: 0 $space-small;
-}
-
-.icon-button {
-  cursor: pointer;
-}
-
-.list-item--high {
-  .ds-list-item-prefix {
-    align-self: center;
-  }
-
-  .ds-list-item-content {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>