diff --git a/src/features/presence/PresenceAvatarList.tsx b/src/features/presence/PresenceAvatarList.tsx
index 3cb30bfd1a..c7359546b1 100644
--- a/src/features/presence/PresenceAvatarList.tsx
+++ b/src/features/presence/PresenceAvatarList.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
+import { Tooltip as BPTooltip, TooltipProvider as BPTooltipProvider } from '@box/blueprint-web';
 // @ts-ignore flow import
 import PresenceAvatar from './PresenceAvatar';
 import PresenceAvatarTooltipContent from './PresenceAvatarTooltipContent';
 import Tooltip, { TooltipPosition } from '../../components/tooltip';
+import { withBlueprintModernization } from '../../elements/common/withBlueprintModernization';
 import './PresenceAvatarList.scss';
 
 export type Collaborator = {
@@ -21,12 +23,14 @@ export type Props = {
     avatarAttributes?: React.HTMLAttributes<HTMLDivElement>;
     className?: string;
     collaborators: Array<Collaborator>;
+    enableModernizedComponents?: boolean;
     hideAdditionalCount?: boolean;
     hideTooltips?: boolean;
     maxAdditionalCollaborators?: number;
     maxDisplayedAvatars?: number;
     onAvatarMouseEnter?: (id: string) => void;
     onAvatarMouseLeave?: () => void;
+    isPreviewModernizationEnabled?: boolean;
 };
 
 function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.Element | null {
@@ -40,9 +44,9 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         maxDisplayedAvatars = 3,
         onAvatarMouseEnter = noop,
         onAvatarMouseLeave = noop,
+        isPreviewModernizationEnabled = false,
         ...rest
     } = props;
-
     const [activeTooltip, setActiveTooltip] = React.useState<string | null>(null);
 
     const hideTooltip = (): void => {
@@ -63,39 +67,59 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         return null;
     }
 
-    return (
+    const renderAvatar = (collaborator: Collaborator) => {
+        const { id, avatarUrl, name, isActive, interactedAt, interactionType } = collaborator;
+
+        const avatarElement = (
+            <PresenceAvatar
+                aria-hidden="true"
+                avatarUrl={avatarUrl}
+                id={id}
+                isActive={isActive}
+                name={name}
+                onBlur={hideTooltip}
+                onFocus={() => showTooltip(id)}
+                onMouseEnter={() => showTooltip(id)}
+                onMouseLeave={hideTooltip}
+                {...avatarAttributes}
+            />
+        );
+
+        const tooltipContent = (
+            <PresenceAvatarTooltipContent
+                name={name}
+                interactedAt={interactedAt}
+                interactionType={interactionType}
+                isActive={isActive}
+            />
+        );
+
+        if (isPreviewModernizationEnabled) {
+            if (hideTooltips) {
+                return avatarElement;
+            }
+            return (
+                <BPTooltip key={id} content={tooltipContent} side="bottom">
+                    <span>{avatarElement}</span>
+                </BPTooltip>
+            );
+        }
+
+        return (
+            <Tooltip
+                key={id}
+                isShown={!hideTooltips && activeTooltip === id}
+                position={TooltipPosition.BOTTOM_CENTER}
+                text={tooltipContent}
+            >
+                {avatarElement}
+            </Tooltip>
+        );
+    };
+
+    const content = (
         <div ref={ref} className={classNames('bdl-PresenceAvatarList', className)} {...rest}>
-            {collaborators.slice(0, maxDisplayedAvatars).map(collaborator => {
-                const { id, avatarUrl, name, isActive, interactedAt, interactionType } = collaborator;
-                return (
-                    <Tooltip
-                        key={id}
-                        isShown={!hideTooltips && activeTooltip === id}
-                        position={TooltipPosition.BOTTOM_CENTER}
-                        text={
-                            <PresenceAvatarTooltipContent
-                                name={name}
-                                interactedAt={interactedAt}
-                                interactionType={interactionType}
-                                isActive={isActive}
-                            />
-                        }
-                    >
-                        <PresenceAvatar
-                            aria-hidden="true"
-                            avatarUrl={avatarUrl}
-                            id={id}
-                            isActive={isActive}
-                            name={name}
-                            onBlur={hideTooltip}
-                            onFocus={() => showTooltip(id)}
-                            onMouseEnter={() => showTooltip(id)}
-                            onMouseLeave={hideTooltip}
-                            {...avatarAttributes}
-                        />
-                    </Tooltip>
-                );
-            })}
+            {collaborators.slice(0, maxDisplayedAvatars).map(renderAvatar)}
 
             {!hideAdditionalCount && collaborators.length > maxDisplayedAvatars && (
                 <div
@@ -111,8 +135,15 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
             )}
         </div>
     );
+
+    // This component can be used standalone when it's not inside a ContentPreview/ContentSidebar,
+    // so we need to provide our own TooltipProvider when using Blueprint tooltips
+    if (isPreviewModernizationEnabled) {
+        return <BPTooltipProvider>{content}</BPTooltipProvider>;
+    }
+    return content;
 }
 
 export { PresenceAvatarList as PresenceAvatarListComponent };
 
-export default React.forwardRef(PresenceAvatarList);
+export default withBlueprintModernization(React.forwardRef(PresenceAvatarList));
diff --git a/src/features/presence/__tests__/PresenceAvatarList.test.tsx b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
index 33a370617a..eaebbb8472 100644
--- a/src/features/presence/__tests__/PresenceAvatarList.test.tsx
+++ b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { Tooltip as BPTooltip } from '@box/blueprint-web';
 import collaboratorList from '../__mocks__/collaborators';
 // @ts-ignore flow import
 import PresenceAvatar from '../PresenceAvatar';
@@ -20,136 +21,142 @@ describe('features/presence/PresenceAvatarList', () => {
             expect(wrapper.exists('.bdl-PresenceAvatarList')).toBe(false);
         });
 
-        test('should correctly render collaborators without additional count when number of collaborators is less than or equal to maxDisplayedAvatars', () => {
-            const maxDisplayedAvatars = 3;
-            const wrapper = getWrapper({
-                collaborators: collaboratorList.slice(0, maxDisplayedAvatars),
-                maxDisplayedAvatars,
+        describe.each([true, false])('when isPreviewModernizationEnabled is %s', isPreviewModernizationEnabled => {
+            test('should correctly render collaborators without additional count when number of collaborators is less than or equal to maxDisplayedAvatars', () => {
+                const maxDisplayedAvatars = 3;
+                const wrapper = getWrapper({
+                    collaborators: collaboratorList.slice(0, maxDisplayedAvatars),
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
+
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
             });
 
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
-        });
+            test('should correctly render collaborators with additional count when number of collaborators is greater than maxDisplayedAvatars', () => {
+                const maxDisplayedAvatars = 3;
+                const wrapper = getWrapper({
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
 
-        test('should correctly render collaborators with additional count when number of collaborators is greater than maxDisplayedAvatars', () => {
-            const maxDisplayedAvatars = 3;
-            const wrapper = getWrapper({
-                maxDisplayedAvatars,
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(true);
             });
 
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(true);
-        });
+            test('should hide additional count if hideAdditionalCount is specified', () => {
+                const maxDisplayedAvatars = 3;
+                const wrapper = getWrapper({
+                    hideAdditionalCount: true,
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
 
-        test('should hide additional count if hideAdditionalCount is specified', () => {
-            const maxDisplayedAvatars = 3;
-            const wrapper = getWrapper({
-                hideAdditionalCount: true,
-                maxDisplayedAvatars,
+                expect(wrapper.exists('.bdl-PresenceAvatarList')).toBe(true);
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
             });
 
-            expect(wrapper.exists('.bdl-PresenceAvatarList')).toBe(true);
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
-        });
-
-        test.each(['focus', 'mouseenter'])(
-            'should show tooltip when correponding avatar encounters %s event',
-            event => {
-                const onAvatarMouseEnter = jest.fn();
+            test('should hide tooltips when hideTooltips is true ', () => {
                 const wrapper = getWrapper({
-                    onAvatarMouseEnter,
+                    hideTooltips: true,
+                    isPreviewModernizationEnabled,
                 });
 
-                expect(
-                    wrapper
-                        .find(Tooltip)
-                        .first()
-                        .prop('isShown'),
-                ).toBe(false);
-
-                // Trigger event on the first avatar
-                wrapper
-                    .find(PresenceAvatar)
-                    .first()
-                    .simulate(event);
-
-                expect(onAvatarMouseEnter).toHaveBeenCalledWith('1');
-                expect(
-                    wrapper
-                        .find(Tooltip)
-                        .first()
-                        .prop('isShown'),
-                ).toBe(true);
-            },
-        );
-
-        test.each(['blur', 'mouseleave'])('should hide tooltip when correponding avatar encounters %s event', event => {
-            const onAvatarMouseLeave = jest.fn();
-            const wrapper = getWrapper({
-                onAvatarMouseLeave,
+                expect(wrapper.find(PresenceAvatar).length).toBeGreaterThan(0);
+                expect(wrapper.find(BPTooltip).length).toBe(0);
             });
 
-            // Cause the tooltip to show
-            wrapper
-                .find(PresenceAvatar)
-                .first()
-                .simulate('focus');
-
-            expect(
-                wrapper
-                    .find(Tooltip)
-                    .first()
-                    .prop('isShown'),
-            ).toBe(true);
-
-            // Trigger event on the first avatar
-            wrapper
-                .find(PresenceAvatar)
-                .first()
-                .simulate(event);
-
-            expect(onAvatarMouseLeave).toHaveBeenCalled();
-            expect(
-                wrapper
-                    .find(Tooltip)
-                    .first()
-                    .prop('isShown'),
-            ).toBe(false);
-        });
+            test.each(['focus', 'mouseenter'])(
+                'should show tooltip when corresponding avatar encounters %s event',
+                event => {
+                    const onAvatarMouseEnter = jest.fn();
+                    const wrapper = getWrapper({
+                        onAvatarMouseEnter,
+                        isPreviewModernizationEnabled,
+                    });
+
+                    if (isPreviewModernizationEnabled) {
+                        // Blueprint tooltip doesn't use isShown prop, just verify it exists
+                        expect(wrapper.find(BPTooltip).length).toBeGreaterThan(0);
+                    } else {
+                        expect(wrapper.find(Tooltip).first().prop('isShown')).toBe(false);
+                    }
+
+                    // Trigger event on the first avatar
+                    wrapper.find(PresenceAvatar).first().simulate(event);
+
+                    expect(onAvatarMouseEnter).toHaveBeenCalledWith('1');
+                    if (!isPreviewModernizationEnabled) {
+                        expect(wrapper.find(Tooltip).first().prop('isShown')).toBe(true);
+                    }
+                },
+            );
+
+            test.each(['blur', 'mouseleave'])(
+                'should hide tooltip when correponding avatar encounters %s event',
+                event => {
+                    const onAvatarMouseLeave = jest.fn();
+                    const wrapper = getWrapper({
+                        onAvatarMouseLeave,
+                        isPreviewModernizationEnabled,
+                    });
+
+                    // Cause the tooltip to show
+                    wrapper.find(PresenceAvatar).first().simulate('focus');
+
+                    if (!isPreviewModernizationEnabled) {
+                        expect(wrapper.find(Tooltip).first().prop('isShown')).toBe(true);
+                    }
+
+                    // Trigger event on the first avatar
+                    wrapper.find(PresenceAvatar).first().simulate(event);
+
+                    expect(onAvatarMouseLeave).toHaveBeenCalled();
+                    if (!isPreviewModernizationEnabled) {
+                        expect(wrapper.find(Tooltip).first().prop('isShown')).toBe(false);
+                    }
+                },
+            );
+
+            test('should pass through additional attributes when specified', () => {
+                const avatarAttr = { 'data-resin-target': 'avatar' };
+                const wrapper = getWrapper({
+                    avatarAttributes: avatarAttr,
+                    'data-resin-feature': 'presence',
+                    isPreviewModernizationEnabled,
+                });
 
-        test('should pass through additional attributes when specified', () => {
-            const avatarAttr = { 'data-resin-target': 'avatar' };
-            const wrapper = getWrapper({
-                avatarAttributes: avatarAttr,
-                'data-resin-feature': 'presence',
+                expect(wrapper.find('.bdl-PresenceAvatarList').prop('data-resin-feature')).toEqual('presence');
+                expect(wrapper.find(PresenceAvatar).first().prop('data-resin-target')).toEqual('avatar');
             });
 
-            expect(wrapper.find('.bdl-PresenceAvatarList').prop('data-resin-feature')).toEqual('presence');
-            expect(
-                wrapper
-                    .find(PresenceAvatar)
-                    .first()
-                    .prop('data-resin-target'),
-            ).toEqual('avatar');
-        });
-
-        test('should correctly render collaborators with additional count when number of collaborators is greater than maxAddionalCollaboratorsNum + maxDisplayedAvatars', () => {
-            const maxDisplayedAvatars = 2;
-            const maxAdditionalCollaborators = 1;
-            const wrapper = getWrapper({ maxAdditionalCollaborators, maxDisplayedAvatars });
+            test('should correctly render collaborators with additional count when number of collaborators is greater than maxAdditionalCollaborators + maxDisplayedAvatars', () => {
+                const maxDisplayedAvatars = 2;
+                const maxAdditionalCollaborators = 1;
+                const wrapper = getWrapper({
+                    maxAdditionalCollaborators,
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
 
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('1+');
-        });
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('1+');
+            });
 
-        test('should correctly render collaborators with additional count when number of collaborators is less than maxAddionalCollaboratorsNum + maxDisplayedAvatars', () => {
-            const maxDisplayedAvatars = 2;
-            const maxAdditionalCollaborators = 10;
-            const wrapper = getWrapper({ maxAdditionalCollaborators, maxDisplayedAvatars });
+            test('should correctly render collaborators with additional count when number of collaborators is less than maxAdditionalCollaborators + maxDisplayedAvatars', () => {
+                const maxDisplayedAvatars = 2;
+                const maxAdditionalCollaborators = 10;
+                const wrapper = getWrapper({
+                    maxAdditionalCollaborators,
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
 
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('+3');
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('+3');
+            });
         });
     });
 });
diff --git a/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap b/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap
index d8b813fc81..2ff3a3deaf 100644
--- a/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap
+++ b/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap
@@ -17,7 +17,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={
@@ -141,7 +141,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={
@@ -265,7 +265,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={[]}
@@ -312,7 +312,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={
@@ -445,7 +445,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={