diff --git a/docs/friends.md b/docs/friends.md
index 91ccc15c..288e62d2 100644
--- a/docs/friends.md
+++ b/docs/friends.md
@@ -34,9 +34,50 @@ list:
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
     desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+groups:
   -
-    name: pengzhanbo
-    link: https://github.com/pengzhanbo
-    avatar: https://github.com/pengzhanbo.png
-    desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+    title: 分组 1
+    desc: 自定义颜色
+    list:
+      -
+        name: pengzhanbo
+        link: https://github.com/pengzhanbo
+        avatar: https://github.com/pengzhanbo.png
+        desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+        backgroundColor: rgb(255,153,0)
+        color: rgb(255,255,153)
+        nameColor: rgb(255,255,170)
+        borderColor: rgb(255,255,204)
+      -
+        name: pengzhanbo
+        link: https://github.com/pengzhanbo
+        avatar: https://github.com/pengzhanbo.png
+        desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+        backgroundColor: rgb(255,102,102)
+        color: rgb(255,204,204)
+        nameColor: rgb(255,238,238)
+        borderColor: rgb(255,255,238)
+      -
+        name: pengzhanbo
+        link: https://github.com/pengzhanbo
+        avatar: https://github.com/pengzhanbo.png
+        desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+        backgroundColor: rgb(0,153,204)
+        color: rgb(153,238,255)
+        nameColor: rgb(153,255,255)
+        borderColor: rgb(153,238,255)
+  -
+    title: 分组 2
+    desc: 这里是分组 2 的描述文字
+    list:
+      -
+        name: pengzhanbo
+        link: https://github.com/pengzhanbo
+        avatar: https://github.com/pengzhanbo.png
+        desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+      -
+        name: pengzhanbo
+        link: https://github.com/pengzhanbo
+        avatar: https://github.com/pengzhanbo.png
+        desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
 ---
diff --git a/docs/notes/theme/config/frontmatter/friend.md b/docs/notes/theme/config/frontmatter/friend.md
index 70b87e4c..900192ce 100644
--- a/docs/notes/theme/config/frontmatter/friend.md
+++ b/docs/notes/theme/config/frontmatter/friend.md
@@ -71,5 +71,46 @@ interface FriendsItem {
    * 友情链接描述
    */
   desc?: string
+
+  /**
+   * 背景色
+   */
+  backgroundColor?: string | { light: string, dark: string }
+  /**
+   * 字体颜色
+   */
+  color?: string | { light: string, dark: string }
+  /**
+   * 名字颜色
+   */
+  nameColor?: string | { light: string, dark: string }
+  /**
+   * 边框颜色
+   */
+  borderColor?: string | { light: string, dark: string }
+}
+```
+
+### groups
+
+- 类型： `FriendsGroup[]`
+- 默认值: `[]`
+
+友情链接分组
+
+```ts
+interface FriendsGroup {
+  /**
+   * 分组名
+   */
+  title?: string
+  /**
+   * 分组描述
+   */
+  desc?: string
+  /**
+   * 友情链接列表
+   */
+  list?: FriendsItem[]
 }
 ```
diff --git a/theme/src/client/components/Friends.vue b/theme/src/client/components/Friends.vue
index 6f6ad277..b8f94639 100644
--- a/theme/src/client/components/Friends.vue
+++ b/theme/src/client/components/Friends.vue
@@ -5,11 +5,13 @@ import type { PlumeThemeFriendsFrontmatter } from '../../shared/index.js'
 import { useEditNavLink } from '../composables/index.js'
 import AutoLink from './AutoLink.vue'
 import FriendsItem from './FriendsItem.vue'
+import FriendsGroup from './FriendsGroup.vue'
 
 const matter = usePageFrontmatter<PlumeThemeFriendsFrontmatter>()
 const editNavLink = useEditNavLink()
 
 const list = computed(() => matter.value.list || [])
+const groups = computed(() => matter.value.groups || [])
 </script>
 
 <template>
@@ -28,6 +30,8 @@ const list = computed(() => matter.value.list || [])
       />
     </section>
 
+    <FriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
+
     <div v-if="editNavLink" class="edit-link">
       <AutoLink
         class="edit-link-button"
@@ -62,7 +66,7 @@ const list = computed(() => matter.value.list || [])
   margin-bottom: 1rem;
   font-size: 24px;
   font-weight: 700;
-  color: var(--vp-c-brand-1);
+  color: var(--vp-c-text-1);
   outline: none;
 }
 
@@ -87,9 +91,8 @@ const list = computed(() => matter.value.list || [])
 
 @media (min-width: 640px) {
   .friends-wrapper .title,
-  .friends-wrapper .description,
-  .edit-link {
-    padding-left: 0;
+  .friends-wrapper .description {
+    padding-left: 16px;
   }
 
   .friends-list {
@@ -104,6 +107,12 @@ const list = computed(() => matter.value.list || [])
     padding-top: 0;
   }
 
+  .friends-wrapper .title,
+  .friends-wrapper .description,
+  .edit-link {
+    padding-left: 0;
+  }
+
   .friends-list {
     padding: 0;
   }
diff --git a/theme/src/client/components/FriendsGroup.vue b/theme/src/client/components/FriendsGroup.vue
new file mode 100644
index 00000000..d76d080f
--- /dev/null
+++ b/theme/src/client/components/FriendsGroup.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { FriendGroup } from '../../shared/index.js'
+import FriendsItem from './FriendsItem.vue'
+
+defineProps<{
+  group: FriendGroup
+}>()
+</script>
+
+<template>
+  <div class="friends-group">
+    <h3 class="title">
+      {{ group.title || 'My Friends' }}
+    </h3>
+    <p v-if="group.desc" class="description">
+      {{ group.desc }}
+    </p>
+    <section v-if="group.list?.length" class="friends-list">
+      <FriendsItem v-for="(friend, index) in group.list" :key="friend.name + index" :friend="friend" />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.friends-group {
+  width: 100%;
+  padding: 64px 16px 0;
+  margin: 0 auto;
+}
+
+.friends-group .title {
+  padding-top: 2rem;
+  padding-bottom: 8px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  border-top: solid 1px var(--vp-c-divider);
+  outline: none;
+  transition: color var(--t-color), border-color var(--t-color);
+}
+
+.friends-group .description {
+  margin-bottom: 16px;
+  line-height: 28px;
+  color: var(--vp-c-text-1);
+  transition: color var(--t-color);
+}
+
+.friends-list {
+  display: grid;
+  gap: 16px;
+  margin-top: 32px;
+}
+
+@media (min-width: 640px) {
+  .friends-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 960px) {
+  .friends-group {
+    padding: 64px 0 0;
+  }
+
+  .friends-list {
+    padding: 0;
+  }
+}
+
+@media (min-width: 1440px) {
+  .friends-group {
+    max-width: 1104px;
+  }
+
+  .friends-list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    padding: 0;
+  }
+}
+</style>
diff --git a/theme/src/client/components/FriendsItem.vue b/theme/src/client/components/FriendsItem.vue
index 2cc487ca..daade80a 100644
--- a/theme/src/client/components/FriendsItem.vue
+++ b/theme/src/client/components/FriendsItem.vue
@@ -1,14 +1,35 @@
 <script lang="ts" setup>
+import { isPlainObject } from '@vuepress/helper/client'
+import { computed } from 'vue'
 import type { FriendsItem } from '../../shared/index'
+import { useDarkMode } from '../composables/index.js'
 import AutoLink from './AutoLink.vue'
 
-defineProps<{
+const props = defineProps<{
   friend: FriendsItem
 }>()
+
+const isDark = useDarkMode()
+
+function getStyle(name: string, color?: string | { light: string, dark: string }) {
+  if (!color)
+    return {}
+  const value = isPlainObject(color) ? isDark.value ? color.dark : color.light : color
+  return value ? { [name]: value } : {}
+}
+
+const friendStyle = computed(() => {
+  return {
+    ...getStyle('--vp-friends-text-color', props.friend.color),
+    ...getStyle('--vp-friends-bg-color', props.friend.backgroundColor),
+    ...getStyle('--vp-friends-border-color', props.friend.borderColor),
+    ...getStyle('--vp-friends-name-color', props.friend.nameColor),
+  }
+})
 </script>
 
 <template>
-  <div class="friend">
+  <div class="friend" :style="friendStyle">
     <AutoLink
       class="avatar-link"
       :href="friend.link"
@@ -49,7 +70,7 @@ defineProps<{
 }
 
 .friend:hover {
-  box-shadow: var(--vp-shadow-3);
+  box-shadow: var(--vp-shadow-2);
 }
 
 .avatar-link {
@@ -77,7 +98,7 @@ defineProps<{
   margin-left: -16px;
   font-size: 18px;
   font-weight: 700;
-  color: var(--vp-friends-link-color);
+  color: var(--vp-friends-name-color);
   border-bottom: 1px dashed var(--vp-friends-border-color);
   transition: color var(--t-color), border-bottom var(--t-color);
 }