diff --git a/src/components/SectionGridAuthorBox.tsx b/src/components/SectionGridAuthorBox.tsx
new file mode 100644
index 0000000..23ad1a7
--- /dev/null
+++ b/src/components/SectionGridAuthorBox.tsx
@@ -0,0 +1,54 @@
+import CardAuthorBox from "@/components/CardAuthorBox";
+import CardAuthorBox2 from "@/components/CardAuthorBox2";
+import Heading from "@/shared/Heading";
+import { DEMO_AUTHORS } from "@/data/authors";
+import { AuthorType } from "@/data/types";
+import React, { FC } from "react";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+
+export interface SectionGridAuthorBoxProps {
+  className?: string;
+  authors?: AuthorType[];
+  boxCard?: "box1" | "box2";
+  gridClassName?: string;
+}
+
+const DEMO_DATA = DEMO_AUTHORS.filter((_, i) => i < 10);
+
+const SectionGridAuthorBox: FC<SectionGridAuthorBoxProps> = ({
+  className = "",
+  authors = DEMO_DATA,
+  boxCard = "box1",
+  gridClassName = "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 ",
+}) => {
+  return (
+    <div
+      className={`nc-SectionGridAuthorBox relative ${className}`}
+      data-nc-id="SectionGridAuthorBox"
+    >
+      <Heading desc="Rating based on customer reviews" isCenter>
+        Top 10 author of the month
+      </Heading>
+      <div className={`grid gap-6 md:gap-8 ${gridClassName}`}>
+        {authors.map((author, index) =>
+          boxCard === "box2" ? (
+            <CardAuthorBox2 key={author.id} author={author} />
+          ) : (
+            <CardAuthorBox
+              index={index < 3 ? index + 1 : undefined}
+              key={author.id}
+              author={author}
+            />
+          )
+        )}
+      </div>
+      <div className="mt-16 flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-5">
+        <ButtonSecondary loading>Show me more </ButtonSecondary>
+        <ButtonPrimary>Become a host</ButtonPrimary>
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridAuthorBox;