diff --git a/change/@microsoft-fast-html-when-00615379-81a9-4dd0-86af-bd600a8ab155.json b/change/@microsoft-fast-html-when-00615379-81a9-4dd0-86af-bd600a8ab155.json
new file mode 100644
index 00000000000..a1e216b54fc
--- /dev/null
+++ b/change/@microsoft-fast-html-when-00615379-81a9-4dd0-86af-bd600a8ab155.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(fast-html): use @microsoft/fast-build to build when 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..8f917f12266 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", "when"];
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
diff --git a/packages/fast-html/test/fixtures/when/entry.html b/packages/fast-html/test/fixtures/when/entry.html
new file mode 100644
index 00000000000..0f392409dc1
--- /dev/null
+++ b/packages/fast-html/test/fixtures/when/entry.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <!-- multiple -->
+        <test-element-multiple id="multiple1" planet="earth"></test-element-multiple>
+        <test-element-multiple id="multiple2" planet="pluto"></test-element-multiple>
+        <test-element-multiple id="multiple3" planet="mars"></test-element-multiple>
+        <!-- boolean -->
+        <test-element id="show" show></test-element>
+        <test-element id="hide"></test-element>
+        <!-- not -->
+        <test-element-not id="show-not"></test-element-not>
+        <test-element-not id="hide-not" hide></test-element-not>
+        <!-- equals -->
+        <test-element-equals id="equals-true" var-a="3"></test-element-equals>
+        <test-element-equals id="equals-false" var-a="4"></test-element-equals>
+        <!-- not equals -->
+        <test-element-not-equals id="not-equals-true" var-a="4"></test-element-not-equals>
+        <test-element-not-equals id="not-equals-false" var-a="3"></test-element-not-equals>
+        <!-- greater than or equals -->
+        <test-element-ge id="ge-true" var-a="3"></test-element-ge>
+        <test-element-ge id="ge-false" var-a="0"></test-element-ge>
+        <!-- greater than -->
+        <test-element-gt id="gt-true" var-a="3"></test-element-gt>
+        <test-element-gt id="gt-false" var-a="0"></test-element-gt>
+        <!-- less than or equals -->
+        <test-element-le id="le-true" var-a="2"></test-element-le>
+        <test-element-le id="le-false" var-a="4"></test-element-le>
+        <!-- less than -->
+        <test-element-lt id="lt-true" var-a="1"></test-element-lt>
+        <test-element-lt id="lt-false" var-a="3"></test-element-lt>
+        <!-- or -->
+        <test-element-or id="or-true" this-var="3"></test-element-or>
+        <test-element-or id="or-false"></test-element-or>
+        <!-- and -->
+        <test-element-and id="and-true" this-var that-var></test-element-and>
+        <test-element-and id="and-false" this-var></test-element-and>
+        <!-- nested when -->
+        <nested-when id="nested-when"></nested-when>
+        <!-- event -->
+        <test-element-event id="event-show" show></test-element-event>
+        <test-element-event id="event-hide"></test-element-event>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-html/test/fixtures/when/state.json b/packages/fast-html/test/fixtures/when/state.json
new file mode 100644
index 00000000000..5fa17480a7c
--- /dev/null
+++ b/packages/fast-html/test/fixtures/when/state.json
@@ -0,0 +1,10 @@
+{
+    "error": false,
+    "showProgress": true,
+    "enableContinue": false,
+    "strings": {
+        "errorMessage": "Error occurred",
+        "continueButtonText": "Continue",
+        "retryButtonText": "Retry"
+    }
+}
diff --git a/packages/fast-html/test/fixtures/when/templates.html b/packages/fast-html/test/fixtures/when/templates.html
new file mode 100644
index 00000000000..3ff533f5fb9
--- /dev/null
+++ b/packages/fast-html/test/fixtures/when/templates.html
@@ -0,0 +1,71 @@
+ <!-- multiple -->
+ <f-template name="test-element-multiple">
+    <template>Hello <f-when value="{{planet == 'earth'}}">world</f-when><f-when value="{{planet == 'pluto'}}">pluto</f-when><f-when value="{{planet == 'mars'}}">mars</f-when></template>
+</f-template>
+<!-- boolean -->
+<f-template name="test-element">
+    <template><f-when value="{{show}}">Hello world</f-when></template>
+</f-template>
+<!-- not -->
+<f-template name="test-element-not">
+    <template><f-when value="{{!hide}}">Hello world</f-when></template>
+</f-template>
+<!-- equals -->
+<f-template name="test-element-equals">
+    <template><f-when value="{{varA == 3}}">Equals 3</f-when></template>
+</f-template>
+<!-- not equals -->
+<f-template name="test-element-not-equals">
+    <template><f-when value="{{varA != 3}}">Not equals 3</f-when></template>
+</f-template>
+<!-- greater than or equals -->
+<f-template name="test-element-ge">
+    <template><f-when value="{{varA >= 2}}">Two and Over</f-when></template>
+</f-template>
+<!-- greater than -->
+<f-template name="test-element-gt">
+    <template><f-when value="{{varA > 2}}">Over two</f-when></template>
+</f-template>
+<!-- less than or equals -->
+<f-template name="test-element-le">
+    <template><f-when value="{{varA <= 2}}">Two and Under</f-when></template>
+</f-template>
+<!-- less than -->
+<f-template name="test-element-lt">
+    <template><f-when value="{{varA < 2}}">Under two</f-when></template>
+</f-template>
+<!-- or -->
+<f-template name="test-element-or">
+    <template><f-when value="{{thisVar || thatVar}}">This or That</f-when></template>
+</f-template>
+<!-- and -->
+<f-template name="test-element-and">
+    <template><f-when value="{{thisVar && thatVar}}">This and That</f-when></template>
+</f-template>
+<!-- nested when -->
+<f-template name="nested-when">
+    <template>
+        <f-when value="{{error}}">
+            <div class="error" role="alert">{{strings.errorMessage}}</div>
+        </f-when>
+        <div class="buttons">
+            <f-when value="{{!error}}">
+                <f-when value="{{showProgress}}">
+                    <progress></progress>
+                </f-when>
+                <f-when value="{{!showProgress}}">
+                    <button ?disabled="{{!enableContinue}}" @click="{handleClick()}">
+                        {{strings.continueButtonText}}
+                    </button>
+                </f-when>
+            </f-when>
+            <f-when value="{{error}}">
+                <button>{{strings.retryButtonText}}</button>
+            </f-when>
+        </div>
+    </template>
+</f-template>
+<!-- event -->
+<f-template name="test-element-event">
+    <template><f-when value="{{show}}"><button @click="{handleClick()}">Click me</button></f-when></template>
+</f-template>
