diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index e6da4115217f57..a4908b0728ae15 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -12,23 +12,27 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-function ScreenHeader( { title, description, onBack } ) {
+function ScreenHeader( { title, description, onBack, showBack = true } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorToParentButton
-							style={
-								// TODO: This style override is also used in ToolsPanelHeader.
-								// It should be supported out-of-the-box by Button.
-								{ minWidth: 24, padding: 0 }
-							}
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							isSmall
-							aria-label={ __( 'Navigate to the previous view' ) }
-							onClick={ onBack }
-						/>
+						{ showBack && (
+							<NavigatorToParentButton
+								style={
+									// TODO: This style override is also used in ToolsPanelHeader.
+									// It should be supported out-of-the-box by Button.
+									{ minWidth: 24, padding: 0 }
+								}
+								icon={ isRTL() ? chevronRight : chevronLeft }
+								isSmall
+								aria-label={ __(
+									'Navigate to the previous view'
+								) }
+								onClick={ onBack }
+							/>
+						) }
 						<Spacer>
 							<Heading
 								className="edit-site-global-styles-header"
diff --git a/packages/edit-site/src/components/global-styles/index.js b/packages/edit-site/src/components/global-styles/index.js
index 5533852c1ac68b..929294734cfd43 100644
--- a/packages/edit-site/src/components/global-styles/index.js
+++ b/packages/edit-site/src/components/global-styles/index.js
@@ -1 +1,2 @@
 export { default as GlobalStylesUI } from './ui';
+export { GlobalStylesStyleBook } from './ui';
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index b4adcd64e41361..5830cc878568fa 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -157,13 +157,14 @@ function BlockList( { filterValue } ) {
 
 const MemoizedBlockList = memo( BlockList );
 
-function ScreenBlockList() {
+function ScreenBlockList( { showBack = true } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const deferredFilterValue = useDeferredValue( filterValue );
 
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				title={ __( 'Blocks' ) }
 				description={ __(
 					'Customize the appearance of specific blocks and for the whole site.'
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index a19bd16c8839f2..1c68ec346af69c 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -19,7 +19,7 @@ const {
 	ColorPanel: StylesColorPanel,
 } = unlock( blockEditorPrivateApis );
 
-function ScreenColors() {
+function ScreenColors( { showBack = true } ) {
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
@@ -32,6 +32,7 @@ function ScreenColors() {
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				title={ __( 'Colors' ) }
 				description={ __(
 					'Manage palettes and the default color of different global elements on the site.'
diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index 71d47a52a50274..9be5110ca87de9 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -15,7 +15,7 @@ const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
 	blockEditorPrivateApis
 );
 
-function ScreenCSS() {
+function ScreenCSS( { showBack = true } ) {
 	const description = __(
 		'Add your own CSS to customize the appearance and layout of your site.'
 	);
@@ -29,6 +29,7 @@ function ScreenCSS() {
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				title={ __( 'CSS' ) }
 				description={
 					<>
diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index e7794985b7984f..1e9b2c41e94fbd 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -14,13 +14,13 @@ import { unlock } from '../../lock-unlock';
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
 	unlock( blockEditorPrivateApis );
 
-function ScreenLayout() {
+function ScreenLayout( { showBack = true } ) {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Layout' ) } />
+			<ScreenHeader showBack={ showBack } title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index cabf50531a6aeb..bce349760717b4 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -13,7 +13,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import ScreenHeader from './header';
 import StyleVariationsContainer from './style-variations-container';
 
-function ScreenStyleVariations() {
+function ScreenStyleVariations( { showBack = true } ) {
 	const { mode } = useSelect( ( select ) => {
 		return {
 			mode: select( blockEditorStore ).__unstableGetEditorMode(),
@@ -50,6 +50,7 @@ function ScreenStyleVariations() {
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				back="/"
 				title={ __( 'Browse styles' ) }
 				description={ __(
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 2a895b68fa717f..5499c1a6c97f81 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -11,10 +11,11 @@ import TypographyElements from './typogrphy-elements';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
 
-function ScreenTypography() {
+function ScreenTypography( { showBack = true } ) {
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				title={ __( 'Typography' ) }
 				description={ __(
 					'Manage the typography settings for different elements.'
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 3abd1c811f11eb..5cbaa09bf2a4f8 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -256,32 +256,38 @@ function GlobalStylesEditorCanvasContainerLink() {
 	}, [ editorCanvasContainerView, goTo ] );
 }
 
-function GlobalStylesUI() {
+function GlobalStylesScreens( { initialPath, root = true } ) {
 	const blocks = getBlockTypes();
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
 		[]
 	);
+
+	const { goTo } = useNavigator();
+
+	useEffect( () => {
+		goTo( initialPath );
+	}, [ initialPath, goTo ] );
+
 	return (
-		<NavigatorProvider
-			className="edit-site-global-styles-sidebar__navigator-provider"
-			initialPath="/"
-		>
-			<GlobalStylesNavigationScreen path="/">
-				<ScreenRoot />
-			</GlobalStylesNavigationScreen>
+		<>
+			{ root && (
+				<GlobalStylesNavigationScreen path="/">
+					<ScreenRoot />
+				</GlobalStylesNavigationScreen>
+			) }
 
 			<GlobalStylesNavigationScreen path="/variations">
-				<ScreenStyleVariations />
+				<ScreenStyleVariations showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/blocks">
-				<ScreenBlockList />
+				<ScreenBlockList showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/typography">
-				<ScreenTypography />
+				<ScreenTypography showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/typography/text">
@@ -305,19 +311,19 @@ function GlobalStylesUI() {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/colors">
-				<ScreenColors />
+				<ScreenColors showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/layout">
-				<ScreenLayout />
+				<ScreenLayout showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/css">
-				<ScreenCSS />
+				<ScreenCSS showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ '/revisions' }>
-				<ScreenRevisions />
+				<ScreenRevisions showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
@@ -346,8 +352,19 @@ function GlobalStylesUI() {
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />
+		</>
+	);
+}
+
+function GlobalStylesUI( { initialPath = '/', root = true } ) {
+	return (
+		<NavigatorProvider
+			className="edit-site-global-styles-sidebar__navigator-provider"
+			initialPath={ initialPath }
+		>
+			<GlobalStylesScreens root={ root } initialPath={ initialPath } />
 		</NavigatorProvider>
 	);
 }
-export { GlobalStylesMenuSlot };
+export { GlobalStylesMenuSlot, GlobalStylesStyleBook };
 export default GlobalStylesUI;
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 53d3ed82a88bc2..d46059dd21ec69 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -172,6 +172,10 @@
 .edit-site-page-pages-preview,
 .edit-site-template-pages-preview {
 	height: 100%;
+	iframe {
+		width: 100%;
+		height: 100%;
+	}
 }
 
 .edit-site-layout__view-mode-toggle.components-button {
diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js
index 4a4a235c1922bd..22cd7fd267ad11 100644
--- a/packages/edit-site/src/components/page-main/index.js
+++ b/packages/edit-site/src/components/page-main/index.js
@@ -11,6 +11,7 @@ import DataviewsPatterns from '../page-patterns/dataviews-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
 import PagePages from '../page-pages';
+import PageStyles from '../page-styles';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -30,6 +31,9 @@ export default function PageMain() {
 		) : (
 			<PagePatterns />
 		);
+		return <PagePatterns />;
+	} else if ( path === '/wp_global_styles' ) {
+		return <PageStyles />;
 	} else if ( window?.__experimentalAdminViews && path === '/pages' ) {
 		return <PagePages />;
 	}
diff --git a/packages/edit-site/src/components/page-styles/index.js b/packages/edit-site/src/components/page-styles/index.js
new file mode 100644
index 00000000000000..027bf2c8e8843c
--- /dev/null
+++ b/packages/edit-site/src/components/page-styles/index.js
@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import { store as editSiteStore } from '../../store';
+import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import { unlock } from '../../lock-unlock';
+import GlobalStylesUI from '../global-styles/ui';
+import useEditedEntityRecord from '../use-edited-entity-record';
+import EditorCanvasContainer from '../editor-canvas-container';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
+
+const { useLocation } = unlock( routerPrivateApis );
+const { ExperimentalEditorProvider: EditorProvider } =
+	unlock( editorPrivateApis );
+
+export default function PageStyles() {
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { record: editedPost } = useEditedEntityRecord();
+	const editorSettings = useSpecificEditorSettings();
+	// Clear the editor canvas container view when accessing the main navigation screen.
+	useEffect( () => {
+		setEditorCanvasContainerView( 'style-book' );
+		return () => {
+			setEditorCanvasContainerView( undefined );
+		};
+	}, [ setEditorCanvasContainerView ] );
+	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
+	const {
+		params: { activeView },
+	} = useLocation();
+
+	return (
+		<>
+			<EditorProvider
+				post={ editedPost }
+				__unstableTemplate={ editedPost }
+				settings={ editorSettings }
+				useSubRegistry={ false }
+			>
+				<GlobalStylesRenderer />
+				{ activeView && (
+					<Page small>
+						<GlobalStylesUI
+							initialPath={ activeView }
+							root={ false }
+						/>
+					</Page>
+				) }
+				<Page>
+					<EditorCanvasContainer.Slot>
+						{ ( [ editorCanvasView ] ) =>
+							editorCanvasView && (
+								<div className="edit-site-visual-editor is-focus-mode">
+									{ editorCanvasView }
+								</div>
+							)
+						}
+					</EditorCanvasContainer.Slot>
+				</Page>
+			</EditorProvider>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/page-styles/style.scss b/packages/edit-site/src/components/page-styles/style.scss
new file mode 100644
index 00000000000000..fde960ca1a72ca
--- /dev/null
+++ b/packages/edit-site/src/components/page-styles/style.scss
@@ -0,0 +1,3 @@
+.edit-site-page-pages__featured-image {
+	border-radius: $radius-block-ui;
+}
diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
index 02d0bd2e746eec..d552f0ef5e167b 100644
--- a/packages/edit-site/src/components/page/index.js
+++ b/packages/edit-site/src/components/page/index.js
@@ -20,9 +20,12 @@ export default function Page( {
 	actions,
 	children,
 	className,
+	small = false,
 	hideTitleFromUI = false,
 } ) {
-	const classes = classnames( 'edit-site-page', className );
+	const classes = classnames( 'edit-site-page', className, {
+		small,
+	} );
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index fd69544bb6cd7f..f5bf9bbcfbf408 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -5,6 +5,9 @@
 	overflow: hidden;
 	margin: 0;
 	margin-top: $header-height;
+	&.small {
+		max-width: 280px;
+	}
 	@include break-medium() {
 		border-radius: 8px;
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index 9840098e338bd2..81da72bd0c4c1d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -2,29 +2,30 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit, seen } from '@wordpress/icons';
+import { typography, color, layout } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
-import { BlockEditorProvider } from '@wordpress/block-editor';
+import {
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
+import { useLink } from '../routes/link';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import StyleVariationsContainer from '../global-styles/style-variations-container';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
-const noop = () => {};
+const { useLocation } = unlock( routerPrivateApis );
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -60,13 +61,34 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 }
 
 function SidebarNavigationScreenGlobalStylesContent() {
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
+	const {
+		params: { path },
+	} = useLocation();
 
-		return {
-			storedSettings: getSettings(),
-		};
-	}, [] );
+	const variationsLink = useLink( {
+		path,
+		activeView: '/variations',
+	} );
+
+	const typographyLink = useLink( {
+		path,
+		activeView: '/typography',
+	} );
+
+	const colorsLink = useLink( {
+		path,
+		activeView: '/colors',
+	} );
+
+	const layoutLink = useLink( {
+		path,
+		activeView: '/layout',
+	} );
+
+	const blocksLink = useLink( {
+		path,
+		activeView: '/blocks',
+	} );
 
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
 	// loaded. This is necessary because the Iframe component waits until
@@ -74,13 +96,52 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	// rendering the iframe. Without this, the iframe previews will not render
 	// in mobile viewport sizes, where the editor canvas is hidden.
 	return (
-		<BlockEditorProvider
-			settings={ storedSettings }
-			onChange={ noop }
-			onInput={ noop }
-		>
-			<StyleVariationsContainer />
-		</BlockEditorProvider>
+		<>
+			<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
+				<Heading level={ 2 }>{ __( 'Active' ) }</Heading>
+			</div>
+			<ItemGroup>
+				<SidebarNavigationItem
+					{ ...variationsLink }
+					aria-current={ false ? 'true' : undefined }
+				>
+					Moonlight
+				</SidebarNavigationItem>
+			</ItemGroup>
+			<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
+				<Heading level={ 2 }>{ __( 'Customize' ) }</Heading>
+			</div>
+			<ItemGroup>
+				<SidebarNavigationItem
+					{ ...typographyLink }
+					icon={ typography }
+					aria-current={ false ? 'true' : undefined }
+				>
+					Typography
+				</SidebarNavigationItem>
+				<SidebarNavigationItem
+					{ ...colorsLink }
+					icon={ color }
+					aria-current={ false ? 'true' : undefined }
+				>
+					Colors
+				</SidebarNavigationItem>
+				<SidebarNavigationItem
+					{ ...layoutLink }
+					icon={ layout }
+					aria-current={ false ? 'true' : undefined }
+				>
+					Layout
+				</SidebarNavigationItem>
+				<SidebarNavigationItem
+					{ ...blocksLink }
+					icon={ layout }
+					aria-current={ false ? 'true' : undefined }
+				>
+					Blocks
+				</SidebarNavigationItem>
+			</ItemGroup>
+		</>
 	);
 }
 
@@ -88,33 +149,21 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setIsListViewOpened } = useDispatch( editorStore );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
-		( select ) => {
-			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
-				select( editSiteStore )
-			);
-			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore );
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
-			return {
-				isViewMode: 'view' === getCanvasMode(),
-				isStyleBookOpened:
-					'style-book' === getEditorCanvasContainerView(),
-				revisionsCount:
-					globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ??
-					0,
-			};
-		},
-		[]
-	);
+	const { revisionsCount } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+		return {
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
+		};
+	}, [] );
 
 	const openGlobalStyles = useCallback( async () => {
 		return Promise.all( [
@@ -123,19 +172,6 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		] );
 	}, [ setCanvasMode, openGeneralSidebar ] );
 
-	const openStyleBook = useCallback( async () => {
-		await openGlobalStyles();
-		// Open the Style Book once the canvas mode is set to edit,
-		// and the global styles sidebar is open. This ensures that
-		// the Style Book is not prematurely closed.
-		setEditorCanvasContainerView( 'style-book' );
-		setIsListViewOpened( false );
-	}, [
-		openGlobalStyles,
-		setEditorCanvasContainerView,
-		setIsListViewOpened,
-	] );
-
 	const openRevisions = useCallback( async () => {
 		await openGlobalStyles();
 		// Open the global styles revisions once the canvas mode is set to edit,
@@ -167,40 +203,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 						/>
 					)
 				}
-				actions={
-					<>
-						{ ! isMobileViewport && (
-							<SidebarButton
-								icon={ seen }
-								label={ __( 'Style Book' ) }
-								onClick={ () =>
-									setEditorCanvasContainerView(
-										! isStyleBookOpened
-											? 'style-book'
-											: undefined
-									)
-								}
-								isPressed={ isStyleBookOpened }
-							/>
-						) }
-						<SidebarButton
-							icon={ edit }
-							label={ __( 'Edit styles' ) }
-							onClick={ async () => await openGlobalStyles() }
-						/>
-					</>
-				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
-				<StyleBook
-					enableResizing={ false }
-					isSelected={ () => false }
-					onClick={ openStyleBook }
-					onSelect={ openStyleBook }
-					showCloseButton={ false }
-					showTabs={ false }
-				/>
-			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index d3e0cb3531ae99..6166f5e3be301c 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -284,7 +284,7 @@ function StyleBook( {
 	);
 }
 
-const StyleBookBody = ( {
+export const StyleBookBody = ( {
 	category,
 	examples,
 	isSelected,
diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
index 2ee661253cf063..b7e6c5b69f1fba 100644
--- a/packages/edit-site/src/utils/get-is-list-page.js
+++ b/packages/edit-site/src/utils/get-is-list-page.js
@@ -14,9 +14,12 @@ export default function getIsListPage(
 	isMobileViewport
 ) {
 	return (
-		[ '/wp_template/all', '/wp_template_part/all', '/pages' ].includes(
-			path
-		) ||
+		[
+			'/wp_template/all',
+			'/wp_template_part/all',
+			'/pages',
+			'/wp_global_styles',
+		].includes( path ) ||
 		( path === '/patterns' &&
 			// Don't treat "/patterns" without categoryType and categoryId as a
 			// list page in mobile because the sidebar covers the whole page.