diff --git a/docs/components/molecules/HomeHero.vue b/docs/components/molecules/HomeHero.vue
index 83cc1031d7..868dbb083a 100644
--- a/docs/components/molecules/HomeHero.vue
+++ b/docs/components/molecules/HomeHero.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-hidden relative dark:bg-sky-black dark:text-white pt-12">
     <div class="flex flex-wrap justify-center py-0 section d-container-content">
-      <section class="flex flex-col justify-start w-full px-4 pt-36 pb-48 md:pt-44 lg:pb-56 lg:pt-24 text-center z-20">
+      <section class="flex flex-col justify-start w-full px-4 pb-24 sm:pt-12 sm:pb-36 lg:pt-24 lg:pb-56 text-center z-20">
         <Gem class="block m-x-auto" />
         <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 mb-6 pt-8">
           <Markdown use="title" unwrap="p" />
diff --git a/docs/components/organisms/HomeFeatures.vue b/docs/components/organisms/HomeFeatures.vue
index 9fc2e92f49..db3133613f 100644
--- a/docs/components/organisms/HomeFeatures.vue
+++ b/docs/components/organisms/HomeFeatures.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative">
-    <section class="py-40 text-white light:text-secondary-black">
+    <section class="py-24 md:py-40 text-white light:text-secondary-black">
       <NuxtContainer class="flex flex-col items-center">
         <div class="flex flex-col w-full items-center col-span-12">
           <div class="mb-2">