diff --git a/ARIA/apg/index/index.md b/ARIA/apg/index/index.md
index 13e067517..c3ccfc95e 100644
--- a/ARIA/apg/index/index.md
+++ b/ARIA/apg/index/index.md
@@ -67,6 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     <ul>
       <li><a href="#examples_by_role_label">Examples by Role</a></li>
       <li><a href="#examples_by_props_label">Examples by Properties and States</a></li>
+      
     </ul>
     <section id="examples_by_roles">
       <h2 id="examples_by_role_label">Examples by Role</h2>
@@ -949,6 +950,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr></tbody>
       </table>
     </section>
+    
   </div>
 
 
diff --git a/_external/aria-practices b/_external/aria-practices
index 39fb654e5..4e77bdba9 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 39fb654e5146151ee70675af6ae755a72d8f7ff4
+Subproject commit 4e77bdba904bc1fdff5976057d5ce135804acd6c
diff --git a/_external/data b/_external/data
index 2fa5e7cb6..b371a9ab8 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 2fa5e7cb6f4eb5f35583a94b9a5890a0f2a0a9ec
+Subproject commit b371a9ab89b8e5e848f399e0186b64e3ecf810f6
diff --git a/content-assets/wai-aria-practices/shared/js/app.js b/content-assets/wai-aria-practices/shared/js/app.js
index 58cbd1e86..05f444abf 100644
--- a/content-assets/wai-aria-practices/shared/js/app.js
+++ b/content-assets/wai-aria-practices/shared/js/app.js
@@ -20,14 +20,20 @@
     // Determine we are on an example page
     if (!document.location.href.match(/examples\/[^/]+\.html/)) return;
 
+    const isExperimental =
+      document.querySelector('main')?.getAttribute('data-content-phase') ===
+      'experimental';
+
+    const usageWarningLink = isExperimental
+      ? '/templates/experimental-example-usage-warning.html'
+      : '/templates/example-usage-warning.html';
+
     // Generate the usage warning link using app.js link as a starting point
     const scriptSource = document
       .querySelector('[src$="app.js"]')
       .getAttribute('src');
-    const fetchSource = scriptSource.replace(
-      '/js/app.js',
-      '/templates/example-usage-warning.html'
-    );
+
+    const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink);
 
     // Load and parse the usage warning and insert it before the h1
     const html = await (await fetch(fetchSource)).text();
diff --git a/scripts/pre-build/library/determineContentType.js b/scripts/pre-build/library/determineContentType.js
index 5fb11c0cf..56305599a 100644
--- a/scripts/pre-build/library/determineContentType.js
+++ b/scripts/pre-build/library/determineContentType.js
@@ -45,7 +45,10 @@ const determineContentType = (sourcePath) => {
   }
   if (
     sourcePath.endsWith("shared/templates/read-this-first.html") ||
-    sourcePath.endsWith("shared/templates/example-usage-warning.html")
+    sourcePath.endsWith("shared/templates/example-usage-warning.html") ||
+    sourcePath.endsWith(
+      "shared/templates/experimental-example-usage-warning.html"
+    )
   ) {
     return "template";
   }
diff --git a/scripts/pre-build/library/transformExample.js b/scripts/pre-build/library/transformExample.js
index c8546049f..09cb349de 100644
--- a/scripts/pre-build/library/transformExample.js
+++ b/scripts/pre-build/library/transformExample.js
@@ -9,8 +9,14 @@ const wrapTablesWithResponsiveDiv = require("./wrapTablesWithResponsiveDiv");
 const removeConflictingCss = require("./removeConflictingCss");
 const getExampleLastModifiedDate = require("./getExampleLastModifiedDate");
 
-const loadNotice = async () => {
-  const relativePath = "content/shared/templates/example-usage-warning.html";
+const loadNoticeCommon = async ({ isExperimental }) => {
+  let relativePath;
+  if (isExperimental) {
+    relativePath =
+      "content/shared/templates/experimental-example-usage-warning.html";
+  } else {
+    relativePath = "content/shared/templates/example-usage-warning.html";
+  }
   const templateSourcePath = path.resolve(sourceRoot, relativePath);
   const noticeContent = await fs.readFile(templateSourcePath, {
     encoding: "utf8",
@@ -28,7 +34,8 @@ const loadNotice = async () => {
   };
 };
 
-const loadedNotice = loadNotice();
+const loadedNotice = loadNoticeCommon({ isExperimental: false });
+const loadedExperimentalNotice = loadNoticeCommon({ isExperimental: true });
 
 const transformExample = async (sourcePath, sourceContents) => {
   const { sitePath, githubPath } = rewriteSourcePath(sourcePath);
@@ -46,7 +53,16 @@ const transformExample = async (sourcePath, sourceContents) => {
 
   await rewriteElementPaths(html, { onSourcePath: sourcePath });
 
-  const getNotice = await loadedNotice;
+  const isExperimental =
+    html.querySelector("main")?.getAttribute("data-content-phase") ===
+    "experimental";
+
+  let getNotice;
+  if (isExperimental) {
+    getNotice = await loadedExperimentalNotice;
+  } else {
+    getNotice = await loadedNotice;
+  }
   const notice = await getNotice(sourcePath);
   html.querySelector("body").insertAdjacentHTML("afterbegin", notice);