diff --git a/pages/dnd/commons.tsx b/pages/dnd/commons.tsx
index cb2b49452ab..2630ff6f21c 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 5d127cf86fd..a3b0bbf2d8b 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 38670e5aece..5c0071441be 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 f43fc0f593a..ca1990ad34f 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 25d227f38e4..f658c2e58a7 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 21509d0bd7a..5ecbc389368 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/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
index 2fc0c173f63..fe2914ab712 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 a78881c33c5..9bc4a3df821 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 7173d2cfcaf..6bb284091c8 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 eda67925965..88e421b329b 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 e63e8ac4d52..5d951b50738 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 576bbe19a13..15eed7e7c50 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 091be20fd4c..021f0d15bf6 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 b99c932a330..c32f0590ddf 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 00000000000..db9d217c2a9
--- /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 64f2d3fa755..a104717d4b8 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 b4d2cedd737..b0cba6d284f 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 a42e502a000..00000000000
--- 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 7e38f3e7d3f..aef962f0a6c 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/modal/index.tsx b/src/modal/index.tsx
index 413c7adb88e..016cab44ea5 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}