diff --git a/package-lock.json b/package-lock.json
index 835affb8cf..17fb985a04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
         "@juggle/resize-observer": "^3.3.1",
-        "ace-builds": "^1.34.0",
+        "ace-builds": "1.36.0",
         "balanced-match": "^1.0.2",
         "clsx": "^1.1.0",
         "d3-shape": "^1.3.7",
@@ -4737,9 +4737,9 @@
       }
     },
     "node_modules/ace-builds": {
-      "version": "1.34.0",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.34.0.tgz",
-      "integrity": "sha512-ZQqoV76wl4guDE5zvEnxCDrvy9gzLAwu7eD4ikYj/Gdlb4+qRLbb+aOFVnweZZRsHh089V0WVaw2NMNuiiEdTw=="
+      "version": "1.36.0",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.36.0.tgz",
+      "integrity": "sha512-7to4F86V5N13EY4M9LWaGo2Wmr9iWe5CrYpc28F+/OyYCf7yd+xBV5x9v/GB73EBGGoYd89m6JjeIUjkL6Yw+w=="
     },
     "node_modules/acorn": {
       "version": "8.12.1",
diff --git a/package.json b/package.json
index d511171d45..83f9a30830 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@juggle/resize-observer": "^3.3.1",
-    "ace-builds": "^1.34.0",
+    "ace-builds": "1.36.0",
     "balanced-match": "^1.0.2",
     "clsx": "^1.1.0",
     "d3-shape": "^1.3.7",
diff --git a/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx b/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx
index 3e848ec557..3eed10f528 100644
--- a/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx
+++ b/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx
@@ -3,6 +3,7 @@
 import React, { useRef, useState } from 'react';
 
 import AppLayout from '~components/app-layout';
+import BreadcrumbGroup from '~components/breadcrumb-group';
 import Header from '~components/header';
 import ScreenreaderOnly from '~components/internal/components/screenreader-only';
 import Link from '~components/link';
@@ -12,7 +13,7 @@ import SpaceBetween from '~components/space-between';
 import './utils/external-widget';
 import { IframeWrapper } from '../utils/iframe-wrapper';
 import ScreenshotArea from '../utils/screenshot-area';
-import { Breadcrumbs, Tools } from './utils/content-blocks';
+import { Tools } from './utils/content-blocks';
 import labels from './utils/labels';
 
 function createView(name: string) {
@@ -21,7 +22,17 @@ function createView(name: string) {
       <AppLayout
         data-testid="secondary-layout"
         ariaLabels={labels}
-        breadcrumbs={<Breadcrumbs />}
+        breadcrumbs={
+          name !== 'page2' && (
+            <BreadcrumbGroup
+              onFollow={event => event.preventDefault()}
+              items={[
+                { text: 'Home', href: '#' },
+                { text: name, href: `#${name}` },
+              ]}
+            />
+          )
+        }
         navigationHide={true}
         content={
           <SpaceBetween size="s">
diff --git a/pages/dnd/commons.tsx b/pages/dnd/commons.tsx
index cb2b49452a..2630ff6f21 100644
--- a/pages/dnd/commons.tsx
+++ b/pages/dnd/commons.tsx
@@ -4,12 +4,12 @@
 import React from 'react';
 
 import { Box, Button, SpaceBetween, StatusIndicator } from '~components';
-import { DndContainerProps } from '~components/internal/components/dnd-container/interfaces';
+import { DndAreaProps } from '~components/internal/components/dnd-area/interfaces';
 
 import { Instance } from '../table/generate-data';
 import { stateToStatusIndicator } from '../table/shared-configs';
 
-export const i18nStrings: DndContainerProps<unknown>['i18nStrings'] = {
+export const i18nStrings: DndAreaProps<unknown>['i18nStrings'] = {
   dragHandleAriaLabel: 'Drag handle',
   dragHandleAriaDescription:
     "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape.",
diff --git a/pages/dnd/reorderable-containers.tsx b/pages/dnd/reorderable-containers.tsx
index 5d127cf86f..a3b0bbf2d8 100644
--- a/pages/dnd/reorderable-containers.tsx
+++ b/pages/dnd/reorderable-containers.tsx
@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef } from 'react';
 import clsx from 'clsx';
 
 import { Box, Container, SpaceBetween } from '~components';
-import { DndContainer } from '~components/internal/components/dnd-container';
+import { DndArea } from '~components/internal/components/dnd-area';
 import DragHandle, { DragHandleProps } from '~components/internal/components/drag-handle';
 
 import { ArrowButtons, i18nStrings } from './commons';
@@ -15,8 +15,7 @@ import styles from './styles.scss';
 interface OptionProps<Option> {
   ref?: ForwardedRef<HTMLDivElement>;
   option: Option;
-  dragHandleAttributes: DragHandleProps['attributes'];
-  dragHandleListeners?: DragHandleProps['listeners'];
+  dragHandleProps: DragHandleProps;
 }
 
 export function ReorderableContainers<Option extends { id: string; title: string }>({
@@ -29,58 +28,46 @@ export function ReorderableContainers<Option extends { id: string; title: string
   renderOption: (props: OptionProps<Option>) => React.ReactNode;
 }) {
   return (
-    <DndContainer
+    <DndArea
       items={options.map(option => ({ id: option.id, label: option.title, data: option }))}
       onItemsChange={items => onReorder(items.map(item => item.data))}
-      renderItem={props => {
-        const className = clsx(styles.container, props.isDragging && styles.placeholder);
+      renderItem={({ ref, className, style, ...props }) => {
         const content = renderOption({ ...props, option: props.item.data });
-        return props.isActive ? (
-          <Box>{content}</Box>
-        ) : (
-          <div className={className} style={props.style}>
+        return (
+          <div ref={ref} className={clsx(className, styles.container)} style={style}>
             {content}
           </div>
         );
       }}
       i18nStrings={i18nStrings}
-      dragOverlayClassName={styles['drag-overlay-container']}
+      borderRadiusVariant="container"
     />
   );
 }
 
-export const ContainerWithDragHandle = forwardRef(
-  (
-    {
-      dragHandleAttributes,
-      dragHandleListeners,
-      option,
-      ...arrowButtonsProps
-    }: {
-      dragHandleAttributes: DragHandleProps['attributes'];
-      dragHandleListeners?: DragHandleProps['listeners'];
-      option: { id: string; title: string; content: React.ReactNode };
-      disabledUp?: boolean;
-      disabledDown?: boolean;
-      onMoveUp: () => void;
-      onMoveDown: () => void;
-    },
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
-    return (
-      <div ref={ref} className={styles['container-option']}>
-        <Container
-          header={
-            <SpaceBetween size="xs" direction="horizontal" alignItems="center">
-              <DragHandle attributes={dragHandleAttributes} listeners={dragHandleListeners} />
-              <Box variant="h2">{option.title}</Box>
-              <ArrowButtons {...arrowButtonsProps} />
-            </SpaceBetween>
-          }
-        >
-          {option.content}
-        </Container>
-      </div>
-    );
-  }
-);
+export const ContainerWithDragHandle = ({
+  dragHandleProps,
+  option,
+  ...arrowButtonsProps
+}: {
+  dragHandleProps: DragHandleProps;
+  option: { id: string; title: string; content: React.ReactNode };
+  disabledUp?: boolean;
+  disabledDown?: boolean;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+}) => {
+  return (
+    <Container
+      header={
+        <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+          <DragHandle {...dragHandleProps} />
+          <Box variant="h2">{option.title}</Box>
+          <ArrowButtons {...arrowButtonsProps} />
+        </SpaceBetween>
+      }
+    >
+      {option.content}
+    </Container>
+  );
+};
diff --git a/pages/dnd/reorderable-list.tsx b/pages/dnd/reorderable-list.tsx
index 38670e5aec..5c0071441b 100644
--- a/pages/dnd/reorderable-list.tsx
+++ b/pages/dnd/reorderable-list.tsx
@@ -1,12 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef } from 'react';
 import { useUniqueId } from '@dnd-kit/utilities';
 import clsx from 'clsx';
 
-import { Box, SpaceBetween } from '~components';
-import { DndContainer } from '~components/internal/components/dnd-container';
+import { SpaceBetween } from '~components';
+import { DndArea } from '~components/internal/components/dnd-area';
 import DragHandle, { DragHandleProps } from '~components/internal/components/drag-handle';
 
 import { Instance } from '../table/generate-data';
@@ -17,8 +17,7 @@ import styles from './styles.scss';
 interface OptionProps<Option> {
   ref?: ForwardedRef<HTMLDivElement>;
   option: Option;
-  dragHandleAttributes: DragHandleProps['attributes'];
-  dragHandleListeners?: DragHandleProps['listeners'];
+  dragHandleProps: DragHandleProps;
 }
 
 export function ReorderableList<Option extends { id: string }>({
@@ -41,16 +40,14 @@ export function ReorderableList<Option extends { id: string }>({
       {staticOptions.map(option => (
         <li key={option.id}>{renderStaticOption?.(option)}</li>
       ))}
-      <DndContainer
+      <DndArea
         items={sortableOptions.map(option => ({ id: option.id, label: option.id, data: option }))}
         onItemsChange={items => onReorder([...staticOptions, ...items.map(item => item.data)])}
-        renderItem={props => {
-          const className = clsx(props.isDragging && styles.placeholder, props.isSorting && styles.sorting);
+        renderItem={({ ref, className, style, ...props }) => {
+          className = clsx(className, styles.option, props.isSorting && styles.sorting);
           const content = renderOption({ ...props, option: props.item.data });
-          return props.isActive ? (
-            <Box>{content}</Box>
-          ) : (
-            <li className={className} style={props.style}>
+          return (
+            <li ref={ref} className={className} style={style}>
               {content}
             </li>
           );
@@ -61,49 +58,34 @@ export function ReorderableList<Option extends { id: string }>({
   );
 }
 
-export const InstanceOption = forwardRef(
-  (
-    {
-      dragHandleAttributes,
-      dragHandleListeners,
-      option,
-      sortable = true,
-    }: {
-      dragHandleAttributes?: DragHandleProps['attributes'];
-      dragHandleListeners?: DragHandleProps['listeners'];
-      option: Instance;
-      sortable?: boolean;
-    },
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
-    const idPrefix = useUniqueId('option');
-    const controlId = `${idPrefix}-control-${option.id}`;
-    return (
-      <div ref={ref} className={styles['option-body']}>
-        <DragHandle
-          attributes={{
-            ...dragHandleAttributes,
-            ['aria-disabled']: !sortable,
-          }}
-          listeners={dragHandleListeners}
-        />
-
-        <SpaceBetween size="s">
-          <SpaceBetween size="s" direction="horizontal">
-            <div style={{ width: 120 }}>
-              <label className={styles['option-label']} htmlFor={controlId}>
-                {option.id}
-              </label>
-            </div>
-            <div style={{ width: 120 }}>{option.type}</div>
-            <div style={{ width: 120 }}>
-              <Status {...option} />
-            </div>
-          </SpaceBetween>
+export const InstanceOption = ({
+  dragHandleProps,
+  option,
+}: {
+  dragHandleProps?: DragHandleProps;
+  option: Instance;
+}) => {
+  const idPrefix = useUniqueId('option');
+  const controlId = `${idPrefix}-control-${option.id}`;
+  return (
+    <div className={styles['option-body']}>
+      {dragHandleProps ? <DragHandle {...dragHandleProps} /> : <DragHandle ariaLabel="" disabled={true} />}
 
-          <DnsName {...option} />
+      <SpaceBetween size="s">
+        <SpaceBetween size="s" direction="horizontal">
+          <div style={{ width: 120 }}>
+            <label className={styles['option-label']} htmlFor={controlId}>
+              {option.id}
+            </label>
+          </div>
+          <div style={{ width: 120 }}>{option.type}</div>
+          <div style={{ width: 120 }}>
+            <Status {...option} />
+          </div>
         </SpaceBetween>
-      </div>
-    );
-  }
-);
+
+        <DnsName {...option} />
+      </SpaceBetween>
+    </div>
+  );
+};
diff --git a/pages/dnd/reorderable-samples.page.tsx b/pages/dnd/reorderable-samples.page.tsx
index f43fc0f593..ca1990ad34 100644
--- a/pages/dnd/reorderable-samples.page.tsx
+++ b/pages/dnd/reorderable-samples.page.tsx
@@ -41,7 +41,7 @@ export default function Page() {
           options={options1}
           onReorder={o => setOptions1([...o])}
           renderOption={props => <InstanceOption {...props} />}
-          renderStaticOption={option => <InstanceOption option={option} sortable={false} />}
+          renderStaticOption={option => <InstanceOption option={option} />}
           fixedOptionsStart={fixedOptions ? 3 : 0}
         />
       </SpaceBetween>
diff --git a/pages/dnd/reorderable-table.tsx b/pages/dnd/reorderable-table.tsx
index 25d227f38e..f658c2e58a 100644
--- a/pages/dnd/reorderable-table.tsx
+++ b/pages/dnd/reorderable-table.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 
 import { Box, SpaceBetween } from '~components';
-import { DndContainer } from '~components/internal/components/dnd-container';
+import { DndArea } from '~components/internal/components/dnd-area';
 import DragHandle, { DragHandleProps } from '~components/internal/components/drag-handle';
 
 import { i18nStrings } from './commons';
@@ -28,10 +28,7 @@ export function ReorderableTable<Item extends { id: string }>({
   onReorder: (items: readonly Item[]) => void;
   columnDefinitions: readonly ColumnDefinition<Item>[];
 }) {
-  const getColumnDefinitions = (props: {
-    dragHandleAttributes: DragHandleProps['attributes'];
-    dragHandleListeners?: DragHandleProps['listeners'];
-  }) => {
+  const getColumnDefinitions = (props: { dragHandleProps: DragHandleProps }) => {
     const firstColumn = columnDefinitions[0];
     const enhancedColumns = columnDefinitions.map(def => ({ ...def }));
     enhancedColumns[0] = {
@@ -39,7 +36,7 @@ export function ReorderableTable<Item extends { id: string }>({
       label: firstColumn.label,
       render: item => (
         <SpaceBetween size="xs" direction="horizontal" alignItems="center">
-          <DragHandle attributes={props.dragHandleAttributes} listeners={props.dragHandleListeners} />
+          <DragHandle {...props.dragHandleProps} />
           <Box>{firstColumn.render(item)}</Box>
         </SpaceBetween>
       ),
@@ -69,37 +66,35 @@ export function ReorderableTable<Item extends { id: string }>({
           </tr>
         </thead>
         <tbody>
-          <DndContainer
+          <DndArea
             items={items.map(data => ({ id: data.id, label: data.id, data }))}
             onItemsChange={items => onReorder(items.map(item => item.data))}
-            renderItem={props => {
+            renderItem={({ item, ref, className, style, isActive, dragHandleProps }) => {
               const row = (
                 <tr
-                  ref={props.ref}
-                  className={clsx(props.isActive ? styles['active-row'] : clsx(props.isDragging && styles.placeholder))}
-                  style={props.isActive ? {} : props.style}
+                  ref={ref}
+                  className={clsx(className, styles.row, isActive && styles['active-row'])}
+                  style={isActive ? {} : style}
                 >
-                  {getColumnDefinitions(props).map((column, index) => (
+                  {getColumnDefinitions({ dragHandleProps }).map((column, index) => (
                     <td
                       key={column.key}
                       className={tableStyles['custom-table-cell']}
-                      style={props.isActive ? { width: columnWidthsRef.current[index] ?? 0 } : undefined}
+                      style={isActive ? { width: columnWidthsRef.current[index] ?? 0 } : undefined}
                     >
-                      {column.render(props.item.data)}
+                      {column.render(item.data)}
                     </td>
                   ))}
                 </tr>
               );
-              return !props.isActive ? (
+              return !isActive ? (
                 row
               ) : (
-                <Box>
-                  <div className={tableStyles['custom-table']}>
-                    <table className={clsx(tableStyles['custom-table-table'], tableStyles['use-wrapper-paddings'])}>
-                      <tbody>{row}</tbody>
-                    </table>
-                  </div>
-                </Box>
+                <div className={tableStyles['custom-table']}>
+                  <table className={clsx(tableStyles['custom-table-table'], tableStyles['use-wrapper-paddings'])}>
+                    <tbody>{row}</tbody>
+                  </table>
+                </div>
               );
             }}
             i18nStrings={i18nStrings}
diff --git a/pages/dnd/styles.scss b/pages/dnd/styles.scss
index 21509d0bd7..5ecbc38936 100644
--- a/pages/dnd/styles.scss
+++ b/pages/dnd/styles.scss
@@ -7,6 +7,8 @@
 
 @use '~design-tokens' as awsui;
 
+// List styles
+
 .list {
   list-style: none;
   padding-block: 0;
@@ -15,6 +17,15 @@
   margin-inline: 0;
 }
 
+.option {
+  list-style: none;
+  border-block-end: 1px solid transparent;
+}
+
+.sorting {
+  border-block-end: 1px solid awsui.$color-border-divider-default;
+}
+
 .option-body {
   display: flex;
   gap: awsui.$space-static-xxs;
@@ -25,57 +36,22 @@
   border-start-end-radius: awsui.$border-radius-item;
   border-end-start-radius: awsui.$border-radius-item;
   border-end-end-radius: awsui.$border-radius-item;
-  border-block-end: 1px solid transparent;
 }
 
+// Container styles
+
 .container {
   margin-block-end: awsui.$space-static-m;
 }
+
 .container:last-child {
   margin-block-end: 0;
 }
 
-.sorting {
-  & > .option-body {
-    border-block-end: 1px solid awsui.$color-border-divider-default;
-  }
-}
-.sorting:last-child {
-  border-block-end: none;
-}
+// Table styles
 
-.placeholder {
-  > .container-option,
-  > .option-body,
-  > td {
-    position: relative;
-    &:after {
-      content: ' ';
-      position: absolute;
-      inset: 0;
-      background: awsui.$color-drag-placeholder-hover;
-    }
-  }
-  > .container-option:after {
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
-  }
-  > .option-body:after {
-    border-start-start-radius: awsui.$border-radius-item;
-    border-start-end-radius: awsui.$border-radius-item;
-    border-end-start-radius: awsui.$border-radius-item;
-    border-end-end-radius: awsui.$border-radius-item;
-  }
-  > td:first-child {
-    border-start-start-radius: awsui.$border-radius-item;
-    border-end-start-radius: awsui.$border-radius-item;
-  }
-  > td:last-child {
-    border-start-end-radius: awsui.$border-radius-item;
-    border-end-end-radius: awsui.$border-radius-item;
-  }
+.row {
+  border-block-end: 1px solid transparent;
 }
 
 .active-row {
@@ -88,38 +64,3 @@
     border-end-end-radius: awsui.$border-radius-item;
   }
 }
-
-@mixin when-visible-unfocused {
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] & {
-    @content;
-  }
-}
-
-@mixin focus-highlight($border-radius) {
-  position: relative;
-
-  &::before {
-    content: ' ';
-    display: block;
-    position: absolute;
-    inline-size: 100%;
-    block-size: 100%;
-    border-start-start-radius: $border-radius;
-    border-start-end-radius: $border-radius;
-    border-end-start-radius: $border-radius;
-    border-end-end-radius: $border-radius;
-    box-shadow: 0 0 0 2px awsui.$color-border-item-focused;
-  }
-}
-
-.drag-overlay-container {
-  box-shadow: awsui.$shadow-container-active;
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
-  border-end-start-radius: awsui.$border-radius-container;
-  border-end-end-radius: awsui.$border-radius-container;
-  @include when-visible-unfocused {
-    @include focus-highlight(awsui.$border-radius-container);
-  }
-}
diff --git a/src/app-layout/__integ__/multi-app-layout-navigation.test.ts b/src/app-layout/__integ__/multi-app-layout-navigation.test.ts
index 2fd06fde1e..760c29058d 100644
--- a/src/app-layout/__integ__/multi-app-layout-navigation.test.ts
+++ b/src/app-layout/__integ__/multi-app-layout-navigation.test.ts
@@ -4,7 +4,7 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
-import { getUrlParams } from './utils';
+import { getUrlParams, testIf } from './utils';
 
 const theme = 'refresh-toolbar';
 
@@ -53,5 +53,22 @@ describe('Multi app layout navigation', () => {
         });
       })
     );
+
+    testIf(iframe)(
+      'should clean up and restore previous breadcrumb state, specific for a page',
+      setupTest(async page => {
+        await expect(page.getText(mainLayout.findBreadcrumbs().toSelector())).resolves.toContain('page1');
+
+        await page.clickHref('page2');
+        expect(await page.isExisting(mainLayout.findBreadcrumbs().toSelector())).toBeFalsy();
+
+        await page.clickHref('page3');
+        await page.waitForVisible(mainLayout.findBreadcrumbs().toSelector());
+        await expect(page.getText(mainLayout.findBreadcrumbs().toSelector())).resolves.toContain('page3');
+
+        await page.clickHref('page1');
+        await expect(page.getText(mainLayout.findBreadcrumbs().toSelector())).resolves.toContain('page1');
+      })
+    );
   });
 });
diff --git a/src/app-layout/__integ__/multi-app-layout.test.ts b/src/app-layout/__integ__/multi-app-layout.test.ts
index 99d7195ad6..06e555ecbd 100644
--- a/src/app-layout/__integ__/multi-app-layout.test.ts
+++ b/src/app-layout/__integ__/multi-app-layout.test.ts
@@ -50,6 +50,27 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
           });
         })
       );
+
+      test(
+        'secondary layout does not vertically overflow the primary one',
+        setupTest(async page => {
+          // Provide enough height for all page elements to fit without overflow
+          const outerBrowserWindowHeight = 1400;
+          await page.setWindowSize({ width: 1200, height: outerBrowserWindowHeight });
+
+          // Retrieve the actual viewport size, excluding browser UI
+          const { height: innerViewportSize } = await page.getViewportSize();
+
+          const { bottom: mainLayoutBottom } = await page.getBoundingBox(mainLayout.toSelector());
+          expect(mainLayoutBottom).toBeLessThanOrEqual(innerViewportSize);
+
+          await page.runInsideIframe(iframeId, !!iframe, async () => {
+            const { bottom: secondaryLayoutBottom } = await page.getBoundingBox(secondaryLayout.toSelector());
+            expect(secondaryLayoutBottom).toBeLessThanOrEqual(innerViewportSize);
+            expect(secondaryLayoutBottom).toBeLessThanOrEqual(mainLayoutBottom);
+          });
+        })
+      );
     });
   });
 });
diff --git a/src/app-layout/visual-refresh-toolbar/contexts.ts b/src/app-layout/visual-refresh-toolbar/contexts.ts
index 37f3e83cd6..87415050ed 100644
--- a/src/app-layout/visual-refresh-toolbar/contexts.ts
+++ b/src/app-layout/visual-refresh-toolbar/contexts.ts
@@ -10,3 +10,8 @@ interface BreadcrumbsSlotContextType {
 
 export const BreadcrumbsSlotContext =
   awsuiPluginsInternal.sharedReactContexts.createContext<BreadcrumbsSlotContextType>(React, 'BreadcrumbsSlotContext');
+
+export const AppLayoutVisibilityContext = awsuiPluginsInternal.sharedReactContexts.createContext<boolean>(
+  React,
+  'AppLayoutVisibilityContext'
+);
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index 8abef21722..460f783d94 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -22,6 +22,7 @@ import { useFocusControl, useMultipleFocusControl } from '../utils/use-focus-con
 import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
 import { ActiveDrawersContext } from '../utils/visibility-context';
 import { computeHorizontalLayout, computeVerticalLayout, CONTENT_PADDING } from './compute-layout';
+import { AppLayoutVisibilityContext } from './contexts';
 import { AppLayoutInternals } from './interfaces';
 import {
   AppLayoutDrawer,
@@ -461,11 +462,12 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
     }, [hasToolbar]);
 
     return (
-      <>
+      <AppLayoutVisibilityContext.Provider value={isIntersecting}>
         {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */}
         {!hasToolbar && breadcrumbs ? <ScreenreaderOnly>{breadcrumbs}</ScreenreaderOnly> : null}
         <SkeletonLayout
           ref={useMergeRefs(intersectionObserverRef, rootRef)}
+          isNested={isNested}
           style={{
             paddingBlockEnd:
               splitPanelPosition === 'bottom'
@@ -532,7 +534,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
           maxContentWidth={maxContentWidth}
           disableContentPaddings={disableContentPaddings}
         />
-      </>
+      </AppLayoutVisibilityContext.Provider>
     );
   }
 );
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index d521404383..05deec3818 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -40,6 +40,7 @@ interface SkeletonLayoutProps
   globalTools?: React.ReactNode;
   globalToolsOpen?: boolean;
   navigationAnimationDisabled?: boolean;
+  isNested?: boolean;
 }
 
 export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(
@@ -67,6 +68,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
       disableContentPaddings,
       globalToolsOpen,
       navigationAnimationDisabled,
+      isNested,
     },
     ref
   ) => {
@@ -81,7 +83,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
           [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
         })}
         style={{
-          minBlockSize: `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
+          minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
           [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
           [customCssProps.navigationWidth]: `${navigationWidth}px`,
           [customCssProps.toolsWidth]: `${toolsWidth}px`,
diff --git a/src/calendar/__tests__/calendar.test.tsx b/src/calendar/__tests__/calendar.test.tsx
index f3d64cf00a..a2fc95ac45 100644
--- a/src/calendar/__tests__/calendar.test.tsx
+++ b/src/calendar/__tests__/calendar.test.tsx
@@ -580,6 +580,14 @@ describe('current date', () => {
       }
     }
   });
+
+  test('uses current date if supplied value is invalid', () => {
+    const { container } = render(
+      <Calendar {...defaultProps} value="dddd" isDateEnabled={date => date.getDay() !== 4} />
+    );
+    const wrapper = createWrapper(container).findCalendar()!;
+    expect(wrapper.findHeader().getElement()).toHaveTextContent('Januar 2022');
+  });
 });
 
 describe('test API', () => {
diff --git a/src/calendar/internal.tsx b/src/calendar/internal.tsx
index 7856df416b..15869272d8 100644
--- a/src/calendar/internal.tsx
+++ b/src/calendar/internal.tsx
@@ -56,7 +56,7 @@ export default function Calendar({
 
   // Set displayed date to value if defined or to current date otherwise.
   const parsedValue = value && value.length >= 4 ? parseDate(value) : null;
-  const memoizedValue = parsedValue ? valueDateCache(parsedValue) : null;
+  const memoizedValue = parsedValue && !isNaN(parsedValue.getDate()) ? valueDateCache(parsedValue) : null;
   const defaultDisplayedDate = memoizedValue ?? new Date();
   const [displayedDate, setDisplayedDate] = useState(defaultDisplayedDate);
 
diff --git a/src/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
index 2fc0c173f6..fe2914ab71 100644
--- a/src/collection-preferences/content-display/content-display-option.scss
+++ b/src/collection-preferences/content-display/content-display-option.scss
@@ -6,14 +6,6 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 
-$border-radius: awsui.$border-radius-item;
-
-@mixin animated {
-  @include styles.with-motion {
-    transition: transform awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
-  }
-}
-
 .content-display-option-toggle {
   /* used in test-utils */
 }
@@ -26,34 +18,16 @@ $border-radius: awsui.$border-radius-item;
   padding-inline-start: 0;
   padding-inline-end: awsui.$space-scaled-xs;
   background-color: awsui.$color-background-container-content;
-  border-start-start-radius: $border-radius;
-  border-start-end-radius: $border-radius;
-  border-end-start-radius: $border-radius;
-  border-end-end-radius: $border-radius;
+  border-start-start-radius: awsui.$border-radius-item;
+  border-start-end-radius: awsui.$border-radius-item;
+  border-end-start-radius: awsui.$border-radius-item;
+  border-end-end-radius: awsui.$border-radius-item;
 }
 
 .content-display-option {
   list-style: none;
   position: relative;
   border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
-  &:not(.placeholder).sorting {
-    @include animated;
-  }
-  &.placeholder {
-    > .content-display-option-content {
-      position: relative;
-      &:after {
-        content: ' ';
-        position: absolute;
-        inset: 0;
-        background: awsui.$color-drag-placeholder-hover;
-        border-start-start-radius: $border-radius;
-        border-start-end-radius: $border-radius;
-        border-end-start-radius: $border-radius;
-        border-end-end-radius: $border-radius;
-      }
-    }
-  }
 }
 
 .content-display-option-label {
diff --git a/src/collection-preferences/content-display/content-display-option.tsx b/src/collection-preferences/content-display/content-display-option.tsx
index a78881c33c..9bc4a3df82 100644
--- a/src/collection-preferences/content-display/content-display-option.tsx
+++ b/src/collection-preferences/content-display/content-display-option.tsx
@@ -13,22 +13,18 @@ const componentPrefix = 'content-display-option';
 export const getClassName = (suffix?: string) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];
 
 interface ContentDisplayOptionProps {
-  dragHandleAttributes: DragHandleProps['attributes'];
-  dragHandleListeners?: DragHandleProps['listeners'];
+  dragHandleProps: DragHandleProps;
   onToggle?: (option: OptionWithVisibility) => void;
   option: OptionWithVisibility;
 }
 
 const ContentDisplayOption = forwardRef(
-  (
-    { dragHandleAttributes, dragHandleListeners, onToggle, option }: ContentDisplayOptionProps,
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
+  ({ dragHandleProps, onToggle, option }: ContentDisplayOptionProps, ref: ForwardedRef<HTMLDivElement>) => {
     const idPrefix = useUniqueId(componentPrefix);
     const controlId = `${idPrefix}-control-${option.id}`;
     return (
       <div ref={ref} className={getClassName('content')}>
-        <DragHandle attributes={dragHandleAttributes} listeners={dragHandleListeners} />
+        <DragHandle {...dragHandleProps} />
 
         <label className={getClassName('label')} htmlFor={controlId}>
           {option.label}
diff --git a/src/collection-preferences/content-display/index.tsx b/src/collection-preferences/content-display/index.tsx
index 7173d2cfca..6bb284091c 100644
--- a/src/collection-preferences/content-display/index.tsx
+++ b/src/collection-preferences/content-display/index.tsx
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import InternalBox from '../../box/internal';
 import InternalButton from '../../button/internal';
 import { useInternalI18n } from '../../i18n/context';
-import { DndContainer } from '../../internal/components/dnd-container';
+import { DndArea } from '../../internal/components/dnd-area';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import InternalSpaceBetween from '../../space-between/internal';
 import InternalTextFilter from '../../text-filter/internal';
@@ -129,13 +129,20 @@ export default function ContentDisplayPreference({
         aria-labelledby={titleId}
         role="list"
       >
-        <DndContainer
+        <DndArea
           items={sortedAndFilteredOptions.map(data => ({ id: data.id, label: data.label, data }))}
           onItemsChange={items => onChange(items.map(({ id, data }) => ({ id, visible: data.visible })))}
           disableReorder={columnFilteringText.trim().length > 0}
-          renderItem={({ ref, item, isDragging, isSorting, isActive, style, ...dragHandle }) => {
-            const className = clsx(getOptionClassName(), isDragging && styles.placeholder, isSorting && styles.sorting);
-            const content = <ContentDisplayOption ref={ref} option={item.data} onToggle={onToggle} {...dragHandle} />;
+          renderItem={({ ref, item, isSorting, isActive, style, className, dragHandleProps }) => {
+            className = clsx(className, getOptionClassName(), isSorting && styles.sorting);
+            const content = (
+              <ContentDisplayOption
+                ref={ref}
+                option={item.data}
+                onToggle={onToggle}
+                dragHandleProps={dragHandleProps}
+              />
+            );
             return isActive ? (
               content
             ) : (
diff --git a/src/form/index.tsx b/src/form/index.tsx
index eda6792596..88e421b329 100644
--- a/src/form/index.tsx
+++ b/src/form/index.tsx
@@ -92,7 +92,7 @@ export default function Form({ variant = 'full-page', ...props }: FormProps) {
       funnelType="single-page"
       optionalStepNumbers={[]}
       totalFunnelSteps={1}
-      funnelNameSelectors={[funnelNameSelector, `.${analyticsSelectors.header}`]}
+      funnelNameSelectors={() => [funnelNameSelector, `.${analyticsSelectors.header}`]}
     >
       <AnalyticsFunnelStep
         stepIdentifier={analyticsMetadata?.instanceIdentifier}
diff --git a/src/internal/analytics/components/analytics-funnel.tsx b/src/internal/analytics/components/analytics-funnel.tsx
index e63e8ac4d5..5d951b5073 100644
--- a/src/internal/analytics/components/analytics-funnel.tsx
+++ b/src/internal/analytics/components/analytics-funnel.tsx
@@ -42,7 +42,7 @@ interface AnalyticsFunnelProps {
   mounted?: boolean;
   children?: React.ReactNode;
   stepConfiguration?: StepConfiguration[];
-  funnelNameSelectors?: string[];
+  funnelNameSelectors?: () => string[];
   funnelType: FunnelStartProps['funnelType'];
   optionalStepNumbers: FunnelStartProps['optionalStepNumbers'];
   totalFunnelSteps: FunnelStartProps['totalFunnelSteps'];
@@ -139,7 +139,7 @@ const InnerAnalyticsFunnel = ({ mounted = true, children, stepConfiguration, ...
     */
     let funnelInteractionId: string;
     const handle = setTimeout(() => {
-      funnelNameSelector.current = evaluateSelectors(props.funnelNameSelectors || [], getFunnelNameSelector());
+      funnelNameSelector.current = evaluateSelectors(props.funnelNameSelectors?.() || [], getFunnelNameSelector());
       if (props.funnelType === 'single-page' && wizardCount.current > 0) {
         return;
       }
diff --git a/src/internal/components/dnd-container/__tests__/dnd-container.test.tsx b/src/internal/components/dnd-area/__tests__/dnd-area.test.tsx
similarity index 66%
rename from src/internal/components/dnd-container/__tests__/dnd-container.test.tsx
rename to src/internal/components/dnd-area/__tests__/dnd-area.test.tsx
index 576bbe19a1..15eed7e7c5 100644
--- a/src/internal/components/dnd-container/__tests__/dnd-container.test.tsx
+++ b/src/internal/components/dnd-area/__tests__/dnd-area.test.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { DndContainer } from '../../../../../lib/components/internal/components/dnd-container';
+import { DndArea } from '../../../../../lib/components/internal/components/dnd-area';
 
 test('renders all items with correct attributes', () => {
   const items = [
@@ -13,7 +13,7 @@ test('renders all items with correct attributes', () => {
   ];
   const renderItem = jest.fn();
   render(
-    <DndContainer
+    <DndArea
       items={items}
       onItemsChange={() => {}}
       renderItem={renderItem}
@@ -31,12 +31,10 @@ test('renders all items with correct attributes', () => {
         isDragging: false,
         isActive: false,
         isSorting: false,
-        dragHandleAttributes: {
-          'aria-label': `Drag handle ${items[i].label}`,
-          'aria-describedby': expect.any(String),
-          'aria-disabled': false,
-        },
-        dragHandleListeners: {
+        dragHandleProps: {
+          ariaLabel: `Drag handle ${items[i].label}`,
+          ariaDescribedby: expect.any(String),
+          disabled: false,
           onPointerDown: expect.anything(),
           onKeyDown: expect.anything(),
         },
@@ -45,27 +43,20 @@ test('renders all items with correct attributes', () => {
   }
 });
 
-test('adds aria-disabled to every item drag handle when reordering is disabled', () => {
+test('adds disabled to every item drag handle when reordering is disabled', () => {
   const items = [
     { id: '1', label: 'First', data: {} },
     { id: '2', label: 'Second', data: {} },
   ];
   const renderItem = jest.fn();
   render(
-    <DndContainer
-      items={items}
-      onItemsChange={() => {}}
-      renderItem={renderItem}
-      disableReorder={true}
-      i18nStrings={{}}
-    />
+    <DndArea items={items} onItemsChange={() => {}} renderItem={renderItem} disableReorder={true} i18nStrings={{}} />
   );
   for (let i = 0; i < items.length; i++) {
     expect(renderItem).toHaveBeenCalledWith(
       expect.objectContaining({
         item: items[i],
-        dragHandleAttributes: expect.objectContaining({ 'aria-disabled': true }),
-        dragHandleListeners: {},
+        dragHandleProps: expect.objectContaining({ disabled: true }),
       })
     );
   }
diff --git a/src/internal/components/dnd-container/__tests__/use-live-announcements.test.tsx b/src/internal/components/dnd-area/__tests__/use-live-announcements.test.tsx
similarity index 100%
rename from src/internal/components/dnd-container/__tests__/use-live-announcements.test.tsx
rename to src/internal/components/dnd-area/__tests__/use-live-announcements.test.tsx
diff --git a/src/internal/components/dnd-container/index.tsx b/src/internal/components/dnd-area/index.tsx
similarity index 79%
rename from src/internal/components/dnd-container/index.tsx
rename to src/internal/components/dnd-area/index.tsx
index 091be20fd4..021f0d15bf 100644
--- a/src/internal/components/dnd-container/index.tsx
+++ b/src/internal/components/dnd-area/index.tsx
@@ -5,23 +5,24 @@ import React, { useEffect, useRef } from 'react';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import clsx from 'clsx';
 
 import { joinStrings } from '../../utils/strings';
 import Portal from '../portal';
-import { DndContainerItem, DndContainerProps, RenderItemProps } from './interfaces';
+import { DndAreaItem, DndAreaProps, RenderItemProps } from './interfaces';
 import useDragAndDropReorder from './use-drag-and-drop-reorder';
 import useLiveAnnouncements from './use-live-announcements';
 
 import styles from './styles.css.js';
 
-export function DndContainer<Data>({
+export function DndArea<Data>({
   items,
   renderItem,
   onItemsChange,
   disableReorder,
   i18nStrings,
-  dragOverlayClassName = styles['drag-overlay'],
-}: DndContainerProps<Data>) {
+  borderRadiusVariant = 'item',
+}: DndAreaProps<Data>) {
   const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors } = useDragAndDropReorder({
     items,
   });
@@ -66,6 +67,7 @@ export function DndContainer<Data>({
             renderItem={renderItem}
             onKeyDown={handleKeyDown}
             dragHandleAriaLabel={i18nStrings.dragHandleAriaLabel}
+            borderRadiusVariant={borderRadiusVariant}
           />
         ))}
       </SortableContext>
@@ -73,18 +75,21 @@ export function DndContainer<Data>({
       <Portal container={portalContainer}>
         {/* Make sure that the drag overlay is above the modal  by assigning the z-index as inline style
             so that it prevails over dnd-kit's inline z-index of 999 */}
-        <DragOverlay className={dragOverlayClassName} dropAnimation={null} style={{ zIndex: 5000 }}>
+        <DragOverlay
+          className={clsx(styles['drag-overlay'], styles[`drag-overlay-${borderRadiusVariant}`])}
+          dropAnimation={null}
+          style={{ zIndex: 5000 }}
+        >
           {activeItem &&
             renderItem({
               item: activeItem,
               style: {},
+              className: styles.active,
               isDragging: true,
               isSorting: false,
               isActive: true,
-              dragHandleAttributes: {
-                ['aria-label']: joinStrings(i18nStrings.dragHandleAriaLabel, activeItem.label),
-              },
-              dragHandleListeners: {
+              dragHandleProps: {
+                ariaLabel: joinStrings(i18nStrings.dragHandleAriaLabel, activeItem.label) ?? '',
                 onKeyDown: handleKeyDown,
               },
             })}
@@ -115,11 +120,13 @@ function DraggableItem<Data>({
   dragHandleAriaLabel,
   onKeyDown,
   renderItem,
+  borderRadiusVariant,
 }: {
-  item: DndContainerItem<Data>;
+  item: DndAreaItem<Data>;
   dragHandleAriaLabel?: string;
   onKeyDown: (event: React.KeyboardEvent) => void;
   renderItem: (props: RenderItemProps<Data>) => React.ReactNode;
+  borderRadiusVariant: 'item' | 'container';
 }) {
   const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({ id: item.id });
   const style = { transform: CSS.Translate.toString(transform) };
@@ -136,22 +143,26 @@ function DraggableItem<Data>({
           }
         },
       };
-  const dragHandleAttributes = {
-    ['aria-label']: joinStrings(dragHandleAriaLabel, item.label),
-    ['aria-describedby']: attributes['aria-describedby'],
-    ['aria-disabled']: attributes['aria-disabled'],
-  };
+  const className = clsx(
+    isDragging && clsx(styles.placeholder, styles[`placeholder-${borderRadiusVariant}`]),
+    isSorting && styles.sorting
+  );
   return (
     <>
       {renderItem({
         item,
         ref: setNodeRef,
         style,
+        className,
         isDragging,
         isSorting,
         isActive: false,
-        dragHandleListeners,
-        dragHandleAttributes,
+        dragHandleProps: {
+          ...dragHandleListeners,
+          ariaLabel: joinStrings(dragHandleAriaLabel, item.label) ?? '',
+          ariaDescribedby: attributes['aria-describedby'],
+          disabled: attributes['aria-disabled'],
+        },
       })}
     </>
   );
diff --git a/src/internal/components/dnd-container/interfaces.ts b/src/internal/components/dnd-area/interfaces.ts
similarity index 65%
rename from src/internal/components/dnd-container/interfaces.ts
rename to src/internal/components/dnd-area/interfaces.ts
index b99c932a33..c32f0590dd 100644
--- a/src/internal/components/dnd-container/interfaces.ts
+++ b/src/internal/components/dnd-area/interfaces.ts
@@ -1,16 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-export interface DndContainerProps<Data> {
-  items: readonly DndContainerItem<Data>[];
+export interface DndAreaProps<Data> {
+  items: readonly DndAreaItem<Data>[];
   renderItem: (props: RenderItemProps<Data>) => React.ReactNode;
-  onItemsChange: (sortedOptions: readonly DndContainerItem<Data>[]) => void;
-  i18nStrings: DndContainerI18nStrings;
+  onItemsChange: (sortedOptions: readonly DndAreaItem<Data>[]) => void;
+  i18nStrings: DndAreaI18nStrings;
   disableReorder?: boolean;
-  dragOverlayClassName?: string;
+  borderRadiusVariant?: 'item' | 'container';
 }
 
-export interface DndContainerItem<Data> {
+export interface DndAreaItem<Data> {
   id: string;
   label: string;
   data: Data;
@@ -18,23 +18,22 @@ export interface DndContainerItem<Data> {
 
 export interface RenderItemProps<Data> {
   ref?: React.RefCallback<HTMLElement>;
-  item: DndContainerItem<Data>;
+  item: DndAreaItem<Data>;
   style: React.CSSProperties;
+  className?: string;
   isDragging: boolean;
   isSorting: boolean;
   isActive: boolean;
-  dragHandleAttributes: {
-    'aria-label'?: string;
-    'aria-describedby'?: string;
-    'aria-disabled'?: boolean;
-  };
-  dragHandleListeners?: {
+  dragHandleProps: {
+    ariaLabel: string;
+    ariaDescribedby?: string;
+    disabled?: boolean;
     onPointerDown?: React.PointerEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
   };
 }
 
-export interface DndContainerI18nStrings {
+export interface DndAreaI18nStrings {
   liveAnnouncementDndStarted?: (position: number, total: number) => string;
   liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;
   liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;
diff --git a/src/internal/components/dnd-container/keyboard-sensor/defaults.ts b/src/internal/components/dnd-area/keyboard-sensor/defaults.ts
similarity index 100%
rename from src/internal/components/dnd-container/keyboard-sensor/defaults.ts
rename to src/internal/components/dnd-area/keyboard-sensor/defaults.ts
diff --git a/src/internal/components/dnd-container/keyboard-sensor/index.ts b/src/internal/components/dnd-area/keyboard-sensor/index.ts
similarity index 100%
rename from src/internal/components/dnd-container/keyboard-sensor/index.ts
rename to src/internal/components/dnd-area/keyboard-sensor/index.ts
diff --git a/src/internal/components/dnd-container/keyboard-sensor/utilities/__tests__/scroll.test.ts b/src/internal/components/dnd-area/keyboard-sensor/utilities/__tests__/scroll.test.ts
similarity index 100%
rename from src/internal/components/dnd-container/keyboard-sensor/utilities/__tests__/scroll.test.ts
rename to src/internal/components/dnd-area/keyboard-sensor/utilities/__tests__/scroll.test.ts
diff --git a/src/internal/components/dnd-container/keyboard-sensor/utilities/events.ts b/src/internal/components/dnd-area/keyboard-sensor/utilities/events.ts
similarity index 100%
rename from src/internal/components/dnd-container/keyboard-sensor/utilities/events.ts
rename to src/internal/components/dnd-area/keyboard-sensor/utilities/events.ts
diff --git a/src/internal/components/dnd-container/keyboard-sensor/utilities/listeners.ts b/src/internal/components/dnd-area/keyboard-sensor/utilities/listeners.ts
similarity index 100%
rename from src/internal/components/dnd-container/keyboard-sensor/utilities/listeners.ts
rename to src/internal/components/dnd-area/keyboard-sensor/utilities/listeners.ts
diff --git a/src/internal/components/dnd-container/keyboard-sensor/utilities/scroll.ts b/src/internal/components/dnd-area/keyboard-sensor/utilities/scroll.ts
similarity index 100%
rename from src/internal/components/dnd-container/keyboard-sensor/utilities/scroll.ts
rename to src/internal/components/dnd-area/keyboard-sensor/utilities/scroll.ts
diff --git a/src/internal/components/dnd-area/styles.scss b/src/internal/components/dnd-area/styles.scss
new file mode 100644
index 0000000000..db9d217c2a
--- /dev/null
+++ b/src/internal/components/dnd-area/styles.scss
@@ -0,0 +1,70 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../styles' as styles;
+@use '../../styles/tokens' as awsui;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+
+@mixin animated {
+  @include styles.with-motion {
+    transition: transform awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
+  }
+}
+
+@mixin drag-overlay-with-radius($border-radius) {
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
+
+  @include focus-visible.when-visible-unfocused {
+    @include styles.focus-highlight(0px, $border-radius);
+  }
+}
+
+.drag-overlay {
+  box-shadow: awsui.$shadow-container-active;
+
+  &-item {
+    @include drag-overlay-with-radius(awsui.$border-radius-item);
+  }
+  &-container {
+    @include drag-overlay-with-radius(awsui.$border-radius-container);
+  }
+}
+
+.active {
+  @include styles.default-text-style;
+}
+
+.placeholder {
+  position: relative;
+  &:after {
+    content: ' ';
+    position: absolute;
+    inset: 0;
+    background: awsui.$color-drag-placeholder-hover;
+  }
+  &-item {
+    &:after {
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
+    }
+  }
+  &-container {
+    &:after {
+      border-start-start-radius: awsui.$border-radius-container;
+      border-start-end-radius: awsui.$border-radius-container;
+      border-end-start-radius: awsui.$border-radius-container;
+      border-end-end-radius: awsui.$border-radius-container;
+    }
+  }
+}
+
+.sorting {
+  @include animated;
+}
diff --git a/src/internal/components/dnd-container/use-drag-and-drop-reorder.ts b/src/internal/components/dnd-area/use-drag-and-drop-reorder.ts
similarity index 98%
rename from src/internal/components/dnd-container/use-drag-and-drop-reorder.ts
rename to src/internal/components/dnd-area/use-drag-and-drop-reorder.ts
index 64f2d3fa75..a104717d4b 100644
--- a/src/internal/components/dnd-container/use-drag-and-drop-reorder.ts
+++ b/src/internal/components/dnd-area/use-drag-and-drop-reorder.ts
@@ -14,7 +14,7 @@ import {
 } from '@dnd-kit/core';
 import { hasSortableData } from '@dnd-kit/sortable';
 
-import { DndContainerItem } from './interfaces';
+import { DndAreaItem } from './interfaces';
 import { KeyboardSensor } from './keyboard-sensor';
 
 enum KeyboardCode {
@@ -44,7 +44,7 @@ enum KeyboardCode {
 // getClosestId function which takes its value from the current component
 // state, to make sure they are always in sync.
 
-export default function useDragAndDropReorder<Data>({ items }: { items: readonly DndContainerItem<Data>[] }) {
+export default function useDragAndDropReorder<Data>({ items }: { items: readonly DndAreaItem<Data>[] }) {
   const isKeyboard = useRef(false);
   const positionDelta = useRef(0);
   const [activeItemId, setActiveItemId] = useState<UniqueIdentifier | null>(null);
diff --git a/src/internal/components/dnd-container/use-live-announcements.ts b/src/internal/components/dnd-area/use-live-announcements.ts
similarity index 91%
rename from src/internal/components/dnd-container/use-live-announcements.ts
rename to src/internal/components/dnd-area/use-live-announcements.ts
index b4d2cedd73..b0cba6d284 100644
--- a/src/internal/components/dnd-container/use-live-announcements.ts
+++ b/src/internal/components/dnd-area/use-live-announcements.ts
@@ -4,7 +4,7 @@
 import { useRef } from 'react';
 import { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';
 
-import { DndContainerI18nStrings, DndContainerItem } from './interfaces';
+import { DndAreaI18nStrings, DndAreaItem } from './interfaces';
 
 export default function useLiveAnnouncements<Data>({
   items,
@@ -13,7 +13,7 @@ export default function useLiveAnnouncements<Data>({
   liveAnnouncementDndItemReordered,
   liveAnnouncementDndItemCommitted,
   liveAnnouncementDndDiscarded,
-}: { items: readonly DndContainerItem<Data>[]; isDragging: boolean } & DndContainerI18nStrings) {
+}: { items: readonly DndAreaItem<Data>[]; isDragging: boolean } & DndAreaI18nStrings) {
   const isFirstAnnouncement = useRef(true);
   if (!isDragging) {
     isFirstAnnouncement.current = true;
diff --git a/src/internal/components/dnd-container/styles.scss b/src/internal/components/dnd-container/styles.scss
deleted file mode 100644
index a42e502a00..0000000000
--- a/src/internal/components/dnd-container/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
-
-$border-radius: awsui.$border-radius-item;
-
-.drag-overlay {
-  box-shadow: awsui.$shadow-container-active;
-  border-start-start-radius: $border-radius;
-  border-start-end-radius: $border-radius;
-  border-end-start-radius: $border-radius;
-  border-end-end-radius: $border-radius;
-  @include focus-visible.when-visible-unfocused {
-    @include styles.focus-highlight(0px, $border-radius);
-  }
-}
diff --git a/src/internal/components/drag-handle/index.tsx b/src/internal/components/drag-handle/index.tsx
index 7e38f3e7d3..aef962f0a6 100644
--- a/src/internal/components/drag-handle/index.tsx
+++ b/src/internal/components/drag-handle/index.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { ButtonHTMLAttributes } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 
 import InternalIcon from '../../../icon/internal';
@@ -8,15 +8,20 @@ import InternalIcon from '../../../icon/internal';
 import styles from './styles.css.js';
 
 export interface DragHandleProps {
-  attributes: ButtonHTMLAttributes<HTMLDivElement>;
-  hideFocus?: boolean;
-  // @dnd-kit uses this type
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  listeners: Record<string, Function> | undefined;
+  ariaLabel: string;
+  ariaDescribedby?: string;
+  disabled?: boolean;
+  onPointerDown?: React.PointerEventHandler;
+  onKeyDown?: React.KeyboardEventHandler;
 }
 
-export default function DragHandle({ attributes, hideFocus, listeners }: DragHandleProps) {
-  const disabled = attributes['aria-disabled'];
+export default function DragHandle({
+  ariaLabel,
+  ariaDescribedby,
+  disabled,
+  onPointerDown,
+  onKeyDown,
+}: DragHandleProps) {
   return (
     // We need to use a div with button role instead of a button
     // so that Safari will focus on it when clicking it.
@@ -26,9 +31,12 @@ export default function DragHandle({ attributes, hideFocus, listeners }: DragHan
     <div
       role="button"
       tabIndex={0}
-      className={clsx(styles.handle, hideFocus && styles['hide-focus'], disabled && styles['handle-disabled'])}
-      {...attributes}
-      {...listeners}
+      className={clsx(styles.handle, disabled && styles['handle-disabled'])}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedby}
+      aria-disabled={disabled}
+      onPointerDown={onPointerDown}
+      onKeyDown={onKeyDown}
     >
       <InternalIcon variant={disabled ? 'disabled' : undefined} name="drag-indicator" />
     </div>
diff --git a/src/internal/plugins/helpers/use-global-breadcrumbs.ts b/src/internal/plugins/helpers/use-global-breadcrumbs.ts
index a863b03a0f..dff80a6c64 100644
--- a/src/internal/plugins/helpers/use-global-breadcrumbs.ts
+++ b/src/internal/plugins/helpers/use-global-breadcrumbs.ts
@@ -3,7 +3,10 @@
 import { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { useAppLayoutToolbarEnabled } from '../../../app-layout/utils/feature-flags';
-import { BreadcrumbsSlotContext } from '../../../app-layout/visual-refresh-toolbar/contexts';
+import {
+  AppLayoutVisibilityContext,
+  BreadcrumbsSlotContext,
+} from '../../../app-layout/visual-refresh-toolbar/contexts';
 import { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';
 import { awsuiPluginsInternal } from '../api';
 import { BreadcrumbsGlobalRegistration } from '../controllers/breadcrumbs';
@@ -13,11 +16,12 @@ function useSetGlobalBreadcrumbsImplementation({
   ...props
 }: BreadcrumbGroupProps<any> & { __disableGlobalization?: boolean }) {
   const { isInToolbar } = useContext(BreadcrumbsSlotContext) ?? {};
+  const isLayoutVisible = useContext(AppLayoutVisibilityContext) ?? true;
   const registrationRef = useRef<BreadcrumbsGlobalRegistration<BreadcrumbGroupProps> | null>();
   const [registered, setRegistered] = useState(false);
 
   useEffect(() => {
-    if (isInToolbar || __disableGlobalization) {
+    if (isInToolbar || __disableGlobalization || !isLayoutVisible) {
       return;
     }
     const registration = awsuiPluginsInternal.breadcrumbs.registerBreadcrumbs(props, isRegistered =>
@@ -30,7 +34,7 @@ function useSetGlobalBreadcrumbsImplementation({
     };
     // subsequent prop changes are handled by another effect
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isInToolbar, __disableGlobalization]);
+  }, [isInToolbar, __disableGlobalization, isLayoutVisible]);
 
   useLayoutEffect(() => {
     registrationRef.current?.update(props);
diff --git a/src/mixed-line-bar-chart/chart-container.tsx b/src/mixed-line-bar-chart/chart-container.tsx
index bdc4eaa351..84de35a1bf 100644
--- a/src/mixed-line-bar-chart/chart-container.tsx
+++ b/src/mixed-line-bar-chart/chart-container.tsx
@@ -332,7 +332,7 @@ export default function ChartContainer<T extends ChartDataTypes>({
   // TODO: make a uniform verticalMarkerX state to fit all use-cases.
   const highlightedX = useMemo(() => {
     if (highlightedGroupIndex !== null) {
-      return barGroups[highlightedGroupIndex].x;
+      return barGroups[highlightedGroupIndex]?.x;
     }
     if (verticalMarkerX !== null) {
       return verticalMarkerX.label;
@@ -420,7 +420,7 @@ export default function ChartContainer<T extends ChartDataTypes>({
   if (verticalMarkerX !== null) {
     verticalLineX = verticalMarkerX.scaledX;
   } else if (isGroupNavigation && highlightedGroupIndex !== null) {
-    const x = xAxisProps.scale.d3Scale(barGroups[highlightedGroupIndex].x as any) ?? null;
+    const x = xAxisProps.scale.d3Scale(barGroups[highlightedGroupIndex]?.x as any) ?? null;
     if (x !== null) {
       verticalLineX = xOffset + x;
     }
diff --git a/src/modal/index.tsx b/src/modal/index.tsx
index 413c7adb88..016cab44ea 100644
--- a/src/modal/index.tsx
+++ b/src/modal/index.tsx
@@ -41,7 +41,9 @@ function ModalWithAnalyticsFunnel({
       funnelType="modal"
       optionalStepNumbers={[]}
       totalFunnelSteps={1}
-      funnelNameSelectors={[`[${DATA_ATTR_MODAL_ID}="${window?.CSS?.escape(modalId)}"] .${styles['header--text']}`]}
+      funnelNameSelectors={() => [
+        `[${DATA_ATTR_MODAL_ID}="${window?.CSS?.escape(modalId)}"] .${styles['header--text']}`,
+      ]}
     >
       <AnalyticsFunnelStep
         mounted={props.visible}
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index a09ce882f5..f5c121f77a 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -116,6 +116,11 @@ $cell-negative-space-vertical: 2px;
     margin-block-end: calc(-1 * #{$cell-negative-space-vertical});
   }
 }
+@mixin body-cell-active-hover-padding($padding-start) {
+  &:not(.body-cell-edit-active).body-cell-editable:hover {
+    @include cell-padding-inline-start(calc(#{$padding-start} + #{awsui.$border-divider-list-width}));
+  }
+}
 
 .body-cell {
   box-sizing: border-box;
@@ -126,9 +131,10 @@ $cell-negative-space-vertical: 2px;
   text-align: start;
 
   @include cell-padding-inline-start($cell-horizontal-padding);
+  @include cell-padding-inline-end($cell-horizontal-padding);
+
   @include cell-padding-block-start($cell-vertical-padding);
   @include cell-padding-block-end($cell-vertical-padding-w-border);
-  @include cell-padding-inline-end($cell-horizontal-padding);
 
   &-content {
     box-sizing: border-box;
@@ -147,36 +153,35 @@ $cell-negative-space-vertical: 2px;
   }
   &:first-child {
     border-inline-start: $border-placeholder;
+    @include cell-padding-inline-start($cell-edge-horizontal-padding);
   }
   &:last-child {
     border-inline-end: $border-placeholder;
     @include cell-padding-inline-end($cell-edge-horizontal-padding);
   }
+  // Using very small padding for 1st column cells in VR.
   &.is-visual-refresh:first-child {
-    &:not(.has-striped-rows) {
-      @include cell-padding-inline-start(awsui.$space-xxxs);
-      &:not(.body-cell-edit-active).body-cell-editable:hover {
-        @include cell-padding-inline-start(calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width}));
-      }
-    }
+    @include cell-padding-inline-start(awsui.$space-xxxs);
+    @include body-cell-active-hover-padding(awsui.$space-xxxs);
 
-    &.sticky-cell-pad-inline-start:not(.has-selection) {
-      @include cell-padding-inline-start($cell-horizontal-padding);
-    }
-
-    /*
-      Striped rows requires additional left padding because the
-      shaded background makes the child content appear too close
-      to the table edge.
-    */
+    // Using slightly larger padding for tables with striped rows because the shaded background
+    // makes the child content appear too close to the table edge.
     &:first-child.has-striped-rows {
       @include cell-padding-inline-start(awsui.$space-xxs);
+      @include body-cell-active-hover-padding(awsui.$space-xxs);
 
       &.sticky-cell-pad-inline-start {
         @include cell-padding-inline-start($cell-horizontal-padding);
+        @include body-cell-active-hover-padding($cell-horizontal-padding);
       }
     }
 
+    // Using normal padding when 1st column is sticky.
+    &.sticky-cell-pad-inline-start:not(.has-selection) {
+      @include cell-padding-inline-start($cell-horizontal-padding);
+      @include body-cell-active-hover-padding($cell-horizontal-padding);
+    }
+
     /*
       Remove the placeholder border if the row is not selectable.
       Rows that are not selectable will reserve the horizontal space
@@ -186,9 +191,6 @@ $cell-negative-space-vertical: 2px;
       border-inline-start: none;
     }
   }
-  &:first-child:not(.is-visual-refresh) {
-    @include cell-padding-inline-start($cell-edge-horizontal-padding);
-  }
   &-first-row {
     border-block-start: $border-placeholder;
   }
@@ -246,9 +248,6 @@ $cell-negative-space-vertical: 2px;
       transition-duration: awsui.$motion-duration-transition-show-quick;
       transition-timing-function: awsui.$motion-easing-sticky;
     }
-    &-pad-left:not(.has-selection):not(.is-visual-refresh.body-cell:first-child.has-striped-rows) {
-      @include cell-padding-inline-start(awsui.$space-table-horizontal);
-    }
     &.body-cell-shaded {
       background: awsui.$color-background-cell-shaded;
     }
@@ -418,7 +417,8 @@ $cell-negative-space-vertical: 2px;
       }
       @include cell-padding-inline-start($editing-cell-padding-inline);
       @include cell-padding-inline-end($editing-cell-padding-inline);
-      @include cell-padding-block($editing-cell-padding-block);
+      @include cell-padding-block-start($editing-cell-padding-block);
+      @include cell-padding-block-end(calc($editing-cell-padding-block + 1px));
     }
 
     &:not(.body-cell-edit-active) {
diff --git a/src/tabs/__integ__/tabs.test.ts b/src/tabs/__integ__/tabs.test.ts
index 9b9ac557fa..320ffe9995 100644
--- a/src/tabs/__integ__/tabs.test.ts
+++ b/src/tabs/__integ__/tabs.test.ts
@@ -223,6 +223,7 @@ test(
     await page.setWindowSize({ width: 500, height: 1000 });
     await page.click('#add-tab');
     await page.click(page.paginationButton('right', true));
+    await page.click(page.paginationButton('right', true));
     await page.click(wrapper.findTabLinkByIndex(7).toSelector());
     await page.waitForAssertion(async () =>
       expect(await page.isExisting(page.paginationButton('right', true))).toBe(false)
@@ -230,6 +231,17 @@ test(
   })
 );
 
+test(
+  'tab selection does not cause vertical scroll',
+  setupTest(async page => {
+    await page.setWindowSize({ width: 600, height: 300 });
+    const { top: initialTopScrollPosition } = await page.getWindowScroll();
+    await page.click(wrapper.findTabLinkByIndex(3).toSelector());
+    const { top: currentTopScrollPosition } = await page.getWindowScroll();
+    expect(initialTopScrollPosition).toEqual(currentTopScrollPosition);
+  })
+);
+
 test(
   'does not scroll on click if not needed',
   setupTest(async page => {
diff --git a/src/tabs/scroll-utils.ts b/src/tabs/scroll-utils.ts
index 3a0b581232..70000a2cda 100644
--- a/src/tabs/scroll-utils.ts
+++ b/src/tabs/scroll-utils.ts
@@ -60,7 +60,7 @@ export const scrollIntoView = (tabHeader: HTMLElement, headerBar: HTMLElement, s
   // Anchor tab to right of scroll parent
   updatedLeftScroll = Math.max(
     updatedLeftScroll,
-    tabHeader.offsetLeft + tabHeader.offsetWidth - headerBar.offsetWidth + margin
+    tabHeader.offsetLeft + tabHeader.offsetWidth / 2 - headerBar.offsetWidth / 2 + margin
   );
   if (smooth) {
     smoothScroll(headerBar, updatedLeftScroll);
diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
index ba74b04900..67f87a1b1a 100644
--- a/src/tabs/tab-header-bar.scss
+++ b/src/tabs/tab-header-bar.scss
@@ -29,6 +29,7 @@ $label-horizontal-spacing: awsui.$space-xs;
   overflow-y: hidden;
   position: relative;
   inline-size: 100%;
+  scroll-snap-type: inline proximity;
   // do not use pointer-events none because it disables scroll by sliding
 
   // Hide scrollbar in all browsers
@@ -74,6 +75,7 @@ $label-horizontal-spacing: awsui.$space-xs;
   flex-shrink: 0;
   display: flex;
   max-inline-size: calc(90% - awsui.$space-l);
+  scroll-snap-align: start;
 }
 
 .tabs-tab-label {
@@ -205,6 +207,7 @@ $label-horizontal-spacing: awsui.$space-xs;
 // Remediate focus shadow
 .tabs-tab:first-child {
   margin-inline-start: 1px;
+  scroll-margin-inline-start: 1px;
   & > .tabs-tab-header-container {
     padding-inline-start: calc(#{$label-horizontal-spacing} - 1px);
   }
@@ -213,6 +216,7 @@ $label-horizontal-spacing: awsui.$space-xs;
 // Remediate focus shadow
 .tabs-tab:last-child {
   margin-inline-end: 1px;
+  scroll-margin-inline-end: 1px;
   & > .tabs-tab-header-container {
     padding-inline-end: calc(#{$label-horizontal-spacing} - 1px);
   }