diff --git a/apps/demo/src/components/Layout.astro b/apps/demo/src/components/Layout.astro
new file mode 100644
index 0000000..3a01966
--- /dev/null
+++ b/apps/demo/src/components/Layout.astro
@@ -0,0 +1,30 @@
+---
+import Nav from "./Nav.astro";
+
+export interface Props {
+  title: string;
+  theme?: "dark" | "light";
+}
+const { theme = "light", title } = Astro.props;
+---
+
+<html lang="en" class={theme}>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title} | Astro Reactive Demo</title>
+  </head>
+  <body class={theme}>
+    <Nav />
+    <h1>{title}</h1>
+    <slot />
+  </body>
+  <style>
+    html.dark,
+    body.dark {
+      color-scheme: dark;
+    }
+  </style>
+</html>
diff --git a/apps/demo/src/pages/examples/form-component.astro b/apps/demo/src/pages/examples/form-component.astro
index 69c1a9b..30428b1 100644
--- a/apps/demo/src/pages/examples/form-component.astro
+++ b/apps/demo/src/pages/examples/form-component.astro
@@ -1,6 +1,7 @@
 ---
 import type { Submit } from "@astro-reactive/common";
 import Form, { FormGroup } from "@astro-reactive/form";
+import Layout from "../../components/Layout.astro";
 
 const simpleForm = new FormGroup([
   {
@@ -75,8 +76,10 @@ const submitControl: Submit = {
 };
 ---
 
-<h2>Simple Form</h2>
-<Form formGroups={simpleForm} submitControl={submitControl} />
+<Layout title="Form API examples">
+  <h2>Simple Form</h2>
+  <Form formGroups={simpleForm} submitControl={submitControl} />
 
-<h2>Form with nested form groups</h2>
-<Form formGroups={[nameForm, skills]} />
+  <h2>Form with nested form groups</h2>
+  <Form formGroups={[nameForm, skills]} />
+</Layout>
diff --git a/apps/demo/src/pages/examples/index.astro b/apps/demo/src/pages/examples/index.astro
index 81a1096..db32788 100644
--- a/apps/demo/src/pages/examples/index.astro
+++ b/apps/demo/src/pages/examples/index.astro
@@ -1,7 +1,9 @@
 ---
+import Layout from "../../components/Layout.astro";
 ---
 
-<h1>Docs Examples</h1>
-<ul>
-  <li><a href="./examples/form-component">Form Component</a></li>
-</ul>
+<Layout title="Docs Examples">
+  <ul>
+    <li><a href="./examples/form-component">Form Component</a></li>
+  </ul>
+</Layout>
diff --git a/apps/demo/src/pages/index.astro b/apps/demo/src/pages/index.astro
index 488a307..64fd430 100644
--- a/apps/demo/src/pages/index.astro
+++ b/apps/demo/src/pages/index.astro
@@ -1,11 +1,11 @@
 ---
-import Nav from "../components/Nav.astro";
 import Form, {
   ControlConfig,
   FormGroup,
   FormControl,
 } from "@astro-reactive/form";
 import { Validators } from "@astro-reactive/validator";
+import Layout from "../components/Layout.astro";
 
 const form = new FormGroup([
   {
@@ -86,26 +86,10 @@ form.get("is-awesome")?.setValue("checked");
 form.get("email")?.setValue("invalid-email");
 
 // switch between light and dark mode
+const title = "Form Demo";
 const theme = "dark";
 ---
 
-<html lang="en" class={theme}>
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Astro</title>
-  </head>
-  <body class={theme}>
-    <Nav />
-    <h1>Astro Reactive Form</h1>
-    <Form showValidationHints={true} formGroups={form} theme={theme} />
-    <style>
-      html.dark,
-      body.dark {
-        color-scheme: dark;
-      }
-    </style>
-  </body>
-</html>
+<Layout title={title} theme={theme}>
+  <Form showValidationHints={true} formGroups={form} theme={theme} />
+</Layout>
diff --git a/apps/demo/src/pages/job-application.astro b/apps/demo/src/pages/job-application.astro
index 93033b1..a371884 100644
--- a/apps/demo/src/pages/job-application.astro
+++ b/apps/demo/src/pages/job-application.astro
@@ -1,5 +1,4 @@
 ---
-import Nav from "../components/Nav.astro";
 import Form, {
   ControlConfig,
   FormControl,
@@ -7,6 +6,7 @@ import Form, {
 } from "@astro-reactive/form";
 import { Validators } from "@astro-reactive/validator";
 import type { Submit } from "@astro-reactive/common";
+import Layout from "../components/Layout.astro";
 
 const infoForm = new FormGroup([
   {
@@ -106,8 +106,8 @@ const values = {
   lastName: "Bond",
   email: "james.bond@gmail.com",
   country: "U.S.A",
-  eligible: "yes"
-}
+  eligible: "yes",
+};
 
 infoForm.setValue(values);
 
@@ -117,50 +117,10 @@ skillsForm.name = "Skills";
 skillsForm.controls.push(new FormControl(resume));
 ---
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Astro</title>
-  </head>
-  <body class="bg-gray-100 text-gray-900 tracking-wider leading-normal">
-    <Nav />
-    <!-- Title -->
-    <div class="items-center mt-10">
-      <h1
-        class="items-center text-center font-sans font-bold break-normal text-gray-700 px-2 text-xl mt-12 lg:mt-0 md:text-5xl"
-      >
-        Programmer Job Application
-      </h1>
-    </div>
-
-    <!--Container-->
-    <div
-      class="container w-full flex flex-wrap mx-auto px-2 pt-8 lg:pt-10 mt-4"
-    >
-      <!-- Section -->
-      <section class="w-full">
-        <!-- Header -->
-        <h2
-          id="section1"
-          class="font-sans font-bold break-normal text-gray-700 px-2 pb-4 text-xl"
-        >
-          Enter your information
-        </h2>
-
-        <!-- Form -->
-        <div
-          class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-slate-200"
-        >
-          <Form
-            showValidationHints={true}
-            formGroups={[infoForm, skillsForm]}
-            submitControl={submit}
-          />
-        </div>
-      </section>
-    </div>
-  </body>
-</html>
+<Layout title="Programmer Job Application">
+  <Form
+    showValidationHints={true}
+    formGroups={[infoForm, skillsForm]}
+    submitControl={submit}
+  />
+</Layout>
diff --git a/apps/demo/src/pages/pizza-delivery.astro b/apps/demo/src/pages/pizza-delivery.astro
index af48a83..6f857ea 100644
--- a/apps/demo/src/pages/pizza-delivery.astro
+++ b/apps/demo/src/pages/pizza-delivery.astro
@@ -1,7 +1,7 @@
 ---
-import Nav from "../components/Nav.astro";
 import Form, { FormGroup } from "@astro-reactive/form";
 import { Validators } from "@astro-reactive/validator";
+import Layout from "../components/Layout.astro";
 
 const baseForm = new FormGroup([
   {
@@ -91,20 +91,9 @@ infoForm.name = "Customer Info";
 infoForm.get("contact")?.setValidators([Validators.minLength(9)]);
 ---
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Astro</title>
-  </head>
-  <body>
-    <Nav />
-    <h1>Pizza Form Demo</h1>
-    <Form
-      showValidationHints={true}
-      formGroups={[baseForm, toppingsForm, infoForm]}
-    />
-  </body>
-</html>
+<Layout title="Pizza Form Demo">
+  <Form
+    showValidationHints={true}
+    formGroups={[baseForm, toppingsForm, infoForm]}
+  />
+</Layout>
