diff --git a/theme/src/client/components/Home/Home.vue b/theme/src/client/components/Home/Home.vue
index 82d81ccd..d78a3137 100644
--- a/theme/src/client/components/Home/Home.vue
+++ b/theme/src/client/components/Home/Home.vue
@@ -64,7 +64,7 @@ function resolveComponentName(type: string) {
       v-for="(item, index) in config"
       :key="item.type + index"
     >
-      <div :class="{ layout: index > 0 && item.type !== 'features' }">
+      <div :class="{ layout: index > 0 && item.type !== 'features' && item.type !== 'custom' }">
         <component
           :is="resolveComponentName(item.type)"
           v-bind="item"
diff --git a/theme/src/client/components/Home/HomeHero.vue b/theme/src/client/components/Home/HomeHero.vue
index c7b004ca..87a32668 100644
--- a/theme/src/client/components/Home/HomeHero.vue
+++ b/theme/src/client/components/Home/HomeHero.vue
@@ -201,7 +201,7 @@ const actions = computed(() => hero.value.actions ?? [])
   width: 714px;
   height: 390px;
   clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
-  background: #fe5;
+  background: var(--vp-c-yellow-3);
   transform: translate(-50%, 0);
 }
 
@@ -211,7 +211,7 @@ const actions = computed(() => hero.value.actions ?? [])
   width: 1000px;
   height: 450px;
   clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
-  background: #e950d1;
+  background: var(--vp-c-red-3);
   transform: translate(-50%, 0);
 }
 
@@ -221,7 +221,7 @@ const actions = computed(() => hero.value.actions ?? [])
   width: 1000px;
   height: 450px;
   clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
-  background: rgba(87, 80, 233);
+  background: var(--vp-c-purple-3);
   transform: translate(-50%, 0);
 }
 
diff --git a/theme/src/client/components/Home/HomeProfile.vue b/theme/src/client/components/Home/HomeProfile.vue
index 647e4b07..919d2c36 100644
--- a/theme/src/client/components/Home/HomeProfile.vue
+++ b/theme/src/client/components/Home/HomeProfile.vue
@@ -31,13 +31,9 @@ const profile = computed(() => {
   >
     <VImage v-if="profile.avatar" :image="profile.avatar" :class="{ circle: profile.circle }" />
 
-    <h3 v-if="profile.name">
-      {{ profile.name }}
-    </h3>
+    <h3 v-if="profile.name" v-html="profile.name" />
 
-    <p v-if="profile.description">
-      {{ profile.description }}
-    </p>
+    <p v-if="profile.description" v-html="profile.description" />
   </HomeBox>
 </template>
 
diff --git a/theme/src/client/components/Home/HomeTextImage.vue b/theme/src/client/components/Home/HomeTextImage.vue
index 2e83373b..19804a1e 100644
--- a/theme/src/client/components/Home/HomeTextImage.vue
+++ b/theme/src/client/components/Home/HomeTextImage.vue
@@ -80,6 +80,7 @@ const maxWidth = computed(() => {
 
 .content-text h2 {
   margin-top: 0;
+  margin-bottom: 12px;
 }
 
 .content-text ul {
@@ -87,6 +88,7 @@ const maxWidth = computed(() => {
 }
 
 .content-text .description {
+  margin: 12px 0 24px;
   font-size: 16px;
   font-weight: 500;
   color: var(--vp-c-text-1);
@@ -102,6 +104,7 @@ const maxWidth = computed(() => {
 
 .content-text ul p {
   margin: 0;
+  font-weight: 400;
   color: var(--vp-c-text-1);
   transition: color var(--t-color);
 }
@@ -112,13 +115,12 @@ const maxWidth = computed(() => {
 
 @media (min-width: 768px) {
   .content-image :deep(.plume-image) {
-    max-width: 160px;
+    max-width: 180px;
     margin: 0 48px;
   }
 
   .content-text {
     flex: 1;
-    width: 100%;
   }
 }
 
@@ -128,7 +130,7 @@ const maxWidth = computed(() => {
   }
 
   .content-image :deep(.plume-image) {
-    max-width: 180px;
+    max-width: 220px;
     margin: 0 96px;
   }