diff --git a/src/app/(home)/SectionGridFeatureProperty.tsx b/src/app/(home)/SectionGridFeatureProperty.tsx
new file mode 100644
index 0000000..e2f5abe
--- /dev/null
+++ b/src/app/(home)/SectionGridFeatureProperty.tsx
@@ -0,0 +1,52 @@
+import React, { FC, ReactNode } from "react";
+import { DEMO_STAY_LISTINGS } from "@/data/listings";
+import { StayDataType } from "@/data/types";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import PropertyCardH from "@/components/PropertyCardH";
+import HeaderFilter from "@/components/HeaderFilter";
+
+// OTHER DEMO WILL PASS PROPS
+const DEMO_DATA: StayDataType[] = DEMO_STAY_LISTINGS.filter((_, i) => i < 8);
+//
+export interface SectionGridFeaturePropertyProps {
+  stayListings?: StayDataType[];
+  gridClass?: string;
+  heading?: ReactNode;
+  subHeading?: ReactNode;
+  headingIsCenter?: boolean;
+  tabs?: string[];
+}
+
+const SectionGridFeatureProperty: FC<SectionGridFeaturePropertyProps> = ({
+  stayListings = DEMO_DATA,
+  gridClass = "",
+  heading = "Featured places to stay",
+  subHeading = "Popular places to stay that Chisfis recommends for you",
+  headingIsCenter,
+  tabs = ["New York", "Tokyo", "Paris", "London"],
+}) => {
+  const renderCard = (stay: StayDataType, index: number) => {
+    return <PropertyCardH key={index} className="h-full" data={stay} />;
+  };
+
+  return (
+    <div className="nc-SectionGridFeatureProperty relative">
+      <HeaderFilter
+        tabActive={"New York"}
+        subHeading={subHeading}
+        tabs={tabs}
+        heading={heading}
+      />
+      <div
+        className={`grid gap-6 md:gap-8 grid-cols-1 sm:grid-cols-1 xl:grid-cols-2 ${gridClass}`}
+      >
+        {stayListings.map(renderCard)}
+      </div>
+      <div className="flex mt-16 justify-center items-center">
+        <ButtonPrimary loading>Show me more</ButtonPrimary>
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridFeatureProperty;