diff --git a/app/about/Demo.tsx b/app/about/Demo.tsx
index 774d975a..aa73b77e 100644
--- a/app/about/Demo.tsx
+++ b/app/about/Demo.tsx
@@ -12,7 +12,7 @@ export function Demo() {
         fullWidth
         className="bg-[#F1EDE5]! w-fill max-w-md mx-auto "
         selectedOptionClassName="bg-[#686153]! text-white!"
-        optionClassName="text-[#969696]! text-[1rem] sm:text-[1.25rem]  md:text-[1.5rem]"
+        optionClassName="text-[#969696]! text-[1rem] sm:text-[1.25rem]  "
         value={value}
         onChange={setValue}
         options={[
diff --git a/app/about/Examples.tsx b/app/about/Examples.tsx
index 0805dc55..8d1cb55a 100644
--- a/app/about/Examples.tsx
+++ b/app/about/Examples.tsx
@@ -2,7 +2,7 @@ import { GoToArrow } from "components/Icons/GoToArrow";
 
 export const Examples = () => {
   return (
-    <div className="aboutExamples mx-auto pt-24 text-center w-full">
+    <div className="aboutExamples mx-auto pt-32 text-center w-full">
       <h2>Loved by thousands of writers</h2>
       <div className="flex gap-2 w-fit items-center font-bold text-[#57822B] mx-auto">
         <p>Explore More</p>
diff --git a/app/about/Features.tsx b/app/about/Features.tsx
index aff846c5..c27c806f 100644
--- a/app/about/Features.tsx
+++ b/app/about/Features.tsx
@@ -3,43 +3,39 @@ import { Separator } from "components/Layout";
 export const Features = () => {
   return (
     <>
-      <div className="aboutSpotlightFeatures pt-24 flex flex-col gap-24">
+      <div className="aboutSpotlightFeatures pt-24 flex flex-col gap-16">
         <div className="flex gap-8 justify-center">
           <div className="bg-[#F1EDE5]! aspect-3/2 w-fill min-w-[160px] max-w-[720px] grow" />
           <div className="flex flex-col w-fill max-w-sm py-4 ">
-            <h3>Something</h3>
-            <p>This is some text that goes underneath as a description</p>
+            <h3>Reach your readers</h3>
+            <p>
+              Send updates via email and on the Atmosphere, a social ecosystem
+              of millions
+            </p>
           </div>
         </div>
         <div className="flex gap-8 justify-center">
           <div className="flex flex-col w-fill max-w-sm text-right py-4 ">
-            <h3>Something</h3>
-            <p>This is some text that goes underneath as a description</p>
+            <h3>Express yourself</h3>
+            <p>Custom themes and domains</p>
           </div>
           <div className="bg-[#F1EDE5]! aspect-3/2 w-fill min-w-[160px] max-w-[720px] grow" />
         </div>
-        <div className="flex gap-8 justify-center">
-          <div className="bg-[#F1EDE5]! aspect-3/2 w-fill min-w-[160px] max-w-[720px] grow" />
-          <div className="flex flex-col w-fill max-w-sm py-4 ">
-            <h3>Something</h3>
-            <p>This is some text that goes underneath as a description</p>
-          </div>
-        </div>
       </div>
       <div className="flex gap-3 sm:gap-8 items-center w-fit mx-auto pt-20">
-        <div className="flex flex-col text-center">
-          <h4>Hello</h4>
-          <p>this is some text</p>
-        </div>
-        <div className="border-l border-t border-border h-[80px] w-px " />
-        <div className="flex flex-col text-center">
-          <h4>Hello</h4>
-          <p>this is some text</p>
+        <div className="flex-1 flex flex-col text-center">
+          <h4>Write and read together</h4>
+          <p>
+            with collaborative editing <br />
+            and easy sharing{" "}
+          </p>
         </div>
-        <div className="border-l border-t border-border h-[80px] w-px" />
-        <div className="flex flex-col text-center">
-          <h4>Hello</h4>
-          <p>this is some text</p>
+        <div className="border-l border-t border-border h-[96px] w-px " />
+        <div className="flex-1 flex flex-col text-center">
+          <h4>Build your community</h4>
+          <p>
+            Plan events, start conversations, and share everything everywhere
+          </p>
         </div>
       </div>
     </>