diff --git a/src/components/sections/FeaturedCollectionSection.tsx b/src/components/sections/FeaturedCollectionSection.tsx
new file mode 100644
index 0000000..8d15f13
--- /dev/null
+++ b/src/components/sections/FeaturedCollectionSection.tsx
@@ -0,0 +1,107 @@
+'use client'
+
+import Link from "next/link"
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import { Card, CardContent } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  zar: "R",
+  usd: "$",
+  eur: "\u20AC",
+  gbp: "\u00A3",
+}
+
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? "").toLowerCase()] ?? (code?.toUpperCase() ?? "")
+  return `${sym}${(amount / 100).toFixed(2)}`
+}
+
+export default function FeaturedCollectionSection() {
+  const { products, isLoading, error } = useMedusaProducts(8)
+
+  return (
+    <section data-vula-section="featuredcollection" id="featured-collection" className="bg-[#121212] py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 text-center">
+          <h2 className="text-3xl font-bold text-[#F5F5F5] md:text-4xl">
+            Featured Collection
+          </h2>
+          <p className="mt-2 text-[#F5F5F5]/60">
+            8 standout tees designed for the streets
+          </p>
+        </div>
+
+        {isLoading && (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {[...Array(4)].map((_, i) => (
+              <div
+                key={i}
+                className="animate-pulse rounded-xl bg-white/10"
+              >
+                <div className="h-48 w-full rounded-t-xl bg-white/10" />
+                <div className="space-y-2 p-5">
+                  <div className="h-4 w-3/4 rounded bg-white/10" />
+                  <div className="h-4 w-1/2 rounded bg-white/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-400">Failed to load products.</p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {products?.slice(0, 8).map((product) => {
+              const price = product.variants?.[0]?.prices?.[0]
+              return (
+                <Link
+                  key={product.id}
+                  href={`/products/${product.id}`}
+                  className="group block"
+                >
+                  <Card className="overflow-hidden bg-white transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-lg">
+                    <div className="aspect-[4/3] overflow-hidden">
+                      {product.thumbnail ? (
+                        <img
+                          src={product.thumbnail}
+                          alt={product.title}
+                          className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+                        />
+                      ) : (
+                        <div className="flex h-full w-full items-center justify-center bg-gray-200">
+                          <span className="text-4xl text-gray-400">T</span>
+                        </div>
+                      )}
+                    </div>
+                    <CardContent className="p-5">
+                      <h3 className="text-sm font-semibold text-[#111827] truncate">
+                        {product.title}
+                      </h3>
+                      {price && (
+                        <p className="mt-1 text-sm text-[#4A9EFF]">
+                          {formatPrice(price.amount, price.currency_code)}
+                        </p>
+                      )}
+                    </CardContent>
+                  </Card>
+                </Link>
+              )
+            })}
+          </div>
+        )}
+
+        <div className="mt-12 text-center">
+          <Link href="/products" passHref>
+            <Button variant="secondary" size="lg">
+              View All Tees
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}