diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..e5c36de
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import Link from "next/link"
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import { useMedusaCart } from "@/hooks/useMedusaCart"
+import Button from "@/components/ui/Button"
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/Card"
+import HeroSection from "@/components/sections/HeroSection"
+import ExclusiveSuitesSection from "@/components/sections/ExclusiveSuitesSection"
+import MoltenRockStorySection from "@/components/sections/MoltenRockStorySection"
+import BespokeExperiencesSection from "@/components/sections/BespokeExperiencesSection"
+import MoltenRockCampaignsSection from "@/components/sections/MoltenRockCampaignsSection"
+import SafariGallerySection from "@/components/sections/SafariGallerySection"
+import BushChronicleSection from "@/components/sections/BushChronicleSection"
+import DiscerningGuestVoicesSection from "@/components/sections/DiscerningGuestVoicesSection"
+import ExclusiveBookingCtaSection from "@/components/sections/ExclusiveBookingCtaSection"
+import SanctuaryLocationSection from "@/components/sections/SanctuaryLocationSection"
+import GuestEnquirySection from "@/components/sections/GuestEnquirySection"
+
+export default function HomePage() {
+  const { products, loading, error } = useMedusaProducts(4)
+  const { addToCart } = useMedusaCart()
+
+  const handleAddToBooking = (variantId: string) => {
+    addToCart(variantId, 1)
+  }
+
+  return (
+    <main>
+      <HeroSection />
+
+      {/* Room Preview Section */}
+      <section className="py-16 px-4 bg-[#f2f4f5]">
+        <div className="max-w-7xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-[#36454F] mb-8">
+            Exclusive Suites Preview
+          </h2>
+          {loading && (
+            <p className="text-[#1f2b33]">Curating our finest accommodations...</p>
+          )}
+          {error && (
+            <p className="text-red-600">Unable to load suite details at this moment</p>
+          )}
+          {!loading && !error && products.length === 0 && (
+            <p className="text-[#1f2b33]">
+              No suites available right now. Contact our concierge for bespoke arrangements.
+            </p>
+          )}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-8">
+            {products.map((product) => (
+              <Card key={product.id} className="border-[#d4dadd]">
+                <CardHeader>
+                  {product.thumbnail && (
+                    <img
+                      src={product.thumbnail}
+                      alt={product.title}
+                      className="w-full h-48 object-cover rounded-t-lg"
+                    />
+                  )}
+                  <CardTitle className="text-[#36454F]">{product.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-[#1f2b33]">
+                    {product.description?.substring(0, 100)}...
+                  </p>
+                  <p className="text-[#16a34a] font-bold mt-2">
+                    {product.variants?.[0]?.prices?.[0]?.currency_code}{" "}
+                    {(product.variants?.[0]?.prices?.[0]?.amount / 100).toLocaleString()}
+                  </p>
+                </CardContent>
+                <CardFooter className="flex justify-between items-center">
+                  <Button
+                    variant="secondary"
+                    onClick={() => handleAddToBooking(product.variants?.[0].id)}
+                  >
+                    Add to Booking
+                  </Button>
+                  <Link href="/rooms">
+                    <Button variant="default">Book Now</Button>
+                  </Link>
+                </CardFooter>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <ExclusiveSuitesSection />
+      <MoltenRockStorySection />
+      <BespokeExperiencesSection />
+      <MoltenRockCampaignsSection />
+      <SafariGallerySection />
+      <BushChronicleSection />
+      <DiscerningGuestVoicesSection />
+      <ExclusiveBookingCtaSection />
+      <SanctuaryLocationSection />
+      <GuestEnquirySection />
+    </main>
+  )
+}