diff --git a/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js b/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js
index 0cc99c467..86a5af52e 100644
--- a/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js
+++ b/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js
@@ -1,20 +1,26 @@
 import { mount } from '@vue/test-utils'
-import flushPromises from 'flush-promises'
+// Wolle import flushPromises from 'flush-promises'
 import MySomethingList from './MySomethingList.vue'
-import Vuex from 'vuex'
+// Wolle import Vuex from 'vuex'
 import Vue from 'vue'
 
 const localVue = global.localVue
 
 describe('MySomethingList.vue', () => {
   let wrapper
+  let propsData
   let data
   let mocks
-  let getters
-  const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
+  // let getters
+  // Wolle const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
   // const newSocialMediaUrl = 'https://twitter.com/mattwr18'
 
   beforeEach(() => {
+    propsData = {
+      useItems: [{ id: 'id', dummy: 'dummy' }],
+      namePropertyKey: 'dummy',
+      callbacks: { edit: jest.fn(), submit: jest.fn(), delete: jest.fn() },
+    }
     data = () => {
       return {}
     }
@@ -28,22 +34,32 @@ describe('MySomethingList.vue', () => {
         success: jest.fn(),
       },
     }
-    getters = {
-      'auth/user': () => {
-        return {}
-      },
-    }
+    // getters = {
+    //   'auth/user': () => {
+    //     return {}
+    //   },
+    // }
   })
 
   describe('mount', () => {
     // Wolle let form, input, slots, submitButton
-    let slots
+    let form, slots
     const Wrapper = () => {
-      const store = new Vuex.Store({
-        getters,
+      // const store = new Vuex.Store({
+      //   getters,
+      // })
+      slots = {
+        'list-item': '<div class="list-item"></div>',
+        'edit-item': '<div class="edit-item"></div>',
+      }
+      return mount(MySomethingList, {
+        propsData,
+        data,
+        // store,
+        mocks,
+        localVue,
+        slots,
       })
-      slots = { 'list-item': '<div class="list-item"></div>' }
-      return mount(MySomethingList, { data, store, mocks, localVue, slots })
     }
 
     // describe('adding social media link', () => {
@@ -108,11 +124,11 @@ describe('MySomethingList.vue', () => {
 
     describe('given existing social media links', () => {
       beforeEach(() => {
-        getters = {
-          'auth/user': () => ({
-            socialMedia: [{ id: 's1', url: socialMediaUrl }],
-          }),
-        }
+        // getters = {
+        //   'auth/user': () => ({
+        //     socialMedia: [{ id: 's1', url: socialMediaUrl }],
+        //   }),
+        // }
         // Wolle propsData = { editingLink: { id: 's1', url: socialMediaUrl } }
         // data = () => {
         //   return {
@@ -137,67 +153,56 @@ describe('MySomethingList.vue', () => {
         })
       })
 
-      // Wolle it('does not accept a duplicate url', async () => {
-      //   // wrapper.find('input#addSocialMedia').setValue(socialMediaUrl)
-      //   wrapper.find('input#editSocialMedia').setValue(socialMediaUrl)
-      //   form.trigger('submit')
-      //   await Vue.nextTick()
-      //   expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
-      // })
-
-      // describe('editing social media link', () => {
-      //   beforeEach(async () => {
-      //     const editButton = wrapper.find('.base-button[data-test="edit-button"]')
-      //     editButton.trigger('click')
-      //     await Vue.nextTick()
-      //     input = wrapper.find('input#editSocialMedia')
-      //   })
-
-      //   it('disables adding new links while editing', () => {
-      // const addInput = wrapper.find('input#addSocialMedia')
-      // wrapper.find('.base-button[data-test="add-save-button"]').text().
-      // expect(addInput.exists()).toBe(false)
-      //   const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
-      //   expect(submitButton.text()).not.toContain('settings.social-media.submit')
-      // })
-
-      // Wolle remove? or test here abstract? it('sends the new url to the backend', async () => {
-      //   const expected = expect.objectContaining({
-      //     variables: { id: 's1', url: newSocialMediaUrl },
-      //   })
-      //   input.setValue(newSocialMediaUrl)
-      //   form.trigger('submit')
-      //   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', () => {
+      describe('editing item', () => {
         beforeEach(async () => {
+          const editButton = wrapper.find('.base-button[data-test="edit-button"]')
+          editButton.trigger('click')
+          await Vue.nextTick()
+          // Wolle input = wrapper.find('input#editSocialMedia')
+        })
+
+        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()).toBeTruthy()
+          const cancelButton = wrapper.find('button#cancel')
+          cancelButton.trigger('click')
+          await Vue.nextTick()
+          expect(wrapper.find('.edit-item').exists()).not.toBeTruthy()
+        })
+      })
+
+      describe('calls callback functions', () => {
+        it('call 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('call edit', 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.edit).toHaveBeenCalledTimes(1)
+          expect(propsData.callbacks.edit).toHaveBeenCalledWith(expect.any(Object), expectedItem)
+        })
+
+        it('call delete', async () => {
           const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
           deleteButton.trigger('click')
           await Vue.nextTick()
-        })
-
-        it('sends the link id to the backend', () => {
-          const expected = expect.objectContaining({
-            variables: { id: 's1' },
-          })
-
-          expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
-        })
-
-        it('displays a success message', async () => {
-          await flushPromises()
-          expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+          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
index 1017d3bd1..4eb18064b 100644
--- a/webapp/components/_new/features/MySomethingList/MySomethingList.vue
+++ b/webapp/components/_new/features/MySomethingList/MySomethingList.vue
@@ -1,99 +1,96 @@
 <template>
-  <base-card>
-    <ds-heading tag="h2" class="title">{{ $t('settings.social-media.name') }}</ds-heading>
-    <ds-form
-      v-model="formData"
-      :schema="formSchema"
-      @input="handleInput"
-      @input-valid="handleInputValid"
-      @submit="handleSubmitSocialMedia"
-    >
-      <div v-if="isEditing">
-        <!-- Wolle translation -->
-        <ds-space margin="base">
-          <ds-heading tag="h3" class="undertitle">
-            {{
-              /* $t('settings.social-media.name') */ editingLink.id === ''
-                ? 'Add new one'
-                : 'Edit "' + editingLink.url + '"'
-            }}
-          </ds-heading>
-        </ds-space>
-        <ds-space v-if="socialMediaLinks" margin-top="base" margin="base">
-          <!-- Wolle <ds-input
-            id="editSocialMedia"
-            model="socialMediaUrl"
-            type="text"
-            :placeholder="$t('settings.social-media.placeholder')"
-          /> -->
-          <slot name="edit-item" />
-        </ds-space>
-      </div>
-      <div v-else>
-        <ds-space v-if="socialMediaLinks" margin-top="base" margin="small">
-          <ds-list>
-            <ds-list-item v-for="link in socialMediaLinks" :key="link.id" class="list-item--high">
-              <!-- Wolle remove template tag? -->
-              <template>
-                <!-- Wolle <a :href="link.url" target="_blank">
-                  <img :src="link.favicon" alt="Link:" height="16" width="16" />
-                  {{ link.url }}
-                </a> -->
-                <!-- Wolle <slot name="list-item" :link="link" data-test="item-slot" /> -->
-                <slot name="list-item" :link="link" />
-                <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>
-      </div>
-
-      <ds-space margin-top="base">
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+    @submit="handleSubmitSocialMedia"
+  >
+    <div v-if="isEditing">
+      <!-- Wolle translation -->
+      <ds-space margin="base">
+        <ds-heading tag="h3" class="undertitle">
+          {{
+            /* $t('settings.social-media.name') */ isCreation
+              ? 'Add new'
+              : 'Edit "' + editingItem[namePropertyKey] + '"'
+          }}
+        </ds-heading>
+      </ds-space>
+      <ds-space v-if="items" margin-top="base" margin="base">
         <!-- Wolle <ds-input
-          v-if="!isEditing"
-          id="addSocialMedia"
+          id="editSocialMedia"
           model="socialMediaUrl"
           type="text"
           :placeholder="$t('settings.social-media.placeholder')"
         /> -->
-        <ds-space margin-top="base">
-          <base-button
-            filled
-            :disabled="!(!isEditing || (isEditing && !disabled))"
-            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>
+        <slot name="edit-item" />
       </ds-space>
-    </ds-form>
-  </base-card>
+    </div>
+    <div v-else>
+      <ds-space v-if="items" margin-top="base" margin="small">
+        <ds-list>
+          <ds-list-item v-for="item in items" :key="item.id" class="list-item--high">
+            <!-- Wolle remove template tag? -->
+            <template>
+              <!-- Wolle <a :href="link.url" target="_blank">
+                <img :src="link.favicon" alt="Link:" height="16" width="16" />
+                {{ link.url }}
+              </a> -->
+              <!-- Wolle <slot name="list-item" :link="link" data-test="item-slot" /> -->
+              <slot name="list-item" :item="item" />
+              <span class="divider">|</span>
+              <base-button
+                icon="edit"
+                circle
+                ghost
+                @click="handleEditSocialMedia(item)"
+                :title="$t('actions.edit')"
+                data-test="edit-button"
+              />
+              <base-button
+                icon="trash"
+                circle
+                ghost
+                @click="handleDeleteSocialMedia(item)"
+                :title="$t('actions.delete')"
+                data-test="delete-button"
+              />
+            </template>
+          </ds-list-item>
+        </ds-list>
+      </ds-space>
+    </div>
+
+    <ds-space margin-top="base">
+      <!-- Wolle <ds-input
+        v-if="!isEditing"
+        id="addSocialMedia"
+        model="socialMediaUrl"
+        type="text"
+        :placeholder="$t('settings.social-media.placeholder')"
+      /> -->
+      <ds-space margin-top="base">
+        <base-button
+          filled
+          :disabled="!(!isEditing || (isEditing && !disabled))"
+          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>
-import unionBy from 'lodash/unionBy'
-import gql from 'graphql-tag'
-import { mapGetters, mapMutations } from 'vuex'
+// Wolle import unionBy from 'lodash/unionBy'
+// import gql from 'graphql-tag'
+// Wolle import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   name: 'MySomethingList',
@@ -106,12 +103,25 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    callbackEdit: {
-      type: Function,
-      default: () => {},
+    useItems: {
+      type: Array,
+      default: () => [],
+    },
+    defaultItem: {
+      type: Object,
+      default: () => ({}),
+    },
+    namePropertyKey: {
+      type: String,
+      required: true,
+    },
+    callbacks: {
+      type: Object,
+      default: () => ({ edit: () => {}, submit: () => {}, delete: () => {} }),
     },
   },
   data() {
+    // Wolle console.log(this.useItems)
     return {
       // Wolle formData: {
       //   socialMediaUrl: '',
@@ -124,44 +134,56 @@ export default {
       // },
       formData: this.useFormData,
       formSchema: this.useFormSchema,
+      items: this.useItems,
       disabled: true,
-      editingLink: null,
+      editingItem: null,
     }
   },
   computed: {
-    ...mapGetters({
-      currentUser: 'auth/user',
-    }),
+    // Wolle ...mapGetters({
+    //   currentUser: 'auth/user',
+    // }),
     isEditing() {
-      return this.editingLink !== null
+      return this.editingItem !== null
     },
     isCreation() {
-      return this.editingLink !== null && this.editingLink.id === ''
+      return this.editingItem !== null && this.editingItem.id === ''
     },
-    socialMediaLinks() {
-      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 }
-      })
+    // Wolle socialMediaLinks() {
+    //   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 }
+    //   })
+    // },
+  },
+  watch: {
+    // useFormData(newFormData) {
+    //   this.formData = newFormData
+    // },
+    // useFormSchema(newFormSchema) {
+    //   this.formSchema = newFormSchema
+    // },
+    useItems(newItems) {
+      this.items = newItems
     },
   },
   methods: {
-    ...mapMutations({
-      setCurrentUser: 'auth/SET_USER',
-    }),
+    // Wolle ...mapMutations({
+    //   setCurrentUser: 'auth/SET_USER',
+    // }),
     handleCancel() {
-      this.editingLink = null
-      this.formData.socialMediaUrl = ''
+      this.editingItem = null
+      // Wolle ??? this.formData.socialMediaUrl = ''
       this.disabled = true
     },
-    handleEditSocialMedia(link) {
-      this.editingLink = link
+    handleEditSocialMedia(item) {
+      this.editingItem = item
       // Wolle this.formData.socialMediaUrl = link.url
       // Wolle this.$refs.socialMediaUrl.$el.focus()
-      this.callbackEdit(this, link)
+      this.callbacks.edit(this, item)
     },
     handleInput(data) {
       this.disabled = true
@@ -173,99 +195,105 @@ export default {
         this.disabled = false
       }
     },
-    async handleDeleteSocialMedia(link) {
-      try {
-        await this.$apollo.mutate({
-          mutation: gql`
-            mutation($id: ID!) {
-              DeleteSocialMedia(id: $id) {
-                id
-                url
-              }
-            }
-          `,
-          variables: {
-            id: link.id,
-          },
-          update: (store, { data }) => {
-            const socialMedia = this.currentUser.socialMedia.filter(
-              (element) => element.id !== link.id,
-            )
-            this.setCurrentUser({
-              ...this.currentUser,
-              socialMedia,
-            })
-          },
-        })
+    async handleDeleteSocialMedia(item) {
+      // Wolle try {
+      //   await this.$apollo.mutate({
+      //     mutation: gql`
+      //       mutation($id: ID!) {
+      //         DeleteSocialMedia(id: $id) {
+      //           id
+      //           url
+      //         }
+      //       }
+      //     `,
+      //     variables: {
+      //       id: item.id,
+      //     },
+      //     update: (store, { data }) => {
+      //       const socialMedia = this.currentUser.socialMedia.filter(
+      //         (element) => element.id !== item.id,
+      //       )
+      //       this.setCurrentUser({
+      //         ...this.currentUser,
+      //         socialMedia,
+      //       })
+      //     },
+      //   })
 
-        this.$toast.success(this.$t('settings.social-media.successDelete'))
-      } catch (err) {
-        this.$toast.error(err.message)
-      }
+      //   this.$toast.success(this.$t('settings.social-media.successDelete'))
+      // } catch (err) {
+      //   this.$toast.error(err.message)
+      // }
+      await this.callbacks.delete(this, item)
     },
     async handleSubmitSocialMedia() {
       // Wolle const isEditing = (this.editingLink !== null)
       if (!this.isEditing) {
         // Wolle this.editingLink = { id: '', url: '' }
-        this.handleEditSocialMedia({ id: '', url: '' })
+        // this.handleEditSocialMedia({ id: '', url: '' })
+        this.handleEditSocialMedia({ ...this.defaultItem, id: '' })
       } else {
-        // Wolle const url = this.formData.socialMediaUrl
-        this.editingLink.url = this.formData.socialMediaUrl
+        // // Wolle const url = this.formData.socialMediaUrl
+        // this.editingLink.url = this.formData.socialMediaUrl
 
-        const duplicateUrl = this.socialMediaLinks.find((link) => link.url === this.editingLink.url)
-        // Wolle console.log('duplicateUrl: ', duplicateUrl)
-        // console.log('this.isEditing: ', this.isEditing)
-        // console.log('this.editingLink: ', this.editingLink)
-        if (duplicateUrl && this.isEditing && duplicateUrl.id !== this.editingLink.id) {
-          return this.$toast.error(this.$t('settings.social-media.requireUnique'))
-        }
+        // const duplicateUrl = this.items.find((item) => item.url === this.editingLink.url)
+        // // Wolle console.log('duplicateUrl: ', duplicateUrl)
+        // // console.log('this.isEditing: ', this.isEditing)
+        // // console.log('this.editingLink: ', this.editingLink)
+        // if (duplicateUrl && this.isEditing && duplicateUrl.id !== this.editingLink.id) {
+        //   return this.$toast.error(this.$t('settings.social-media.requireUnique'))
+        // }
 
-        let mutation, variables, successMessage
-        if (this.isCreation) {
-          mutation = gql`
-            mutation($url: String!) {
-              CreateSocialMedia(url: $url) {
-                id
-                url
-              }
-            }
-          `
-          variables = { url: this.editingLink.url }
-          successMessage = this.$t('settings.social-media.successAdd')
-        } else {
-          mutation = gql`
-            mutation($id: ID!, $url: String!) {
-              UpdateSocialMedia(id: $id, url: $url) {
-                id
-                url
-              }
-            }
-          `
-          variables = { id: this.editingLink.id, url: this.editingLink.url }
-          successMessage = this.$t('settings.data.success')
-        }
+        // let mutation, variables, successMessage
+        // if (this.isCreation) {
+        //   mutation = gql`
+        //     mutation($url: String!) {
+        //       CreateSocialMedia(url: $url) {
+        //         id
+        //         url
+        //       }
+        //     }
+        //   `
+        //   variables = { url: this.editingLink.url }
+        //   successMessage = this.$t('settings.social-media.successAdd')
+        // } else {
+        //   mutation = gql`
+        //     mutation($id: ID!, $url: String!) {
+        //       UpdateSocialMedia(id: $id, url: $url) {
+        //         id
+        //         url
+        //       }
+        //     }
+        //   `
+        //   variables = { id: this.editingLink.id, url: this.editingLink.url }
+        //   successMessage = this.$t('settings.data.success')
+        // }
 
-        try {
-          await this.$apollo.mutate({
-            mutation,
-            variables,
-            update: (_store, { data }) => {
-              const newSocialMedia = !this.isCreation
-                ? data.UpdateSocialMedia
-                : data.CreateSocialMedia
-              this.setCurrentUser({
-                ...this.currentUser,
-                socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
-              })
-            },
-          })
+        // try {
+        //   await this.$apollo.mutate({
+        //     mutation,
+        //     variables,
+        //     update: (_store, { data }) => {
+        //       const newSocialMedia = !this.isCreation
+        //         ? data.UpdateSocialMedia
+        //         : data.CreateSocialMedia
+        //       this.setCurrentUser({
+        //         ...this.currentUser,
+        //         socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
+        //       })
+        //     },
+        //   })
 
-          this.$toast.success(successMessage)
-          this.formData.socialMediaUrl = ''
+        //   this.$toast.success(successMessage)
+        //   this.formData.socialMediaUrl = ''
+        //   this.disabled = true
+        //   this.editingLink = null
+        // } catch (err) {
+        //   this.$toast.error(err.message)
+        // }
+        if (await this.callbacks.submit(this, this.isCreation, this.editingItem, this.formData)) {
           this.disabled = true
-          this.editingLink = null
-        } catch (err) {
-          this.$toast.error(err.message)
+          this.editingItem = null
         }
       }
     },
diff --git a/webapp/components/_new/features/SocialMedia/SocialMediaListItem.vue b/webapp/components/_new/features/SocialMedia/SocialMediaListItem.vue
index 0f807fdcd..75dea7ba8 100644
--- a/webapp/components/_new/features/SocialMedia/SocialMediaListItem.vue
+++ b/webapp/components/_new/features/SocialMedia/SocialMediaListItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <a :href="link.url" target="_blank">
-    <img :src="link.favicon" alt="Link:" height="16" width="16" />
-    {{ link.url }}
+  <a :href="item.url" target="_blank">
+    <img :src="item.favicon" alt="Link:" height="16" width="16" />
+    {{ item.url }}
   </a>
 </template>
 
@@ -9,7 +9,7 @@
 export default {
   name: 'SocialMediaListItem',
   props: {
-    link: {
+    item: {
       type: Object,
       default: () => ({}),
     },
diff --git a/webapp/pages/settings/my-social-media.spec.js b/webapp/pages/settings/my-social-media.spec.js
index 2da42b1d3..362ec28d5 100644
--- a/webapp/pages/settings/my-social-media.spec.js
+++ b/webapp/pages/settings/my-social-media.spec.js
@@ -112,7 +112,6 @@ describe('my-social-media.vue', () => {
             socialMedia: [{ id: 's1', url: socialMediaUrl }],
           }),
         }
-
         wrapper = Wrapper()
         form = wrapper.find('form')
       })
@@ -152,13 +151,6 @@ describe('my-social-media.vue', () => {
           input = wrapper.find('input#editSocialMedia')
         })
 
-        it('disables adding new links while editing', () => {
-          // Wolle  const addInput = wrapper.find('input#addSocialMedia')
-          //   expect(addInput.exists()).toBe(false)
-          const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
-          expect(submitButton.text()).not.toContain('settings.social-media.submit')
-        })
-
         it('sends the new url to the backend', async () => {
           const expected = expect.objectContaining({
             variables: { id: 's1', url: newSocialMediaUrl },
@@ -168,36 +160,28 @@ 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', () => {
-      //   beforeEach(async () => {
-      //     const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
-      //     deleteButton.trigger('click')
-      //     await Vue.nextTick()
-      //   })
+      describe('deleting social media link', () => {
+        beforeEach(async () => {
+          const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
+          deleteButton.trigger('click')
+          await Vue.nextTick()
+        })
 
-      //   it('sends the link id to the backend', () => {
-      //     const expected = expect.objectContaining({
-      //       variables: { id: 's1' },
-      //     })
+        it('sends the link id to the backend', () => {
+          const expected = expect.objectContaining({
+            variables: { id: 's1' },
+          })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
 
-      //     expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
-      //     expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
-      //   })
-
-      //   it('displays a success message', async () => {
-      //     await flushPromises()
-      //     expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
-      //   })
-      // })
+        it('displays a success message', async () => {
+          await flushPromises()
+          expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+        })
+      })
     })
   })
 })
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index 510bba55f..08e6e8e37 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -1,24 +1,37 @@
 <template>
-  <my-something-list
-    :useFormData="useFormData"
-    :useFormSchema="useFormSchema"
-    :callbackEdit="callbackEditSocialMedia"
-  >
-    <template #list-item="{ link }">
-      <social-media-list-item :link="link" />
-    </template>
-    <template #edit-item>
-      <ds-input
-        id="editSocialMedia"
-        model="socialMediaUrl"
-        type="text"
-        :placeholder="$t('settings.social-media.placeholder')"
-      />
-    </template>
-  </my-something-list>
+  <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="{
+        edit: callbackEditSocialMedia,
+        submit: handleSubmitSocialMedia,
+        delete: callbackDeleteSocialMedia,
+      }"
+    >
+      <template #list-item="{ item }">
+        <social-media-list-item :item="item" />
+      </template>
+      <template #edit-item>
+        <ds-input
+          id="editSocialMedia"
+          model="socialMediaUrl"
+          type="text"
+          :placeholder="$t('settings.social-media.placeholder')"
+        />
+      </template>
+    </my-something-list>
+  </base-card>
 </template>
 
 <script>
+import { mapGetters, mapMutations } from 'vuex'
+import unionBy from 'lodash/unionBy'
+import gql from 'graphql-tag'
 import MySomethingList from '~/components/_new/features/MySomethingList/MySomethingList.vue'
 import SocialMediaListItem from '~/components/_new/features/SocialMedia/SocialMediaListItem.vue'
 
@@ -40,17 +53,130 @@ export default {
       },
     }
   },
+  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
+      return socialMedia.map(({ id, url }) => {
+        const [domain] = url.match(domainRegex) || []
+        const favicon = domain ? `${domain}/favicon.ico` : null
+        return { id, url, favicon }
+      })
+    },
+  },
   methods: {
-    callbackEditSocialMedia(thisMySomethingList, link) {
+    ...mapMutations({
+      setCurrentUser: 'auth/SET_USER',
+    }),
+    callbackEditSocialMedia(thisList, link) {
       // Wolle this.editingLink = link
-      thisMySomethingList.formData.socialMediaUrl = link.url
-      // thisMySomethingList.$refs.socialMediaUrl.$el.focus()
+      thisList.formData.socialMediaUrl = link.url
+      // thisList.$refs.socialMediaUrl.$el.focus()
       // !!! Check for existenz
       // this.$scopedSlots.default()[0].context.$refs
-      // thisMySomethingList.$scopedSlots['edit-item']()[0].$el.focus()
-      // console.log(thisMySomethingList.$scopedSlots['edit-item']()[0].context.$refs)
-      // console.log(thisMySomethingList.$scopedSlots['edit-item']()[0].context.$refs)
-      // console.log(thisMySomethingList.$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 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)
+        // Wolle ??? thisList.formData.socialMediaUrl = ''
+
+        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) {
+                id
+                url
+              }
+            }
+          `,
+          variables: {
+            id: item.id,
+          },
+          update: (store, { data }) => {
+            const socialMedia = thisList.currentUser.socialMedia.filter(
+              (element) => element.id !== item.id,
+            )
+            thisList.setCurrentUser({
+              ...thisList.currentUser,
+              socialMedia,
+            })
+          },
+        })
+
+        thisList.$toast.success(thisList.$t('settings.social-media.successDelete'))
+      } catch (err) {
+        thisList.$toast.error(err.message)
+      }
     },
   },
 }