diff --git a/CLAUDE.md b/CLAUDE.md
index d78d978..9da1ab7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -60,19 +60,48 @@ Barrel exports in `src/components/index.ts` must match content type keys used in
 ### Component Pattern
 
 ```typescript
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 
 type Props = {
-  opti: Infer<typeof SomeContentTypeCT>;
-  displaySettings?: Infer<typeof SomeDisplayTemplate>;
+  content: ContentProps<typeof SomeContentTypeCT>;
+  displaySettings?: ContentProps<typeof SomeDisplayTemplate>;
 };
 
-export default function MyComponent({ opti, displaySettings }: Props) {
-  const { pa, src } = getPreviewUtils(opti);
+export default function MyComponent({ content, displaySettings }: Props) {
+  const { pa, src } = getPreviewUtils(content);
   // pa('propertyName') — adds preview attributes for Visual Builder editing
   // src(opti.image) — returns optimized image URL from CMS CDN
-  return <div {...pa('title')}>{opti.title}</div>;
+  return <div {...pa('title')}>{content.title}</div>;
+}
+```
+### Experience Pattern
+```typescript
+import { BlankExperienceContentType, ContentProps } from '@optimizely/cms-sdk';
+import {
+  ComponentContainerProps,
+  OptimizelyComposition,
+  getPreviewUtils,
+} from '@optimizely/cms-sdk/react/server';
+
+type Props = {
+  content: ContentProps<typeof BlankExperienceContentType>;
+};
+
+function ComponentWrapper({ children, node }: ComponentContainerProps) {
+  const { pa } = getPreviewUtils(node);
+  return <div className="mb-8" {...pa(node)}>{children}</div>;
+}
+
+export default function BlankExperience({ content }: Props) {
+  return (
+    <main className="blank-experience">
+      <OptimizelyComposition
+        nodes={content.composition?.nodes ?? []}
+        ComponentWrapper={ComponentWrapper}
+      />
+    </main>
+  );
 }
 ```
 
diff --git a/package-lock.json b/package-lock.json
index 3f160f0..f168f45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,16 @@
 {
-  "name": "temp-nextjs-app",
-  "version": "0.1.0",
+  "name": "nextjs-fe-hosting",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "temp-nextjs-app",
-      "version": "0.1.0",
+      "name": "nextjs-fe-hosting",
+      "version": "1.0.0",
       "dependencies": {
-        "@optimizely/cms-sdk": "^0.1.0-alpha.16",
+        "@optimizely/cms-sdk": "^1.0.0",
         "@tailwindcss/typography": "^0.5.19",
-        "next": "16.1.1",
+        "next": "16.1.6",
         "react": "19.2.3",
         "react-dom": "19.2.3"
       },
@@ -20,9 +20,12 @@
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9",
-        "eslint-config-next": "16.1.1",
+        "eslint-config-next": "16.1.6",
         "tailwindcss": "^4",
         "typescript": "^5"
+      },
+      "engines": {
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1037,15 +1040,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.1.tgz",
-      "integrity": "sha512-3oxyM97Sr2PqiVyMyrZUtrtM3jqqFxOQJVuKclDsgj/L728iZt/GyslkN4NwarledZATCenbk4Offjk1hQmaAA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
+      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.1.1.tgz",
-      "integrity": "sha512-Ovb/6TuLKbE1UiPcg0p39Ke3puyTCIKN9hGbNItmpQsp+WX3qrjO3WaMVSi6JHr9X1NrmthqIguVHodMJbh/dw==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.1.6.tgz",
+      "integrity": "sha512-/Qq3PTagA6+nYVfryAtQ7/9FEr/6YVyvOtl6rZnGsbReGLf0jZU6gkpr1FuChAQpvV46a78p4cmHOVP8mbfSMQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1053,9 +1056,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.1.tgz",
-      "integrity": "sha512-JS3m42ifsVSJjSTzh27nW+Igfha3NdBOFScr9C80hHGrWx55pTrVL23RJbqir7k7/15SKlrLHhh/MQzqBBYrQA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
+      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
       "cpu": [
         "arm64"
       ],
@@ -1069,9 +1072,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.1.tgz",
-      "integrity": "sha512-hbyKtrDGUkgkyQi1m1IyD3q4I/3m9ngr+V93z4oKHrPcmxwNL5iMWORvLSGAf2YujL+6HxgVvZuCYZfLfb4bGw==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
+      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
       "cpu": [
         "x64"
       ],
@@ -1085,9 +1088,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.1.tgz",
-      "integrity": "sha512-/fvHet+EYckFvRLQ0jPHJCUI5/B56+2DpI1xDSvi80r/3Ez+Eaa2Yq4tJcRTaB1kqj/HrYKn8Yplm9bNoMJpwQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
+      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
       "cpu": [
         "arm64"
       ],
@@ -1101,9 +1104,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.1.tgz",
-      "integrity": "sha512-MFHrgL4TXNQbBPzkKKur4Fb5ICEJa87HM7fczFs2+HWblM7mMLdco3dvyTI+QmLBU9xgns/EeeINSZD6Ar+oLg==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
+      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
       "cpu": [
         "arm64"
       ],
@@ -1117,9 +1120,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.1.tgz",
-      "integrity": "sha512-20bYDfgOQAPUkkKBnyP9PTuHiJGM7HzNBbuqmD0jiFVZ0aOldz+VnJhbxzjcSabYsnNjMPsE0cyzEudpYxsrUQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
+      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
       "cpu": [
         "x64"
       ],
@@ -1133,9 +1136,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.1.tgz",
-      "integrity": "sha512-9pRbK3M4asAHQRkwaXwu601oPZHghuSC8IXNENgbBSyImHv/zY4K5udBusgdHkvJ/Tcr96jJwQYOll0qU8+fPA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
+      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
       "cpu": [
         "x64"
       ],
@@ -1149,9 +1152,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.1.tgz",
-      "integrity": "sha512-bdfQkggaLgnmYrFkSQfsHfOhk/mCYmjnrbRCGgkMcoOBZ4n+TRRSLmT/CU5SATzlBJ9TpioUyBW/vWFXTqQRiA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
+      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
       "cpu": [
         "arm64"
       ],
@@ -1165,9 +1168,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz",
-      "integrity": "sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
+      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
       "cpu": [
         "x64"
       ],
@@ -1229,9 +1232,9 @@
       }
     },
     "node_modules/@optimizely/cms-sdk": {
-      "version": "0.1.0-alpha.16",
-      "resolved": "https://registry.npmjs.org/@optimizely/cms-sdk/-/cms-sdk-0.1.0-alpha.16.tgz",
-      "integrity": "sha512-fklCdkuUkOMuCtERBJ36Xa+R5BZGDaugIhgDF2rowMGfr7WbpKgap9PETUnPyFhZaL2d/XwH1lGjqnloEj0CiA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@optimizely/cms-sdk/-/cms-sdk-1.0.0.tgz",
+      "integrity": "sha512-66ekDYimZe9C5jBOQ96hRY+dQdBfXZ+kB48rcw1tncQhsYPuL++URGwMZ8cHYUshHEF/exkEBQeF2O54hsQeQg==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "react": "^19.0.0"
@@ -3121,13 +3124,13 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.1.1.tgz",
-      "integrity": "sha512-55nTpVWm3qeuxoQKLOjQVciKZJUphKrNM0fCcQHAIOGl6VFXgaqeMfv0aKJhs7QtcnlAPhNVqsqRfRjeKBPIUA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.1.6.tgz",
+      "integrity": "sha512-vKq40io2B0XtkkNDYyleATwblNt8xuh3FWp8SpSz3pt7P01OkBFlKsJZ2mWt5WsCySlDQLckb1zMY9yE9Qy0LA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "16.1.1",
+        "@next/eslint-plugin-next": "16.1.6",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
         "eslint-plugin-import": "^2.32.0",
@@ -4989,12 +4992,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.1.tgz",
-      "integrity": "sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
+      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.1.1",
+        "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001579",
@@ -5008,14 +5011,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.1",
-        "@next/swc-darwin-x64": "16.1.1",
-        "@next/swc-linux-arm64-gnu": "16.1.1",
-        "@next/swc-linux-arm64-musl": "16.1.1",
-        "@next/swc-linux-x64-gnu": "16.1.1",
-        "@next/swc-linux-x64-musl": "16.1.1",
-        "@next/swc-win32-arm64-msvc": "16.1.1",
-        "@next/swc-win32-x64-msvc": "16.1.1",
+        "@next/swc-darwin-arm64": "16.1.6",
+        "@next/swc-darwin-x64": "16.1.6",
+        "@next/swc-linux-arm64-gnu": "16.1.6",
+        "@next/swc-linux-arm64-musl": "16.1.6",
+        "@next/swc-linux-x64-gnu": "16.1.6",
+        "@next/swc-linux-x64-musl": "16.1.6",
+        "@next/swc-win32-arm64-msvc": "16.1.6",
+        "@next/swc-win32-x64-msvc": "16.1.6",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
diff --git a/package.json b/package.json
index c47aa71..313126d 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,9 @@
     "cms:pull-config": "npx @optimizely/cms-cli@latest config pull --output ./content-types.json"
   },
   "dependencies": {
-    "@optimizely/cms-sdk": "^0.1.0-alpha.16",
+    "@optimizely/cms-sdk": "^1.0.0",
     "@tailwindcss/typography": "^0.5.19",
-    "next": "16.1.1",
+    "next": "16.1.6",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
@@ -28,7 +28,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "16.1.1",
+    "eslint-config-next": "16.1.6",
     "tailwindcss": "^4",
     "typescript": "^5"
   }
diff --git a/src/components/blocks/CardBlock.tsx b/src/components/blocks/CardBlock.tsx
index 6a9c55a..755534d 100644
--- a/src/components/blocks/CardBlock.tsx
+++ b/src/components/blocks/CardBlock.tsx
@@ -1,23 +1,23 @@
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import { RichText } from '@optimizely/cms-sdk/react/richText';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 import { CardBlockCT } from '@/content-types/CardBlock';
 import Image from 'next/image';
 
 type Props = {
-  opti: Infer<typeof CardBlockCT>;
+  content: ContentProps<typeof CardBlockCT>;
 };
 
-export default function CardBlock({ opti }: Props) {
-  const { pa, src } = getPreviewUtils(opti);
+export default function CardBlock({ content }: Props) {
+  const { pa, src } = getPreviewUtils(content);
 
   return (
     <div className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
-      {(opti.image?.url?.default || opti.image?.item?.Url) && (
+      {(content.image?.url?.default || content.image?.item?.Url) && (
         <div className="relative h-48 w-full">
           <Image
-            src={src(opti.image)}
-            alt={opti.title || 'Card image'}
+            src={src(content.image)}
+            alt={content.title || 'Card image'}
             fill
             className="object-cover"
             {...pa('image')}
@@ -30,22 +30,22 @@ export default function CardBlock({ opti }: Props) {
           className="text-xl font-semibold text-gray-900 mb-2"
           {...pa('title')}
         >
-          {opti.title}
+          {content.title}
         </h3>
 
-        {opti.text && (
+        {content.text && (
           <div className="prose prose-sm text-gray-600 mb-4" {...pa('text')}>
-            <RichText content={opti.text?.json} />
+            <RichText content={content.text?.json} />
           </div>
         )}
 
-        {opti.linkUrl && opti.linkText && (
+        {content.linkUrl && content.linkText && (
           <a
-            href={String(opti.linkUrl)}
+            href={String(content.linkUrl)}
             className="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"
             {...pa('linkUrl')}
           >
-            {opti.linkText}
+            {content.linkText}
             <svg
               className="ml-2 w-4 h-4"
               fill="none"
diff --git a/src/components/elements/BannerElement.tsx b/src/components/elements/BannerElement.tsx
index b48dff1..3f4c35d 100644
--- a/src/components/elements/BannerElement.tsx
+++ b/src/components/elements/BannerElement.tsx
@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 import { BannerElementCT } from '@/content-types/BannerElement';
 import { BannerDisplayTemplate } from '@/display-templates/BannerElementDisplayTemplate';
@@ -7,14 +7,14 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 type Props = {
-  opti: Infer<typeof BannerElementCT>;
-  displaySettings?: Infer<typeof BannerDisplayTemplate>;
+  content: ContentProps<typeof BannerElementCT>;
+  displaySettings?: ContentProps<typeof BannerDisplayTemplate>;
 };
 
-export default function BannerElement({ opti, displaySettings }: Props) {
-  const { pa, src } = getPreviewUtils(opti);
+export default function BannerElement({ content, displaySettings }: Props) {
+  const { pa, src } = getPreviewUtils(content);
 
-  if (!opti.backgroundImage?.url?.default && !opti.backgroundImage?.item?.Url) {
+  if (!content.backgroundImage?.url?.default && !content.backgroundImage?.item?.Url) {
     return null;
   }
 
@@ -51,7 +51,7 @@ export default function BannerElement({ opti, displaySettings }: Props) {
     <div className="relative w-full h-96 overflow-hidden">
       {/* Background Image */}
       <Image
-        src={src(opti.backgroundImage)}
+        src={src(content.backgroundImage)}
         alt=""
         fill
         className="object-cover"
@@ -83,23 +83,23 @@ export default function BannerElement({ opti, displaySettings }: Props) {
             className="text-white font-bold text-3xl md:text-5xl mb-4"
             {...pa('heading')}
           >
-            {opti.heading}
+            {content.heading}
           </HeadingTag>
 
           {/* Text */}
-          {opti.text && (
+          {content.text && (
             <p
               className="text-white text-lg md:text-xl mb-6"
               {...pa('text')}
             >
-              {opti.text}
+              {content.text}
             </p>
           )}
 
           {/* CTA Link */}
-          {opti.ctaLink?.url?.default && (
+          {content.ctaLink?.url?.default && (
             <Link
-              href={opti.ctaLink.url.default}
+              href={content.ctaLink.url.default}
               className={
                 ctaStyle === 'button'
                   ? ctaColor === 'light'
@@ -113,11 +113,11 @@ export default function BannerElement({ opti, displaySettings }: Props) {
                   : `inline-block text-black font-semibold underline underline-offset-4
                      hover:text-gray-800 transition-colors`
               }
-              target={opti.ctaLink.target ?? undefined}
-              title={opti.ctaLink.title ?? undefined}
+              target={content.ctaLink.target ?? undefined}
+              title={content.ctaLink.title ?? undefined}
               {...pa('ctaLink')}
             >
-              {opti.ctaLink.text || 'Learn More'}
+              {content.ctaLink.text || 'Learn More'}
             </Link>
           )}
         </div>
diff --git a/src/components/elements/CallToActionElement.tsx b/src/components/elements/CallToActionElement.tsx
index c8979f1..0bc3b51 100644
--- a/src/components/elements/CallToActionElement.tsx
+++ b/src/components/elements/CallToActionElement.tsx
@@ -1,16 +1,16 @@
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 import { CallToActionElementCT } from '@/content-types/CallToActionElement';
 import { CallToActionDisplayTemplate } from '@/display-templates/CallToActionElementDisplayTemplate';
 import Link from 'next/link';
 
 type Props = {
-  opti: Infer<typeof CallToActionElementCT>;
-  displaySettings?: Infer<typeof CallToActionDisplayTemplate>;
+  content: ContentProps<typeof CallToActionElementCT>;
+  displaySettings?: ContentProps<typeof CallToActionDisplayTemplate>;
 };
 
-export default function CallToActionElement({ opti, displaySettings }: Props) {
-  const { pa } = getPreviewUtils(opti);
+export default function CallToActionElement({ content, displaySettings }: Props) {
+  const { pa } = getPreviewUtils(content);
 
   const style = displaySettings?.style ?? 'link';
   const color = displaySettings?.color ?? 'dark';
@@ -30,7 +30,7 @@ export default function CallToActionElement({ opti, displaySettings }: Props) {
     },
   };
 
-  if (!opti.link?.url?.default) {
+  if (!content.link?.url?.default) {
     return (
       <span className={styleClasses[style][color]} {...pa('link')}>
         Set link...
@@ -40,13 +40,13 @@ export default function CallToActionElement({ opti, displaySettings }: Props) {
 
   return (
     <Link
-      href={opti.link.url.default}
+      href={content.link.url.default}
       className={styleClasses[style][color]}
-      target={opti.link.target ?? undefined}
-      title={opti.link.title ?? undefined}
+      target={content.link.target ?? undefined}
+      title={content.link.title ?? undefined}
       {...pa('link')}
     >
-      {opti.link.text || 'Learn More'}
+      {content.link.text || 'Learn More'}
     </Link>
   );
 }
diff --git a/src/components/elements/ImageElement.tsx b/src/components/elements/ImageElement.tsx
index a429d30..749596c 100644
--- a/src/components/elements/ImageElement.tsx
+++ b/src/components/elements/ImageElement.tsx
@@ -1,18 +1,18 @@
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 import { ImageElementCT } from '@/content-types/ImageElement';
 import { ImageDisplayTemplate } from '@/display-templates';
 import Image from 'next/image';
 
 type Props = {
-  opti: Infer<typeof ImageElementCT>;
-  displaySettings?: Infer<typeof ImageDisplayTemplate>;
+  content: ContentProps<typeof ImageElementCT>;
+  displaySettings?: ContentProps<typeof ImageDisplayTemplate>;
 };
 
-export default function ImageElement({ opti, displaySettings }: Props) {
-  const { pa, src } = getPreviewUtils(opti);
+export default function ImageElement({ content, displaySettings }: Props) {
+  const { pa, src } = getPreviewUtils(content);
 
-  if (!opti.image?.url?.default && !opti.image?.item?.Url) {
+  if (!content.image?.url?.default && !content.image?.item?.Url) {
     return null;
   }
 
@@ -107,19 +107,19 @@ export default function ImageElement({ opti, displaySettings }: Props) {
         `.trim().replace(/\s+/g, ' ')}
       >
         <Image
-          src={src(opti.image)}
-          alt={opti.altText || ''}
+          src={src(content.image)}
+          alt={content.altText || ''}
           fill
           className={`object-cover ${verticalAlignmentClasses[verticalAlignment]}`}
           {...pa('image')}
         />
       </div>
-      {opti.caption && (
+      {content.caption && (
         <figcaption
           className={`mt-2 text-sm text-gray-500 italic ${captionAlignmentClasses[alignment]}`}
           {...pa('caption')}
         >
-          {opti.caption}
+          {content.caption}
         </figcaption>
       )}
     </figure>
diff --git a/src/components/elements/RichTextElement.tsx b/src/components/elements/RichTextElement.tsx
index ae4a95a..cc8bfa4 100644
--- a/src/components/elements/RichTextElement.tsx
+++ b/src/components/elements/RichTextElement.tsx
@@ -1,18 +1,18 @@
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import { RichText } from '@optimizely/cms-sdk/react/richText';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 import { RichTextElementCT } from '@/content-types/RichTextElement';
 
 type Props = {
-  opti: Infer<typeof RichTextElementCT>;
+  content: ContentProps<typeof RichTextElementCT>;
 };
 
-export default function RichTextElement({ opti }: Props) {
-  const { pa } = getPreviewUtils(opti);
+export default function RichTextElement({ content }: Props) {
+  const { pa } = getPreviewUtils(content);
 
   return (
     <div className="prose prose-lg max-w-none" {...pa('content')}>
-      <RichText content={opti.content?.json} />
+      <RichText content={content.content?.json} />
     </div>
   );
 }
diff --git a/src/components/elements/TextElement.tsx b/src/components/elements/TextElement.tsx
index a88e431..1d87b59 100644
--- a/src/components/elements/TextElement.tsx
+++ b/src/components/elements/TextElement.tsx
@@ -1,15 +1,15 @@
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 import { TextElementCT } from '@/content-types/TextElement';
 import { TextElementDisplayTemplate } from '@/display-templates/TextElementDisplayTemplate';
 
 type Props = {
-  opti: Infer<typeof TextElementCT>;
-  displaySettings?: Infer<typeof TextElementDisplayTemplate>;
+  content: ContentProps<typeof TextElementCT>;
+  displaySettings?: ContentProps<typeof TextElementDisplayTemplate>;
 };
 
-export default function TextElement({ opti, displaySettings }: Props) {
-  const { pa } = getPreviewUtils(opti);
+export default function TextElement({ content, displaySettings }: Props) {
+  const { pa } = getPreviewUtils(content);
 
   const headingLevel = displaySettings?.headingLevel || 'plain';
   const alignment = displaySettings?.alignment || 'left';
@@ -29,7 +29,7 @@ export default function TextElement({ opti, displaySettings }: Props) {
           className={`text-4xl font-bold text-gray-900 ${baseClasses}`}
           {...pa('text')}
         >
-          {opti.text}
+          {content.text}
         </h1>
       );
     case 'h2':
@@ -38,7 +38,7 @@ export default function TextElement({ opti, displaySettings }: Props) {
           className={`text-3xl font-bold text-gray-800 ${baseClasses}`}
           {...pa('text')}
         >
-          {opti.text}
+          {content.text}
         </h2>
       );
     case 'h3':
@@ -47,7 +47,7 @@ export default function TextElement({ opti, displaySettings }: Props) {
           className={`text-2xl font-semibold text-gray-800 ${baseClasses}`}
           {...pa('text')}
         >
-          {opti.text}
+          {content.text}
         </h3>
       );
     case 'h4':
@@ -56,7 +56,7 @@ export default function TextElement({ opti, displaySettings }: Props) {
           className={`text-xl font-semibold text-gray-700 ${baseClasses}`}
           {...pa('text')}
         >
-          {opti.text}
+          {content.text}
         </h4>
       );
     case 'h5':
@@ -65,13 +65,13 @@ export default function TextElement({ opti, displaySettings }: Props) {
           className={`text-lg font-medium text-gray-700 ${baseClasses}`}
           {...pa('text')}
         >
-          {opti.text}
+          {content.text}
         </h5>
       );
     default:
       return (
         <p className={`text-base text-gray-600 ${baseClasses}`} {...pa('text')}>
-          {opti.text}
+          {content.text}
         </p>
       );
   }
diff --git a/src/components/experiences/BlankExperience.tsx b/src/components/experiences/BlankExperience.tsx
index d91b0cd..4b35f23 100644
--- a/src/components/experiences/BlankExperience.tsx
+++ b/src/components/experiences/BlankExperience.tsx
@@ -1,12 +1,12 @@
-import { BlankExperienceContentType, Infer } from '@optimizely/cms-sdk';
+import { BlankExperienceContentType, ContentProps } from '@optimizely/cms-sdk';
 import {
   ComponentContainerProps,
-  OptimizelyExperience,
+  OptimizelyComposition,
   getPreviewUtils,
 } from '@optimizely/cms-sdk/react/server';
 
 type Props = {
-  opti: Infer<typeof BlankExperienceContentType>;
+  content: ContentProps<typeof BlankExperienceContentType>;
 };
 
 function ComponentWrapper({ children, node }: ComponentContainerProps) {
@@ -14,11 +14,11 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
   return <div className="mb-8" {...pa(node)}>{children}</div>;
 }
 
-export default function BlankExperience({ opti }: Props) {
+export default function BlankExperience({ content }: Props) {
   return (
     <main className="blank-experience">
-      <OptimizelyExperience
-        nodes={opti.composition?.nodes ?? []}
+      <OptimizelyComposition
+        nodes={content.composition?.nodes ?? []}
         ComponentWrapper={ComponentWrapper}
       />
     </main>
diff --git a/src/components/experiences/BlankSection.tsx b/src/components/experiences/BlankSection.tsx
index a1e274f..13dd7d3 100644
--- a/src/components/experiences/BlankSection.tsx
+++ b/src/components/experiences/BlankSection.tsx
@@ -1,4 +1,4 @@
-import { BlankSectionContentType, Infer } from '@optimizely/cms-sdk';
+import { BlankSectionContentType, ContentProps } from '@optimizely/cms-sdk';
 import {
   OptimizelyGridSection,
   getPreviewUtils,
@@ -7,19 +7,19 @@ import {
 
 
 type BlankSectionProps = {
-  opti: Infer<typeof BlankSectionContentType>;
+  content: ContentProps<typeof BlankSectionContentType>;
 };
 
 /** Defines a component to render a blank section */
-export default function BlankSection({ opti }: BlankSectionProps) {
-  const { pa } = getPreviewUtils(opti)
+export default function BlankSection({ content }: BlankSectionProps) {
+  const { pa } = getPreviewUtils(content)
   return (
     <section
       className="vb:grid relative w-full py-12 px-4 md:px-6 lg:px-8 overflow-visible"
-      {...pa(opti)}
+      {...pa(content)}
     >
       <div className="max-w-7xl mx-auto w-full">
-        <OptimizelyGridSection nodes={opti.nodes} row={Row} column={Column} />
+        <OptimizelyGridSection nodes={content.nodes} row={Row} column={Column} />
       </div>
     </section>
   )
diff --git a/src/components/experiences/LandingPageExperience.tsx b/src/components/experiences/LandingPageExperience.tsx
index 1635423..e205541 100644
--- a/src/components/experiences/LandingPageExperience.tsx
+++ b/src/components/experiences/LandingPageExperience.tsx
@@ -1,14 +1,14 @@
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import {
   ComponentContainerProps,
-  OptimizelyExperience,
+  OptimizelyComposition,
   getPreviewUtils,
 } from '@optimizely/cms-sdk/react/server';
 import { LandingPageExperienceCT } from '@/content-types/LandingPageExperience';
 import Image from 'next/image';
 
 type Props = {
-  opti: Infer<typeof LandingPageExperienceCT>;
+  content: ContentProps<typeof LandingPageExperienceCT>;
 };
 
 function ComponentWrapper({ children, node }: ComponentContainerProps) {
@@ -20,9 +20,9 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
   );
 }
 
-export default function LandingPageExperience({ opti }: Props) {
-  const { pa, src } = getPreviewUtils(opti);
-  const hasBackground = !!(opti.backgroundImage?.url?.default || opti.backgroundImage?.item?.Url);
+export default function LandingPageExperience({ content }: Props) {
+  const { pa, src } = getPreviewUtils(content);
+  const hasBackground = !!(content.backgroundImage?.url?.default || content.backgroundImage?.item?.Url);
 
   return (
     <div className={`landing-page-experience -mt-16 relative${hasBackground ? ' has-background-image' : ''}`}>
@@ -30,7 +30,7 @@ export default function LandingPageExperience({ opti }: Props) {
       {hasBackground && (
         <div className="absolute inset-0 -z-10">
           <Image
-            src={src(opti.backgroundImage)}
+            src={src(content.backgroundImage)}
             alt=""
             fill
             className="object-cover"
@@ -41,8 +41,8 @@ export default function LandingPageExperience({ opti }: Props) {
 
       {/* Content area with top padding to clear the header */}
       <div className="relative pt-16">
-        <OptimizelyExperience
-          nodes={opti.composition?.nodes ?? []}
+        <OptimizelyComposition
+          nodes={content.composition?.nodes ?? []}
           ComponentWrapper={ComponentWrapper}
         />
       </div>
diff --git a/src/components/pages/ArticlePage.tsx b/src/components/pages/ArticlePage.tsx
index f1f9f3f..b4c4d45 100644
--- a/src/components/pages/ArticlePage.tsx
+++ b/src/components/pages/ArticlePage.tsx
@@ -1,23 +1,23 @@
-import { Infer } from '@optimizely/cms-sdk';
+import { ContentProps } from '@optimizely/cms-sdk';
 import { RichText } from '@optimizely/cms-sdk/react/richText';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 import { ArticlePageCT } from '@/content-types/ArticlePage';
 import Image from 'next/image';
 
 type Props = {
-  opti: Infer<typeof ArticlePageCT>;
+  content: ContentProps<typeof ArticlePageCT>;
 };
 
-export default function ArticlePage({ opti }: Props) {
-  const { pa, src } = getPreviewUtils(opti);
+export default function ArticlePage({ content }: Props) {
+  const { pa, src } = getPreviewUtils(content);
 
   return (
     <article className="max-w-4xl mx-auto px-4 py-8">
-      {(opti.featuredImage?.url?.default || opti.featuredImage?.item?.Url) && (
+      {(content.featuredImage?.url?.default || content.featuredImage?.item?.Url) && (
         <div className="relative w-full h-64 md:h-96 mb-8 rounded-lg overflow-hidden">
           <Image
-            src={src(opti.featuredImage)}
-            alt={opti.heading || 'Featured image'}
+            src={src(content.featuredImage)}
+            alt={content.heading || 'Featured image'}
             fill
             className="object-cover"
             {...pa('featuredImage')}
@@ -29,12 +29,12 @@ export default function ArticlePage({ opti }: Props) {
         className="text-3xl md:text-4xl font-bold text-gray-900 mb-6"
         {...pa('heading')}
       >
-        {opti.heading}
+        {content.heading}
       </h1>
 
-      {opti.body && (
+      {content.body && (
         <div className="prose prose-lg max-w-none" {...pa('body')}>
-          <RichText content={opti.body?.json} />
+          <RichText content={content.body?.json} />
         </div>
       )}
     </article>