diff --git a/frontend/src/assets/icons/back.svg b/frontend/src/assets/icons/back.svg
new file mode 100644
index 0000000000..dcf17773f8
--- /dev/null
+++ b/frontend/src/assets/icons/back.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20" fill="none">
+  <path d="M10 20L0 10L10 0L11.775 1.775L3.55 10L11.775 18.225L10 20Z" fill="#F5F5F5"/>
+</svg>
diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts
index 5a5447ee3f..cc02921e2c 100644
--- a/frontend/src/assets/icons/index.ts
+++ b/frontend/src/assets/icons/index.ts
@@ -1,3 +1,4 @@
+import Back from './back.svg?component'
 import Bell from './bell.svg?component'
 import Camera from './camera.svg?component'
 import Cockpit from './cockpit.svg?component'
@@ -13,6 +14,7 @@ import Message from './message.svg?component'
 import Pinterest from './pinterest.svg?component'
 import Place from './place.svg?component'
 import Share from './share.svg?component'
+import Triangle from './triangle.svg?component'
 import Website from './website.svg?component'
 import Working from './working.svg?component'
 import WorldCafe from './worldCafe.svg?component'
@@ -23,6 +25,7 @@ import Youtube from './youtube.svg?component'
 import type { IconAliases } from 'vuetify'
 
 const aliases: Partial<IconAliases> = {
+  back: Back,
   bell: Bell,
   camera: Camera,
   cockpit: Cockpit,
@@ -38,6 +41,7 @@ const aliases: Partial<IconAliases> = {
   pinterest: Pinterest,
   place: Place,
   share: Share,
+  triange: Triangle,
   website: Website,
   working: Working,
   'world-cafe': WorldCafe,
diff --git a/frontend/src/assets/icons/triangle.svg b/frontend/src/assets/icons/triangle.svg
new file mode 100644
index 0000000000..2fbf639981
--- /dev/null
+++ b/frontend/src/assets/icons/triangle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="7" viewBox="0 0 9 7" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.586 0C8.42451 0 8.89068 0.969932 8.36687 1.62469L5.11416 5.69058C4.71384 6.19099 3.95275 6.19099 3.55242 5.69058L0.299714 1.62469C-0.224096 0.96993 0.242078 0 1.08058 0L7.586 0Z" fill="#CCCCCC"/>
+</svg>
diff --git a/frontend/src/components/cockpit/about-me/AboutMe.stories.ts b/frontend/src/components/cockpit/about-me/AboutMe.stories.ts
index 2d92cfe06a..7f3cd5c600 100644
--- a/frontend/src/components/cockpit/about-me/AboutMe.stories.ts
+++ b/frontend/src/components/cockpit/about-me/AboutMe.stories.ts
@@ -9,25 +9,7 @@ const meta = {
   component: AboutMe as SBComp,
   tags: ['autodocs'],
   argTypes: {},
-  args: {
-    name: 'John Doe',
-    initials: 'JD',
-    introduction: 'Pushing pixels and experiences',
-    availability: 'available',
-    details: [
-      { category: 'place', text: 'Berlin, Germany' },
-      { category: 'place', text: 'Madrid, Spain' },
-      { category: 'work', text: 'Frontend Developer at Company XY' },
-      { category: 'language', text: 'English, German, Spanish' },
-      { category: 'education', text: 'B.Sc. Computer Science' },
-      { category: 'feeling', text: 'Happy like a really happy honey cake horse' },
-    ],
-    social: {
-      linkedin: 'https://www.linkedin.com/in/johndoe',
-      xing: 'https://www.xing.com/profile/John_Doe',
-      x: 'https://www.x.com/johndoe',
-    },
-  },
+  args: {},
 } satisfies Meta<typeof AboutMe>
 
 export default meta
diff --git a/frontend/src/components/cockpit/about-me/AboutMe.vue b/frontend/src/components/cockpit/about-me/AboutMe.vue
index 554c19d8ac..212ee06227 100644
--- a/frontend/src/components/cockpit/about-me/AboutMe.vue
+++ b/frontend/src/components/cockpit/about-me/AboutMe.vue
@@ -1,187 +1,73 @@
 <template>
-  <CockpitCard narrow>
-    <template #default>
-      <div class="header">
-        <v-avatar class="avatar d-flex align-center text-font bg-primary" size="75">
-          <v-img v-if="props.userImage" :src="props.userImage" />
-          <span v-else>{{ props.initials }}</span>
-        </v-avatar>
-        <select v-model="availability" class="availability">
-          <option v-for="item in availabilityOptions" :key="item.value" :value="item.value">
-            {{ item.circle }} {{ item.text }} <v-icon icon="$chevronDown"></v-icon>
-          </option>
-        </select>
-        <div class="name">{{ props.name }}</div>
-        <div class="introduction">{{ props.introduction }}</div>
-      </div>
-      <ul class="details">
-        <li v-for="(detail, index) in props.details" :key="index">
-          <v-chip :prepend-icon="getIcon(detail.category)" class="detail">{{ detail.text }}</v-chip>
-        </li>
-      </ul>
-      <ul class="social">
-        <li v-if="props.social.facebook">
-          <a :href="props.social.facebook" target="_blank" rel="noopener noreferrer">
-            <v-icon icon="$facebook"></v-icon>
-          </a>
-        </li>
-        <li v-if="props.social.linkedin">
-          <a :href="props.social.linkedin" target="_blank" rel="noopener noreferrer">
-            <v-icon icon="$linkedIn"></v-icon>
-          </a>
-        </li>
-        <li v-if="props.social.xing">
-          <a :href="props.social.xing" target="_blank" rel="noopener noreferrer">
-            <v-icon icon="$xing"></v-icon>
-          </a>
-        </li>
-        <li v-if="props.social.x">
-          <a :href="props.social.x" target="_blank" rel="noopener noreferrer">
-            <v-icon icon="$x"></v-icon>
-          </a>
-        </li>
-      </ul>
-    </template>
-  </CockpitCard>
+  <ClientOnly>
+    <AboutMeView
+      v-if="user && mode === 'view'"
+      :username="user.username"
+      :name="user.name"
+      :availability="user.availability"
+      :introduction="user.introduction"
+      :details="user.details"
+      :social="user.social"
+      :user-image="avatar"
+      :initials="initials"
+      @edit="() => setMode('edit')"
+      @update-availability="updateAvailability"
+    ></AboutMeView>
+    <AboutMeEdit
+      v-if="user && mode === 'edit'"
+      :username="user.username"
+      :name="user.name"
+      :availability="user.availability"
+      :introduction="user.introduction"
+      :details="user.details"
+      :social="user.social"
+      @back="() => setMode('view')"
+    ></AboutMeEdit>
+  </ClientOnly>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-import CockpitCard from '#components/cockpit/cockpitCard/CockpitCard.vue'
+import ClientOnly from '#components/ClientOnly.vue'
+import globalErrorHandler from '#plugins/globalErrorHandler'
+import { useUserStore, UserAvailability, UserDetail } from '#stores/userStore'
 
-type DetailCategory = 'place' | 'work' | 'language' | 'education' | 'feeling'
+import AboutMeEdit from './AboutMeEdit.vue'
+import AboutMeView from './AboutMeView.vue'
 
-type Detail = {
-  category: DetailCategory
-  text: string
-}
+type Mode = 'view' | 'edit'
+const mode = ref<Mode>('view')
 
-const props = defineProps<{
-  userName: string
-  name: string
-  userImage?: string
-  initials?: string
-  introduction?: string
-  availability?: 'available' | 'partly_available' | 'busy'
-  details: Detail[]
-  social: {
-    discord?: string
-    telegram?: string
-    facebook?: string
-    tiktok?: string
-    snapchat?: string
-    reddit?: string
-    wechat?: string
-    instagram?: string
-    pintarest?: string
-    linkedin?: string
-    youtube?: string
-    whatsapp?: string
-    xing?: string
-    x?: string
-  }
-}>()
+const setMode = (newMode: Mode) => (mode.value = newMode)
 
-const availability = ref(props.availability)
+const userStore = useUserStore()
 
-const availabilityOptions = [
-  { circle: '🟢', value: 'available', text: 'Available to work' },
-  { circle: '🟡', value: 'partly_available', text: 'Busy but have time' },
-  { circle: '🔴', value: 'busy', text: 'Busy' },
-]
+const {
+  getCurrentUser: user,
+  getCurrentUserAvatar: avatar,
+  getCurrentUserInitials: initials,
+} = userStore
 
-function getIcon(category: DetailCategory) {
-  switch (category) {
-    case 'place':
-      return '$place'
-    case 'work':
-      return '$working'
-    case 'language':
-      return '$world'
-    case 'education':
-      return '$education'
-    case 'feeling':
-      return '$feeling'
-    default:
-      throw new Error(`Unknown category: ${category}`)
+const updateAvailability = async (newAvailability: UserAvailability) => {
+  try {
+    await userStore.updateUser({
+      name: user!.name,
+      availability: newAvailability,
+    })
+  } catch (error) {
+    globalErrorHandler.error(`Could not update user: ${(error as Error).message}`, error)
   }
 }
-</script>
-
-<style scoped>
-.header {
-  display: grid;
-  grid-template-columns: 75px 1fr;
-  grid-template-rows: 1 fr 1fr 1fr;
-  gap: 10px;
-}
-
-.avatar {
-  grid-row: 1 / 3;
-  border-radius: 15px;
-}
-
-.availability select {
-  display: none;
-}
-
-.availability::after {
-  grid-column: 2;
-  grid-row: 1;
-
-  content: '';
-
-  font-size: 10px;
-  color: white;
-  display: flex;
-  height: 24px;
-  padding: 0px 12px 0px 4px;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  border-radius: 9999px;
-  border: 1px solid rgba(214, 223, 233, 0.4);
-  background: #5d6670;
-}
-
-.name {
-  grid-column: 2;
-  grid-row: 2;
-}
-
-.introduction {
-  grid-column: 2;
-  grid-row: 3;
-  font-size: 12px;
-}
-
-.details,
-.social {
-  padding: 0;
-  list-style: none;
-}
-
-.details {
-  display: flex;
-  flex-flow: row wrap;
-  gap: 10px;
-  width: 300px;
-  padding: 10px;
-  border-radius: 15px;
-  background: #f3f3f3;
-}
 
-.detail {
-  font-size: 10px !important;
+const updateIntroduction = async (newIntroduction: string) => {
+  await userStore.updateUser({
+    name: user!.name,
+    introduction: newIntroduction,
+  })
 }
 
-.social {
-  display: flex;
+const addDetail = async (detail: UserDetail) => {
+  await userStore.addUserDetail(detail)
 }
-
-hr {
-  margin-block: 10px;
-  border-color: white;
-}
-</style>
+</script>
diff --git a/frontend/src/components/cockpit/about-me/AboutMeEdit.vue b/frontend/src/components/cockpit/about-me/AboutMeEdit.vue
new file mode 100644
index 0000000000..47f42de881
--- /dev/null
+++ b/frontend/src/components/cockpit/about-me/AboutMeEdit.vue
@@ -0,0 +1,82 @@
+<template>
+  <CockpitCard narrow>
+    <template #header>
+      <div class="header">
+        <button class="back" @click="$emit('back')"><v-icon icon="$back"></v-icon></button>
+        <h2>{{ $t('cockpit.about-me.edit.title') }}</h2>
+      </div>
+    </template>
+    <template #default>
+      <v-form class="new-detail" @submit.prevent="addDetail">
+        <v-select
+          v-model="newDetail.category"
+          :items="detailTypes"
+          label="Type"
+          name="type"
+        ></v-select>
+        <v-text-field v-model="newDetail.text" name="text"></v-text-field>
+        <v-button type="submit">{{ $t('cockpit.about-me.edit.add') }}</v-button>
+      </v-form>
+      <ul class="details">
+        <li v-for="item in props.details" :key="item.id">
+          <v-icon icon="$close" @click="() => removeDetail(item.id)"></v-icon>
+          <span>{{ item.text }}</span>
+        </li>
+      </ul>
+    </template>
+  </CockpitCard>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+import CockpitCard from '#components/cockpit/cockpitCard/CockpitCard.vue'
+
+import type { UserDetail, SocialMedia, UserDetailCategory } from '#stores/userStore'
+
+const props = defineProps<{
+  username: string
+  name: string
+  userImage?: string
+  initials?: string
+  introduction?: string
+  details: UserDetail[]
+  social: SocialMedia[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'add-detail', detail: UserDetail): void
+  (e: 'remove-detail', id: number): void
+}>()
+
+const newDetail = reactive<UserDetail>({
+  id: 1,
+  category: 'place',
+  text: '',
+})
+
+const detailTypes: UserDetailCategory[] = ['place', 'work', 'education', 'feeling', 'language']
+
+const addDetail = () => {
+  emit('add-detail', newDetail)
+}
+
+const removeDetail = (id: number) => {
+  emit('remove-detail', id)
+}
+</script>
+
+<style scoped>
+.back {
+  width: 40px;
+}
+.header {
+  display: flex;
+  gap: 20px;
+}
+
+.details {
+  min-height: 50px;
+}
+</style>
diff --git a/frontend/src/components/cockpit/about-me/AboutMeView.stories.ts b/frontend/src/components/cockpit/about-me/AboutMeView.stories.ts
new file mode 100644
index 0000000000..81114b443b
--- /dev/null
+++ b/frontend/src/components/cockpit/about-me/AboutMeView.stories.ts
@@ -0,0 +1,51 @@
+import { SBComp } from '#types/SBComp'
+
+import AboutMeView from './AboutMeView.vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta = {
+  title: 'Cockpit/AboutMe/AboutMeView',
+  component: AboutMeView as SBComp,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    name: 'John Doe',
+    username: 'john23',
+    initials: 'JD',
+    introduction: 'Pushing pixels and experiences',
+    availability: 'available',
+    details: [
+      { id: 1, category: 'place', text: 'Berlin, Germany' },
+      { id: 2, category: 'place', text: 'Madrid, Spain' },
+      { id: 3, category: 'work', text: 'Frontend Developer at Company XY' },
+      { id: 4, category: 'language', text: 'English, German, Spanish' },
+      { id: 5, category: 'education', text: 'B.Sc. Computer Science' },
+      { id: 6, category: 'feeling', text: 'Happy like a really happy honey cake horse' },
+    ],
+    social: [
+      {
+        id: 1,
+        type: 'linkedin',
+        link: 'https://www.linkedin.com/in/johndoe',
+      },
+      {
+        id: 2,
+        type: 'xing',
+        link: 'https://www.xing.com/profile/John_Doe',
+      },
+      {
+        id: 3,
+        type: 'x',
+        link: 'https://www.x.com/johndoe',
+      },
+    ],
+  },
+} satisfies Meta<typeof AboutMeView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Raw: Story = {
+  args: {},
+}
diff --git a/frontend/src/components/cockpit/about-me/AboutMeView.vue b/frontend/src/components/cockpit/about-me/AboutMeView.vue
new file mode 100644
index 0000000000..4a7a78644a
--- /dev/null
+++ b/frontend/src/components/cockpit/about-me/AboutMeView.vue
@@ -0,0 +1,158 @@
+<template>
+  <CockpitCard narrow>
+    <template #default>
+      <div class="header">
+        <v-avatar class="avatar d-flex align-center text-font bg-primary" size="75">
+          <v-img v-if="props.userImage" :src="props.userImage" />
+          <span v-else>{{ props.initials }}</span>
+        </v-avatar>
+        <div class="availability-container">
+          <select v-model="availability" class="availability" @change="updateAvailability">
+            <option v-for="item in availabilityOptions" :key="item.value || 0" :value="item.value">
+              {{ item.circle }} {{ item.text }}
+            </option>
+          </select>
+        </div>
+        <div class="name">
+          {{ props.name }}
+          <button @click="$emit('edit')"><v-icon icon="$edit"></v-icon></button>
+        </div>
+        <div class="introduction">{{ props.introduction }}</div>
+      </div>
+      <ul class="details">
+        <li v-for="(detail, index) in props.details" :key="index">
+          <v-chip :prepend-icon="detailCategoryToIcon(detail.category)" class="detail">{{
+            detail.text
+          }}</v-chip>
+        </li>
+      </ul>
+      <ul class="social">
+        <li v-for="item in props.social" :key="item.type">
+          <a :href="item.link" target="_blank" rel="noopener noreferrer">
+            <v-icon :icon="`mdi-${item.type}`"></v-icon>
+          </a>
+        </li>
+      </ul>
+    </template>
+  </CockpitCard>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import CockpitCard from '#components/cockpit/cockpitCard/CockpitCard.vue'
+
+import { detailCategoryToIcon } from './detailCategoryToIcon'
+
+import type { UserDetail, UserAvailability, SocialMedia } from '#stores/userStore'
+
+const props = defineProps<{
+  username: string
+  name: string
+  userImage?: string
+  initials?: string
+  introduction?: string
+  availability: UserAvailability
+  details: UserDetail[]
+  social: SocialMedia[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'edit'): void
+  (e: 'update-availability', status: UserAvailability): void
+}>()
+
+const availability = ref(props.availability)
+
+const availabilityOptions = [
+  { circle: '⚪️', value: null, text: 'Please choose' },
+  { circle: '🟢', value: 'available', text: 'Available to work' },
+  { circle: '🟡', value: 'partly_available', text: 'Busy but have time' },
+  { circle: '🔴', value: 'busy', text: 'Busy' },
+]
+
+const updateAvailability = (event: Event) => {
+  emit('update-availability', (event.target as HTMLSelectElement).value as UserAvailability)
+}
+</script>
+
+<style scoped>
+.header {
+  display: grid;
+  grid-template-columns: 75px 1fr;
+  grid-template-rows: 1 fr 1fr 1fr;
+  gap: 10px;
+}
+
+.avatar {
+  grid-row: 1 / 3;
+  border-radius: 15px;
+}
+
+.availability::after,
+.availability-container {
+  grid-column: 2;
+  grid-row: 1;
+
+  content: '';
+
+  font-size: 10px;
+  color: white;
+  display: flex;
+  height: 24px;
+  padding: 0px 12px 0px 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 9999px;
+  border: 1px solid rgba(214, 223, 233, 0.4);
+  background: #5d6670;
+  color: white;
+
+  select {
+    color: white;
+  }
+}
+
+.name {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.introduction {
+  grid-column: 2;
+  grid-row: 3;
+  font-size: 12px;
+}
+
+.details,
+.social {
+  padding: 0;
+  list-style: none;
+}
+
+.details {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 10px;
+  width: 300px;
+  padding: 10px;
+  border-radius: 15px;
+  background: #f3f3f3;
+  min-height: 60px;
+}
+
+.detail {
+  font-size: 10px !important;
+}
+
+.social {
+  display: flex;
+  min-height: 30px;
+}
+
+hr {
+  margin-block: 10px;
+  border-color: white;
+}
+</style>
diff --git a/frontend/src/components/cockpit/about-me/CustomSelect.stories.ts b/frontend/src/components/cockpit/about-me/CustomSelect.stories.ts
new file mode 100644
index 0000000000..edbcb07c0d
--- /dev/null
+++ b/frontend/src/components/cockpit/about-me/CustomSelect.stories.ts
@@ -0,0 +1,20 @@
+import { SBComp } from '#types/SBComp'
+
+import CustomSelect from './CustomSelect.vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta = {
+  title: 'Cockpit/AboutMe/CustomSelect',
+  component: CustomSelect as SBComp,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof CustomSelect>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Raw: Story = {
+  args: {},
+}
diff --git a/frontend/src/components/cockpit/about-me/CustomSelect.vue b/frontend/src/components/cockpit/about-me/CustomSelect.vue
new file mode 100644
index 0000000000..795c3cf0cb
--- /dev/null
+++ b/frontend/src/components/cockpit/about-me/CustomSelect.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="custom-select">
+    <select v-model="selected" class="availability">
+      <option v-for="item in options" :key="item.value || 0" :value="item.value">
+        {{ item.circle }} {{ item.text }} <v-icon icon="$chevronDown"></v-icon>
+      </option>
+    </select>
+    <div class="selected">
+      {{ selectedOption?.text }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const selected = defineModel<string | null>()
+
+const options = [
+  { value: null, text: 'Please choose', circle: '/' },
+  { value: 'available', text: 'Available', circle: '◉' },
+  { value: 'partly_available', text: 'Partly available', circle: '◔' },
+  { value: 'busy', text: 'Busy', circle: '◎' },
+]
+
+const selectedOption = computed(() => options.find((o) => o.value === selected.value))
+</script>
+
+<style scoped>
+.custom-select {
+  position: relative;
+}
+
+.custom-select select {
+  display: none;
+}
+
+.custom-select::after {
+  grid-column: 2;
+  grid-row: 1;
+
+  content: '';
+
+  font-size: 10px;
+  color: white;
+  display: flex;
+  height: 24px;
+  padding: 0px 12px 0px 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 9999px;
+  border: 1px solid rgba(214, 223, 233, 0.4);
+  background: #5d6670;
+}
+</style>
diff --git a/frontend/src/components/cockpit/about-me/detailCategoryToIcon.ts b/frontend/src/components/cockpit/about-me/detailCategoryToIcon.ts
new file mode 100644
index 0000000000..fd20363ff3
--- /dev/null
+++ b/frontend/src/components/cockpit/about-me/detailCategoryToIcon.ts
@@ -0,0 +1,18 @@
+import type { UserDetailCategory } from '#stores/userStore.js'
+
+export function detailCategoryToIcon(category: UserDetailCategory) {
+  switch (category) {
+    case 'place':
+      return '$place'
+    case 'work':
+      return '$working'
+    case 'language':
+      return '$world'
+    case 'education':
+      return '$education'
+    case 'feeling':
+      return '$feeling'
+    default:
+      throw new Error(`Unknown category`)
+  }
+}
diff --git a/frontend/src/components/cockpit/cockpitCard/CockpitCard.vue b/frontend/src/components/cockpit/cockpitCard/CockpitCard.vue
index c734a498a5..e20ae8c9a3 100644
--- a/frontend/src/components/cockpit/cockpitCard/CockpitCard.vue
+++ b/frontend/src/components/cockpit/cockpitCard/CockpitCard.vue
@@ -14,7 +14,7 @@ import { useSlots } from 'vue'
 const slots = useSlots()
 
 const props = defineProps<{
-  narrow: boolean
+  narrow?: boolean
 }>()
 </script>
 
@@ -27,6 +27,10 @@ const props = defineProps<{
   border-radius: 20px;
 }
 
+.header {
+  font-size: 16px;
+}
+
 .hr {
   margin-block: 15px;
   margin-inline: calc(-1 * var(--padding));
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 6c5934c5b7..8d1f8ac6e2 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -22,7 +22,10 @@
   },
   "cockpit": {
     "about-me": {
-      "header": "Über mich"
+      "edit": {
+        "title": "Über mich",
+        "add": "Hinzufügen",
+      }
     }
   },
   "error": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index d5f4b60222..de942f9beb 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -22,7 +22,10 @@
   },
   "cockpit": {
     "about-me": {
-      "header": "About me"
+      "edit": {
+        "title": "About me",
+        "add": "Add",
+      }
     }
   },
   "error": {