diff --git a/packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap b/packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap
index 1e34d84dd36..473ea7ef39a 100644
--- a/packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap
+++ b/packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap
@@ -159,12 +159,16 @@ exports[`DynamicPage always show content header 1`] = `
         >
           <div
             class="Toolbar-toolbar"
+            data-component-name="ToolbarContent"
           >
             <span
               class="spacer"
               style="flex-grow: 1; height: 100%; cursor: pointer;"
             />
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Emphasized"
                 ui5-button=""
@@ -172,7 +176,10 @@ exports[`DynamicPage always show content header 1`] = `
                 Edit
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -180,7 +187,10 @@ exports[`DynamicPage always show content header 1`] = `
                 Delete
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -188,7 +198,10 @@ exports[`DynamicPage always show content header 1`] = `
                 Copy
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -196,34 +209,49 @@ exports[`DynamicPage always show content header 1`] = `
                 Toggle Footer
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="action"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <div
                 aria-label="Separator"
                 class="ToolbarSeparator-separator"
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="full-screen"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="exit-full-screen"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="decline"
@@ -356,12 +384,16 @@ exports[`DynamicPage hider header button 1`] = `
         >
           <div
             class="Toolbar-toolbar"
+            data-component-name="ToolbarContent"
           >
             <span
               class="spacer"
               style="flex-grow: 1; height: 100%; cursor: pointer;"
             />
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Emphasized"
                 ui5-button=""
@@ -369,7 +401,10 @@ exports[`DynamicPage hider header button 1`] = `
                 Edit
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -377,7 +412,10 @@ exports[`DynamicPage hider header button 1`] = `
                 Delete
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -385,7 +423,10 @@ exports[`DynamicPage hider header button 1`] = `
                 Copy
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -393,7 +434,10 @@ exports[`DynamicPage hider header button 1`] = `
                 Toggle Footer
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="action"
@@ -856,12 +900,16 @@ exports[`DynamicPage with content 1`] = `
         >
           <div
             class="Toolbar-toolbar"
+            data-component-name="ToolbarContent"
           >
             <span
               class="spacer"
               style="flex-grow: 1; height: 100%; cursor: pointer;"
             />
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Emphasized"
                 ui5-button=""
@@ -869,7 +917,10 @@ exports[`DynamicPage with content 1`] = `
                 Edit
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -877,7 +928,10 @@ exports[`DynamicPage with content 1`] = `
                 Delete
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -885,7 +939,10 @@ exports[`DynamicPage with content 1`] = `
                 Copy
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -893,34 +950,49 @@ exports[`DynamicPage with content 1`] = `
                 Toggle Footer
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="action"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <div
                 aria-label="Separator"
                 class="ToolbarSeparator-separator"
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="full-screen"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="exit-full-screen"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="decline"
@@ -1833,12 +1905,16 @@ exports[`DynamicPage without content 1`] = `
         >
           <div
             class="Toolbar-toolbar"
+            data-component-name="ToolbarContent"
           >
             <span
               class="spacer"
               style="flex-grow: 1; height: 100%; cursor: pointer;"
             />
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Emphasized"
                 ui5-button=""
@@ -1846,7 +1922,10 @@ exports[`DynamicPage without content 1`] = `
                 Edit
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -1854,7 +1933,10 @@ exports[`DynamicPage without content 1`] = `
                 Delete
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -1862,7 +1944,10 @@ exports[`DynamicPage without content 1`] = `
                 Copy
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 ui5-button=""
@@ -1870,34 +1955,49 @@ exports[`DynamicPage without content 1`] = `
                 Toggle Footer
               </ui5-button>
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="action"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <div
                 aria-label="Separator"
                 class="ToolbarSeparator-separator"
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="full-screen"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="exit-full-screen"
                 ui5-button=""
               />
             </div>
-            <div>
+            <div
+              class="Toolbar-childContainer"
+              data-component-name="ToolbarChildContainer"
+            >
               <ui5-button
                 design="Transparent"
                 icon="decline"
diff --git a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
index c1af8a32e70..5e44ce8b4eb 100644
--- a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
+++ b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
@@ -11,12 +11,16 @@ exports[`FilterBar Render without crashing - default props 1`] = `
     >
       <div
         class="Toolbar-toolbar"
+        data-component-name="ToolbarContent"
       >
         <span
           class="spacer"
           style="flex-grow: 1;"
         />
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <ui5-button
             class="FilterBar-showFiltersBtn"
             design="Transparent"
@@ -95,8 +99,12 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
     >
       <div
         class="Toolbar-toolbar"
+        data-component-name="ToolbarContent"
       >
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <div
             class="VariantManagement-container"
           >
@@ -114,13 +122,19 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
             />
           </div>
         </div>
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <div
             aria-label="Separator"
             class="ToolbarSeparator-separator"
           />
         </div>
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <div>
             <ui5-input
               placeholder="Search"
@@ -134,7 +148,10 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
           class="spacer"
           style="flex-grow: 1;"
         />
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <ui5-button
             design="Transparent"
             ui5-button=""
@@ -142,7 +159,10 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
             Clear
           </ui5-button>
         </div>
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <ui5-button
             design="Transparent"
             ui5-button=""
@@ -150,7 +170,10 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
             Restore
           </ui5-button>
         </div>
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <ui5-button
             class="FilterBar-showFiltersBtn"
             design="Transparent"
@@ -159,7 +182,10 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
             Hide Filter Bar
           </ui5-button>
         </div>
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <ui5-button
             aria-haspopup="dialog"
             design="Default"
@@ -168,7 +194,10 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
             Filters (1337)
           </ui5-button>
         </div>
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <ui5-button
             design="Emphasized"
             ui5-button=""
@@ -470,12 +499,16 @@ exports[`FilterBar Toggle FilterBar filters 1`] = `
     >
       <div
         class="Toolbar-toolbar"
+        data-component-name="ToolbarContent"
       >
         <span
           class="spacer"
           style="flex-grow: 1;"
         />
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <ui5-button
             class="FilterBar-showFiltersBtn"
             design="Transparent"
diff --git a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
index 81babbe582a..397cef2fd0d 100644
--- a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
+++ b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
@@ -829,6 +829,7 @@ exports[`ObjectPage with anchor-bar 1`] = `
           >
             <div
               class="Toolbar-toolbar"
+              data-component-name="ToolbarContent"
             >
               <span
                 class="spacer"
@@ -1891,6 +1892,7 @@ exports[`ObjectPage with img 1`] = `
           >
             <div
               class="Toolbar-toolbar"
+              data-component-name="ToolbarContent"
             >
               <span
                 class="spacer"
@@ -2301,6 +2303,7 @@ exports[`ObjectPage with img 2`] = `
           >
             <div
               class="Toolbar-toolbar"
+              data-component-name="ToolbarContent"
             >
               <span
                 class="spacer"
@@ -2695,6 +2698,7 @@ exports[`ObjectPage with title 1`] = `
           >
             <div
               class="Toolbar-toolbar"
+              data-component-name="ToolbarContent"
             >
               <span
                 class="spacer"
@@ -3038,6 +3042,7 @@ exports[`ObjectPage with title, header & footer 1`] = `
           >
             <div
               class="Toolbar-toolbar"
+              data-component-name="ToolbarContent"
             >
               <span
                 class="spacer"
diff --git a/packages/main/src/components/Toolbar/Toolbar.jss.ts b/packages/main/src/components/Toolbar/Toolbar.jss.ts
index 0a3cfc27a58..bf3d8a7e149 100644
--- a/packages/main/src/components/Toolbar/Toolbar.jss.ts
+++ b/packages/main/src/components/Toolbar/Toolbar.jss.ts
@@ -3,6 +3,7 @@ import { CssSizeVariables } from '@ui5/webcomponents-react-base/dist/CssSizeVari
 
 export const styles = {
   outerContainer: {
+    boxSizing: 'border-box',
     width: '100%',
     height: CssSizeVariables.sapWcrToolbarHeight,
     position: 'relative',
@@ -71,5 +72,6 @@ export const styles = {
     padding: CssSizeVariables.sapWcrToolbarPopoverContentPadding,
     display: 'flex',
     flexDirection: 'column'
-  }
+  },
+  childContainer: { display: 'flex' }
 };
diff --git a/packages/main/src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap b/packages/main/src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap
index 52e1c29b65c..7064752f952 100644
--- a/packages/main/src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/main/src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap
@@ -8,22 +8,32 @@ exports[`Toolbar Renders with children 1`] = `
   >
     <div
       class="Toolbar-toolbar"
+      data-component-name="ToolbarContent"
     >
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
           Item1
         </span>
       </div>
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
           Item2
         </span>
       </div>
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
@@ -43,22 +53,32 @@ exports[`Toolbar Renders with children as react fragments 1`] = `
   >
     <div
       class="Toolbar-toolbar"
+      data-component-name="ToolbarContent"
     >
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
           Item1
         </span>
       </div>
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
           Item2
         </span>
       </div>
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
@@ -77,6 +97,7 @@ exports[`Toolbar Renders with default Props 1`] = `
   >
     <div
       class="Toolbar-toolbar"
+      data-component-name="ToolbarContent"
     />
   </div>
 </DocumentFragment>
@@ -90,28 +111,41 @@ exports[`Toolbar ToolbarSeparator 1`] = `
   >
     <div
       class="Toolbar-toolbar"
+      data-component-name="ToolbarContent"
     >
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
           Item1
         </span>
       </div>
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <div
           aria-label="Separator"
           class="ToolbarSeparator-separator"
         />
       </div>
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
           Item2
         </span>
       </div>
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
@@ -131,8 +165,12 @@ exports[`Toolbar ToolbarSpacer 1`] = `
   >
     <div
       class="Toolbar-toolbar"
+      data-component-name="ToolbarContent"
     >
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
@@ -143,14 +181,20 @@ exports[`Toolbar ToolbarSpacer 1`] = `
         class="spacer"
         style="flex-grow: 1;"
       />
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
           Item2
         </span>
       </div>
-      <div>
+      <div
+        class="Toolbar-childContainer"
+        data-component-name="ToolbarChildContainer"
+      >
         <span
           class="Text-text"
         >
@@ -172,8 +216,12 @@ exports[`Toolbar overflow menu 1`] = `
     >
       <div
         class="Toolbar-toolbar"
+        data-component-name="ToolbarContent"
       >
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <span
             class="Text-text"
             data-testid="toolbar-item"
@@ -183,6 +231,8 @@ exports[`Toolbar overflow menu 1`] = `
           </span>
         </div>
         <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
           style="visibility: hidden;"
         >
           <span
@@ -194,6 +244,8 @@ exports[`Toolbar overflow menu 1`] = `
           </span>
         </div>
         <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
           style="visibility: hidden;"
         >
           <span
@@ -207,6 +259,7 @@ exports[`Toolbar overflow menu 1`] = `
       </div>
       <div
         class="Toolbar-overflowButtonContainer"
+        data-component-name="ToolbarOverflowButtonContainer"
         title="Show More"
       >
         <ui5-togglebutton
@@ -255,8 +308,12 @@ exports[`Toolbar overflow menu 2`] = `
     >
       <div
         class="Toolbar-toolbar"
+        data-component-name="ToolbarContent"
       >
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <span
             class="Text-text"
             data-testid="toolbar-item"
@@ -266,6 +323,8 @@ exports[`Toolbar overflow menu 2`] = `
           </span>
         </div>
         <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
           style="visibility: hidden;"
         >
           <span
@@ -277,6 +336,8 @@ exports[`Toolbar overflow menu 2`] = `
           </span>
         </div>
         <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
           style="visibility: hidden;"
         >
           <span
@@ -290,6 +351,7 @@ exports[`Toolbar overflow menu 2`] = `
       </div>
       <div
         class="Toolbar-overflowButtonContainer"
+        data-component-name="ToolbarOverflowButtonContainer"
         title="Show More"
       >
         <ui5-togglebutton
@@ -338,8 +400,12 @@ exports[`Toolbar overflow menu 3`] = `
     >
       <div
         class="Toolbar-toolbar"
+        data-component-name="ToolbarContent"
       >
-        <div>
+        <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
+        >
           <span
             class="Text-text"
             data-testid="toolbar-item"
@@ -349,6 +415,8 @@ exports[`Toolbar overflow menu 3`] = `
           </span>
         </div>
         <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
           style="visibility: hidden;"
         >
           <div
@@ -357,6 +425,8 @@ exports[`Toolbar overflow menu 3`] = `
           />
         </div>
         <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
           style="visibility: hidden;"
         >
           <span
@@ -368,6 +438,8 @@ exports[`Toolbar overflow menu 3`] = `
           </span>
         </div>
         <div
+          class="Toolbar-childContainer"
+          data-component-name="ToolbarChildContainer"
           style="visibility: hidden;"
         >
           <span
@@ -381,6 +453,7 @@ exports[`Toolbar overflow menu 3`] = `
       </div>
       <div
         class="Toolbar-overflowButtonContainer"
+        data-component-name="ToolbarOverflowButtonContainer"
         title="Show More"
       >
         <ui5-togglebutton
diff --git a/packages/main/src/components/Toolbar/index.tsx b/packages/main/src/components/Toolbar/index.tsx
index 0c6a2eda481..bd51d2eecbf 100644
--- a/packages/main/src/components/Toolbar/index.tsx
+++ b/packages/main/src/components/Toolbar/index.tsx
@@ -118,12 +118,12 @@ const Toolbar: FC<ToolbarProptypes> = forwardRef((props: ToolbarProptypes, ref:
         return item;
       }
       return (
-        <div ref={itemRef} key={index}>
+        <div ref={itemRef} key={index} className={classes.childContainer} data-component-name="ToolbarChildContainer">
           {item}
         </div>
       );
     });
-  }, [children, controlMetaData]);
+  }, [children, controlMetaData, classes.childContainer]);
 
   const overflowNeeded =
     (lastVisibleIndex || lastVisibleIndex === 0) && React.Children.count(childrenWithRef) !== lastVisibleIndex + 1;
@@ -208,7 +208,7 @@ const Toolbar: FC<ToolbarProptypes> = forwardRef((props: ToolbarProptypes, ref:
       onClick={handleToolbarClick}
       {...passThroughProps}
     >
-      <div className={classes.toolbar}>
+      <div className={classes.toolbar} data-component-name="ToolbarContent">
         {overflowNeeded &&
           React.Children.map(childrenWithRef, (item, index) => {
             if (index >= lastVisibleIndex + 1) {
@@ -219,7 +219,11 @@ const Toolbar: FC<ToolbarProptypes> = forwardRef((props: ToolbarProptypes, ref:
         {!overflowNeeded && childrenWithRef}
       </div>
       {overflowNeeded && (
-        <div className={classes.overflowButtonContainer} title={i18nBundle.getText(SHOW_MORE)}>
+        <div
+          className={classes.overflowButtonContainer}
+          title={i18nBundle.getText(SHOW_MORE)}
+          data-component-name="ToolbarOverflowButtonContainer"
+        >
           <OverflowPopover lastVisibleIndex={lastVisibleIndex} contentClass={classes.popoverContent}>
             {React.Children.toArray(children).map((child) => {
               if ((child as ReactElement).type === React.Fragment) {