diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
index 9346e351627..7f82a618cf3 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
@@ -2,6 +2,7 @@ import '@ui5/webcomponents-icons/dist/AllIcons.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
+import InputType from '@ui5/webcomponents/dist/types/InputType.js';
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
@@ -9,6 +10,14 @@ import type { CSSProperties } from 'react';
 import { useEffect, useReducer, useRef, useState } from 'react';
 import type { ObjectPagePropTypes } from '../..';
 import {
+  CheckBox,
+  Form,
+  FormGroup,
+  FormItem,
+  Input,
+  Option,
+  Select,
+  TextArea,
   Avatar,
   Bar,
   Breadcrumbs,
@@ -38,6 +47,78 @@ import {
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
 describe('ObjectPage', () => {
+  it('dynamic children selection', () => {
+    const TestComp = () => {
+      const [state, setState] = useState<boolean>(false);
+      const [sections, add] = useReducer(
+        (prev) => [
+          ...prev,
+          <ObjectPageSection key={prev.length + 1} id={`${prev.length + 1}`} titleText={`Section ${prev.length + 1}`}>
+            <div style={{ height: `${(prev.length + 1) * 50}px` }}>Content {prev.length + 1}</div>
+          </ObjectPageSection>
+        ],
+        []
+      );
+      return (
+        <>
+          <button onClick={add}>Add</button>
+          <ObjectPage
+            data-testid="op"
+            style={{ height: '800px', scrollBehavior: 'auto' }}
+            titleArea={DPTitle}
+            headerArea={DPContent}
+            onSelectedSectionChange={() => {
+              setState(!state);
+            }}
+          >
+            {OPContent}
+            {sections}
+          </ObjectPage>
+        </>
+      );
+    };
+
+    cy.mount(<TestComp />);
+
+    cy.wait(100);
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
+    cy.findByText('Job Information').should('be.visible');
+
+    // add 15 sections
+    for (let i = 0; i < 15; i++) {
+      cy.findByText('Add').click();
+    }
+
+    //TabContainer overflow btn
+    cy.get('[data-ui5-stable="overflow-end"]').realClick();
+    cy.get('[ui5-list]').should('be.visible');
+    cy.wait(500);
+    // select "Section 15"
+    cy.realPress('PageDown');
+    cy.wait(500);
+    cy.realPress('Enter');
+    cy.get('[ui5-list]').should('not.be.visible');
+
+    cy.findByText('Content 15').should('be.visible');
+    cy.wait(100);
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 15').should('have.attr', 'aria-selected', 'true');
+
+    cy.findByTestId('op').scrollTo(0, 4660);
+
+    cy.findByText('Content 7').should('be.visible');
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
+
+    cy.mount(<TestComp />);
+    // add 15 sections
+    for (let i = 0; i < 15; i++) {
+      cy.findByText('Add').click();
+    }
+    cy.findByTestId('op').scrollTo(0, 4660);
+
+    cy.findByText('Content 7').should('be.visible');
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
+  });
+
   it('toggle header', () => {
     const toggle = cy.spy().as('toggleSpy');
     cy.mount(
@@ -278,12 +359,9 @@ describe('ObjectPage', () => {
 
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
     cy.realPress('ArrowDown');
-    cy.wait(500);
     cy.realPress('ArrowDown');
     cy.realPress('ArrowDown');
     cy.realPress('Enter');
-    cy.wait(200);
-    cy.realPress('Enter');
     cy.findByText('Job Relationship').should('be.visible');
 
     cy.mount(
@@ -324,6 +402,8 @@ describe('ObjectPage', () => {
     cy.realPress('ArrowDown');
     cy.realPress('ArrowDown');
     cy.realPress('Enter');
+    // wait for scroll
+    cy.wait(200);
     cy.findByText('Job Relationship').should('be.visible');
 
     cy.findByTestId('footer').should('be.visible');
@@ -353,10 +433,12 @@ describe('ObjectPage', () => {
     cy.findByTestId('section 1').should('be.visible');
 
     cy.get('[ui5-tabcontainer]').findUi5TabOpenPopoverButtonByText('Employment').click();
-    cy.wait(500);
+    cy.get('[ui5-list]').should('be.visible');
+    cy.wait(200);
     cy.realPress('ArrowDown');
     cy.realPress('ArrowDown');
     cy.realPress('Enter');
+    cy.wait(500);
     cy.findByText('Job Relationship').should('be.visible');
     cy.findByText('Job Information').should('not.be.visible');
 
@@ -923,6 +1005,57 @@ describe('ObjectPage', () => {
     cy.get('@cb').should('not.been.called');
   });
 
+  it('onSelectedSectionChange: React state update', () => {
+    const TestComp = () => {
+      const [state, setState] = useState(false);
+      return (
+        <ObjectPage
+          // increase test speed by setting scroll behavior to instant
+          style={{ height: '800px', scrollBehavior: 'auto' }}
+          onSelectedSectionChange={() => {
+            setState(!state);
+          }}
+        >
+          <ObjectPageSection id={'test1'} titleText={'test1'}>
+            <div style={{ height: '900px' }}>
+              <div style={{ height: '30%' }}>Content1</div>
+            </div>
+          </ObjectPageSection>
+          <ObjectPageSection id={'test2'} titleText={'test2'}>
+            <div style={{ height: '900px' }}>
+              <div style={{ height: '30%' }}>Content2</div>
+            </div>
+          </ObjectPageSection>
+        </ObjectPage>
+      );
+    };
+
+    cy.mount(<TestComp />);
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('test2').realClick();
+    cy.findByText('Content1').should('not.be.visible');
+    cy.findByText('Content2').should('be.visible');
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('test2').should('have.attr', 'aria-selected', 'true');
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('test1').should('have.attr', 'aria-selected', 'false');
+  });
+
+  it('header spacer', () => {
+    const TestComp = () => {
+      return (
+        <ObjectPage data-testid="op" style={{ height: '95vh' }} titleArea={DPTitle} headerArea={HeaderWithLargeForm}>
+          <ObjectPageSection id="first" titleText="First">
+            <div>First Content</div>
+          </ObjectPageSection>
+          {OPContent}
+        </ObjectPage>
+      );
+    };
+    cy.mount(<TestComp />);
+    cy.findByTestId('op').scrollTo(0, 649);
+
+    cy.wait(500);
+    cy.findByText('First Content').should('be.visible');
+  });
+
   cypressPassThroughTestsFactory(ObjectPage);
 });
 
@@ -1011,6 +1144,68 @@ const OPContent = [
   </ObjectPageSection>
 ];
 
+const HeaderWithLargeForm = (
+  <ObjectPageHeader>
+    <Form layout="S1 M2 L2 XL2">
+      <FormGroup headerText="Personal Data">
+        <FormItem labelContent={<Label>Name</Label>}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelContent={<Label>Address</Label>}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelContent={<Label>Country</Label>}>
+          <Select>
+            <Option>Germany</Option>
+            <Option>France</Option>
+            <Option>Italy</Option>
+          </Select>
+        </FormItem>
+        <FormItem labelContent={<Label>Additional Comment</Label>} className="formAlignLabelStart">
+          <TextArea
+            rows={5}
+            placeholder="The label is aligned to start by setting `<class>::part(label){  align-self: start; }` "
+          />
+        </FormItem>
+        <FormItem labelContent={<Label>Home address</Label>}>
+          <CheckBox checked />
+        </FormItem>
+      </FormGroup>
+      <FormGroup headerText="Company Data">
+        <FormItem labelContent={<Label>Company Name</Label>}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelContent={<Label>Company Address</Label>}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelContent={<Label>Company City</Label>}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelContent={<Label>Company Country</Label>}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelContent={<Label>Number of Employees</Label>}>
+          <Input type={InputType.Number} value="5000" disabled />
+        </FormItem>
+        <FormItem labelContent={<Label>Member of Partner Network</Label>}>
+          <CheckBox checked />
+        </FormItem>
+      </FormGroup>
+      <FormGroup headerText="Marketing Data">
+        <FormItem labelContent={<Label>Email</Label>}>
+          <Input type={InputType.Email} />
+        </FormItem>
+        <FormItem labelContent={<Label>Company Email</Label>}>
+          <Input type={InputType.Email} />
+        </FormItem>
+        <FormItem labelContent={<Label>I want to receive the newsletter</Label>}>
+          <CheckBox />
+        </FormItem>
+      </FormGroup>
+    </Form>
+  </ObjectPageHeader>
+);
+
 const Footer = (
   <Bar
     data-testid="footer"
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index 51d880067ca..105aa5de383 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -38,7 +38,7 @@ const ObjectPageCssVariables = {
   titleFontSize: '--_ui5wcr_ObjectPage_title_fontsize'
 };
 
-const TAB_CONTAINER_HEADER_HEIGHT = 48;
+const TAB_CONTAINER_HEADER_HEIGHT = 44;
 
 type ObjectPageSectionType = ReactElement<ObjectPageSectionPropTypes> | boolean;
 
@@ -208,8 +208,12 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
 
   useStylesheet(styleData, ObjectPage.displayName);
 
-  const firstSectionId: string | undefined =
-    safeGetChildrenArray<ReactElement<ObjectPageSectionPropTypes>>(children)[0]?.props?.id;
+  // memo necessary due to side effects triggered on each update
+  const childrenArray = useMemo(
+    () => safeGetChildrenArray<ReactElement<ObjectPageSectionPropTypes>>(children),
+    [children]
+  );
+  const firstSectionId: string | undefined = childrenArray[0]?.props?.id;
 
   const [internalSelectedSectionId, setInternalSelectedSectionId] = useState<string | undefined>(
     selectedSectionId ?? firstSectionId
@@ -321,24 +325,33 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     }
   }, [image, classNames.headerImage, classNames.image, imageShapeCircle]);
 
-  const scrollToSectionById = (id?: string, isSubSection = false) => {
+  const scrollToSectionById = (id: string | undefined, isSubSection = false) => {
     const section = objectPageRef.current?.querySelector<HTMLElement>(
       `#${isSubSection ? 'ObjectPageSubSection' : 'ObjectPageSection'}-${CSS.escape(id)}`
     );
     scrollTimeout.current = performance.now() + 500;
     if (section) {
       const safeTopHeaderHeight = topHeaderHeight || prevTopHeaderHeight.current;
-      section.style.scrollMarginBlockStart =
+
+      const scrollMargin =
+        -1 /* reduce margin-block so that intersection observer detects correct section*/ +
         safeTopHeaderHeight +
         anchorBarHeight +
         TAB_CONTAINER_HEADER_HEIGHT +
-        (headerPinned && !headerCollapsed ? headerContentHeight : 0) +
-        'px';
+        (headerPinned && !headerCollapsed ? headerContentHeight : 0);
+      section.style.scrollMarginBlockStart = scrollMargin + 'px';
       if (isSubSection) {
         section.focus();
       }
-      section.scrollIntoView();
-      section.style.scrollMarginBlockStart = '0px';
+
+      const sectionRect = section.getBoundingClientRect();
+      const objectPageElement = objectPageRef.current;
+      const objectPageRect = objectPageElement.getBoundingClientRect();
+
+      // Calculate the top position of the section relative to the container
+      objectPageElement.scrollTop = sectionRect.top - objectPageRect.top + objectPageElement.scrollTop - scrollMargin;
+
+      section.style.scrollMarginBlockStart = '';
     }
   };
 
@@ -362,11 +375,8 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
       setInternalSelectedSectionId(currentId);
       prevSelectedSectionId.current = currentId;
       const sectionNodes = objectPageRef.current?.querySelectorAll('section[data-component-name="ObjectPageSection"]');
-      const currentIndex = safeGetChildrenArray(children).findIndex((objectPageSection) => {
-        return (
-          isValidElement(objectPageSection) &&
-          (objectPageSection as ReactElement<ObjectPageSectionPropTypes>).props?.id === currentId
-        );
+      const currentIndex = childrenArray.findIndex((objectPageSection) => {
+        return isValidElement(objectPageSection) && objectPageSection.props?.id === currentId;
       });
       fireOnSelectedChangedEvent({}, currentIndex, currentId, sectionNodes[0]);
     }
@@ -400,6 +410,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   const handleOnSectionSelected = (targetEvent, newSelectionSectionId, index, section) => {
     isProgrammaticallyScrolled.current = true;
     debouncedOnSectionChange.cancel();
+    setSelectedSubSectionId(undefined);
     setInternalSelectedSectionId((prevSelectedSection) => {
       if (prevSelectedSection === newSelectionSectionId) {
         scrollToSection(newSelectionSectionId);
@@ -451,7 +462,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
       isProgrammaticallyScrolled.current = true;
       if (mode === ObjectPageMode.IconTabBar) {
         let sectionId;
-        safeGetChildrenArray<ReactElement<ObjectPageSectionPropTypes>>(children).forEach((section) => {
+        childrenArray.forEach((section) => {
           if (isValidElement(section) && section.props && section.props.children) {
             safeGetChildrenArray(section.props.children).forEach((subSection) => {
               if (
@@ -469,7 +480,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
         }
       }
     }
-  }, [props.selectedSubSectionId, children, mode]);
+  }, [props.selectedSubSectionId, childrenArray, mode]);
 
   const tabContainerContainerRef = useRef(null);
   useEffect(() => {
@@ -485,11 +496,17 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
       if ((currentTabModeSection && !lastSubSection) || (sectionNodes.length === 1 && !lastSubSection)) {
         setSectionSpacer(0);
       } else if (tabContainerContainer) {
+        const footerHeight =
+          objectPage.querySelector<HTMLDivElement | undefined>('[data-component-name="ObjectPageFooter"]')
+            ?.offsetHeight ?? 0;
+
         setSectionSpacer(
           objectPage.getBoundingClientRect().bottom -
             tabContainerContainer.getBoundingClientRect().bottom -
             lastSubSectionOrSection.getBoundingClientRect().height -
-            TAB_CONTAINER_HEADER_HEIGHT
+            footerHeight -
+            // section padding
+            8
         );
       }
     });
@@ -501,7 +518,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     return () => {
       observer.disconnect();
     };
-  }, [headerCollapsed, topHeaderHeight, headerContentHeight, currentTabModeSection, children]);
+  }, [headerCollapsed, topHeaderHeight, headerContentHeight, currentTabModeSection, children, mode]);
 
   const onToggleHeaderContentVisibility = useCallback((e) => {
     isToggledRef.current = true;
@@ -516,29 +533,24 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     }
   }, []);
 
-  const handleOnSubSectionSelected = useCallback(
-    (e) => {
-      isProgrammaticallyScrolled.current = true;
-      if (mode === ObjectPageMode.IconTabBar) {
-        const sectionId = e.detail.sectionId;
-        setInternalSelectedSectionId(sectionId);
-        const sectionNodes = objectPageRef.current?.querySelectorAll(
-          'section[data-component-name="ObjectPageSection"]'
+  const handleOnSubSectionSelected = (e) => {
+    isProgrammaticallyScrolled.current = true;
+    if (mode === ObjectPageMode.IconTabBar) {
+      const sectionId = e.detail.sectionId;
+      setInternalSelectedSectionId(sectionId);
+      const sectionNodes = objectPageRef.current?.querySelectorAll('section[data-component-name="ObjectPageSection"]');
+      const currentIndex = childrenArray.findIndex((objectPageSection) => {
+        return (
+          isValidElement(objectPageSection) &&
+          (objectPageSection as ReactElement<ObjectPagePropTypes>).props?.id === sectionId
         );
-        const currentIndex = safeGetChildrenArray(children).findIndex((objectPageSection) => {
-          return (
-            isValidElement(objectPageSection) &&
-            (objectPageSection as ReactElement<ObjectPagePropTypes>).props?.id === sectionId
-          );
-        });
-        debouncedOnSectionChange(e, currentIndex, sectionId, sectionNodes[currentIndex]);
-      }
-      const subSectionId = e.detail.subSectionId;
-      scrollTimeout.current = performance.now() + 200;
-      setSelectedSubSectionId(subSectionId);
-    },
-    [mode, setInternalSelectedSectionId, setSelectedSubSectionId, isProgrammaticallyScrolled, children]
-  );
+      });
+      debouncedOnSectionChange(e, currentIndex, sectionId, sectionNodes[currentIndex]);
+    }
+    const subSectionId = e.detail.subSectionId;
+    scrollTimeout.current = performance.now() + 200;
+    setSelectedSubSectionId(subSectionId);
+  };
 
   const objectPageClasses = clsx(
     classNames.objectPage,
@@ -594,7 +606,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     return () => {
       observer.disconnect();
     };
-  }, [children, totalHeaderHeight, setInternalSelectedSectionId, headerPinned, debouncedOnSectionChange]);
+  }, [totalHeaderHeight, headerPinned, headerCollapsed, topHeaderHeight, childrenArray.length]);
 
   const onTitleClick = (e) => {
     e.stopPropagation();
@@ -621,7 +633,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
         topHeaderHeight,
         style:
           headerCollapsed === true
-            ? { position: 'absolute', visibility: 'hidden', flexShrink: 0 }
+            ? { ...headerArea.props.style, position: 'absolute', visibility: 'hidden', flexShrink: 0, insetInline: 0 }
             : { ...headerArea.props.style, flexShrink: 0 },
         headerPinned: headerPinned || scrolledHeaderExpanded,
         //@ts-expect-error: todo remove me when forwardref has been replaced
@@ -662,7 +674,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     if (isSubTab !== undefined) {
       handleOnSubSectionSelected(enrichEventWithDetails(event, { sectionId: parentId, subSectionId: sectionId }));
     } else {
-      const section = safeGetChildrenArray<ReactElement<ObjectPageSectionPropTypes>>(children).find((el) => {
+      const section = childrenArray.find((el) => {
         return el.props.id == sectionId;
       });
       handleOnSectionSelected(event, section?.props?.id, index, section);
@@ -814,7 +826,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
             data-component-name="ObjectPageTabContainer"
             className={classNames.tabContainerComponent}
           >
-            {safeGetChildrenArray<ReactElement<ObjectPageSectionPropTypes>>(children).map((section, index) => {
+            {childrenArray.map((section, index) => {
               if (!isValidElement(section) || !section.props) return null;
               const subTabs = safeGetChildrenArray<ReactElement<ObjectPageSubSectionPropTypes>>(
                 section.props.children
diff --git a/packages/main/src/internal/useObserveHeights.ts b/packages/main/src/internal/useObserveHeights.ts
index b8dc7981b4a..98460420c12 100644
--- a/packages/main/src/internal/useObserveHeights.ts
+++ b/packages/main/src/internal/useObserveHeights.ts
@@ -101,7 +101,7 @@ export const useObserveHeights = (
       headerContentResizeObserver.disconnect();
     };
   }, [isIntersecting]);
-  const anchorBarHeight = anchorBarRef?.current?.offsetHeight ?? 33;
+  const anchorBarHeight = anchorBarRef?.current?.offsetHeight ?? 0;
   const totalHeaderHeight = (noHeader ? 0 : topHeaderHeight + headerContentHeight) + anchorBarHeight;
 
   return { topHeaderHeight, headerContentHeight, anchorBarHeight, totalHeaderHeight, headerCollapsed };