diff --git a/src/components/Community.jsx b/src/components/Community.jsx
index f98ffb5..d3f3cec 100644
--- a/src/components/Community.jsx
+++ b/src/components/Community.jsx
@@ -1,3 +1,4 @@
+import { P, H3, H4, PXS, PXXS } from '@/components/text'
 import {
   Tab,
   TabGroup,
@@ -50,8 +51,8 @@ const product = {
 
 export function Community() {
   return (
-    <div className="pb-24">
-      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
+    <div className="lg:pb-24 pb-12">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
@@ -91,22 +92,21 @@ export function Community() {
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <H2>{product.name}</H2>
 
-              <div className="mt-4">
-                <h3 className="sr-only">Description</h3>
+              <div className="mt-2">
+
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
-              <section aria-labelledby="details-heading" className="mt-8">
-                <div className="space-y-4 border-t border-gray-300 pt-4">
+              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">
+
+                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
-                      <h3>
-                        <PS className="font-medium text-gray-900 mb-4">
-                          {detail.name}
-                        </PS>
-                      </h3>
+                      <H3 className="font-medium text-gray-900 mb-4">
+                        {detail.name}
+                      </H3>
                       <ul
                         role="list"
                         className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index 3d6121d..d535e6a 100644
--- a/src/components/Events.jsx
+++ b/src/components/Events.jsx
@@ -1,3 +1,4 @@
+import { P, H3, H4, PXS, PXXS } from '@/components/text'
 import {
   Tab,
   TabGroup,
@@ -52,8 +53,8 @@ const product = {
 
 export function Events() {
   return (
-    <div className="pb-24">
-      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
+    <div className="lg:pb-24 pb-12">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
@@ -93,22 +94,21 @@ export function Events() {
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <H2>{product.name}</H2>
 
-              <div className="mt-4">
-                <h3 className="sr-only">Description</h3>
+              <div className="mt-2">
+
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
-              <section aria-labelledby="details-heading" className="mt-8">
-                <div className="space-y-4 border-t border-gray-300 pt-4">
+              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">
+
+                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
-                      <h3>
-                        <PS className="font-medium text-gray-900 mb-4">
-                          {detail.name}
-                        </PS>
-                      </h3>
+                      <H3 className="font-medium text-gray-900 mb-4">
+                        {detail.name}
+                      </H3>
                       <ul
                         role="list"
                         className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
diff --git a/src/components/Nomads.jsx b/src/components/Nomads.jsx
index 9cef1f7..ae6b9dd 100644
--- a/src/components/Nomads.jsx
+++ b/src/components/Nomads.jsx
@@ -1,3 +1,4 @@
+import { P, H3, H4, PXS, PXXS } from '@/components/text'
 import {
   Tab,
   TabGroup,
@@ -51,8 +52,8 @@ const product = {
 
 export function Nomads() {
   return (
-    <div className="pb-24">
-      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
+    <div className="lg:pb-24 pb-12">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
@@ -92,22 +93,21 @@ export function Nomads() {
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <H2>{product.name}</H2>
 
-              <div className="mt-4">
-                <h3 className="sr-only">Description</h3>
+              <div className="mt-2">
+
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
-              <section aria-labelledby="details-heading" className="mt-8">
-                <div className="space-y-4 border-t border-gray-300 pt-4">
+              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">
+
+                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
-                      <h3>
-                        <PS className="font-medium text-gray-900 mb-4">
-                          {detail.name}
-                        </PS>
-                      </h3>
+                      <H3 className="font-medium text-gray-900 mb-4">
+                        {detail.name}
+                      </H3>
                       <ul
                         role="list"
                         className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"