diff --git a/packages/ui/PageHeader/index.tsx b/packages/ui/PageHeader/index.tsx
index 77005ef9eb..fa8f929e97 100644
--- a/packages/ui/PageHeader/index.tsx
+++ b/packages/ui/PageHeader/index.tsx
@@ -1,6 +1,6 @@
 import { cn } from "@formbricks/lib/cn";
 
-interface PageHeaderProps {
+export interface PageHeaderProps {
   pageTitle: string;
   cta?: React.ReactNode;
   children?: React.ReactNode;
diff --git a/packages/ui/PageHeader/stories.tsx b/packages/ui/PageHeader/stories.tsx
new file mode 100644
index 0000000000..2555fa32d6
--- /dev/null
+++ b/packages/ui/PageHeader/stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../v2/Button";
+import { PageHeader } from "./index";
+
+const meta = {
+  title: "ui/PageHeader",
+  component: PageHeader,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The **PageHeader** component is used to provide a styled header section for a page. It includes a title and optional call to action (CTA) button. Additional content can be included below the header.
+     `,
+      },
+    },
+  },
+  argTypes: {
+    cta: { control: "text" },
+    children: { control: "text" },
+  },
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    pageTitle: "Page Title",
+    cta: <Button>Call to Action</Button>,
+    children: <p className="text-slate-600">This is some additional content below the header.</p>,
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    pageTitle: "Page Title",
+  },
+};
+
+export const WithCTA: Story = {
+  args: {
+    pageTitle: "Page Title",
+    cta: <Button>Call to Action</Button>,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    pageTitle: "Page Title",
+    children: <p className="text-slate-600">This is some additional content below the header.</p>,
+  },
+};