diff --git a/themes/theme-default/src/client/components/VPHome.vue b/themes/theme-default/src/client/components/VPHome.vue
index 7bf2c3f9a0..2c8ca1acc7 100644
--- a/themes/theme-default/src/client/components/VPHome.vue
+++ b/themes/theme-default/src/client/components/VPHome.vue
@@ -9,7 +9,7 @@ import { Content } from 'vuepress/client'
   <main class="vp-home">
     <VPHomeHero />
     <VPHomeFeatures />
-    <div class="theme-default-content" vp-content>
+    <div vp-content>
       <Content />
     </div>
     <VPHomeFooter />
@@ -30,7 +30,7 @@ import { Content } from 'vuepress/client'
     padding-left: 1.5rem;
   }
 
-  .theme-default-content {
+  [vp-content] {
     margin: 0;
     padding: 0;
   }
diff --git a/themes/theme-default/src/client/components/VPPage.vue b/themes/theme-default/src/client/components/VPPage.vue
index 63fcd2bbed..2180e772b4 100644
--- a/themes/theme-default/src/client/components/VPPage.vue
+++ b/themes/theme-default/src/client/components/VPPage.vue
@@ -19,7 +19,7 @@ setupHeaders()
   <main class="vp-page">
     <slot name="top" />
 
-    <div class="theme-default-content" vp-content>
+    <div vp-content>
       <slot name="content-top" />
 
       <Content />
@@ -61,7 +61,7 @@ setupHeaders()
     padding-left: 0;
   }
 
-  .theme-default-content {
+  [vp-content] {
     @include mixins.content-wrapper;
 
     & {
diff --git a/themes/theme-default/src/client/layouts/Layout.vue b/themes/theme-default/src/client/layouts/Layout.vue
index b7bc7c78d2..e97fe9f1e5 100644
--- a/themes/theme-default/src/client/layouts/Layout.vue
+++ b/themes/theme-default/src/client/layouts/Layout.vue
@@ -189,7 +189,7 @@ const onBeforeLeave = scrollPromise.pending
     }
 
     // adjust heading margin and padding;
-    .theme-default-content {
+    [vp-content] {
       h1,
       h2,
       h3,
diff --git a/themes/theme-default/src/client/layouts/NotFound.vue b/themes/theme-default/src/client/layouts/NotFound.vue
index 86da222b5c..6dc83b308c 100644
--- a/themes/theme-default/src/client/layouts/NotFound.vue
+++ b/themes/theme-default/src/client/layouts/NotFound.vue
@@ -15,7 +15,7 @@ const homeText = themeLocale.value.backToHome ?? 'Back to home'
 <template>
   <div class="vp-theme-container" vp-container>
     <main class="page">
-      <div class="theme-default-content" vp-content>
+      <div vp-content>
         <h1>404</h1>
 
         <blockquote>{{ getMsg() }}</blockquote>
diff --git a/themes/theme-default/src/client/styles/content/normalize.scss b/themes/theme-default/src/client/styles/content/normalize.scss
index 12ad93210b..8d006ae5e8 100644
--- a/themes/theme-default/src/client/styles/content/normalize.scss
+++ b/themes/theme-default/src/client/styles/content/normalize.scss
@@ -1,6 +1,6 @@
 @use '../variables' as *;
 
-.theme-default-content {
+[vp-content] {
   h1,
   h2,
   h3,
diff --git a/themes/theme-default/src/client/styles/external-link-icon.scss b/themes/theme-default/src/client/styles/external-link-icon.scss
index 8d4131713a..edb83bd7c5 100644
--- a/themes/theme-default/src/client/styles/external-link-icon.scss
+++ b/themes/theme-default/src/client/styles/external-link-icon.scss
@@ -25,7 +25,7 @@
     @include external-link-icon;
   }
 
-  .theme-default-content {
+  [vp-content] {
     a[href*="://"],
     a[target=_blank] {
       &:not(.no-external-link-icon) {