diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 12faf84e..f693f3dd 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -1,7 +1,7 @@
 @use 'upsell';
 
 $toolbar-block-size: 150px;
-$wpbody-block-indent: 20px;
+$wpbody-block-indent: 22px;
 
 #wpbody {
 	padding-block-start: $toolbar-block-size;
@@ -62,7 +62,7 @@ $wpbody-block-indent: 20px;
 }
 
 .code-snippets-toolbar-lower {
-	border: 1px solid #c3c4c7;
+	border-block: 1px solid #c3c4c7;
 
 	ul {
 		display: flex;
diff --git a/src/css/import.scss b/src/css/import.scss
index 1de961a7..d79b507a 100644
--- a/src/css/import.scss
+++ b/src/css/import.scss
@@ -1,3 +1,4 @@
+@use 'common/toolbar';
 @use 'import/page';
 @use 'import/card';
 @use 'import/upload';
diff --git a/src/css/import/_card.scss b/src/css/import/_card.scss
index aceb91dc..493fcdd2 100644
--- a/src/css/import/_card.scss
+++ b/src/css/import/_card.scss
@@ -28,6 +28,7 @@
 	border: 1px solid #e0e0e0;
 	margin-block-end: 10px;
 	inline-size: 100%;
+	box-sizing: border-box;
 
 	&.status-display {
 		display: flex;
diff --git a/src/css/import/_migrate.scss b/src/css/import/_migrate.scss
index 9dc092ba..c0d1a395 100644
--- a/src/css/import/_migrate.scss
+++ b/src/css/import/_migrate.scss
@@ -1,6 +1,6 @@
 
 .importer-selector-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -19,7 +19,7 @@
 }
 
 .import-options-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -80,7 +80,7 @@
 		background-color: #d63638;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 16px;
 		font-weight: 600;
@@ -114,7 +114,7 @@
 		margin-block-end: 16px;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 18px;
 		color: #333;
@@ -129,7 +129,7 @@
 		align-items: center;
 		margin-block-end: 10px;
 
-		h2 {
+		h3 {
 			margin: 0;
 		}
 
@@ -143,7 +143,3 @@
 		inline-size: 50px;
 	}
 }
-
-.migrate-form-container {
-	max-inline-size: 800px;
-}
diff --git a/src/css/import/_page.scss b/src/css/import/_page.scss
index 14d32cd9..428016bc 100644
--- a/src/css/import/_page.scss
+++ b/src/css/import/_page.scss
@@ -1,16 +1,19 @@
-.import-snippets-menu {
-	.narrow {
-		max-inline-size: 800px;
-	}
+.wrap > h2:first-of-type {
+	font-size: 1.5rem;
+	font-weight: 400;
+	line-height: 1.3;
+	margin-block: 50px 1rem;
+	padding: 0;
+}
 
-	.nav-tab-wrapper {
-		margin-block-end: 20px;
-	}
+.nav-tab-wrapper {
+	margin-block-end: 20px;
 }
 
 .import-snippets-section {
 	padding-block-start: 0;
 	display: none;
+	max-inline-size: 800px;
 
 	&.active-section {
 		display: block;
diff --git a/src/css/import/_upload.scss b/src/css/import/_upload.scss
index a4be5699..acd0ae88 100644
--- a/src/css/import/_upload.scss
+++ b/src/css/import/_upload.scss
@@ -4,12 +4,8 @@ $type-colors: (
 	html: #ef6a36
 );
 
-.upload-form-container {
-	max-inline-size: 800px;
-}
-
 .import-upload-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -86,7 +82,7 @@ $type-colors: (
 .selected-files {
 	margin-block-end: 20px;
 
-	h3 {
+	h4 {
 		margin: 0 0 12px;
 		font-size: 14px;
 		font-weight: 600;
@@ -138,7 +134,7 @@ $type-colors: (
 }
 
 .duplicate-action-selector-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -175,7 +171,7 @@ $type-colors: (
 		flex: 1;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 16px;
 		font-weight: 600
@@ -256,7 +252,7 @@ $type-colors: (
 		align-items: center;
 		margin-block-end: 10px;
 
-		h3 {
+		h4 {
 			margin: 0;
 		}
 
diff --git a/src/css/welcome.scss b/src/css/welcome.scss
index ca4eebcc..4439729a 100644
--- a/src/css/welcome.scss
+++ b/src/css/welcome.scss
@@ -8,7 +8,7 @@ $breakpoint: 1060px;
 .code-snippets-welcome {
 	h2 {
 		font-size: 1.5rem;
-		font-weight: 500;
+		font-weight: 400;
 		line-height: 1.3;
 		padding: 0;
 		margin-block: 50px 1rem;
diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index c0868996..bd337e7b 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -147,7 +147,7 @@ const EditFormWrap: React.FC = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 
 	return (
-		<div className="wrap">
+		<>
 			<PageHeading />
 			<Notices placement="above-form" />
 
@@ -172,7 +172,7 @@ const EditFormWrap: React.FC = () => {
 			</EditForm>
 
 			<UpsellDialog isOpen={isUpgradeDialogOpen} setIsOpen={setIsUpgradeDialogOpen} />
-		</div>
+		</>
 	)
 }
 
diff --git a/src/js/components/ImportMenu/ImportMenu.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
index bd089f8e..ea61938c 100644
--- a/src/js/components/ImportMenu/ImportMenu.tsx
+++ b/src/js/components/ImportMenu/ImportMenu.tsx
@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../hooks/useRestAPI'
 import { fetchQueryParam, updateQueryParam } from '../../utils/urls'
+import { Toolbar } from '../common/Toolbar'
 import { UploadForm } from './UploadForm/UploadForm'
 import { MigrateForm } from './MigrateForm/MigrateForm'
 import type { ReactNode } from 'react'
@@ -33,10 +34,11 @@ export const ImportMenu: React.FC = () => {
 	const [activeTab, setActiveTab] = useState<TabType>(getDefaultTab)
 
 	return (
-		<div className="import-snippets-menu wrap">
-			<h1>{__('Import Snippets', 'code-snippets')}</h1>
+		<>
+			<Toolbar />
+			<>
+				<h2>{__('Import Snippets', 'code-snippets')}</h2>
 
-			<div className="narrow">
 				<nav
 					className="nav-tab-wrapper"
 					aria-label={__('Import sources', 'code-snippets')}
@@ -61,7 +63,7 @@ export const ImportMenu: React.FC = () => {
 							{TAB_CONTENT[tab]}
 						</div>)}
 				</WithRestAPIContext>
-			</div>
-		</div>
+			</>
+		</>
 	)
 }
diff --git a/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx b/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx
index 094357bb..9a86d9d2 100644
--- a/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx
@@ -8,7 +8,7 @@ export const ImportOptions: React.FC = () => {
 
 	return (
 		<ImportCard className="import-options-card">
-			<h2>{__('Import options', 'code-snippets')}</h2>
+			<h3>{__('Import options', 'code-snippets')}</h3>
 			<label>
 				<input
 					type="checkbox"
diff --git a/src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx b/src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx
index e3237266..a5569b97 100644
--- a/src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx
@@ -13,7 +13,7 @@ export interface ImporterSelectorProps {
 export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) =>
 	<ImportCard variant="controls" className="importer-selector-card">
 		<label htmlFor="importer-select">
-			<h2>{__('Select plugin', 'code-snippets')}</h2>
+			<h3>{__('Select plugin', 'code-snippets')}</h3>
 		</label>
 
 		<select
diff --git a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
index d706f505..8a933992 100644
--- a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
@@ -17,9 +17,9 @@ interface StatusDisplayProps {
 
 const StatusDisplay: React.FC<StatusDisplayProps> = ({ type, title, children }) =>
 	<ImportCard variant="controls" className="import-section-status">
-		<div className={type}><span>{'error' === type ? '✕' : '✓'}</span></div>
+		<div className={type} aria-hidden="true"><span>{'error' === type ? '✕' : '✓'}</span></div>
 		<div>
-			<h3>{title}</h3>
+			<h4>{title}</h4>
 			<p>{children}</p>
 		</div>
 	</ImportCard>
@@ -54,8 +54,8 @@ const StatusMessages: React.FC = () => {
 					0 === snippetSelection.availableItems.length && 0 === importedIds.length && (
 				<ImportCard className="no-snippets-card">
 					<div className="card-inner">
-						<div className="card-icon">📭</div>
-						<h3>{__('No snippets found', 'code-snippets')}</h3>
+						<div className="card-icon" aria-hidden="true">📭</div>
+						<h4>{__('No snippets found', 'code-snippets')}</h4>
 						<p>{__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')}</p>
 					</div>
 				</ImportCard>)}
@@ -81,7 +81,7 @@ const MigrateFormInner: React.FC = () => {
 	}
 
 	return (
-		<div className="migrate-form-container">
+		<>
 			<p>{__('If you are using another snippets plugin, you can import those existing snippets to your Code Snippets library.', 'code-snippets')}</p>
 
 			<ImporterSelector
@@ -103,15 +103,13 @@ const MigrateFormInner: React.FC = () => {
 						isImporting={isWorking === MigrationStep.MigrateSnippets}
 					/>
 				</>)}
-		</div>
+		</>
 	)
 }
 
 export const MigrateForm: React.FC = () =>
 	<WithMigrationOptions>
 		<WithMigrationData>
-			<div className="wrap">
-				<MigrateFormInner />
-			</div>
+			<MigrateFormInner />
 		</WithMigrationData>
 	</WithMigrationOptions>
diff --git a/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx b/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
index 121c396e..9fe42356 100644
--- a/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
@@ -45,11 +45,11 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = props => {
 		<ImportCard className="migrate-snippets-table-card snippets-table-card">
 			<div>
 				<header>
-					<h2>{sprintf(
+					<h3>{sprintf(
 						// translators: %d: number of available snippets.
 						__('Available snippets (%d)', 'code-snippets'),
 						availableItems.length
-					)}</h2>
+					)}</h3>
 					<p>{__('We found the following snippets:', 'code-snippets')}</p>
 				</header>
 
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx
index 7c5d5f53..7525c23e 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx
@@ -46,7 +46,7 @@ export const DragDropUploadArea: React.FC<DragDropUploadAreaProps> = ({ fileInpu
 					handleFiles(event.dataTransfer.files)
 				}}
 			>
-				<div className="drop-zone-icon">📁</div>
+				<div className="drop-zone-icon" aria-hidden="true">📁</div>
 				<p>{__('Drag and drop files here, or click to browse', 'code-snippets')}</p>
 				<p>{__('Supports JSON and XML files', 'code-snippets')}</p>
 			</div>
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx
index c5169469..a2eeef4c 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx
@@ -19,7 +19,7 @@ export interface DuplicateActionSelectorProps {
 
 export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = ({ value, onChange }) =>
 	<ImportCard className="duplicate-action-selector-card">
-		<h2>{__('Duplicate snippets', 'code-snippets')}</h2>
+		<h3>{__('Duplicate snippets', 'code-snippets')}</h3>
 
 		<p className="description">
 			{__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')}
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx
index 551a518e..8ad466d8 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx
@@ -57,7 +57,7 @@ export const SelectFiles: React.FC<SelectFilesProps> = ({
 
 	return (
 		<ImportCard className="import-upload-card">
-			<h2>{__('Choose files', 'code-snippets')}</h2>
+			<h3>{__('Choose files', 'code-snippets')}</h3>
 			<p className="description">
 				{__('Choose one or more Code Snippets (.xml or .json) files to parse and preview.', 'code-snippets')}
 			</p>
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
index 8a44f208..da8b6698 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
@@ -47,19 +47,19 @@ export interface SelectedFilesListProps {
 
 export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onRemoveFile }) =>
 	<div className="selected-files">
-		<h3>
+		<h4>
 			{sprintf(
 				// translators: %d: number of selected files.
 				__('Selected files: (%d)', 'code-snippets'),
 				files.length
 			)}
-		</h3>
+		</h4>
 
 		<div className="selected-files-list">
 			{files.map(file =>
 				<div key={file.id}>
 					<div className="selected-file-details">
-						<span className="file-icon">📄</span>
+						<span className="file-icon" aria-hidden="true">📄</span>
 						<div>
 							<div><strong>{file.name}</strong></div>
 							<div className="file-size">{formatFileSize(file.file.size)}</div>
@@ -68,13 +68,19 @@ export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onR
 
 					<button
 						type="button"
-						title={__('Remove file', 'code-snippets')}
+						aria-label={
+							sprintf(
+								// translators: %s: file name.
+								__('Remove file %s', 'code-snippets'),
+								file.name
+							)
+						}
 						onClick={event => {
 							event.stopPropagation()
 							onRemoveFile(file)
 						}}
 					>
-						✕
+						<span aria-hidden="true">✕</span>
 					</button>
 				</div>
 			)}
diff --git a/src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx b/src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx
index 4f3a22d4..069f5be2 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx
@@ -22,12 +22,12 @@ export interface ImportResultDisplayProps {
 export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ success, message, warnings, step }) =>
 	<ImportCard className="import-result-display-card">
 		<div className={`import-result import-result-${success ? 'success' : 'failure'}`}>
-			<div className="import-result-icon">
+			<div className="import-result-icon" aria-hidden="true">
 				<span>{success ? '✓' : '✕'}</span>
 			</div>
 
 			<div>
-				<h3>
+				<h4>
 					{'upload' === step && (success
 						? __('File upload successful', 'code-snippets')
 						: __('File upload error', 'code-snippets'))}
@@ -35,7 +35,7 @@ export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ succes
 					{'select' === step && (success
 						? __('Import successful', 'code-snippets')
 						: __('Import error', 'code-snippets'))}
-				</h3>
+				</h4>
 
 				<p className="import-result-message">{message}</p>
 
diff --git a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
index 485d2157..008329b6 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
@@ -67,11 +67,11 @@ const SelectSnippetsForm: React.FC<SelectSnippetsFormProps> = ({ availableSnippe
 		<>
 			<div className="tablenav top">
 				<div>
-					<h3>{sprintf(
+					<h4>{sprintf(
 						// translators: %d: number of available snippets.
 						__('Available snippets (%d)', 'code-snippets'),
 						availableSnippets.length
-					)}</h3>
+					)}</h4>
 					<p>{__('Select the snippets you would like to import.', 'code-snippets')}</p>
 				</div>
 				<div className="table-actions">
diff --git a/src/js/components/ImportMenu/UploadForm/UploadForm.tsx b/src/js/components/ImportMenu/UploadForm/UploadForm.tsx
index dfe18189..7c52fcee 100644
--- a/src/js/components/ImportMenu/UploadForm/UploadForm.tsx
+++ b/src/js/components/ImportMenu/UploadForm/UploadForm.tsx
@@ -23,50 +23,48 @@ export const UploadForm: React.FC = () => {
 	const [availableSnippets, setAvailableSnippets] = useState<ImportableSnippetSchema[]>([])
 
 	return (
-		<div className="wrap">
-			<div className="upload-form-container">
-				<p>{__('Upload one or more Code Snippets export files and the snippets will be imported.', 'code-snippets')}</p>
+		<>
+			<p>{__('Upload one or more Code Snippets export files and the snippets will be imported.', 'code-snippets')}</p>
 
-				<p>
-					{createInterpolateElement(
-						__('Afterward, you will need to visit the <a>All Snippets</a> page to activate the imported snippets.', 'code-snippets'),
-						{ a: <a href={window.CODE_SNIPPETS?.urls.manage} /> }
-					)}
-				</p>
+			<p>
+				{createInterpolateElement(
+					__('Afterward, you will need to visit the <a>All Snippets</a> page to activate the imported snippets.', 'code-snippets'),
+					{ a: <a href={window.CODE_SNIPPETS?.urls.manage} /> }
+				)}
+			</p>
 
-				{'upload' === currentStep && !importResult?.success && (
-					<>
-						<DuplicateActionSelector value={duplicateAction} onChange={setDuplicateAction} />
+			{'upload' === currentStep && !importResult?.success && (
+				<>
+					<DuplicateActionSelector value={duplicateAction} onChange={setDuplicateAction} />
 
-						<SelectFiles
-							{...{ fileInputRef, selectedFiles, setSelectedFiles, setImportResult }}
-							onSuccess={uploadedSnippets => {
-								setAvailableSnippets(uploadedSnippets)
-								setCurrentStep('select')
-							}}
-						/>
-					</>)}
+					<SelectFiles
+						{...{ fileInputRef, selectedFiles, setSelectedFiles, setImportResult }}
+						onSuccess={uploadedSnippets => {
+							setAvailableSnippets(uploadedSnippets)
+							setCurrentStep('select')
+						}}
+					/>
+				</>)}
 
-				{'select' === currentStep && 0 < availableSnippets.length && !importResult?.success && (
-					<SelectSnippets
-						duplicateAction={duplicateAction}
-						setImportResult={setImportResult}
-						availableSnippets={availableSnippets}
-						onCancel={() => {
-							setSelectedFiles(undefined)
+			{'select' === currentStep && 0 < availableSnippets.length && !importResult?.success && (
+				<SelectSnippets
+					duplicateAction={duplicateAction}
+					setImportResult={setImportResult}
+					availableSnippets={availableSnippets}
+					onCancel={() => {
+						setSelectedFiles(undefined)
 
-							if (fileInputRef.current) {
-								fileInputRef.current.value = ''
-							}
+						if (fileInputRef.current) {
+							fileInputRef.current.value = ''
+						}
 
-							setAvailableSnippets([])
-							setImportResult(undefined)
-							setCurrentStep('upload')
-						}}
-					/>)}
+						setAvailableSnippets([])
+						setImportResult(undefined)
+						setCurrentStep('upload')
+					}}
+				/>)}
 
-				{importResult && <ImportResultDisplay {...importResult} />}
-			</div>
-		</div>
+			{importResult && <ImportResultDisplay {...importResult} />}
+		</>
 	)
 }
diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index c6109564..174fb963 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -23,7 +23,7 @@ export const CommunityCloud = () => {
 	const [isUpsellDialogOpen, setIsUpsellDialogOpen] = useState(false)
 
 	return (
-		<div className="wrap">
+		<>
 			<h2>{__('Community Cloud', 'code-snippets')}</h2>
 
 			<nav
@@ -60,6 +60,6 @@ export const CommunityCloud = () => {
 				: null}
 
 			<UpsellDialog isOpen={isUpsellDialogOpen} setIsOpen={setIsUpsellDialogOpen} />
-		</div>
+		</>
 	)
 }
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 5d69f4ee..9967f58e 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -118,7 +118,7 @@ const SnippetsTableInner = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 
 	return (
-		<div className="wrap">
+		<>
 			<PageHeading />
 
 			<nav
@@ -135,7 +135,7 @@ const SnippetsTableInner = () => {
 			</WithFilteredSnippetsContext>
 
 			<UpsellDialog isOpen={isUpgradeDialogOpen} setIsOpen={setIsUpgradeDialogOpen} />
-		</div>
+		</>
 	)
 }
 
diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index 2fe61a7d..56f7a7c4 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -14,6 +14,8 @@ interface NavLink {
 	external?: boolean
 	icon?: ReactNode
 	pro?: boolean
+	pageSlug?: string
+	subpage?: string
 }
 
 const UPPER_NAV_LINKS: NavLink[] = [
@@ -32,7 +34,8 @@ const UPPER_NAV_LINKS: NavLink[] = [
 	{
 		name: 'welcome',
 		url: window.CODE_SNIPPETS?.urls.welcome,
-		label: __("What's New", 'code-snippets')
+		label: __("What's New", 'code-snippets'),
+		pageSlug: 'code-snippets-welcome'
 	}
 ]
 
@@ -41,30 +44,35 @@ const LOWER_NAV_LINKS: NavLink[] = [
 		name: 'snippets',
 		url: window.CODE_SNIPPETS?.urls.manage,
 		label: __('Snippets', 'code-snippets'),
-		icon: <SnippetsIcon aria-hidden="true" />
+		icon: <SnippetsIcon aria-hidden="true" />,
+		pageSlug: 'snippets'
 	},
 	{
 		name: 'cloud-community',
 		label: __('Community Cloud', 'code-snippets'),
-		icon: <CommunityIcon aria-hidden="true" />
+		icon: <CommunityIcon aria-hidden="true" />,
+		subpage: 'cloud-community'
 	},
 	{
 		name: 'cloud-library',
 		label: __('My Library', 'code-snippets'),
 		icon: <LibraryIcon aria-hidden="true" />,
-		pro: true
+		pro: true,
+		subpage: 'cloud-library'
 	},
 	{
 		name: 'cloud-teams',
 		label: __('My Teams', 'code-snippets'),
 		icon: <TeamsIcon aria-hidden="true" />,
-		pro: true
+		pro: true,
+		subpage: 'cloud-teams'
 	},
 	{
 		name: 'settings',
 		url: window.CODE_SNIPPETS?.urls.settings,
 		label: __('Settings', 'code-snippets'),
-		icon: <SettingsIcon aria-hidden="true" />
+		icon: <SettingsIcon aria-hidden="true" />,
+		pageSlug: 'snippets-settings'
 	}
 ]
 
@@ -86,14 +94,14 @@ const UpperNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 
 		<nav aria-label={__('Main links', 'code-snippets')}>
 			<ul>
-				{UPPER_NAV_LINKS.map(({ name, url, label, external }) =>
-					<li key={name}>
+				{UPPER_NAV_LINKS.map(link =>
+					<li key={link.name}>
 						<a
-							href={url}
-							className={classnames(`${name}-link`, { 'active-link': currentPage?.endsWith(name) })}
-							{...external && { target: '_blank', rel: 'noopener noreferrer' }}
+							href={link.url}
+							className={classnames(`${link.name}-link`, { 'active-link': isActiveLink(link) })}
+							{...link.external && { target: '_blank', rel: 'noopener noreferrer' }}
 						>
-							{label}
+							{link.label}
 						</a>
 					</li>
 				)}
@@ -116,27 +124,38 @@ const UpperNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 		</nav>
 	</div>
 
-const currentPage = fetchQueryParam('subpage') ?? fetchQueryParam('page')
+const currentPage = fetchQueryParam('page')
+const currentSubpage = fetchQueryParam('subpage')
+
+const isActiveLink = ({ pageSlug, subpage }: NavLink): boolean => {
+	if (subpage) {
+		return currentSubpage === subpage
+	}
+	if (pageSlug) {
+		return !currentSubpage && currentPage === pageSlug
+	}
+	return false
+}
 
 const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 	<div className="code-snippets-toolbar-lower">
 		<nav aria-label={__('Main features', 'code-snippets')}>
 			<ul>
-				{LOWER_NAV_LINKS.map(({ name, url, label, pro, icon }) =>
-					<li key={name}>
+				{LOWER_NAV_LINKS.map(link =>
+					<li key={link.name}>
 						<a
-							href={url ?? buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: name })}
-							className={classnames(`${name}-link`, { 'active-link': currentPage?.endsWith(name) })}
+							href={link.url ?? buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: link.name })}
+							className={classnames(`${link.name}-link`, { 'active-link': isActiveLink(link) })}
 							onClick={event => {
-								if (pro && !isLicensed()) {
+								if (link.pro && !isLicensed()) {
 									event.preventDefault()
 									setIsUpsellDialogOpen(true)
 								}
 							}}
 						>
-							{icon}
-							<span>{label}</span>
-							{pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
+							{link.icon}
+							<span>{link.label}</span>
+							{link.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 						</a>
 					</li>)}
 			</ul>
diff --git a/src/php/Admin/Menus/Admin_Menu.php b/src/php/Admin/Menus/Admin_Menu.php
index aeb757e2..dc96c121 100644
--- a/src/php/Admin/Menus/Admin_Menu.php
+++ b/src/php/Admin/Menus/Admin_Menu.php
@@ -123,7 +123,7 @@ public function register() {
 	 * Render the navigation bar at the top of the admin page.
 	 */
 	protected function render_navigation() {
-		echo '<div id="code-snippets-toolbar-container"></div>';
+		echo '<div id="code-snippets-toolbar-container" class="wrap"></div>';
 	}
 
 	/**
diff --git a/src/php/Admin/Menus/Edit_Menu.php b/src/php/Admin/Menus/Edit_Menu.php
index 59591e36..fbb24dfd 100644
--- a/src/php/Admin/Menus/Edit_Menu.php
+++ b/src/php/Admin/Menus/Edit_Menu.php
@@ -134,7 +134,7 @@ protected function ensure_correct_page() {
 	 * @return void
 	 */
 	public function render() {
-		echo '<div id="edit-snippet-container"></div>';
+		echo '<div id="edit-snippet-container" class="wrap"></div>';
 	}
 
 	/**
diff --git a/src/php/Admin/Menus/Import_Menu.php b/src/php/Admin/Menus/Import_Menu.php
index 17144da9..55cfb9b8 100644
--- a/src/php/Admin/Menus/Import_Menu.php
+++ b/src/php/Admin/Menus/Import_Menu.php
@@ -91,6 +91,6 @@ public function enqueue_assets() {
 	 * @return void
 	 */
 	public function render() {
-		echo '<div id="import-container"></div>';
+		echo '<div id="import-container" class="wrap"></div>';
 	}
 }
diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index a2460b15..bda38a8f 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -284,7 +284,7 @@ protected function get_cloud_search_per_page(): int {
 	 * @return void
 	 */
 	public function render() {
-		echo '<div id="manage-snippets-container"></div>';
+		echo '<div id="manage-snippets-container" class="wrap"></div>';
 	}
 
 	/**
diff --git a/src/php/Admin/Menus/Settings_Menu.php b/src/php/Admin/Menus/Settings_Menu.php
index 2981107d..aaefed54 100644
--- a/src/php/Admin/Menus/Settings_Menu.php
+++ b/src/php/Admin/Menus/Settings_Menu.php
@@ -198,7 +198,7 @@ public function render() {
 		$current_section = $this->get_current_section();
 
 		?>
-		<div class="code-snippets-settings wrap" data-active-tab="<?php echo esc_attr( $current_section ); ?>">
+		<div class="wrap" data-active-tab="<?php echo esc_attr( $current_section ); ?>">
 			<h2>
 				<?php
 				esc_html_e( 'Settings', 'code-snippets' );
diff --git a/src/php/Admin/Menus/Welcome_Menu.php b/src/php/Admin/Menus/Welcome_Menu.php
index bbe53914..51d0ff5a 100644
--- a/src/php/Admin/Menus/Welcome_Menu.php
+++ b/src/php/Admin/Menus/Welcome_Menu.php
@@ -43,7 +43,7 @@ public function __construct( $api ) {
 	 * @return void
 	 */
 	public function render() {
-		echo '<div id="code-snippets-welcome-container"></div>';
+		echo '<div id="code-snippets-welcome-container" class="wrap"></div>';
 	}
 
 	/**