diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
index b9f07cf0e2a..7d241dfa3c1 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -532,6 +532,18 @@ describe("calcite-action-bar", () => {
     await page.waitForChanges();
 
     expect(await group.getProperty("layout")).toBe("vertical");
+
+    actionBar.innerHTML = html`
+      <calcite-action-group></calcite-action-group>
+      <calcite-action-group></calcite-action-group>
+    `;
+    await page.waitForChanges();
+
+    const groups = await page.findAll("calcite-action-group");
+
+    groups.forEach(async (group) => {
+      expect(await group.getProperty("layout")).toBe("vertical");
+    });
   });
 
   describe("theme", () => {
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
index 57a2968a2c7..d15b92509b0 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
+++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
@@ -347,6 +347,18 @@ describe("calcite-action-pad", () => {
     await page.waitForChanges();
 
     expect(await group.getProperty("layout")).toBe("vertical");
+
+    actionPad.innerHTML = html`
+      <calcite-action-group></calcite-action-group>
+      <calcite-action-group></calcite-action-group>
+    `;
+    await page.waitForChanges();
+
+    const groups = await page.findAll("calcite-action-group");
+
+    groups.forEach(async (group) => {
+      expect(await group.getProperty("layout")).toBe("vertical");
+    });
   });
 
   describe("theme", () => {
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
index 2c7bad43125..b38dfc4372e 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -172,12 +172,14 @@ export class ActionPad
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
   disconnectedCallback(): void {
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectConditionalSlotComponent(this);
+    this.mutationObserver?.disconnect();
   }
 
   async componentWillLoad(): Promise<void> {