diff --git a/apps/roboshield/payload-types.ts b/apps/roboshield/payload-types.ts
index c2caf7ae0..03c3da4e1 100644
--- a/apps/roboshield/payload-types.ts
+++ b/apps/roboshield/payload-types.ts
@@ -55,6 +55,7 @@ export interface Page {
             blockName?: string | null;
             blockType: "page-header";
           }
+        | PageHero
         | {
             content?:
               | (
@@ -248,6 +249,26 @@ export interface Page {
   createdAt: string;
   _status?: ("draft" | "published") | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "PageHero".
+ */
+export interface PageHero {
+  heroHeaders?:
+    | {
+        headingType?: ("largeHeading" | "subHeading" | "rotatingText") | null;
+        title?: string | null;
+        id?: string | null;
+      }[]
+    | null;
+  heroDescriptiveText: {
+    [k: string]: unknown;
+  }[];
+  heroButtonText?: string | null;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: "page-hero";
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
diff --git a/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx b/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx
index fb633bc12..840e14003 100644
--- a/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx
+++ b/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx
@@ -2,6 +2,7 @@ import PageHeader from "@/roboshield/components/PageHeader";
 import Content from "@/roboshield/components/Content";
 import Statistics from "@/roboshield/components/Statistics";
 import { Page } from "@/root/payload-types";
+import Hero from "@/roboshield/components/Hero";
 import RoboForm from "@/roboshield/components/RoboForm";
 import { FC } from "react";
 
@@ -9,6 +10,7 @@ interface BlockRendererProps extends Pick<Page, "blocks"> {}
 
 const components = {
   "page-header": PageHeader,
+  "page-hero": Hero,
   content: Content,
   statistics: Statistics,
   "robo-form": RoboForm,
diff --git a/apps/roboshield/src/components/Hero/Hero.tsx b/apps/roboshield/src/components/Hero/Hero.tsx
index 0e5fb4374..43117fb7b 100644
--- a/apps/roboshield/src/components/Hero/Hero.tsx
+++ b/apps/roboshield/src/components/Hero/Hero.tsx
@@ -1,14 +1,13 @@
+import RichText from "@/roboshield/components/RichText";
 import { Section } from "@commons-ui/core";
 import { RichTypography } from "@commons-ui/next";
 import { Box, Button, Typography } from "@mui/material";
 import React from "react";
 import ReactRotatingText from "react-rotating-text";
+import { Theme } from "@mui/material";
+import { PageHero } from "@/root/payload-types";
 
-interface props {
-  scrolRef: React.RefObject<HTMLDivElement>;
-}
-
-const Hero = ({ scrolRef }: props) => {
+const Hero = (props: PageHero) => {
   return (
     <Box
       component="section"
@@ -22,84 +21,97 @@ const Hero = ({ scrolRef }: props) => {
       }}
     >
       <Section>
-        <Typography
-          color="text.secondary"
-          gutterBottom
-          typography="h6"
-          variant="h2"
-        >
-          CONTROL YOUR DATA
-        </Typography>
+        {props.heroHeaders?.map((header) => (
+          <div key={header.id}>
+            {header.headingType === "subHeading" && (
+              <Typography
+                key={header.id}
+                color="text.secondary"
+                gutterBottom
+                typography="h6"
+                variant="h2"
+              >
+                {header.title}
+              </Typography>
+            )}
+            {header.headingType === "largeHeading" && (
+              <Typography
+                color="text.secondary"
+                gutterBottom
+                textAlign="center"
+                variant="h1"
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                {header.title}
+              </Typography>
+            )}
+            {header.headingType === "rotatingText" && (
+              <Typography
+                color="text.secondary"
+                gutterBottom
+                textAlign="center"
+                variant="h1"
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Box
+                  component="span"
+                  sx={{
+                    backgroundColor: "red",
+                    color: "text.secondary",
+                    maxWidth: "fit-content",
+                    p: "6px 20px",
+                    textTransform: "capitalize",
+                  }}
+                >
+                  <ReactRotatingText
+                    items={header?.title?.split(",").map((part) => part.trim())}
+                    cursor={false}
+                    eraseMode="overwrite"
+                  />
+                </Box>
+              </Typography>
+            )}
+          </div>
+        ))}
 
-        <Typography
+        <RichText
           color="text.secondary"
-          gutterBottom
-          my={{
-            xs: 3,
-            md: 5,
-          }}
-          textAlign="center"
-          variant="h1"
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          Guard Your
-          <Box
-            component="span"
-            sx={{
-              backgroundColor: "red",
+          typographyProps={{
+            LinkProps: {
               color: "text.secondary",
-              maxWidth: "fit-content",
-              my: {
-                xs: 0.5,
-                md: 1,
+              sx: {
+                textDecorationColor: "text.secondary",
               },
-              p: "6px 20px",
-              textTransform: "capitalize",
-            }}
-          >
-            <ReactRotatingText
-              items={["website", "blog", "content"]}
-              cursor={false}
-              eraseMode="overwrite"
-            />
-          </Box>
-          Against AI Bots
-        </Typography>
-
-        <RichTypography
-          LinkProps={{
-            color: "text.secondary",
+            },
+            variant: "h6",
           }}
-          color="text.secondary"
-          typography="h6"
-          variant="h3"
-          sx={{
-            "& .robots": {
+          sx={(theme: Theme) => ({
+            a: {
               textDecoration: "none",
+              padding: "0.5em",
+              margin: "0.5em",
+              border: "1px solid",
               borderColor: "text.secondary",
-              border: 1,
-              p: 0.5,
-            },
-            "& .robots:before": {
-              fill: "white",
-              content: "url('/icons/smarttoy-24-white.svg')",
-              display: "inline-block",
-              pr: 0.5,
-              height: "26.95px", // line-height of typography (h6)
-              verticalAlign: "middle",
             },
-          }}
-        >
-          {`Generate a <a href="https://en.wikipedia.org/wiki/Robots.txt" class="robots">robots.txt</a> file tailored to the platform you use to publish your content online and blocks AI bots`}
-        </RichTypography>
+            mt: "2.5em",
+          })}
+          elements={props.heroDescriptiveText}
+        />
+
         <Button
           onClick={() => {
-            scrolRef.current?.scrollIntoView({
+            const element = document.getElementById("robots-generator");
+            element?.scrollIntoView({
               behavior: "smooth",
             });
           }}
@@ -112,7 +124,7 @@ const Hero = ({ scrolRef }: props) => {
             },
           }}
         >
-          Get Started
+          {props.heroButtonText}
         </Button>
       </Section>
     </Box>
diff --git a/apps/roboshield/src/lib/data/payload.types.ts b/apps/roboshield/src/lib/data/payload.types.ts
new file mode 100644
index 000000000..f4548605c
--- /dev/null
+++ b/apps/roboshield/src/lib/data/payload.types.ts
@@ -0,0 +1,120 @@
+interface TextNode {
+  children: TextNode | null;
+  text?: string;
+}
+
+interface BreadCrumbs {
+  doc: string;
+  url: string;
+  label: string;
+  id: string;
+}
+
+interface Document {
+  id: string;
+  title: string;
+  fullTitle: string;
+  slug: string;
+  blocks: any[];
+  meta: any;
+  breadcrumbs: BreadCrumbs[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface Link {
+  label: string;
+  linkType: string;
+  doc: {
+    value: Document;
+  };
+  relationTo: string;
+}
+
+interface SocialMediaLink {
+  platform: string;
+  url: string;
+  id: string;
+}
+
+interface StayInTouchData {
+  title: string;
+  links: SocialMediaLink[];
+}
+
+interface HeroHeader {
+  headingType: string;
+  title: string;
+  id: string;
+}
+
+export interface MediaData {
+  id: string;
+  alt?: string | null;
+  prefix: string;
+  filename: string;
+  mimeType: string;
+  filesize: number;
+  width: number;
+  height: number;
+  createdAt: string;
+  updatedAt: string;
+  url: string | null;
+  src: string | null;
+}
+
+export interface Partner {
+  logo: MediaData;
+  name: string;
+  url: string;
+}
+export interface Settings {
+  title: string;
+  description: TextNode;
+  connect: StayInTouchData;
+  primaryLogo: MediaData;
+  secondaryLogo: MediaData;
+  primaryNavigation: {
+    menus: Link[];
+    connect: string;
+  };
+  secondaryNavigation: {
+    menus: Link[];
+  };
+  newsletter: {
+    title: string;
+    embedCode: string;
+  };
+  initiative: {
+    partners: Partner[];
+    title: string;
+    description: TextNode;
+  };
+  heroButtonText: string;
+  heroDescriptiveText: string;
+  heroHeaders: HeroHeader[];
+}
+
+export interface CollectionQuery {
+  collection: string;
+  depth: number;
+  page: number;
+  limit: number;
+  pagination: boolean;
+  where: Record<string, any>;
+  sort: string;
+  locale: string;
+  fallbackLocale: boolean | string;
+  user: string;
+  overrideAccess: boolean;
+  showHiddenFields: boolean;
+}
+
+export interface Api {
+  createCollection: (...args: any) => Promise<any>;
+  deleteCollection: (...args: any) => Promise<any>;
+  findGlobal: (...args: any) => Promise<any>;
+  findPage: (...args: any) => Promise<any>;
+  getCollection: (...args: any) => Promise<any>;
+  updateCollection: (...args: any) => Promise<any>;
+}
diff --git a/apps/roboshield/src/payload/blocks/PageHero.ts b/apps/roboshield/src/payload/blocks/PageHero.ts
new file mode 100644
index 000000000..3aa4e64f3
--- /dev/null
+++ b/apps/roboshield/src/payload/blocks/PageHero.ts
@@ -0,0 +1,69 @@
+import { Block } from "payload/types";
+import richText from "../fields/richText";
+import { RowLabelArgs } from "payload/dist/admin/components/forms/RowLabel/types";
+
+export const PageHero: Block = {
+  slug: "page-hero",
+  labels: {
+    singular: "Page Hero",
+    plural: "Page Hero",
+  },
+  interfaceName: "PageHero",
+  fields: [
+    {
+      name: "heroHeaders",
+      type: "array",
+      label: "Hero Components",
+      minRows: 3,
+      maxRows: 4,
+      labels: {
+        singular: "Header",
+        plural: "Headers",
+      },
+      fields: [
+        {
+          name: "headingType",
+          label: "Heading Type",
+          type: "select",
+          hasMany: false,
+          options: [
+            {
+              label: "Large Heading",
+              value: "largeHeading",
+            },
+            {
+              label: "Sub Heading",
+              value: "subHeading",
+            },
+            {
+              label: "Heading with rotating text",
+              value: "rotatingText",
+            },
+          ],
+        },
+        {
+          name: "title",
+          type: "text",
+          label: "Content",
+        },
+      ],
+      admin: {
+        components: {
+          RowLabel: ({ data, index }: RowLabelArgs) => {
+            return data?.title || `Header ${String(index).padStart(2, "0")}`;
+          },
+        },
+      },
+    },
+    richText({
+      name: "heroDescriptiveText",
+      required: true,
+      label: "Descriptive Text",
+    }),
+    {
+      name: "heroButtonText",
+      type: "text",
+      label: "Call to Action Button Text",
+    },
+  ],
+};
diff --git a/apps/roboshield/src/payload/collections/Pages.ts b/apps/roboshield/src/payload/collections/Pages.ts
index ff9cb1209..77b935f46 100644
--- a/apps/roboshield/src/payload/collections/Pages.ts
+++ b/apps/roboshield/src/payload/collections/Pages.ts
@@ -3,6 +3,7 @@ import fullTitle from "../fields/fullTitle";
 import slug from "../fields/slug";
 import RoboForm from "../blocks/RoboForm";
 import { PageHeader } from "../blocks/PageHeader";
+import { PageHero } from "../blocks/PageHero";
 import { Content } from "../blocks/Content";
 import { Statistics } from "../blocks/Statistics";
 
@@ -29,7 +30,7 @@ const Pages: CollectionConfig = {
     {
       name: "blocks",
       type: "blocks",
-      blocks: [PageHeader, Content, Statistics, RoboForm],
+      blocks: [PageHeader, PageHero, Content, Statistics, RoboForm],
       localized: true,
       admin: {
         initCollapsed: true,