diff --git a/theme/src/client/components/Blog/Blog.vue b/theme/src/client/components/Blog/VPBlog.vue
similarity index 73%
rename from theme/src/client/components/Blog/Blog.vue
rename to theme/src/client/components/Blog/VPBlog.vue
index b94c7783..c9a9055a 100644
--- a/theme/src/client/components/Blog/Blog.vue
+++ b/theme/src/client/components/Blog/VPBlog.vue
@@ -2,48 +2,48 @@
 import { computed } from 'vue'
 import { useData } from '../../composables/data.js'
 import TransitionFadeSlideY from '../TransitionFadeSlideY.vue'
-import PostList from './PostList.vue'
-import Archives from './Archives.vue'
-import BlogAside from './BlogAside.vue'
-import BlogExtract from './BlogExtract.vue'
-import Tags from './Tags.vue'
-import BlogNav from './BlogNav.vue'
+import VPPostList from './VPPostList.vue'
+import VPBlogArchives from './VPBlogArchives.vue'
+import VPBlogAside from './VPBlogAside.vue'
+import VPBlogExtract from './VPBlogExtract.vue'
+import VPBlogTags from './VPBlogTags.vue'
+import VPBlogNav from './VPBlogNav.vue'
 
 const { theme, page } = useData()
 
 const com = {
-  PostList,
-  Tags,
-  Archives,
+  VPPostList,
+  VPBlogTags,
+  VPBlogArchives,
 }
 
 const type = computed(() => {
   const type = page.value.type
   if (type === 'blog-tags')
-    return 'Tags'
+    return 'VPBlogTags'
   if (type === 'blog-archives')
-    return 'Archives'
-  return 'PostList'
+    return 'VPBlogArchives'
+  return 'VPPostList'
 })
 </script>
 
 <template>
-  <div class="blog-wrapper">
+  <div class="vp-blog">
     <div class="blog-container" :class="{ 'no-avatar': !theme.avatar }">
-      <BlogNav v-if="!theme.avatar" is-local />
+      <VPBlogNav v-if="!theme.avatar" is-local />
 
       <TransitionFadeSlideY>
         <component :is="com[type]" />
       </TransitionFadeSlideY>
 
-      <BlogAside />
-      <BlogExtract />
+      <VPBlogAside />
+      <VPBlogExtract />
     </div>
   </div>
 </template>
 
 <style scoped>
-.blog-wrapper {
+.vp-blog {
   position: relative;
   min-height: calc(100vh - var(--vp-footer-height, 0px));
 }
@@ -64,11 +64,11 @@ const type = computed(() => {
 }
 
 @media (min-width: 768px) {
-  .blog-wrapper {
+  .vp-blog {
     min-height: calc(100vh + var(--vp-nav-height) - var(--vp-footer-height, 0px));
   }
 
-  .blog-wrapper {
+  .vp-blog {
     padding-top: var(--vp-nav-height);
     margin-top: calc(var(--vp-nav-height) * -1);
     background-color: var(--vp-c-bg-alt);
@@ -82,7 +82,7 @@ const type = computed(() => {
 }
 
 @media (min-width: 960px) {
-  .blog-wrapper {
+  .vp-blog {
     min-height: calc(100vh - var(--vp-footer-height, 0px));
   }
 
diff --git a/theme/src/client/components/Blog/Archives.vue b/theme/src/client/components/Blog/VPBlogArchives.vue
similarity index 89%
rename from theme/src/client/components/Blog/Archives.vue
rename to theme/src/client/components/Blog/VPBlogArchives.vue
index 23270dfc..b9ca2063 100644
--- a/theme/src/client/components/Blog/Archives.vue
+++ b/theme/src/client/components/Blog/VPBlogArchives.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { useArchives, useBlogExtract } from '../../composables/blog.js'
-import ShortPostList from './ShortPostList.vue'
+import VPShortPostList from './VPShortPostList.vue'
 
 const { archives: archivesLink } = useBlogExtract()
 const { archives } = useArchives()
 </script>
 
 <template>
-  <div class="archives-wrapper">
+  <div class="vp-blog-archives">
     <h2 class="archives-title">
       <span class="vpi-archive icon" />
       <span>{{ archivesLink.text }}</span>
@@ -18,7 +18,7 @@ const { archives } = useArchives()
           <h3 class="archive-title">
             {{ archive.label }}
           </h3>
-          <ShortPostList :post-list="archive.list" />
+          <VPShortPostList :post-list="archive.list" />
         </div>
       </template>
     </div>
@@ -26,7 +26,7 @@ const { archives } = useArchives()
 </template>
 
 <style scoped>
-.archives-wrapper {
+.vp-blog-archives {
   flex: 1;
   padding: 32px 24px;
   margin: 0 auto;
@@ -61,7 +61,7 @@ const { archives } = useArchives()
 }
 
 @media (min-width: 768px) {
-  .archives-wrapper {
+  .vp-blog-archives {
     padding: 32px 0;
     margin-left: 20px;
   }
@@ -94,7 +94,7 @@ const { archives } = useArchives()
 }
 
 @media (min-width: 1200px) {
-  .archives-wrapper {
+  .vp-blog-archives {
     margin-left: 0;
   }
 }
diff --git a/theme/src/client/components/Blog/BlogAside.vue b/theme/src/client/components/Blog/VPBlogAside.vue
similarity index 65%
rename from theme/src/client/components/Blog/BlogAside.vue
rename to theme/src/client/components/Blog/VPBlogAside.vue
index 6fd4c795..77931593 100644
--- a/theme/src/client/components/Blog/BlogAside.vue
+++ b/theme/src/client/components/Blog/VPBlogAside.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 import { useData } from '../../composables/data.js'
-import BlogNav from './BlogNav.vue'
-import BlogProfile from './BlogProfile.vue'
+import VPBlogNav from './VPBlogNav.vue'
+import VPBlogProfile from './VPBlogProfile.vue'
 
 const { theme } = useData()
 </script>
 
 <template>
-  <div v-if="theme.avatar" class="blog-aside-wrapper">
-    <BlogProfile />
-    <BlogNav />
+  <div v-if="theme.avatar" class="vp-blog-aside">
+    <VPBlogProfile />
+    <VPBlogNav />
   </div>
 </template>
 
 <style scoped>
-.blog-aside-wrapper {
+.vp-blog-aside {
   position: sticky;
   top: calc(var(--vp-nav-height) + 2rem);
   display: none;
@@ -24,7 +24,7 @@ const { theme } = useData()
 }
 
 @media (min-width: 768px) {
-  .blog-aside-wrapper {
+  .vp-blog-aside {
     display: block;
     margin: 2rem 1rem 1rem 1.5rem;
   }
diff --git a/theme/src/client/components/Blog/BlogExtract.vue b/theme/src/client/components/Blog/VPBlogExtract.vue
similarity index 97%
rename from theme/src/client/components/Blog/BlogExtract.vue
rename to theme/src/client/components/Blog/VPBlogExtract.vue
index 04f5e67d..4b7ee1bc 100644
--- a/theme/src/client/components/Blog/BlogExtract.vue
+++ b/theme/src/client/components/Blog/VPBlogExtract.vue
@@ -58,7 +58,7 @@ const showBlogExtract = computed(() => {
 
 <template>
   <template v-if="showBlogExtract">
-    <div class="blog-extract" @click="open = !open">
+    <div class="vp-blog-extract" @click="open = !open">
       <span class="vpi-blog-ext icon" />
     </div>
     <Transition name="fade">
@@ -102,7 +102,7 @@ const showBlogExtract = computed(() => {
 </template>
 
 <style scoped>
-.blog-extract {
+.vp-blog-extract {
   position: fixed;
   right: 0;
   bottom: 30%;
@@ -120,7 +120,7 @@ const showBlogExtract = computed(() => {
   transition-property: background-color, border, box-shadow;
 }
 
-.blog-extract .icon {
+.vp-blog-extract .icon {
   display: block;
   font-size: 16px;
   color: var(--vp-c-text-2);
@@ -128,13 +128,13 @@ const showBlogExtract = computed(() => {
 }
 
 @media (min-width: 768px) {
-  .blog-extract {
+  .vp-blog-extract {
     display: none;
   }
 }
 
 @media print {
-  .blog-extract {
+  .vp-blog-extract {
     display: none;
   }
 }
diff --git a/theme/src/client/components/Blog/BlogNav.vue b/theme/src/client/components/Blog/VPBlogNav.vue
similarity index 90%
rename from theme/src/client/components/Blog/BlogNav.vue
rename to theme/src/client/components/Blog/VPBlogNav.vue
index c95140db..cf75d672 100644
--- a/theme/src/client/components/Blog/BlogNav.vue
+++ b/theme/src/client/components/Blog/VPBlogNav.vue
@@ -13,7 +13,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
 </script>
 
 <template>
-  <div v-if="hasBlogExtract" class="blog-nav" :class="{ local: props.isLocal }">
+  <div v-if="hasBlogExtract" class="vp-blog-nav" :class="{ local: props.isLocal }">
     <VPLink
       class="nav-link"
       :class="{ active: route.path === tags.link }"
@@ -38,25 +38,25 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
 </template>
 
 <style scoped>
-.blog-nav {
+.vp-blog-nav {
   padding: 0;
   text-align: left;
 }
 
-.blog-nav.local {
+.vp-blog-nav.local {
   display: none;
   padding-top: 2rem;
   margin-left: 20px;
 }
 
 @media (min-width: 768px) {
-  .blog-nav.local {
+  .vp-blog-nav.local {
     display: flex;
   }
 }
 
 @media (min-width: 1200px) {
-  .blog-nav.local {
+  .vp-blog-nav.local {
     margin-left: 0;
   }
 }
@@ -88,14 +88,14 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   color: var(--vp-c-brand-1);
 }
 
-.blog-nav.local .nav-link {
+.vp-blog-nav.local .nav-link {
   flex: 1;
   max-width: 200px;
   margin-right: 20px;
   margin-bottom: 0;
 }
 
-.blog-nav.local .nav-link:last-of-type {
+.vp-blog-nav.local .nav-link:last-of-type {
   margin-right: 0;
 }
 
diff --git a/theme/src/client/components/Blog/BlogProfile.vue b/theme/src/client/components/Blog/VPBlogProfile.vue
similarity index 74%
rename from theme/src/client/components/Blog/BlogProfile.vue
rename to theme/src/client/components/Blog/VPBlogProfile.vue
index 0bf0c901..7118cfe5 100644
--- a/theme/src/client/components/Blog/BlogProfile.vue
+++ b/theme/src/client/components/Blog/VPBlogProfile.vue
@@ -18,30 +18,30 @@ const imageUrl = computed(() => {
 </script>
 
 <template>
-  <div v-if="avatar" class="avatar-profile">
+  <div v-if="avatar" class="vp-blog-profile">
     <p v-if="imageUrl" :class="{ circle: !!avatar.circle }">
       <img :src="imageUrl" :alt="avatar.name">
     </p>
-    <div class="avatar-info">
+    <div class="profile-info">
       <h3>{{ avatar.name }}</h3>
       <p v-if="avatar.description" v-html="avatar.description" />
-      <div v-if="avatar.location" class="avatar-location">
+      <div v-if="avatar.location" class="profile-location">
         <span class="vpi-location" />
         <p v-if="avatar.location" v-html="avatar.location" />
       </div>
-      <div v-if="avatar.organization" class="avatar-organization">
+      <div v-if="avatar.organization" class="profile-organization">
         <span class="vpi-organization" />
         <p v-if="avatar.organization" v-html="avatar.organization" />
       </div>
     </div>
-    <div v-if="theme.social" class="avatar-social">
+    <div v-if="theme.social" class="profile-social">
       <VPSocialLinks :links="theme.social" />
     </div>
   </div>
 </template>
 
 <style scoped>
-.avatar-profile {
+.vp-blog-profile {
   padding: 24px 20px;
   margin-bottom: 24px;
   background-color: var(--vp-c-bg);
@@ -51,36 +51,36 @@ const imageUrl = computed(() => {
   transition-property: background-color, color, box-shadow;
 }
 
-.avatar-profile:hover {
+.vp-blog-profile:hover {
   box-shadow: var(--vp-shadow-2);
 }
 
-.avatar-profile img {
+.vp-blog-profile img {
   width: 60%;
   margin: auto;
 
   object-fit: cover;
 }
 
-.avatar-profile h3 {
+.vp-blog-profile h3 {
   margin-top: 1.5rem;
   font-size: 18px;
   font-weight: 600;
 }
 
-.avatar-profile h3,
-.avatar-profile p {
+.vp-blog-profile h3,
+.vp-blog-profile p {
   color: var(--vp-c-text-1);
   transition: color var(--t-color);
 }
 
-.avatar-profile .circle img {
+.vp-blog-profile .circle img {
   overflow: hidden;
   border-radius: 50%;
 }
 
-.avatar-location,
-.avatar-organization {
+.profile-location,
+.profile-organization {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -90,28 +90,28 @@ const imageUrl = computed(() => {
   transition: color var(--t-color);
 }
 
-.avatar-location p,
-.avatar-organization p {
+.profile-location p,
+.profile-organization p {
   margin: 0 4px;
 }
 
-.avatar-location + .avatar-organization {
+.profile-location + .profile-organization {
   margin-top: 0;
 }
 
-.avatar-social {
+.profile-social {
   padding-top: 12px;
   margin-top: 12px;
   border-top: 1px solid var(--vp-c-divider);
   transition: border var(--t-color);
 }
 
-.avatar-social :deep(.vp-social-link) {
+.profile-social :deep(.vp-social-link) {
   width: 32px;
   height: 32px;
 }
 
-.avatar-social :deep(.vp-social-link:hover) {
+.profile-social :deep(.vp-social-link:hover) {
   color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/theme/src/client/components/Blog/Tags.vue b/theme/src/client/components/Blog/VPBlogTags.vue
similarity index 91%
rename from theme/src/client/components/Blog/Tags.vue
rename to theme/src/client/components/Blog/VPBlogTags.vue
index d0082939..28c713f6 100644
--- a/theme/src/client/components/Blog/Tags.vue
+++ b/theme/src/client/components/Blog/VPBlogTags.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { useBlogExtract, useTags } from '../../composables/blog.js'
-import ShortPostList from './ShortPostList.vue'
+import VPShortPostList from './VPShortPostList.vue'
 
 const { tags, currentTag, postList, handleTagClick } = useTags()
 const { tags: tagsLink } = useBlogExtract()
 </script>
 
 <template>
-  <div class="tags-wrapper" :class="{ 'has-list': postList.length > 0 }">
+  <div class="vp-blog-tags" :class="{ 'has-list': postList.length > 0 }">
     <div class="tags-nav">
       <h2 class="tags-title">
         <span class="vpi-tag icon" />
@@ -32,19 +32,19 @@ const { tags: tagsLink } = useBlogExtract()
         {{ currentTag }}
       </h3>
 
-      <ShortPostList v-if="postList.length" :post-list="postList" />
+      <VPShortPostList v-if="postList.length" :post-list="postList" />
     </div>
   </div>
 </template>
 
 <style scoped>
-.tags-wrapper {
+.vp-blog-tags {
   flex: 1;
   padding: 32px 24px;
   margin: 0 auto;
 }
 
-.tags-wrapper.has-list {
+.vp-blog-tags.has-list {
   padding-bottom: 64px;
 }
 
@@ -118,7 +118,7 @@ const { tags: tagsLink } = useBlogExtract()
 }
 
 @media (min-width: 768px) {
-  .tags-wrapper {
+  .vp-blog-tags {
     padding: 32px 0;
     margin-left: 20px;
   }
@@ -149,7 +149,7 @@ const { tags: tagsLink } = useBlogExtract()
 }
 
 @media (min-width: 1200px) {
-  .tags-wrapper {
+  .vp-blog-tags {
     margin-left: 0;
   }
 }
diff --git a/theme/src/client/components/Blog/Pagination.vue b/theme/src/client/components/Blog/VPPagination.vue
similarity index 95%
rename from theme/src/client/components/Blog/Pagination.vue
rename to theme/src/client/components/Blog/VPPagination.vue
index eec2e0b5..fa7698a2 100644
--- a/theme/src/client/components/Blog/Pagination.vue
+++ b/theme/src/client/components/Blog/VPPagination.vue
@@ -14,7 +14,7 @@ const { theme } = useData()
 </script>
 
 <template>
-  <div class="pagination">
+  <div class="vp-blog-pagination">
     <button
       type="button"
       class="btn prev"
@@ -48,7 +48,7 @@ const { theme } = useData()
 </template>
 
 <style scoped>
-.pagination {
+.vp-blog-pagination {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -81,7 +81,7 @@ const { theme } = useData()
 }
 
 @media (min-width: 768px) {
-  .pagination {
+  .vp-blog-pagination {
     padding: 20px;
     margin-left: 20px;
     background-color: var(--vp-c-bg);
@@ -107,7 +107,7 @@ const { theme } = useData()
 }
 
 @media (min-width: 1200px) {
-  .pagination {
+  .vp-blog-pagination {
     margin-left: 0;
   }
 }
diff --git a/theme/src/client/components/Blog/PostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
similarity index 91%
rename from theme/src/client/components/Blog/PostItem.vue
rename to theme/src/client/components/Blog/VPPostItem.vue
index 1c87b9f6..39582fb3 100644
--- a/theme/src/client/components/Blog/PostItem.vue
+++ b/theme/src/client/components/Blog/VPPostItem.vue
@@ -29,7 +29,7 @@ const createTime = computed(() =>
 </script>
 
 <template>
-  <div class="post-item">
+  <div class="vp-blog-post-item">
     <h3>
       <div
         v-if="typeof post.sticky === 'boolean' ? post.sticky : post.sticky >= 0"
@@ -71,16 +71,16 @@ const createTime = computed(() =>
 </template>
 
 <style scoped>
-.post-item {
+.vp-blog-post-item {
   padding-top: 1rem;
   margin: 0 1.75rem 2rem;
 }
 
-.post-item:last-of-type {
+.vp-blog-post-item:last-of-type {
   border-bottom: none;
 }
 
-.post-item .sticky {
+.vp-blog-post-item .sticky {
   display: inline-block;
   padding: 3px 6px;
   margin-right: 0.5rem;
@@ -94,7 +94,7 @@ const createTime = computed(() =>
   transition-property: color, background-color;
 }
 
-.post-item .icon-lock {
+.vp-blog-post-item .icon-lock {
   width: 1em;
   height: 1em;
   margin-right: 8px;
@@ -104,7 +104,7 @@ const createTime = computed(() =>
   transition-property: color;
 }
 
-.post-item h3 {
+.vp-blog-post-item h3 {
   display: flex;
   align-items: center;
   margin-bottom: 0.75rem;
@@ -114,16 +114,16 @@ const createTime = computed(() =>
   transition: color var(--t-color);
 }
 
-.post-item h3:hover {
+.vp-blog-post-item h3:hover {
   color: var(--vp-c-brand-1);
 }
 
-.post-item h3:hover .sticky {
+.vp-blog-post-item h3:hover .sticky {
   color: var(--vp-c-text-2);
 }
 
 @media (min-width: 768px) {
-  .post-item {
+  .vp-blog-post-item {
     padding: 24px 20px;
     margin: 0 0 24px 20px;
     background-color: var(--vp-c-bg);
@@ -134,21 +134,21 @@ const createTime = computed(() =>
     will-change: transform;
   }
 
-  .post-item:hover {
+  .vp-blog-post-item:hover {
     box-shadow: var(--vp-shadow-2);
   }
 
-  .post-item .post-meta {
+  .vp-blog-post-item .post-meta {
     margin-bottom: 0;
   }
 
-  .post-item .excerpt {
+  .vp-blog-post-item .excerpt {
     margin-top: 24px;
   }
 }
 
 @media (min-width: 1200px) {
-  .post-item {
+  .vp-blog-post-item {
     margin: 0 0 24px;
   }
 }
diff --git a/theme/src/client/components/Blog/PostList.vue b/theme/src/client/components/Blog/VPPostList.vue
similarity index 82%
rename from theme/src/client/components/Blog/PostList.vue
rename to theme/src/client/components/Blog/VPPostList.vue
index e81c5ea8..d20c5f14 100644
--- a/theme/src/client/components/Blog/PostList.vue
+++ b/theme/src/client/components/Blog/VPPostList.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { usePostListControl } from '../../composables/blog.js'
 import TransitionDrop from '../TransitionDrop.vue'
-import PostItem from './PostItem.vue'
-import Pagination from './Pagination.vue'
+import VPPostItem from './VPPostItem.vue'
+import VPPagination from './VPPagination.vue'
 
 const {
   postList,
@@ -17,16 +17,16 @@ const {
 </script>
 
 <template>
-  <div class="post-list">
+  <div class="vp-blog-post-list">
     <template v-for="(post, index) in postList" :key="post.path">
       <TransitionDrop appear :delay="index * 0.04">
-        <PostItem
+        <VPPostItem
           :key="post.path"
           :post="post"
         />
       </TransitionDrop>
     </template>
-    <Pagination
+    <VPPagination
       v-if="isPaginationEnabled"
       :page="page"
       :total-page="totalPage"
@@ -39,7 +39,7 @@ const {
 </template>
 
 <style scoped>
-.post-list {
+.vp-blog-post-list {
   flex: 1;
   padding-top: 32px;
   padding-bottom: 64px;
diff --git a/theme/src/client/components/Blog/ShortPostList.vue b/theme/src/client/components/Blog/VPShortPostList.vue
similarity index 79%
rename from theme/src/client/components/Blog/ShortPostList.vue
rename to theme/src/client/components/Blog/VPShortPostList.vue
index 5c8360f8..197b5fad 100644
--- a/theme/src/client/components/Blog/ShortPostList.vue
+++ b/theme/src/client/components/Blog/VPShortPostList.vue
@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <ul class="post-list">
+  <ul class="vp-blog-short-post-list">
     <li v-for="post in postList" :key="post.path">
       <p class="post-title">
         <VPLink class="post-link" :href="post.path">
@@ -24,12 +24,12 @@ defineProps<{
 </template>
 
 <style scoped>
-.post-list {
+.vp-blog-short-post-list {
   padding: 0 12px;
   margin-top: 32px;
 }
 
-.post-list li {
+.vp-blog-short-post-list li {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -38,7 +38,7 @@ defineProps<{
   transition: color var(--t-color);
 }
 
-.post-list .post-title {
+.vp-blog-short-post-list .post-title {
   display: -webkit-box;
   flex: 1;
   margin-right: 14px;
@@ -51,16 +51,16 @@ defineProps<{
   line-clamp: 1;
 }
 
-.post-list .post-time {
+.vp-blog-short-post-list .post-time {
   color: var(--vp-c-text-3);
   transition: color var(--t-color);
 }
 
-.post-list li:hover .post-title {
+.vp-blog-short-post-list li:hover .post-title {
   color: var(--vp-c-brand-1);
 }
 
-.post-list li:hover .post-time {
+.vp-blog-short-post-list li:hover .post-time {
   color: var(--vp-c-text-2);
 }
 </style>
diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue
index 6bb2e947..1a5a8c16 100644
--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useData, useSidebar } from '../composables/index.js'
-import Blog from './Blog/Blog.vue'
+import VPBlog from './Blog/VPBlog.vue'
 import VPDoc from './VPDoc.vue'
 import VPPage from './VPPage.vue'
 import Home from './Home/Home.vue'
@@ -29,7 +29,7 @@ const isBlogLayout = computed(() => {
       'is-home': frontmatter.pageLayout === 'home',
     }"
   >
-    <Blog v-if="isBlogLayout" />
+    <VPBlog v-if="isBlogLayout" />
 
     <VPPage v-else-if="frontmatter.pageLayout === 'page'">
       <template #page-top>