diff --git a/contentful/README.md b/contentful/README.md
index 995fc1b..05e4f5c 100644
--- a/contentful/README.md
+++ b/contentful/README.md
@@ -1,12 +1,117 @@
-## Getting Started
+## Description
 
-First, run the development server:
+This is an example front-end app that uses Contentful as its Content Management System. In Contentful, there is a Growthbook app plugin that, once installed, will let your content creators create experiments on their own. This app has an example of how you can take a `Growthbook Experiment` content model and show the right variation to the user.
 
-```bash
-npm run dev
+## Configuration
+
+1. **Setting up Growthbook**
+
+   a. First, create a free [GrowthBook Account](https://www.growthbook.io) and add a new SDK Connection, selecting JavaScript (or React) as the language.
+
+   b. Create a new [datasource](https://docs.growthbook.io/warehouses) and connect it to your data warehouse.
+
+   c. Go to **Settings -> API keys** and create a key with an `admin` role. (This is needed for Contentful to connect to Growthbook and add experiments and feature flags.)
+
+2. **Setting up Contentful**
+
+   a. Next, create a free [Contentful Account](https://www.contentful.com).
+
+   b. Click the gear icon in the upper right and go to **API keys** and create a new API key. (This is used by your front-end app/this example app to connect to Contentful to get the content.)
+
+   c. Also go to the gear icon and click on **CMA tokens** and create a new token. (This is used by a script within this example app to create example Content Models and Content within Contentful without you having to set it up manually.)
+
+   d. Add the Growthbook App to your Contentful Space by going to **Apps -> Marketplace -> A/B tests -> Growthbook** and clicking Install. On the configuration page, enter the URL of your Growthbook instance, the API Key from step 1c, and the Datasource from step 1b. This will create a new content model called `Growthbook Experiment` that you can use to create experiments in Contentful.
+
+3. **Setting up this example app**
+
+   a. Next, in this example root, copy `.env.local.example` to `.env.local` and fill in the values from your GrowthBook SDK Connection (step 1a), the Contentful API key info (step 2b), and the Contentful CMA token (step 2c).
+
+   b. In the terminal run: `npm run create-contentful-content`. This will create the `Growthbook Example Page` and the `Growthbook Example Product` Content Models in Contentful. It will also create a `Growthbook Example Product Page` and four products as Contentful Content.
+
+   c. Run `npm run dev` and go to the [product page](http://localhost:3000) to see the Contentful content.
+
+4. **Pretend to be a Content Editor creating a GB A/B test**
+
+   a. In the Contentful app, go to the **Growthbook Example Product Page**, click the three dots next to the **Control** t-shirt in the Products collection, and click **Remove**.
+
+   b. Click **Add content** and select **Growthbook Experiment** as the Content Type.
+
+   c. Enter `Contentful Example` for the Experiment name.
+
+   d. Click "Add Variation" and select the Link an existing variant option. Select the **Control t-shirt**.
+
+   e. Click "Add Variation" and select the Link an existing variant option. Select the **Variant t-shirt**.
+
+   f. The **Create New Experiment** should now be clickable. Click it.
+
+   g. Click start experiment.
+
+   h. Click **publish**.
+
+   i. Click `<-` to go back to the Product Page.
+
+   j. Click **Publish** on the Product Page.
+
+   k. Go to the [product page](http://localhost:3000) to see which content Growthbook has chosen to show. As this example initialized Growthbook with a random targeting attribute id, it pretends each page load is a new user. You can refresh a few times to see Growthbook serve the control t-shirt sometimes and the variant t-shirt other times.
+
+## How it Works
+
+This example uses server-side Growthbook. For client-side Growthbook, see the next-js example.
+
+The code in `src/app/lib/growthbookExperiment.ts` shows the GraphQL to get the **Growthbook Experiment** content model which contains the `featureFlagId` and the `variationsCollection`. In order to get the Variation you can either load the variation content by it's id and \_\_typename in a separate call to Contentful API, or add the fields for each Content Type you want to be able to experiment on like in the example below:
+
+```
+export const GROWTHBOOK_EXPERIMENT_GRAPHQL_FIELDS = `
+    sys {
+        id
+    }
+    featureFlagId
+    variationsCollection {
+        items {
+            sys {
+                id
+            }
+            __typename
+            ... on GbExampleProduct {
+                ${PRODUCT_GRAPHQL_FIELDS}
+            }
+        }
+    }
+`;
+```
+
+The `getVariation` function shows how to get the variation from it. Basically, calling `gb.getFeatureValue` with the `featureFlagId` will return the index of the variation to show in the `variationsCollection`.
+
+```
+export function getVariation(
+  gb: GrowthBook,
+  growthbookExperiment: GrowthbookExperimentInterface
+) {
+  const featureFlagId = growthbookExperiment.featureFlagId;
+  const variationsCollection = growthbookExperiment.variationsCollection;
+  const index = gb.getFeatureValue(featureFlagId ?? "", 0);
+
+  // This can only happen if the experiment is out of sync with the published version.
+  if (index > variationsCollection.items.length + 1) {
+    return variationsCollection.items[0];
+  }
+  const variation = variationsCollection.items[index];
+
+  return variation;
+}
+```
+
+The `src/app/page.tsx` file contains the Growthbook object and initialization. It also shows how you can convert GrowthbookExperiment to the variation the user should see.
+
+```
+ const items = page.productsCollection.items.map((item) => {
+    if (item.__typename === "GrowthbookExperiment") {
+      return getVariation(gb, item);
+    }
+    return item;
+  });
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Server-fetched feature flags and experiment definitions are persisted in the Next.js data cache for 60 seconds (configurable in `src/app/lib/growthbookServer.ts`). For faster updates, there is a `POST /revalidate` route handler that can be triggered from an SDK Webhook in GrowthBook.
 
-Follow the instructions on the homepage to create an example for how Content creators can create
-Experiments within Contentful all on their own.
+Data about which variation the user saw is sent to the client where an analytics event is triggered (or console.log in these examples). This happens via the `GrowthBookTracking` client component defined in `src/app/lib/GrowthBookTracking`.
diff --git a/contentful/src/app/[slug]/page.tsx b/contentful/src/app/[slug]/page.tsx
deleted file mode 100644
index ae33323..0000000
--- a/contentful/src/app/[slug]/page.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { getPage } from "@/app/lib/page";
-import { ProductInterface } from "@/app/lib/product";
-import { getVariation } from "@/app/lib/growthbookExperiment";
-import { GrowthBook } from "@growthbook/growthbook";
-import { randomUUID } from "crypto";
-import { GrowthBookTracking } from "@/app/lib/growthbookTracking";
-
-interface PageProps {
-  params: {
-    slug: string;
-  };
-}
-
-const Product = ({ product }: { product: ProductInterface }) => (
-  <div className="product">
-    <div className="product-inner">
-      <div className="product-content">
-        <h2>{product.title}</h2>
-        <p>{product.description}</p>
-        <p>From ${product.price}</p>
-      </div>
-      <div className="product-footer">
-        <img width="200px" src={product.image} alt={product.title} />
-        <a href={product.buyLink} target="_blank">
-          Buy on Growthbook Store
-        </a>
-      </div>
-    </div>
-  </div>
-);
-
-const Page = async ({ params }: PageProps) => {
-  const gb = new GrowthBook({
-    apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
-    clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
-  });
-
-  await gb.init({ timeout: 1000 });
-
-  // Set targeting attributes for the user
-  // Normally this is set based on a cookie on logged in user data, but here
-  // we use a random ID so we can see different variations
-  await gb.setAttributes({
-    id: randomUUID(),
-  });
-
-  const { slug } = await params;
-
-  const page = await getPage(slug);
-
-  if (!page) {
-    return <div>Page not found</div>;
-  }
-
-  const items = page.productsCollection.items.map((item) => {
-    if (item.__typename === "GrowthbookExperiment") {
-      return getVariation(gb, item);
-    }
-    return item;
-  });
-
-  // If the code above ran any experiments, get the tracking call data
-  // This is passed into the <GrowthBookTracking> client component below
-  const trackingData = gb.getDeferredTrackingCalls();
-
-  return (
-    <div>
-      <h1>{page.title}</h1>
-      <p>{page.description}</p>
-      <h2>Products</h2>
-      <div className="product-container">
-        {items.map((item) => (
-          <Product key={item.sys.id} product={item} />
-        ))}
-      </div>
-      <GrowthBookTracking data={trackingData} />
-    </div>
-  );
-};
-
-export default Page;
diff --git a/contentful/src/app/page.tsx b/contentful/src/app/page.tsx
index e441395..6e7f8ea 100644
--- a/contentful/src/app/page.tsx
+++ b/contentful/src/app/page.tsx
@@ -1,185 +1,78 @@
-import Link from "next/link";
+import { getPage } from "@/app/lib/page";
+import { ProductInterface } from "@/app/lib/product";
+import { getVariation } from "@/app/lib/growthbookExperiment";
+import { GrowthBook } from "@growthbook/growthbook";
+import { randomUUID } from "crypto";
+import { GrowthBookTracking } from "@/app/lib/growthbookTracking";
+
+const Product = ({ product }: { product: ProductInterface }) => (
+  <div className="product">
+    <div className="product-inner">
+      <div className="product-content">
+        <h2>{product.title}</h2>
+        <p>{product.description}</p>
+        <p>From ${product.price}</p>
+      </div>
+      <div className="product-footer">
+        <img width="200px" src={product.image} alt={product.title} />
+        <a href={product.buyLink} target="_blank">
+          Buy on Growthbook Store
+        </a>
+      </div>
+    </div>
+  </div>
+);
+
+export default async function Home() {
+  const slug = "products";
+
+  const page = await getPage(slug);
+
+  if (!page) {
+    return (
+      <div>
+        Product page not found. Run `npm run create-contentful-content` to add
+        the exaple Growthbook Page to your Contentful space.
+      </div>
+    );
+  }
+
+  const gb = new GrowthBook({
+    apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
+    clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
+  });
+
+  await gb.init({ timeout: 1000 });
+
+  // Set targeting attributes for the user
+  // Normally this is set based on a cookie on logged in user data, but here
+  // we use a random ID so we can see different variations
+  await gb.setAttributes({
+    id: randomUUID(),
+  });
+
+  const items = page.productsCollection.items.map((item) => {
+    if (item.__typename === "GrowthbookExperiment") {
+      return getVariation(gb, item);
+    }
+    return item;
+  });
+
+  // If the code above ran any experiments, get the tracking call data
+  // This is passed into the <GrowthBookTracking> client component below
+  const trackingData = gb.getDeferredTrackingCalls();
 
-export default function Home() {
   return (
-    <main className="instructions">
-      <div className="home">
-        <h2>Description</h2>
-        <p>
-          This is an example front-end app that uses Contentful as it's Content
-          Management System. In Contentful there is a Growthbook app plugin that
-          once installed, will let your content creators create experiments on
-          their own. This app has an example of how you can take a `Growthbook
-          Experiment` content model and show the right variation to the user.
-        </p>
-        <h2>Configuration</h2>
-        <section>
-          <ol>
-            <li>Setting up Growthbook</li>
-            <ol>
-              <li>
-                First, create a free{" "}
-                <a href="https://www.growthbook.io" target="_blank">
-                  GrowthBook Account
-                </a>{" "}
-                and add a new SDK Connection, selecting JavaScript (or React) as
-                the language.
-              </li>
-              <li>
-                {" "}
-                Create a new{" "}
-                <a href="https://docs.growthbook.io/warehouses" target="_blank">
-                  datasource
-                </a>{" "}
-                and connect it to your data warehouse
-              </li>
-              <li>
-                {" "}
-                Go to <b>Settings-&gt;API keys</b> and create a key with an
-                `admin` role. (This is needed for Contentful to connect to
-                Growthbook and add experiments and feature flags.)
-              </li>
-            </ol>
-            <li>Setting up Contentful</li>
-            <ol>
-              <li>
-                Next, create a free{" "}
-                <a href="https://www.contentful.com" target="_blank">
-                  Contentful Account
-                </a>{" "}
-              </li>
-              <li>
-                Click the gear icon in the upper right and go to <b>API keys</b>{" "}
-                and create a new API key. (This is used by your front-end
-                app/this example app to connect to Contentful to get the
-                content.)
-              </li>
-              <li>
-                Also go to the gear icon and click on <b>CMA tokens</b> and
-                create a new token. (This is used by a script within this
-                example app to create example Content Models and Content within
-                Contentful without you having to set it up manually.)
-              </li>
-              <li>
-                Add the Growthbook App to your Contentful Space by going to{" "}
-                <br /> <b>Apps-&gt;Marketplace-&gt;A/B tests-&gt;Growthbook</b>{" "}
-                and clicking Install.
-                <br /> On the configuration page, enter the URL of your
-                Growthbook instance, the Api Key from step 1c. and the
-                Datasource from step 1b. This will create a new content model
-                called <code>Growthbook Experiment</code> that you can use to
-                create experiments in Contentful.
-              </li>
-            </ol>
-            <li>Setting up this example app</li>
-            <ol>
-              <li>
-                Next, in this example root, copy <code>.env.local.example</code>{" "}
-                to <code>.env.local</code> and fill in the values from your
-                GrowthBook SDK Connection (step 1a), the Contentful API key info
-                (step 2b), and the Contentful CMA token (step 2c).
-              </li>
-              <li>
-                In the terminal run:{" "}
-                <code>npm run create-contentful-content</code>. This will create
-                the <code>Growthbook Example Page</code> and the{" "}
-                <code>Growthbook Example Product</code> Content Models in
-                Contentful. It will also create a{" "}
-                <code>Growthbook Example Product Page</code> and four products
-                as Contentful Content.
-              </li>
-              <li>
-                Run <code>npm run dev</code> and go to the{" "}
-                <a href="/product" target="_blank">
-                  product page
-                </a>{" "}
-                to see the contentful content.
-              </li>
-            </ol>
-            <li>Pretend to be a Content Editor creating a GB A/B test.</li>
-            <ol>
-              <li>
-                In the Contentful app go to the{" "}
-                <b>Growthbook Example Product Page</b> click the three dots next
-                to the <b>Control</b> t-shirt in the Products collection and
-                click <b>Remove</b>.
-              </li>
-              <li>
-                Click <b>Add content</b> and select <b>Growthbook Experiment</b>{" "}
-                as the Content Type.{" "}
-              </li>
-              <li>
-                Enter <code>Contentful Example</code> for the Experiment name.
-              </li>
-              <li>
-                Click "Add Variation" and select the Link an existing variant
-                option. Select the <b>Control t-shirt</b>
-              </li>
-              <li>
-                Click "Add Variation" and select the Link an existing variant
-                option. Select the <b>Variant t-shirt</b>
-              </li>
-              <li>
-                The <b>Create New Experiment</b> should now be clickable. Click
-                it.
-              </li>
-              <li>Click start experiment.</li>
-              <li>
-                Click <b>publish.</b>
-              </li>
-              <li>Click &lt;- to go back to the Product Page</li>
-              <li>
-                Click <b>Publish</b> on the Product Page
-              </li>
-              <li>
-                Go to the{" "}
-                <a href="/product" target="_blank">
-                  product page
-                </a>{" "}
-                to see which content Growthbook has chosen to show. As this
-                example initialized growthbook with a random targeting attribute
-                id, it pretends each page load is a new user. You can refresh a
-                few times to see Growthbook serve the control t-shirt sometimes
-                and the variant t-shirt the other times.
-              </li>
-            </ol>
-          </ol>
-        </section>
-        <section>
-          <h2>How it Works</h2>
-          <p>
-            This example uses server-side Growthbook. For client-side growthbook
-            see the next-js example.
-          </p>
-          <p>
-            The code in <code>src/app/lib/growthbookExperiment.ts</code> shows
-            the GraphQL to get the <b>Growthbook Experiment</b> content model
-            which contains the <code>featureFlagId</code> and the{" "}
-            <code>variationsCollection</code>. The <code>getVariation</code>{" "}
-            function show how to get the variation from it. Basically calling
-            gb.getFeatureValue with the <code>featureFlagId</code> will return
-            the index of the variation to show in the{" "}
-            <code>variationsCollection</code>.
-          </p>
-          <p>
-            The <code>src/app/pages/[slug]/page.tsx</code> file contains the
-            growthbook object and initialization.
-          </p>
-          <p>
-            Server-fetched feature flags and experiment definitions are
-            persisted in the Next.js data cache for 60 seconds (configurable in{" "}
-            <code>src/app/lib/growthbookServer.ts</code>). For faster updates,
-            there is a <code>POST /revalidate</code> route handler that can be
-            triggered from an SDK Webhook in GrowthBook.
-          </p>
-          <p>
-            Data about which variation the user saw is sent to the client where
-            an analytics event is triggered (or console.log in these examples).
-            This happens via the <code>GrowthBookTracking</code> client
-            component defined in <code>src/app/lib/GrowthBookTracking</code>.
-          </p>
-        </section>
+    <div>
+      <h1>{page.title}</h1>
+      <p>{page.description}</p>
+      <h2>Products</h2>
+      <div className="product-container">
+        {items.map((item) => (
+          <Product key={item.sys.id} product={item} />
+        ))}
       </div>
-    </main>
+      <GrowthBookTracking data={trackingData} />
+    </div>
   );
 }