diff --git a/packages/admin-ui/src/page/header.tsx b/packages/admin-ui/src/page/header.tsx
index c9289dc0fb4313..7b4d0dede0dc16 100644
--- a/packages/admin-ui/src/page/header.tsx
+++ b/packages/admin-ui/src/page/header.tsx
@@ -29,12 +29,8 @@ export default function Header( {
 } ) {
 	return (
 		<VStack className="admin-ui-page__header" as="header">
-			<HStack
-				className="admin-ui-page__header-title"
-				justify="space-between"
-				spacing={ 2 }
-			>
-				<HStack spacing={ 2 } justify="flex-start">
+			<HStack justify="space-between" spacing={ 2 }>
+				<HStack spacing={ 2 } justify="left">
 					{ showSidebarToggle && (
 						<SidebarToggleSlot
 							bubblesVirtually
diff --git a/packages/admin-ui/src/page/style.scss b/packages/admin-ui/src/page/style.scss
index 457f365f884089..91234ec5878692 100644
--- a/packages/admin-ui/src/page/style.scss
+++ b/packages/admin-ui/src/page/style.scss
@@ -11,23 +11,18 @@
 	position: relative;
 	z-index: 1;
 	flex-flow: column;
-	container: admin-ui-page / inline-size;
-
-	@media not (prefers-reduced-motion) {
-		transition: width ease-out 0.2s;
-	}
 }
 
 .admin-ui-page__header {
-	padding: $grid-unit-20 $grid-unit-60;
+	padding: $grid-unit-20 $grid-unit-30;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
 	top: 0;
+}
 
-	@container (max-width: 430px) {
-		padding: $grid-unit-20 $grid-unit-30;
-	}
+.admin-ui-page__sidebar-toggle-slot:empty {
+	display: none;
 }
 
 .admin-ui-page__header-subtitle {
@@ -44,10 +39,7 @@
 	flex-direction: column;
 
 	&.has-padding {
-		padding: $grid-unit-20 $grid-unit * 2.5;
-		@container (max-width: 430px) {
-			padding: $grid-unit-20 $grid-unit-30;
-		}
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }
 
@@ -71,4 +63,3 @@
 
 	}
 }
-
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 0606ea47a0f88a..b912e439ea293e 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -383,7 +383,7 @@ $block-inserter-tabs-height: 44px;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;
-		padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
+		padding: $grid-unit-30 $grid-unit-30 $grid-unit-30;
 		overflow-x: visible;
 		overflow-y: auto;
 
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index afe3d35dc5171a..c694f2a43627f3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   `Menu` and othr menu items: change default size to be 32px tall rather than 40px to improve menu density. ([#73429](https://github.com/WordPress/gutenberg/pull/73429)).
+-   Unify padding using for DataViews, Modals and other container components. ([#73334](https://github.com/WordPress/gutenberg/pull/73334))
 
 ### Bug Fixes
 
diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss
index 30a273d197e032..e6663de5dec83a 100644
--- a/packages/components/src/guide/style.scss
+++ b/packages/components/src/guide/style.scss
@@ -59,7 +59,7 @@
 		height: $button-size;
 		justify-content: center;
 		margin: 0 0 $grid-unit-30 0;
-		padding: 0 $grid-unit-40;
+		padding: 0 $grid-unit-30;
 		position: relative;
 		width: 100%;
 	}
@@ -103,11 +103,11 @@
 	}
 
 	&.components-guide__back-button {
-		left: $grid-unit-40;
+		left: $grid-unit-30;
 	}
 
 	&.components-guide__forward-button,
 	&.components-guide__finish-button {
-		right: $grid-unit-40;
+		right: $grid-unit-30;
 	}
 }
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 5f07342bfd8a0f..b8e69f632bdef2 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -112,7 +112,7 @@
 		:where(.components-modal__content) {
 			display: flex;
 			// If this container is scrollable, bottom padding won't apply so we use margin instead.
-			margin-bottom: $grid-unit-40;
+			margin-bottom: $grid-unit-30;
 			padding-bottom: 0;
 
 			> :last-child {
@@ -152,7 +152,7 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
+	padding: $grid-unit-30;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -206,12 +206,12 @@
 	flex: 1;
 	margin-top: $header-height + $grid-unit-10;
 	// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
-	padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
+	padding: $grid-unit-05 $grid-unit-30 $grid-unit-30;
 	overflow: auto;
 
 	&.hide-header {
 		margin-top: 0;
-		padding-top: $grid-unit-40;
+		padding-top: $grid-unit-30;
 	}
 
 	&.is-scrollable:focus-visible {
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 2faf62aeb80ebb..b6bfa03224bfe0 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -16,6 +16,7 @@
 - Field API: move validation to the field type. [#73642](https://github.com/WordPress/gutenberg/pull/73642)
 - DataForm: add support for `min`/`max` and `minLength`/`maxLength` validation for relevant controls. [#73465](https://github.com/WordPress/gutenberg/pull/73465)
 - Field API: display formats for `number` and `integer` types. [#73644](https://github.com/WordPress/gutenberg/pull/73644)
+- DataViews: Update padding to 24px for consistency. [#73334](https://github.com/WordPress/gutenberg/pull/73334)
 
 ## 11.0.0 (2025-11-26)
 
diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index 9f22c42c2d6163..75478854c37119 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -7,7 +7,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: inherit;
-	padding: $grid-unit-15 $grid-unit-60;
+	padding: $grid-unit-15 $grid-unit-30;
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
 
@@ -18,12 +18,6 @@
 	z-index: z-index(".dataviews-footer");
 }
 
-@container (max-width: 430px) {
-	.dataviews-footer {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-}
-
 @container (max-width: 560px) {
 	.dataviews-footer {
 		flex-direction: column !important;
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index c434a2420bbc53..6d67d0675a576c 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -20,7 +20,7 @@
 .dataviews__view-actions,
 .dataviews-filters__container {
 	box-sizing: border-box;
-	padding: $grid-unit-20 $grid-unit-60;
+	padding: $grid-unit-20 $grid-unit-30;
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -33,7 +33,7 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 $grid-unit-60;
+	padding: 0 $grid-unit-30;
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -53,12 +53,6 @@
 	.dataviews-filters__container {
 		padding: $grid-unit-15 $grid-unit-30;
 	}
-
-	.dataviews-no-results,
-	.dataviews-loading {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
 }
 
 .dataviews-title-field {
@@ -109,29 +103,10 @@
 }
 
 /**
- * Applying a consistent 24px padding when DataViews are placed within cards.
+ * When DataViews are placed within cards, apply a consistent top padding.
  */
 .components-card__body:has(> .dataviews-wrapper),
 .components-card__body:has(> .dataviews-picker-wrapper) {
 	padding: $grid-unit-10 0 0;
 	overflow: hidden; // Prevent cells with white backgrounds overflowing the card
-
-	.dataviews__view-actions,
-	.dataviews-filters__container,
-	.dataviews-footer,
-	.dataviews-view-grid,
-	.dataviews-loading,
-	.dataviews-no-results {
-		padding-inline: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:first-child,
-	.dataviews-view-table tr th:first-child {
-		padding-inline-start: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:last-child,
-	.dataviews-view-table tr th:last-child {
-		padding-inline-end: $grid-unit-30;
-	}
 }
diff --git a/packages/dataviews/src/dataviews-layouts/activity/style.scss b/packages/dataviews/src/dataviews-layouts/activity/style.scss
index 88ed63569b4d84..4a9f1ff26b5dc1 100644
--- a/packages/dataviews/src/dataviews-layouts/activity/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/activity/style.scss
@@ -3,7 +3,7 @@
 
 .dataviews-view-activity {
 	margin: 0 0 auto;
-	padding: $grid-unit-10 $grid-unit-60;
+	padding: $grid-unit-10 $grid-unit-30;
 
 	.dataviews-view-activity__group-header {
 		font-size: $font-size-large;
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 3718be839c1e09..51119be11a1a8e 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -5,7 +5,7 @@
 @use "../utils/grid-items.scss" as *;
 
 .dataviews-view-grid {
-	padding: 0 $grid-unit-60 $grid-unit-30;
+	padding: 0 $grid-unit-30 $grid-unit-30;
 	display: flex;
 	flex-direction: column;
 	gap: $grid-unit-40;
@@ -16,11 +16,6 @@
 		transition: padding ease-out 0.1s;
 	}
 
-	@container (max-width: 430px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-
 	.dataviews-view-grid__row {
 		display: grid;
 		gap: $grid-unit-40;
@@ -224,11 +219,6 @@
 	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
-	padding: 0 $grid-unit-60;
+	padding: 0 $grid-unit-30;
 	container-type: inline-size;
-
-	@container (max-width: 430px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
 }
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 12be80cb006227..00e7ddda560fb9 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -61,12 +61,12 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: $grid-unit-60;
+			padding-left: $grid-unit-30;
 		}
 
 		td:last-child,
 		th:last-child {
-			padding-right: $grid-unit-60;
+			padding-right: $grid-unit-30;
 		}
 
 		&:last-child {
@@ -260,17 +260,6 @@
 	}
 }
 
-@container (max-width: 430px) {
-	.dataviews-view-table tr td:first-child,
-	.dataviews-view-table tr th:first-child {
-		padding-left: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:last-child,
-	.dataviews-view-table tr th:last-child {
-		padding-right: $grid-unit-30;
-	}
-}
 
 .dataviews-view-table-selection-checkbox {
 	--checkbox-input-size: 24px;
@@ -316,7 +305,7 @@
 .dataviews-view-table__group-header-row {
 	.dataviews-view-table__group-header-cell {
 		font-weight: $font-weight-medium;
-		padding: $grid-unit-15 $grid-unit-60;
+		padding: $grid-unit-15 $grid-unit-30;
 		color: $gray-900;
 	}
 }
diff --git a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
index 72d87f63dba161..c5a2c6956df685 100644
--- a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
+++ b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
@@ -6,16 +6,8 @@
 	gap: $grid-unit-40;
 	grid-template-rows: max-content;
 	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-	padding: 0 $grid-unit-60 $grid-unit-30;
+	padding: 0 $grid-unit-30 $grid-unit-30;
 	container-type: inline-size;
-	/**
-		* Breakpoints were adjusted from media queries breakpoints to account for
-		* the sidebar width. This was done to match the existing styles we had.
-		*/
-	@container (max-width: 430px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
 
 	@media not (prefers-reduced-motion) {
 		transition: padding ease-out 0.1s;
diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index 1da4c654d3e8e7..46001a139a883c 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -265,23 +265,33 @@ export const WithModal = ( {
 				</p>
 			) }
 			{ isModalOpen && (
-				<Modal
-					title="Select Items"
-					onRequestClose={ () => setIsModalOpen( false ) }
-					isFullScreen={ false }
-					size="fill"
-				>
-					<DataViewsPickerContent
-						perPageSizes={ perPageSizes }
-						isMultiselectable={ isMultiselectable }
-						isGrouped={ isGrouped }
-						infiniteScrollEnabled={ infiniteScrollEnabled }
-						actions={ modalActions }
-						selection={ selectedItems.map( ( item ) =>
-							String( item.id )
-						) }
-					/>
-				</Modal>
+				<>
+					<style>{ `
+						.components-modal__content {
+							padding: 0;
+						}
+						.components-modal__frame.is-full-screen .components-modal__content {
+							margin-bottom: 0;
+						}
+					` }</style>
+					<Modal
+						title="Select Items"
+						onRequestClose={ () => setIsModalOpen( false ) }
+						isFullScreen={ false }
+						size="fill"
+					>
+						<DataViewsPickerContent
+							perPageSizes={ perPageSizes }
+							isMultiselectable={ isMultiselectable }
+							isGrouped={ isGrouped }
+							infiniteScrollEnabled={ infiniteScrollEnabled }
+							actions={ modalActions }
+							selection={ selectedItems.map( ( item ) =>
+								String( item.id )
+							) }
+						/>
+					</Modal>
+				</>
 			) }
 		</>
 	);
diff --git a/packages/edit-post/src/components/welcome-guide/style.scss b/packages/edit-post/src/components/welcome-guide/style.scss
index e6c0793a65383f..d5980745bc2ffc 100644
--- a/packages/edit-post/src/components/welcome-guide/style.scss
+++ b/packages/edit-post/src/components/welcome-guide/style.scss
@@ -20,14 +20,14 @@
 		font-size: 24px;
 		line-height: 1.4;
 		margin: $grid-unit-20 0 $grid-unit-20 0;
-		padding: 0 $grid-unit-40;
+		padding: 0 $grid-unit-30;
 	}
 
 	&__text {
 		font-size: $default-font-size;
 		line-height: 1.4;
 		margin: 0 0 $grid-unit-30 0;
-		padding: 0 $grid-unit-40;
+		padding: 0 $grid-unit-30;
 	}
 
 	&__inserter-icon {
diff --git a/packages/edit-site/src/components/sidebar-global-styles/style.scss b/packages/edit-site/src/components/sidebar-global-styles/style.scss
index cdd5c3ae2ad06a..9c4a04745e3ba0 100644
--- a/packages/edit-site/src/components/sidebar-global-styles/style.scss
+++ b/packages/edit-site/src/components/sidebar-global-styles/style.scss
@@ -15,14 +15,6 @@
 		overflow-y: auto;
 		padding-left: 0;
 		padding-right: 0;
-
-		.global-styles-ui-sidebar__navigator-screen {
-			padding-top: $grid-unit-15;
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
-			padding-bottom: $grid-unit-15;
-			outline: none;
-		}
 	}
 	.edit-site-sidebar-button {
 		color: $gray-900;
diff --git a/packages/editor/src/components/global-styles-sidebar/style.scss b/packages/editor/src/components/global-styles-sidebar/style.scss
index 441628644efa72..cd7585c7f5f9e3 100644
--- a/packages/editor/src/components/global-styles-sidebar/style.scss
+++ b/packages/editor/src/components/global-styles-sidebar/style.scss
@@ -10,8 +10,8 @@
 		flex: 1;
 	}
 
-	.components-navigator-screen {
-		padding: 0;
+	.global-styles-ui-sidebar__navigator-screen.components-navigator-screen {
+		padding: $grid-unit-15;
 	}
 }
 
diff --git a/packages/global-styles-ui/src/font-library-modal/style.scss b/packages/global-styles-ui/src/font-library-modal/style.scss
index 2a144b5583a603..d786d686b96116 100644
--- a/packages/global-styles-ui/src/font-library-modal/style.scss
+++ b/packages/global-styles-ui/src/font-library-modal/style.scss
@@ -4,7 +4,7 @@
 
 // Fixed height for the modal footer.
 // Ensures that the footer is always visible when the modal content is scrollable.
-$footer-height: 70px;
+$footer-height: 60px;
 
 .font-library-modal {
 	// @todo If a new prop is added to the Modal component that constrains
@@ -22,7 +22,7 @@ $footer-height: 70px;
 
 	.components-modal__content {
 		padding-top: 0;
-		margin-bottom: $footer-height;
+		margin-bottom: $footer-height !important;
 	}
 
 	.font-library-modal__subtitle {
@@ -38,7 +38,7 @@ $footer-height: 70px;
 }
 
 .font-library-modal__tabpanel-layout {
-	margin-top: variables.$grid-unit-40;
+	margin-top: variables.$grid-unit-30;
 
 	.font-library-modal__loading {
 		width: 100%;
@@ -59,10 +59,10 @@ $footer-height: 70px;
 
 .font-library-modal__footer {
 	border-top: 1px solid colors.$gray-300;
-	margin: 0 #{variables.$grid-unit-40 * -1} #{variables.$grid-unit-40 * -1};
-	padding: variables.$grid-unit-20 variables.$grid-unit-40;
+	margin: 0 #{variables.$grid-unit-30 * -1} #{variables.$grid-unit-30 * -1};
+	padding: variables.$grid-unit-20 variables.$grid-unit-30;
 	position: absolute;
-	bottom: variables.$grid-unit-40;
+	bottom: variables.$grid-unit-30;
 	width: 100%;
 	height: $footer-height;
 	background-color: colors.$white;
@@ -148,7 +148,7 @@ $footer-height: 70px;
 	top: 0;
 	border-bottom: 1px solid colors.$gray-300;
 	background: colors.$white;
-	margin: 0 #{variables.$grid-unit-40 * -1};
+	margin: 0 #{variables.$grid-unit-30 * -1};
 	padding: 0 variables.$grid-unit-20;
 	z-index: 1;
 
diff --git a/packages/global-styles-ui/src/screen-header.tsx b/packages/global-styles-ui/src/screen-header.tsx
index f24a3133d13646..5b1c6100c3b9b5 100644
--- a/packages/global-styles-ui/src/screen-header.tsx
+++ b/packages/global-styles-ui/src/screen-header.tsx
@@ -4,9 +4,7 @@
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
-	__experimentalView as View,
 	Navigator,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
@@ -24,28 +22,22 @@ export function ScreenHeader( {
 	onBack,
 }: ScreenHeaderProps ) {
 	return (
-		<VStack spacing={ 0 }>
-			<View>
-				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
-					<HStack spacing={ 2 }>
-						<Navigator.BackButton
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							size="small"
-							label={ __( 'Back' ) }
-							onClick={ onBack }
-						/>
-						<Spacer>
-							<Heading
-								className="global-styles-ui-header"
-								level={ 2 }
-								size={ 13 }
-							>
-								{ title }
-							</Heading>
-						</Spacer>
-					</HStack>
-				</Spacer>
-			</View>
+		<VStack spacing={ 0 } className="global-styles-ui-screen-header">
+			<HStack spacing={ 2 } justify="flex-start">
+				<Navigator.BackButton
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					size="small"
+					label={ __( 'Back' ) }
+					onClick={ onBack }
+				/>
+				<Heading
+					className="global-styles-ui-header"
+					level={ 2 }
+					size={ 13 }
+				>
+					{ title }
+				</Heading>
+			</HStack>
 			{ description && (
 				<p className="global-styles-ui-header__description">
 					{ description }
diff --git a/packages/global-styles-ui/src/screen-root.tsx b/packages/global-styles-ui/src/screen-root.tsx
index 98a04f0fc6a5a9..4b62e52b4ad2b8 100644
--- a/packages/global-styles-ui/src/screen-root.tsx
+++ b/packages/global-styles-ui/src/screen-root.tsx
@@ -34,7 +34,7 @@ function ScreenRoot() {
 
 	return (
 		<Card
-			size="small"
+			size="none"
 			isBorderless
 			className="global-styles-ui-screen-root"
 			isRounded={ false }
diff --git a/packages/global-styles-ui/src/screen-style-variations.tsx b/packages/global-styles-ui/src/screen-style-variations.tsx
index 37bf2170e8ae33..31b573f7fc6f94 100644
--- a/packages/global-styles-ui/src/screen-style-variations.tsx
+++ b/packages/global-styles-ui/src/screen-style-variations.tsx
@@ -21,7 +21,7 @@ function ScreenStyleVariations() {
 			/>
 
 			<Card
-				size="small"
+				size="none"
 				isBorderless
 				className="global-styles-ui-screen-style-variations"
 			>
diff --git a/packages/global-styles-ui/src/style.scss b/packages/global-styles-ui/src/style.scss
index ac71c324a94e3e..19533cd52e8d79 100644
--- a/packages/global-styles-ui/src/style.scss
+++ b/packages/global-styles-ui/src/style.scss
@@ -44,10 +44,6 @@
 	color: #757575;
 }
 
-.global-styles-ui-screen {
-	margin: 12px 16px 16px;
-}
-
 .global-styles-ui-screen-typography__indicator {
 	height: 24px;
 	width: 24px;
@@ -79,8 +75,8 @@
 	row-gap: calc(4px * 3);
 }
 
-.global-styles-ui-header__description {
-	padding: 0 16px;
+.global-styles-ui-screen-header {
+	margin-bottom: variables.$grid-unit-15;
 }
 
 .global-styles-ui-header {
@@ -88,6 +84,10 @@
 	margin-bottom: 0 !important;
 }
 
+.global-styles-ui-header__description {
+	margin: variables.$grid-unit-15 0 !important;
+}
+
 .global-styles-ui-subtitle {
 	// Need to override the too specific styles for complementary areas.
 	margin-bottom: 0 !important;
@@ -248,10 +248,12 @@
 	height: 100%;
 }
 
-.global-styles-ui-sidebar__navigator-screen {
+.global-styles-ui-sidebar__navigator-screen.components-navigator-screen {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	padding: variables.$grid-unit-30;
+	outline: none;
 }
 
 .global-styles-ui-sidebar__navigator-screen .single-column {
diff --git a/routes/styles/style.scss b/routes/styles/style.scss
index e7774825b5481d..ce885d82a05db7 100644
--- a/routes/styles/style.scss
+++ b/routes/styles/style.scss
@@ -15,14 +15,6 @@
 		overflow-y: auto;
 		padding-left: 0;
 		padding-right: 0;
-
-		.global-styles-ui-sidebar__navigator-screen {
-			padding-top: $grid-unit-15;
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
-			padding-bottom: $grid-unit-15;
-			outline: none;
-		}
 	}
 }