diff --git a/cypress/components/dialog-full-screen/dialog-full-screen.cy.tsx b/cypress/components/dialog-full-screen/dialog-full-screen.cy.tsx
deleted file mode 100644
index 2b409e2a85..0000000000
--- a/cypress/components/dialog-full-screen/dialog-full-screen.cy.tsx
+++ /dev/null
@@ -1,427 +0,0 @@
-import React from "react";
-import { DialogFullScreenProps } from "../../../src/components/dialog-full-screen";
-import {
-  DialogFullScreenComponent,
-  NestedDialog,
-  MultipleDialogsInDifferentProviders,
-  DialogFullScreenWithHeaderChildren,
-  mainDialogTitle,
-  nestedDialogTitle,
-  DialogFullScreenBackgroundScrollTestComponent,
-  DialogFullScreenBackgroundScrollWithOtherFocusableContainers,
-} from "../../../src/components/dialog-full-screen/dialog-full-screen-test.stories";
-import {
-  Default as DefaultDocsStory,
-  WithComplexExample,
-  WithDisableContentPadding,
-  WithHeaderChildren,
-  WithHelp,
-  WithHideableHeaderChildren,
-  WithBox,
-  FocusingADifferentFirstElement,
-  OtherFocusableContainers,
-} from "../../../src/components/dialog-full-screen/dialog-full-screen.stories";
-import {
-  dialogTitle,
-  dialogSubtitle,
-  alertDialogPreview as dialogPreview,
-} from "../../locators/dialog";
-import {
-  dialogFullScreenPreview,
-  dialogFullScreenChildren,
-} from "../../locators/dialog-full-screen";
-import {
-  closeIconButton,
-  openDialogByName,
-  portal,
-  getDataElementByValue,
-  tooltipPreview,
-  getComponent,
-  getElement,
-} from "../../locators/index";
-import { buttonDataComponent } from "../../locators/button";
-import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
-import { contentElement } from "../../locators/content/index";
-import { keyCode, continuePressingTABKey } from "../../support/helper";
-import { CHARACTERS } from "../../support/component-helper/constants";
-
-const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
-const testAria = "cypress_aria";
-
-context("Testing DialogFullScreen component", () => {
-  describe("render DialogFullScreen component and check properties", () => {
-    it("should close Dialog Full Screen component after click on closeIcon", () => {
-      CypressMountWithProviders(<DialogFullScreenComponent showCloseIcon />);
-
-      closeIconButton().should("exist");
-      dialogFullScreenPreview().should("exist");
-      closeIconButton().click();
-      dialogFullScreenPreview().should("not.exist");
-    });
-
-    it.each(specialCharacters)(
-      "should render DialogFullScreen using %s as title",
-      (title) => {
-        CypressMountWithProviders(<DialogFullScreenComponent title={title} />);
-
-        dialogTitle().should("have.text", title);
-      }
-    );
-
-    it.each(specialCharacters)(
-      "should render DialogFullScreen using %s as subtitle",
-      (subtitle) => {
-        CypressMountWithProviders(
-          <DialogFullScreenComponent
-            title="Dialog Full Screen Title"
-            subtitle={subtitle}
-          />
-        );
-
-        dialogSubtitle().should("have.text", subtitle);
-      }
-    );
-
-    it.each(specialCharacters)(
-      "should render DialogFullScreen component with %s as a children",
-      (childrenValue) => {
-        CypressMountWithProviders(
-          <DialogFullScreenComponent>{childrenValue}</DialogFullScreenComponent>
-        );
-
-        dialogFullScreenChildren().should("have.text", childrenValue);
-      }
-    );
-
-    it("should render DialogFullScreen with disabledEscKey prop and not be closed after clicking Escape button", () => {
-      CypressMountWithProviders(<DialogFullScreenComponent disableEscKey />);
-
-      dialogFullScreenPreview().should("exist");
-      dialogFullScreenPreview().trigger("keyup", keyCode("Esc"));
-      dialogFullScreenPreview().should("exist");
-    });
-
-    it("should close DialogFullScreen after pressing Escape button", () => {
-      CypressMountWithProviders(<DialogFullScreenComponent />);
-      dialogFullScreenPreview().should("exist");
-      dialogFullScreenPreview().trigger("keyup", keyCode("Esc"));
-      dialogFullScreenPreview().should("not.exist");
-    });
-
-    it("should call the cancel action after closing the DialogFullScreen", () => {
-      const callback: DialogFullScreenProps["onCancel"] = cy
-        .stub()
-        .as("onCancel");
-
-      CypressMountWithProviders(
-        <DialogFullScreenComponent onCancel={callback} />
-      );
-
-      closeIconButton().click();
-      cy.get("@onCancel").should("have.been.calledOnce");
-    });
-
-    it("should allow to close nested DialogFullScreen and then the main DialogFullScreen window", () => {
-      CypressMountWithProviders(<NestedDialog />);
-
-      openDialogByName(`Open ${mainDialogTitle}`).click();
-
-      openDialogByName(`Open ${nestedDialogTitle}`).click();
-
-      dialogPreview().should("exist");
-
-      portal().contains(nestedDialogTitle).should("be.visible");
-
-      dialogFullScreenPreview()
-        .contains(mainDialogTitle)
-        .should("not.be.visible");
-
-      portal().contains(nestedDialogTitle).trigger("keyup", keyCode("Esc"));
-
-      dialogPreview().should("not.exist");
-
-      dialogFullScreenPreview().contains(mainDialogTitle).should("be.visible");
-
-      dialogFullScreenPreview().trigger("keyup", keyCode("Esc"));
-
-      dialogFullScreenPreview().should("not.exist");
-    });
-
-    it("should render nested dialogs with the aria-modal property only set on the top one", () => {
-      CypressMountWithProviders(<NestedDialog />);
-
-      openDialogByName(`Open ${mainDialogTitle}`).click();
-
-      getElement("dialog-full-screen")
-        .should("have.attr", "aria-modal")
-        .and("eq", "true");
-
-      openDialogByName(`Open ${nestedDialogTitle}`).click();
-
-      getElement("dialog-full-screen").should("not.have.attr", "aria-modal");
-
-      getElement("dialog").should("have.attr", "aria-modal").and("eq", "true");
-    });
-
-    it("should always place focus on the inner dialog when tabbing with nested dialogs after focus is lost", () => {
-      CypressMountWithProviders(<NestedDialog />);
-
-      openDialogByName(`Open ${mainDialogTitle}`).click();
-
-      openDialogByName(`Open ${nestedDialogTitle}`).click();
-
-      // click on the body in order to lose focus
-      cy.get("body").click();
-      cy.get("body").tab();
-
-      closeIconButton().eq(1).should("be.focused");
-    });
-
-    it("should render nested dialogs with the aria-modal property only set on the top one, even when the dialogs are wrapped in separate CarbonProviders", () => {
-      cy.mount(<MultipleDialogsInDifferentProviders />);
-
-      openDialogByName("Open Modal 1").click();
-
-      getElement("dialog-full-screen")
-        .should("have.attr", "aria-modal")
-        .and("eq", "true");
-
-      openDialogByName("Open Modal 2").click();
-
-      getElement("dialog-full-screen").should("not.have.attr", "aria-modal");
-
-      getElement("dialog").should("have.attr", "aria-modal").and("eq", "true");
-    });
-
-    it("should render DialogFullScreen component with aria-describedby", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenComponent aria-describedby={testAria} />
-      );
-
-      dialogFullScreenPreview()
-        .should("have.attr", "aria-describedby")
-        .and("contain", testAria);
-    });
-
-    it("should render DialogFullScreen component with aria-label", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenComponent aria-label={testAria} />
-      );
-      dialogFullScreenPreview()
-        .should("have.attr", "aria-label")
-        .and("contain", testAria);
-    });
-
-    it("should render DialogFullScreen component with aria-labelledby", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenComponent aria-labelledby={testAria} />
-      );
-
-      dialogFullScreenPreview()
-        .should("have.attr", "aria-labelledby")
-        .and("contain", testAria);
-    });
-
-    it("should render DialogFullScreen component using focusFirstElement", () => {
-      CypressMountWithProviders(<DialogFullScreenComponent />);
-      cy.contains("This should be focused first now").should("have.focus");
-    });
-
-    it("should render Dialog component disabling autofocus", () => {
-      CypressMountWithProviders(<DialogFullScreenComponent disableAutoFocus />);
-      cy.contains("This should be focused first now").should("not.have.focus");
-    });
-
-    it("should render DialogFullScreen component with help", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenComponent
-          title="Sample DialogFullScreen"
-          help="Some help text"
-        />
-      );
-      getDataElementByValue("question").trigger("mouseover");
-      tooltipPreview().should("have.text", "Some help text");
-    });
-
-    it("should render DialogFullScreen component with role", () => {
-      CypressMountWithProviders(<DialogFullScreenComponent role="dialog" />);
-      dialogFullScreenPreview()
-        .should("have.attr", "role")
-        .and("contain", "dialog");
-    });
-
-    it("should not render close icon when ShowCloseIcon is set to false", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenComponent showCloseIcon={false} />
-      );
-
-      closeIconButton().should("not.exist");
-    });
-
-    it("should render close icon when ShowCloseIcon is set to true. When you click the CloseIcon the Dialog is closed", () => {
-      CypressMountWithProviders(<DialogFullScreenComponent showCloseIcon />);
-
-      dialogFullScreenPreview().should("exist");
-      closeIconButton().click();
-      dialogFullScreenPreview().should("not.exist");
-    });
-
-    it("should render Dialog Full Screen with header children", () => {
-      CypressMountWithProviders(<DialogFullScreenWithHeaderChildren />);
-
-      getComponent("pill").eq(0).should("have.text", "A pill");
-
-      getComponent("pill").eq(1).should("have.text", "Another pill");
-    });
-
-    it("should render Dialog component with content padding disabled", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenComponent
-          title="Dialog Full Screen Title"
-          disableContentPadding
-        />
-      );
-      contentElement()
-        .should("have.css", "padding-right", "0px")
-        .should("have.css", "padding-bottom", "0px");
-    });
-
-    // skip this test for now as FE-6053 has not been fixed yet
-    it.skip("should render DialogFullScreen component with DisableClose prop", () => {
-      CypressMountWithProviders(<DialogFullScreenComponent disableClose />);
-      closeIconButton().click();
-      dialogFullScreenPreview().should("exist");
-    });
-  });
-
-  describe("should check accessibility for Dialog Full Screen", () => {
-    it("should check accessibility for default Dialog Full Screen component", () => {
-      CypressMountWithProviders(<DefaultDocsStory />);
-
-      buttonDataComponent().contains("Open DialogFullScreen").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for default Dialog Full Screen with complex example", () => {
-      CypressMountWithProviders(<WithComplexExample />);
-
-      buttonDataComponent().contains("Open DialogFullScreen").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for default Dialog Full Screen with disabled content padding", () => {
-      CypressMountWithProviders(<WithDisableContentPadding />);
-
-      buttonDataComponent().contains("Open DialogFullScreen").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for default Dialog Full Screen component with header children", () => {
-      CypressMountWithProviders(<WithHeaderChildren />);
-
-      buttonDataComponent().contains("Open DialogFullScreen").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for default Dialog Full Screen component with help", () => {
-      CypressMountWithProviders(<WithHelp />);
-
-      buttonDataComponent().contains("Open DialogFullScreen").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for default Dialog Full Screen component with hideable header children", () => {
-      CypressMountWithProviders(<WithHideableHeaderChildren />);
-
-      buttonDataComponent().contains("Open DialogFullScreen").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for default Dialog Full Screen component with box", () => {
-      CypressMountWithProviders(<WithBox />);
-
-      buttonDataComponent().contains("Open DialogFullScreen").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for default Dialog Full Screen component using autoFocus", () => {
-      CypressMountWithProviders(<FocusingADifferentFirstElement />);
-
-      buttonDataComponent()
-        .contains("Open Demo using focusFirstElement")
-        .click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-      closeIconButton().click();
-
-      buttonDataComponent().contains("Open Demo using autoFocus").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for default Dialog Full Screen component with other focusable containers", () => {
-      CypressMountWithProviders(<OtherFocusableContainers />);
-
-      buttonDataComponent().contains("Open DialogFullScreen").click();
-      closeIconButton().should("be.visible");
-      cy.checkAccessibility();
-    });
-  });
-
-  describe("test background scroll when tabbing", () => {
-    it("tabbing forward through the dialog and back to the start should not make the background scroll to the bottom", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenBackgroundScrollTestComponent />
-      );
-
-      continuePressingTABKey(3);
-
-      closeIconButton().should("be.focused");
-
-      cy.checkNotInViewport("#bottom-box");
-    });
-
-    it("tabbing backward through the dialog and back to the start should not make the background scroll to the bottom", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenBackgroundScrollTestComponent />
-      );
-
-      continuePressingTABKey(2, true);
-
-      closeIconButton().should("be.focused");
-
-      cy.checkNotInViewport("#bottom-box");
-    });
-
-    it("tabbing forward through the dialog and other focusable containers back to the start should not make the background scroll to the bottom", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenBackgroundScrollWithOtherFocusableContainers />
-      );
-
-      continuePressingTABKey(6);
-
-      closeIconButton().eq(0).should("be.focused");
-
-      cy.checkNotInViewport("#bottom-box");
-    });
-
-    it("tabbing backward through the dialog and other focusable containers back to the start should not make the background scroll to the bottom", () => {
-      CypressMountWithProviders(
-        <DialogFullScreenBackgroundScrollWithOtherFocusableContainers />
-      );
-
-      continuePressingTABKey(7, true);
-
-      closeIconButton().eq(0).should("be.focused");
-
-      cy.checkNotInViewport("#bottom-box");
-    });
-  });
-});
diff --git a/cypress/components/navigation-bar/navigation-bar.cy.tsx b/cypress/components/navigation-bar/navigation-bar.cy.tsx
deleted file mode 100644
index d74431b661..0000000000
--- a/cypress/components/navigation-bar/navigation-bar.cy.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import React from "react";
-import Box from "../../../src/components/box";
-import NavigationBar, {
-  NavigationBarProps,
-} from "../../../src/components/navigation-bar";
-import { NavigationBarComponent } from "../../../src/components/navigation-bar/navigation-bar-test.stories";
-import { Menu, MenuItem } from "../../../src/components/menu";
-import * as stories from "../../../src/components/navigation-bar/navigation-bar.stories";
-import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
-
-import navigationBar from "../../locators/navigation-bar";
-import { COLOR, CHARACTERS } from "../../support/component-helper/constants";
-
-const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
-const testData = CHARACTERS.STANDARD;
-const variants = [
-  ["black", COLOR.BLACK],
-  ["light", "rgb(230, 235, 237)"],
-  ["white", "rgb(255, 255, 255)"],
-  ["dark", "rgb(0, 50, 76)"],
-] as [NavigationBarProps["navigationType"], string][];
-const offsetVal = [25, 100, -100];
-
-context("Testing NavigationBar component", () => {
-  describe("should render NavigationBar component", () => {
-    it.each(specialCharacters)(
-      "should render NavigationBar component with %s as a children",
-      (childrenValue) => {
-        CypressMountWithProviders(
-          <NavigationBarComponent>{childrenValue}</NavigationBarComponent>
-        );
-
-        navigationBar().should("have.text", childrenValue);
-      }
-    );
-
-    it("should render NavigationBar component with ariaLabel prop", () => {
-      CypressMountWithProviders(
-        <NavigationBarComponent ariaLabel={testData} />
-      );
-
-      navigationBar().should("have.attr", "aria-label", testData);
-    });
-
-    it.each(variants)(
-      "should render NavigationBar component with %s as a navigationType",
-      (navigationType, color) => {
-        CypressMountWithProviders(
-          <NavigationBarComponent navigationType={navigationType} />
-        );
-
-        navigationBar().should("have.css", "background-color", color);
-      }
-    );
-
-    it.each([
-      [true, "not.exist"],
-      [false, "be.visible"],
-    ])(
-      "should render NavigationBar component with isLoading prop set to %s",
-      (boolean, assertion) => {
-        CypressMountWithProviders(
-          <NavigationBarComponent isLoading={boolean}>
-            {testData}
-          </NavigationBarComponent>
-        );
-
-        cy.contains(testData).should(assertion);
-      }
-    );
-
-    it.each(["fixed", "sticky"] as NavigationBarProps["position"][])(
-      "should render NavigationBar component with position prop set to %s with orientation set to top",
-      (position) => {
-        CypressMountWithProviders(
-          <NavigationBarComponent position={position} orientation="top" />
-        );
-
-        navigationBar().should("have.css", "position", position);
-      }
-    );
-
-    it.each(["fixed", "sticky"] as NavigationBarProps["position"][])(
-      "should render NavigationBar component with position prop set to %s with orientation set to bottom",
-      (position) => {
-        CypressMountWithProviders(
-          <NavigationBarComponent position={position} orientation="bottom" />
-        );
-
-        navigationBar().should("have.css", "position", position);
-      }
-    );
-
-    describe.each(["top", "bottom"] as NavigationBarProps["orientation"][])(
-      "orientation %s",
-      (orientation) => {
-        it.each(offsetVal)(
-          "should render NavigationBar component with offset prop set to %s px",
-          (offset) => {
-            CypressMountWithProviders(
-              <NavigationBarComponent
-                offset={`${offset}px`}
-                orientation={orientation}
-                position="fixed"
-              />
-            );
-            navigationBar().should("have.css", orientation, `${offset}px`);
-          }
-        );
-      }
-    );
-
-    it.each(["top", "bottom"] as NavigationBarProps["orientation"][])(
-      "should render NavigationBar component with orientation prop set to %s",
-      (orientation) => {
-        CypressMountWithProviders(
-          <NavigationBarComponent orientation={orientation} position="fixed" />
-        );
-
-        navigationBar().should("have.css", orientation, "0px");
-      }
-    );
-
-    it.each([
-      ["fixed", "be.visible"],
-      ["sticky", "not.be.visible"],
-    ] as [NavigationBarProps["position"], string][])(
-      "should render NavigationBar component with position prop set to %s and work as expected",
-      (position, assertionOfFirstNavBar) => {
-        CypressMountWithProviders(
-          <div
-            style={{
-              height: "250px",
-            }}
-          >
-            <NavigationBar
-              position={position}
-              orientation="top"
-              offset="25px"
-              aria-label="header"
-            >
-              <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-                <Menu display="flex" flex="1">
-                  <MenuItem flex="1" onClick={() => {}}>
-                    Menu Item One
-                  </MenuItem>
-                </Menu>
-              </Box>
-            </NavigationBar>
-            <div
-              style={{
-                height: "1000px",
-              }}
-            />
-            <NavigationBar
-              position={position}
-              orientation="bottom"
-              offset="25px"
-              aria-label="footer"
-            >
-              <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
-                <Menu display="flex" flex="1">
-                  <MenuItem flex="1" onClick={() => {}}>
-                    Menu Item One
-                  </MenuItem>
-                </Menu>
-              </Box>
-            </NavigationBar>
-          </div>
-        );
-
-        navigationBar().eq(0).should("be.visible");
-        navigationBar().eq(1).should("be.visible");
-        cy.scrollTo("bottomRight");
-        navigationBar().eq(0).should(assertionOfFirstNavBar);
-        navigationBar().eq(1).should("be.visible");
-      }
-    );
-  });
-
-  describe("Accessibility tests for NavigationBar component", () => {
-    it("should pass accessibility tests for NavigationBar Default story", () => {
-      CypressMountWithProviders(<stories.Default />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar DarkTheme story", () => {
-      CypressMountWithProviders(<stories.DarkTheme />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar WhiteTheme story", () => {
-      CypressMountWithProviders(<stories.WhiteTheme />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar BlackTheme story", () => {
-      CypressMountWithProviders(<stories.BlackTheme />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar ExampleWithMenu story", () => {
-      CypressMountWithProviders(<stories.ExampleWithMenu />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar IsLoading story", () => {
-      CypressMountWithProviders(<stories.IsLoading />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar WithCustomSpacing story", () => {
-      CypressMountWithProviders(<stories.WithCustomSpacing />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar ContentMaxWidthBox story", () => {
-      CypressMountWithProviders(<stories.ContentMaxWidthBox />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar Sticky story", () => {
-      CypressMountWithProviders(<stories.Sticky />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for NavigationBar Fixed story", () => {
-      CypressMountWithProviders(<stories.Fixed />);
-
-      cy.checkAccessibility();
-    });
-  });
-});
diff --git a/cypress/locators/dialog-full-screen/index.js b/cypress/locators/dialog-full-screen/index.js
deleted file mode 100644
index 24c62e1ff3..0000000000
--- a/cypress/locators/dialog-full-screen/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-  DIALOG_FULL_SCREEN_CHILDREN,
-  DIALOG_FULL_SCREEN,
-  DIALOG_FULL_SCREEN_CLOSE_STATE,
-} from "./locators";
-
-// component preview locators
-export const dialogFullScreenChildren = () =>
-  cy.get(DIALOG_FULL_SCREEN_CHILDREN).eq(0);
-export const dialogFullScreenPreview = () => cy.get(DIALOG_FULL_SCREEN);
-export const dialogFullScreenPreviewClosedState = () =>
-  cy.get(DIALOG_FULL_SCREEN_CLOSE_STATE);
diff --git a/cypress/locators/dialog-full-screen/locators.js b/cypress/locators/dialog-full-screen/locators.js
deleted file mode 100644
index 1e29e18766..0000000000
--- a/cypress/locators/dialog-full-screen/locators.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// component preview locators
-export const DIALOG_FULL_SCREEN_CHILDREN = '[data-component="form"]';
-export const DIALOG_FULL_SCREEN = 'div[data-element="dialog-full-screen"]';
-export const DIALOG_FULL_SCREEN_CLOSE_STATE =
-  'div[data-component="dialog-full-screen"][data-state="closed"]';
diff --git a/playwright/components/index.ts b/playwright/components/index.ts
index bd57a4605e..d98765264b 100644
--- a/playwright/components/index.ts
+++ b/playwright/components/index.ts
@@ -10,6 +10,7 @@ import {
   LABEL,
   STICKY_FOOTER,
   COMMMON_DATA_ELEMENT_INPUT,
+  PORTAL,
 } from "./locators";
 
 export const icon = (page: Page) => {
@@ -67,3 +68,11 @@ export const label = (page: Page) => {
 export const legendSpan = (page: Page) => {
   return page.locator("legend > span");
 };
+
+export const openDialogByName = (page: Page, name: string) => {
+  getDataElementByValue(page, "main-text").filter({ hasText: name });
+};
+
+export const portal = (page: Page) => {
+  return page.locator(PORTAL).nth(1).locator("h1");
+};
diff --git a/playwright/components/navigation-bar/index.ts b/playwright/components/navigation-bar/index.ts
new file mode 100644
index 0000000000..3213f928fb
--- /dev/null
+++ b/playwright/components/navigation-bar/index.ts
@@ -0,0 +1,7 @@
+import { Page } from "playwright-core";
+import NAVIGATION_BAR from "./locators";
+
+// component preview locators
+const navigationBar = (page: Page) => page.locator(NAVIGATION_BAR);
+
+export default navigationBar;
diff --git a/playwright/components/navigation-bar/locators.ts b/playwright/components/navigation-bar/locators.ts
new file mode 100644
index 0000000000..1bc91e37c8
--- /dev/null
+++ b/playwright/components/navigation-bar/locators.ts
@@ -0,0 +1,4 @@
+// component preview locators
+const NAVIGATION_BAR = '[data-component="navigation-bar"]';
+
+export default NAVIGATION_BAR;
diff --git a/playwright/support/helper.ts b/playwright/support/helper.ts
index a26655bb1a..f33aa191f1 100644
--- a/playwright/support/helper.ts
+++ b/playwright/support/helper.ts
@@ -330,3 +330,23 @@ export const getDesignTokensByCssProperty = async (
   }
   return tokens;
 };
+
+export const continuePressingTAB = async (page: Page, count: number) => {
+  const promises = [];
+
+  for (let i = 0; i < count; i++) {
+    promises.push(page.keyboard.press(`Tab`));
+  }
+
+  await Promise.all(promises);
+};
+
+export const continuePressingSHIFTTAB = async (page: Page, count: number) => {
+  const promises = [];
+
+  for (let i = 0; i < count; i++) {
+    promises.push(page.keyboard.press(`Shift+Tab`));
+  }
+
+  await Promise.all(promises);
+};
diff --git a/src/components/batch-selection/batch-selection.pw.tsx b/src/components/batch-selection/batch-selection.pw.tsx
index 555d0685fe..04804f4e44 100644
--- a/src/components/batch-selection/batch-selection.pw.tsx
+++ b/src/components/batch-selection/batch-selection.pw.tsx
@@ -13,6 +13,7 @@ import {
   batchSelectionComponent,
   batchSelectionButtonsByPosition,
 } from "../../../playwright/components/batch-selection";
+import { getComponent } from "../../../playwright/components/index";
 import { HooksConfig } from "../../../playwright";
 
 const BATCH_SELECTION_COLOR = [
@@ -39,25 +40,25 @@ test.describe("check BatchSelection component properties", () => {
   test("should check hidden BatchSelection", async ({ mount, page }) => {
     await mount(<BatchSelectionComponent hidden />);
     const batchSelection = batchSelectionComponent(page);
-    await expect(batchSelection.getAttribute("hidden")).not.toBeNull();
-
+    await expect(batchSelection).toHaveAttribute("hidden", /.*/);
     await expect(batchSelection).toHaveCSS("opacity", "0");
   });
 
   test("should check disabled BatchSelection", async ({ mount, page }) => {
     await mount(<BatchSelectionComponent disabled />);
     const batchSelection = batchSelectionComponent(page);
-    await expect(batchSelection).toHaveAttribute("disabled", "");
+
+    await expect(batchSelection).toHaveAttribute("disabled", /.*/);
   });
 
   ([
     [BATCH_SELECTION_COLOR[0], "rgb(0, 50, 76)"],
     [BATCH_SELECTION_COLOR[1], "rgb(179, 194, 201)"],
     [BATCH_SELECTION_COLOR[2], "rgb(255, 255, 255)"],
-    [BATCH_SELECTION_COLOR[3], ""],
+    [BATCH_SELECTION_COLOR[3], "rgba(0, 0, 0, 0)"],
   ] as [BatchSelectionProps["colorTheme"], string][]).forEach(
     ([colorTheme, backgroundColor]) => {
-      test(`check BatchSelection component ${colorTheme} colorTheme and it uses ${backgroundColor} as a background color`, async ({
+      test(`check background color is ${backgroundColor} when colorTheme is ${colorTheme}`, async ({
         mount,
         page,
       }) => {
@@ -65,17 +66,11 @@ test.describe("check BatchSelection component properties", () => {
           <BatchSelectionComponent colorTheme={colorTheme} selectedCount={0} />
         );
 
-        if (colorTheme === "transparent") {
-          await expect(batchSelectionComponent(page)).not.toHaveCSS(
-            "background-color",
-            backgroundColor
-          );
-        } else {
-          await expect(batchSelectionComponent(page)).toHaveCSS(
-            "background-color",
-            backgroundColor
-          );
-        }
+        const batchSelection = getComponent(page, "batch-selection");
+        await expect(batchSelection).toHaveCSS(
+          "background-color",
+          backgroundColor
+        );
       });
     }
   );
diff --git a/src/components/button/button.pw.tsx b/src/components/button/button.pw.tsx
index 9c6ca10253..547887043f 100644
--- a/src/components/button/button.pw.tsx
+++ b/src/components/button/button.pw.tsx
@@ -7,10 +7,7 @@ import {
   buttonDataComponent,
 } from "../../../playwright/components/button/index";
 import { ICON } from "../../../playwright/components/locators";
-import {
-  checkAccessibility,
-  expectEventWasCalledOnce,
-} from "../../../playwright/support/helper";
+import { checkAccessibility } from "../../../playwright/support/helper";
 import {
   dlsRoot,
   icon,
@@ -55,8 +52,6 @@ import {
 
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
-const messages: string[] = [];
-
 test.describe("Button component", () => {
   testData.forEach((label) => {
     test(`should render label using ${label} special characters`, async ({
@@ -189,83 +184,82 @@ test.describe("Check events for Button component", () => {
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onClick={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onClick={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).click();
-
-    await expectEventWasCalledOnce(messages, "onClick");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.click();
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onBlur callback when a blur event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onBlur={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onBlur={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).focus();
-    await buttonDataComponent(page).blur();
-    await expect(buttonDataComponent(page)).not.toBeFocused();
-    await expectEventWasCalledOnce(messages, "onBlur");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.focus();
+    await buttonComponent.blur();
+    await expect(buttonComponent).not.toBeFocused();
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onKeyDown callback when a keydown event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onKeyDown={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onKeyDown={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).press("Enter");
-    await expectEventWasCalledOnce(messages, "onKeyDown");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.press("Enter");
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onFocus callback when a focus event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onFocus={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onFocus={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).focus();
-    await expectEventWasCalledOnce(messages, "onFocus");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.focus();
+    expect(callbackCount).toBe(1);
   });
 });
 
diff --git a/src/components/dialog-full-screen/components.test-pw.tsx b/src/components/dialog-full-screen/components.test-pw.tsx
new file mode 100644
index 0000000000..3ee959a64e
--- /dev/null
+++ b/src/components/dialog-full-screen/components.test-pw.tsx
@@ -0,0 +1,506 @@
+import React, { useState, useRef } from "react";
+import DialogFullScreen, { DialogFullScreenProps } from ".";
+import Dialog from "../dialog";
+import Button from "../button";
+import Form from "../form";
+import Textbox from "../textbox";
+import Pill from "../pill";
+import Box from "../box";
+import CarbonProvider from "../carbon-provider";
+import Toast from "../toast";
+import { Accordion } from "../accordion";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import Typography from "../typography";
+
+const mainDialogTitle = "Main Dialog";
+const nestedDialogTitle = "Nested Dialog";
+
+export const DialogFullScreenComponent = ({
+  children = "This is an example",
+  ...props
+}: Partial<DialogFullScreenProps>) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const ref = useRef<HTMLButtonElement | null>(null);
+  return (
+    <>
+      <DialogFullScreen
+        focusFirstElement={ref}
+        open={isOpen}
+        showCloseIcon
+        title="Dialog Full Screen"
+        aria-label="aria-label"
+        onCancel={() => setIsOpen(false)}
+        {...props}
+      >
+        <Button onClick={() => setIsOpen(false)}>Not focused</Button>
+        <Button forwardRef={ref} onClick={() => setIsOpen(false)}>
+          This should be focused first now
+        </Button>
+
+        <Textbox label="Textbox1" value="Textbox1" />
+        <Textbox label="Textbox2" value="Textbox2" />
+        <Textbox label="Textbox3" value="Textbox3" />
+        <Form>{children}</Form>
+      </DialogFullScreen>
+    </>
+  );
+};
+
+export const NestedDialog = () => {
+  const [mainDialogOpen, setMainDialogOpen] = React.useState(false);
+  const [nestedDialogOpen, setNestedDialogOpen] = React.useState(false);
+
+  const handleMainDialogOpen = () => {
+    setMainDialogOpen(true);
+  };
+
+  const handleMainDialogCancel = () => {
+    setMainDialogOpen(false);
+  };
+
+  const handleNestedDialogOpen = () => {
+    setNestedDialogOpen(true);
+  };
+
+  const handleNestedDialogCancel = () => {
+    setNestedDialogOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={handleMainDialogOpen}>Open Main Dialog</Button>
+      <DialogFullScreen
+        open={mainDialogOpen}
+        onCancel={handleMainDialogCancel}
+        title={mainDialogTitle}
+      >
+        <Button onClick={handleNestedDialogOpen}>Open Nested Dialog</Button>
+        <Dialog
+          open={nestedDialogOpen}
+          onCancel={handleNestedDialogCancel}
+          title={nestedDialogTitle}
+        >
+          Nested Dialog Content
+        </Dialog>
+      </DialogFullScreen>
+    </>
+  );
+};
+
+export const MultipleDialogsInDifferentProviders = () => {
+  const [isModal1Open, setIsModal1Open] = React.useState(false);
+  const [isModal2Open, setIsModal2Open] = React.useState(false);
+  return (
+    <>
+      <CarbonProvider>
+        <Box>
+          <Button onClick={() => setIsModal1Open(true)}>Open Modal 1</Button>
+          <DialogFullScreen
+            title="Full Screen Dialog"
+            open={isModal1Open}
+            onCancel={() => setIsModal1Open(false)}
+          >
+            This is Modal 1
+            <Button onClick={() => setIsModal2Open(true)}>Open Modal 2</Button>
+          </DialogFullScreen>
+        </Box>
+      </CarbonProvider>
+      <CarbonProvider>
+        <Box>
+          <Dialog open={isModal2Open} onCancel={() => setIsModal2Open(false)}>
+            This is Modal 2
+          </Dialog>
+        </Box>
+      </CarbonProvider>
+    </>
+  );
+};
+
+export const DialogFullScreenWithHeaderChildren = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const HeaderChildren = (
+    <div
+      style={{
+        margin: `$min-width: 568px 0 26px`,
+      }}
+    >
+      <Pill fill>A pill</Pill>
+      <Pill fill ml={2} mr={1}>
+        Another pill
+      </Pill>
+    </div>
+  );
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open DialogFullScreen</Button>
+      <DialogFullScreen
+        open={isOpen}
+        onCancel={() => setIsOpen(false)}
+        title="An example of a long header"
+        subtitle="Subtitle"
+        aria-label="aria-label"
+        headerChildren={HeaderChildren}
+      >
+        <Form
+          stickyFooter
+          leftSideButtons={
+            <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+          }
+          saveButton={
+            <Button buttonType="primary" type="submit">
+              Save
+            </Button>
+          }
+        >
+          <div>
+            This is an example of a full screen Dialog with a Form as content
+          </div>
+          <Textbox label="First Name" />
+          <Textbox label="Middle Name" />
+          <Textbox label="Surname" />
+          <Textbox label="Birth Place" />
+          <Textbox label="Favourite Colour" />
+          <Textbox label="Address" />
+        </Form>
+      </DialogFullScreen>
+    </>
+  );
+};
+
+export const DialogFullScreenBackgroundScrollTestComponent = () => {
+  return (
+    <DialogFullScreen open onCancel={() => {}}>
+      <Textbox label="textbox" />
+      <Box height="2000px" position="relative">
+        <Box height="100px" id="bottom-box" position="absolute" bottom="0px">
+          I should not be scrolled into view
+        </Box>
+      </Box>
+    </DialogFullScreen>
+  );
+};
+
+export const DialogFullScreenBackgroundScrollWithOtherFocusableContainers = () => {
+  const toast1Ref = useRef(null);
+  const toast2Ref = useRef(null);
+  return (
+    <Form>
+      <DialogFullScreen
+        open
+        onCancel={() => {}}
+        focusableContainers={[toast1Ref, toast2Ref]}
+      >
+        <Textbox label="textbox" />
+        <Box height="2000px" position="relative">
+          <Box height="100px" id="bottom-box" position="absolute" bottom="0px">
+            I should not be scrolled into view
+          </Box>
+        </Box>
+      </DialogFullScreen>
+      <Toast open onDismiss={() => {}} ref={toast1Ref} targetPortalId="stacked">
+        Toast message 1
+      </Toast>
+      <Toast open onDismiss={() => {}} ref={toast2Ref} targetPortalId="stacked">
+        Toast message 2
+      </Toast>
+    </Form>
+  );
+};
+
+export const WithHelp = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open DialogFullScreen</Button>
+      <DialogFullScreen
+        open={isOpen}
+        onCancel={() => setIsOpen(false)}
+        title="An example of a long header"
+        subtitle="Subtitle"
+        help="Some help text"
+      >
+        <Form
+          stickyFooter
+          leftSideButtons={
+            <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+          }
+          saveButton={
+            <Button buttonType="primary" type="submit">
+              Save
+            </Button>
+          }
+        >
+          <div>
+            This is an example of a full screen Dialog with a Form as content
+          </div>
+          <Textbox label="First Name" />
+          <Textbox label="Middle Name" />
+          <Textbox label="Surname" />
+          <Textbox label="Birth Place" />
+          <Textbox label="Favourite Colour" />
+          <Textbox label="Address" />
+        </Form>
+      </DialogFullScreen>
+    </>
+  );
+};
+
+export const WithHideableHeaderChildren = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const aboveBreakpoint = useMediaQuery("(min-width: 568px)");
+  const verticalMargin = aboveBreakpoint ? "26px" : 0;
+  const HeaderChildrenAboveBreakpoint = (
+    <div style={{ margin: `${verticalMargin} 0 26px` }}>
+      <Pill fill>A pill</Pill>
+      <Pill fill ml={2} mr={1}>
+        Another pill
+      </Pill>
+    </div>
+  );
+  const HeaderChildrenBelowBreakpoint = (
+    <Accordion
+      title="More info"
+      openTitle="Less info"
+      scheme="transparent"
+      borders="none"
+      aria-label="aria-label"
+      disableContentPadding
+      buttonHeading
+      buttonWidth="120px"
+      ml="-13px"
+    >
+      <Box py="16px" pl="14px">
+        <Pill fill>A pill</Pill>
+        <Pill fill ml={2} mr={1}>
+          Another pill
+        </Pill>
+      </Box>
+    </Accordion>
+  );
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open DialogFullScreen</Button>
+      <DialogFullScreen
+        open={isOpen}
+        onCancel={() => setIsOpen(false)}
+        title="An example of a long header"
+        subtitle="Subtitle"
+        headerChildren={
+          aboveBreakpoint
+            ? HeaderChildrenAboveBreakpoint
+            : HeaderChildrenBelowBreakpoint
+        }
+      >
+        <Form
+          stickyFooter
+          leftSideButtons={
+            <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+          }
+          saveButton={
+            <Button buttonType="primary" type="submit">
+              Save
+            </Button>
+          }
+        >
+          <div>
+            This is an example of a full screen Dialog with a Form as content
+          </div>
+          <Textbox label="First Name" />
+          <Textbox label="Middle Name" />
+          <Textbox label="Surname" />
+          <Textbox label="Birth Place" />
+          <Textbox label="Favourite Colour" />
+          <Textbox label="Address" />
+        </Form>
+      </DialogFullScreen>
+    </>
+  );
+};
+
+export const WithBox = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open DialogFullScreen</Button>
+      <DialogFullScreen
+        open={isOpen}
+        onCancel={() => setIsOpen(false)}
+        title="Title"
+        subtitle="Subtitle"
+      >
+        <Box p="0px 40px">
+          <Form
+            stickyFooter
+            leftSideButtons={
+              <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+            }
+            saveButton={
+              <Button buttonType="primary" type="submit">
+                Save
+              </Button>
+            }
+          >
+            <div>
+              This is an example of a full screen Dialog with a Form as content
+            </div>
+            <Textbox label="First Name" />
+            <Textbox label="Middle Name" />
+            <Textbox label="Surname" />
+            <Textbox label="Birth Place" />
+            <Textbox label="Favourite Colour" />
+            <Textbox label="Address" />
+          </Form>
+        </Box>
+      </DialogFullScreen>
+    </>
+  );
+};
+
+export const FocusingADifferentFirstElement = () => {
+  const [isOpenOne, setIsOpenOne] = useState(false);
+  const [isOpenTwo, setIsOpenTwo] = useState(false);
+  const ref = useRef<HTMLButtonElement | null>(null);
+  return (
+    <>
+      <Button onClick={() => setIsOpenOne(true)}>
+        Open Demo using focusFirstElement
+      </Button>
+      <DialogFullScreen
+        focusFirstElement={ref}
+        open={isOpenOne}
+        onCancel={() => setIsOpenOne(false)}
+        title="Title"
+        subtitle="Subtitle"
+      >
+        <p>Focus an element that doesnt support autofocus</p>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-around",
+            height: "150px",
+          }}
+        >
+          <Button onClick={() => setIsOpenOne(false)}>Not focused</Button>
+          <Button forwardRef={ref} onClick={() => setIsOpenOne(false)}>
+            This should be focused first now
+          </Button>
+        </div>
+        <Textbox label="Not Focused" />
+      </DialogFullScreen>
+      <Button ml={2} onClick={() => setIsOpenTwo(true)}>
+        Open Demo using autoFocus
+      </Button>
+      <DialogFullScreen
+        disableAutoFocus
+        open={isOpenTwo}
+        onCancel={() => setIsOpenTwo(false)}
+        title="Title"
+        subtitle="Subtitle"
+      >
+        <p>Focus an element that supports autoFocus</p>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-around",
+            height: "150px",
+          }}
+        >
+          <Button onClick={() => setIsOpenTwo(false)}>Not focused</Button>
+          <Button onClick={() => setIsOpenTwo(false)}>Not focused</Button>
+        </div>
+        <Textbox label="This should be focused first now" autoFocus />
+      </DialogFullScreen>
+    </>
+  );
+};
+
+export const OtherFocusableContainers = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isToast1Open, setIsToast1Open] = useState(false);
+  const [isToast2Open, setIsToast2Open] = useState(false);
+  const toast1Ref = useRef<HTMLDivElement | null>(null);
+  const toast2Ref = useRef<HTMLDivElement | null>(null);
+  return (
+    <>
+      <Button onClick={() => setIsDialogOpen(true)}>
+        Open DialogFullScreen
+      </Button>
+      <DialogFullScreen
+        open={isDialogOpen}
+        onCancel={() => setIsDialogOpen(false)}
+        title="Title"
+        subtitle="Subtitle"
+        focusableContainers={[toast1Ref, toast2Ref]}
+      >
+        <Form
+          stickyFooter
+          height="500px"
+          leftSideButtons={
+            <Button onClick={() => setIsDialogOpen(false)}>Cancel</Button>
+          }
+          saveButton={
+            <Button buttonType="primary" type="submit">
+              Save
+            </Button>
+          }
+        >
+          <Typography>
+            This is an example of a dialog with a Form as content
+          </Typography>
+          <Textbox label="First Name" />
+          <Textbox label="Middle Name" />
+          <Textbox label="Surname" />
+          <Button onClick={() => setIsToast1Open(true)}>
+            Show first toast
+          </Button>
+          <Button
+            ml={2}
+            buttonType="primary"
+            onClick={() => setIsToast2Open(true)}
+          >
+            Show second toast
+          </Button>
+        </Form>
+      </DialogFullScreen>
+      <Toast
+        open={isToast1Open}
+        onDismiss={() => setIsToast1Open(false)}
+        ref={toast1Ref}
+        targetPortalId="stacked"
+      >
+        Toast message 1
+      </Toast>
+      <Toast
+        open={isToast2Open}
+        onDismiss={() => setIsToast2Open(false)}
+        ref={toast2Ref}
+        targetPortalId="stacked"
+      >
+        Toast message 2
+      </Toast>
+    </>
+  );
+};
+
+export const DialogFullScreenWithTitleAsReactComponent = (
+  props: Partial<DialogFullScreenProps>
+) => {
+  const TitleComponent = () => (
+    <div>
+      <span>Row1</span>
+      <span>Row2</span>
+    </div>
+  );
+  return (
+    <DialogFullScreen
+      open
+      title={<TitleComponent />}
+      onCancel={() => {}}
+      {...props}
+    >
+      <Textbox label="textbox" />
+    </DialogFullScreen>
+  );
+};
diff --git a/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx b/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
index 4f638d9914..6afe819b3a 100644
--- a/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
+++ b/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
@@ -1,14 +1,9 @@
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 import DialogFullScreen, { DialogFullScreenProps } from ".";
 import Dialog from "../dialog";
 import Button from "../button";
 import Form from "../form";
-import Textbox from "../textbox";
-import Pill from "../pill";
-import Box from "../box";
-import CarbonProvider from "../carbon-provider";
-import Toast from "../toast";
 
 export default {
   title: "Dialog Full Screen/Test",
@@ -132,192 +127,3 @@ export const Nested = () => {
 };
 
 Nested.storyName = "nested";
-
-export const mainDialogTitle = "Main Dialog";
-export const nestedDialogTitle = "Nested Dialog";
-export const DialogFullScreenComponent = ({
-  children = "This is an example",
-  ...props
-}: Partial<DialogFullScreenProps>) => {
-  const [isOpen, setIsOpen] = useState(true);
-  const ref = React.useRef(null);
-  return (
-    <>
-      <DialogFullScreen
-        open={isOpen}
-        showCloseIcon
-        onCancel={() => setIsOpen(false)}
-        focusFirstElement={ref}
-        {...props}
-      >
-        <Button onClick={() => setIsOpen(false)}>Not focused</Button>
-        <Button forwardRef={ref} onClick={() => setIsOpen(false)}>
-          This should be focused first now
-        </Button>
-
-        <Textbox label="Textbox1" value="Textbox1" />
-        <Textbox label="Textbox2" value="Textbox2" />
-        <Textbox label="Textbox3" value="Textbox3" />
-        <Form>{children}</Form>
-      </DialogFullScreen>
-    </>
-  );
-};
-
-export const NestedDialog = () => {
-  const [mainDialogOpen, setMainDialogOpen] = React.useState(false);
-  const [nestedDialogOpen, setNestedDialogOpen] = React.useState(false);
-
-  const handleMainDialogOpen = () => {
-    setMainDialogOpen(true);
-  };
-
-  const handleMainDialogCancel = () => {
-    setMainDialogOpen(false);
-  };
-
-  const handleNestedDialogOpen = () => {
-    setNestedDialogOpen(true);
-  };
-
-  const handleNestedDialogCancel = () => {
-    setNestedDialogOpen(false);
-  };
-
-  return (
-    <>
-      <Button onClick={handleMainDialogOpen}>Open Main Dialog</Button>
-      <DialogFullScreen
-        open={mainDialogOpen}
-        onCancel={handleMainDialogCancel}
-        title={mainDialogTitle}
-      >
-        <Button onClick={handleNestedDialogOpen}>Open Nested Dialog</Button>
-        <Dialog
-          open={nestedDialogOpen}
-          onCancel={handleNestedDialogCancel}
-          title={nestedDialogTitle}
-        >
-          Nested Dialog Content
-        </Dialog>
-      </DialogFullScreen>
-    </>
-  );
-};
-
-export const MultipleDialogsInDifferentProviders = () => {
-  const [isModal1Open, setIsModal1Open] = React.useState(false);
-  const [isModal2Open, setIsModal2Open] = React.useState(false);
-  return (
-    <>
-      <CarbonProvider>
-        <Box>
-          <Button onClick={() => setIsModal1Open(true)}>Open Modal 1</Button>
-          <DialogFullScreen
-            title="Full Screen Dialog"
-            open={isModal1Open}
-            onCancel={() => setIsModal1Open(false)}
-          >
-            This is Modal 1
-            <Button onClick={() => setIsModal2Open(true)}>Open Modal 2</Button>
-          </DialogFullScreen>
-        </Box>
-      </CarbonProvider>
-      <CarbonProvider>
-        <Box>
-          <Dialog open={isModal2Open} onCancel={() => setIsModal2Open(false)}>
-            This is Modal 2
-          </Dialog>
-        </Box>
-      </CarbonProvider>
-    </>
-  );
-};
-
-export const DialogFullScreenWithHeaderChildren = () => {
-  const [isOpen, setIsOpen] = React.useState(true);
-  const HeaderChildren = (
-    <div
-      style={{
-        margin: `$min-width: 568px 0 26px`,
-      }}
-    >
-      <Pill fill>A pill</Pill>
-      <Pill fill ml={2} mr={1}>
-        Another pill
-      </Pill>
-    </div>
-  );
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open DialogFullScreen</Button>
-      <DialogFullScreen
-        open={isOpen}
-        onCancel={() => setIsOpen(false)}
-        title="An example of a long header"
-        subtitle="Subtitle"
-        headerChildren={HeaderChildren}
-      >
-        <Form
-          stickyFooter
-          leftSideButtons={
-            <Button onClick={() => setIsOpen(false)}>Cancel</Button>
-          }
-          saveButton={
-            <Button buttonType="primary" type="submit">
-              Save
-            </Button>
-          }
-        >
-          <div>
-            This is an example of a full screen Dialog with a Form as content
-          </div>
-          <Textbox label="First Name" />
-          <Textbox label="Middle Name" />
-          <Textbox label="Surname" />
-          <Textbox label="Birth Place" />
-          <Textbox label="Favourite Colour" />
-          <Textbox label="Address" />
-        </Form>
-      </DialogFullScreen>
-    </>
-  );
-};
-
-export const DialogFullScreenBackgroundScrollTestComponent = () => {
-  return (
-    <Box height="2000px" position="relative">
-      <Box height="100px" id="bottom-box" position="absolute" bottom="0px">
-        I should not be scrolled into view
-      </Box>
-      <DialogFullScreen open onCancel={() => {}}>
-        <Textbox label="textbox" />
-      </DialogFullScreen>
-    </Box>
-  );
-};
-
-export const DialogFullScreenBackgroundScrollWithOtherFocusableContainers = () => {
-  const toast1Ref = useRef(null);
-  const toast2Ref = useRef(null);
-  return (
-    <Box height="2000px" position="relative">
-      <Box height="100px" id="bottom-box" position="absolute" bottom="0px">
-        I should not be scrolled into view
-      </Box>
-      <DialogFullScreen
-        open
-        onCancel={() => {}}
-        focusableContainers={[toast1Ref, toast2Ref]}
-      >
-        <Textbox label="textbox" />
-      </DialogFullScreen>
-      <Toast open onDismiss={() => {}} ref={toast1Ref} targetPortalId="stacked">
-        Toast message 1
-      </Toast>
-      <Toast open onDismiss={() => {}} ref={toast2Ref} targetPortalId="stacked">
-        Toast message 2
-      </Toast>
-    </Box>
-  );
-};
diff --git a/src/components/dialog-full-screen/dialog-full-screen.pw.tsx b/src/components/dialog-full-screen/dialog-full-screen.pw.tsx
new file mode 100644
index 0000000000..b0b117ce24
--- /dev/null
+++ b/src/components/dialog-full-screen/dialog-full-screen.pw.tsx
@@ -0,0 +1,550 @@
+import React from "react";
+import { expect, test } from "@playwright/experimental-ct-react17";
+import type { Page } from "@playwright/test";
+import {
+  DialogFullScreenComponent,
+  NestedDialog,
+  MultipleDialogsInDifferentProviders,
+  DialogFullScreenWithHeaderChildren,
+  DialogFullScreenBackgroundScrollTestComponent,
+  DialogFullScreenBackgroundScrollWithOtherFocusableContainers,
+  WithHelp,
+  WithHideableHeaderChildren,
+  WithBox,
+  OtherFocusableContainers,
+  FocusingADifferentFirstElement,
+  DialogFullScreenWithTitleAsReactComponent,
+} from "./components.test-pw";
+import {
+  portal,
+  getDataElementByValue,
+  tooltipPreview,
+  getComponent,
+} from "../../../playwright/components/index";
+import {
+  continuePressingTAB,
+  continuePressingSHIFTTAB,
+  checkAccessibility,
+} from "../../../playwright/support/helper";
+import { CHARACTERS } from "../../../playwright/support/constants";
+
+const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
+const testAria = "cypress_aria";
+const mainDialogTitle = "Main Dialog";
+const nestedDialogTitle = "Nested Dialog";
+
+const iconIsFocused = async (page: Page, whichIcon: number) => {
+  const closeIcon = getDataElementByValue(page, "close").nth(whichIcon);
+  await expect(closeIcon).toHaveCSS(
+    "box-shadow",
+    "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+  );
+  await expect(closeIcon).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
+};
+
+test.describe("render DialogFullScreen component and check properties", () => {
+  test(`should close component after click on closeIcon`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent showCloseIcon />);
+
+    const closeIcon = getDataElementByValue(page, "close").first();
+    const dialogFullScreen = page.getByRole("dialog");
+    await expect(closeIcon).toBeAttached;
+    await expect(dialogFullScreen).toBeAttached;
+    await closeIcon.click();
+    await expect(dialogFullScreen).not.toBeAttached;
+  });
+
+  specialCharacters.forEach((title) => {
+    test(`should render component using ${title} as title`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogFullScreenComponent title={title} />);
+
+      await expect(getDataElementByValue(page, "title")).toHaveText(title);
+    });
+  });
+
+  specialCharacters.forEach((subtitle) => {
+    test(`should render using ${subtitle} as subtitle`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <DialogFullScreenComponent
+          title="Dialog Full Screen Title"
+          subtitle={subtitle}
+        />
+      );
+
+      await expect(getDataElementByValue(page, "subtitle")).toHaveText(
+        subtitle
+      );
+    });
+  });
+
+  specialCharacters.forEach((childrenValue) => {
+    test(`should render component with ${childrenValue} as a children`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <DialogFullScreenComponent>{childrenValue}</DialogFullScreenComponent>
+      );
+
+      await expect(getDataElementByValue(page, "form-content")).toContainText(
+        childrenValue
+      );
+    });
+  });
+
+  test("should render with disabledEscKey prop and not be closed after clicking Escape button", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent disableEscKey />);
+
+    const dialogFullScreen = page.getByRole("dialog");
+    await expect(dialogFullScreen).toBeAttached;
+    await page.keyboard.press("Escape");
+    await expect(dialogFullScreen).not.toBeAttached;
+  });
+
+  test("should close after pressing Escape button", async ({ mount, page }) => {
+    await mount(<DialogFullScreenComponent />);
+
+    const dialogFullScreen = page.getByRole("dialog");
+    await expect(dialogFullScreen).toBeAttached;
+    await page.keyboard.press("Escape");
+    await expect(dialogFullScreen).not.toBeAttached;
+  });
+
+  test("should call the cancel action after closing", async ({
+    mount,
+    page,
+  }) => {
+    let called = false;
+    await mount(
+      <DialogFullScreenComponent
+        onCancel={() => {
+          called = true;
+        }}
+      />
+    );
+
+    const closeIcon = getDataElementByValue(page, "close").first();
+    await closeIcon.click();
+    expect(called).toBe(true);
+  });
+
+  test("should allow to close nested DialogFullScreen and then the main DialogFullScreen window", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<NestedDialog />);
+
+    await page
+      .getByRole("button")
+      .filter({ hasText: `Open ${mainDialogTitle}` })
+      .click();
+    await page
+      .getByRole("button")
+      .filter({ hasText: `Open ${nestedDialogTitle}` })
+      .click();
+
+    const fullDialog = page.getByRole("dialog");
+    const alertDialogPreview = page.getByRole("alertdialog");
+    const nestedButton = portal(page);
+
+    await expect(page.getByRole("dialog")).toHaveCount(1);
+    await expect(nestedButton).toContainText("Nested Dialog");
+    await expect(nestedButton).toBeVisible();
+
+    await page.keyboard.press("Escape");
+    await expect(alertDialogPreview).toHaveCount(0);
+    await expect(fullDialog).toHaveCount(1);
+
+    await page.keyboard.press("Escape");
+    await expect(fullDialog).toHaveCount(0);
+  });
+
+  test("should render nested dialogs with the aria-modal property only set on the top one", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<NestedDialog />);
+
+    await page
+      .getByRole("button")
+      .filter({ hasText: `Open ${mainDialogTitle}` })
+      .click();
+
+    const fullDialog = getDataElementByValue(page, "dialog-full-screen");
+    await expect(fullDialog).toHaveAttribute("aria-modal", "true");
+
+    await page
+      .getByRole("button")
+      .filter({ hasText: `Open ${nestedDialogTitle}` })
+      .click();
+
+    await expect(fullDialog).not.toHaveAttribute("aria-modal", "true");
+    await expect(page.getByRole("dialog")).toHaveAttribute(
+      "aria-modal",
+      "true"
+    );
+  });
+
+  test("should always place focus on the inner dialog when tabbing with nested dialogs after focus is lost", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<NestedDialog />);
+
+    await page
+      .getByRole("button")
+      .filter({ hasText: `Open ${mainDialogTitle}` })
+      .click();
+    await page
+      .getByRole("button")
+      .filter({ hasText: `Open ${nestedDialogTitle}` })
+      .click();
+
+    await page.keyboard.press("Tab");
+    const dialogNested = page.getByRole("dialog");
+    await dialogNested.click();
+    await page.keyboard.press("Tab");
+    const closeIcon = getDataElementByValue(page, "close").nth(2);
+    await expect(closeIcon).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+    );
+    await expect(closeIcon).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
+  });
+
+  test("should render nested dialogs with the aria-modal property only set on the top one, even when the dialogs are wrapped in separate CarbonProviders", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MultipleDialogsInDifferentProviders />);
+
+    await page.getByRole("button").filter({ hasText: `Open Modal 1` }).click();
+    const fullDialog = getDataElementByValue(page, "dialog-full-screen");
+    await expect(fullDialog).toHaveAttribute("aria-modal", "true");
+
+    await page.getByRole("button").filter({ hasText: `Open Modal 2` }).click();
+    await expect(fullDialog).not.toHaveAttribute("aria-modal", "true");
+    await expect(page.getByRole("dialog")).toHaveAttribute(
+      "aria-modal",
+      "true"
+    );
+  });
+
+  test("should render component with aria-describedby", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent aria-describedby={testAria} />);
+
+    await expect(page.getByRole("dialog")).toHaveAttribute(
+      "aria-describedby",
+      testAria
+    );
+  });
+
+  test("should render component with aria-label", async ({ mount, page }) => {
+    await mount(<DialogFullScreenComponent aria-label={testAria} />);
+
+    await expect(page.getByRole("dialog")).toHaveAttribute(
+      "aria-label",
+      testAria
+    );
+  });
+
+  test("should render component with aria-labelledby", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <DialogFullScreenWithTitleAsReactComponent aria-labelledby={testAria} />
+    );
+
+    await expect(page.getByRole("dialog")).toHaveAttribute(
+      "aria-labelledby",
+      testAria
+    );
+  });
+
+  test("should render component using focusFirstElement", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent />);
+
+    const focusedButton = page
+      .getByRole("button")
+      .filter({ hasText: "This should be focused first now" });
+    await expect(focusedButton).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+    );
+    await expect(focusedButton).toHaveCSS(
+      "outline",
+      "rgba(0, 0, 0, 0) solid 3px"
+    );
+  });
+
+  test("should render component with autofocus disabled", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent disableAutoFocus />);
+
+    const focusedButton = page
+      .getByRole("button")
+      .filter({ hasText: "This should be focused first now" });
+    await expect(focusedButton).not.toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+    );
+    const hasFocus = await focusedButton.focus();
+    expect(hasFocus).toBeFalsy();
+  });
+
+  test("should render component with help text", async ({ mount, page }) => {
+    await mount(
+      <DialogFullScreenComponent
+        title="Sample DialogFullScreen"
+        help="Some help text"
+      />
+    );
+
+    const helpIcon = getDataElementByValue(page, "question");
+    await helpIcon.hover();
+    await expect(tooltipPreview(page)).toHaveText("Some help text");
+  });
+
+  test("should render component with role", async ({ mount, page }) => {
+    await mount(<DialogFullScreenComponent role="dialog" />);
+
+    await expect(
+      getDataElementByValue(page, "dialog-full-screen")
+    ).toHaveAttribute("role", "dialog");
+  });
+
+  test("should not render close icon when ShowCloseIcon is set to false", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent showCloseIcon={false} />);
+
+    await expect(getDataElementByValue(page, "close")).toHaveCount(0);
+  });
+
+  test("should render close icon when ShowCloseIcon is set to true. When you click the CloseIcon the Dialog is closed", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent showCloseIcon />);
+
+    const fullDialog = getDataElementByValue(page, "dialog-full-screen");
+    await expect(fullDialog).toHaveCount(1);
+    const closeIcon = getDataElementByValue(page, "close").nth(1);
+    await closeIcon.click();
+    await expect(fullDialog).toHaveCount(0);
+  });
+
+  test("should render component with header children", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenWithHeaderChildren />);
+
+    await expect(getComponent(page, "pill").nth(0)).toHaveText("A pill");
+    await expect(getComponent(page, "pill").nth(1)).toHaveText("Another pill");
+  });
+
+  test("should render component with content padding disabled", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <DialogFullScreenComponent
+        title="Dialog Full Screen Title"
+        disableContentPadding
+      />
+    );
+
+    const content = getDataElementByValue(page, "content");
+    await expect(content).toHaveCSS("padding-right", "0px");
+    await expect(content).toHaveCSS("padding-bottom", "0px");
+  });
+
+  // skip this test for now as FE-6053 has not been fixed yet
+  test.skip("should render component with DisableClose prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent disableClose />);
+
+    const closeIcon = getDataElementByValue(page, "close").nth(1);
+    await closeIcon.click();
+    await expect(getDataElementByValue(page, "dialog-full-screen")).toHaveCount(
+      1
+    );
+  });
+});
+
+test.describe("Accessibility for DialogFullScreen", () => {
+  test("should check accessibility for default component", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility with disabled content padding", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenComponent disableContentPadding />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility with header children", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenWithHeaderChildren />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility with help", async ({ mount, page }) => {
+    await mount(<WithHelp />);
+
+    const openButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open DialogFullScreen" });
+    await openButton.click();
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility with hideable header children", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithHideableHeaderChildren />);
+
+    const openButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open DialogFullScreen" });
+    await openButton.click();
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility with box", async ({ mount, page }) => {
+    await mount(<WithBox />);
+
+    const openButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open DialogFullScreen" });
+    await openButton.click();
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility using autoFocus", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<FocusingADifferentFirstElement />);
+
+    const focusFirstButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Demo using focusFirstElement" });
+    await focusFirstButton.click();
+    await checkAccessibility(page);
+
+    const closeIcon = getDataElementByValue(page, "close").first();
+    await closeIcon.click();
+
+    const autoFocusButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Demo using autoFocus" });
+    await autoFocusButton.click();
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility with other focusable containers", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<OtherFocusableContainers />);
+
+    const openButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open DialogFullScreen" });
+    await openButton.click();
+    await checkAccessibility(page);
+  });
+});
+
+test.describe("test background scroll when tabbing", () => {
+  test("tabbing forward through the dialog and back to the start should not make the background scroll to the bottom", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenBackgroundScrollTestComponent />);
+
+    await continuePressingTAB(page, 3);
+    await iconIsFocused(page, 0);
+    await expect(page.getByTestId("#bottom-box")).not.toBeInViewport();
+  });
+
+  test("tabbing backward through the dialog and back to the start should not make the background scroll to the bottom", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogFullScreenBackgroundScrollTestComponent />);
+
+    await page.waitForTimeout(500);
+    await continuePressingSHIFTTAB(page, 2);
+    await iconIsFocused(page, 0);
+    await expect(page.getByTestId("#bottom-box")).not.toBeInViewport();
+  });
+
+  test("tabbing forward through the dialog and other focusable containers back to the start should not make the background scroll to the bottom", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <DialogFullScreenBackgroundScrollWithOtherFocusableContainers />
+    );
+
+    await page.waitForTimeout(500);
+    const toastIcon = getDataElementByValue(page, "close").nth(1);
+    await toastIcon.focus();
+    await continuePressingTAB(page, 5);
+    await iconIsFocused(page, 0);
+    await expect(page.getByTestId("#bottom-box")).not.toBeInViewport();
+  });
+
+  test("tabbing backward through the dialog and other focusable containers back to the start should not make the background scroll to the bottom", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <DialogFullScreenBackgroundScrollWithOtherFocusableContainers />
+    );
+
+    await page.waitForTimeout(500);
+    await continuePressingSHIFTTAB(page, 8);
+    await iconIsFocused(page, 0);
+    await expect(page.getByTestId("#bottom-box")).not.toBeInViewport();
+  });
+});
diff --git a/src/components/dialog/dialog.pw.tsx b/src/components/dialog/dialog.pw.tsx
index 2e1ae222b4..cb007a28cc 100644
--- a/src/components/dialog/dialog.pw.tsx
+++ b/src/components/dialog/dialog.pw.tsx
@@ -270,6 +270,7 @@ test.describe("Testing Dialog component properties", () => {
     const firstTextbox = page.getByLabel("Textbox1");
     const closeButton = page.getByLabel("Close");
 
+    await page.waitForTimeout(250);
     await dialog.press("Tab");
     await expect(closeButton).toBeFocused();
 
@@ -298,6 +299,7 @@ test.describe("Testing Dialog component properties", () => {
     const firstTextbox = page.getByLabel("Textbox1");
     const closeButton = page.getByLabel("Close");
 
+    await page.waitForTimeout(250);
     await dialog.press("Shift+Tab");
     await expect(thirdTextbox).toBeFocused();
 
@@ -324,6 +326,7 @@ test.describe("Testing Dialog component properties", () => {
     const textbox = page.getByLabel("Textbox");
     const closeButton = page.getByLabel("Close");
 
+    await page.waitForTimeout(250);
     await dialog.press("Tab");
     await closeButton.press("Tab");
     await textbox.press("Tab");
@@ -344,6 +347,7 @@ test.describe("Testing Dialog component properties", () => {
     const textbox = page.getByLabel("Textbox");
     const closeButton = page.getByLabel("Close");
 
+    await page.waitForTimeout(250);
     await dialog.press("Shift+Tab");
     await textbox.press("Shift+Tab");
 
@@ -352,299 +356,301 @@ test.describe("Testing Dialog component properties", () => {
       page.getByText("I should not be scrolled into view")
     ).not.toBeInViewport();
   });
+});
 
-  test.describe(
-    "when there is a button inside Dialog, which opens a Toast",
-    () => {
-      test("clicking button moves focus out of Dialog to the newly-opened Toast", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithToast />);
-
-        const openToastButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Toast" });
-        await openToastButton.click();
-
-        const toast = toastComponent(page);
-        await expect(toast).toBeFocused();
-      });
-
-      test("when Toast is opened and focus on it is lost, pressing Tab key traps focus back inside the Dialog", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithToast />);
-
-        const dialog = page.getByRole("dialog");
-        const openToastButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Toast" });
-        await openToastButton.click();
-
-        await page.mouse.click(0, 0); // click outside Toast and Dialog
-        await dialog.press("Tab");
-
-        await expect(openToastButton).toBeFocused();
-      });
-
-      test("when tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithOpenToastsBackgroundScrollTest />);
-
-        const dialog = page.getByRole("dialog");
-        const dialogCloseButton = dialog.getByLabel("Close");
-        const textbox = page.getByLabel("Textbox");
-        const toast1CloseButton = toastComponent(page)
-          .filter({ hasText: "Toast message 1" })
-          .getByLabel("Close");
-        const toast2CloseButton = toastComponent(page)
-          .filter({ hasText: "Toast message 2" })
-          .getByLabel("Close");
-
-        await dialog.press("Tab");
-        await dialogCloseButton.press("Tab");
-        await textbox.press("Tab");
-        await toast1CloseButton.press("Tab");
-        await toast2CloseButton.press("Tab");
-
-        await expect(dialogCloseButton).toBeFocused();
-        await expect(
-          page.getByText("I should not be scrolled into view")
-        ).not.toBeInViewport();
-      });
-
-      test("when shift tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithOpenToastsBackgroundScrollTest />);
-
-        const dialog = page.getByRole("dialog");
-        const dialogCloseButton = dialog.getByLabel("Close");
-        const textbox = page.getByLabel("Textbox");
-        const toast1CloseButton = page
-          .locator('[data-component="toast"]')
-          .filter({ hasText: "Toast message 1" })
-          .getByLabel("Close");
-        const toast2CloseButton = page
-          .locator('[data-component="toast"]')
-          .filter({ hasText: "Toast message 2" })
-          .getByLabel("Close");
-
-        await dialog.press("Shift+Tab");
-        await toast2CloseButton.press("Shift+Tab");
-        await toast1CloseButton.press("Shift+Tab");
-        await textbox.press("Shift+Tab");
-
-        await expect(dialogCloseButton).toBeFocused();
-        await expect(
-          page.getByText("I should not be scrolled into view")
-        ).not.toBeInViewport();
-      });
-    }
-  );
-
-  test("Dialog should have rounded corners", async ({ mount, page }) => {
-    await mount(<DialogComponent />);
+test.describe(
+  "when there is a button inside Dialog, which opens a Toast",
+  () => {
+    test("clicking button moves focus out of Dialog to the newly-opened Toast", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithToast />);
 
-    await expect(page.getByRole("dialog")).toHaveCSS("border-radius", "16px");
-  });
+      const openToastButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Toast" });
+      await page.waitForTimeout(250);
+      await openToastButton.click();
+
+      const toast = toastComponent(page);
+      await expect(toast).toBeFocused();
+    });
+
+    test("when Toast is opened and focus on it is lost, pressing Tab key traps focus back inside the Dialog", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithToast />);
+
+      const dialog = page.getByRole("dialog");
+      const openToastButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Toast" });
+      await page.waitForTimeout(250);
+      await openToastButton.click();
+
+      await page.mouse.click(0, 0); // click outside Toast and Dialog
+
+      await dialog.press("Tab");
 
-  test.describe(
-    "Accessibility tests for playwright mock components and storybook stories",
-    () => {
-      test("DialogComponent mock component should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogComponent />);
-
-        await checkAccessibility(page);
-      });
-
-      test("DialogWithFirstFocusableElement mock component should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithFirstFocusableElement />);
-
-        await checkAccessibility(page);
-      });
-
-      test("DialogWithToast mock component should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithToast />);
-
-        await checkAccessibility(page);
-      });
-
-      test("Default story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DefaultStory />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("Editable story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<Editable />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-
-        const activateAddressButton = page
-          .getByRole("button")
-          .filter({ hasText: "Activate Address" });
-        await activateAddressButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("WithHelp story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<WithHelp />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-
-        const helpIcon = page.getByLabel("help");
-        await helpIcon.hover();
-
-        await checkAccessibility(page);
-      });
-
-      test("LoadingContent story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<LoadingContent />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-
-        await page.getByLabel("Textbox 1").waitFor();
-        await checkAccessibility(page);
-      });
-
-      test("FocusingADifferentFirstElement story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<FocusingADifferentFirstElement />);
-
-        const focusFirstElementDemoButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Demo using focusFirstElement" });
-        await focusFirstElementDemoButton.click();
-
-        await checkAccessibility(page);
-
-        await page.getByRole("dialog").press("Escape");
-        const autoFocusDemoButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Demo using autoFocus" });
-        await autoFocusDemoButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("OverridingContentPadding story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<OverridingContentPadding />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("OtherFocusableContainers story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<OtherFocusableContainers />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        const firstToastButton = page
-          .getByRole("button")
-          .filter({ hasText: "Show first toast" });
-        const secondToastButton = page
-          .getByRole("button")
-          .filter({ hasText: "Show second toast" });
-
-        await openDialogButton.click();
-        await firstToastButton.click();
-        await secondToastButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("Responsive story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<Responsive />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("UsingHandle story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<UsingHandle />);
-
-        await page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" })
-          .click();
-
-        await checkAccessibility(page);
-
-        await page.getByRole("button").filter({ hasText: "Submit" }).click();
-
-        await checkAccessibility(page);
-      });
-    }
-  );
+      await expect(openToastButton).toBeFocused();
+    });
+
+    test("when tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithOpenToastsBackgroundScrollTest />);
+
+      const dialog = page.getByRole("dialog");
+      const dialogCloseButton = dialog.getByLabel("Close");
+      const textbox = page.getByLabel("Textbox");
+      const toast1CloseButton = toastComponent(page)
+        .filter({ hasText: "Toast message 1" })
+        .getByLabel("Close");
+      const toast2CloseButton = toastComponent(page)
+        .filter({ hasText: "Toast message 2" })
+        .getByLabel("Close");
+
+      await page.waitForTimeout(250);
+      await dialog.press("Tab");
+      await dialogCloseButton.press("Tab");
+      await textbox.press("Tab");
+      await toast1CloseButton.press("Tab");
+      await toast2CloseButton.press("Tab");
+
+      await expect(dialogCloseButton).toBeFocused();
+      await expect(
+        page.getByText("I should not be scrolled into view")
+      ).not.toBeInViewport();
+    });
+
+    test("when shift tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithOpenToastsBackgroundScrollTest />);
+
+      const dialog = page.getByRole("dialog");
+      const dialogCloseButton = dialog.getByLabel("Close");
+      const textbox = page.getByLabel("Textbox");
+      const toast1CloseButton = page
+        .locator('[data-component="toast"]')
+        .filter({ hasText: "Toast message 1" })
+        .getByLabel("Close");
+      const toast2CloseButton = page
+        .locator('[data-component="toast"]')
+        .filter({ hasText: "Toast message 2" })
+        .getByLabel("Close");
+
+      await page.waitForTimeout(250);
+      await dialog.press("Shift+Tab");
+      await toast2CloseButton.press("Shift+Tab");
+      await toast1CloseButton.press("Shift+Tab");
+      await textbox.press("Shift+Tab");
+
+      await expect(dialogCloseButton).toBeFocused();
+      await expect(
+        page.getByText("I should not be scrolled into view")
+      ).not.toBeInViewport();
+    });
+  }
+);
+
+test("Dialog should have rounded corners", async ({ mount, page }) => {
+  await mount(<DialogComponent />);
+
+  await expect(page.getByRole("dialog")).toHaveCSS("border-radius", "16px");
 });
+
+test.describe(
+  "Accessibility tests for playwright mock components and storybook stories",
+  () => {
+    test("DialogComponent mock component should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogComponent />);
+
+      await checkAccessibility(page);
+    });
+
+    test("DialogWithFirstFocusableElement mock component should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithFirstFocusableElement />);
+
+      await checkAccessibility(page);
+    });
+
+    test("DialogWithToast mock component should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithToast />);
+
+      await checkAccessibility(page);
+    });
+
+    test("Default story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DefaultStory />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("Editable story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<Editable />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+
+      const activateAddressButton = page
+        .getByRole("button")
+        .filter({ hasText: "Activate Address" });
+      await activateAddressButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("WithHelp story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<WithHelp />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+
+      const helpIcon = page.getByLabel("help");
+      await helpIcon.hover();
+
+      await checkAccessibility(page);
+    });
+
+    test("LoadingContent story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<LoadingContent />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+
+      await page.getByLabel("Textbox 1").waitFor();
+      await checkAccessibility(page);
+    });
+
+    test("FocusingADifferentFirstElement story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<FocusingADifferentFirstElement />);
+
+      const focusFirstElementDemoButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Demo using focusFirstElement" });
+      await focusFirstElementDemoButton.click();
+
+      await checkAccessibility(page);
+
+      await page.getByRole("dialog").press("Escape");
+      const autoFocusDemoButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Demo using autoFocus" });
+      await autoFocusDemoButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("OverridingContentPadding story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<OverridingContentPadding />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("OtherFocusableContainers story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<OtherFocusableContainers />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      const firstToastButton = page
+        .getByRole("button")
+        .filter({ hasText: "Show first toast" });
+      const secondToastButton = page
+        .getByRole("button")
+        .filter({ hasText: "Show second toast" });
+
+      await openDialogButton.click();
+      await firstToastButton.click();
+      await secondToastButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("Responsive story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<Responsive />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("UsingHandle story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<UsingHandle />);
+
+      await page.getByRole("button").filter({ hasText: "Open Dialog" }).click();
+
+      await checkAccessibility(page);
+
+      await page.getByRole("button").filter({ hasText: "Submit" }).click();
+
+      await checkAccessibility(page);
+    });
+  }
+);
diff --git a/src/components/navigation-bar/components.test-pw.tsx b/src/components/navigation-bar/components.test-pw.tsx
new file mode 100644
index 0000000000..e8aa9dd791
--- /dev/null
+++ b/src/components/navigation-bar/components.test-pw.tsx
@@ -0,0 +1,220 @@
+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import NavigationBar, { NavigationBarProps } from ".";
+import { Menu, MenuDivider, MenuItem } from "../menu";
+import Box from "../box";
+
+export const NavigationBarComponent = ({
+  children,
+  ...props
+}: NavigationBarProps) => {
+  const isChildren = children !== null ? children : "Cypress tests";
+  return <NavigationBar {...props}>{isChildren}</NavigationBar>;
+};
+
+export const Default: ComponentStory<typeof NavigationBar> = () => (
+  <NavigationBar>Example content</NavigationBar>
+);
+
+export const DarkTheme: ComponentStory<typeof NavigationBar> = () => (
+  <NavigationBar navigationType="dark">Example content</NavigationBar>
+);
+
+export const WhiteTheme: ComponentStory<typeof NavigationBar> = () => (
+  <NavigationBar navigationType="white">Example content</NavigationBar>
+);
+
+export const BlackTheme: ComponentStory<typeof NavigationBar> = () => (
+  <NavigationBar navigationType="black">Example content</NavigationBar>
+);
+
+export const ExampleWithMenu: ComponentStory<typeof NavigationBar> = () => (
+  <NavigationBar>
+    <Menu>
+      <MenuItem href="#">Menu Item One</MenuItem>
+      <MenuItem href="#">Menu Item Two</MenuItem>
+    </Menu>
+  </NavigationBar>
+);
+
+export const IsLoading: ComponentStory<typeof NavigationBar> = () => (
+  <NavigationBar isLoading>
+    <Menu>
+      <MenuItem>Menu Item One</MenuItem>
+      <MenuItem>Menu Item Two</MenuItem>
+    </Menu>
+  </NavigationBar>
+);
+
+export const WithCustomSpacing: ComponentStory<typeof NavigationBar> = () => (
+  <NavigationBar py={2} px={7}>
+    <Menu>
+      <MenuItem href="#">menu item one</MenuItem>
+      <MenuItem href="#">menu item two</MenuItem>
+    </Menu>
+  </NavigationBar>
+);
+
+export const ContentMaxWidthBox: ComponentStory<typeof NavigationBar> = () => (
+  <NavigationBar>
+    <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
+      <Menu display="flex" flex="1">
+        <MenuItem flex="1" onClick={() => {}}>
+          Menu Item One
+        </MenuItem>
+        <MenuItem flex="0 0 auto" href="#">
+          Menu Item Two
+        </MenuItem>
+        <MenuItem flex="0 0 auto" submenu="Menu Item Three">
+          <MenuItem href="#">Item Submenu One</MenuItem>
+          <MenuItem href="#">Item Submenu Two</MenuItem>
+          <MenuDivider />
+          <MenuItem icon="settings" href="#">
+            Item Submenu Three
+          </MenuItem>
+          <MenuItem href="#">Item Submenu Four</MenuItem>
+        </MenuItem>
+        <MenuItem flex="0 0 auto" submenu="Menu Item Four">
+          <MenuItem onClick={() => {}}>Item Submenu One</MenuItem>
+          <MenuItem href="#">Item Submenu Two</MenuItem>
+        </MenuItem>
+      </Menu>
+    </Box>
+  </NavigationBar>
+);
+ContentMaxWidthBox.decorators = [
+  (Story) => (
+    <div style={{ height: 200 }}>
+      <Story />
+    </div>
+  ),
+];
+
+export const Sticky: ComponentStory<typeof NavigationBar> = () => (
+  <div id="sticky-container" style={{ height: "250px" }}>
+    <NavigationBar
+      position="sticky"
+      orientation="top"
+      offset="25px"
+      aria-label="header"
+    >
+      <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
+        <Menu display="flex" flex="1">
+          <MenuItem flex="1" onClick={() => {}}>
+            Menu Item One
+          </MenuItem>
+          <MenuItem flex="0 0 auto" href="#">
+            Menu Item Two
+          </MenuItem>
+          <MenuItem flex="0 0 auto" submenu="Menu Item Three">
+            <MenuItem href="#">Item Submenu One</MenuItem>
+            <MenuItem href="#">Item Submenu Two</MenuItem>
+            <MenuDivider />
+            <MenuItem icon="settings" href="#">
+              Item Submenu Three
+            </MenuItem>
+            <MenuItem href="#">Item Submenu Four</MenuItem>
+          </MenuItem>
+          <MenuItem flex="0 0 auto" submenu="Menu Item Four">
+            <MenuItem onClick={() => {}}>Item Submenu One</MenuItem>
+            <MenuItem href="#">Item Submenu Two</MenuItem>
+          </MenuItem>
+        </Menu>
+      </Box>
+    </NavigationBar>
+    <div
+      style={{
+        height: "1000px",
+        background: "green",
+      }}
+    />
+    <NavigationBar
+      position="sticky"
+      orientation="bottom"
+      offset="25px"
+      aria-label="footer"
+    >
+      <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
+        <Menu display="flex" flex="1">
+          <MenuItem flex="1" onClick={() => {}}>
+            Menu Item One
+          </MenuItem>
+          <MenuItem flex="0 0 auto" href="#">
+            Menu Item Two
+          </MenuItem>
+          <MenuItem flex="0 0 auto" href="#">
+            Menu Item Three
+          </MenuItem>
+          <MenuItem flex="0 0 auto" href="#">
+            Menu Item Four
+          </MenuItem>
+        </Menu>
+      </Box>
+    </NavigationBar>
+  </div>
+);
+Sticky.parameters = { docs: { inlineStories: false, iframeHeight: 250 } };
+
+export const Fixed: ComponentStory<typeof NavigationBar> = () => (
+  <div>
+    <NavigationBar
+      position="fixed"
+      orientation="top"
+      offset="25px"
+      aria-label="header"
+    >
+      <Menu display="flex" flex="1">
+        <MenuItem flex="1" onClick={() => {}}>
+          Menu Item One
+        </MenuItem>
+        <MenuItem flex="0 0 auto" href="#">
+          Menu Item Two
+        </MenuItem>
+        <MenuItem flex="0 0 auto" submenu="Menu Item Three">
+          <MenuItem href="#">Item Submenu One</MenuItem>
+          <MenuItem href="#">Item Submenu Two</MenuItem>
+          <MenuDivider />
+          <MenuItem icon="settings" href="#">
+            Item Submenu Three
+          </MenuItem>
+          <MenuItem href="#">Item Submenu Four</MenuItem>
+        </MenuItem>
+        <MenuItem flex="0 0 auto" submenu="Menu Item Four">
+          <MenuItem onClick={() => {}}>Item Submenu One</MenuItem>
+          <MenuItem href="#">Item Submenu Two</MenuItem>
+        </MenuItem>
+      </Menu>
+    </NavigationBar>
+    <div
+      style={{
+        height: "1000px",
+        background: "green",
+      }}
+    />
+    <NavigationBar
+      position="fixed"
+      orientation="bottom"
+      offset="25px"
+      aria-label="footer"
+    >
+      <Menu display="flex" flex="1">
+        <MenuItem flex="1" onClick={() => {}}>
+          Menu Item One
+        </MenuItem>
+        <MenuItem flex="0 0 auto" href="#">
+          Menu Item Two
+        </MenuItem>
+        <MenuItem flex="0 0 auto" href="#">
+          Menu Item Three
+        </MenuItem>
+        <MenuItem flex="0 0 auto" href="#">
+          Menu Item Four
+        </MenuItem>
+      </Menu>
+    </NavigationBar>
+  </div>
+);
+Fixed.parameters = {
+  docs: { inlineStories: false, iframeHeight: 200 },
+  themeProvider: { chromatic: { theme: "sage" } },
+};
diff --git a/src/components/navigation-bar/navigation-bar-test.stories.tsx b/src/components/navigation-bar/navigation-bar-test.stories.tsx
index d21378ce38..4060dfb53e 100644
--- a/src/components/navigation-bar/navigation-bar-test.stories.tsx
+++ b/src/components/navigation-bar/navigation-bar-test.stories.tsx
@@ -25,11 +25,3 @@ DefaultStory.args = {
   position: undefined,
   offset: "0",
 };
-
-export const NavigationBarComponent = ({
-  children,
-  ...props
-}: NavigationBarProps) => {
-  const isChildren = children !== null ? children : "Cypress tests";
-  return <NavigationBar {...props}>{isChildren}</NavigationBar>;
-};
diff --git a/src/components/navigation-bar/navigation-bar.pw.tsx b/src/components/navigation-bar/navigation-bar.pw.tsx
new file mode 100644
index 0000000000..65c7513314
--- /dev/null
+++ b/src/components/navigation-bar/navigation-bar.pw.tsx
@@ -0,0 +1,315 @@
+import React from "react";
+import { test, expect } from "@playwright/experimental-ct-react17";
+import Box from "../box";
+import NavigationBar, { NavigationBarProps } from ".";
+import { Menu, MenuItem } from "../menu";
+import {
+  NavigationBarComponent,
+  Default,
+  DarkTheme,
+  WhiteTheme,
+  BlackTheme,
+  ExampleWithMenu,
+  IsLoading,
+  WithCustomSpacing,
+  ContentMaxWidthBox,
+  Sticky,
+  Fixed,
+} from "./components.test-pw";
+
+import navigationBar from "../../../playwright/components/navigation-bar";
+import { COLOR, CHARACTERS } from "../../../playwright/support/constants";
+import { checkAccessibility } from "../../../playwright/support/helper";
+
+const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
+const testData = CHARACTERS.STANDARD;
+const variants = [
+  ["black", COLOR.BLACK],
+  ["light", "rgb(230, 235, 237)"],
+  ["white", "rgb(255, 255, 255)"],
+  ["dark", "rgb(0, 50, 76)"],
+] as [NavigationBarProps["navigationType"], string][];
+const offsetVal = [25, 100, -100];
+
+test.describe("Test props for NavigationBar component", () => {
+  specialCharacters.forEach((childrenValue) => {
+    test(`should render with ${childrenValue} as a children`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <NavigationBarComponent>{childrenValue}</NavigationBarComponent>
+      );
+
+      await expect(navigationBar(page)).toHaveText(childrenValue);
+    });
+  });
+
+  test("should render with ariaLabel prop", async ({ mount, page }) => {
+    await mount(<NavigationBarComponent ariaLabel={testData} />);
+
+    await expect(navigationBar(page)).toHaveAttribute("aria-label", testData);
+  });
+
+  variants.forEach(([navigationType, color]) => {
+    test(`should render with ${navigationType} as a navigationType`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NavigationBarComponent navigationType={navigationType} />);
+
+      await expect(navigationBar(page)).toHaveCSS("background-color", color);
+    });
+  });
+
+  ([true, false] as NavigationBarProps["isLoading"][]).forEach((boolean) => {
+    test(`should render with isLoading prop set to ${boolean}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <NavigationBarComponent isLoading={boolean}>
+          {testData}
+        </NavigationBarComponent>
+      );
+
+      const navigation = page.locator(`[data-component="navigation-bar"]`);
+
+      if (boolean) {
+        await expect(navigation).not.toBeAttached;
+      } else {
+        await expect(navigation).toBeVisible();
+      }
+    });
+  });
+
+  (["fixed", "sticky"] as const).forEach((position) => {
+    test(`should render with position prop set to ${position} and orientation set to top`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <NavigationBarComponent position={position} orientation="top" />
+      );
+
+      await expect(navigationBar(page)).toHaveCSS("position", position);
+    });
+  });
+
+  (["fixed", "sticky"] as const).forEach((position) => {
+    test(`should render with position prop set to ${position} and orientation set to bottom`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <NavigationBarComponent position={position} orientation="bottom" />
+      );
+
+      await expect(navigationBar(page)).toHaveCSS("position", position);
+    });
+  });
+
+  offsetVal.forEach((offset) => {
+    test(`should render with orientation set to top and offset prop set to ${offset} px`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <NavigationBarComponent
+          offset={`${offset}px`}
+          orientation="top"
+          position="fixed"
+        />
+      );
+
+      await expect(navigationBar(page)).toHaveCSS("top", `${offset}px`);
+    });
+  });
+
+  offsetVal.forEach((offset) => {
+    test(`should render with orientation set to bottom and offset prop set to ${offset} px`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <NavigationBarComponent
+          offset={`${offset}px`}
+          orientation="bottom"
+          position="fixed"
+        />
+      );
+
+      await expect(navigationBar(page)).toHaveCSS("bottom", `${offset}px`);
+    });
+  });
+
+  (["top", "bottom"] as const).forEach((orientation) => {
+    test(`should render NavigationBar component with orientation prop set to ${orientation}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <NavigationBarComponent orientation={orientation} position="fixed" />
+      );
+
+      await expect(navigationBar(page)).toHaveCSS(orientation, "0px");
+    });
+  });
+
+  (["fixed", "sticky"] as NavigationBarProps["position"][]).forEach(
+    (position) => {
+      test(`should render with position prop set to ${position} and work as expected`, async ({
+        mount,
+        page,
+      }) => {
+        await mount(
+          <div
+            style={{
+              height: "250px",
+            }}
+          >
+            <NavigationBar
+              position={position}
+              orientation="top"
+              offset="25px"
+              aria-label="header"
+            >
+              <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
+                <Menu display="flex" flex="1">
+                  <MenuItem flex="1" onClick={() => {}}>
+                    Menu Item One
+                  </MenuItem>
+                </Menu>
+              </Box>
+            </NavigationBar>
+            <div
+              style={{
+                height: "1000px",
+              }}
+            />
+            <NavigationBar
+              position={position}
+              orientation="bottom"
+              offset="25px"
+              aria-label="footer"
+            >
+              <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
+                <Menu display="flex" flex="1">
+                  <MenuItem flex="1" onClick={() => {}}>
+                    Menu Item One
+                  </MenuItem>
+                </Menu>
+              </Box>
+            </NavigationBar>
+          </div>
+        );
+
+        await expect(navigationBar(page).nth(0)).toBeVisible();
+
+        await expect(navigationBar(page).nth(1)).toBeVisible();
+
+        await page.evaluate(() => window.scrollTo(1000, 1000));
+
+        if (position === "fixed") {
+          await expect(navigationBar(page).nth(0)).toBeInViewport();
+        } else {
+          await expect(navigationBar(page).nth(0)).not.toBeInViewport();
+        }
+
+        await expect(navigationBar(page).nth(1)).toBeVisible();
+      });
+    }
+  );
+
+  test.describe("Accessibility tests for NavigationBar component", () => {
+    test("should pass accessibility test Default example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<Default />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for DarkTheme example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DarkTheme />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for WhiteTheme example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<WhiteTheme />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for BlackTheme example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<BlackTheme />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for ExampleWithMenu example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ExampleWithMenu />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for IsLoading example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<IsLoading />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for WithCustomSpacing example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<WithCustomSpacing />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for ContentMaxWidthBox example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ContentMaxWidthBox />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for Sticky example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<Sticky />);
+
+      await checkAccessibility(page);
+    });
+
+    test("should pass accessibility test for Fixed example", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<Fixed />);
+
+      await checkAccessibility(page);
+    });
+  });
+});
diff --git a/src/components/navigation-bar/navigation-bar.stories.mdx b/src/components/navigation-bar/navigation-bar.stories.mdx
index 4695d58203..a98076c2ed 100644
--- a/src/components/navigation-bar/navigation-bar.stories.mdx
+++ b/src/components/navigation-bar/navigation-bar.stories.mdx
@@ -120,4 +120,4 @@ top/bottom can be offset using the `offset` prop.
 
 ### Navigation Bar
 
-<StyledSystemProps of={NavigationBar} noHeader padding flexBox />
+<StyledSystemProps of={NavigationBar} noHeader padding flexBox />
\ No newline at end of file