diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
index 812a4fb29d..72a080e842 100644
--- a/apps/www/app/(app)/page.tsx
+++ b/apps/www/app/(app)/page.tsx
@@ -10,8 +10,8 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
+import CardsNewYork from "@/registry/new-york/example/cards"
 import { Button } from "@/registry/new-york/ui/button"
-import MailPage from "@/app/(app)/examples/mail/page"
 
 export default function IndexPage() {
   return (
@@ -41,24 +41,22 @@ export default function IndexPage() {
       <ExamplesNav className="[&>a:first-child]:text-primary" />
       <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
         <Image
-          src="/examples/mail-dark.png"
+          src="/examples/cards-light.png"
           width={1280}
-          height={727}
-          alt="Mail"
-          className="hidden dark:block"
-        />
-        <Image
-          src="/examples/mail-light.png"
-          width={1280}
-          height={727}
-          alt="Mail"
+          height={1214}
+          alt="Cards"
           className="block dark:hidden"
         />
+        <Image
+          src="/examples/cards-dark.png"
+          width={1280}
+          height={1214}
+          alt="Cards"
+          className="hidden dark:block"
+        />
       </section>
-      <section className="hidden md:block">
-        <div className="overflow-hidden rounded-lg border bg-background shadow">
-          <MailPage />
-        </div>
+      <section className="hidden md:block [&>div]:p-0">
+        <CardsNewYork />
       </section>
     </div>
   )
diff --git a/apps/www/components/examples-nav.tsx b/apps/www/components/examples-nav.tsx
index 95d6553119..c0d72eb84a 100644
--- a/apps/www/components/examples-nav.tsx
+++ b/apps/www/components/examples-nav.tsx
@@ -8,6 +8,11 @@ import { cn } from "@/lib/utils"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
 
 const examples = [
+  {
+    name: "Examples",
+    href: "/",
+    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
+  },
   {
     name: "Mail",
     href: "/examples/mail",
diff --git a/apps/www/registry/new-york/example/cards/chat.tsx b/apps/www/registry/new-york/example/cards/chat.tsx
index ccb8f596ae..5d839d3a18 100644
--- a/apps/www/registry/new-york/example/cards/chat.tsx
+++ b/apps/www/registry/new-york/example/cards/chat.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { CheckIcon, PaperPlaneIcon, PlusIcon } from "@radix-ui/react-icons"
 
diff --git a/apps/www/registry/new-york/example/cards/metric.tsx b/apps/www/registry/new-york/example/cards/metric.tsx
index 8b788c2f78..e9d6e7f545 100644
--- a/apps/www/registry/new-york/example/cards/metric.tsx
+++ b/apps/www/registry/new-york/example/cards/metric.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useTheme } from "next-themes"
 import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"
 
diff --git a/apps/www/registry/new-york/example/cards/stats.tsx b/apps/www/registry/new-york/example/cards/stats.tsx
index 450d06d1aa..a676ccff01 100644
--- a/apps/www/registry/new-york/example/cards/stats.tsx
+++ b/apps/www/registry/new-york/example/cards/stats.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useTheme } from "next-themes"
 import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts"