diff --git a/web-components/package.json b/web-components/package.json
index 38ef6c8c4..fb78bc11b 100644
--- a/web-components/package.json
+++ b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.16.10",
+  "version": "2.16.11",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
diff --git a/web-components/src/[sandbox]/examples/tabs.ts b/web-components/src/[sandbox]/examples/tabs.ts
index 1df8cb35a..6c6a78cae 100644
--- a/web-components/src/[sandbox]/examples/tabs.ts
+++ b/web-components/src/[sandbox]/examples/tabs.ts
@@ -514,69 +514,72 @@ export class TabsTemplateSandbox extends LitElement {
                   </button>
                 `}
           </md-tabs>
-          <h3>Allows the tab index to be changed programmatically without requiring a mouse click event on the tab item</h3>
-        <md-toggle-switch @click=${() => this.handleTabIndexChange()}>
-          Programmatically change tab index
-        </md-toggle-switch>
-        <div>
-          <md-tabs justified selected-index="${this.selectedTabIndex}">
-            <md-tab slot="tab" aria-label="Consult Label">
-              <span>Consult</span>
-            </md-tab>
-            <md-tab-panel slot="panel">
-              <md-list role="listbox">
-                <md-list-item slot="list-item" aria-label="item-1" shape="rounded">
-                  <div aria-label="item-1-div">
-                    <div>
-                      <p>Alan Johnson</p>
-                      <p>1234434</p>
+          <h3>
+            Allows the tab index to be changed programmatically without requiring a mouse click event on the tab item
+          </h3>
+          <md-toggle-switch @click=${() => this.handleTabIndexChange()}>
+            Programmatically change tab index
+          </md-toggle-switch>
+          <div>
+            <md-tabs justified selected-index="${this.selectedTabIndex}">
+              <md-tab slot="tab" aria-label="Consult Label">
+                <span>Consult</span>
+              </md-tab>
+              <md-tab-panel slot="panel">
+                <md-list role="listbox">
+                  <md-list-item slot="list-item" aria-label="item-1" shape="rounded">
+                    <div aria-label="item-1-div">
+                      <div>
+                        <p>Alan Johnson</p>
+                        <p>1234434</p>
+                      </div>
                     </div>
-                  </div>
-                </md-list-item>
-                <md-list-item slot="list-item" aria-label="item-2" shape="rounded">
-                  <div aria-label="item-2-div">
-                    <div>
-                      <p>Mark Corrigan</p>
-                      <p>43454334</p>
+                  </md-list-item>
+                  <md-list-item slot="list-item" aria-label="item-2" shape="rounded">
+                    <div aria-label="item-2-div">
+                      <div>
+                        <p>Mark Corrigan</p>
+                        <p>43454334</p>
+                      </div>
                     </div>
-                  </div>
-                </md-list-item>
-              </md-list>
-            </md-tab-panel>
-            <md-tab slot="tab" aria-label="Transfer label" aria-label="address-book">
-              <span>Transfer</span>
-            </md-tab>
-            <md-tab-panel slot="panel">
-              <md-list role="listbox">
-                <md-list-item slot="list-item" aria-label="item-1">
-                  <div aria-label="item-1-div">
-                    <div>
-                      <p>Jermey Usborne</p>
-                      <p>83498347</p>
+                  </md-list-item>
+                </md-list>
+              </md-tab-panel>
+              <md-tab slot="tab" aria-label="Transfer label" aria-label="address-book">
+                <span>Transfer</span>
+              </md-tab>
+              <md-tab-panel slot="panel">
+                <md-list role="listbox">
+                  <md-list-item slot="list-item" aria-label="item-1">
+                    <div aria-label="item-1-div">
+                      <div>
+                        <p>Jermey Usborne</p>
+                        <p>83498347</p>
+                      </div>
                     </div>
-                  </div>
-                </md-list-item>
-                <md-list-item slot="list-item" aria-label="item-2">
-                  <div aria-label="item-2-div">
-                    <div>
-                      <p>Sophie Chapman</p>
-                      <p>22384758</p>
+                  </md-list-item>
+                  <md-list-item slot="list-item" aria-label="item-2">
+                    <div aria-label="item-2-div">
+                      <div>
+                        <p>Sophie Chapman</p>
+                        <p>22384758</p>
+                      </div>
                     </div>
-                  </div>
-                </md-list-item>
-              </md-list>
-            </md-tab-panel>
-          </md-tabs>
-        </div>
-        <br />
-        <md-modal htmlId="modal-1" ?show=${this.isModalOpen} size="dialog" hideFooter hideHeader noExitOnEsc>
-          <div slot="header">
-            <span>Close Tab Confirmation</span>
+                  </md-list-item>
+                </md-list>
+              </md-tab-panel>
+            </md-tabs>
           </div>
-          <p>Are you sure you want to close the Tab?</p>
-          <md-button slot="footer" @click="${() => (this.isModalOpen = false)}">Cancel</md-button>
-          <md-button slot="footer" @click="${this.closeTab}" type="submit">Confirm</md-button>
-        </md-modal>
+          <br />
+          <md-modal htmlId="modal-1" ?show=${this.isModalOpen} size="dialog" hideFooter hideHeader noExitOnEsc>
+            <div slot="header">
+              <span>Close Tab Confirmation</span>
+            </div>
+            <p>Are you sure you want to close the Tab?</p>
+            <md-button slot="footer" @click="${() => (this.isModalOpen = false)}">Cancel</md-button>
+            <md-button slot="footer" @click="${this.closeTab}" type="submit">Confirm</md-button>
+          </md-modal>
+        </div>
       </div>
     `;
   }
diff --git a/web-components/src/[sandbox]/sandbox.scss b/web-components/src/[sandbox]/sandbox.scss
index b042dd53f..874d1b4b0 100644
--- a/web-components/src/[sandbox]/sandbox.scss
+++ b/web-components/src/[sandbox]/sandbox.scss
@@ -1,3 +1,28 @@
+md-theme {
+  background-color: white;
+  color: var(--md-primary-text-color);
+
+  &.is-visual-rebrand {
+    background: url("/images/brand-visuals/backgrounds/operation-pop-background-light.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+}
+
+
+md-theme[darkTheme] {
+  background-color: black;
+  color: var(--md-primary-text-color);
+
+  &.is-visual-rebrand {
+    background: url("/images/brand-visuals/backgrounds/operation-pop-background-light.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+}
+
 .container {
   box-sizing: border-box;
   height: calc(100vh - 1.75rem);
@@ -5,7 +30,7 @@
   overflow-y: auto;
   padding: 1rem;
   width: 100%;
-  background: var(--md-primary-bg-color);
+  background: var(--md-glass-bg-color);
 }
 
 .container-color-bg-color-options {
diff --git a/web-components/src/[sandbox]/sandbox.ts b/web-components/src/[sandbox]/sandbox.ts
index a18b00be3..5a777c911 100644
--- a/web-components/src/[sandbox]/sandbox.ts
+++ b/web-components/src/[sandbox]/sandbox.ts
@@ -5,6 +5,7 @@ import { themeManager } from "@/managers/ThemeManager";
 import reset from "@/wc_scss/reset.scss";
 import { MobxLitElement } from "@adobe/lit-mobx";
 import { customElement, html, internalProperty, PropertyValues, TemplateResult } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import {
   accordionTemplate,
   advanceListTemplate,
@@ -86,17 +87,6 @@ export class Sandbox extends MobxLitElement {
     this.selectedTab = tab;
   }
 
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    if (themeManager.isDarkMode) {
-      document.body.style.backgroundColor = "#000";
-      document.body.style.color = "#fff";
-    } else {
-      document.body.style.backgroundColor = "#fff";
-      document.body.style.color = "#000";
-    }
-  }
-
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
   }
@@ -111,6 +101,11 @@ export class Sandbox extends MobxLitElement {
     if (storedDarkTheme) {
       themeManager.setDarkMode(JSON.parse(storedDarkTheme));
     }
+
+    const storedVisualRebrand = localStorage.getItem("is-visual-rebrand-enabled");
+    if (storedVisualRebrand) {
+      themeManager.setVisualRebrandEnabled(JSON.parse(storedVisualRebrand));
+    }
   }
 
   toggleSetting(event: MouseEvent) {
@@ -129,6 +124,11 @@ export class Sandbox extends MobxLitElement {
     }
   }
 
+  toggleVisualRebrandEnabled() {
+    themeManager.setVisualRebrandEnabled(!themeManager.isVisualRebrandEnabled);
+    localStorage.setItem("is-visual-rebrand-enabled", JSON.stringify(themeManager.isVisualRebrandEnabled));
+  }
+
   themeToggle() {
     return html`
       <div class="toggle-container">
@@ -176,6 +176,17 @@ export class Sandbox extends MobxLitElement {
           />
           MomentumV2
         </label>
+        <label class="switch">
+          <input
+            type="checkbox"
+            name="theme-switch"
+            class="visual-rebrand-switch"
+            data-aspect="momentumV2"
+            @click=${this.toggleVisualRebrandEnabled}
+            ?checked=${themeManager.isVisualRebrandEnabled}
+          />
+          Visual rebrand
+        </label>
       </div>
     `;
   }
@@ -185,10 +196,10 @@ export class Sandbox extends MobxLitElement {
       <div class="container-color-bg-color-options">
         <label for="color-dropdown">container color:</label>
         <select id="color-dropdown" name="colors" @change=${this.handleContainerColorChange}>
+          <option value="--md-glass-bg-color">--md-glass-bg-color</option>
+          <option value="transparent">transparent</option>
           <option value="--md-primary-bg-color">--md-primary-bg-color</option>
           <option value="--md-secondary-bg-color">--md-secondary-bg-color</option>
-          <option value="--md-primary-gradient-background">--md-primary-gradient-background</option>
-          <option value="--md-secondary-gradient-background">--md-secondary-gradient-background</option>
           <option value="--md-secondary-bg-color">--md-secondary-bg-color</option>
           <option value="--md-tertiary-one-bg-color">--md-tertiary-one-bg-color</option>
           <option value="--md-quaternary-bg-color">--md-md-quaternary-bg-color</option>
@@ -204,7 +215,11 @@ export class Sandbox extends MobxLitElement {
     const elements = this.shadowRoot?.querySelectorAll(".container");
     elements?.forEach((element) => {
       const containerElement = element as HTMLElement;
-      containerElement.style.background = `var(${selectedColor})`;
+      if (selectedColor === "transparent") {
+        containerElement.style.background = `${selectedColor}`;
+      } else {
+        containerElement.style.background = `var(${selectedColor})`;
+      }
     });
   }
 
@@ -246,10 +261,17 @@ export class Sandbox extends MobxLitElement {
     `;
   }
 
+  get themeClassMap() {
+    return {
+      "theme-toggle": true,
+      "is-visual-rebrand": themeManager.isVisualRebrandEnabled
+    };
+  }
+
   render() {
     return html`
       <md-theme
-        class="theme-toggle"
+        class="${classMap(this.themeClassMap)}"
         id="app-theme"
         ?darkTheme=${themeManager.isDarkMode}
         theme=${themeManager.themeName}
diff --git a/web-components/src/components/button/Button.ts b/web-components/src/components/button/Button.ts
index 21c58d042..5da5be1d4 100644
--- a/web-components/src/components/button/Button.ts
+++ b/web-components/src/components/button/Button.ts
@@ -292,6 +292,13 @@ export namespace Button {
       `;
     }
 
+    get computedAriaExpand(): "true" | "false" | undefined {
+      if (this.ariaExpanded === "true") return "true";
+      else if (this.ariaExpanded === "false") return "false";
+
+      return undefined;
+    }
+
     buttonTemplate(tag: Button.Tag) {
       if (tag === "button") {
         return html`
@@ -305,9 +312,7 @@ export namespace Button {
             aria-label=${ifDefined(this.ariaLabel || undefined)}
             aria-labelledby=${ifDefined(this.ariaLabelledBy || undefined)}
             aria-live=${ifDefined(this.ariaLive || undefined)}
-            aria-expanded=${ifDefined(
-              this.ariaExpanded ? (this.ariaExpanded === "true" ? "true" : "false") : undefined
-            )}
+            aria-expanded=${ifDefined(this.computedAriaExpand)}
             aria-haspopup=${ifDefined(this.ariaHaspopup === "false" ? undefined : this.ariaHaspopup)}
             aria-pressed=${ifDefined(this.ariaPressed || undefined)}
             aria-disabled=${ifDefined(this.disabled || this.loading || undefined)}
@@ -347,7 +352,7 @@ export namespace Button {
             @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
             role=${this.role}
             tabindex=${ifDefined(this.tabIndex || undefined)}
-            aria-pressed=${this.ariaPressed === "true" ? true : false}
+            aria-pressed=${this.ariaPressed === "true" ? "true" : "false"}
             aria-label=${ifDefined(this.ariaLabel || undefined)}
             aria-labelledby=${ifDefined(this.ariaLabelledBy || undefined)}
             aria-live=${ifDefined(this.ariaLive || undefined)}
@@ -361,12 +366,19 @@ export namespace Button {
       return nothing;
     }
 
+    get buttonContainerClassMap() {
+      return {
+        "md-button__container": this.containerLarge,
+        "md-button__container--small": !this.containerLarge
+      };
+    }
+
     render() {
       return html`
         ${this.getStyles()}
         ${this.label
           ? html`
-              <div part="button-container" class=${`md-button__container${this.containerLarge ? "" : "--small"}`}>
+              <div part="button-container" class=${classMap(this.buttonContainerClassMap)}>
                 ${this.buttonTemplate(this.tag)}
                 <div part="button-label" class="md-button__label">${this.label}</div>
               </div>
diff --git a/web-components/src/components/icon/Icon.ts b/web-components/src/components/icon/Icon.ts
index aa4c88b61..45611a9fa 100644
--- a/web-components/src/components/icon/Icon.ts
+++ b/web-components/src/components/icon/Icon.ts
@@ -174,7 +174,7 @@ export namespace Icon {
      */
     @property({ type: String }) iconSet: IconSet = "momentumUI";
 
-    private static designLookup = new Map(Object.entries(designMapping));
+    private static readonly designLookup = new Map(Object.entries(designMapping));
 
     @internalProperty()
     private svgIcon: HTMLElement | null = null;
@@ -450,7 +450,7 @@ export namespace Icon {
           role="img"
           aria-label=${this.ariaLabel}
           title=${this.title}
-          aria-hidden=${ifDefined(this.ariaHidden || undefined)}
+          aria-hidden=${ifDefined(this.ariaHidden ?? undefined)}
           @click=${(event: MouseEvent) => this.handleIconClick(event)}
         >
         </i>
@@ -465,7 +465,7 @@ export namespace Icon {
           role="img"
           aria-label=${this.ariaLabel}
           title=${this.title}
-          aria-hidden=${ifDefined(this.ariaHidden || undefined)}
+          aria-hidden=${ifDefined(this.ariaHidden ?? undefined)}
           @click=${(event: MouseEvent) => this.handleIconClick(event)}
         >
           ${this.svgIcon ? this.svgIcon : nothing}
diff --git a/web-components/src/components/tabs/Tabs.ts b/web-components/src/components/tabs/Tabs.ts
index 5c71ad026..fbaf7eb79 100644
--- a/web-components/src/components/tabs/Tabs.ts
+++ b/web-components/src/components/tabs/Tabs.ts
@@ -55,7 +55,7 @@ export namespace Tabs {
     @property({ type: Boolean, attribute: "draggable" }) draggable = false;
     @property({ type: String }) direction: "horizontal" | "vertical" = "horizontal";
     @property({ type: Number, attribute: "more-items-scroll-limit" }) moreItemsScrollLimit = Number.MAX_SAFE_INTEGER;
-    @property({ type: Number, reflect: true, attribute: 'selected-index' }) selectedIndex = 0;
+    @property({ type: Number, reflect: true, attribute: "selected-index" }) selectedIndex = 0;
     @property({ type: Number }) delay = 0;
     @property({ type: Number }) animation = 100;
     @property({ type: String, attribute: "ghost-class" }) ghostClass = "";
@@ -323,8 +323,8 @@ export namespace Tabs {
       }
 
       const comparator = (a: Tab.ELEMENT | TabPanel.ELEMENT, b: Tab.ELEMENT | TabPanel.ELEMENT) => {
-        const aName = a.getAttribute("name") || "";
-        const bName = b.getAttribute("name") || "";
+        const aName = a.getAttribute("name") ?? "";
+        const bName = b.getAttribute("name") ?? "";
         return this.tabsOrderPrefsArray.indexOf(aName) - this.tabsOrderPrefsArray.indexOf(bName);
       };
 
@@ -594,8 +594,7 @@ export namespace Tabs {
       } else {
         this.updateSelectedTab(selectedTabPanelIndex);
       }
-      this.noTabsVisible =
-        this.tabsFilteredAsVisibleList.length === 0 && this.tabsFilteredAsHiddenList.length === 0 ? true : false;
+      this.noTabsVisible = this.tabsFilteredAsVisibleList.length === 0 && this.tabsFilteredAsHiddenList.length === 0;
       this.requestUpdate();
     }
 
@@ -609,9 +608,9 @@ export namespace Tabs {
       if (tabs && panels) {
         [oldSelectedIndex, newSelectedIndex].forEach((index) => {
           const tab = tabs[index];
-          tab && tab.toggleAttribute("selected");
+          tab?.toggleAttribute("selected");
           const panel = panels[index];
-          panel && panel.toggleAttribute("selected");
+          panel?.toggleAttribute("selected");
           if (tab) {
             const tabCopy = this.tabsCopyHash[this.getCopyTabId(tab)];
             if (tabCopy) {
@@ -688,7 +687,7 @@ export namespace Tabs {
     }
 
     private getCurrentIndex(tabId: string) {
-      const arrayLength = this.visibleTabsContainerElement?.children.length || 0;
+      const arrayLength = this.visibleTabsContainerElement?.children.length ?? 0;
       for (let i = 0; i < arrayLength; i++) {
         if (this.visibleTabsContainerElement?.children[i].id === tabId) {
           return i;
@@ -700,7 +699,7 @@ export namespace Tabs {
     private moveFocusToAdjacentTab(elementId: string, direction: "previous" | "next" | "fromMoreTabs") {
       const currentTabIndex = this.getCurrentIndex(elementId);
       const visibleTabs = this.visibleTabsContainerElement?.children;
-      const visibleArrayLength = visibleTabs?.length || 0;
+      const visibleArrayLength = visibleTabs?.length ?? 0;
 
       if (!visibleTabs || visibleArrayLength === 0) return;
 
diff --git a/web-components/src/components/theme/Theme.ts b/web-components/src/components/theme/Theme.ts
index ce5518eb3..7e7cf53b3 100644
--- a/web-components/src/components/theme/Theme.ts
+++ b/web-components/src/components/theme/Theme.ts
@@ -66,7 +66,7 @@ export namespace Theme {
 
     private placement: Tooltip.Placement = "bottom";
     private popperInstance: Instance | null = null;
-    private eventListeners: {
+    private readonly eventListeners: {
       mouseEnter?: (event: MouseEvent) => void;
       mouseLeave?: (event: MouseEvent) => void;
     } = {};
@@ -270,9 +270,12 @@ export namespace Theme {
               options: {
                 offset: ({ placement }: { placement: Placement }) => {
                   const padding = halfArrowSize + additionalPadding;
-                  if (placement.startsWith("left") || placement.startsWith("right")) {
-                    return [0, padding];
-                  } else if (placement.startsWith("top") || placement.startsWith("bottom")) {
+                  if (
+                    placement.startsWith("left") ||
+                    placement.startsWith("right") ||
+                    placement.startsWith("top") ||
+                    placement.startsWith("bottom")
+                  ) {
                     return [0, padding];
                   }
                   return [8, 8]; // leave old defaults
diff --git a/web-components/src/wc_scss/themes/global--dark.scss b/web-components/src/wc_scss/themes/global--dark.scss
index 02327e6fe..1decfba70 100644
--- a/web-components/src/wc_scss/themes/global--dark.scss
+++ b/web-components/src/wc_scss/themes/global--dark.scss
@@ -8,6 +8,10 @@
 
   --md-default-focus-outline-color: #{$md-blue-40};
 
+  --md-glass-bg-color: #{$black-60};  
+  --md-glass-overlay-bg-color: #{$black-80};
+  --md-glass-overlay-inactive-bg-color: #{$black-40};
+
   // New Backgrounds
   --md-primary-bg-color: #{$md-gray-100};
   --md-primary-one-bg-color: #{$md-gray-95};
diff --git a/web-components/src/wc_scss/themes/global--light.scss b/web-components/src/wc_scss/themes/global--light.scss
index 1dc36ecc7..5374ca3c0 100644
--- a/web-components/src/wc_scss/themes/global--light.scss
+++ b/web-components/src/wc_scss/themes/global--light.scss
@@ -8,6 +8,10 @@
 
   --md-default-focus-outline-color: #{$md-blue-60};
 
+  --md-glass-bg-color: #{$white-60};
+  --md-glass-overlay-bg-color: #{$white-80};
+  --md-glass-overlay-inactive-bg-color: #{$white-40};
+
   // New Backgrounds
   --md-primary-bg-color: #{$md-white};
   --md-primary-one-bg-color: #{$md-white};
diff --git a/web-components/src/wc_scss/themes/global--mdv2.scss b/web-components/src/wc_scss/themes/global--mdv2.scss
index ae20c9550..660f939e3 100644
--- a/web-components/src/wc_scss/themes/global--mdv2.scss
+++ b/web-components/src/wc_scss/themes/global--mdv2.scss
@@ -106,6 +106,9 @@ $inter-medium-font: "Inter Medium", $font-family-sans-serif;
   --md-dynamic-layout-button-inverted-border-color: #{$mds-color-theme-inverted-outline-button-normal};
 
   --md-header-separator-color: transparent;
+  --md-glass-bg-color: #{$mds-color-theme-background-glass-normal};
+  --md-glass-overlay-bg-color: #{$mds-color-theme-background-glass-overlay-normal};
+  --md-glass-overlay-inactive-bg-color: #{$mds-color-theme-background-glass-overlay-inactive};
 
   /**
    * Temporarily disable overriding token  background colours for mdv2
diff --git a/web-components/webpack.config.ts b/web-components/webpack.config.ts
index 41a76d5e7..07a639e9c 100644
--- a/web-components/webpack.config.ts
+++ b/web-components/webpack.config.ts
@@ -147,7 +147,8 @@ export const commonDev = merge(common, {
         { from: `${pMomentum}/core/css/momentum-ui.min.css.map`, to: "css" },
         { from: `${pMomentum}/icons/css/momentum-ui-icons.min.css`, to: "css" },
         { from: `${pCss}/*.css`, to: "css/[name].[ext]" },
-        { from: `${pStats}/**/*.json`, to: "stats/[name].[ext]" }
+        { from: `${pStats}/**/*.json`, to: "stats/[name].[ext]" },
+        { from: `node_modules/@momentum-design/brand-visuals/dist/backgrounds`, to: "images/brand-visuals/backgrounds" }
       ]
     })
   ]