diff --git a/change/@microsoft-fast-foundation-a6d78d55-521f-4741-a7b4-60f4e5b14a37.json b/change/@microsoft-fast-foundation-a6d78d55-521f-4741-a7b4-60f4e5b14a37.json
new file mode 100644
index 00000000000..b37813cdddd
--- /dev/null
+++ b/change/@microsoft-fast-foundation-a6d78d55-521f-4741-a7b4-60f4e5b14a37.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Foundation: Updated Horizontal Scroll template (https://github.com/microsoft/fast/pull/6921)",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/change/@microsoft-fast-ssr-b504d376-3c29-4415-8124-f4fd4f05c078.json b/change/@microsoft-fast-ssr-b504d376-3c29-4415-8124-f4fd4f05c078.json
new file mode 100644
index 00000000000..dda30d283a4
--- /dev/null
+++ b/change/@microsoft-fast-ssr-b504d376-3c29-4415-8124-f4fd4f05c078.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix tests for related foundation template changes",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index c246768e513..7c1f35d4b83 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2383,10 +2383,11 @@ export type HorizontalPosition = ValuesOf<typeof HorizontalPosition>;
 export type HorizontalScrollOptions = StartEndOptions<FASTHorizontalScroll> & {
     nextFlipper?: StaticallyComposableHTML<FASTHorizontalScroll>;
     previousFlipper?: StaticallyComposableHTML<FASTHorizontalScroll>;
+    flipper: TemplateElementDependency;
 };
 
 // @public (undocumented)
-export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(options?: HorizontalScrollOptions): ElementViewTemplate<T>;
+export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(options: HorizontalScrollOptions): ElementViewTemplate<T>;
 
 // @public
 export const HorizontalScrollView: {
@@ -2900,6 +2901,7 @@ export type YearFormat = ValuesOf<typeof YearFormat>;
 // dist/dts/calendar/calendar.d.ts:53:5 - (ae-incompatible-release-tags) The symbol "dataGrid" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/data-grid/data-grid-row.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "dataGridCell" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/data-grid/data-grid.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "dataGridRow" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
+// dist/dts/horizontal-scroll/horizontal-scroll.options.d.ts:39:5 - (ae-incompatible-release-tags) The symbol "flipper" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/picker/picker.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "anchoredRegion" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/picker/picker.template.d.ts:10:5 - (ae-incompatible-release-tags) The symbol "pickerMenu" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/picker/picker.template.d.ts:11:5 - (ae-incompatible-release-tags) The symbol "pickerMenuOption" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
diff --git a/packages/web-components/fast-foundation/src/flipper/flipper.template.ts b/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
index da8cfa48d0b..bc6354cb389 100644
--- a/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
+++ b/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
@@ -19,7 +19,7 @@ export function flipperTemplate<T extends FASTFlipper>(
         let existing = templateCache[direction];
 
         if (!existing) {
-            templateCache[direction] = existing = html`
+            templateCache[direction] = existing = html<T>`
                 <span part="${direction}" class="${direction}">
                     <slot name="${direction}">
                         ${staticallyCompose(options[direction])}
@@ -31,7 +31,7 @@ export function flipperTemplate<T extends FASTFlipper>(
         return existing;
     }
 
-    return html`
+    return html<T>`
         <template
             role="button"
             aria-disabled="${x => (x.disabled ? true : void 0)}"
diff --git a/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts b/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts
index a66789a40f8..f28f1b1a65f 100644
--- a/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts
+++ b/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts
@@ -21,6 +21,7 @@ const styles = css`
         position: relative;
         width: var(--size);
     }
+
     :host::before {
         background: var(--accent-fill-rest);
         border-radius: 50%;
@@ -37,9 +38,7 @@ const styles = css`
     .next,
     .previous {
         display: grid;
-        height: 16px;
         position: relative;
-        width: 16px;
     }
 
     :host([disabled]) {
@@ -49,29 +48,36 @@ const styles = css`
         color: var(--neutral-foreground-rest);
         pointer-events: none;
     }
+
     :host([disabled])::before,
     :host([disabled]:hover)::before,
     :host([disabled]:active)::before {
         background: var(--neutral-fill-stealth-rest);
         border-color: var(--neutral-stroke-rest);
     }
+
     :host(:hover) {
         color: var(--foreground-on-accent-hover);
     }
+
     :host(:hover)::before {
         background: var(--accent-fill-hover);
         border-color: var(--accent-fill-hover);
     }
+
     :host(:active) {
         color: var(--foreground-on-accent-active);
     }
+
     :host(:active)::before {
         background: var(--accent-fill-active);
         border-color: var(--accent-fill-active);
     }
+
     :host(:focus-visible) {
         outline: none;
     }
+
     :host(:focus-visible)::before {
         border-color: var(--focus-stroke-outer);
         box-shadow: 0 0 0 calc((var(--focus-stroke-width) - var(--stroke-width)) * 1px)
@@ -79,6 +85,7 @@ const styles = css`
             0 0 0 calc((var(--focus-stroke-width) + var(--stroke-width)) * 1px)
                 var(--focus-stroke-inner) inset;
     }
+
     :host::-moz-focus-inner {
         border: 0;
     }
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/README.md b/packages/web-components/fast-foundation/src/horizontal-scroll/README.md
index 435ae8f6366..00eb9d87e0c 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/README.md
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/README.md
@@ -195,22 +195,25 @@ export const myHorizontalScroll = HorizontalScroll.compose<HorizontalScrollOptio
 
 #### CSS Parts
 
-| Name                     | Description                               |
-| ------------------------ | ----------------------------------------- |
-| `scroll-area`            | Wraps the entire scrollable region        |
-| `scroll-view`            | The visible scroll area                   |
-| `content-container`      | The container for the content             |
-| `scroll-prev`            | The previous flipper container            |
-| `scroll-action-previous` | The element wrapping the previous flipper |
-| `scroll-next`            | The next flipper container                |
-| `scroll-action-next`     | The element wrapping the next flipper     |
+| Name               | Description                        |
+| ------------------ | ---------------------------------- |
+| `scroll-area`      | Wraps the entire scrollable region |
+| `scroll-view`      | The visible scroll area            |
+| `content`          | The container for the content      |
+| `scroll-previous`  | The previous flipper container     |
+| `previous-flipper` | The previous flipper               |
+| `scroll-next`      | The next flipper container         |
+| `next-flipper`     | The next flipper                   |
 
 #### Slots
 
-| Name    | Description                                          |
-| ------- | ---------------------------------------------------- |
-| `start` | Content which can be provided before the scroll area |
-| `end`   | Content which can be provided after the scroll area  |
+| Name               | Description                                          |
+| ------------------ | ---------------------------------------------------- |
+| `start`            | Content which can be provided before the scroll area |
+| `end`              | Content which can be provided after the scroll area  |
+|                    | Content in the scroll area                           |
+| `previous-flipper` | The component for scrolling previous                 |
+| `next-flipper`     | The component for scrolling next                     |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.options.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.options.ts
index 805c648d98a..59e3c7b725b 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.options.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.options.ts
@@ -1,5 +1,5 @@
+import type { StartEndOptions, TemplateElementDependency } from "../patterns/index.js";
 import type { StaticallyComposableHTML, ValuesOf } from "../utilities/index.js";
-import type { StartEndOptions } from "../patterns/index.js";
 import type { FASTHorizontalScroll } from "./horizontal-scroll.js";
 
 /**
@@ -41,4 +41,5 @@ export type ScrollEasing = ValuesOf<typeof ScrollEasing>;
 export type HorizontalScrollOptions = StartEndOptions<FASTHorizontalScroll> & {
     nextFlipper?: StaticallyComposableHTML<FASTHorizontalScroll>;
     previousFlipper?: StaticallyComposableHTML<FASTHorizontalScroll>;
+    flipper: TemplateElementDependency;
 };
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.pw.spec.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
index 34fc96643f9..a251a75e105 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
@@ -24,7 +24,7 @@ test.describe("HorizontalScroll", () => {
 
         scrollNext = element.locator(".scroll-next");
 
-        scrollPrevious = element.locator(".scroll-prev");
+        scrollPrevious = element.locator(".scroll-previous");
 
         scrollView = element.locator(".scroll-view");
 
@@ -59,7 +59,7 @@ test.describe("HorizontalScroll", () => {
                 node.scrollToNext();
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 375);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 379);
         });
 
         test("should not scroll past the beginning", async () => {
@@ -165,7 +165,7 @@ test.describe("HorizontalScroll", () => {
 
             await nextFlipper.click();
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 375);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 379);
 
             await previousFlipper.click();
 
@@ -175,7 +175,7 @@ test.describe("HorizontalScroll", () => {
 
             await nextFlipper.click();
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 250);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 254);
         });
 
         test("should scroll to previous when only 2 items wide", async ({ page }) => {
@@ -193,7 +193,7 @@ test.describe("HorizontalScroll", () => {
                 node.scrollToNext();
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 125);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 129);
 
             await element.evaluate((node: FASTHorizontalScroll) => {
                 node.scrollToPrevious();
@@ -221,9 +221,9 @@ test.describe("HorizontalScroll", () => {
                 node.scrollInView(card as HTMLElement, 0);
             }, await lastCard.elementHandle());
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1375);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1383);
 
-            await expect(lastCard).toHaveJSProperty("offsetLeft", 1875);
+            await expect(lastCard).toHaveJSProperty("offsetLeft", 1879);
 
             await expect(lastCard).toHaveJSProperty("offsetWidth", 120);
 
@@ -249,9 +249,9 @@ test.describe("HorizontalScroll", () => {
                 node.scrollInView(cardsCount - 1, 0);
             }, await cards.count());
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1375);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1383);
 
-            await expect(lastCard).toHaveJSProperty("offsetLeft", 1875);
+            await expect(lastCard).toHaveJSProperty("offsetLeft", 1879);
 
             await expect(lastCard).toHaveJSProperty("offsetWidth", 120);
 
@@ -277,9 +277,9 @@ test.describe("HorizontalScroll", () => {
                 node.scrollInView(12, 0);
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1125);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1129);
 
-            await expect(thirdLastCard).toHaveJSProperty("offsetLeft", 1500);
+            await expect(thirdLastCard).toHaveJSProperty("offsetLeft", 1504);
 
             await expect(thirdLastCard).toHaveJSProperty("offsetWidth", 120);
 
@@ -289,19 +289,19 @@ test.describe("HorizontalScroll", () => {
                 node.scrollInView(12, 80);
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1125);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1129);
 
             await element.evaluate((node: FASTHorizontalScroll) => {
                 node.scrollInView(12, 0, 200);
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1250);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1254);
 
             await element.evaluate((node: FASTHorizontalScroll) => {
                 node.scrollInView(2, 20);
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 125);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 129);
         });
 
         test("Should not scroll with `scrollInView()` when the item is in view", async ({
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts
index 3db66d5d0a9..d47f7be6fce 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts
@@ -1,7 +1,7 @@
 import type { ElementViewTemplate } from "@microsoft/fast-element";
 import { elements, html, ref, slotted, when } from "@microsoft/fast-element";
+import { endSlotTemplate, startSlotTemplate, tagFor } from "../patterns/index.js";
 import { staticallyCompose } from "../utilities/template-helpers.js";
-import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
 import type { FASTHorizontalScroll } from "./horizontal-scroll.js";
 import type { HorizontalScrollOptions } from "./horizontal-scroll.options.js";
 
@@ -9,8 +9,9 @@ import type { HorizontalScrollOptions } from "./horizontal-scroll.options.js";
  * @public
  */
 export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(
-    options: HorizontalScrollOptions = {}
+    options: HorizontalScrollOptions
 ): ElementViewTemplate<T> {
+    const flipperTag = html.partial(tagFor(options.flipper));
     return html<T>`
         <template @keyup="${(x, c) => x.keyupHandler(c.event as KeyboardEvent)}">
             ${startSlotTemplate(options)}
@@ -21,11 +22,7 @@ export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(
                     @scroll="${x => x.scrolled()}"
                     ${ref("scrollContainer")}
                 >
-                    <div
-                        class="content-container"
-                        part="content-container"
-                        ${ref("content")}
-                    >
+                    <div class="content" part="content" ${ref("content")}>
                         <slot
                             ${slotted({
                                 property: "scrollItems",
@@ -38,26 +35,43 @@ export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(
                     x => x.view !== "mobile",
                     html<T>`
                         <div
-                            class="scroll scroll-prev"
-                            part="scroll-prev"
+                            class="scroll-previous"
+                            part="scroll-previous"
                             ${ref("previousFlipperContainer")}
                         >
-                            <div class="scroll-action" part="scroll-action-previous">
-                                <slot name="previous-flipper">
-                                    ${staticallyCompose(options.previousFlipper)}
-                                </slot>
-                            </div>
+                            <slot name="previous-flipper">
+                                ${staticallyCompose(
+                                    options.previousFlipper ??
+                                        html<T>`
+                                            <${flipperTag}
+                                                part="previous-flipper"
+                                                @click="${x => x.scrollToPrevious()}"
+                                                direction="previous"
+                                                aria-hidden="${x =>
+                                                    x.flippersHiddenFromAT}"
+                                            ></${flipperTag}>
+                                        `
+                                )}
+                            </slot>
                         </div>
                         <div
-                            class="scroll scroll-next"
+                            class="scroll-next"
                             part="scroll-next"
                             ${ref("nextFlipperContainer")}
                         >
-                            <div class="scroll-action" part="scroll-action-next">
-                                <slot name="next-flipper">
-                                    ${staticallyCompose(options.nextFlipper)}
-                                </slot>
-                            </div>
+                            <slot name="next-flipper">
+                                ${staticallyCompose(
+                                    options.nextFlipper ??
+                                        html<T>`
+                                            <${flipperTag}
+                                                part="next-flipper"
+                                                @click="${x => x.scrollToNext()}"
+                                                aria-hidden="${x =>
+                                                    x.flippersHiddenFromAT}"
+                                            ></${flipperTag}>
+                                        `
+                                )}
+                            </slot>
                         </div>
                     `
                 )}
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
index e21b2342807..3f464ca5127 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
@@ -17,13 +17,16 @@ import { ScrollEasing } from "./horizontal-scroll.options.js";
  *
  * @slot start - Content which can be provided before the scroll area
  * @slot end - Content which can be provided after the scroll area
+ * @slot - Content in the scroll area
+ * @slot previous-flipper - The component for scrolling previous
+ * @slot next-flipper - The component for scrolling next
  * @csspart scroll-area - Wraps the entire scrollable region
  * @csspart scroll-view - The visible scroll area
- * @csspart content-container - The container for the content
- * @csspart scroll-prev - The previous flipper container
- * @csspart scroll-action-previous - The element wrapping the previous flipper
+ * @csspart content - The container for the content
+ * @csspart scroll-previous - The previous flipper container
+ * @csspart previous-flipper - The previous flipper
  * @csspart scroll-next - The next flipper container
- * @csspart scroll-action-next - The element wrapping the next flipper
+ * @csspart next-flipper - The next flipper
  * @fires scrollstart - Fires a custom 'scrollstart' event when scrolling
  * @fires scrollend - Fires a custom 'scrollend' event when scrolling stops
  *
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/stories/horizontal-scroll.register.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/stories/horizontal-scroll.register.ts
index 57c5a747424..d4198703cdd 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/stories/horizontal-scroll.register.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/stories/horizontal-scroll.register.ts
@@ -1,65 +1,72 @@
-import { css, html } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element";
 import { FASTHorizontalScroll } from "../horizontal-scroll.js";
 import { horizontalScrollTemplate } from "../horizontal-scroll.template.js";
 
 const ActionsStyles = css`
+    :host {
+        --scroll-fade-next: var(--fill-color);
+        --scroll-fade-previous: var(--fill-color);
+    }
+
     .scroll-area {
         position: relative;
     }
 
-    div.scroll-view {
-        overflow-x: hidden;
+    .scroll-view {
+        overflow-x: hidden !important;
     }
 
-    .scroll {
-        bottom: 0;
-        pointer-events: none;
+    .scroll-next,
+    .scroll-previous {
         position: absolute;
-        right: 0;
         top: 0;
+        bottom: 0;
         user-select: none;
         width: 100px;
+        display: flex;
+        align-items: center;
     }
 
-    .scroll.disabled {
+    .scroll-next.disabled,
+    .scroll-previous.disabled {
         display: none;
     }
 
-    .scroll::before,
-    .scroll-action {
-        left: 0;
-        position: absolute;
-    }
-
-    .scroll::before {
-        background: linear-gradient(to right, var(--scroll-fade-previous), transparent);
+    .scroll-next::before,
+    .scroll-previous::before {
         content: "";
         display: block;
+        position: absolute;
         height: 100%;
         width: 100%;
+        pointer-events: none;
     }
 
-    .scroll-action {
-        pointer-events: auto;
-        right: auto;
-        top: 50%;
-        transform: translate(-50%, -50%);
+    .scroll-next {
+        right: 0;
+        justify-content: flex-end;
     }
 
-    .scroll-prev {
-        right: auto;
-        left: 0;
+    .scroll-next::before {
+        background: linear-gradient(to right, transparent, var(--scroll-fade-next));
     }
-    .scroll.scroll-next::before,
-    .scroll-next .scroll-action {
-        left: auto;
-        right: 0;
+
+    .scroll-previous {
+        justify-content: flex-start;
     }
-    .scroll.scroll-next::before {
-        background: linear-gradient(to right, transparent, var(--scroll-fade-next));
+
+    .scroll-previous::before {
+        background: linear-gradient(to right, var(--scroll-fade-previous), transparent);
     }
-    .scroll-next .scroll-action {
-        transform: translate(50%, -50%);
+
+    slot[name="previous-flipper"] *,
+    ::slotted([slot="previous-flipper"]) {
+        transform: translateX(-50%);
+    }
+
+    slot[name="next-flipper"] *,
+    ::slotted([slot="next-flipper"]) {
+        transform: translateX(50%);
     }
 `;
 
@@ -75,24 +82,25 @@ const styles = css`
     .scroll-view {
         overflow-x: auto;
         scrollbar-width: none;
+        padding: 4px;
     }
 
     ::-webkit-scrollbar {
         display: none;
     }
 
-    .content-container {
+    .content {
         align-items: var(--scroll-align);
         display: inline-flex;
         flex-wrap: nowrap;
         position: relative;
     }
 
-    .content-container ::slotted(*) {
+    .content ::slotted(*) {
         margin-right: var(--scroll-item-spacing);
     }
 
-    .content-container ::slotted(*:last-child) {
+    .content ::slotted(*:last-child) {
         margin-right: 0;
     }
 `;
@@ -113,19 +121,7 @@ class HorizontalScroll extends FASTHorizontalScroll {
 HorizontalScroll.define({
     name: "fast-horizontal-scroll",
     template: horizontalScrollTemplate({
-        nextFlipper: html`
-            <fast-flipper
-                @click="${x => x.scrollToNext()}"
-                aria-hidden="${x => x.flippersHiddenFromAT}"
-            ></fast-flipper>
-        `,
-        previousFlipper: html`
-            <fast-flipper
-                @click="${x => x.scrollToPrevious()}"
-                direction="previous"
-                aria-hidden="${x => x.flippersHiddenFromAT}"
-            ></fast-flipper>
-        `,
+        flipper: "fast-flipper",
     }),
     styles,
 });
diff --git a/packages/web-components/fast-ssr/src/dom-shim.spec.ts b/packages/web-components/fast-ssr/src/dom-shim.spec.ts
index 4828199d022..3f4e7db99cd 100644
--- a/packages/web-components/fast-ssr/src/dom-shim.spec.ts
+++ b/packages/web-components/fast-ssr/src/dom-shim.spec.ts
@@ -42,6 +42,7 @@ const pickerListItem = deriveName(Foundation.FASTPickerListItem);
 const pickerMenu = deriveName(Foundation.FASTPickerMenu);
 const pickerMenuOption = deriveName(Foundation.FASTPickerMenuOption);
 const progressRing = deriveName(Foundation.FASTProgressRing);
+const flipper = deriveName(Foundation.FASTFlipper);
 
 const componentsAndTemplates: [typeof FASTElement, ElementViewTemplate][] = [
     [Foundation.FASTAccordion, Foundation.accordionTemplate()],
@@ -72,7 +73,9 @@ const componentsAndTemplates: [typeof FASTElement, ElementViewTemplate][] = [
     [Foundation.FASTDisclosure, Foundation.disclosureTemplate()],
     [Foundation.FASTDivider, Foundation.dividerTemplate()],
     [Foundation.FASTFlipper, Foundation.flipperTemplate()],
-    [Foundation.FASTHorizontalScroll, Foundation.horizontalScrollTemplate()],
+    [Foundation.FASTHorizontalScroll, Foundation.horizontalScrollTemplate({
+        flipper
+    })],
     [Foundation.FASTListbox as any as typeof FASTElement, Foundation.listboxTemplate()],
     [Foundation.FASTListboxOption, Foundation.listboxOptionTemplate()],
     [Foundation.FASTMenu, Foundation.menuTemplate()],