diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
index 9af49321ce14c6..705e9d9580de8f 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -8,9 +8,9 @@ import {
 	FormFileUpload,
 	NavigableMenu,
 	MenuItem,
-	Toolbar,
+	ToolbarGroup,
 	Button,
-	Popover,
+	Dropdown,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -46,7 +46,6 @@ const MediaReplaceFlow = (
 	const [ showURLInput, setShowURLInput ] = useState( false );
 	const [ showEditURLInput, setShowEditURLInput ] = useState( false );
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
-	const [ showMediaReplaceOptions, setShowMediaReplaceOptions ] = useState( false );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getSettings().mediaUpload;
 	}, [] );
@@ -74,11 +73,11 @@ const MediaReplaceFlow = (
 		setShowEditURLInput( false );
 	};
 
-	const uploadFiles = ( event ) => {
+	const uploadFiles = ( event, closeDropdown ) => {
 		const files = event.target.files;
 		const setMedia = ( [ media ] ) => {
-			setShowMediaReplaceOptions( false );
 			selectMedia( media );
+			closeDropdown();
 		};
 		mediaUpload( {
 			allowedTypes,
@@ -88,12 +87,6 @@ const MediaReplaceFlow = (
 		} );
 	};
 
-	const onClose = () => {
-		editMediaButtonRef.current.focus();
-	};
-
-	const onClickOutside = () => ( setShowMediaReplaceOptions( false ) );
-
 	const openOnArrowDown = ( event ) => {
 		if ( event.keyCode === DOWN ) {
 			event.preventDefault();
@@ -123,7 +116,7 @@ const MediaReplaceFlow = (
 		urlInputUIContent = (
 			<LinkViewer
 				isFullWidth={ true }
-				className="block-editor-format-toolbar__link-container-content"
+				className="block-editor-media-replace-flow__link-viewer"
 				url={ mediaURLValue }
 				onEditLinkClick={ () => ( setShowEditURLInput( ! showEditURLInput ) ) }
 			/>
@@ -131,68 +124,68 @@ const MediaReplaceFlow = (
 	}
 
 	return (
-		<MediaUpload
-			onSelect={ ( media ) => selectMedia( media ) }
-			onClose={ () => setShowMediaReplaceOptions( true ) }
-			allowedTypes={ allowedTypes }
-			render={ ( { open } ) => (
-				<Toolbar className={ 'media-replace-flow components-dropdown-menu' }>
+		<Dropdown
+			contentClassName="block-editor-media-replace-flow__options"
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<ToolbarGroup className="media-replace-flow">
 					<Button
 						ref={ editMediaButtonRef }
-						className={ 'components-icon-button components-dropdown-menu__toggle' }
-						onClick={ () => {
-							setShowMediaReplaceOptions( ! showMediaReplaceOptions );
-						} }
+						aria-expanded={ isOpen }
+						onClick={ onToggle }
 						onKeyDown={ openOnArrowDown }
 					>
-						<span className="components-dropdown-menu__label" > { name } </span>
-						<span className="components-dropdown-menu__indicator" />
+						{ name }
+						<span className="block-editor-media-replace-flow__indicator" />
 					</Button>
-					{ showMediaReplaceOptions &&
-						<Popover
-							onClickOutside={ onClickOutside }
-							onClose={ onClose }
-							className={ 'media-replace-flow__options' }
-						>
-							<NavigableMenu>
+				</ToolbarGroup>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<NavigableMenu>
+						<MediaUpload
+							onSelect={ ( media ) => selectMedia( media ) }
+							allowedTypes={ allowedTypes }
+							render={ ( { open } ) => (
 								<MenuItem
 									icon="admin-media"
 									onClick={ open }
 								>
 									{ __( 'Open Media Library' ) }
 								</MenuItem>
-								<MediaUploadCheck>
-									<FormFileUpload
-										onChange={ uploadFiles }
-										accept={ accept }
-										render={ ( { openFileDialog } ) => {
-											return (
-												<MenuItem
-													icon="upload"
-													onClick={ () => {
-														openFileDialog();
-													} }
-												>
-													{ __( 'Upload' ) }
-												</MenuItem>
-											);
-										} }
-									/>
-								</MediaUploadCheck>
-								<MenuItem
-									icon="admin-links"
-									onClick={ () => ( setShowURLInput( ! showURLInput ) ) }
-									aria-expanded={ showURLInput }
-								>
-									<div> { __( 'Insert from URL' ) } </div>
-								</MenuItem>
-							</NavigableMenu>
-							{ showURLInput && <div className="block-editor-media-flow__url-input">
-								{ urlInputUIContent }
-							</div> }
-						</Popover>
-					}
-				</Toolbar>
+							) }
+						/>
+						<MediaUploadCheck>
+							<FormFileUpload
+								onChange={ ( event ) => {
+									uploadFiles( event, onClose );
+								} }
+								accept={ accept }
+								render={ ( { openFileDialog } ) => {
+									return (
+										<MenuItem
+											icon="upload"
+											onClick={ () => {
+												openFileDialog();
+											} }
+										>
+											{ __( 'Upload' ) }
+										</MenuItem>
+									);
+								} }
+							/>
+						</MediaUploadCheck>
+						<MenuItem
+							icon="admin-links"
+							onClick={ () => ( setShowURLInput( ! showURLInput ) ) }
+							aria-expanded={ showURLInput }
+						>
+							<div> { __( 'Insert from URL' ) } </div>
+						</MenuItem>
+					</NavigableMenu>
+					{ showURLInput && <div className="block-editor-media-flow__url-input">
+						{ urlInputUIContent }
+					</div> }
+				</>
 			) }
 		/>
 	);
diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
index 71fd3882c17aca..a996bec6996201 100644
--- a/packages/block-editor/src/components/media-replace-flow/style.scss
+++ b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -1,76 +1,37 @@
-.media-replace-flow .components-dropdown-menu__indicator {
+// Hack to hide when the media modal is open
+// Otherwise in Firefox the popover remains visible on top of the modal
+// Changing the z-index of Popovers have wider implications.
+.modal-open .block-editor-media-replace-flow__options {
+	display: none;
+}
+
+.block-editor-media-replace-flow__indicator {
 	margin-left: 4px;
 
-	.components-dropdown-menu.media-flow_toolbar {
-		.components-dropdown-menu__label {
-			margin-right: 6px;
-			margin-left: 2px;
-		}
+	&::after {
+		@include dropdown-arrow();
 	}
 }
 
-.media-replace-flow__options.components-popover:not(.is-mobile) {
+.block-editor-media-flow__url-input {
+	padding: 0 15px;
+	max-width: 255px;
+	padding-bottom: 10px;
 
-	.components-popover__content {
-		// this is a safari problem that shows scrollbars
-		// when display:flex and max-width are used together
-		overflow-x: hidden;
+	input {
+		max-width: 180px;
 	}
+}
 
-	.block-editor-media-flow__url-input {
-
-		padding: 0 15px 10px 25px;
-
-		.components-external-link__icon {
-			position: absolute;
-			right: -4px;
-			bottom: 5px;
-			margin-right: 2px;
-		}
-
-		input {
-			max-width: 169px;
-			border: 1px solid $dark-gray-500;
-			border-radius: 4px;
-		}
-
-		.block-editor-url-popover__link-viewer-url {
-			padding-right: 15px;
-			padding-top: 3px;
-			max-width: 179px;
-			position: relative;
-			margin-right: 0;
-		}
-
-		// Mimic toolbar component styles for the icons in this popover.
-		.components-icon-button {
-			padding: 5px;
-			width: 40px;
-			height: 40px;
-			padding-left: 0;
-
-			> svg {
-				padding: 5px;
-				border-radius: $radius-round-rectangle;
-				height: 30px;
-				width: 30px;
-			}
-
-			&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
-				box-shadow: none;
-
-				> svg {
-					@include formatting-button-style__hover;
-				}
-			}
-
-			&:not(:disabled):focus {
-				box-shadow: none;
-
-				> svg {
-					@include formatting-button-style__focus;
-				}
-			}
-		}
+.block-editor-media-replace-flow__link-viewer {
+	// Overflow is not working properly if we show the icon.
+	.components-external-link__icon {
+		display: none;
+	}
+	.components-visually-hidden {
+		position: initial;
+	}
+	.components-button {
+		flex-shrink: 0;
 	}
 }