diff --git a/src/elements/content-preview/ContentPreview.js b/src/elements/content-preview/ContentPreview.js
index 51d15e5109..9e6ade8101 100644
--- a/src/elements/content-preview/ContentPreview.js
+++ b/src/elements/content-preview/ContentPreview.js
@@ -144,6 +144,7 @@ type Props = {
     logoUrl?: string,
     measureRef: Function,
     messages?: StringMap,
+    comparedPanel?: React.Node,
     onAnnotator: Function,
     onAnnotatorEvent: Function,
     onBeforeNavigate?: (targetFileId: string) => boolean | Promise<boolean>,
@@ -1018,6 +1019,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
             enableBoundingBoxHighlights,
             features,
             fileOptions,
+            comparedPanel,
             onAnnotatorEvent,
             onAnnotator,
             onContentInsightsEventReport,
@@ -1375,6 +1377,10 @@ class ContentPreview extends React.PureComponent<Props, State> {
      * @return {void}
      */
     navigateLeft = () => {
+        if (this.props.comparedPanel !== undefined) {
+            return;
+        }
+
         const currentIndex = this.getFileIndex();
         const newIndex = currentIndex === 0 ? 0 : currentIndex - 1;
         if (newIndex !== currentIndex) {
@@ -1389,7 +1395,11 @@ class ContentPreview extends React.PureComponent<Props, State> {
      * @return {void}
      */
     navigateRight = () => {
-        const { collection }: Props = this.props;
+        const { collection, comparedPanel }: Props = this.props;
+        if (comparedPanel !== undefined) {
+            return;
+        }
+
         const currentIndex = this.getFileIndex();
         const newIndex = currentIndex === collection.length - 1 ? collection.length - 1 : currentIndex + 1;
         if (newIndex !== currentIndex) {
@@ -1465,7 +1475,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
      * @return {void}
      */
     onKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
-        const { useHotkeys, renderCustomPreview }: Props = this.props;
+        const { comparedPanel, useHotkeys, renderCustomPreview }: Props = this.props;
 
         // Skip ContentPreview hotkeys when custom content is provided to prevent conflicts.
         // Custom components must implement their own keyboard shortcuts (arrow navigation, etc)
@@ -1491,12 +1501,16 @@ class ContentPreview extends React.PureComponent<Props, State> {
         if (!consumed) {
             switch (key) {
                 case 'ArrowLeft':
-                    this.navigateLeft();
-                    consumed = true;
+                    if (comparedPanel === undefined) {
+                        this.navigateLeft();
+                        consumed = true;
+                    }
                     break;
                 case 'ArrowRight':
-                    this.navigateRight();
-                    consumed = true;
+                    if (comparedPanel === undefined) {
+                        this.navigateRight();
+                        consumed = true;
+                    }
                     break;
                 default:
                 // no-op
@@ -1671,6 +1685,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
             hasHeader,
             hasProviders,
             hideSidebar,
+            comparedPanel,
             history,
             isLarge,
             isVeryLarge,
@@ -1729,6 +1744,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         const currentVersionId = getProp(file, 'file_version.id');
         const selectedVersionId = getProp(selectedVersion, 'id', currentVersionId);
         const onHeaderClose = currentVersionId === selectedVersionId ? onClose : this.updateVersionToCurrent;
+        const isComparedPanelMode = comparedPanel !== undefined;
 
         /* eslint-disable jsx-a11y/no-static-element-interactions */
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
@@ -1761,7 +1777,12 @@ class ContentPreview extends React.PureComponent<Props, State> {
                                         selectedVersion={selectedVersion}
                                     />
                                 )}
-                                <div className="bcpr-body" ref={this.previewBodyRef}>
+                                <div
+                                    className={classNames('bcpr-body', {
+                                        'bcpr-body--with-compared-panel': isComparedPanelMode,
+                                    })}
+                                    ref={this.previewBodyRef}
+                                >
                                     <div
                                         className="bcpr-container"
                                         onMouseMove={this.onMouseMove}
@@ -1797,13 +1818,16 @@ class ContentPreview extends React.PureComponent<Props, State> {
                                             isLoading={isLoading}
                                             isLoadingDeferred={isLoadingDeferred}
                                         />
-                                        <PreviewNavigation
-                                            collection={collection}
-                                            currentIndex={this.getFileIndex()}
-                                            onNavigateLeft={this.navigateLeft}
-                                            onNavigateRight={this.navigateRight}
-                                        />
+                                        {!isComparedPanelMode && (
+                                            <PreviewNavigation
+                                                collection={collection}
+                                                currentIndex={this.getFileIndex()}
+                                                onNavigateLeft={this.navigateLeft}
+                                                onNavigateRight={this.navigateRight}
+                                            />
+                                        )}
                                     </div>
+                                    {comparedPanel}
                                     {file && !hideSidebar && (
                                         <LoadableSidebar
                                             {...mergedContentSidebarProps}
diff --git a/src/elements/content-preview/ContentPreview.scss b/src/elements/content-preview/ContentPreview.scss
index 65ec65ca78..f6799759c0 100644
--- a/src/elements/content-preview/ContentPreview.scss
+++ b/src/elements/content-preview/ContentPreview.scss
@@ -9,6 +9,12 @@
         display: flex;
         flex: 1;
         min-height: 0; // Required to prevent overflow of child flex elements
+
+        // When a compared panel is present, give the current viewer a 50% flex-basis and allow shrink
+        &--with-compared-panel .bcpr-container {
+            flex: 1 1 50%;
+            min-width: 0;
+        }
     }
 
     .bcpr-container {
@@ -36,7 +42,7 @@
         height: 64px;
         transform: translateY(-50%);
         opacity: 0;
-        transition: opacity .5s ease;
+        transition: opacity 0.5s ease;
 
         &:focus,
         &:hover {
@@ -50,7 +56,9 @@
 
     .bcpr-navigate-left {
         left: 0;
-        transition: opacity .5s ease, left .3s cubic-bezier(.4, 0, .2, 1);
+        transition:
+            opacity 0.5s ease,
+            left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .bcpr-nav-is-visible {
diff --git a/src/elements/content-preview/__tests__/ContentPreview.test.js b/src/elements/content-preview/__tests__/ContentPreview.test.js
index 16efe6d847..c19a96ab1c 100644
--- a/src/elements/content-preview/__tests__/ContentPreview.test.js
+++ b/src/elements/content-preview/__tests__/ContentPreview.test.js
@@ -2566,6 +2566,99 @@ describe('elements/content-preview/ContentPreview', () => {
         });
     });
 
+    describe('comparedPanel prop', () => {
+        const collection = ['123', '456', '789'];
+        const comparedPanel = <div className="compared-panel-content">compared pane</div>;
+
+        test('should render comparedPanel between the viewer and sidebar', () => {
+            const wrapper = getWrapper({
+                fileId: '123',
+                comparedPanel,
+            });
+            wrapper.setState({
+                currentFileId: '123',
+                file: { id: '123', name: 'test.pdf' },
+            });
+
+            const bodyDiv = wrapper.find('.bcpr-body');
+            expect(bodyDiv.hasClass('bcpr-body--with-compared-panel')).toBe(true);
+            expect(bodyDiv.children().length).toBe(3);
+            expect(bodyDiv.children().at(0).hasClass('bcpr-container')).toBe(true);
+            expect(bodyDiv.children().at(1).hasClass('compared-panel-content')).toBe(true);
+        });
+
+        test('should not add the compared-panel body class when comparedPanel is omitted', () => {
+            const wrapper = getWrapper({
+                fileId: '123',
+            });
+            wrapper.setState({
+                currentFileId: '123',
+                file: { id: '123', name: 'test.pdf' },
+            });
+
+            const bodyDiv = wrapper.find('.bcpr-body');
+            expect(bodyDiv.hasClass('bcpr-body--with-compared-panel')).toBe(false);
+            expect(bodyDiv.children().length).toBe(2);
+        });
+
+        test('should not render PreviewNavigation when comparedPanel is provided', () => {
+            const wrapper = getWrapper({
+                fileId: '456',
+                collection,
+                comparedPanel,
+            });
+            wrapper.setState({
+                currentFileId: '456',
+                file: { id: '456', name: 'test.pdf' },
+            });
+
+            expect(wrapper.find('PreviewNavigation').exists()).toBe(false);
+        });
+
+        test('should not render PreviewNavigation when comparedPanel is null', () => {
+            const wrapper = getWrapper({
+                fileId: '456',
+                collection,
+                comparedPanel: null,
+            });
+            wrapper.setState({
+                currentFileId: '456',
+                file: { id: '456', name: 'test.pdf' },
+            });
+
+            expect(wrapper.find('PreviewNavigation').exists()).toBe(false);
+        });
+
+        test('should render PreviewNavigation when comparedPanel is omitted', () => {
+            const wrapper = getWrapper({
+                fileId: '456',
+                collection,
+            });
+            wrapper.setState({
+                currentFileId: '456',
+                file: { id: '456', name: 'test.pdf' },
+            });
+
+            expect(wrapper.find('PreviewNavigation').exists()).toBe(true);
+        });
+
+        test('should not navigate when comparedPanel is provided', () => {
+            const wrapper = getWrapper({
+                fileId: '456',
+                collection,
+                comparedPanel,
+            });
+            wrapper.setState({ currentFileId: '456' });
+            const instance = wrapper.instance();
+            instance.navigateToIndex = jest.fn();
+
+            instance.navigateLeft();
+            instance.navigateRight();
+
+            expect(instance.navigateToIndex).not.toHaveBeenCalled();
+        });
+    });
+
     describe('npm preview load path (useNpmBoxContentPreview)', () => {
         const createPreviewModule = () => ({
             Preview: function Preview() {