diff --git a/src/components/RelatedPicks/index.js b/src/components/RelatedPicks/index.js
new file mode 100644
index 000000000000..6c99749ba21f
--- /dev/null
+++ b/src/components/RelatedPicks/index.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { Container, Wrapper, CardWrapper, CardImageContainer, Image, CardTitle } from "./style";
+
+import { Link } from "gatsby";
+
+const Card = ({ title, imgSrc, redirectLink }) => {
+  return (
+    <>
+      <Link to={redirectLink}>
+        <CardWrapper>
+          <CardImageContainer>
+            <Image src={imgSrc} alt="gcp architecture diagram" />
+          </CardImageContainer>
+          <CardTitle>{title}</CardTitle>
+        </CardWrapper>
+      </Link>
+    </>
+  );
+};
+
+const RelatedPicks = ({ content }) => {
+
+  return (
+    <>
+      <Container>
+        <h2>You may also like</h2>
+        <Wrapper>
+          {
+            content.map(item => (
+              <Card key={item.id} title={item.title} imgSrc={item.imgSrc} redirectLink={item.redirectLink}/>
+            ))
+          }
+        </Wrapper>
+      </Container>
+    </>
+  );
+};
+
+export default RelatedPicks;
\ No newline at end of file
diff --git a/src/components/RelatedPicks/style.js b/src/components/RelatedPicks/style.js
new file mode 100644
index 000000000000..ed7dd1c5d09b
--- /dev/null
+++ b/src/components/RelatedPicks/style.js
@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const Container = styled("div")`
+    max-width: 1170px;
+    margin: 0 auto;
+    padding: 0 1rem;
+`;
+
+export const Wrapper = styled("div")`
+    padding: 2rem 0;
+    display: flex;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+`;
+
+export const CardWrapper = styled("div")`
+    max-width: 365px;
+    background: ${props => props.theme.grey212121ToLinear2};
+    border-radius: 0.25rem;
+    box-shadow: 0px 0px ${props => props.theme.projectShadowsize} ${props => props.theme.green00D3A9ToGreyE6E6E6};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    &:hover {
+        box-shadow: 0px 0px 5px ${props => props.theme.whiteToGreen3C494F};
+    }
+`;
+export const CardImageContainer = styled("div")``;
+export const Image = styled("img")``;
+export const CardTitle = styled("h4")`
+    text-align: center;
+    padding: 2rem 1rem;
+`;
\ No newline at end of file
diff --git a/src/sections/AWS-Diagram/diagram.js b/src/sections/AWS-Diagram/diagram.js
index 8b47c2a66616..c32f384a8dc3 100644
--- a/src/sections/AWS-Diagram/diagram.js
+++ b/src/sections/AWS-Diagram/diagram.js
@@ -6,6 +6,9 @@ import TemplateDark from "../../assets/images/AWS-Diagram/templates-dark.svg";
 import TemplateLight from "../../assets/images/AWS-Diagram/templates.svg";
 import InfrastructureDark from "../../assets/images/AWS-Diagram/infrastructure-dark.svg";
 import InfrastructureLight from "../../assets/images/AWS-Diagram/infrastructure-light.svg";
+import RelatedPicks from "../../components/RelatedPicks";
+import GCPDiagramDark from "../GCP-Diagram/images/gcp-diagram-dark.svg";
+import GCPDiagramLight from "../GCP-Diagram/images/gcp-diagram-light.svg";
 
 const DiagramWrapper = styled.div`
   min-height: fit-content;
@@ -128,6 +131,14 @@ const DiagramWrapper = styled.div`
 const Aws = () => {
 
   const { isDark } = useStyledDarkMode();
+  const content = [
+    {
+      id: 1,
+      title: "GCP architecture diagram",
+      redirectLink: "/cloud-native-management/generate-gcp-architecture-diagram",
+      imgSrc: isDark ? GCPDiagramDark : GCPDiagramLight,
+    }
+  ];
 
   return (
     <DiagramWrapper>
@@ -139,27 +150,27 @@ const Aws = () => {
             </div>
           </Col>
           <Col md={6} className="diagram-detail">
-            <h1 className="heading">AWS architectural diagrams tailored to meet any requirement</h1>
+            <h2 className="heading">AWS architectural diagrams tailored to meet any requirement</h2>
             <b className="sub-heading">Extensive AWS Icon Library </b>
             <p className="caption">
-            Utilize a vast and continually expanding collection of AWS icons for creating globally comprehensible diagrams that are authentic and up-to-date.
+              Utilize a vast and continually expanding collection of AWS icons for creating globally comprehensible diagrams that are authentic and up-to-date.
             </p>
             <b className="sub-heading">Cost-Effective Solutions </b>
             <p className="caption">
-            AWS architecture diagrams offer economic benefits by presenting the entire system in one diagram, allowing the team to identify bottlenecks and their respective solutions.
+              AWS architecture diagrams offer economic benefits by presenting the entire system in one diagram, allowing the team to identify bottlenecks and their respective solutions.
             </p>
           </Col>
         </Row>
         <Row className="catalog">
           <Col md={6} className="diagram-detail">
-            <h1 className="heading">Designing AWS diagrams is effortless</h1>
+            <h2 className="heading">Designing AWS diagrams is effortless</h2>
             <b className="sub-heading">Quick-start templates </b>
             <p className="caption">
-            Get started quickly with our ready-to-use templates. Effortlessly create your AWS architecture diagrams using these professional templates. They are fully customizable and available for free download.
+              Get started quickly with our ready-to-use templates. Effortlessly create your AWS architecture diagrams using these professional templates. They are fully customizable and available for free download.
             </p>
             <b className="sub-heading">User-friendly editor </b>
             <p className="caption">
-            Create AWS diagrams effortlessly with an intuitive layout and interface. Benefit from intelligent auto-adjustment, drag-and-drop functionality, and a comprehensive toolkit for quick diagram creation in minutes.
+              Create AWS diagrams effortlessly with an intuitive layout and interface. Benefit from intelligent auto-adjustment, drag-and-drop functionality, and a comprehensive toolkit for quick diagram creation in minutes.
             </p>
           </Col>
           <Col md={6} className="diagram-image">
@@ -168,6 +179,7 @@ const Aws = () => {
             </div>
           </Col>
         </Row>
+        <RelatedPicks content={content} />
       </Container>
     </DiagramWrapper>
   );
diff --git a/src/sections/AWS-Diagram/header.js b/src/sections/AWS-Diagram/header.js
index c7b1949a8891..e0a7bdf8f9db 100644
--- a/src/sections/AWS-Diagram/header.js
+++ b/src/sections/AWS-Diagram/header.js
@@ -7,82 +7,105 @@ import AWSCardLight from "../../assets/images/AWS-Diagram/aws.svg";
 import Button from "../../reusecore/Button";
 
 const CatalogHeaderWrapper = styled.div`
-  .cloud-native-catalog.header {
-    min-height: 40rem;
-    background: ${({ theme }) => theme.linearToGreen};
+.cloud-native-catalog.header {
+  background: ${({ theme }) => theme.linearToGreen};
+  padding: 6rem 1rem;
+  display: flex;
+  align-items: center;
+  align-content: space-between;
+  flex-direction: column;
+  justify-content: center;
+  .header__detail {
     display: flex;
-    align-items: center;
-    align-content: space-between;
     flex-direction: column;
+  }
+  .header__title {
+    color: ${(props) => props.theme.primaryColor};
+    padding-right: 80px;
+    margin-bottom: 20px;
+  }
+  .header__title_description {
+    color: ${(props) => props.theme.tertiaryColor};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    font-weight: 400;
+    font-size: 1.438rem;
+    line-height: 2rem;
+    padding-right: 80px;
+    margin-bottom: 30px;
+  }
+  .catalog {
+    display: flex;
     justify-content: center;
-    overflow: hidden;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  @media screen and (max-width: 992px) {
+    padding-bottom: 100px;
+    .catalog {
+      margin: 50px 0 0 0;
+    }
+    .col.catalog {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    padding: 50px 0;
     .header__detail {
       display: flex;
       flex-direction: column;
     }
     .header__title {
-      color: ${(props) => props.theme.primaryColor};
-      padding-right: 80px;
-      margin-bottom: 20px;
+      padding-right: 0;
+      text-align: center;
+      margin-bottom: 10px;
     }
     .header__title_description {
-      color: ${(props) => props.theme.tertiaryColor};
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-      font-weight: 400;
-      font-size: 1.438rem;
-      line-height: 2rem;
-      padding-right: 80px;
-      margin-bottom: 30px;
+      padding-right: 0;
+      text-align: center;
+      margin-bottom: 20px;
     }
-    .catalog {
+    .header__button_section {
       display: flex;
       justify-content: center;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    img {
-      width: 100%;
-      max-width: 100%;
-      height: auto;
-      transform-origin: center; /* Set the transform origin to the center */
-      transform: translateZ(-50px) scale(1.1); /* Adjust translateZ and scale values for the desired parallax effect */
-      transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
     }
+  }
+}
+.col.catalog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    &:hover img {
-      transform: translateZ(0) scale(1); /* Adjust values for hover effect */
-    }
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    transition: transform 0.3s ease-in-out;
+  }
 
-    @media screen and (max-width: 992px) {
-      padding-bottom: 100px;
-      .catalog {
-        margin: 50px 0 0 0;
-      }
+  &:hover {
+    img {
+      transform: scale(1.2); 
     }
+  }
+}
 
-    @media screen and (max-width: 768px) {
-      padding: 50px 0;
-      .header__detail {
-        display: flex;
-        flex-direction: column;
-      }
-      .header__title {
-        padding-right: 0;
-        text-align: center;
-        margin-bottom: 10px;
-      }
-      .header__title_description {
-        padding-right: 0;
-        text-align: center;
-        margin-bottom: 20px;
-      }
-      .header__button_section {
-        display: flex;
-        justify-content: center;
-      }
+@media screen and (min-width: 1300px) {
+  .col.catalog {
+  img{
+    transform: scale(1.2);
+  }
+  &:hover {
+    img {
+      transform: scale(1.3); 
     }
   }
+}
+}
 `;
 
 const Header = () => {
diff --git a/src/sections/AWS-Diagram/index.js b/src/sections/AWS-Diagram/index.js
index 6ecae2e621d1..766b3b0d5d55 100644
--- a/src/sections/AWS-Diagram/index.js
+++ b/src/sections/AWS-Diagram/index.js
@@ -1,12 +1,24 @@
 import React from "react";
-import Header from "./header";
+import FeatureHero from "../FeatureHero";
+// import Header from "./header";
 import Reviews from "../Pricing/review-slider";
 import Diagram from "./diagram";
+import AWSDark from "../../assets/images/AWS-Diagram/aws.svg";
+import AWSLight from "../../assets/images/AWS-Diagram/aws-light.svg";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 
 const AwsDiagramPage = () => {
+  const { isDark } = useStyledDarkMode();
+
+  let data = {
+    heading: "AWS Architecture Diagram Tool",
+    sub_heading: "Create AWS diagrams easily with predefined templates and symbols designed for professionals.",
+    image: isDark ? AWSDark : AWSLight
+  };
   return (
     <>
-      <Header />
+      <FeatureHero data={data} />
+      {/* <Header /> */}
       <Diagram />
       <Reviews />
     </>
diff --git a/src/sections/FeatureHero/featureHero.style.js b/src/sections/FeatureHero/featureHero.style.js
index 4afa7c6856e1..3779f0a984ce 100644
--- a/src/sections/FeatureHero/featureHero.style.js
+++ b/src/sections/FeatureHero/featureHero.style.js
@@ -8,7 +8,10 @@ const FeatureHeroWrapper = styled.div`
     padding: 100px 0 70px;
 
     .section-title {
-      text-align: left;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
 
     .whiteboard-image{
@@ -22,7 +25,8 @@ const FeatureHeroWrapper = styled.div`
 
     #whiteboard-svg {
       transition: transform 0.3s ease-out;
-      transform-origin: top center;
+      transform-origin: bottom center;
+      transform: rotateX(12deg);
     }
 
     .whiteboard-heading {
@@ -30,7 +34,7 @@ const FeatureHeroWrapper = styled.div`
       text-align: center;
       font-size: 4rem;
       font-weight: 600;
-      max-width: 768px;
+      max-width: 965px;
       margin: 0 auto;
       padding: 0 1rem;
     }
@@ -60,7 +64,7 @@ const FeatureHeroWrapper = styled.div`
     text-align: center;
     font-size: 1.75rem;
     line-height: 2.4rem;
-    max-width: 600px;
+    max-width: 965px;
     margin: 1rem auto;
     padding: 0 1rem
   }
@@ -82,7 +86,7 @@ const FeatureHeroWrapper = styled.div`
     }
 
     .whiteboard-heading{
-      font-size: 2rem !important;
+      font-size: 2.5rem !important;
     }
 
     .whiteboard-text {
diff --git a/src/sections/FeatureHero/index.js b/src/sections/FeatureHero/index.js
index 92c2da23174d..90ff785b66bd 100644
--- a/src/sections/FeatureHero/index.js
+++ b/src/sections/FeatureHero/index.js
@@ -1,16 +1,16 @@
 import React, { useEffect } from "react";
 import FeatureHeroWrapper from "./featureHero.style";
 import { Container } from "../../reusecore/Layout";
-
+import Button from "../../reusecore/Button";
 const FeatureHero = (props) => {
-
   useEffect(() => {
     const scrollingImage = document.getElementById("whiteboard-svg");
 
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
-      const translateY = -scrollPosition / 16;
-      scrollingImage.style.transform = `rotateX(${translateY}deg)`;
+      const translateY = scrollPosition / 16;
+      const finalRotateAngle = Math.min(translateY, 12);
+      scrollingImage.style.transform = `rotateX(${12 - finalRotateAngle}deg)`;
     };
 
     window.addEventListener("scroll", handleScroll);
@@ -24,11 +24,15 @@ const FeatureHero = (props) => {
   return (
     <FeatureHeroWrapper>
       <Container className={"heading-container"}>
-        <div className={"section-title"} >
-          <h2 className={"whiteboard-heading"}>
-            {props.data.heading}
-          </h2>
+        <div className={"section-title"}>
+          <h1 className={"whiteboard-heading"}>{props.data.heading}</h1>
           <p className={"whiteboard-text"}>{props.data.sub_heading}</p>
+          <Button
+            primary
+            title="Try Now!"
+            url="https://play.meshery.io"
+            external={true}
+          />
         </div>
         <div className={"whiteboard-image"}>
           <img id={"whiteboard-svg"} src={props.data.image} alt={""} />
@@ -38,4 +42,4 @@ const FeatureHero = (props) => {
   );
 };
 
-export default FeatureHero;
\ No newline at end of file
+export default FeatureHero;
diff --git a/src/sections/GCP-Diagram/diagram.js b/src/sections/GCP-Diagram/diagram.js
index 32698158fb36..db04f0432cb9 100644
--- a/src/sections/GCP-Diagram/diagram.js
+++ b/src/sections/GCP-Diagram/diagram.js
@@ -2,12 +2,13 @@ import React from "react";
 import styled from "styled-components";
 import { Container, Row, Col } from "../../reusecore/Layout";
 import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
-import DragDrop from "./../Meshmap/Meshmap-design/images/drag-drop-components.gif";
 import GCPIconsDark from "./images/gcp-icons-dark.svg";
 import GCPIconsLight from "./images/gcp-icons-light.svg";
 import GCPCatalogDark from "./images/gcp-catalog-dark.svg";
 import GCPCatalogLight from "./images/gcp-catalog-light.svg";
-
+import RelatedPicks from "../../components/RelatedPicks";
+import AWSDiagramDark from "../Home/FeaturesContainer/images/aws.svg";
+import AWSDiagramLight from "../Home/FeaturesContainer/images/aws-light.svg";
 const DiagramWrapper = styled.div`
   min-height: fit-content;
   border-width: 2px 2px 2px 2px;
@@ -129,7 +130,14 @@ const DiagramWrapper = styled.div`
 const Gcp = () => {
 
   const { isDark } = useStyledDarkMode();
-
+  const content = [
+    {
+      id: 1,
+      title: "AWS architecture diagram",
+      redirectLink: "/cloud-native-management/generate-aws-architecture-diagram",
+      imgSrc: isDark ? AWSDiagramDark : AWSDiagramLight,
+    }
+  ];
   return (
     <DiagramWrapper>
       <Container className="diagram-container">
@@ -140,7 +148,7 @@ const Gcp = () => {
             </div>
           </Col>
           <Col lg={6} className="diagram-detail">
-            <h1 className="heading">GCP architectural diagrams tailored to meet any requirement</h1>
+            <h2 className="heading">GCP architectural diagrams tailored to meet any requirement</h2>
             <b className="sub-heading">Extensive GCP Icon Library </b>
             <p className="caption">
             Utilize a vast and continually expanding collection of GCP icons for creating globally comprehensible diagrams that are authentic and up-to-date.
@@ -153,7 +161,7 @@ const Gcp = () => {
         </Row>
         <Row className="catalog">
           <Col md={6} className="diagram-detail">
-            <h1 className="heading">Designing GCP diagrams is effortless</h1>
+            <h2 className="heading">Designing GCP diagrams is effortless</h2>
             <b className="sub-heading">Quick-start templates </b>
             <p className="caption">
             Get started quickly with our ready-to-use templates. Effortlessly create your GCP architecture diagrams using these professional templates. They are fully customizable and available for free download.
@@ -169,6 +177,7 @@ const Gcp = () => {
             </div>
           </Col>
         </Row>
+        <RelatedPicks content={content}/>
       </Container>
     </DiagramWrapper>
   );
diff --git a/src/sections/GCP-Diagram/index.js b/src/sections/GCP-Diagram/index.js
index 8595e9e858fa..17e5b7d88a6d 100644
--- a/src/sections/GCP-Diagram/index.js
+++ b/src/sections/GCP-Diagram/index.js
@@ -1,12 +1,23 @@
 import React from "react";
-import Header from "./header";
+//import Header from "./header";
+import FeatureHero from "../FeatureHero";
+import GCPDiagramDark from "./images/gcp-diagram-dark.svg";
 import Reviews from "../Pricing/review-slider";
 import Diagram from "./diagram";
+import GCPDiagramLight from "./images/gcp-diagram-light.svg";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 
 const GcpDiagramPage = () => {
+  const { isDark } = useStyledDarkMode();
+  let data = {
+    heading: "GCP Architecture Diagram Tool",
+    sub_heading: "Create GCP diagrams easily with predefined templates and symbols designed for professionals.",
+    image: isDark ? GCPDiagramDark : GCPDiagramLight
+  };
   return (
     <>
-      <Header />
+      <FeatureHero data={data} />
+      {/* <Header /> */}
       <Diagram />
       <Reviews />
     </>