diff --git a/website/docs/components/modal/index.js b/website/docs/components/modal/index.js
deleted file mode 100644
index 5d77312042f..00000000000
--- a/website/docs/components/modal/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2025
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-export default class Index extends Component {
-  @tracked basicModalActive = false;
-  @tracked formModalActive = false;
-
-  @action
-  noop() {
-    //
-  }
-
-  @action
-  activateModal(modal) {
-    this[modal] = true;
-  }
-
-  @action
-  deactivateModal(modal) {
-    this[modal] = false;
-  }
-
-  @action
-  submitForm() {
-    this.formModalActive = false;
-  }
-}
diff --git a/website/docs/components/modal/partials/code/code-snippets/modal-basic.classic.hbs b/website/docs/components/modal/partials/code/code-snippets/modal-basic.classic.hbs
new file mode 100644
index 00000000000..756ec3d348e
--- /dev/null
+++ b/website/docs/components/modal/partials/code/code-snippets/modal-basic.classic.hbs
@@ -0,0 +1,15 @@
+<Hds::Button @text="Open basic modal" @color="secondary" {{on "click" this.activateModal}} />
+
+{{#if this.isOpen}}
+  <Hds::Modal id="basic-modal" @onClose={{this.deactivateModal}} as |M|>
+    <M.Header>
+      Modal title
+    </M.Header>
+    <M.Body>
+      <p class="hds-typography-body-300 hds-foreground-primary">Modal content</p>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
+    </M.Footer>
+  </Hds::Modal>
+{{/if}}
\ No newline at end of file
diff --git a/website/docs/components/modal/partials/code/code-snippets/modal-basic.classic.js b/website/docs/components/modal/partials/code/code-snippets/modal-basic.classic.js
new file mode 100644
index 00000000000..a81b49f04f6
--- /dev/null
+++ b/website/docs/components/modal/partials/code/code-snippets/modal-basic.classic.js
@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class LocalComponent extends Component {
+  @tracked isOpen = false;
+
+  @action
+  activateModal() {
+    this.isOpen = true;
+  }
+
+  @action
+  deactivateModal() {
+    this.isOpen = false;
+  }
+}
diff --git a/website/docs/components/modal/partials/code/code-snippets/modal-basic.gts b/website/docs/components/modal/partials/code/code-snippets/modal-basic.gts
new file mode 100644
index 00000000000..24282f40da1
--- /dev/null
+++ b/website/docs/components/modal/partials/code/code-snippets/modal-basic.gts
@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+
+import {
+  HdsModal,
+  HdsButton,
+} from '@hashicorp/design-system-components/components';
+
+export default class LocalComponent extends Component {
+  @tracked isOpen = false;
+
+  activateModal = () => {
+    this.isOpen = true;
+  };
+
+  deactivateModal = () => {
+    this.isOpen = false;
+  };
+
+  <template>
+    <HdsButton
+      @text="Open basic modal"
+      @color="secondary"
+      {{on "click" this.activateModal}}
+    />
+
+    {{#if this.isOpen}}
+      <HdsModal id="basic-modal" @onClose={{this.deactivateModal}} as |M|>
+        <M.Header>
+          Modal title
+        </M.Header>
+        <M.Body>
+          <p class="hds-typography-body-300 hds-foreground-primary">Modal
+            content</p>
+        </M.Body>
+        <M.Footer as |F|>
+          <HdsButton type="button" @text="Confirm" {{on "click" F.close}} />
+        </M.Footer>
+      </HdsModal>
+    {{/if}}
+  </template>
+}
diff --git a/website/docs/components/modal/partials/code/code-snippets/modal-with-form.classic.hbs b/website/docs/components/modal/partials/code/code-snippets/modal-with-form.classic.hbs
new file mode 100644
index 00000000000..6b09800479b
--- /dev/null
+++ b/website/docs/components/modal/partials/code/code-snippets/modal-with-form.classic.hbs
@@ -0,0 +1,30 @@
+<Hds::Button @text="Open form modal" @color="secondary" {{on "click" this.activateModal}} />
+
+{{#if this.isOpen}}
+  <Hds::Modal id="form-modal" @onClose={{this.deactivateModal}} as |M|>
+    <M.Header>
+      Why do you want to leave the beta?
+    </M.Header>
+    <M.Body>
+      <Hds::Form id="leaving-beta-form" {{on "submit" this.submitForm}} as |FORM|>
+        <FORM.Section>
+          <Hds::Form::Select::Field @width="100%" as |F|>
+            <F.Label>Select the primary reason</F.Label>
+            <F.Options>
+              <option></option>
+            </F.Options>
+          </Hds::Form::Select::Field>
+          <Hds::Form::Textarea::Field @isOptional={{true}} as |F|>
+            <F.Label>Your feedback</F.Label>
+          </Hds::Form::Textarea::Field>
+        </FORM.Section>
+      </Hds::Form>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button type="submit" form="leaving-beta-form" @text="Leave Beta" />
+        <Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
+{{/if}}
\ No newline at end of file
diff --git a/website/docs/components/modal/partials/code/code-snippets/modal-with-form.classic.js b/website/docs/components/modal/partials/code/code-snippets/modal-with-form.classic.js
new file mode 100644
index 00000000000..6118e2d385d
--- /dev/null
+++ b/website/docs/components/modal/partials/code/code-snippets/modal-with-form.classic.js
@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class Index extends Component {
+  @tracked isOpen = false;
+
+  @action
+  activateModal() {
+    this.isOpen = true;
+  }
+
+  @action
+  deactivateModal() {
+    this.isOpen = false;
+  }
+
+  @action
+  submitForm() {
+    this.isOpen = false;
+  }
+}
diff --git a/website/docs/components/modal/partials/code/code-snippets/modal-with-form.gts b/website/docs/components/modal/partials/code/code-snippets/modal-with-form.gts
new file mode 100644
index 00000000000..12817bea556
--- /dev/null
+++ b/website/docs/components/modal/partials/code/code-snippets/modal-with-form.gts
@@ -0,0 +1,78 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+
+import {
+  HdsModal,
+  HdsButton,
+  HdsButtonSet,
+  HdsForm,
+  HdsFormSelectField,
+  HdsFormTextareaField,
+} from '@hashicorp/design-system-components/components';
+
+export default class LocalComponent extends Component {
+  @tracked isOpen = false;
+
+  activateModal = () => {
+    this.isOpen = true;
+  };
+
+  deactivateModal = () => {
+    this.isOpen = false;
+  };
+
+  submitForm = () => {
+    this.isOpen = false;
+  };
+
+  <template>
+    <HdsButton
+      @text="Open form modal"
+      @color="secondary"
+      {{on "click" this.activateModal}}
+    />
+
+    {{#if this.isOpen}}
+      <HdsModal id="form-modal" @onClose={{this.deactivateModal}} as |M|>
+        <M.Header>
+          Why do you want to leave the beta?
+        </M.Header>
+        <M.Body>
+          <HdsForm
+            id="leaving-beta-form"
+            {{on "submit" this.submitForm}}
+            as |FORM|
+          >
+            <FORM.Section>
+              <HdsFormSelectField @width="100%" as |F|>
+                <F.Label>Select the primary reason</F.Label>
+                <F.Options>
+                  <option></option>
+                </F.Options>
+              </HdsFormSelectField>
+              <HdsFormTextareaField @isOptional={{true}} as |F|>
+                <F.Label>Your feedback</F.Label>
+              </HdsFormTextareaField>
+            </FORM.Section>
+          </HdsForm>
+        </M.Body>
+        <M.Footer as |F|>
+          <HdsButtonSet>
+            <HdsButton
+              type="submit"
+              form="leaving-beta-form"
+              @text="Leave Beta"
+            />
+            <HdsButton
+              type="button"
+              @text="Cancel"
+              @color="secondary"
+              {{on "click" F.close}}
+            />
+          </HdsButtonSet>
+        </M.Footer>
+      </HdsModal>
+    {{/if}}
+  </template>
+}
diff --git a/website/docs/components/modal/partials/code/how-to-use.md b/website/docs/components/modal/partials/code/how-to-use.md
index e8e7b2d3c4d..b99cb56bed6 100644
--- a/website/docs/components/modal/partials/code/how-to-use.md
+++ b/website/docs/components/modal/partials/code/how-to-use.md
@@ -26,31 +26,7 @@ When the Modal has been closed, the browser automatically returns the focus to t
 
 ## How to use this component
 
-```handlebars
-<Hds::Button
-  @text="Open basic modal"
-  @color="secondary"
-  {{on "click" (fn this.activateModal "basicModalActive")}}
-/>
-
-{{#if this.basicModalActive}}
-  <Hds::Modal
-    id="basic-modal"
-    @onClose={{fn this.deactivateModal "basicModalActive"}}
-    as |M|
-  >
-    <M.Header>
-      Modal title
-    </M.Header>
-    <M.Body>
-      <p class="hds-typography-body-300 hds-foreground-primary">Modal content</p>
-    </M.Body>
-    <M.Footer as |F|>
-      <Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
-    </M.Footer>
-  </Hds::Modal>
-{{/if}}
-```
+[[code-snippets/modal-basic]]
 
 ### Form within a Modal dialog
 
@@ -60,49 +36,4 @@ The `<form>` element should be placed in the yielded `Body` subcomponent. We als
 
 When the Modal dialog contains information that might be lost on close, use a confirmation message before discarding it.
 
-```handlebars
-<Hds::Button
-  @text="Open form modal"
-  @color="secondary"
-  {{on "click" (fn this.activateModal "formModalActive")}}
-/>
-
-{{#if this.formModalActive}}
-  <Hds::Modal
-    id="form-modal"
-    @onClose={{fn this.deactivateModal "formModalActive"}}
-    as |M|
-  >
-    <M.Header>
-      Why do you want to leave the beta?
-    </M.Header>
-    <M.Body>
-      <Hds::Form
-        id="leaving-beta-form"
-        {{on "submit" (fn this.submitForm)}}
-        as |FORM|
-      >
-        <FORM.Section>
-          <Hds::Form::Select::Field autofocus @width="100%" as |F|>
-            <F.Label>Select the primary reason</F.Label>
-            <F.Options>
-              <option></option>
-            </F.Options>
-          </Hds::Form::Select::Field>
-          <Hds::Form::Textarea::Field @isOptional={{true}} as |F|>
-            <F.Label>Your feedback</F.Label>
-          </Hds::Form::Textarea::Field>
-        </FORM.Section>
-      </Hds::Form>
-    </M.Body>
-    <M.Footer as |F|>
-      <Hds::ButtonSet>
-        <Hds::Button type="submit" form="leaving-beta-form" @text="Leave Beta" />
-        <Hds::Button type="button" @text="Cancel" @color="secondary"
-          {{on "click" F.close}}
-        />
-      </Hds::ButtonSet>
-    </M.Footer>
-  </Hds::Modal>
-{{/if}}
-```
+[[code-snippets/modal-with-form]]