diff --git a/packages/playground/website/src/components/browser-chrome/index.tsx b/packages/playground/website/src/components/browser-chrome/index.tsx
index c156f42097..66e3814bde 100644
--- a/packages/playground/website/src/components/browser-chrome/index.tsx
+++ b/packages/playground/website/src/components/browser-chrome/index.tsx
@@ -10,7 +10,8 @@ import {
 	useAppDispatch,
 } from '../../lib/state/redux/store';
 import { SyncLocalFilesButton } from '../sync-local-files-button';
-import { Dropdown, Icon, Modal } from '@wordpress/components';
+import { Dropdown, Icon } from '@wordpress/components';
+import { Modal } from '../../components/modal';
 import { cog } from '@wordpress/icons';
 import Button from '../button';
 import { ActiveSiteSettingsForm } from '../site-manager/site-settings-form';
diff --git a/packages/playground/website/src/components/error-report-modal/index.tsx b/packages/playground/website/src/components/error-report-modal/index.tsx
index 186b6062c9..8be68dd90e 100644
--- a/packages/playground/website/src/components/error-report-modal/index.tsx
+++ b/packages/playground/website/src/components/error-report-modal/index.tsx
@@ -1,10 +1,6 @@
-import { useEffect, useState } from 'react';
-import Modal from '../modal';
+import React, { useEffect, useState } from 'react';
 import { logger } from '@php-wasm/logger';
-import { Button, TextareaControl, TextControl } from '@wordpress/components';
-
-import css from './style.module.css';
-
+import { TextareaControl, TextControl } from '@wordpress/components';
 import { Blueprint } from '@wp-playground/blueprints';
 import { useDispatch } from 'react-redux';
 import {
@@ -13,6 +9,8 @@ import {
 	useAppSelector,
 } from '../../lib/state/redux/store';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { Modal } from '../../components/modal';
+import ModalButtons from '../modal/modal-buttons';
 
 export function ErrorReportModal(props: { blueprint: Blueprint }) {
 	const activeModal = useAppSelector(
@@ -157,49 +155,32 @@ export function ErrorReportModal(props: { blueprint: Blueprint }) {
 	}
 
 	return (
-		<Modal isOpen={true} onRequestClose={onClose}>
-			<header
-				className={css.errorReportModalHeader}
-				aria-label="Error reporting form header"
-			>
-				<h2>{getTitle()}</h2>
-				<p>{getContent()}</p>
-			</header>
+		<Modal title={getTitle()} onRequestClose={onClose} small>
+			<p>{getContent()}</p>
 			{showForm() && (
 				<>
-					<main>
-						<TextareaControl
-							label="How can we recreate this error?"
-							help="Describe what caused the error and how can we recreate it."
-							value={text}
-							onChange={setText}
-							className={css.errorReportModalTextarea}
-							required={true}
-						/>
-						<TextareaControl
-							label="Logs"
-							value={logs}
-							onChange={setLogs}
-							className={css.errorReportModalTextarea}
-						/>
-
-						<TextControl
-							label="Url"
-							value={url}
-							onChange={setUrl}
-						/>
-					</main>
-					<footer className={css.errorReportModalFooter}>
-						<Button
-							variant="primary"
-							onClick={onSubmit}
-							isBusy={loading}
-							disabled={loading || !text}
-						>
-							Report error
-						</Button>
-						<Button onClick={onClose}>Cancel</Button>
-					</footer>
+					<TextareaControl
+						label="How can we recreate this error?"
+						help="Describe what caused the error and how can we recreate it."
+						value={text}
+						onChange={setText}
+						required={true}
+					/>
+					<TextareaControl
+						label="Logs"
+						value={logs}
+						onChange={setLogs}
+					/>
+
+					<TextControl label="Url" value={url} onChange={setUrl} />
+
+					<ModalButtons
+						areBusy={loading}
+						areDisabled={loading || !text}
+						onCancel={onClose}
+						onSubmit={onSubmit}
+						submitText="Report error"
+					/>
 				</>
 			)}
 		</Modal>
diff --git a/packages/playground/website/src/components/error-report-modal/style.module.css b/packages/playground/website/src/components/error-report-modal/style.module.css
deleted file mode 100644
index 45f82e7e16..0000000000
--- a/packages/playground/website/src/components/error-report-modal/style.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.error-report-modal__header h2 {
-	font-size: 20px;
-}
-
-.error-report-modal__header p {
-	font-size: 13px;
-}
-
-.error-report-modal__textarea textarea {
-	resize: vertical;
-	width: 100% !important;
-}
-
-.error-report-modal__footer {
-	margin-top: 20px;
-}
-.error-report-modal__error {
-	margin: 16px 0 0;
-}
diff --git a/packages/playground/website/src/components/import-form/modal.tsx b/packages/playground/website/src/components/import-form-modal/index.tsx
similarity index 87%
rename from packages/playground/website/src/components/import-form/modal.tsx
rename to packages/playground/website/src/components/import-form-modal/index.tsx
index 5861a60b98..2f786eb971 100644
--- a/packages/playground/website/src/components/import-form/modal.tsx
+++ b/packages/playground/website/src/components/import-form-modal/index.tsx
@@ -1,9 +1,10 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
-import ImportForm from './index';
-import Modal from '../modal';
+import ImportForm from '../import-form/index';
+import { Modal } from '../../components/modal';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { PlaygroundDispatch } from '../../lib/state/redux/store';
-import { useDispatch } from 'react-redux';
 
 export const ImportFormModal = () => {
 	const playground = usePlaygroundClient();
@@ -23,7 +24,7 @@ export const ImportFormModal = () => {
 
 	return (
 		<Modal
-			isOpen={!!playground}
+			title="Import Playground"
 			contentLabel='This is a dialog window which overlays the main content of the
 				page. The modal begins with a heading 2 called "Import
 				Playground". Pressing the Close Import Window will close
diff --git a/packages/playground/website/src/components/import-form/index.tsx b/packages/playground/website/src/components/import-form/index.tsx
index 9fcd90abe5..77dcecd88a 100644
--- a/packages/playground/website/src/components/import-form/index.tsx
+++ b/packages/playground/website/src/components/import-form/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { useRef, useState } from 'react';
 import { PlaygroundClient, importWordPressFiles } from '@wp-playground/client';
-
-import css from './style.module.css';
 import forms from '../../forms.module.css';
-import Button from '../button';
 import { logger } from '@php-wasm/logger';
+import ModalButtons from '../modal/modal-buttons';
 
 interface ImportFormProps {
 	playground: PlaygroundClient;
@@ -18,7 +16,6 @@ export default function ImportForm({
 	onImported,
 	onClose,
 }: ImportFormProps) {
-	const form = useRef<any>();
 	const fileInputRef = useRef<any>();
 	const [file, setFile] = useState<File | null>(null);
 	const [error, setError] = useState<string>('');
@@ -46,11 +43,8 @@ export default function ImportForm({
 	}
 
 	return (
-		<form id="import-playground-form" ref={form} onSubmit={handleSubmit}>
-			<h2 tabIndex={0} style={{ marginTop: 0, textAlign: 'center' }}>
-				Import Playground
-			</h2>
-			<p className={css.modalText}>
+		<>
+			<p>
 				You may replace the current WordPress Playground site with a
 				previously exported one.
 			</p>
@@ -64,17 +58,13 @@ export default function ImportForm({
 					accept="application/zip"
 				/>
 			</div>
-			<div className={forms.submitRow}>
-				<Button
-					id="import-submit--btn"
-					className={forms.btn}
-					disabled={!file}
-					variant="primary"
-					size="large"
-				>
-					Import
-				</Button>
-			</div>
-		</form>
+
+			<ModalButtons
+				areDisabled={!file}
+				onCancel={onClose}
+				onSubmit={handleSubmit}
+				submitText="Import"
+			/>
+		</>
 	);
 }
diff --git a/packages/playground/website/src/components/layout/index.tsx b/packages/playground/website/src/components/layout/index.tsx
index ee6906d1a5..25a6ee3211 100644
--- a/packages/playground/website/src/components/layout/index.tsx
+++ b/packages/playground/website/src/components/layout/index.tsx
@@ -32,7 +32,8 @@ import {
 	setActiveModal,
 	setSiteManagerOpen,
 } from '../../lib/state/redux/slice-ui';
-import { ImportFormModal } from '../import-form/modal';
+import { ImportFormModal } from '../import-form-modal';
+import { PreviewPRModal } from '../../github/preview-pr';
 
 acquireOAuthTokenIfNeeded();
 
@@ -42,7 +43,9 @@ export const modalSlugs = {
 	START_ERROR: 'start-error',
 	IMPORT_FORM: 'import-form',
 	GITHUB_IMPORT: 'github-import',
-	GITHUB_EXPORT: 'github-export'
+	GITHUB_EXPORT: 'github-export',
+	PREVIEW_PR_WP: 'preview-pr-wordpress',
+	PREVIEW_PR_GUTENBERG: 'preview-pr-gutenberg',
 }
 
 const displayMode = getDisplayModeFromQuery();
@@ -178,6 +181,10 @@ function Modals(blueprint: Blueprint) {
 		return <StartErrorModal />;
 	} else if (currentModal === modalSlugs.IMPORT_FORM) {
 		return <ImportFormModal />;
+	} else if (currentModal === modalSlugs.PREVIEW_PR_WP) {
+		return <PreviewPRModal target="wordpress" />;
+	} else if (currentModal === modalSlugs.PREVIEW_PR_GUTENBERG) {
+		return <PreviewPRModal target="gutenberg" />;
 	} else if (currentModal === modalSlugs.GITHUB_IMPORT) {
 		return <GithubImportModal
 			onImported={({
diff --git a/packages/playground/website/src/components/log-modal/index.tsx b/packages/playground/website/src/components/log-modal/index.tsx
index 263ee8fced..796f897941 100644
--- a/packages/playground/website/src/components/log-modal/index.tsx
+++ b/packages/playground/website/src/components/log-modal/index.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
-import Modal from '../modal';
 import { logEventType, logger } from '@php-wasm/logger';
 
 import classNames from 'classnames';
 import css from './style.module.css';
-
+import { Modal } from '../modal';
 import { TextControl } from '@wordpress/components';
 import {
 	PlaygroundDispatch,
@@ -23,16 +22,9 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) {
 		dispatch(setActiveModal(null));
 	}
 
-	const styles = {
-		content: { width: 800 },
-	};
-
 	return (
-		<Modal isOpen={true} onRequestClose={onClose} styles={styles}>
-			<header aria-label="Error logs list header">
-				<h2>{props.title || 'Error Logs'}</h2>
-				{props.description}
-			</header>
+		<Modal title={props.title || 'Error Logs'} onRequestClose={onClose}>
+			<div>{props.description}</div>
 			<SiteLogs key={activeModal} className={css.logsInsideModal} />
 		</Modal>
 	);
@@ -91,7 +83,7 @@ export function SiteLogs({ className }: { className?: string }) {
 						No matching logs found.
 					</div>
 				) : (
-					<div className={css.logEmptyPlaceholder}>
+					<div>
 						Error logs for Playground, WordPress, and PHP will show
 						up here when something goes wrong.
 						<br />
diff --git a/packages/playground/website/src/components/log-modal/style.module.css b/packages/playground/website/src/components/log-modal/style.module.css
index 6c78b1dbf3..34ca4513b6 100644
--- a/packages/playground/website/src/components/log-modal/style.module.css
+++ b/packages/playground/website/src/components/log-modal/style.module.css
@@ -25,16 +25,6 @@
 	flex-grow: 1;
 }
 
-.log__list {
-	padding-bottom: 20px;
-	flex-grow: 1;
-	max-height: 100%;
-}
-
-.log__empty_placeholder {
-	padding-bottom: 20px;
-}
-
 .log__entry {
 	font-family: monospace;
 	word-wrap: break-word;
diff --git a/packages/playground/website/src/components/modal/index.tsx b/packages/playground/website/src/components/modal/index.tsx
index 768aa6cf1d..44b56bfb9f 100644
--- a/packages/playground/website/src/components/modal/index.tsx
+++ b/packages/playground/website/src/components/modal/index.tsx
@@ -1,61 +1,24 @@
-import ReactModal from 'react-modal';
+import React from 'react';
+import { Modal as WordPressModal } from '@wordpress/components';
+import type { ModalProps as WordPressModalProps } from '@wordpress/components/build-types/modal/types';
+import classNames from 'classnames';
 import css from './style.module.css';
 
-ReactModal.setAppElement('#root');
-
-interface ModalProps extends ReactModal.Props {
-	styles?: ReactModal.Styles;
+interface ModalProps extends WordPressModalProps {
+	small?: boolean;
 }
-export const defaultStyles: ReactModal.Styles = {
-	content: {
-		top: '50%',
-		left: '50%',
-		right: 'auto',
-		bottom: 'auto',
-		marginRight: '-50%',
-		transform: 'translate(-50%, -50%)',
-		width: 400,
-		maxWidth: '100vw',
-		zIndex: 200,
-		textAlign: 'center',
-		color: '#000',
-		border: '#000 1px solid',
-		borderRadius: '6px',
-		background: '#fff',
-	},
-	overlay: {
-		background: '#1e2327d0',
-		zIndex: 10,
-	},
-};
-export default function Modal(props: ModalProps) {
-	const styles = {
-		overlay: { ...defaultStyles.overlay, ...props.styles?.overlay },
-		content: { ...defaultStyles.content, ...props.styles?.content },
-	};
+export function Modal({ small, className, children, ...rest }: ModalProps) {
+	const modalClass = classNames(
+		css.modal,
+		{
+			[css.modalSmall]: small,
+		},
+		className
+	);
+
 	return (
-		<ReactModal style={styles} {...props}>
-			<div className={css.modalInner} id="modal-content">
-				<button
-					id="import-close-modal--btn"
-					onClick={props.onRequestClose}
-					className={`${css.btn} ${css.btnClose}`}
-					aria-label="Close"
-					title="Close"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						width="32"
-						height="32"
-						aria-hidden="true"
-						focusable="false"
-					>
-						<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
-					</svg>
-				</button>
-				{props.children}
-			</div>
-		</ReactModal>
+		<WordPressModal className={modalClass} {...rest}>
+			{children}
+		</WordPressModal>
 	);
 }
diff --git a/packages/playground/website/src/components/modal/modal-buttons.tsx b/packages/playground/website/src/components/modal/modal-buttons.tsx
new file mode 100644
index 0000000000..c9bbb0d9de
--- /dev/null
+++ b/packages/playground/website/src/components/modal/modal-buttons.tsx
@@ -0,0 +1,36 @@
+import { Button, Flex } from '@wordpress/components';
+import React from 'react';
+import css from './style.module.css';
+
+interface ModalButtonsProps {
+	submitText?: string;
+	areDisabled?: boolean;
+	areBusy?: boolean;
+	onCancel?: () => void;
+	onSubmit?: (e: any) => void;
+}
+export default function ModalButtons({ submitText = 'Submit', areDisabled = false, areBusy, onCancel, onSubmit }: ModalButtonsProps) {
+	return (
+		<Flex
+			justify="end"
+			className={css.modalButtons}
+		>
+			<Button
+				isBusy={areBusy}
+				disabled={areDisabled}
+				variant="link"
+				onClick={onCancel}
+			>
+				Cancel
+			</Button>
+			<Button
+				isBusy={areBusy}
+				disabled={areDisabled}
+				variant="primary"
+				onClick={onSubmit}
+			>
+				{submitText}
+			</Button>
+		</Flex>
+	)
+}
diff --git a/packages/playground/website/src/components/modal/style.module.css b/packages/playground/website/src/components/modal/style.module.css
index 23aa58deb3..ede172b58e 100644
--- a/packages/playground/website/src/components/modal/style.module.css
+++ b/packages/playground/website/src/components/modal/style.module.css
@@ -1,23 +1,17 @@
-.btn {
-	cursor: pointer;
-	background: none;
-	border: none;
-}
+.modal {
+	max-width: 600px;
 
-.btn:hover,
-.btn:active {
-	opacity: 0.8;
+	textarea {
+		resize: vertical;
+		width: 100% !important;
+		min-height: 3lh;
+	}
 }
 
-.btn-close {
-	position: absolute;
-	top: -8px;
-	right: -13px;
+.modal-small {
+	max-width: 350px;
 }
 
-.modal-inner {
-	position: relative;
-	padding: 15px;
-	text-align: left;
-	max-height: 90vh;
+.modal-buttons {
+	margin-top: 1.5rem;
 }
diff --git a/packages/playground/website/src/components/site-manager/blueprints-panel/index.tsx b/packages/playground/website/src/components/site-manager/blueprints-panel/index.tsx
index cea9ae6f27..231668de32 100644
--- a/packages/playground/website/src/components/site-manager/blueprints-panel/index.tsx
+++ b/packages/playground/website/src/components/site-manager/blueprints-panel/index.tsx
@@ -211,7 +211,8 @@ export function BlueprintsPanel({
 					</FlexItem>
 				) : isError ? (
 					<FlexItem
-						style={{ alignSelf: 'stretch', overflowY: 'scroll' }}
+						className={css.paddedH}
+						style={{ alignSelf: 'stretch' }}
 					>
 						<p>
 							Could not load the Blueprints from the gallery. Try
@@ -219,9 +220,7 @@ export function BlueprintsPanel({
 						</p>
 					</FlexItem>
 				) : (
-					<FlexItem
-						style={{ alignSelf: 'stretch' }}
-					>
+					<FlexItem style={{ alignSelf: 'stretch' }}>
 						<DataViews<BlueprintsIndexEntry>
 							data={indexEntries as BlueprintsIndexEntry[]}
 							view={view}
diff --git a/packages/playground/website/src/components/site-manager/sidebar/index.tsx b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
index 34521309fe..bcf13b953a 100644
--- a/packages/playground/website/src/components/site-manager/sidebar/index.tsx
+++ b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
@@ -11,8 +11,9 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	Flex,
+	DropdownMenu,
 } from '@wordpress/components';
-import { page } from '@wordpress/icons';
+import { moreVertical, page } from '@wordpress/icons';
 import { ClockIcon, WordPressIcon } from '@wp-playground/components';
 import {
 	setActiveSite,
@@ -27,6 +28,10 @@ import {
 } from '../../../lib/state/redux/slice-sites';
 import { PlaygroundRoute, redirectTo } from '../../../lib/state/url/router';
 import { setSiteManagerSection } from '../../../lib/state/redux/slice-ui';
+import { WordPressPRMenuItem } from '../../toolbar-buttons/wordpress-pr-menu-item';
+import { GutenbergPRMenuItem } from '../../toolbar-buttons/gutenberg-pr-menu-item';
+import { RestoreFromZipMenuItem } from '../../toolbar-buttons/restore-from-zip';
+import { GithubImportMenuItem } from '../../toolbar-buttons/github-import-menu-item';
 
 export function Sidebar({
 	className,
@@ -35,6 +40,7 @@ export function Sidebar({
 	className?: string;
 	afterSiteClick?: (slug: string) => void;
 }) {
+	const offline = useAppSelector((state) => state.ui.offline);
 	const storedSites = useAppSelector(selectSortedSites).filter(
 		(site) => site.metadata.storage !== 'none'
 	);
@@ -86,11 +92,50 @@ export function Sidebar({
 			role=""
 			aria-orientation={undefined}
 		>
-			<h1 className="sr-only">WordPress Playground</h1>
-			<div className={css.sidebarHeader}>
-				{/* Remove Playground logo because branding isn't finalized. */}
-				{/* <Logo className={css.sidebarLogoButton} /> */}
-			</div>
+			{/* Padding 3px is because of focus on dropdown button */}
+			<Flex justify="space-between" direction="row" style={{ padding: '3px'}}>
+				<h1 className="sr-only">WordPress Playground</h1>
+				<div className={css.sidebarHeader}>
+					{/* Remove Playground logo because branding isn't finalized. */}
+					{/* <Logo className={css.sidebarLogoButton} /> */}
+				</div>
+				<DropdownMenu
+					className={css.componentsDropdown}
+					icon={moreVertical}
+					label="Import actions"
+					popoverProps={{
+						placement: 'bottom-end',
+					}}
+				>
+					{({ onClose }) => (
+						<>
+							<WordPressPRMenuItem
+								onClose={onClose}
+								disabled={
+									offline
+								}
+							/>
+							<GutenbergPRMenuItem
+								onClose={onClose}
+								disabled={
+									offline
+								}
+							/>
+							<GithubImportMenuItem
+								onClose={onClose}
+								disabled={
+									offline
+								}
+							/>
+							<RestoreFromZipMenuItem
+								text="Import from .zip"
+								onClose={onClose}
+								disabled={false}
+							/>
+						</>
+					)}
+				</DropdownMenu>
+			</Flex>
 			<nav className={classNames(css.sidebarSection, css.sidebarContent)}>
 				<MenuGroup className={css.sidebarList}>
 					<MenuItem
diff --git a/packages/playground/website/src/components/site-manager/sidebar/style.module.css b/packages/playground/website/src/components/site-manager/sidebar/style.module.css
index bd38b89b96..72853fc8ed 100644
--- a/packages/playground/website/src/components/site-manager/sidebar/style.module.css
+++ b/packages/playground/website/src/components/site-manager/sidebar/style.module.css
@@ -105,3 +105,9 @@
 	font-weight: 400;
 	vertical-align: middle;
 }
+
+.components-dropdown {
+	button {
+		color: white;
+	}
+}
diff --git a/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx b/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
index be18149510..c50dbf38c9 100644
--- a/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
@@ -18,9 +18,7 @@ import { usePlaygroundClientInfo } from '../../../lib/use-playground-client';
 import { OfflineNotice } from '../../offline-notice';
 import { DownloadAsZipMenuItem } from '../../toolbar-buttons/download-as-zip';
 import { GithubExportMenuItem } from '../../toolbar-buttons/github-export-menu-item';
-import { GithubImportMenuItem } from '../../toolbar-buttons/github-import-menu-item';
 import { ReportError } from '../../toolbar-buttons/report-error';
-import { RestoreFromZipMenuItem } from '../../toolbar-buttons/restore-from-zip';
 import { TemporarySiteNotice } from '../temporary-site-notice';
 import { SiteInfo } from '../../../lib/state/redux/slice-sites';
 import {
@@ -238,26 +236,18 @@ export function SiteInfoPanel({
 											</MenuGroup>
 										)}
 										<MenuGroup>
-											<DownloadAsZipMenuItem
-												onClose={onClose}
-												disabled={!playground}
-											/>
-											<RestoreFromZipMenuItem
-												onClose={onClose}
-												disabled={!playground}
-											/>
-											<GithubImportMenuItem
+											<GithubExportMenuItem
 												onClose={onClose}
 												disabled={
 													offline || !playground
 												}
 											/>
-											<GithubExportMenuItem
+											<DownloadAsZipMenuItem
 												onClose={onClose}
-												disabled={
-													offline || !playground
-												}
+												disabled={!playground}
 											/>
+										</MenuGroup>
+										<MenuGroup>
 											<MenuItem
 												// @ts-ignore
 												href={`/builder/builder.html#${encodeStringAsBase64(
diff --git a/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
index d2b7ee1687..e63089a639 100644
--- a/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
@@ -19,7 +19,7 @@ export function GithubExportMenuItem({ onClose, disabled }: Props) {
 				onClose();
 			}}
 		>
-			Export Pull Request to GitHub
+			Export to GitHub
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/gutenberg-pr-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/gutenberg-pr-menu-item.tsx
new file mode 100644
index 0000000000..25c0e9aeee
--- /dev/null
+++ b/packages/playground/website/src/components/toolbar-buttons/gutenberg-pr-menu-item.tsx
@@ -0,0 +1,25 @@
+import { MenuItem } from '@wordpress/components';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
+import { modalSlugs } from '../layout';
+
+interface Props {
+	onClose: () => void;
+	disabled?: boolean;
+}
+export function GutenbergPRMenuItem({ onClose, disabled }: Props) {
+	const dispatch: PlaygroundDispatch = useDispatch();
+	return (
+		<MenuItem
+			aria-label="Preview Gutenberg PR."
+			disabled={disabled}
+			onClick={() => {
+				dispatch(setActiveModal(modalSlugs.PREVIEW_PR_GUTENBERG));
+				onClose();
+			}}
+		>
+			Preview a Gutenberg PR
+		</MenuItem>
+	);
+}
diff --git a/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx b/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
index 236ac3a6d6..48f5bb0282 100644
--- a/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
@@ -4,8 +4,8 @@ import { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { modalSlugs } from '../layout';
 
-type Props = { onClose: () => void; disabled: boolean };
-export function RestoreFromZipMenuItem({ onClose, disabled }: Props) {
+type Props = { text?: string; onClose: () => void; disabled: boolean };
+export function RestoreFromZipMenuItem({ text = 'Restore from .zip', onClose, disabled }: Props) {
 	const dispatch: PlaygroundDispatch = useDispatch();
 
 	return (
@@ -20,7 +20,7 @@ export function RestoreFromZipMenuItem({ onClose, disabled }: Props) {
 			}}
 			disabled={disabled}
 		>
-			Restore from .zip
+			{ text }
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/wordpress-pr-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/wordpress-pr-menu-item.tsx
new file mode 100644
index 0000000000..b6e1cc55a5
--- /dev/null
+++ b/packages/playground/website/src/components/toolbar-buttons/wordpress-pr-menu-item.tsx
@@ -0,0 +1,25 @@
+import { MenuItem } from '@wordpress/components';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
+import { modalSlugs } from '../layout';
+
+interface Props {
+	onClose: () => void;
+	disabled?: boolean;
+}
+export function WordPressPRMenuItem({ onClose, disabled }: Props) {
+	const dispatch: PlaygroundDispatch = useDispatch();
+	return (
+		<MenuItem
+			aria-label="Preview WordPress PR."
+			disabled={disabled}
+			onClick={() => {
+				dispatch(setActiveModal(modalSlugs.PREVIEW_PR_WP));
+				onClose();
+			}}
+		>
+			Preview a WordPress PR
+		</MenuItem>
+	);
+}
diff --git a/packages/playground/website/src/github/github-export-form/form.tsx b/packages/playground/website/src/github/github-export-form/form.tsx
index f0619e1ccc..a7b4b207b6 100644
--- a/packages/playground/website/src/github/github-export-form/form.tsx
+++ b/packages/playground/website/src/github/github-export-form/form.tsx
@@ -430,7 +430,7 @@ export default function GitHubExportForm({
 	if (pushResult) {
 		return (
 			<form id="export-playground-form" onSubmit={handleSubmit}>
-				<h2 tabIndex={0} style={{ marginTop: 0, textAlign: 'center' }}>
+				<h2>
 					Pull Request{' '}
 					{formValues.prAction === 'create' ? 'created' : 'updated'}!
 				</h2>
@@ -446,15 +446,13 @@ export default function GitHubExportForm({
 					</a>
 				</p>
 
-				{pushResult.forked ? (
+				{pushResult.forked && (
 					<p>
 						Because of access restrictions set by your organization,
 						these changes could not be submitted directly to the
 						repository. Instead, they were submitted to your fork of
 						the repository.
 					</p>
-				) : (
-					false
 				)}
 
 				<div className={forms.submitRow}>
@@ -469,10 +467,7 @@ export default function GitHubExportForm({
 	return (
 		<GitHubOAuthGuard>
 			<form id="export-playground-form" onSubmit={handleSubmit}>
-				<h2 tabIndex={0} style={{ marginTop: 0, textAlign: 'center' }}>
-					Export to GitHub
-				</h2>
-				<p className={css.modalText}>
+				<p>
 					You may export WordPress plugins, themes, and entire
 					wp-content directories as pull requests to any public GitHub
 					repository.
diff --git a/packages/playground/website/src/github/github-export-form/modal.tsx b/packages/playground/website/src/github/github-export-form/modal.tsx
index b10cdd5196..a1bac09092 100644
--- a/packages/playground/website/src/github/github-export-form/modal.tsx
+++ b/packages/playground/website/src/github/github-export-form/modal.tsx
@@ -1,10 +1,9 @@
-import Modal, { defaultStyles } from '../../components/modal';
 import GitHubExportForm, { GitHubExportFormProps } from './form';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
 import { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
-import { useEffect } from 'react';
+import { Modal } from '../../components/modal';
 
 interface GithubExportModalProps {
 	allowZipExport: GitHubExportFormProps['allowZipExport'];
@@ -21,25 +20,12 @@ export function GithubExportModal({
 	const dispatch: PlaygroundDispatch = useDispatch();
 	const playground = usePlaygroundClient();
 
-	useEffect(() => {
-		const url = new URL(window.location.href);
-		url.searchParams.set('modal', 'github-export');
-		window.history.replaceState({}, '', url.href);
-	}, []);
-
 	const closeModal = () => {
 		dispatch(setActiveModal(null));
-	}
+	};
 
 	return (
-		<Modal
-			style={{
-				...defaultStyles,
-				content: { ...defaultStyles.content, width: 600 },
-			}}
-			isOpen
-			onRequestClose={closeModal}
-		>
+		<Modal title="Export to GitHub" onRequestClose={closeModal}>
 			<GitHubExportForm
 				onClose={closeModal}
 				onExported={onExported}
diff --git a/packages/playground/website/src/github/github-import-form/form.tsx b/packages/playground/website/src/github/github-import-form/form.tsx
index 1d4cbd28e4..b09b94b60d 100644
--- a/packages/playground/website/src/github/github-import-form/form.tsx
+++ b/packages/playground/website/src/github/github-import-form/form.tsx
@@ -176,10 +176,7 @@ export default function GitHubImportForm({
 	return (
 		<GitHubOAuthGuard>
 			<form id="import-playground-form" onSubmit={handleSubmit}>
-				<h2 tabIndex={0} style={{ marginTop: 0, textAlign: 'center' }}>
-					Import from GitHub
-				</h2>
-				<p className={css.modalText}>
+				<p>
 					You may import WordPress plugins, themes, and entire
 					wp-content directories from any public GitHub repository.
 				</p>
diff --git a/packages/playground/website/src/github/github-import-form/modal.tsx b/packages/playground/website/src/github/github-import-form/modal.tsx
index b7a37fb0e0..80a1c8ef9c 100644
--- a/packages/playground/website/src/github/github-import-form/modal.tsx
+++ b/packages/playground/website/src/github/github-import-form/modal.tsx
@@ -1,37 +1,26 @@
-import Modal, { defaultStyles } from '../../components/modal';
 import GitHubImportForm, { GitHubImportFormProps } from './form';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
-import { useEffect } from 'react';
+import { Modal } from '../../components/modal';
 
 interface GithubImportModalProps {
 	defaultOpen?: boolean;
 	onImported?: GitHubImportFormProps['onImported'];
 }
-export function GithubImportModal({ defaultOpen, onImported }: GithubImportModalProps) {
+export function GithubImportModal({
+	defaultOpen,
+	onImported,
+}: GithubImportModalProps) {
 	const dispatch: PlaygroundDispatch = useDispatch();
 	const playground = usePlaygroundClient();
 
-	useEffect(() => {
-		const url = new URL(window.location.href);
-		url.searchParams.set('modal', 'github-import');
-		window.history.replaceState({}, '', url.href);
-	}, []);
-	
 	const closeModal = () => {
 		dispatch(setActiveModal(null));
-	}
+	};
 	return (
-		<Modal
-			style={{
-				...defaultStyles,
-				content: { ...defaultStyles.content, width: 600 },
-			}}
-			isOpen
-			onRequestClose={closeModal}
-		>
+		<Modal title="Import from GitHub" onRequestClose={closeModal}>
 			<GitHubImportForm
 				playground={playground!}
 				onClose={closeModal}
diff --git a/packages/playground/website/src/github/github-import-form/style.module.css b/packages/playground/website/src/github/github-import-form/style.module.css
index 873308fb95..0243bb61ef 100644
--- a/packages/playground/website/src/github/github-import-form/style.module.css
+++ b/packages/playground/website/src/github/github-import-form/style.module.css
@@ -2,11 +2,6 @@
 	display: none;
 }
 
-.modal-text,
-.modal-text-list {
-	text-align: left;
-}
-
 .modal-text-list {
 	padding-left: 15px;
 }
diff --git a/packages/playground/website/src/github/github-oauth-guard/index.tsx b/packages/playground/website/src/github/github-oauth-guard/index.tsx
index f5262b43a8..d409d8f84e 100644
--- a/packages/playground/website/src/github/github-oauth-guard/index.tsx
+++ b/packages/playground/website/src/github/github-oauth-guard/index.tsx
@@ -3,9 +3,9 @@ import { oAuthState } from '../state';
 import { GitHubIcon } from '../github';
 import css from './style.module.css';
 import { useState } from 'react';
-import Modal, { defaultStyles } from '../../components/modal';
 import classNames from 'classnames';
 import { useActiveSite } from '../../lib/state/redux/store';
+import { Modal } from '../../components/modal';
 
 const OAUTH_FLOW_URL = 'oauth.php?redirect=1';
 const urlParams = new URLSearchParams(window.location.search);
@@ -18,13 +18,13 @@ export function GitHubOAuthGuardModal({ children }: GitHubOAuthGuardProps) {
 		return null;
 	}
 
+	if (!isModalOpen) {
+		return null;
+	}
+
 	return (
 		<Modal
-			style={{
-				...defaultStyles,
-				content: { ...defaultStyles.content, width: 600 },
-			}}
-			isOpen={isModalOpen}
+			title="Connect to GitHub"
 			onRequestClose={() => {
 				setIsModalOpen(false);
 			}}
@@ -88,9 +88,6 @@ function Authenticate({
 	});
 	return (
 		<div>
-			<h2 tabIndex={0} style={{ marginTop: 0, textAlign: 'center' }}>
-				Connect to GitHub
-			</h2>
 			<p>
 				Importing plugins, themes, and wp-content directories directly
 				from your public GitHub repositories.
diff --git a/packages/playground/website/src/github/preview-pr/form.tsx b/packages/playground/website/src/github/preview-pr/form.tsx
new file mode 100644
index 0000000000..4690e7cd63
--- /dev/null
+++ b/packages/playground/website/src/github/preview-pr/form.tsx
@@ -0,0 +1,243 @@
+import React, { useEffect } from 'react';
+import { useState } from 'react';
+import { Spinner, TextControl } from '@wordpress/components';
+import css from './style.module.css';
+import { logger } from '@php-wasm/logger';
+import ModalButtons from '../../components/modal/modal-buttons';
+import type { Blueprint } from '@wp-playground/blueprints';
+
+interface PreviewPRFormProps {
+	onImported: () => void;
+	onClose: () => void;
+	target: 'wordpress' | 'gutenberg';
+}
+
+const urlParams = new URLSearchParams(window.location.search);
+
+export const targetParams = {
+	wordpress: {
+		repo: 'wordpress-develop',
+		workflow: 'Test%20Build%20Processes',
+		artifact: 'wordpress-build-',
+	},
+	gutenberg: {
+		repo: 'gutenberg',
+		workflow: 'Build%20Gutenberg%20Plugin%20Zip',
+		artifact: 'gutenberg-plugin',
+	},
+};
+
+export default function PreviewPRForm({
+	onImported,
+	onClose,
+	target = 'wordpress',
+}: PreviewPRFormProps) {
+	const [value, setValue] = useState<string>('');
+	const [submitting, setSubmitting] = useState<boolean>(false);
+	const [errorMsg, setError] = useState<string>('');
+
+	useEffect(() => {
+		const query = new URLSearchParams(window.location.search);
+		if (query.has('core-pr')) {
+			const prNumber = query.get('core-pr');
+			prNumber && setValue(prNumber);
+		}
+	}, []);
+
+	async function handleSubmit(e: React.MouseEvent<HTMLButtonElement>) {
+		e.preventDefault();
+
+		if (!value) {
+			return;
+		}
+
+		await previewPr(value);
+	}
+
+	function renderRetryIn(retryIn: number) {
+		setError(
+			`Waiting for GitHub to finish building PR ${value}. This might take 15 minutes or more! Retrying in ${
+				retryIn / 1000
+			}...`
+		);
+	}
+
+	async function previewPr(prValue: string) {
+		let cleanupRetry = () => {};
+		if (cleanupRetry) {
+			cleanupRetry();
+		}
+
+		let prNumber: string = prValue;
+		setSubmitting(true);
+
+		// Extract number from a GitHub URL
+		if (
+			prNumber
+				.toLowerCase()
+				.includes('github.com/wordpress/wordpress-develop/pull') ||
+			prNumber
+				.toLowerCase()
+				.includes('github.com/wordpress/gutenberg/pull')
+		) {
+			prNumber = prNumber.match(/\/pull\/(\d+)/)![1];
+		}
+
+		// Verify that the PR exists and that GitHub CI finished building it
+		const zipArtifactUrl = `https://playground.wordpress.net/plugin-proxy.php?org=WordPress&repo=${
+			targetParams[target].repo
+		}&workflow=${targetParams[target].workflow}&artifact=${
+			targetParams[target].artifact
+		}${target === 'wordpress' ? prNumber : ''}&pr=${prNumber}`;
+		// Send the HEAD request to zipArtifactUrl to confirm the PR and the artifact both exist
+		const response = await fetch(zipArtifactUrl + '&verify_only=true');
+		if (response.status !== 200) {
+			let error = 'invalid_pr_number';
+			try {
+				const json = await response.json();
+				if (json.error) {
+					error = json.error;
+				}
+			} catch (e) {
+				logger.error(e);
+				setError('An unexpected error occurred. Please try again.');
+				return;
+			}
+
+			if (error === 'invalid_pr_number') {
+				setError(`The PR ${prNumber} does not exist.`);
+			} else if (
+				error === 'artifact_not_found' ||
+				error === 'artifact_not_available'
+			) {
+				if (parseInt(prNumber) < 5749) {
+					setError(
+						`The PR ${prNumber} predates the Pull Request previewer and requires a rebase before it can be previewed.`
+					);
+				} else {
+					let retryIn = 30000;
+					renderRetryIn(retryIn);
+					const timerInterval = setInterval(() => {
+						retryIn -= 1000;
+						if (retryIn <= 0) {
+							retryIn = 0;
+						}
+						renderRetryIn(retryIn);
+					}, 1000);
+					const scheduledRetry = setTimeout(() => {
+						previewPr(prNumber);
+					}, retryIn);
+					cleanupRetry = () => {
+						clearInterval(timerInterval);
+						clearTimeout(scheduledRetry);
+						cleanupRetry = () => {};
+					};
+				}
+			} else if (error === 'artifact_invalid') {
+				setError(
+					`The PR ${prNumber} requires a rebase before it can be previewed.`
+				);
+			} else {
+				setError(
+					`The PR ${prNumber} couldn't be previewed due to an unexpected error. Please try again later or fill an issue in the WordPress Playground repository.`
+				);
+				// https://github.com/WordPress/wordpress-playground/issues/new
+			}
+
+			setSubmitting(false);
+
+			return;
+		}
+
+		// Redirect to the Playground site with the Blueprint to download and apply the PR
+		const blueprint: Blueprint = {
+			landingPage: urlParams.get('url') || '/wp-admin',
+			login: true,
+			features: {
+				networking: true,
+			},
+			steps: [],
+		};
+		const encoded = JSON.stringify(blueprint);
+		let localhost = null;
+		const isLocalhost =
+			window.location.hostname === 'localhost' ||
+			window.location.hostname === '127.0.0.1';
+		if (isLocalhost) {
+			localhost = /website-server/;
+		}
+
+		if (target === 'wordpress') {
+			// [wordpress] Passthrough the mode query parameter if it exists
+			const targetParams = new URLSearchParams();
+			if (urlParams.has('mode')) {
+				targetParams.set('mode', urlParams.get('mode') as string);
+			}
+			targetParams.set('core-pr', prNumber);
+			window.location.href =
+				localhost +
+				'./?' +
+				targetParams.toString() +
+				'#' +
+				encodeURI(encoded);
+		} else if (target === 'gutenberg') {
+			// [gutenberg] If there's a import-site query parameter, pass that to the blueprint
+			const urlParams = new URLSearchParams(window.location.search);
+			try {
+				const importSite = new URL(
+					urlParams.get('import-site') as string
+				);
+				if (importSite) {
+					// Add it as the first step in the blueprint
+					blueprint.steps!.unshift({
+						step: 'importWordPressFiles',
+						wordPressFilesZip: {
+							resource: 'url',
+							url: importSite.origin + importSite.pathname,
+						},
+					});
+				}
+			} catch {
+				logger.error('Invalid import-site URL');
+			}
+
+			const encoded = JSON.stringify(blueprint);
+			window.location.href =
+				localhost +
+				'./?gutenberg-pr=' +
+				prNumber +
+				'#' +
+				encodeURI(encoded);
+
+			onImported();
+		}
+	}
+
+	return (
+		<div>
+			<div className={css.content}>
+				{submitting && (
+					<div className={css.overlay}>
+						<Spinner />
+					</div>
+				)}
+				<TextControl
+					disabled={submitting}
+					label="Pull request number or URL"
+					value={value}
+					onChange={(e) => {
+						setError('');
+						setValue(e);
+					}}
+				/>
+				{errorMsg && <div>{errorMsg}</div>}
+			</div>
+			<ModalButtons
+				areDisabled={submitting}
+				onCancel={onClose}
+				onSubmit={handleSubmit}
+				submitText="Preview"
+			/>
+		</div>
+	);
+}
diff --git a/packages/playground/website/src/github/preview-pr/index.tsx b/packages/playground/website/src/github/preview-pr/index.tsx
new file mode 100644
index 0000000000..133aa7420a
--- /dev/null
+++ b/packages/playground/website/src/github/preview-pr/index.tsx
@@ -0,0 +1 @@
+export * from './modal';
diff --git a/packages/playground/website/src/github/preview-pr/modal.tsx b/packages/playground/website/src/github/preview-pr/modal.tsx
new file mode 100644
index 0000000000..2f02ce0f26
--- /dev/null
+++ b/packages/playground/website/src/github/preview-pr/modal.tsx
@@ -0,0 +1,37 @@
+import { Modal } from '../../components/modal';
+import PreviewPRForm from './form';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
+
+interface PreviewPRModalProps {
+	target: 'wordpress' | 'gutenberg';
+}
+
+const targetName = {
+	wordpress: 'WordPress',
+	gutenberg: 'Gutenberg',
+};
+
+export function PreviewPRModal({ target }: PreviewPRModalProps) {
+	const dispatch: PlaygroundDispatch = useDispatch();
+	const closeModal = () => {
+		dispatch(setActiveModal(null));
+	};
+	function handleImported() {
+		closeModal();
+	}
+	return (
+		<Modal
+			small
+			title={`Preview a ${targetName[target]} PR`}
+			onRequestClose={closeModal}
+		>
+			<PreviewPRForm
+				onClose={closeModal}
+				onImported={handleImported}
+				target={target}
+			/>
+		</Modal>
+	);
+}
diff --git a/packages/playground/website/src/github/preview-pr/style.module.css b/packages/playground/website/src/github/preview-pr/style.module.css
new file mode 100644
index 0000000000..37587dd32a
--- /dev/null
+++ b/packages/playground/website/src/github/preview-pr/style.module.css
@@ -0,0 +1,27 @@
+.content {
+	position: relative;
+}
+
+.overlay {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(255, 255, 255, 0.75);
+	}
+
+	svg {
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		padding: 0;
+		margin: 0;
+	}
+}
diff --git a/packages/playground/website/src/lib/state/redux/slice-ui.ts b/packages/playground/website/src/lib/state/redux/slice-ui.ts
index c1f51eaded..93d78cfc67 100644
--- a/packages/playground/website/src/lib/state/redux/slice-ui.ts
+++ b/packages/playground/website/src/lib/state/redux/slice-ui.ts
@@ -64,11 +64,13 @@ const uiSlice = createSlice({
 			}
 		},
 		setActiveModal: (state, action: PayloadAction<string | null>) => {
+			const url = new URL(window.location.href);
 			if (action.payload === null) {
-				const url = new URL(window.location.href);
 				url.searchParams.delete('modal');
-				window.history.replaceState({}, '', url.href);
+			} else {
+				url.searchParams.set('modal', action.payload);
 			}
+			window.history.replaceState({}, '', url.href);
 
 			state.activeModal = action.payload;
 		},