diff --git a/src/app-layout/__tests__/dyanmic-overlap.test.tsx b/src/app-layout/__tests__/dyanmic-overlap.test.tsx
new file mode 100644
index 0000000000..9031509f06
--- /dev/null
+++ b/src/app-layout/__tests__/dyanmic-overlap.test.tsx
@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
+import { useDynamicOverlap } from '../../../lib/components/internal/hooks/use-dynamic-overlap';
+import { useAppLayoutInternals } from '../../../lib/components/app-layout/visual-refresh/context';
+
+jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
+  ...jest.requireActual('../../../lib/components/internal/hooks/use-visual-mode'),
+  useVisualRefresh: jest.fn().mockReturnValue(true),
+}));
+
+let positiveHeight = true;
+
+jest.mock('../../../lib/components/internal/hooks/container-queries/utils', () => ({
+  ...jest.requireActual('../../../lib/components/internal/hooks/container-queries/utils'),
+  convertResizeObserverEntry: () => ({ contentBoxHeight: positiveHeight ? 800 : 0 }),
+}));
+
+describe('Dynamic overlap context', () => {
+  function renderApp(appLayoutProps?: AppLayoutProps) {
+    function InternalComponentWithOverlap() {
+      const ref = useDynamicOverlap();
+      const { isDynamicOverlapSet, isDynamicOverlapDisabled } = useAppLayoutInternals();
+      return (
+        <>
+          <div ref={ref} />
+          <div data-testid="is-dynamic-overlap-set">{isDynamicOverlapSet.toString()}</div>
+          <div data-testid="is-dynamic-overlap-disabled">{isDynamicOverlapDisabled.toString()}</div>
+        </>
+      );
+    }
+
+    function App(props: { children: React.ReactNode }) {
+      return <AppLayout {...appLayoutProps} content={props.children} />;
+    }
+
+    render(
+      <App>
+        <InternalComponentWithOverlap />
+      </App>
+    );
+    return {
+      isDynamicOverlapSet: () => screen.getByTestId('is-dynamic-overlap-set').textContent,
+      isDynamicOverlapDisabled: () => screen.getByTestId('is-dynamic-overlap-disabled').textContent,
+    };
+  }
+
+  beforeEach(() => {
+    positiveHeight = true;
+  });
+
+  test('sets dynamic overlap when content header is present', () => {
+    const { isDynamicOverlapSet, isDynamicOverlapDisabled } = renderApp({ contentHeader: 'Content header' });
+    expect(isDynamicOverlapSet()).toBe('true');
+    expect(isDynamicOverlapDisabled()).toBe('false');
+  });
+  test('sets dynamic overlap when height is higher than 0', () => {
+    const { isDynamicOverlapSet, isDynamicOverlapDisabled } = renderApp();
+    expect(isDynamicOverlapSet()).toBe('true');
+    expect(isDynamicOverlapDisabled()).toBe('false');
+  });
+  test('does not set dynamic overlap when no content header is present and height is 0', () => {
+    positiveHeight = false;
+    const { isDynamicOverlapSet, isDynamicOverlapDisabled } = renderApp();
+    expect(isDynamicOverlapSet()).toBe('false');
+    expect(isDynamicOverlapDisabled()).toBe('true');
+  });
+  test('disables dynamic overlap when explicitly specified in the app layout props', () => {
+    const { isDynamicOverlapDisabled } = renderApp({ disableContentHeaderOverlap: true });
+    expect(isDynamicOverlapDisabled()).toBe('true');
+  });
+});
diff --git a/src/app-layout/__tests__/visual-refresh-context.test.tsx b/src/app-layout/__tests__/visual-refresh-context.test.tsx
deleted file mode 100644
index 4f20ae637c..0000000000
--- a/src/app-layout/__tests__/visual-refresh-context.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import AppLayout from '../../../lib/components/app-layout';
-import { useDynamicOverlap } from '../../../lib/components/internal/hooks/use-dynamic-overlap';
-import { useAppLayoutInternals } from '../../../lib/components/app-layout/visual-refresh/context';
-import createWrapper from '../../../lib/components/test-utils/dom';
-
-jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
-  ...jest.requireActual('../../../lib/components/internal/hooks/use-visual-mode'),
-  useVisualRefresh: jest.fn().mockReturnValue(true),
-}));
-
-const mockedHeight = 800;
-
-jest.mock('../../../lib/components/internal/hooks/container-queries/utils', () => ({
-  ...jest.requireActual('../../../lib/components/internal/hooks/container-queries/utils'),
-  convertResizeObserverEntry: () => ({ contentBoxHeight: mockedHeight }),
-}));
-
-const testId = 'resolver';
-
-function renderApp(children: React.ReactNode) {
-  function App(props: { children: React.ReactNode }) {
-    return <AppLayout content={props.children} />;
-  }
-
-  const { container, rerender } = render(<App>{children}</App>);
-  return {
-    getDynamicOverlap: () => Number.parseInt(screen.getByTestId(testId).textContent ?? ''),
-    rerender: (children: React.ReactNode) => rerender(<App>{children}</App>),
-    wrapper: createWrapper(container),
-  };
-}
-
-describe('Visual Refresh context', () => {
-  test('updates dynamic overlap on resize', () => {
-    function Component() {
-      const ref = useDynamicOverlap();
-      const { dynamicOverlapHeight } = useAppLayoutInternals();
-      return (
-        <div ref={ref} data-testid={testId}>
-          {dynamicOverlapHeight}
-        </div>
-      );
-    }
-    const { getDynamicOverlap } = renderApp(<Component />);
-    expect(getDynamicOverlap()).toBe(mockedHeight);
-  });
-});