diff --git a/docs/friends.md b/docs/friends.md
index babe6977..59c2f4d6 100644
--- a/docs/friends.md
+++ b/docs/friends.md
@@ -85,6 +85,13 @@ groups:
         backgroundColor: rgb(255,153,0)
         color: rgb(255,255,153)
         nameColor: rgb(255,255,170)
+        socials:
+          -
+            icon: github
+            link: https://github.com/pengzhanbo
+          -
+            icon: twitter
+            link: https://twitter.com/pengzhanbo
       -
         name: pengzhanbo
         link: https://github.com/pengzhanbo
diff --git a/theme/src/client/components/VPFriends.vue b/theme/src/client/components/VPFriends.vue
index 42367419..d42f449a 100644
--- a/theme/src/client/components/VPFriends.vue
+++ b/theme/src/client/components/VPFriends.vue
@@ -60,6 +60,7 @@ const groups = computed(() => matter.value.groups || [])
   color: var(--vp-c-text-1);
   text-align: center;
   outline: none;
+  transition: color var(--t-color);
 }
 
 .vp-friends .description {
@@ -68,6 +69,7 @@ const groups = computed(() => matter.value.groups || [])
   line-height: 28px;
   color: var(--vp-c-text-1);
   text-align: center;
+  transition: color var(--t-color);
 }
 
 .friends-list {
diff --git a/theme/src/client/components/VPFriendsItem.vue b/theme/src/client/components/VPFriendsItem.vue
index fbcbada5..10fe683e 100644
--- a/theme/src/client/components/VPFriendsItem.vue
+++ b/theme/src/client/components/VPFriendsItem.vue
@@ -106,6 +106,10 @@ const friendStyle = computed(() => {
   justify-content: flex-start;
 }
 
+.content :deep(.vp-social-link) {
+  color: var(--vp-friends-name-color);
+}
+
 .content p {
   display: -webkit-box;
   padding-top: 8px;