diff --git a/change/@microsoft-fast-html-lifecycle-callbacks-5f46fc65-6856-4182-b685-1c0c72b5b312.json b/change/@microsoft-fast-html-lifecycle-callbacks-5f46fc65-6856-4182-b685-1c0c72b5b312.json
new file mode 100644
index 00000000000..8e3afd94000
--- /dev/null
+++ b/change/@microsoft-fast-html-lifecycle-callbacks-5f46fc65-6856-4182-b685-1c0c72b5b312.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(fast-html): use @microsoft/fast-build to build lifecycle-callbacks fixture",
+  "packageName": "@microsoft/fast-html",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/fast-html/scripts/build-fixtures.js b/packages/fast-html/scripts/build-fixtures.js
index 1c67530ba2a..bcf5fb25348 100644
--- a/packages/fast-html/scripts/build-fixtures.js
+++ b/packages/fast-html/scripts/build-fixtures.js
@@ -7,7 +7,7 @@ import { fileURLToPath } from "node:url";
 
 // Builds test fixtures using @microsoft/fast-build. Add fixture names here
 // incrementally as each one is verified to work with the fast-build CLI.
-const fixtures = ["attribute"];
+const fixtures = ["attribute", "lifecycle-callbacks"];
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
diff --git a/packages/fast-html/test/fixtures/lifecycle-callbacks/entry.html b/packages/fast-html/test/fixtures/lifecycle-callbacks/entry.html
new file mode 100644
index 00000000000..bdee10a0d90
--- /dev/null
+++ b/packages/fast-html/test/fixtures/lifecycle-callbacks/entry.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Lifecycle Callbacks Test</title>
+    </head>
+    <body>
+        <simple-element needs-hydration message="{{simpleMessage}}"></simple-element>
+        <complex-element needs-hydration title="{{complexTitle}}" count="{{count}}"></complex-element>
+        <deferred-element needs-hydration defer-hydration status="{{deferredStatus}}"></deferred-element>
+        <deferred-parent-element needs-hydration defer-hydration label="{{parentLabel}}"></deferred-parent-element>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-html/test/fixtures/lifecycle-callbacks/index.html b/packages/fast-html/test/fixtures/lifecycle-callbacks/index.html
index 54ff0270be8..768cb790daf 100644
--- a/packages/fast-html/test/fixtures/lifecycle-callbacks/index.html
+++ b/packages/fast-html/test/fixtures/lifecycle-callbacks/index.html
@@ -1,92 +1,55 @@
 <!DOCTYPE html>
 <html lang="en-US">
     <head>
-        <meta charset="utf-8" />
+        <meta charset="utf-8">
         <title>Lifecycle Callbacks Test</title>
     </head>
     <body>
-        <!-- Simple element -->
-        <simple-element needs-hydration message="Hello">
-            <template shadowrootmode="open">
-                <!--fe-b$$start$$0$$message$$fe-b-->Hello<!--fe-b$$end$$0$$message$$fe-b--> World
-            </template>
-        </simple-element>
-
-        <!-- Complex element with nested element -->
-        <complex-element needs-hydration title="Complex">
-            <template shadowrootmode="open">
-                <div>
-                    <h2><!--fe-b$$start$$0$$title$$fe-b-->Complex<!--fe-b$$end$$0$$title$$fe-b--></h2>
-                    <p>Count: <!--fe-b$$start$$1$$count$$fe-b-->0<!--fe-b$$end$$1$$count$$fe-b--></p>
-                    <nested-element needs-hydration data-fe-b-2 label="Complex">
-                        <template shadowrootmode="open">
-                            <span><!--fe-b$$start$$0$$label$$fe-b-->Complex<!--fe-b$$end$$0$$label$$fe-b--></span>
-                        </template>
-                    </nested-element>
-                </div>
-            </template>
-        </complex-element>
-
-        <!-- Deferred element -->
-        <deferred-element needs-hydration defer-hydration status="pending">
-            <template shadowrootmode="open">
-                <p>Status: <!--fe-b$$start$$0$$status$$fe-b-->pending<!--fe-b$$end$$0$$status$$fe-b--></p>
-            </template>
-        </deferred-element>
-
-        <!-- Nested deferred elements -->
-        <deferred-parent-element needs-hydration defer-hydration label="Parent">
-            <template shadowrootmode="open">
-                <section>
-                    <p><!--fe-b$$start$$0$$label$$fe-b-->Parent<!--fe-b$$end$$0$$label$$fe-b--></p>
-                    <deferred-child-element needs-hydration defer-hydration label="Child" data-fe-b-1>
-                        <template shadowrootmode="open">
-                            <span><!--fe-b$$start$$0$$label$$fe-b-->Child<!--fe-b$$end$$0$$label$$fe-b--></span>
-                        </template>
-                    </deferred-child-element>
-                </section>
-            </template>
-        </deferred-parent-element>
-
-        <!-- Template definitions -->
-        <f-template name="simple-element">
-            <template>{{message}} World</template>
-        </f-template>
-
-        <f-template name="complex-element">
-            <template>
-                <div>
-                    <h2>{{title}}</h2>
-                    <p>Count: {{count}}</p>
-                    <nested-element label="{{title}}">
-                        <template shadowrootmode="open">
-                            <span>{{label}}</span>
-                        </template>
-                    </nested-element>
-                </div>
-            </template>
-        </f-template>
-
-        <f-template name="nested-element">
-            <template><span>{{label}}</span></template>
-        </f-template>
-
-        <f-template name="deferred-element">
-            <template><p>Status: {{status}}</p></template>
-        </f-template>
-
-        <f-template name="deferred-parent-element">
-            <template>
-                <section>
-                    <p>{{label}}</p>
-                    <deferred-child-element label="{{label}}"></deferred-child-element>
-                </section>
-            </template>
-        </f-template>
-
-        <f-template name="deferred-child-element">
-            <template><span>{{label}}</span></template>
-        </f-template>
+        <simple-element needs-hydration message="Hello"><template shadowrootmode="open" shadowroot="open"><!--fe-b$$start$$0$$message-0$$fe-b-->Hello<!--fe-b$$end$$0$$message-0$$fe-b--> World</template></simple-element>
+        <complex-element needs-hydration title="Complex" count="0"><template shadowrootmode="open" shadowroot="open"><div>
+            <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Complex<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
+            <p>Count: <!--fe-b$$start$$1$$count-1$$fe-b-->0<!--fe-b$$end$$1$$count-1$$fe-b--></p>
+            <nested-element label="Complex" data-fe-c-2-1><template shadowrootmode="open" shadowroot="open"><span><!--fe-b$$start$$0$$label-0$$fe-b-->Complex<!--fe-b$$end$$0$$label-0$$fe-b--></span></template></nested-element>
+        </div></template></complex-element>
+        <deferred-element needs-hydration defer-hydration status="pending"><template shadowrootmode="open" shadowroot="open"><p>Status: <!--fe-b$$start$$0$$status-0$$fe-b-->pending<!--fe-b$$end$$0$$status-0$$fe-b--></p></template></deferred-element>
+        <deferred-parent-element needs-hydration defer-hydration label="Parent"><template shadowrootmode="open" shadowroot="open"><section>
+            <p><!--fe-b$$start$$0$$label-0$$fe-b-->Parent<!--fe-b$$end$$0$$label-0$$fe-b--></p>
+            <deferred-child-element label="Parent" data-fe-c-1-1><template shadowrootmode="open" shadowroot="open"><span><!--fe-b$$start$$0$$label-0$$fe-b-->Parent<!--fe-b$$end$$0$$label-0$$fe-b--></span></template></deferred-child-element>
+        </section></template></deferred-parent-element>
+<f-template name="simple-element">
+    <template>{{message}} World</template>
+</f-template>
+
+<f-template name="complex-element">
+    <template>
+        <div>
+            <h2>{{title}}</h2>
+            <p>Count: {{count}}</p>
+            <nested-element label="{{title}}"></nested-element>
+        </div>
+    </template>
+</f-template>
+
+<f-template name="nested-element">
+    <template><span>{{label}}</span></template>
+</f-template>
+
+<f-template name="deferred-element">
+    <template><p>Status: {{status}}</p></template>
+</f-template>
+
+<f-template name="deferred-parent-element">
+    <template>
+        <section>
+            <p>{{label}}</p>
+            <deferred-child-element label="{{label}}"></deferred-child-element>
+        </section>
+    </template>
+</f-template>
+
+<f-template name="deferred-child-element">
+    <template><span>{{label}}</span></template>
+</f-template>
 
         <script type="module" src="./main.ts"></script>
     </body>
diff --git a/packages/fast-html/test/fixtures/lifecycle-callbacks/state.json b/packages/fast-html/test/fixtures/lifecycle-callbacks/state.json
new file mode 100644
index 00000000000..e7c06e03848
--- /dev/null
+++ b/packages/fast-html/test/fixtures/lifecycle-callbacks/state.json
@@ -0,0 +1,8 @@
+{
+    "simpleMessage": "Hello",
+    "complexTitle": "Complex",
+    "count": 0,
+    "deferredStatus": "pending",
+    "parentLabel": "Parent",
+    "childLabel": "Child"
+}
diff --git a/packages/fast-html/test/fixtures/lifecycle-callbacks/templates.html b/packages/fast-html/test/fixtures/lifecycle-callbacks/templates.html
new file mode 100644
index 00000000000..393d9e9f30b
--- /dev/null
+++ b/packages/fast-html/test/fixtures/lifecycle-callbacks/templates.html
@@ -0,0 +1,34 @@
+<f-template name="simple-element">
+    <template>{{message}} World</template>
+</f-template>
+
+<f-template name="complex-element">
+    <template>
+        <div>
+            <h2>{{title}}</h2>
+            <p>Count: {{count}}</p>
+            <nested-element label="{{title}}"></nested-element>
+        </div>
+    </template>
+</f-template>
+
+<f-template name="nested-element">
+    <template><span>{{label}}</span></template>
+</f-template>
+
+<f-template name="deferred-element">
+    <template><p>Status: {{status}}</p></template>
+</f-template>
+
+<f-template name="deferred-parent-element">
+    <template>
+        <section>
+            <p>{{label}}</p>
+            <deferred-child-element label="{{label}}"></deferred-child-element>
+        </section>
+    </template>
+</f-template>
+
+<f-template name="deferred-child-element">
+    <template><span>{{label}}</span></template>
+</f-template>
