diff --git a/src/sections/Meshmap/meshmap-catalog.js b/src/sections/Meshmap/meshmap-catalog.js
index dbc17ec04a6a..37cb8ea266b4 100644
--- a/src/sections/Meshmap/meshmap-catalog.js
+++ b/src/sections/Meshmap/meshmap-catalog.js
@@ -33,6 +33,14 @@ box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
   padding: 0;
 }
 
+h1{
+  text-align: center;
+}
+
+h4{
+  padding-bottom: 1rem;
+  text-align: center;
+}
 
 .patterns {
   display: flex;
@@ -420,6 +428,10 @@ h3.containerCaption {
 const Catalog = () => {
   return (
     <CatalogWrapper>
+      <div>
+        <h1>Integrate design patterns directly into your project website and documentation.</h1>
+        <h4>Make it easy for users to see how your project's design works in practice.</h4>
+      </div>
       <Container className="catalog-container">
         <div className="patterns">
           <p className="caption descr">
diff --git a/src/sections/Playground/playground-features.js b/src/sections/Playground/playground-features.js
index f4b83a2bdb60..7b8d38286ee3 100644
--- a/src/sections/Playground/playground-features.js
+++ b/src/sections/Playground/playground-features.js
@@ -83,6 +83,8 @@ const PlaygroundFeatures = () => {
     <PlaygroundFeaturesWrapper>
       <h1>In the Playground, you can...</h1>
       <hr style={{ width: "20%", backgroundColor: "#00b39f", height: "4px", border: "0" }} />
+      <h4><strong>Illustrate key concepts with visuals. </strong>
+        <br/>Use diagrams, charts, or images to help users grasp complex ideas quickly.</h4>
       <div className="feature">
         <div className="feature-text">
           <h2>Design architecture diagrams </h2>