diff --git a/.storybook/components/Footer.module.css b/.storybook/components/Footer.module.css
new file mode 100644
index 00000000000..826bdfe48d4
--- /dev/null
+++ b/.storybook/components/Footer.module.css
@@ -0,0 +1,40 @@
+.footer {
+    container: footer / inline-size;
+}
+
+.content {
+    min-height: var(--_ui5_bar_base_height);
+    display: flex;
+    align-items: center;
+    background-olor: var(--sapPageFooter_Background);
+    border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: auto;
+    overflow: hidden;
+}
+
+@container (max-width: 599px) {
+  .footer {
+    padding-inline: 1rem;
+  }
+}
+
+@container (min-width: 600px) and (max-width: 1023px) {
+  .footer {
+    padding-inline: 2rem;
+  }
+}
+
+@container (min-width: 1024px) and (max-width: 1439px) {
+  .footer {
+    padding-inline: 2rem;
+  }
+}
+
+@container (min-width: 1440px) {
+  .footer {
+    padding-inline: 3rem;
+  }
+}
diff --git a/.storybook/components/Footer.tsx b/.storybook/components/Footer.tsx
index 03d3d5b2ff5..1f3233f8c1e 100644
--- a/.storybook/components/Footer.tsx
+++ b/.storybook/components/Footer.tsx
@@ -9,38 +9,20 @@ import {
   PopoverPlacementType,
   WrappingType
 } from '@ui5/webcomponents-react';
-import { ThemingParameters, useResponsiveContentPadding } from '@ui5/webcomponents-react-base';
 import React, { useRef } from 'react';
 import BestRunLogo from '../../assets/SAP_Best_R_grad_blk_scrn.png';
+import classes from './Footer.module.css';
 
 export const Footer = ({ style }) => {
   const popoverRef = useRef(null);
   const footerRef = useRef(null);
-  const responsivePaddingClass = useResponsiveContentPadding(footerRef.current);
-
   const showPrivacyPopover = (e) => {
     popoverRef.current.showAt(e.target);
   };
 
   return (
-    <footer>
-      <div
-        ref={footerRef}
-        className={responsivePaddingClass}
-        style={{
-          minHeight: 'var(--_ui5_bar_base_height)',
-          display: 'flex',
-          alignItems: 'center',
-          backgroundColor: ThemingParameters.sapPageFooter_Background,
-          borderTop: `0.0625rem solid ${ThemingParameters.sapPageFooter_BorderColor}`,
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          height: 'auto',
-          overflow: 'hidden',
-          ...style
-        }}
-      >
+    <footer className={classes.footer}>
+      <div ref={footerRef} className={classes.content} style={style}>
         <FlexBox
           justifyContent={FlexBoxJustifyContent.SpaceBetween}
           alignItems={FlexBoxAlignItems.Center}
diff --git a/packages/main/src/components/DynamicPage/DynamicPage.jss.ts b/packages/main/src/components/DynamicPage/DynamicPage.jss.ts
index 4479d59ad20..db3a14e05db 100644
--- a/packages/main/src/components/DynamicPage/DynamicPage.jss.ts
+++ b/packages/main/src/components/DynamicPage/DynamicPage.jss.ts
@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { ResponsiveContainerPadding } from '../../internal/ContainerQueries';
 
 export const DynamicPageCssVariables = {
   headerDisplay: '--ui5wcr_DynamicPage_header_display',
@@ -7,6 +8,7 @@ export const DynamicPageCssVariables = {
 
 export const styles = {
   dynamicPage: {
+    container: 'DynamicPage / inline-size',
     width: '100%',
     height: '100%',
     maxHeight: '100%',
@@ -26,6 +28,12 @@ export const styles = {
       top: '-0.025rem'
     }
   },
+  header: {
+    extend: ResponsiveContainerPadding
+  },
+  title: {
+    extend: ResponsiveContainerPadding
+  },
   anchorBar: {
     position: 'sticky',
     boxShadow: ThemingParameters.sapContent_HeaderShadow,
@@ -36,6 +44,7 @@ export const styles = {
     }
   },
   contentContainer: {
+    extend: ResponsiveContainerPadding,
     paddingTop: '1rem',
     boxSizing: 'border-box',
     width: '100%',
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 400b10a243a..cac4113d43f 100644
--- a/packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap
+++ b/packages/main/src/components/DynamicPage/__snapshots__/DynamicPage.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`DynamicPage always show content header 1`] = `
     class="DynamicPage-dynamicPage sapScrollBar DynamicPage-backgroundSolid"
   >
     <div
-      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container StdExtPadding-Desktop"
+      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container DynamicPage-title"
       data-component-name="DynamicPageTitle"
       data-not-clickable="false"
     >
@@ -209,7 +209,7 @@ exports[`DynamicPage always show content header 1`] = `
       </div>
     </div>
     <div
-      class="DynamicPageHeader-header StdExtPadding-Desktop"
+      class="DynamicPageHeader-header DynamicPage-header"
       data-component-name="DynamicPageHeader"
       style="top: 0px; z-index: 1;"
     >
@@ -257,7 +257,7 @@ exports[`DynamicPage always show content header 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -273,7 +273,7 @@ exports[`DynamicPage always show content header 1`] = `
         />
         <ui5-toggle-button
           accessible-name="Unpin Header"
-          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable"
           data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
@@ -285,7 +285,7 @@ exports[`DynamicPage always show content header 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 0px;"
     />
@@ -299,7 +299,7 @@ exports[`DynamicPage hider header button 1`] = `
     class="DynamicPage-dynamicPage sapScrollBar DynamicPage-backgroundSolid"
   >
     <div
-      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container StdExtPadding-Desktop"
+      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container DynamicPage-title"
       data-component-name="DynamicPageTitle"
       data-not-clickable="false"
     >
@@ -407,7 +407,7 @@ exports[`DynamicPage hider header button 1`] = `
       </div>
     </div>
     <div
-      class="DynamicPageHeader-header StdExtPadding-Desktop"
+      class="DynamicPageHeader-header DynamicPage-header"
       data-component-name="DynamicPageHeader"
       style="top: 0px; z-index: 1;"
     >
@@ -455,7 +455,7 @@ exports[`DynamicPage hider header button 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -473,7 +473,7 @@ exports[`DynamicPage hider header button 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 0px;"
     >
@@ -671,7 +671,7 @@ exports[`DynamicPage render footer 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -688,7 +688,7 @@ exports[`DynamicPage render footer 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 1rem;"
     />
@@ -721,7 +721,7 @@ exports[`DynamicPage with content 1`] = `
     class="DynamicPage-dynamicPage sapScrollBar DynamicPage-backgroundSolid"
   >
     <div
-      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container StdExtPadding-Desktop"
+      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container DynamicPage-title"
       data-component-name="DynamicPageTitle"
       data-not-clickable="false"
     >
@@ -924,7 +924,7 @@ exports[`DynamicPage with content 1`] = `
       </div>
     </div>
     <div
-      class="DynamicPageHeader-header StdExtPadding-Desktop"
+      class="DynamicPageHeader-header DynamicPage-header"
       data-component-name="DynamicPageHeader"
     >
       <div
@@ -971,7 +971,7 @@ exports[`DynamicPage with content 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -987,7 +987,7 @@ exports[`DynamicPage with content 1`] = `
         />
         <ui5-toggle-button
           accessible-name="Pin Header"
-          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable"
           data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
@@ -998,7 +998,7 @@ exports[`DynamicPage with content 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 0px;"
     >
@@ -1725,7 +1725,7 @@ exports[`DynamicPage without content 1`] = `
     class="DynamicPage-dynamicPage sapScrollBar DynamicPage-backgroundSolid"
   >
     <div
-      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container StdExtPadding-Desktop"
+      class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentStart FlexBox-alignItemsStretch FlexBox-flexWrapNoWrap DynamicPageTitle-container DynamicPage-title"
       data-component-name="DynamicPageTitle"
       data-not-clickable="false"
     >
@@ -1928,7 +1928,7 @@ exports[`DynamicPage without content 1`] = `
       </div>
     </div>
     <div
-      class="DynamicPageHeader-header StdExtPadding-Desktop"
+      class="DynamicPageHeader-header DynamicPage-header"
       data-component-name="DynamicPageHeader"
     >
       <div
@@ -1975,7 +1975,7 @@ exports[`DynamicPage without content 1`] = `
       style="top: 0px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -1991,7 +1991,7 @@ exports[`DynamicPage without content 1`] = `
         />
         <ui5-toggle-button
           accessible-name="Pin Header"
-          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable"
+          class="DynamicPageAnchorBar-anchorBarActionButton DynamicPageAnchorBar-anchorBarActionButtonPinnable"
           data-component-name="DynamicPageAnchorBarPinBtn"
           data-ui5wcr-dynamic-page-header-action=""
           design="Default"
@@ -2002,7 +2002,7 @@ exports[`DynamicPage without content 1`] = `
       </section>
     </div>
     <div
-      class="DynamicPage-contentContainer StdExtPadding-Desktop"
+      class="DynamicPage-contentContainer"
       data-component-name="DynamicPageContent"
       style="padding-bottom: 0px;"
     />
diff --git a/packages/main/src/components/DynamicPage/index.tsx b/packages/main/src/components/DynamicPage/index.tsx
index dd6fd79025f..0e429aeb241 100644
--- a/packages/main/src/components/DynamicPage/index.tsx
+++ b/packages/main/src/components/DynamicPage/index.tsx
@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  debounce,
-  enrichEventWithDetails,
-  ThemingParameters,
-  useResponsiveContentPadding,
-  useSyncRef
-} from '@ui5/webcomponents-react-base';
+import { debounce, enrichEventWithDetails, ThemingParameters, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { cloneElement, forwardRef, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import { createUseStyles } from 'react-jss';
@@ -242,8 +236,6 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
     }
   }, [alwaysShowContentHeader]);
 
-  const responsivePaddingClass = useResponsiveContentPadding(dynamicPageRef.current);
-
   const onDynamicPageScroll = (e) => {
     if (!isToggledRef.current) {
       isToggledRef.current = true;
@@ -283,18 +275,14 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
             !headerContent ||
             (!showHideHeaderButton && !headerContentPinnable),
           ref: componentRefTopHeader,
-          className: headerTitle?.props?.className
-            ? `${responsivePaddingClass} ${headerTitle.props.className}`
-            : responsivePaddingClass,
+          className: clsx(classes.title, headerTitle?.props?.className),
           onToggleHeaderContentVisibility: onToggleHeaderContentInternal
         })}
       {headerContent &&
         cloneElement(headerContent, {
           ref: componentRefHeaderContent,
           style: headerCollapsed === true ? { position: 'absolute', visibility: 'hidden' } : headerContent.props.style,
-          className: headerContent.props.className
-            ? `${responsivePaddingClass} ${headerContent.props.className}`
-            : responsivePaddingClass,
+          className: clsx(classes.header, headerContent?.props?.className),
           headerPinned: headerState === HEADER_STATES.VISIBLE_PINNED || headerState === HEADER_STATES.VISIBLE,
           topHeaderHeight
         })}
@@ -324,7 +312,7 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
       <div
         ref={contentRef}
         data-component-name="DynamicPageContent"
-        className={`${classes.contentContainer} ${responsivePaddingClass}`}
+        className={classes.contentContainer}
         style={{
           paddingBottom: footer ? '1rem' : 0
         }}
diff --git a/packages/main/src/components/DynamicPageAnchorBar/index.tsx b/packages/main/src/components/DynamicPageAnchorBar/index.tsx
index fe688a66f07..c111cdc57f8 100644
--- a/packages/main/src/components/DynamicPageAnchorBar/index.tsx
+++ b/packages/main/src/components/DynamicPageAnchorBar/index.tsx
@@ -3,13 +3,7 @@
 import iconPushPin from '@ui5/webcomponents-icons/dist/pushpin-off.js';
 import iconArrowDown from '@ui5/webcomponents-icons/dist/slim-arrow-down.js';
 import iconArrowUp from '@ui5/webcomponents-icons/dist/slim-arrow-up.js';
-import {
-  enrichEventWithDetails,
-  ThemingParameters,
-  useI18nBundle,
-  useIsRTL,
-  useSyncRef
-} from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
 import { createUseStyles } from 'react-jss';
@@ -18,14 +12,9 @@ import { CommonProps } from '../../interfaces';
 import { Button, ToggleButton } from '../../webComponents';
 
 const anchorBarStyles = {
-  anchorBarActionButton: {
+  container: {
     position: 'absolute',
-    top: `-0.6875rem`,
-    marginLeft: `-0.6875rem`,
     left: '50%',
-    zIndex: 3,
-    '--_ui5_button_base_min_width': '1.5rem',
-    '--_ui5_button_base_height': '1.5rem',
     '&:before, &:after': {
       content: '""',
       position: 'absolute',
@@ -33,9 +22,6 @@ const anchorBarStyles = {
       top: '50%',
       height: '0.0625rem'
     },
-    '&:not([pressed])': {
-      backgroundColor: ThemingParameters.sapObjectHeader_Background
-    },
     '&:before': {
       right: '100%',
       backgroundImage: `linear-gradient(to left, ${ThemingParameters.sapObjectHeader_BorderColor}, transparent)`
@@ -45,26 +31,27 @@ const anchorBarStyles = {
       left: '100%'
     }
   },
-  anchorBarActionButtonRtl: {
-    marginRight: `-0.6875rem`,
-    marginLeft: 0
+  anchorBarActionButton: {
+    '--_ui5_button_base_min_width': '1.5rem',
+    '--_ui5_button_base_height': '1.5rem',
+    '--ui5wcr_anchor-btn-center': `calc((var(--_ui5_button_base_min_width) - var(--sapButton_BorderWidth)) / 2)`,
+    position: 'absolute',
+    insetBlockStart: `calc(-1 * var(--ui5wcr_anchor-btn-center))`,
+    insetInlineStart: 'calc(50% - var(--ui5wcr_anchor-btn-center))',
+    zIndex: 3,
+    '&:not([pressed])': {
+      backgroundColor: ThemingParameters.sapObjectHeader_Background
+    }
+  },
+  anchorBarActionButtonExpandable: {
+    '& + $anchorBarActionButtonPinnable': {
+      insetInlineStart: 'calc(50% - var(--ui5wcr_anchor-btn-center) + 1rem)'
+    }
   },
-  anchorBarActionButtonExpandable: {},
   anchorBarActionButtonPinnable: {},
   anchorBarActionPinnableAndExpandable: {
-    '&$anchorBarActionButtonPinnable': {
-      marginLeft: '0.25rem'
-    },
-    '&$anchorBarActionButtonExpandable': {
-      marginLeft: '-1.75rem'
-    }
-  },
-  anchorBarActionPinnableAndExpandableRtl: {
-    '&$anchorBarActionButtonPinnable': {
-      marginRight: '0.25rem'
-    },
     '&$anchorBarActionButtonExpandable': {
-      marginRight: '-1.75rem'
+      insetInlineStart: 'calc(50% - var(--ui5wcr_anchor-btn-center) - 1rem)'
     }
   }
 };
@@ -133,9 +120,6 @@ const DynamicPageAnchorBar = forwardRef<HTMLElement, DynamicPageAnchorBarPropTyp
   } = props;
 
   const classes = useStyles();
-  const [componentRef, anchorBarRef] = useSyncRef<HTMLElement>(ref);
-  const isRTL = useIsRTL(anchorBarRef);
-
   const shouldRenderHeaderPinnableButton = headerContentPinnable && headerContentVisible;
   const showBothActions = shouldRenderHeaderPinnableButton && showHideHeaderButton;
 
@@ -156,13 +140,6 @@ const DynamicPageAnchorBar = forwardRef<HTMLElement, DynamicPageAnchorBarPropTyp
     }
   }, [headerPinned]);
 
-  const anchorBarActionButtonClasses = clsx(classes.anchorBarActionButton, isRTL && classes.anchorBarActionButtonRtl);
-
-  const bothActionClasses = clsx(
-    classes.anchorBarActionPinnableAndExpandable,
-    isRTL && classes.anchorBarActionPinnableAndExpandableRtl
-  );
-
   const onToggleHeaderButtonClick = (e) => {
     onToggleHeaderContentVisibility(enrichEventWithDetails(e, { visible: !headerContentVisible }));
   };
@@ -172,17 +149,17 @@ const DynamicPageAnchorBar = forwardRef<HTMLElement, DynamicPageAnchorBarPropTyp
       data-component-name="DynamicPageAnchorBar"
       style={style}
       role={a11yConfig?.dynamicPageAnchorBar?.role ?? 'navigation'}
-      className={showHideHeaderButton || headerContentPinnable ? classes.anchorBarActionButton : null}
-      ref={componentRef}
+      className={showHideHeaderButton || headerContentPinnable ? classes.container : null}
+      ref={ref}
     >
       {showHideHeaderButton && (
         <Button
           icon={!headerContentVisible ? iconArrowDown : iconArrowUp}
           data-ui5wcr-dynamic-page-header-action=""
           className={clsx(
-            anchorBarActionButtonClasses,
+            classes.anchorBarActionButton,
             classes.anchorBarActionButtonExpandable,
-            showBothActions && bothActionClasses
+            showBothActions && classes.anchorBarActionPinnableAndExpandable
           )}
           onClick={onToggleHeaderButtonClick}
           onMouseOver={onHoverToggleButton}
@@ -196,11 +173,7 @@ const DynamicPageAnchorBar = forwardRef<HTMLElement, DynamicPageAnchorBarPropTyp
         <ToggleButton
           icon={iconPushPin}
           data-ui5wcr-dynamic-page-header-action=""
-          className={clsx(
-            anchorBarActionButtonClasses,
-            classes.anchorBarActionButtonPinnable,
-            showBothActions && bothActionClasses
-          )}
+          className={clsx(classes.anchorBarActionButton, classes.anchorBarActionButtonPinnable)}
           pressed={headerPinned}
           onClick={onPinHeader}
           tooltip={i18nBundle.getText(headerPinned ? UNPIN_HEADER : PIN_HEADER)}
diff --git a/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx b/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx
index aa234d42ce8..bb0fd036357 100644
--- a/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx
+++ b/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx
@@ -6,7 +6,8 @@ import { AvatarSize } from '../../enums/AvatarSize';
 const styles = {
   base: {
     alignSelf: 'center',
-    opacity: 0
+    opacity: 0,
+    paddingInlineEnd: '1rem'
   },
   hidden: {
     opacity: 0
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
index f1a6e7cc139..97dd9e3a326 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
@@ -239,6 +239,7 @@ describe('ObjectPage', () => {
       </ObjectPage>
     );
 
+    cy.findByText('Goals').should('not.be.visible');
     cy.findByText('Employment').should('not.be.visible');
     cy.findByText('Test').should('be.visible');
 
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
index 04d00b8bb17..a87bc77ab65 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
+++ b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
@@ -1,17 +1,17 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { ResponsiveContainerPadding } from '../../internal/ContainerQueries';
 import { DynamicPageCssVariables } from '../DynamicPage/DynamicPage.jss';
 
 export const ObjectPageCssVariables = {
   anchorFloat: '--_ui5wcr_ObjectPage_actions_float',
   anchorLeft: '--_ui5wcr_ObjectPage_actions_left',
-  anchorRight: '--_ui5wcr_ObjectPage_actions_right',
-  tabBarPaddingInline: '--_ui5wcr_ObjectPage_tab_bar_inline_padding'
+  anchorRight: '--_ui5wcr_ObjectPage_actions_right'
 };
 
 export const styles = {
   objectPage: {
     [DynamicPageCssVariables.headerDisplay]: 'block',
-    [ObjectPageCssVariables.tabBarPaddingInline]: '1rem',
+    container: 'objectPage / inline-size',
     boxSizing: 'border-box',
     width: '100%',
     height: '100%',
@@ -32,11 +32,6 @@ export const styles = {
       display: 'block'
     }
   },
-  // each tab has inline padding of 1rem, so it needs to be subtracted from the default responsive padding
-  Phone: { [ObjectPageCssVariables.tabBarPaddingInline]: 0 },
-  Tablet: { [ObjectPageCssVariables.tabBarPaddingInline]: '1rem' },
-  Desktop: { [ObjectPageCssVariables.tabBarPaddingInline]: '1rem' },
-  LargeDesktop: { [ObjectPageCssVariables.tabBarPaddingInline]: '2rem' },
   '@global html': {
     [ObjectPageCssVariables.anchorFloat]: 'right',
     [ObjectPageCssVariables.anchorRight]: '1.25rem',
@@ -57,6 +52,7 @@ export const styles = {
     [DynamicPageCssVariables.titleFontSize]: ThemingParameters.sapObjectHeader_Title_SnappedFontSize
   },
   headerContainer: {
+    extend: ResponsiveContainerPadding,
     marginBottom: '0.25rem',
     backgroundColor: ThemingParameters.sapObjectHeader_Background,
     display: 'grid',
@@ -77,6 +73,7 @@ export const styles = {
     }
   },
   header: {
+    extend: ResponsiveContainerPadding,
     [DynamicPageCssVariables.headerDisplay]: 'block',
     boxSizing: 'border-box',
     backgroundColor: ThemingParameters.sapObjectHeader_Background,
@@ -95,11 +92,7 @@ export const styles = {
     maxWidth: '5rem',
     maxHeight: '5rem',
     display: 'inline-block',
-    marginRight: '2rem'
-  },
-  headerImageRtl: {
-    marginRight: 0,
-    marginLeft: '2rem'
+    marginInlineEnd: '2rem'
   },
   image: {
     width: '100%',
@@ -111,13 +104,29 @@ export const styles = {
   },
   tabContainer: {
     position: 'sticky',
-    zIndex: 1
+    zIndex: 1,
+    // each tab has inline padding of 1rem, so it needs to be subtracted from the default responsive padding
+    '@container objectPage (max-width: 599px)': {
+      '--_ui5wcr_ObjectPage_tab_bar_inline_padding': 0
+    },
+    '@container objectPage (min-width: 600px) and (max-width: 1023px)': {
+      '--_ui5wcr_ObjectPage_tab_bar_inline_padding': '1rem'
+    },
+    '@container objectPage (min-width: 1024px) and (max-width: 1439px)': {
+      '--_ui5wcr_ObjectPage_tab_bar_inline_padding': '1rem'
+    },
+    '@container objectPage (min-width: 1440px)': {
+      '--_ui5wcr_ObjectPage_tab_bar_inline_padding': '2rem'
+    }
   },
   tabContainerComponent: {
     '&::part(content)': {
       display: 'none'
     }
   },
+  content: {
+    extend: ResponsiveContainerPadding
+  },
   footer: {
     position: 'sticky',
     bottom: '0.5rem',
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.test.tsx b/packages/main/src/components/ObjectPage/ObjectPage.test.tsx
index f7143747a35..01313d0f3b2 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.test.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.test.tsx
@@ -13,8 +13,7 @@ import {
   ObjectPage,
   ObjectPageMode,
   ObjectPageSection,
-  ObjectPageSubSection,
-  Text
+  ObjectPageSubSection
 } from '../..';
 
 const headerContent = <DynamicPageHeader>HeaderContent</DynamicPageHeader>;
@@ -54,19 +53,6 @@ const renderComponent = (props = {}) => (
   </ObjectPage>
 );
 
-const renderComponentWithSections = (props = {}) => (
-  <ObjectPage {...props}>
-    <ObjectPageSection titleText="Title 1" id="1">
-      Content 1
-    </ObjectPageSection>
-    <ObjectPageSection titleText="Title 2" id="2">
-      <Label>Content 2</Label>
-    </ObjectPageSection>
-    <ObjectPageSection titleText="Title 3" id="3">
-      <Text>Content 3</Text>
-    </ObjectPageSection>
-  </ObjectPage>
-);
 let original;
 beforeAll(() => {
   original = Element.prototype.scrollTo;
@@ -77,72 +63,6 @@ afterAll(() => {
   Element.prototype.scrollTo = original;
 });
 describe('ObjectPage', () => {
-  test('Default with SubSections', () => {
-    const { asFragment, getByText } = render(renderComponent());
-    expect(getByText('Title Section 1')).not.toBeVisible();
-    expect(getByText('Content Section 1')).toBeVisible();
-    expect(getByText('Title Section 2')).toBeVisible();
-    expect(getByText('Content Section 2')).toBeVisible();
-    expect(getByText('Title Section 4')).toBeVisible();
-    expect(getByText('Title SubSection 4.1')).toBeVisible();
-    expect(getByText('Content Section 4.1')).toBeVisible();
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Default with Sections', () => {
-    const { asFragment, getByText } = render(renderComponentWithSections());
-    expect(getByText('Title 1')).not.toBeVisible();
-    expect(getByText('Title 2')).toBeVisible();
-    expect(getByText('Content 1')).toBeVisible();
-    expect(getByText('Content 2')).toBeVisible();
-    expect(getByText('Content 3')).toBeVisible();
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('IconTabBar Mode', () => {
-    const cb = jest.fn();
-    const { asFragment, getByText, queryByText, container, rerender } = render(
-      renderComponent({ mode: ObjectPageMode.IconTabBar, onSelectedSectionChange: cb })
-    );
-    expect(getByText('Title Section 1')).not.toBeVisible();
-    expect(getByText('Content Section 1')).toBeVisible();
-    expect(queryByText('Title Section 3')).toBeNull();
-    expect(queryByText('Content Section 3')).toBeNull();
-
-    const tabs = container.querySelector('ui5-tabcontainer').children;
-    Array.from(tabs).forEach((tab, index) => {
-      expect(tab).toHaveAttribute('text', `Title Section ${index + 1}`);
-    });
-    //does not work due to shadow-DOM
-    // fireEvent.click(tabs[2]);
-    // expect(cb).toHaveBeenCalled();
-    rerender(renderComponent({ mode: ObjectPageMode.IconTabBar, onSelectedSectionChange: cb, selectedSectionId: '3' }));
-    expect(getByText('Title Section 3')).not.toBeVisible();
-    expect(getByText('Content Section 3.1')).toBeVisible();
-    expect(queryByText('Title Section 1')).toBeNull();
-    expect(queryByText('Content Section 1')).toBeNull();
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Not crashing with 1 section - Default Mode', () => {
-    const { asFragment } = render(
-      <ObjectPage>
-        <ObjectPageSection id={'1'}>Test</ObjectPageSection>
-      </ObjectPage>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Not crashing with 1 section - IconTabBar Mode', () => {
-    const { asFragment } = render(
-      <ObjectPage mode={ObjectPageMode.IconTabBar}>
-        <ObjectPageSection id={'1'}>Test</ObjectPageSection>
-      </ObjectPage>
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('Not crashing with 0 sections', () => {
     const { asFragment } = render(<ObjectPage mode={ObjectPageMode.IconTabBar} />);
     expect(asFragment()).toMatchSnapshot();
@@ -214,11 +134,6 @@ describe('ObjectPage', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  //todo: needs mocking
-  test.skip('title in header', () => {
-    render(renderComponent({ headerTitle, headerContent, footer, image: <Avatar />, showTitleInHeaderContent: true }));
-  });
-
   test('with IllustratedMessage', () => {
     const { getByTestId, queryByText, rerender, queryByTestId, asFragment, container } = render(
       renderComponent({
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 9be440a0ad5..a9bfe1af593 100644
--- a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
+++ b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
@@ -1,979 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ObjectPage Default with Sections 1`] = `
-<DocumentFragment>
-  <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
-    data-component-name="ObjectPage"
-  >
-    <header
-      aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
-      data-component-name="ObjectPageTopHeader"
-      data-not-clickable="true"
-      role="banner"
-      style="grid-auto-columns: min-content 100%; display: grid;"
-    />
-    <div
-      class="ObjectPage-tabContainer"
-      data-component-name="ObjectPageTabContainer"
-      style="top: 0px;"
-    >
-      <ui5-tabcontainer
-        class="ObjectPage-tabContainerComponent"
-        collapsed="true"
-        content-background-design="Solid"
-        data-component-name="ObjectPageTabContainer"
-        data-sap-ui-fastnavgroup="true"
-        fixed="true"
-        header-background-design="Solid"
-        tab-layout="Standard"
-        tabs-overflow-mode="End"
-        ui5-tabcontainer=""
-      >
-        <ui5-tab
-          data-index="0"
-          data-section-id="1"
-          design="Default"
-          selected="true"
-          text="Title 1"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-        <ui5-tab
-          data-index="1"
-          data-section-id="2"
-          design="Default"
-          text="Title 2"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-        <ui5-tab
-          data-index="2"
-          data-section-id="3"
-          design="Default"
-          text="Title 3"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-      </ui5-tabcontainer>
-    </div>
-    <div
-      class="StdExtPadding-Desktop"
-      data-component-name="ObjectPageContent"
-    >
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-1"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          >
-            Title 1
-          </div>
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            Content 1
-          </div>
-        </div>
-      </section>
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-2"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          >
-            Title 2
-          </div>
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            <ui5-label
-              ui5-label=""
-            >
-              Content 2
-            </ui5-label>
-          </div>
-        </div>
-      </section>
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-3"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          >
-            Title 3
-          </div>
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            <span
-              class="Text-text"
-            >
-              Content 3
-            </span>
-          </div>
-        </div>
-      </section>
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ObjectPage Default with SubSections 1`] = `
-<DocumentFragment>
-  <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
-    data-component-name="ObjectPage"
-  >
-    <header
-      aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
-      data-component-name="ObjectPageTopHeader"
-      data-not-clickable="true"
-      role="banner"
-      style="grid-auto-columns: min-content 100%; display: grid;"
-    />
-    <div
-      class="ObjectPage-tabContainer"
-      data-component-name="ObjectPageTabContainer"
-      style="top: 0px;"
-    >
-      <ui5-tabcontainer
-        class="ObjectPage-tabContainerComponent"
-        collapsed="true"
-        content-background-design="Solid"
-        data-component-name="ObjectPageTabContainer"
-        data-sap-ui-fastnavgroup="true"
-        fixed="true"
-        header-background-design="Solid"
-        tab-layout="Standard"
-        tabs-overflow-mode="End"
-        ui5-tabcontainer=""
-      >
-        <ui5-tab
-          data-index="0"
-          data-section-id="1"
-          design="Default"
-          selected="true"
-          text="Title Section 1"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-        <ui5-tab
-          data-index="1"
-          data-section-id="2"
-          design="Default"
-          text="Title Section 2"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-        <ui5-tab
-          data-index="2"
-          data-section-id="3"
-          design="Default"
-          text="Title Section 3"
-          ui5-tab=""
-        >
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="3"
-            data-section-id="3.1"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 3.1"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="3"
-            data-section-id="3.2"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 3.2"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="3"
-            data-section-id="3.3"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 3.3"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-        <ui5-tab
-          data-index="3"
-          data-section-id="4"
-          design="Default"
-          text="Title Section 4"
-          ui5-tab=""
-        >
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="4"
-            data-section-id="4.1"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 4.1"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="4"
-            data-section-id="4.2"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 4.2"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="4"
-            data-section-id="4.3"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 4.3"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-      </ui5-tabcontainer>
-    </div>
-    <div
-      class="StdExtPadding-Desktop"
-      data-component-name="ObjectPageContent"
-    >
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-1"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          >
-            Title Section 1
-          </div>
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            <ui5-label
-              ui5-label=""
-            >
-              Content Section 1
-            </ui5-label>
-          </div>
-        </div>
-      </section>
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-2"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          >
-            Title Section 2
-          </div>
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            <div>
-              Content Section 2
-            </div>
-          </div>
-        </div>
-      </section>
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-3"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          >
-            Title Section 3
-          </div>
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-3.1"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 3.1
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 3.1
-              </div>
-            </div>
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-3.2"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 3.2
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 3.2
-              </div>
-            </div>
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-3.3"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 3.3
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 3.3
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-4"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          >
-            Title Section 4
-          </div>
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-4.1"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 4.1
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 4.1
-              </div>
-            </div>
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-4.2"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 4.2
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 4.2
-              </div>
-            </div>
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-4.3"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 4.3
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 4.3
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ObjectPage IconTabBar Mode 1`] = `
-<DocumentFragment>
-  <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop ObjectPage-iconTabBarMode"
-    data-component-name="ObjectPage"
-  >
-    <header
-      aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
-      data-component-name="ObjectPageTopHeader"
-      data-not-clickable="true"
-      role="banner"
-      style="grid-auto-columns: min-content 100%; display: grid;"
-    />
-    <div
-      class="ObjectPage-tabContainer"
-      data-component-name="ObjectPageTabContainer"
-      style="top: 0px;"
-    >
-      <ui5-tabcontainer
-        class="ObjectPage-tabContainerComponent"
-        collapsed="true"
-        content-background-design="Solid"
-        data-component-name="ObjectPageTabContainer"
-        data-sap-ui-fastnavgroup="true"
-        fixed="true"
-        header-background-design="Solid"
-        tab-layout="Standard"
-        tabs-overflow-mode="End"
-        ui5-tabcontainer=""
-      >
-        <ui5-tab
-          data-index="0"
-          data-section-id="1"
-          design="Default"
-          text="Title Section 1"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-        <ui5-tab
-          data-index="1"
-          data-section-id="2"
-          design="Default"
-          text="Title Section 2"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-        <ui5-tab
-          data-index="2"
-          data-section-id="3"
-          design="Default"
-          selected="true"
-          text="Title Section 3"
-          ui5-tab=""
-        >
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="3"
-            data-section-id="3.1"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 3.1"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="3"
-            data-section-id="3.2"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 3.2"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="3"
-            data-section-id="3.3"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 3.3"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-        <ui5-tab
-          data-index="3"
-          data-section-id="4"
-          design="Default"
-          text="Title Section 4"
-          ui5-tab=""
-        >
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="4"
-            data-section-id="4.1"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 4.1"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="4"
-            data-section-id="4.2"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 4.2"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <ui5-tab
-            data-is-sub-tab="true"
-            data-parent-id="4"
-            data-section-id="4.3"
-            design="Default"
-            slot="subTabs"
-            text="Title SubSection 4.3"
-            ui5-tab=""
-          >
-            <span
-              style="display: none;"
-            />
-          </ui5-tab>
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-      </ui5-tabcontainer>
-    </div>
-    <div
-      class="StdExtPadding-Desktop"
-      data-component-name="ObjectPageContent"
-    >
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-3"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          >
-            Title Section 3
-          </div>
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-3.1"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 3.1
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 3.1
-              </div>
-            </div>
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-3.2"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 3.2
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 3.2
-              </div>
-            </div>
-            <div
-              class="ObjectPageSubSection-objectPageSubSection"
-              data-component-name="ObjectPageSubSection"
-              id="ObjectPageSubSection-3.3"
-              role="region"
-              tabindex="-1"
-            >
-              <div
-                class="FlexBox-flexBox FlexBox-flexBoxDirectionRow FlexBox-justifyContentSpaceBetween FlexBox-alignItemsCenter FlexBox-flexWrapNoWrap ObjectPageSubSection-headerContainer"
-                data-component-name="ObjectPageSubSectionHeaderContainer"
-              >
-                <div
-                  aria-level="4"
-                  class="ObjectPageSubSection-subSectionTitle"
-                  data-component-name="ObjectPageSubSectionTitleText"
-                  role="heading"
-                >
-                  Title SubSection 3.3
-                </div>
-              </div>
-              <div
-                class="ObjectPageSubSection-subSectionContent"
-                data-component-name="ObjectPageSubSectionContent"
-              >
-                Content Section 3.3
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`ObjectPage Not crashing with 0 sections 1`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop ObjectPage-iconTabBarMode"
-    data-component-name="ObjectPage"
-  >
-    <header
-      aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
-      data-component-name="ObjectPageTopHeader"
-      data-not-clickable="true"
-      role="banner"
-      style="grid-auto-columns: min-content 100%; display: grid;"
-    />
-    <div
-      class="ObjectPage-tabContainer"
-      data-component-name="ObjectPageTabContainer"
-      style="top: 0px;"
-    >
-      <ui5-tabcontainer
-        class="ObjectPage-tabContainerComponent"
-        collapsed="true"
-        content-background-design="Solid"
-        data-component-name="ObjectPageTabContainer"
-        data-sap-ui-fastnavgroup="true"
-        fixed="true"
-        header-background-design="Solid"
-        tab-layout="Standard"
-        tabs-overflow-mode="End"
-        ui5-tabcontainer=""
-      />
-    </div>
-    <div
-      class="StdExtPadding-Desktop"
-      data-component-name="ObjectPageContent"
-    >
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = `
-<DocumentFragment>
-  <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar ObjectPage-iconTabBarMode"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="true"
       role="banner"
@@ -995,143 +30,16 @@ exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = `
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
-      >
-        <ui5-tab
-          data-index="0"
-          data-section-id="1"
-          design="Default"
-          selected="true"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-      </ui5-tabcontainer>
-    </div>
-    <div
-      class="StdExtPadding-Desktop"
-      data-component-name="ObjectPageContent"
-    >
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
-      />
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-1"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          />
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            Test
-          </div>
-        </div>
-      </section>
-      <div
-        aria-hidden="true"
-        style="height: 0px;"
       />
     </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = `
-<DocumentFragment>
-  <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop ObjectPage-iconTabBarMode"
-    data-component-name="ObjectPage"
-  >
-    <header
-      aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
-      data-component-name="ObjectPageTopHeader"
-      data-not-clickable="true"
-      role="banner"
-      style="grid-auto-columns: min-content 100%; display: grid;"
-    />
-    <div
-      class="ObjectPage-tabContainer"
-      data-component-name="ObjectPageTabContainer"
-      style="top: 0px;"
-    >
-      <ui5-tabcontainer
-        class="ObjectPage-tabContainerComponent"
-        collapsed="true"
-        content-background-design="Solid"
-        data-component-name="ObjectPageTabContainer"
-        data-sap-ui-fastnavgroup="true"
-        fixed="true"
-        header-background-design="Solid"
-        tab-layout="Standard"
-        tabs-overflow-mode="End"
-        ui5-tabcontainer=""
-      >
-        <ui5-tab
-          data-index="0"
-          data-section-id="1"
-          design="Default"
-          selected="true"
-          ui5-tab=""
-        >
-          <span
-            style="display: none;"
-          />
-        </ui5-tab>
-      </ui5-tabcontainer>
-    </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
         aria-hidden="true"
         style="height: 0px;"
       />
-      <section
-        class="ObjectPageSection-section"
-        data-component-name="ObjectPageSection"
-        id="ObjectPageSection-1"
-        role="region"
-      >
-        <div
-          aria-level="3"
-          class="ObjectPageSection-titleContainer"
-          data-component-name="ObjectPageSectionTitleText"
-          role="heading"
-        >
-          <div
-            class="ObjectPageSection-title ObjectPageSection-uppercase"
-          />
-        </div>
-        <div
-          class="ObjectPageSection-sectionContent"
-        >
-          <div
-            class="ObjectPageSection-sectionContentInner"
-            data-component-name="ObjectPageSectionContent"
-          >
-            Test
-          </div>
-        </div>
-      </section>
       <div
         aria-hidden="true"
         style="height: 0px;"
@@ -1144,12 +52,12 @@ exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = `
 exports[`ObjectPage with IllustratedMessage 1`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="true"
       role="banner"
@@ -1182,7 +90,7 @@ exports[`ObjectPage with IllustratedMessage 1`] = `
       data-component-name="DynamicPageHeader"
     >
       <div
-        class="ObjectPage-headerContainer StdExtPadding-Desktop"
+        class="ObjectPage-headerContainer"
         data-component-name="ObjectPageHeaderContainer"
       >
         <div
@@ -1203,7 +111,7 @@ exports[`ObjectPage with IllustratedMessage 1`] = `
       />
     </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
@@ -1228,12 +136,12 @@ exports[`ObjectPage with IllustratedMessage 1`] = `
 exports[`ObjectPage with anchor-bar 1`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="false"
       role="banner"
@@ -1266,7 +174,7 @@ exports[`ObjectPage with anchor-bar 1`] = `
       data-component-name="DynamicPageHeader"
     >
       <div
-        class="ObjectPage-headerContainer StdExtPadding-Desktop"
+        class="ObjectPage-headerContainer"
         data-component-name="ObjectPageHeaderContainer"
       >
         <div
@@ -1282,7 +190,7 @@ exports[`ObjectPage with anchor-bar 1`] = `
       style="top: 5px;"
     >
       <section
-        class="DynamicPageAnchorBar-anchorBarActionButton"
+        class="DynamicPageAnchorBar-container"
         data-component-name="DynamicPageAnchorBar"
         role="navigation"
       >
@@ -1441,7 +349,7 @@ exports[`ObjectPage with anchor-bar 1`] = `
       </ui5-tabcontainer>
     </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
@@ -1762,12 +670,12 @@ exports[`ObjectPage with anchor-bar 1`] = `
 exports[`ObjectPage with footer 1`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="true"
       role="banner"
@@ -1916,7 +824,7 @@ exports[`ObjectPage with footer 1`] = `
       </ui5-tabcontainer>
     </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
@@ -2237,12 +1145,12 @@ exports[`ObjectPage with footer 1`] = `
 exports[`ObjectPage with header 1`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="true"
       role="banner"
@@ -2253,7 +1161,7 @@ exports[`ObjectPage with header 1`] = `
       data-component-name="DynamicPageHeader"
     >
       <div
-        class="ObjectPage-headerContainer StdExtPadding-Desktop"
+        class="ObjectPage-headerContainer"
         data-component-name="ObjectPageHeaderContainer"
       >
         <div
@@ -2406,7 +1314,7 @@ exports[`ObjectPage with header 1`] = `
       </ui5-tabcontainer>
     </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
@@ -2707,12 +1615,12 @@ exports[`ObjectPage with header 1`] = `
 exports[`ObjectPage with img 1`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="true"
       role="banner"
@@ -2745,7 +1653,7 @@ exports[`ObjectPage with img 1`] = `
       data-component-name="DynamicPageHeader"
     >
       <div
-        class="ObjectPage-headerContainer StdExtPadding-Desktop"
+        class="ObjectPage-headerContainer"
         data-component-name="ObjectPageHeaderContainer"
       >
         <span
@@ -2918,7 +1826,7 @@ exports[`ObjectPage with img 1`] = `
       </ui5-tabcontainer>
     </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
@@ -3239,12 +2147,12 @@ exports[`ObjectPage with img 1`] = `
 exports[`ObjectPage with img 2`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="true"
       role="banner"
@@ -3277,7 +2185,7 @@ exports[`ObjectPage with img 2`] = `
       data-component-name="DynamicPageHeader"
     >
       <div
-        class="ObjectPage-headerContainer StdExtPadding-Desktop"
+        class="ObjectPage-headerContainer"
         data-component-name="ObjectPageHeaderContainer"
       >
         <ui5-avatar
@@ -3445,7 +2353,7 @@ exports[`ObjectPage with img 2`] = `
       </ui5-tabcontainer>
     </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
@@ -3766,12 +2674,12 @@ exports[`ObjectPage with img 2`] = `
 exports[`ObjectPage with title 1`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="true"
       role="banner"
@@ -3942,7 +2850,7 @@ exports[`ObjectPage with title 1`] = `
       </ui5-tabcontainer>
     </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
@@ -4243,12 +3151,12 @@ exports[`ObjectPage with title 1`] = `
 exports[`ObjectPage with title, header & footer 1`] = `
 <DocumentFragment>
   <div
-    class="ObjectPage-objectPage sapScrollBar ObjectPage-Desktop"
+    class="ObjectPage-objectPage sapScrollBar"
     data-component-name="ObjectPage"
   >
     <header
       aria-roledescription="Object Page header"
-      class="ObjectPage-header StdExtPadding-Desktop"
+      class="ObjectPage-header"
       data-component-name="ObjectPageTopHeader"
       data-not-clickable="true"
       role="banner"
@@ -4281,7 +3189,7 @@ exports[`ObjectPage with title, header & footer 1`] = `
       data-component-name="DynamicPageHeader"
     >
       <div
-        class="ObjectPage-headerContainer StdExtPadding-Desktop"
+        class="ObjectPage-headerContainer"
         data-component-name="ObjectPageHeaderContainer"
       >
         <div
@@ -4444,7 +3352,7 @@ exports[`ObjectPage with title, header & footer 1`] = `
       </ui5-tabcontainer>
     </div>
     <div
-      class="StdExtPadding-Desktop"
+      class="ObjectPage-content"
       data-component-name="ObjectPageContent"
     >
       <div
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index 39e0eee4328..e87ac0c7236 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -1,13 +1,6 @@
 'use client';
 
-import {
-  debounce,
-  enrichEventWithDetails,
-  ThemingParameters,
-  useIsRTL,
-  useResponsiveContentPadding,
-  useSyncRef
-} from '@ui5/webcomponents-react-base';
+import { debounce, enrichEventWithDetails, ThemingParameters, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, {
   cloneElement,
@@ -191,15 +184,12 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
   const [componentRef, objectPageRef] = useSyncRef(ref);
   const topHeaderRef = useRef<HTMLDivElement>(null);
   const scrollEvent = useRef();
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
+  // @ts-expect-error: useSyncRef will create a ref if not present
   const [componentRefHeaderContent, headerContentRef] = useSyncRef(headerContent?.ref);
   const anchorBarRef = useRef<HTMLDivElement>(null);
   const selectionScrollTimeout = useRef(null);
   const [isAfterScroll, setIsAfterScroll] = useState(false);
   const isToggledRef = useRef(false);
-  const isRTL = useIsRTL(objectPageRef);
-  const [responsivePaddingClass, responsiveRange] = useResponsiveContentPadding(objectPageRef.current, true);
   const [headerCollapsedInternal, setHeaderCollapsedInternal] = useState<undefined | boolean>(undefined);
   const [scrolledHeaderExpanded, setScrolledHeaderExpanded] = useState(false);
   const scrollTimeout = useRef(0);
@@ -251,21 +241,23 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
     if (!image) {
       return null;
     }
-    const headerImageClasses = clsx(classes.headerImage, isRTL && classes.headerImageRtl);
 
     if (typeof image === 'string') {
       return (
-        <span className={headerImageClasses} style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}>
+        <span
+          className={classes.headerImage}
+          style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
+        >
           <img src={image} className={classes.image} alt="Company Logo" />
         </span>
       );
     } else {
       return cloneElement(image, {
         size: AvatarSize.L,
-        className: clsx(headerImageClasses, image.props?.className)
+        className: clsx(classes.headerImage, image.props?.className)
       } as AvatarPropTypes);
     }
-  }, [image, classes.headerImage, classes.headerImageRtl, classes.image, imageShapeCircle, isRTL]);
+  }, [image, classes.headerImage, classes.image, imageShapeCircle]);
 
   const prevTopHeaderHeight = useRef(0);
   const scrollToSection = useCallback(
@@ -523,7 +515,6 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
   const objectPageClasses = clsx(
     classes.objectPage,
     GlobalStyleClasses.sapScrollBar,
-    classes[responsiveRange],
     className,
     mode === ObjectPageMode.IconTabBar && classes.iconTabBarMode
   );
@@ -646,10 +637,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
         headerPinned: headerPinned || scrolledHeaderExpanded,
         ref: componentRefHeaderContent,
         children: (
-          <div
-            className={`${classes.headerContainer} ${responsivePaddingClass}`}
-            data-component-name="ObjectPageHeaderContainer"
-          >
+          <div className={classes.headerContainer} data-component-name="ObjectPageHeaderContainer">
             {avatar}
             {headerContent.props.children && (
               <div data-component-name="ObjectPageHeaderContent">
@@ -669,12 +657,9 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
     showTitleInHeaderContent,
     avatar,
     headerContentRef,
-    renderTitleSection,
-    responsivePaddingClass
+    renderTitleSection
   ]);
 
-  const paddingLeftRtl = isRTL ? 'paddingLeft' : 'paddingRight';
-
   const onTabItemSelect = (event) => {
     event.preventDefault();
     const { sectionId, index, isSubTab, parentId } = event.detail.tab.dataset;
@@ -761,7 +746,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
         role={a11yConfig?.objectPageTopHeader?.role ?? 'banner'}
         data-not-clickable={titleHeaderNotClickable}
         aria-roledescription={a11yConfig?.objectPageTopHeader?.ariaRoledescription ?? 'Object Page header'}
-        className={`${classes.header} ${responsivePaddingClass}`}
+        className={classes.header}
         onClick={onTitleClick}
         style={{
           gridAutoColumns: `min-content ${
@@ -771,7 +756,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
         }}
       >
         {headerTitle && image && headerCollapsed === true && (
-          <CollapsedAvatar image={image} imageShapeCircle={imageShapeCircle} style={{ [paddingLeftRtl]: '1rem' }} />
+          <CollapsedAvatar image={image} imageShapeCircle={imageShapeCircle} />
         )}
         {headerTitle && renderTitleSection()}
       </header>
@@ -860,7 +845,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
           </TabContainer>
         </div>
       )}
-      <div data-component-name="ObjectPageContent" className={responsivePaddingClass}>
+      <div data-component-name="ObjectPageContent" className={classes.content}>
         <div style={{ height: headerCollapsed ? `${headerContentHeight}px` : 0 }} aria-hidden="true" />
         {placeholder
           ? placeholder
diff --git a/packages/main/src/components/ObjectPageSection/index.tsx b/packages/main/src/components/ObjectPageSection/index.tsx
index e79883b968d..3e4c251d425 100644
--- a/packages/main/src/components/ObjectPageSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSection/index.tsx
@@ -3,7 +3,8 @@
 import { clsx } from 'clsx';
 import React, { forwardRef, ReactNode } from 'react';
 import { createUseStyles } from 'react-jss';
-import { CommonProps, TitleLevel } from '../..';
+import { TitleLevel } from '../../enums';
+import { CommonProps } from '../../interfaces';
 import styles from './ObjectPageSection.jss';
 
 export interface ObjectPageSectionPropTypes extends CommonProps {
diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx
index 5aa3735ad00..f7a07187f66 100644
--- a/packages/main/src/components/ObjectPageSubSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSubSection/index.tsx
@@ -4,9 +4,10 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { forwardRef, ReactNode } from 'react';
 import { createUseStyles } from 'react-jss';
-import { FlexBox, FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent, TitleLevel } from '../..';
+import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent, TitleLevel } from '../../enums';
 import { CommonProps } from '../../interfaces';
 import { CustomThemingParameters } from '../../themes/CustomVariables';
+import { FlexBox } from '../FlexBox';
 
 export interface ObjectPageSubSectionPropTypes extends CommonProps {
   /**
diff --git a/packages/main/src/internal/ContainerQueries.ts b/packages/main/src/internal/ContainerQueries.ts
new file mode 100644
index 00000000000..77bb1369504
--- /dev/null
+++ b/packages/main/src/internal/ContainerQueries.ts
@@ -0,0 +1,13 @@
+export const ContainerQueries = {
+  S: '@container (max-width: 599px)',
+  M: '@container (min-width: 600px) and (max-width: 1023px)',
+  L: '@container (min-width: 1024px) and (max-width: 1439px)',
+  XL: '@container (min-width: 1440px)'
+} as const;
+
+export const ResponsiveContainerPadding = {
+  [ContainerQueries.S]: { paddingInline: '1rem' },
+  [ContainerQueries.M]: { paddingInline: '2rem' },
+  [ContainerQueries.L]: { paddingInline: '2rem' },
+  [ContainerQueries.XL]: { paddingInline: '3rem' }
+} as const;