diff --git a/theme/src/client/components/Blog/VPBlog.vue b/theme/src/client/components/Blog/VPBlog.vue
index c9a9055a..02141d35 100644
--- a/theme/src/client/components/Blog/VPBlog.vue
+++ b/theme/src/client/components/Blog/VPBlog.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useData } from '../../composables/data.js'
-import TransitionFadeSlideY from '../TransitionFadeSlideY.vue'
+import VPTransitionFadeSlideY from '../VPTransitionFadeSlideY.vue'
 import VPPostList from './VPPostList.vue'
 import VPBlogArchives from './VPBlogArchives.vue'
 import VPBlogAside from './VPBlogAside.vue'
@@ -32,9 +32,9 @@ const type = computed(() => {
     <div class="blog-container" :class="{ 'no-avatar': !theme.avatar }">
       <VPBlogNav v-if="!theme.avatar" is-local />
 
-      <TransitionFadeSlideY>
+      <VPTransitionFadeSlideY>
         <component :is="com[type]" />
-      </TransitionFadeSlideY>
+      </VPTransitionFadeSlideY>
 
       <VPBlogAside />
       <VPBlogExtract />
diff --git a/theme/src/client/components/Blog/VPPostList.vue b/theme/src/client/components/Blog/VPPostList.vue
index 29e8dbf7..d5243ebd 100644
--- a/theme/src/client/components/Blog/VPPostList.vue
+++ b/theme/src/client/components/Blog/VPPostList.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { usePostListControl } from '../../composables/blog.js'
-import TransitionDrop from '../TransitionDrop.vue'
+import VPTransitionDrop from '../VPTransitionDrop.vue'
 import VPPostItem from './VPPostItem.vue'
 import VPPagination from './VPPagination.vue'
 
@@ -19,12 +19,12 @@ const {
 <template>
   <div class="vp-blog-post-list">
     <template v-for="(post, index) in postList" :key="post.path">
-      <TransitionDrop appear :delay="index * 0.04">
+      <VPTransitionDrop appear :delay="index * 0.04">
         <VPPostItem
           :key="post.path"
           :post="post"
         />
-      </TransitionDrop>
+      </VPTransitionDrop>
     </template>
     <VPPagination
       v-if="isPaginationEnabled"
diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue
index 0dd0cadd..a45e6625 100644
--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@@ -5,7 +5,7 @@ import VPBlog from './Blog/VPBlog.vue'
 import VPDoc from './VPDoc.vue'
 import VPPage from './VPPage.vue'
 import VPHome from './Home/VPHome.vue'
-import Friends from './Friends.vue'
+import VPFriends from './VPFriends.vue'
 
 const props = defineProps<{
   isNotFound?: boolean
@@ -40,7 +40,7 @@ const isBlogLayout = computed(() => {
       </template>
     </VPPage>
 
-    <Friends v-else-if="frontmatter.pageLayout === 'friends'" />
+    <VPFriends v-else-if="frontmatter.pageLayout === 'friends'" />
 
     <VPHome v-else-if="frontmatter.pageLayout === 'home'" />
 
diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index 182c5089..80dbff93 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -4,7 +4,7 @@ import { useRoute } from 'vuepress/client'
 import { useData } from '../composables/data.js'
 import { useSidebar } from '../composables/sidebar.js'
 import { usePageEncrypt } from '../composables/encrypt.js'
-import TransitionFadeSlideY from './TransitionFadeSlideY.vue'
+import VPTransitionFadeSlideY from './VPTransitionFadeSlideY.vue'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 import VPEncryptPage from './VPEncryptPage.vue'
@@ -64,7 +64,7 @@ watch(
 </script>
 
 <template>
-  <TransitionFadeSlideY>
+  <VPTransitionFadeSlideY>
     <div
       :key="page.path" class="vp-doc-container" :class="{
         'has-sidebar': hasSidebar,
@@ -125,7 +125,7 @@ watch(
         </div>
       </div>
     </div>
-  </TransitionFadeSlideY>
+  </VPTransitionFadeSlideY>
 </template>
 
 <style scoped>
diff --git a/theme/src/client/components/Friends.vue b/theme/src/client/components/VPFriends.vue
similarity index 84%
rename from theme/src/client/components/Friends.vue
rename to theme/src/client/components/VPFriends.vue
index 41ae029f..af2fb39e 100644
--- a/theme/src/client/components/Friends.vue
+++ b/theme/src/client/components/VPFriends.vue
@@ -3,8 +3,8 @@ import { computed } from 'vue'
 import { useData } from '../composables/data.js'
 import { useEditNavLink } from '../composables/page.js'
 import VPLink from './VPLink.vue'
-import FriendsItem from './FriendsItem.vue'
-import FriendsGroup from './FriendsGroup.vue'
+import VPFriendsItem from './VPFriendsItem.vue'
+import VPFriendsGroup from './VPFriendsGroup.vue'
 
 const editNavLink = useEditNavLink()
 const { frontmatter: matter } = useData<'friends'>()
@@ -14,7 +14,7 @@ const groups = computed(() => matter.value.groups || [])
 </script>
 
 <template>
-  <div class="friends-wrapper">
+  <div class="vp-friends">
     <h2 class="title">
       {{ matter.title || 'My Friends' }}
     </h2>
@@ -22,14 +22,14 @@ const groups = computed(() => matter.value.groups || [])
       {{ matter.description }}
     </p>
     <section v-if="list.length" class="friends-list">
-      <FriendsItem
+      <VPFriendsItem
         v-for="(friend, index) in list"
         :key="friend.name + index"
         :friend="friend"
       />
     </section>
 
-    <FriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
+    <VPFriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
 
     <div v-if="editNavLink" class="edit-link">
       <VPLink
@@ -45,7 +45,7 @@ const groups = computed(() => matter.value.groups || [])
 </template>
 
 <style scoped>
-.friends-wrapper {
+.vp-friends {
   width: 100%;
   min-height: calc(100vh - var(--vp-footer-height, 0px));
   padding-top: var(--vp-nav-height);
@@ -54,12 +54,12 @@ const groups = computed(() => matter.value.groups || [])
 }
 
 @media (min-width: 960px) {
-  .friends-wrapper {
+  .vp-friends {
     min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
   }
 }
 
-.friends-wrapper .title {
+.vp-friends .title {
   padding-top: 3rem;
   padding-left: 1rem;
   margin-bottom: 1rem;
@@ -69,7 +69,7 @@ const groups = computed(() => matter.value.groups || [])
   outline: none;
 }
 
-.friends-wrapper .description {
+.vp-friends .description {
   padding-left: 1rem;
   margin-bottom: 16px;
   line-height: 28px;
@@ -89,8 +89,8 @@ const groups = computed(() => matter.value.groups || [])
 }
 
 @media (min-width: 640px) {
-  .friends-wrapper .title,
-  .friends-wrapper .description {
+  .vp-friends .title,
+  .vp-friends .description {
     padding-left: 16px;
   }
 
@@ -101,13 +101,13 @@ const groups = computed(() => matter.value.groups || [])
 }
 
 @media (min-width: 960px) {
-  .friends-wrapper {
+  .vp-friends {
     max-width: 784px;
     padding-top: 0;
   }
 
-  .friends-wrapper .title,
-  .friends-wrapper .description,
+  .vp-friends .title,
+  .vp-friends .description,
   .edit-link {
     padding-left: 0;
   }
@@ -118,7 +118,7 @@ const groups = computed(() => matter.value.groups || [])
 }
 
 @media (min-width: 1440px) {
-  .friends-wrapper {
+  .vp-friends {
     max-width: 1104px;
   }
 
diff --git a/theme/src/client/components/FriendsGroup.vue b/theme/src/client/components/VPFriendsGroup.vue
similarity index 85%
rename from theme/src/client/components/FriendsGroup.vue
rename to theme/src/client/components/VPFriendsGroup.vue
index da1a68a0..eef90f99 100644
--- a/theme/src/client/components/FriendsGroup.vue
+++ b/theme/src/client/components/VPFriendsGroup.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { FriendGroup } from '../../shared/index.js'
-import FriendsItem from './FriendsItem.vue'
+import VPFriendsItem from './VPFriendsItem.vue'
 
 defineProps<{
   group: FriendGroup
@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="friends-group">
+  <div class="vp-friends-group">
     <h3 class="title">
       {{ group.title || 'My Friends' }}
     </h3>
@@ -16,7 +16,7 @@ defineProps<{
       {{ group.desc }}
     </p>
     <section v-if="group.list?.length" class="friends-list">
-      <FriendsItem
+      <VPFriendsItem
         v-for="(friend, index) in group.list"
         :key="friend.name + index"
         :friend="friend"
@@ -26,13 +26,13 @@ defineProps<{
 </template>
 
 <style scoped>
-.friends-group {
+.vp-friends-group {
   width: 100%;
   padding: 64px 16px 0;
   margin: 0 auto;
 }
 
-.friends-group .title {
+.vp-friends-group .title {
   padding-top: 2rem;
   padding-bottom: 8px;
   font-size: 20px;
@@ -43,7 +43,7 @@ defineProps<{
   transition: color var(--t-color), border-color var(--t-color);
 }
 
-.friends-group .description {
+.vp-friends-group .description {
   margin-bottom: 16px;
   line-height: 28px;
   color: var(--vp-c-text-1);
@@ -63,7 +63,7 @@ defineProps<{
 }
 
 @media (min-width: 960px) {
-  .friends-group {
+  .vp-friends-group {
     padding: 64px 0 0;
   }
 
@@ -73,7 +73,7 @@ defineProps<{
 }
 
 @media (min-width: 1440px) {
-  .friends-group {
+  .vp-friends-group {
     max-width: 1104px;
   }
 
diff --git a/theme/src/client/components/FriendsItem.vue b/theme/src/client/components/VPFriendsItem.vue
similarity index 95%
rename from theme/src/client/components/FriendsItem.vue
rename to theme/src/client/components/VPFriendsItem.vue
index 9d3ba5c8..3d851ada 100644
--- a/theme/src/client/components/FriendsItem.vue
+++ b/theme/src/client/components/VPFriendsItem.vue
@@ -29,7 +29,7 @@ const friendStyle = computed(() => {
 </script>
 
 <template>
-  <div class="friend" :style="friendStyle">
+  <div class="vp-friend" :style="friendStyle">
     <VPLink
       class="avatar-link"
       :href="friend.link"
@@ -57,7 +57,7 @@ const friendStyle = computed(() => {
 </template>
 
 <style scoped>
-.friend {
+.vp-friend {
   display: flex;
   align-items: flex-start;
   padding: 16px;
@@ -69,7 +69,7 @@ const friendStyle = computed(() => {
   transition: all var(--t-color);
 }
 
-.friend:hover {
+.vp-friend:hover {
   box-shadow: var(--vp-shadow-2);
 }
 
@@ -96,7 +96,7 @@ const friendStyle = computed(() => {
   padding-left: 16px;
   margin-bottom: 8px;
   margin-left: -16px;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--vp-friends-name-color);
   border-bottom: 1px dashed var(--vp-friends-border-color);
@@ -117,4 +117,3 @@ const friendStyle = computed(() => {
   line-clamp: 3;
 }
 </style>
-../composables/dark-mode.js
diff --git a/theme/src/client/components/VPSidebar.vue b/theme/src/client/components/VPSidebar.vue
index f11bbc90..e30b935c 100644
--- a/theme/src/client/components/VPSidebar.vue
+++ b/theme/src/client/components/VPSidebar.vue
@@ -5,7 +5,7 @@ import { useRoutePath } from 'vuepress/client'
 import { useSidebar } from '../composables/sidebar.js'
 import { inBrowser } from '../utils/index.js'
 import VPSidebarItem from './VPSidebarItem.vue'
-import TransitionFadeSlideY from './TransitionFadeSlideY.vue'
+import VPTransitionFadeSlideY from './VPTransitionFadeSlideY.vue'
 
 const props = defineProps<{
   open: boolean
@@ -57,7 +57,7 @@ onMounted(() => {
     >
       <div class="curtain" />
 
-      <TransitionFadeSlideY>
+      <VPTransitionFadeSlideY>
         <nav
           id="SidebarNav"
           :key="sidebarKey"
@@ -81,7 +81,7 @@ onMounted(() => {
 
           <slot name="sidebar-nav-after" />
         </nav>
-      </TransitionFadeSlideY>
+      </VPTransitionFadeSlideY>
     </aside>
   </Transition>
 </template>
diff --git a/theme/src/client/components/TransitionDrop.vue b/theme/src/client/components/VPTransitionDrop.vue
similarity index 100%
rename from theme/src/client/components/TransitionDrop.vue
rename to theme/src/client/components/VPTransitionDrop.vue
diff --git a/theme/src/client/components/TransitionFadeSlideY.vue b/theme/src/client/components/VPTransitionFadeSlideY.vue
similarity index 100%
rename from theme/src/client/components/TransitionFadeSlideY.vue
rename to theme/src/client/components/VPTransitionFadeSlideY.vue
diff --git a/theme/src/client/styles/vars.css b/theme/src/client/styles/vars.css
index 1035b903..6ea3abba 100644
--- a/theme/src/client/styles/vars.css
+++ b/theme/src/client/styles/vars.css
@@ -484,10 +484,10 @@
  * Component: Friends
  * -------------------------------------------------------------------------- */
 :root {
-  --vp-friends-text-color: var(--vp-c-text-1);
+  --vp-friends-text-color: var(--vp-c-text-2);
   --vp-friends-bg-color: var(--vp-c-bg);
-  --vp-friends-name-color: var(--vp-c-brand-1);
-  --vp-friends-border-color: var(--vp-c-border);
+  --vp-friends-name-color: var(--vp-c-text-2);
+  --vp-friends-border-color: var(--vp-c-divider);
 }
 
 /**