diff --git a/apps/website/src/app/components/invoice/page.tsx b/apps/website/src/app/components/invoice/page.tsx
new file mode 100644
index 000000000..d8913d5db
--- /dev/null
+++ b/apps/website/src/app/components/invoice/page.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "React PDF Invoice Template | Midday",
+  description: "A React PDF invoice template with Tiptap JSON support.",
+};
+
+export default function Page() {
+  return (
+    <div className="container mt-24 max-w-[540px]">
+      <div className="mt-8">
+        <div className="border bg-card text-card-foreground shadow-sm">
+          <div className="flex flex-col space-y-1.5 p-6">
+            <h3 className="text-xl font-medium">Use Midday Invoice Template</h3>
+            <p className="text-sm text-[#878787]">
+              Get started with our powerful React PDF invoice template
+            </p>
+          </div>
+          <div className="p-6 pt-0">
+            <a
+              href="https://go.midday.ai/editor-code"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+            >
+              View implementation
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/website/src/app/components/page.tsx b/apps/website/src/app/components/page.tsx
index 812da921f..42a04e134 100644
--- a/apps/website/src/app/components/page.tsx
+++ b/apps/website/src/app/components/page.tsx
@@ -32,8 +32,8 @@ const components = [
     name: "PDF Template",
     description: "A React PDF template supporting Tiptap JSON and more.",
     image: pdf,
-    href: "/components",
-    ready: false,
+    href: "/components/invoice",
+    ready: true,
   },
 ];
 
@@ -41,7 +41,7 @@ export default function Page() {
   return (
     <div className="container mb-52">
       <div className="mb-40">
-        <h1 className="mt-24 font-medium text-center text-[75px] md:text-[170px] mb-2 leading-none text-stroke">
+        <h1 className="mt-24 font-medium text-center text-[55px] md:text-[170px] mb-2 leading-none text-stroke">
           Components
         </h1>