diff --git a/packages/global-styles-ui/src/global-styles-ui.tsx b/packages/global-styles-ui/src/global-styles-ui.tsx
index 8d54553d23dda2..37a7069bb9f2c4 100644
--- a/packages/global-styles-ui/src/global-styles-ui.tsx
+++ b/packages/global-styles-ui/src/global-styles-ui.tsx
@@ -67,6 +67,11 @@ interface ContextScreensProps {
 	parentMenu?: string;
 }
 
+interface GlobalStylesNavigationScreenProps {
+	path: string;
+	children: React.ReactNode;
+}
+
 function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {
 	const blockStyleVariations = useSelect(
 		( select ) => {
@@ -81,9 +86,11 @@ function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {
 
 	return (
 		<>
-			<Navigator.Screen path={ parentMenu + '/colors/palette' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/palette' }
+			>
 				<ScreenColorPalette name={ name } />
-			</Navigator.Screen>
+			</GlobalStylesNavigationScreen>
 
 			{ !! blockStyleVariations?.length && (
 				<BlockStylesNavigationScreens
@@ -165,72 +172,72 @@ export function GlobalStylesUI( {
 							onPathChange={ onPathChange }
 						/>
 					) }
-					<Navigator.Screen path="/">
+					<GlobalStylesNavigationScreen path="/">
 						<ScreenRoot />
-					</Navigator.Screen>
-					<Navigator.Screen path="/colors">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/colors">
 						<ScreenColors />
-					</Navigator.Screen>
-					<Navigator.Screen path="/typography">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography">
 						<ScreenTypography />
-					</Navigator.Screen>
-					<Navigator.Screen path="/typography/font-sizes">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/font-sizes">
 						<FontSizes />
-					</Navigator.Screen>
-					<Navigator.Screen path="/typography/font-sizes/:origin/:slug">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/font-sizes/:origin/:slug">
 						<FontSize />
-					</Navigator.Screen>
-					<Navigator.Screen path="/layout">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/layout">
 						<ScreenLayout />
-					</Navigator.Screen>
-					<Navigator.Screen path="/colors/palette">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/colors/palette">
 						<ScreenColorPalette />
-					</Navigator.Screen>
-					<Navigator.Screen path="/variations">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/variations">
 						<ScreenStyleVariations />
-					</Navigator.Screen>
-					<Navigator.Screen path="/css">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/css">
 						<ScreenCSS />
-					</Navigator.Screen>
-					<Navigator.Screen path="/revisions/:revisionId?">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/revisions/:revisionId?">
 						<ScreenRevisions />
-					</Navigator.Screen>
-					<Navigator.Screen path="/shadows">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/shadows">
 						<ScreenShadows />
-					</Navigator.Screen>
-					<Navigator.Screen path="/shadows/edit/:category/:slug">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
 						<ScreenShadowsEdit />
-					</Navigator.Screen>
-					<Navigator.Screen path="/background">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/background">
 						<ScreenBackground />
-					</Navigator.Screen>
-					<Navigator.Screen path="/typography/text">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/text">
 						<ScreenTypographyElement element="text" />
-					</Navigator.Screen>
-					<Navigator.Screen path="/typography/link">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/link">
 						<ScreenTypographyElement element="link" />
-					</Navigator.Screen>
-					<Navigator.Screen path="/typography/heading">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/heading">
 						<ScreenTypographyElement element="heading" />
-					</Navigator.Screen>
-					<Navigator.Screen path="/typography/caption">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/caption">
 						<ScreenTypographyElement element="caption" />
-					</Navigator.Screen>
-					<Navigator.Screen path="/typography/button">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/typography/button">
 						<ScreenTypographyElement element="button" />
-					</Navigator.Screen>
-					<Navigator.Screen path="/blocks">
+					</GlobalStylesNavigationScreen>
+					<GlobalStylesNavigationScreen path="/blocks">
 						<ScreenBlockList />
-					</Navigator.Screen>
+					</GlobalStylesNavigationScreen>
 					{ blocks.map( ( block: BlockType ) => (
-						<Navigator.Screen
+						<GlobalStylesNavigationScreen
 							key={ 'menu-block-' + block.name }
 							path={
 								'/blocks/' + encodeURIComponent( block.name )
 							}
 						>
 							<ScreenBlock name={ block.name } />
-						</Navigator.Screen>
+						</GlobalStylesNavigationScreen>
 					) ) }
 
 					<ContextScreens />
@@ -250,6 +257,20 @@ export function GlobalStylesUI( {
 	);
 }
 
+function GlobalStylesNavigationScreen( {
+	path,
+	children,
+}: GlobalStylesNavigationScreenProps ) {
+	return (
+		<Navigator.Screen
+			className="global-styles-ui-sidebar__navigator-screen"
+			path={ path }
+		>
+			{ children }
+		</Navigator.Screen>
+	);
+}
+
 /*
  * Component that handles path synchronization between external path prop and Navigator's internal path.
  */
diff --git a/packages/global-styles-ui/src/screen-css.tsx b/packages/global-styles-ui/src/screen-css.tsx
index 6dbe6b97e0faf4..3e127dcd9ffaed 100644
--- a/packages/global-styles-ui/src/screen-css.tsx
+++ b/packages/global-styles-ui/src/screen-css.tsx
@@ -17,10 +17,6 @@ import { unlock } from './lock-unlock';
 const { AdvancedPanel: StylesAdvancedPanel } = unlock( blockEditorPrivateApis );
 
 function ScreenCSS() {
-	const description = __(
-		'Add your own CSS to customize the appearance and layout of your site.'
-	);
-
 	// Get user-only styles (should not decode/encode to preserve raw CSS)
 	const [ style ] = useStyle( '', undefined, 'user', false );
 	// Get all styles (inherited + user) for context
@@ -33,16 +29,26 @@ function ScreenCSS() {
 
 	return (
 		<>
-			<ScreenHeader title={ __( 'CSS' ) } description={ description } />
+			<ScreenHeader
+				title={ __( 'Additional CSS' ) }
+				description={
+					<>
+						{ __(
+							'You can add custom CSS to further customize the appearance and layout of your site.'
+						) }
+						<br />
+						<ExternalLink
+							href={ __(
+								'https://developer.wordpress.org/advanced-administration/wordpress/css/'
+							) }
+							className="global-styles-ui-screen-css-help-link"
+						>
+							{ __( 'Learn more about CSS' ) }
+						</ExternalLink>
+					</>
+				}
+			/>
 			<div className="global-styles-ui-screen-css">
-				<ExternalLink
-					href={ __(
-						'https://developer.wordpress.org/advanced-administration/wordpress/css/'
-					) }
-					className="global-styles-ui-screen-css-help-link"
-				>
-					{ __( 'Learn more about CSS' ) }
-				</ExternalLink>
 				<StylesAdvancedPanel
 					value={ style }
 					onChange={ setStyle }
diff --git a/packages/global-styles-ui/src/screen-root.tsx b/packages/global-styles-ui/src/screen-root.tsx
index 71ad700d80fc08..98a04f0fc6a5a9 100644
--- a/packages/global-styles-ui/src/screen-root.tsx
+++ b/packages/global-styles-ui/src/screen-root.tsx
@@ -16,7 +16,6 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -27,26 +26,10 @@ import RootMenu from './root-menu';
 import PreviewStyles from './preview-styles';
 
 function ScreenRoot() {
-	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
-		const {
-			__experimentalGetCurrentThemeGlobalStylesVariations,
-			__experimentalGetCurrentGlobalStylesId,
-			getEntityRecord,
-		} = select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			hasVariations:
-				!! __experimentalGetCurrentThemeGlobalStylesVariations()
-					?.length,
-			canEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[
-				'wp:action-edit-css'
-			],
-		};
+	const hasVariations = useSelect( ( select ) => {
+		const { __experimentalGetCurrentThemeGlobalStylesVariations } =
+			select( coreStore );
+		return !! __experimentalGetCurrentThemeGlobalStylesVariations()?.length;
 	}, [] );
 
 	return (
@@ -107,38 +90,6 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
-
-			{ canEditCSS && (
-				<>
-					<CardDivider />
-					<CardBody>
-						<Spacer
-							as="p"
-							paddingTop={ 2 }
-							paddingX="13px"
-							marginBottom={ 4 }
-						>
-							{ __(
-								'Add your own CSS to customize the appearance and layout of your site.'
-							) }
-						</Spacer>
-						<ItemGroup>
-							<NavigationButtonAsItem path="/css">
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Additional CSS' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					</CardBody>
-				</>
-			) }
 		</Card>
 	);
 }