diff --git a/src/client/theme-default/components/HomeHero.vue b/src/client/theme-default/components/HomeHero.vue
index 9ff14a75..eb396dd0 100644
--- a/src/client/theme-default/components/HomeHero.vue
+++ b/src/client/theme-default/components/HomeHero.vue
@@ -6,17 +6,15 @@ import NavLink from './NavLink.vue'
 const { site, frontmatter } = useData()
 
 const showHero = computed(() => {
-  const {
-    heroImage,
-    heroText,
-    tagline,
-    actionLink,
-    actionText
-  } = frontmatter.value
+  const { heroImage, heroText, tagline, actionLink, actionText } =
+    frontmatter.value
   return heroImage || heroText || tagline || (actionLink && actionText)
 })
 
 const heroText = computed(() => frontmatter.value.heroText || site.value.title)
+const tagline = computed(
+  () => frontmatter.value.tagline || site.value.description
+)
 </script>
 
 <template>
@@ -30,9 +28,7 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
     </figure>
 
     <h1 v-if="heroText" id="main-title" class="title">{{ heroText }}</h1>
-    <p v-if="frontmatter.tagline" class="description">
-      {{ frontmatter.tagline }}
-    </p>
+    <p v-if="tagline" class="tagline">{{ tagline }}</p>
 
     <NavLink
       v-if="frontmatter.actionLink && frontmatter.actionText"
@@ -99,7 +95,7 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
   }
 }
 
-.description {
+.tagline {
   margin: 0;
   margin-top: 0.25rem;
   line-height: 1.3;
@@ -108,7 +104,7 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
 }
 
 @media (min-width: 420px) {
-  .description {
+  .tagline {
     line-height: 1.2;
     font-size: 1.6rem;
   }