diff --git a/site/src/components/common/HeadingSection/HeadingSection.tsx b/site/src/components/common/HeadingSection/HeadingSection.tsx
index 7f7b41a8..498fbb8c 100644
--- a/site/src/components/common/HeadingSection/HeadingSection.tsx
+++ b/site/src/components/common/HeadingSection/HeadingSection.tsx
@@ -8,7 +8,13 @@ import { headingIcons } from './data'
 
 import s from './HeadingSection.module.scss'
 
-function HeadingSection({ className, title, description, socials }: InferProps<typeof HeadingSection.propTypes>) {
+function HeadingSection({
+  className,
+  descriptionClassName,
+  title,
+  description,
+  socials,
+}: InferProps<typeof HeadingSection.propTypes>) {
   const getIcons = useMemo(
     () =>
       headingIcons[socials as keyof typeof headingIcons]?.map((el) => (
@@ -20,7 +26,7 @@ function HeadingSection({ className, title, description, socials }: InferProps<t
   return (
     <div className={cx(s.root, className)}>
       <h2 className={s.title}>{title}</h2>
-      {description && <p className={s.description}>{description}</p>}
+      {description && <p className={cx(s.description, descriptionClassName)}>{description}</p>}
       {socials && <div className={s.icons}>{getIcons}</div>}
     </div>
   )
@@ -28,6 +34,7 @@ function HeadingSection({ className, title, description, socials }: InferProps<t
 
 HeadingSection.propTypes = {
   className: string,
+  descriptionClassName: string,
   title: string.isRequired,
   description: string,
   socials: oneOf(['community', 'corporate']),
diff --git a/site/src/components/pages/Home/ZkProof/ZkProof.module.scss b/site/src/components/pages/Home/ZkProof/ZkProof.module.scss
index 20c7e642..9f594723 100644
--- a/site/src/components/pages/Home/ZkProof/ZkProof.module.scss
+++ b/site/src/components/pages/Home/ZkProof/ZkProof.module.scss
@@ -21,7 +21,6 @@
   padding-bottom: size($spacing64);
 
   @include mobile {
-    padding-bottom: 0;
     padding-top: size($spacing48);
   }
 }
@@ -78,9 +77,13 @@
 .box {
   &:not(:last-child) {
     margin-bottom: size($spacing64);
+
+    @include mobile {
+      margin-bottom: size($spacing24);
+    }
   }
 
-  @include mobile {
-    margin-bottom: unset;
+  &:last-of-type {
+    margin-bottom: 0;
   }
 }
diff --git a/site/src/components/pages/ZkSharding/Cherries/Cherries.module.scss b/site/src/components/pages/ZkSharding/Cherries/Cherries.module.scss
index a329de15..270e2dbc 100644
--- a/site/src/components/pages/ZkSharding/Cherries/Cherries.module.scss
+++ b/site/src/components/pages/ZkSharding/Cherries/Cherries.module.scss
@@ -138,6 +138,12 @@
   }
 }
 
+.headingDescription {
+  @include mobile {
+    width: auto;
+  }
+}
+
 .rightHeader {
   display: flex;
 
diff --git a/site/src/components/pages/ZkSharding/Cherries/Cherries.tsx b/site/src/components/pages/ZkSharding/Cherries/Cherries.tsx
index 2097d871..57e6e74f 100644
--- a/site/src/components/pages/ZkSharding/Cherries/Cherries.tsx
+++ b/site/src/components/pages/ZkSharding/Cherries/Cherries.tsx
@@ -21,7 +21,12 @@ const Cherries = ({ data: { title, description, content }, className }: Props) =
     <div className={cx(s.root, className)}>
       <div className={s.left}>
         <WhiteRectangle />
-        <HeadingSection className={s.heading} title={title} description={description} />
+        <HeadingSection
+          className={s.heading}
+          descriptionClassName={s.headingDescription}
+          title={title}
+          description={description}
+        />
         {!isMobile && <WhiteRectangle />}
       </div>
 
diff --git a/site/src/components/pages/ZkSharding/More/More.module.scss b/site/src/components/pages/ZkSharding/More/More.module.scss
index 2c972372..17a1099f 100644
--- a/site/src/components/pages/ZkSharding/More/More.module.scss
+++ b/site/src/components/pages/ZkSharding/More/More.module.scss
@@ -111,10 +111,6 @@
   align-items: center;
 }
 
-.description {
-  color: $grey;
-}
-
 .heading {
   min-height: unset;
 
@@ -145,6 +141,12 @@
   }
 }
 
+.description {
+  @include mobile {
+    width: auto;
+  }
+}
+
 .list {
   display: flex;
   flex-wrap: wrap;
diff --git a/site/src/components/pages/ZkSharding/More/More.tsx b/site/src/components/pages/ZkSharding/More/More.tsx
index c424570f..8ed88701 100644
--- a/site/src/components/pages/ZkSharding/More/More.tsx
+++ b/site/src/components/pages/ZkSharding/More/More.tsx
@@ -23,7 +23,12 @@ const More = ({ data: { title, description, contentFooter, footer }, className }
     <div className={cx(s.root, className)}>
       <div className={s.left}>
         <WhiteRectangle />
-        <HeadingSection className={s.heading} title={title} description={description} />
+        <HeadingSection
+          className={s.heading}
+          descriptionClassName={s.description}
+          title={title}
+          description={description}
+        />
         {!isMobile && <WhiteRectangle />}
       </div>