diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts
index 2f38fd4523..bd7e2751a8 100644
--- a/frontend/renderer/plugins/vuetify.ts
+++ b/frontend/renderer/plugins/vuetify.ts
@@ -26,6 +26,7 @@ function makeThemeFromCssModule(theme: CSSModuleClasses, isDark: boolean): Theme
       font: theme.fontColor,
       icon: theme.iconColor,
       'dropdown-background': theme.dropdownBackgroundColor,
+      'cockpit-highlight': theme.cockpitHighlightColor,
     },
     variables: {
       'border-color': theme.borderColor,
diff --git a/frontend/src/assets/scss/dark.module.scss b/frontend/src/assets/scss/dark.module.scss
index 06a795992a..9683700d11 100644
--- a/frontend/src/assets/scss/dark.module.scss
+++ b/frontend/src/assets/scss/dark.module.scss
@@ -1,5 +1,5 @@
 $background-color: #000;
-$surface-color: rgb(126 166 214);
+$surface-color: #3D4753;
 $primary-color: #f09630;
 $secondary-color: #3d4753;
 $error-color: #f44336;
@@ -10,6 +10,7 @@ $border-color: #d6dfe9;
 $border-opacity: 0.4;
 $font-color: #222;
 $icon-color: #F5F5F5;
+$cockpit-highlight-color: #2ca5b1;
 $icon-background: rgb(61 71 83 / 85%);
 $bottom-menu-background: rgb(78 91 107 / 60%);
 $sidebar-background: rgb(61 71 83 / 90%);
@@ -31,6 +32,7 @@ $cockpit-chip-background: rgb(61 71 83);
     borderOpacity: $border-opacity;
     fontColor: $font-color;
     iconColor: $icon-color;
+    cockpitHighlightColor: $cockpit-highlight-color;
     iconBackground: $icon-background;
     bottomMenuBackground: $bottom-menu-background;
     sidebarBackground: $sidebar-background;
diff --git a/frontend/src/assets/scss/light.module.scss b/frontend/src/assets/scss/light.module.scss
index 1a68c0be9c..357bd86e0e 100644
--- a/frontend/src/assets/scss/light.module.scss
+++ b/frontend/src/assets/scss/light.module.scss
@@ -10,6 +10,7 @@ $border-color: #d6dfe9;
 $border-opacity: 1;
 $font-color: #222;
 $icon-color: #3D4753;
+$cockpit-highlight-color: #2ca5b1;
 $icon-background: rgb(255 255 255);
 $bottom-menu-background: rgb(225 230 237 / 60%);
 $sidebar-background: rgb(225 230 237);
@@ -31,6 +32,7 @@ $cockpit-chip-background: rgb(225 230 237);
     borderOpacity: $border-opacity;
     fontColor: $font-color;
     iconColor: $icon-color;
+    cockpitHighlightColor: $cockpit-highlight-color;
     iconBackground: $icon-background;
     bottomMenuBackground: $bottom-menu-background;
     sidebarBackground: $sidebar-background;
diff --git a/frontend/src/components/cockpit/about-me/AboutMeView.vue b/frontend/src/components/cockpit/about-me/AboutMeView.vue
index d6a7c04c86..b1c27156ba 100644
--- a/frontend/src/components/cockpit/about-me/AboutMeView.vue
+++ b/frontend/src/components/cockpit/about-me/AboutMeView.vue
@@ -17,7 +17,7 @@
           <template #selection="{ item }"> {{ item.props.circle }} {{ item.title }} </template>
           <template #item="{ item, props: listProps }">
             <v-list-item v-bind="listProps">
-              <template #prepend> {{ item.props.circle }} </template>
+              <template #prepend> {{ item.props.circle }} <span class="ml-2"></span></template>
             </v-list-item>
           </template>
         </v-select>
@@ -57,9 +57,7 @@
         <v-icon icon="mdi mdi-share-variant-outline" class="mr-2" />
         <ul v-if="props.social.length > 0" class="social-list">
           <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>
+            <v-icon :icon="`mdi-${item.type}`"></v-icon>
           </li>
         </ul>
         <span v-else>
@@ -197,10 +195,6 @@ const updateIntroduction = (event: Event) => {
   &:deep(.v-select__selection) {
     font-size: 10px;
   }
-
-  &:deep(.v-list-item__prepend) {
-    margin-right: 8px;
-  }
 }
 
 .name {
@@ -219,6 +213,7 @@ const updateIntroduction = (event: Event) => {
 .social {
   display: flex;
   align-items: center;
+  width: 300px;
   max-width: 300px;
   min-height: 60px;
   padding: 10px;
diff --git a/frontend/src/components/cockpit/about-me/EditSocialMedia.vue b/frontend/src/components/cockpit/about-me/EditSocialMedia.vue
index fab791109d..5848e3b9cd 100644
--- a/frontend/src/components/cockpit/about-me/EditSocialMedia.vue
+++ b/frontend/src/components/cockpit/about-me/EditSocialMedia.vue
@@ -153,5 +153,7 @@ const addSocial = () => {
   flex-flow: column;
   gap: 10px;
   list-style: none;
+  max-height: 200px;
+  overflow-y: auto;
 }
 </style>
diff --git a/frontend/src/components/cockpit/about-me/UserDetails.vue b/frontend/src/components/cockpit/about-me/UserDetails.vue
index 00d49a8793..199f84e79c 100644
--- a/frontend/src/components/cockpit/about-me/UserDetails.vue
+++ b/frontend/src/components/cockpit/about-me/UserDetails.vue
@@ -2,7 +2,11 @@
   <ul class="details" :class="{ editable: props.editable }">
     <li v-for="(detail, index) in details" :key="index">
       <v-chip class="detail">
-        <v-icon :icon="detailCategoryToIcon(detail.category)" class="mr-2"></v-icon>
+        <v-icon
+          :icon="detailCategoryToIcon(detail.category)"
+          class="mr-2"
+          color="cockpit-highlight"
+        ></v-icon>
         {{ detail.text }}
         <v-icon
           v-if="props.editable && detail.id >= 0"