diff --git a/packages/playground/website/src/components/layout/index.tsx b/packages/playground/website/src/components/layout/index.tsx
index 67770be2be..d20c076367 100644
--- a/packages/playground/website/src/components/layout/index.tsx
+++ b/packages/playground/website/src/components/layout/index.tsx
@@ -175,15 +175,17 @@ function Modals(blueprint: Blueprint) {
 			) : (
 				''
 			)}
+
 			<GithubImportModal
+				defaultOpen={(currentModal === 'github-import-modal')}
 				onImported={({
-					url,
-					path,
-					files,
-					pluginOrThemeName,
-					contentType,
-					urlInformation: { owner, repo, type, pr },
-				}) => {
+								 url,
+								 path,
+								 files,
+								 pluginOrThemeName,
+								 contentType,
+								 urlInformation: { owner, repo, type, pr },
+							 }) => {
 					setGithubExportValues({
 						repoUrl: url,
 						prNumber: pr?.toString(),
@@ -196,7 +198,9 @@ function Modals(blueprint: Blueprint) {
 					setGithubExportFiles(files);
 				}}
 			/>
+
 			<GithubExportModal
+				defaultOpen={(currentModal === 'github-export-modal')}
 				allowZipExport={
 					(query.get('ghexport-allow-include-zip') ?? 'yes') === 'yes'
 				}
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 47063006b6..098fcbfcba 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
@@ -1,17 +1,20 @@
 import { MenuItem } from '@wordpress/components';
-import { openModal } from '../../github/github-export-form/modal';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
 
 interface Props {
 	onClose: () => void;
 	disabled?: boolean;
 }
 export function GithubExportMenuItem({ onClose, disabled }: Props) {
+	const dispatch: PlaygroundDispatch = useDispatch();
 	return (
 		<MenuItem
 			aria-label="Export WordPress theme, plugin, or wp-content directory to a GitHub repository as a Pull Request."
 			disabled={disabled}
 			onClick={() => {
-				openModal();
+				dispatch(setActiveModal('github-export-modal'));
 				onClose();
 			}}
 		>
diff --git a/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx
index ddddcd485b..96b492a4ad 100644
--- a/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx
@@ -1,17 +1,20 @@
 import { MenuItem } from '@wordpress/components';
-import { openModal } from '../../github/github-import-form/modal';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
 
 interface Props {
 	onClose: () => void;
 	disabled?: boolean;
 }
 export function GithubImportMenuItem({ onClose, disabled }: Props) {
+	const dispatch: PlaygroundDispatch = useDispatch();
 	return (
 		<MenuItem
 			aria-label="Import WordPress theme, plugin, or wp-content directory from a GitHub repository."
 			disabled={disabled}
 			onClick={() => {
-				openModal();
+				dispatch(setActiveModal('github-import-modal'));
 				onClose();
 			}}
 		>
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 e85cb08e8e..f517bb6f85 100644
--- a/packages/playground/website/src/github/github-export-form/modal.tsx
+++ b/packages/playground/website/src/github/github-export-form/modal.tsx
@@ -3,6 +3,11 @@ import { signal } from '@preact/signals-react';
 import Modal, { defaultStyles } from '../../components/modal';
 import GitHubExportForm, { GitHubExportFormProps } from './form';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
+import { addURLState, removeURLState } from '../utils';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
+import { useEffect, useState } from 'react';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
 
 const query = new URLSearchParams(window.location.search);
 export const isGitHubExportModalOpen = signal(
@@ -10,6 +15,7 @@ export const isGitHubExportModalOpen = signal(
 );
 
 interface GithubExportModalProps {
+	defaultOpen?: boolean;
 	allowZipExport: GitHubExportFormProps['allowZipExport'];
 	onExported?: GitHubExportFormProps['onExported'];
 	initialFilesBeforeChanges?: GitHubExportFormProps['initialFilesBeforeChanges'];
@@ -18,36 +24,43 @@ interface GithubExportModalProps {
 export function closeModal() {
 	isGitHubExportModalOpen.value = false;
 	// Remove ?state=github-export from the URL.
-	const url = new URL(window.location.href);
-	url.searchParams.delete('state');
-	window.history.replaceState({}, '', url.href);
+	removeURLState();
 }
 export function openModal() {
 	isGitHubExportModalOpen.value = true;
 	// Add a ?state=github-export to the URL so that the user can refresh the page
 	// and still see the modal.
-	const url = new URL(window.location.href);
-	url.searchParams.set('state', 'github-export');
-	window.history.replaceState({}, '', url.href);
+	addURLState('github-export');
 }
 export function GithubExportModal({
+    defaultOpen,
 	onExported,
 	allowZipExport,
 	initialValues,
 	initialFilesBeforeChanges,
 }: GithubExportModalProps) {
+	const dispatch: PlaygroundDispatch = useDispatch();
 	const playground = usePlaygroundClient();
+	const [isOpen, toggleOpen] = useState(defaultOpen || isGitHubExportModalOpen.value);
+	useEffect(() => {
+		toggleOpen(defaultOpen || isGitHubExportModalOpen.value);
+	}, [defaultOpen, isGitHubExportModalOpen.value]);
+	const handleOnClose = () => {
+		toggleOpen(false);
+		closeModal();
+		dispatch(setActiveModal(null));
+	}
 	return (
 		<Modal
 			style={{
 				...defaultStyles,
 				content: { ...defaultStyles.content, width: 600 },
 			}}
-			isOpen={isGitHubExportModalOpen.value}
-			onRequestClose={closeModal}
+			isOpen={isOpen}
+			onRequestClose={handleOnClose}
 		>
 			<GitHubExportForm
-				onClose={closeModal}
+				onClose={handleOnClose}
 				onExported={onExported}
 				playground={playground!}
 				initialValues={initialValues}
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 6562695efb..a4eb2134a6 100644
--- a/packages/playground/website/src/github/github-import-form/modal.tsx
+++ b/packages/playground/website/src/github/github-import-form/modal.tsx
@@ -2,49 +2,61 @@ import { signal } from '@preact/signals-react';
 import Modal, { defaultStyles } from '../../components/modal';
 import GitHubImportForm, { GitHubImportFormProps } from './form';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
+import { addURLState, removeURLState } from '../utils';
+import { useEffect, useState } from 'react';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
 
 const query = new URLSearchParams(window.location.search);
 export const isGitHubModalOpen = signal(query.get('state') === 'github-import');
 
 interface GithubImportModalProps {
+	defaultOpen?: boolean;
 	onImported?: GitHubImportFormProps['onImported'];
 }
 export function closeModal() {
 	isGitHubModalOpen.value = false;
 	// Remove ?state=github-import from the URL.
-	const url = new URL(window.location.href);
-	url.searchParams.delete('state');
-	window.history.replaceState({}, '', url.href);
+	removeURLState();
 }
 export function openModal() {
 	isGitHubModalOpen.value = true;
 	// Add a ?state=github-import to the URL so that the user can refresh the page
 	// and still see the modal.
-	const url = new URL(window.location.href);
-	url.searchParams.set('state', 'github-import');
-	window.history.replaceState({}, '', url.href);
+	addURLState('github-import');
 }
-export function GithubImportModal({ onImported }: GithubImportModalProps) {
+export function GithubImportModal({ defaultOpen, onImported }: GithubImportModalProps) {
+	const dispatch: PlaygroundDispatch = useDispatch();
 	const playground = usePlaygroundClient();
+	const [isOpen, toggleOpen] = useState(defaultOpen || isGitHubModalOpen.value);
+	useEffect(() => {
+		toggleOpen(defaultOpen || isGitHubModalOpen.value);
+	}, [defaultOpen, isGitHubModalOpen.value]);
+	const handleOnClose = () => {
+		toggleOpen(false);
+		closeModal();
+		dispatch(setActiveModal(null));
+	}
 	return (
 		<Modal
 			style={{
 				...defaultStyles,
 				content: { ...defaultStyles.content, width: 600 },
 			}}
-			isOpen={isGitHubModalOpen.value}
-			onRequestClose={closeModal}
+			isOpen={isOpen}
+			onRequestClose={handleOnClose}
 		>
 			<GitHubImportForm
 				playground={playground!}
-				onClose={closeModal}
+				onClose={handleOnClose}
 				onImported={(details) => {
 					playground!.goTo('/');
 					// eslint-disable-next-line no-alert
 					alert(
 						'Import finished! Your Playground site has been updated.'
 					);
-					closeModal();
+					handleOnClose();
 					onImported?.(details);
 				}}
 			/>
diff --git a/packages/playground/website/src/github/utils.tsx b/packages/playground/website/src/github/utils.tsx
new file mode 100644
index 0000000000..ca765b5a62
--- /dev/null
+++ b/packages/playground/website/src/github/utils.tsx
@@ -0,0 +1,15 @@
+
+export function removeURLState() {
+	// Remove ?state=github-xxx from the URL.
+	const url = new URL(window.location.href);
+	url.searchParams.delete('state');
+	window.history.pushState({}, '', url.toString());
+}
+
+export function addURLState(name: string) {
+	// Add a ?state=github-xxx to the URL so that the user can refresh the page
+	// and still see the modal.
+	const url = new URL(window.location.href);
+	url.searchParams.set('state', name);
+	window.history.pushState({}, '', url.toString());
+}