diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-inherit-dark.png b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-inherit-dark.png
new file mode 100755
index 0000000000..321346fee4
Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-inherit-dark.png differ
diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-inherit-light.png b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-inherit-light.png
new file mode 100755
index 0000000000..6ba5984f34
Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-inherit-light.png differ
diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-light-with-components-within-ic-theme.png b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-light-with-components-within-ic-theme.png
new file mode 100755
index 0000000000..846d35d0a5
Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-light-with-components-within-ic-theme.png differ
diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-light-with-dark-mode-component-overrides.png b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-light-with-dark-mode-component-overrides.png
new file mode 100755
index 0000000000..18018781e0
Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-light-with-dark-mode-component-overrides.png differ
diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-system-light.png b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-system-light.png
new file mode 100755
index 0000000000..18018781e0
Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-ic-theme-system-light.png differ
diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-sunrise-brand.png b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-sunrise-brand.png
new file mode 100755
index 0000000000..76481137ac
Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcTheme.cy.tsx-sunrise-brand.png differ
diff --git a/packages/react/src/component-tests/IcTheme/IcTheme.cy.tsx b/packages/react/src/component-tests/IcTheme/IcTheme.cy.tsx
new file mode 100644
index 0000000000..ecf5441b10
--- /dev/null
+++ b/packages/react/src/component-tests/IcTheme/IcTheme.cy.tsx
@@ -0,0 +1,203 @@
+/* eslint-disable react/jsx-no-bind */
+/// <reference types="Cypress" />
+
+import { mount } from "cypress/react";
+import React from "react";
+import {
+  ComponentsWithInheritThemeProp,
+  SwitchBrand,
+  ThemeWithComponentThemeProps,
+  ThemeWithComponentWithinSeparateIcTheme,
+} from "./IcThemeTestData";
+import {
+  HAVE_ATTR,
+  HAVE_BEEN_CALLED_ONCE,
+  HAVE_BEEN_CALLED_WITH,
+} from "../utils/constants";
+import { setThresholdBasedOnEnv } from "../../../cypress/utils/helpers";
+
+const THEME_SELECTOR = "ic-theme";
+const DEFAULT_TEST_THRESHOLD = 0.048;
+
+describe("IcTheme end-to-end and visual regression tests", () => {
+  beforeEach(() => {
+    cy.injectAxe();
+    cy.viewport(1440, 900);
+  });
+
+  afterEach(() => {
+    cy.task("generateReport");
+  });
+
+  it("should render in light mode when IcTheme theme is set to light with components with theme prop set to dark rendered in dark mode", () => {
+    mount(
+      <ThemeWithComponentThemeProps
+        color={"rgba(27, 60, 121, 1)"}
+        theme={"light"}
+        backgroundColor="white"
+      />
+    );
+
+    cy.checkHydrated(THEME_SELECTOR);
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "ic-theme-light-with-dark-mode-component-overrides",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.031),
+    });
+  });
+
+  it("should render in light mode when IcTheme theme is set to light with components within another IcTheme component with theme set to dark rendered in dark mode", () => {
+    mount(
+      <ThemeWithComponentWithinSeparateIcTheme
+        color={"rgba(27, 60, 121, 1)"}
+        theme={"light"}
+        backgroundColor="white"
+      />
+    );
+
+    cy.checkHydrated(THEME_SELECTOR);
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "ic-theme-light-with-components-within-ic-theme",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.03),
+    });
+  });
+
+  it.skip("should render according to dark mode system settings when IcTheme theme is set to system", () => {
+    cy.wrap(
+      Cypress.automation("remote:debugger:protocol", {
+        command: "Emulation.setEmulatedMedia",
+        params: {
+          features: [
+            {
+              name: "prefers-color-scheme",
+              value: "dark",
+            },
+          ],
+        },
+      })
+    );
+
+    mount(
+      <ThemeWithComponentThemeProps
+        color={"rgba(27, 60, 121, 1)"}
+        theme={"system"}
+        backgroundColor="black"
+      />
+    );
+
+    cy.checkHydrated(THEME_SELECTOR);
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "ic-theme-system-dark",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.03),
+    });
+  });
+
+  it("should render according to light mode system settings when IcTheme theme is set to system", () => {
+    cy.wrap(
+      Cypress.automation("remote:debugger:protocol", {
+        command: "Emulation.setEmulatedMedia",
+        params: {
+          features: [
+            {
+              name: "prefers-color-scheme",
+              value: "light",
+            },
+          ],
+        },
+      })
+    );
+
+    mount(
+      <ThemeWithComponentThemeProps
+        color={"rgba(27, 60, 121, 1)"}
+        theme={"system"}
+        backgroundColor="white"
+      />
+    );
+
+    cy.checkHydrated(THEME_SELECTOR);
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "ic-theme-system-light",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.031),
+    });
+  });
+
+  it("should render components with IcTheme colour when theme prop is set to inherit - dark theme", () => {
+    mount(
+      <ComponentsWithInheritThemeProp
+        color={"rgba(27, 60, 121, 1)"}
+        theme={"dark"}
+        backgroundColor="black"
+      />
+    );
+
+    cy.checkHydrated(THEME_SELECTOR);
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "ic-theme-inherit-dark",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+  });
+
+  it("should render components with IcTheme colour when theme prop is set to inherit - light theme", () => {
+    mount(
+      <ComponentsWithInheritThemeProp
+        color={"rgba(27, 60, 121, 1)"}
+        theme={"light"}
+        backgroundColor="white"
+      />
+    );
+
+    cy.checkHydrated(THEME_SELECTOR);
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "ic-theme-inherit-light",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.004),
+    });
+  });
+
+  it("should switch brand colour", () => {
+    mount(<SwitchBrand />);
+
+    cy.checkHydrated(THEME_SELECTOR);
+    cy.spy(window.console, "log").as("spyWinConsoleLog");
+    cy.get(THEME_SELECTOR).invoke(
+      "on",
+      "brandChange",
+      cy.stub().as("brandChange")
+    );
+
+    cy.get(THEME_SELECTOR).should(
+      HAVE_ATTR,
+      "brand-color",
+      "rgb(255, 201, 60)"
+    );
+
+    cy.compareSnapshot({
+      name: "sunrise-brand",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.022),
+    });
+
+    cy.get("ic-button").contains("Default theme").click();
+    cy.get(THEME_SELECTOR).should(HAVE_ATTR, "brand-color", "rgb(27, 60, 121)");
+    cy.get("@brandChange").should(HAVE_BEEN_CALLED_ONCE);
+    cy.get("@spyWinConsoleLog").should(HAVE_BEEN_CALLED_WITH, {
+      mode: "light",
+      color: {
+        r: 27,
+        g: 60,
+        b: 121,
+        a: 1,
+      },
+    });
+  });
+});
diff --git a/packages/react/src/component-tests/IcTheme/IcThemeTestData.tsx b/packages/react/src/component-tests/IcTheme/IcThemeTestData.tsx
new file mode 100644
index 0000000000..2b3f508897
--- /dev/null
+++ b/packages/react/src/component-tests/IcTheme/IcThemeTestData.tsx
@@ -0,0 +1,595 @@
+import React, { ReactElement, useState } from "react";
+import {
+  IcTheme,
+  IcTopNavigation,
+  IcSearchBar,
+  IcNavigationButton,
+  IcNavigationItem,
+  IcHero,
+  IcTextField,
+  IcButton,
+  IcLink,
+  IcSectionContainer,
+  IcCheckbox,
+  IcAlert,
+  IcTypography,
+  IcCardVertical,
+  IcFooter,
+  IcFooterLink,
+  IcSwitch,
+} from "../../components";
+import { SlottedSVG } from "../../react-component-lib/slottedSVG";
+
+export const ThemeWithComponentThemeProps = (args: {
+  color: "rgba(27, 60, 121, 1)";
+  theme: "light" | "dark" | "system";
+  backgroundColor: "white" | "black";
+}): ReactElement => {
+  return (
+    <>
+      <div style={{ backgroundColor: args.backgroundColor }}>
+        <IcTheme brandColor={args.color} theme={args.theme}>
+          <IcTopNavigation
+            appTitle="ApplicationName"
+            status="alpha"
+            version="v0.0.7"
+          >
+            <SlottedSVG
+              slot="app-icon"
+              xmlns="http://www.w3.org/2000/SlottedSVG"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+            </SlottedSVG>
+            <IcSearchBar slot="search" placeholder="Search" label="Search" />
+            <IcNavigationButton
+              label="button1"
+              slot="buttons"
+              onClick={() => alert("test")}
+            >
+              <SlottedSVG
+                slot="icon"
+                xmlns="http://www.w3.org/2000/SlottedSVG"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                fill="#000000"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+              </SlottedSVG>
+            </IcNavigationButton>
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem
+              label="Navigation"
+              href="/"
+              selected={true}
+              slot="navigation"
+            />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+          </IcTopNavigation>
+          <IcHero
+            heading="Hero heading"
+            subheading="Hero description. This is a Hero component, it should be used as a page heading."
+            secondary-heading="Secondary Heading"
+            secondary-subheading="This is a secondary description."
+            full-width
+          >
+            <div slot="interaction" style={{ display: "flex" }}>
+              <IcTextField
+                placeholder="Filter display"
+                label="Filter display"
+                hide-label
+              ></IcTextField>
+              <IcButton variant="primary" style={{ marginLeft: 16 }}>
+                Filter
+              </IcButton>
+            </div>
+            <IcButton variant="secondary" slot="interaction">
+              See all
+            </IcButton>
+            <IcLink
+              href="https://google.com"
+              slot="interaction"
+              style={{ marginTop: 10 }}
+            >
+              Help
+            </IcLink>
+          </IcHero>
+          <IcSectionContainer
+            style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
+          >
+            <IcCheckbox
+              value="valueName1"
+              label="Unselected / Default"
+            ></IcCheckbox>
+            <IcTextField
+              label="What is your favourite coffee?"
+              required
+              placeholder="Placeholder"
+              helperText="Such as Arabica, Robusta or Liberica"
+            ></IcTextField>
+            <IcAlert
+              heading="This alert uses a custom message slot"
+              dismissible={true}
+            >
+              <IcButton slot="action" variant="secondary" monochrome>
+                Button
+              </IcButton>
+              <IcTypography variant="body" slot="message">
+                <p>
+                  This is some text and
+                  <IcLink href="/"> this is an inline link IcLink </IcLink>
+                  within the text
+                </p>
+              </IcTypography>
+            </IcAlert>
+            <IcCardVertical heading="This is the card heading"></IcCardVertical>
+            <div
+              style={{
+                padding: "10px",
+                display: "flex",
+                gap: "10px",
+                backgroundColor: "black",
+              }}
+            >
+              <IcSwitch label="Label" theme="dark" />
+              <IcSwitch label="Label" checked theme="dark" />
+              <IcSwitch label="Label" disabled theme="dark" />
+              <IcSwitch label="Label" disabled checked theme="dark" />
+              <IcTypography variant="body" theme="dark">
+                The component theme prop should override the IcTheme theme prop
+              </IcTypography>
+            </div>
+          </IcSectionContainer>
+          <IcFooter
+            aligned="full-width"
+            description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+            please get in touch."
+            caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+          >
+            <IcFooterLink slot="link" href="/">
+              Get Started
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Accessibility
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Styles
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Components
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Patterns
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Design toolkit
+            </IcFooterLink>
+            <div
+              slot="logo"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--ic-space-sm)",
+              }}
+            >
+              <IcButton>Slotted Button</IcButton>
+            </div>
+          </IcFooter>
+        </IcTheme>
+      </div>
+    </>
+  );
+};
+
+export const ThemeWithComponentWithinSeparateIcTheme = (args: {
+  color: "rgba(27, 60, 121, 1)";
+  theme: "light" | "dark" | "system";
+  backgroundColor: "white" | "black";
+}): ReactElement => {
+  return (
+    <>
+      <div style={{ backgroundColor: args.backgroundColor }}>
+        <IcTheme brandColor={args.color} theme={args.theme}>
+          <IcTopNavigation
+            appTitle="ApplicationName"
+            status="alpha"
+            version="v0.0.7"
+          >
+            <SlottedSVG
+              slot="app-icon"
+              xmlns="http://www.w3.org/2000/SlottedSVG"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+            </SlottedSVG>
+            <IcSearchBar slot="search" placeholder="Search" label="Search" />
+            <IcNavigationButton
+              label="button1"
+              slot="buttons"
+              onClick={() => alert("test")}
+            >
+              <SlottedSVG
+                slot="icon"
+                xmlns="http://www.w3.org/2000/SlottedSVG"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                fill="#000000"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+              </SlottedSVG>
+            </IcNavigationButton>
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem
+              label="Navigation"
+              href="/"
+              selected={true}
+              slot="navigation"
+            />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+          </IcTopNavigation>
+          <IcHero
+            heading="Hero heading"
+            subheading="Hero description. This is a Hero component, it should be used as a page heading."
+            secondary-heading="Secondary Heading"
+            secondary-subheading="This is a secondary description."
+            full-width
+          >
+            <div slot="interaction" style={{ display: "flex" }}>
+              <IcTextField
+                placeholder="Filter display"
+                label="Filter display"
+                hide-label
+              ></IcTextField>
+              <IcButton variant="primary" style={{ marginLeft: 16 }}>
+                Filter
+              </IcButton>
+            </div>
+            <IcButton variant="secondary" slot="interaction">
+              See all
+            </IcButton>
+            <IcLink
+              href="https://google.com"
+              slot="interaction"
+              style={{ marginTop: 10 }}
+            >
+              Help
+            </IcLink>
+          </IcHero>
+          <IcSectionContainer
+            style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
+          >
+            <IcCheckbox
+              value="valueName1"
+              label="Unselected / Default"
+            ></IcCheckbox>
+            <IcTextField
+              label="What is your favourite coffee?"
+              required
+              placeholder="Placeholder"
+              helperText="Such as Arabica, Robusta or Liberica"
+            ></IcTextField>
+            <IcAlert
+              heading="This alert uses a custom message slot"
+              dismissible={true}
+            >
+              <IcButton slot="action" variant="secondary">
+                Button
+              </IcButton>
+              <IcTypography variant="body" slot="message">
+                <p>
+                  This is some text and
+                  <IcLink href="/"> this is an inline link IcLink </IcLink>
+                  within the text
+                </p>
+              </IcTypography>
+            </IcAlert>
+            <IcCardVertical heading="This is the card heading"></IcCardVertical>
+            <div
+              style={{
+                border: "1px solid #ffffff",
+                padding: "0.25rem",
+                margin: "0.25rem",
+                backgroundColor: "black",
+              }}
+            >
+              <span style={{ color: "#ffffff" }}>
+                This content is in an IcTheme component with dark mode set
+              </span>
+              <IcTheme theme="dark">
+                <IcCardVertical heading="This is the card heading"></IcCardVertical>
+                <IcTextField
+                  label="What is your favourite coffee?"
+                  required
+                  placeholder="Placeholder"
+                  helperText="Such as Arabica, Robusta or Liberica"
+                ></IcTextField>
+              </IcTheme>
+            </div>
+          </IcSectionContainer>
+          <IcFooter
+            aligned="full-width"
+            description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+              please get in touch."
+            caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+          >
+            <IcFooterLink slot="link" href="/">
+              Get Started
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Accessibility
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Styles
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Components
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Patterns
+            </IcFooterLink>
+            <IcFooterLink slot="link" href="/">
+              Design toolkit
+            </IcFooterLink>
+            <div
+              slot="logo"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--ic-space-sm)",
+              }}
+            >
+              <IcButton>Slotted Button</IcButton>
+            </div>
+          </IcFooter>
+        </IcTheme>
+      </div>
+    </>
+  );
+};
+
+export const ComponentsWithInheritThemeProp = (args: {
+  color: "rgba(27, 60, 121, 1)";
+  theme: "light" | "dark" | "system";
+  backgroundColor: "white" | "black";
+}): ReactElement => {
+  return (
+    <>
+      <div style={{ backgroundColor: args.backgroundColor }}>
+        <IcTheme brandColor={args.color} theme={args.theme}>
+          <IcTopNavigation
+            appTitle="ApplicationName"
+            status="alpha"
+            version="v0.0.7"
+          >
+            <SlottedSVG
+              slot="app-icon"
+              xmlns="http://www.w3.org/2000/SlottedSVG"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+            </SlottedSVG>
+            <IcSearchBar slot="search" placeholder="Search" label="Search" />
+            <IcNavigationButton
+              label="button1"
+              slot="buttons"
+              onClick={() => alert("test")}
+            >
+              <SlottedSVG
+                slot="icon"
+                xmlns="http://www.w3.org/2000/SlottedSVG"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                fill="#000000"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+              </SlottedSVG>
+            </IcNavigationButton>
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+            <IcNavigationItem
+              label="Navigation"
+              href="/"
+              selected={true}
+              slot="navigation"
+            />
+            <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+          </IcTopNavigation>
+          <IcSectionContainer
+            style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
+          >
+            <IcCheckbox
+              value="valueName1"
+              label="Unselected / Default"
+            ></IcCheckbox>
+            <IcTextField
+              label="What is your favourite coffee?"
+              required
+              placeholder="Placeholder"
+              helperText="Such as Arabica, Robusta or Liberica"
+            ></IcTextField>
+            <div
+              style={{
+                padding: "10px",
+                display: "flex",
+                gap: "10px",
+              }}
+            >
+              <IcSwitch label="Label" theme="inherit" />
+              <IcSwitch label="Label" checked theme="inherit" />
+              <IcSwitch label="Label" disabled theme="inherit" />
+              <IcSwitch label="Label" disabled checked theme="inherit" />
+              <IcTypography variant="body" theme="inherit">
+                Components will inherit their theme colour based on IcTheme when
+                theme="inherit"
+              </IcTypography>
+            </div>
+          </IcSectionContainer>
+        </IcTheme>
+      </div>
+    </>
+  );
+};
+
+export const SwitchBrand = () => {
+  const [color, setColour] = useState("rgb(255, 201, 60)");
+  const defaultButtonClickHandler = () => {
+    setColour("rgb(27, 60, 121)");
+  };
+  const differentButtonClickHandler = () => {
+    setColour("rgb(255, 201, 60)");
+  };
+  const handleBrandChange = (e: CustomEvent) => {
+    console.log(e.detail);
+  };
+  return (
+    <>
+      <IcTheme brandColor={color} onBrandChange={handleBrandChange}>
+        <IcButton variant="primary" onClick={defaultButtonClickHandler}>
+          Default theme
+        </IcButton>
+        <IcButton variant="primary" onClick={differentButtonClickHandler}>
+          Sunset theme
+        </IcButton>
+        <br />
+        <IcTopNavigation
+          appTitle="ApplicationName"
+          status="alpha"
+          version="v0.0.7"
+        >
+          <SlottedSVG
+            slot="app-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+          </SlottedSVG>
+          <IcSearchBar slot="search" placeholder="Search" label="Search" />
+          <IcNavigationButton label="button1" slot="buttons">
+            <SlottedSVG
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+            </SlottedSVG>
+          </IcNavigationButton>
+          <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+          <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+          <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+          <IcNavigationItem
+            label="Navigation"
+            href="/"
+            selected={true}
+            slot="navigation"
+          />
+          <IcNavigationItem label="Navigation" href="/" slot="navigation" />
+        </IcTopNavigation>
+        <IcHero
+          heading="Hero heading"
+          subheading="Hero description. This is a Hero component, it should be used as a page heading."
+          secondary-heading="Secondary Heading"
+          secondary-subheading="This is a secondary description."
+          full-width
+        >
+          <div slot="interaction" style={{ display: "flex" }}>
+            <IcTextField
+              placeholder="Filter display"
+              label="Filter display"
+              hide-label
+            ></IcTextField>
+            <IcButton variant="primary" style={{ marginLeft: 16 }}>
+              Filter
+            </IcButton>
+          </div>
+          <IcButton variant="secondary" slot="interaction">
+            See all
+          </IcButton>
+          <IcLink
+            href="https://google.com"
+            slot="interaction"
+            style={{ marginTop: 10 }}
+          >
+            Help
+          </IcLink>
+        </IcHero>
+        <IcFooter
+          aligned="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+            please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <IcFooterLink slot="link" href="/">
+            Get Started
+          </IcFooterLink>
+          <IcFooterLink slot="link" href="/">
+            Accessibility
+          </IcFooterLink>
+          <IcFooterLink slot="link" href="/">
+            Styles
+          </IcFooterLink>
+          <IcFooterLink slot="link" href="/">
+            Components
+          </IcFooterLink>
+          <IcFooterLink slot="link" href="/">
+            Patterns
+          </IcFooterLink>
+          <IcFooterLink slot="link" href="/">
+            Design toolkit
+          </IcFooterLink>
+          <div
+            slot="logo"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "var(--ic-space-sm)",
+            }}
+          >
+            <IcButton>Slotted Button</IcButton>
+            <IcFooterLink href="/">
+              <SlottedSVG
+                xmlns="http://www.w3.org/2000/svg"
+                height="48px"
+                viewBox="0 0 24 24"
+                width="48px"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" />
+              </SlottedSVG>
+            </IcFooterLink>
+          </div>
+        </IcFooter>
+      </IcTheme>
+    </>
+  );
+};
diff --git a/packages/react/src/stories/ic-theme.stories.mdx b/packages/react/src/stories/ic-theme.stories.mdx
index dbdf539117..4a0274010e 100644
--- a/packages/react/src/stories/ic-theme.stories.mdx
+++ b/packages/react/src/stories/ic-theme.stories.mdx
@@ -105,11 +105,11 @@ export const Controlled = () => {
         full-width
       >
         <div slot="interaction" style={{ display: "flex" }}>
-          <ic-text-field
+          <IcTextField
             placeholder="Filter display"
             label="Filter display"
             hide-label
-          ></ic-text-field>
+          ></IcTextField>
           <IcButton variant="primary" style={{ marginLeft: 16 }}>
             Filter
           </IcButton>
@@ -117,13 +117,13 @@ export const Controlled = () => {
         <IcButton variant="secondary" slot="interaction">
           See all
         </IcButton>
-        <ic-link
+        <IcLink
           href="https://google.com"
           slot="interaction"
           style={{ marginTop: 10 }}
         >
           Help
-        </ic-link>
+        </IcLink>
       </IcHero>
       <IcAlert
         heading="This alert uses a custom message slot"
@@ -135,13 +135,13 @@ export const Controlled = () => {
         <IcTypography variant="body" slot="message">
           <p>
             This is some text and
-            <ic-link href="/"> this is an inline link ic-link</ic-link>
+            <IcLink href="/"> this is an inline link ic-link</IcLink>
             within the text
           </p>
         </IcTypography>
       </IcAlert>
       <IcFooter
-        align="full-width"
+        aligned="full-width"
         description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
             please get in touch."
         caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
@@ -169,7 +169,7 @@ export const Controlled = () => {
           style={{
             display: "flex",
             alignItems: "center",
-            gap: "var(--ic-space-sm);",
+            gap: "var(--ic-space-sm)",
           }}
         >
           <IcButton>Slotted Button</IcButton>
@@ -269,11 +269,11 @@ export const defaultArgs = {
         full-width
       >
         <div slot="interaction" style={{ display: "flex" }}>
-          <ic-text-field
+          <IcTextField
             placeholder="Filter display"
             label="Filter display"
             hide-label
-          ></ic-text-field>
+          ></IcTextField>
           <IcButton variant="primary" style={{ marginLeft: 16 }}>
             Filter
           </IcButton>
@@ -281,13 +281,13 @@ export const defaultArgs = {
         <IcButton variant="secondary" slot="interaction">
           See all
         </IcButton>
-        <ic-link
+        <IcLink
           href="https://google.com"
           slot="interaction"
           style={{ marginTop: 10 }}
         >
           Help
-        </ic-link>
+        </IcLink>
       </IcHero>
       <IcSectionContainer style={{ display: "flex", flexDirection: "column", gap: "0.5rem"}}>
         <IcCheckbox
@@ -312,7 +312,7 @@ export const defaultArgs = {
           <IcTypography variant="body" slot="message">
             <p>
               This is some text and
-              <ic-link href="/"> this is an inline link ic-link</ic-link>
+              <IcLink href="/"> this is an inline link ic-link</IcLink>
               within the text
             </p>
           </IcTypography>
@@ -361,7 +361,7 @@ export const defaultArgs = {
           style={{
             display: "flex",
             alignItems: "center",
-            gap: "var(--ic-space-sm);",
+            gap: "var(--ic-space-sm)",
           }}
         >
           <IcButton>Slotted Button</IcButton>