diff --git a/src/settings/global-settings/setting-modal.tsx b/src/settings/global-settings/setting-modal.tsx
index 6d2f1ec..dfe3755 100644
--- a/src/settings/global-settings/setting-modal.tsx
+++ b/src/settings/global-settings/setting-modal.tsx
@@ -13,6 +13,7 @@ import { useDispatch } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import {
 	Button,
+	Flex,
 	Notice,
 	Modal,
 	Popover,
@@ -24,6 +25,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -193,9 +195,9 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 			onRequestClose={ () => setIsSettingModalOpen( false ) }
 		>
 			{ isWaiting && (
-				<div className="ftb-global-setting-modal__loading">
+				<HStack justify="center" className="ftb-global-setting-modal__loading">
 					<Spinner />
-				</div>
+				</HStack>
 			) }
 			<TabPanel
 				className="ftb-global-setting-modal__tab-panel"
@@ -220,12 +222,18 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 				] }
 			>
 				{ ( { name } ) => (
-					<>
+					<Spacer marginBottom={ 22 }>
 						{ name === 'table' && (
-							<>
-								<h2>{ __( 'Default table styles', 'flexible-table-block' ) }</h2>
-								<div className="ftb-global-setting-modal__styles">
-									<div className="ftb-global-setting-modal__styles-item">
+							<VStack spacing={ 4 }>
+								<Heading level={ 5 }>
+									{ __( 'Default table styles', 'flexible-table-block' ) }
+								</Heading>
+								<Flex wrap align="stretch">
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<UnitControl
 											label={ __( 'Table width', 'flexible-table-block' ) }
 											units={ tableWidthUnits }
@@ -243,8 +251,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 											size="__unstable-large"
 											__unstableInputWidth="110px"
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<UnitControl
 											label={ __( 'Table max width', 'flexible-table-block' ) }
 											units={ tableWidthUnits }
@@ -262,8 +274,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 											size="__unstable-large"
 											__unstableInputWidth="110px"
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ToggleGroupControl
 											__nextHasNoMarginBottom
 											label={ __( 'Cell borders', 'flexible-table-block' ) }
@@ -302,11 +318,17 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												/>
 											) ) }
 										</ToggleGroupControl>
-									</div>
-								</div>
-								<h2>{ __( 'Default striped table styles', 'flexible-table-block' ) }</h2>
-								<div className="ftb-global-setting-modal__styles">
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+								</Flex>
+								<Heading level={ 5 }>
+									{ __( 'Default striped table styles', 'flexible-table-block' ) }
+								</Heading>
+								<Flex wrap align="stretch">
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ColorControl
 											label={ __(
 												'Striped style background color ( odd rows )',
@@ -323,8 +345,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ColorControl
 											label={ __(
 												'Striped style background color ( even rows )',
@@ -341,15 +367,21 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-								</div>
-							</>
+									</Spacer>
+								</Flex>
+							</VStack>
 						) }
 						{ name === 'cell' && (
-							<>
-								<h2>{ __( 'Default cell styles', 'flexible-table-block' ) }</h2>
-								<div className="ftb-global-setting-modal__styles">
-									<div className="ftb-global-setting-modal__styles-item">
+							<VStack spacing={ 4 }>
+								<Heading level={ 5 }>
+									{ __( 'Default cell styles', 'flexible-table-block' ) }
+								</Heading>
+								<Flex wrap align="stretch">
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ColorControl
 											label={ createInterpolateElement(
 												__( 'Cell text color ( <code>th</code> tag )', 'flexible-table-block' ),
@@ -366,8 +398,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ColorControl
 											label={ createInterpolateElement(
 												__( 'Cell text color ( <code>td</code> tag )', 'flexible-table-block' ),
@@ -384,8 +420,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ColorControl
 											label={ createInterpolateElement(
 												__(
@@ -405,8 +445,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ColorControl
 											label={ createInterpolateElement(
 												__(
@@ -426,8 +470,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<PaddingControl
 											label={ __( 'Cell padding', 'flexible-table-block' ) }
 											values={ currentOptions?.block_style.cell_padding || {} }
@@ -441,8 +489,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<BorderWidthControl
 											label={ __( 'Cell border width', 'flexible-table-block' ) }
 											values={ { top: currentOptions.block_style?.cell_border_width } }
@@ -458,8 +510,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<BorderStyleControl
 											label={ __( 'Cell border style', 'flexible-table-block' ) }
 											values={ { top: currentOptions.block_style?.cell_border_style } }
@@ -479,8 +535,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ColorControl
 											label={ __( 'Cell border color', 'flexible-table-block' ) }
 											value={ currentOptions.block_style?.cell_border_color }
@@ -494,8 +554,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 										/>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ToggleGroupControl
 											__nextHasNoMarginBottom
 											label={ __( 'Cell text alignment', 'flexible-table-block' ) }
@@ -527,8 +591,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												/>
 											) ) }
 										</ToggleGroupControl>
-									</div>
-									<div className="ftb-global-setting-modal__styles-item">
+									</Spacer>
+									<Spacer
+										padding={ 2 }
+										marginBottom={ 0 }
+										className="ftb-global-setting-modal__styles-item"
+									>
 										<ToggleGroupControl
 											__nextHasNoMarginBottom
 											label={ __( 'Cell vertical alignment', 'flexible-table-block' ) }
@@ -560,13 +628,15 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												/>
 											) ) }
 										</ToggleGroupControl>
-									</div>
-								</div>
-							</>
+									</Spacer>
+								</Flex>
+							</VStack>
 						) }
 						{ name === 'responsive' && (
-							<>
-								<h2>{ __( 'Responsive breakpoint (px)', 'flexible-table-block' ) }</h2>
+							<VStack spacing={ 4 }>
+								<Heading level={ 5 }>
+									{ __( 'Responsive breakpoint (px)', 'flexible-table-block' ) }
+								</Heading>
 								<RangeControl
 									id="flexible-table-block-global-breakpoint"
 									help={ __(
@@ -592,10 +662,10 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 									__next40pxDefaultSize
 									__nextHasNoMarginBottom
 								/>
-							</>
+							</VStack>
 						) }
 						{ name === 'options' && (
-							<>
+							<VStack spacing={ 4 }>
 								<ToggleControl
 									label={ __( 'Show section labels', 'flexible-table-block' ) }
 									help={ __(
@@ -712,9 +782,9 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 										__nextHasNoMarginBottom
 									/>
 								) }
-							</>
+							</VStack>
 						) }
-					</>
+					</Spacer>
 				) }
 			</TabPanel>
 			{ noticeInfo?.status && noticeInfo?.message && (
@@ -729,7 +799,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 					{ noticeInfo.message }
 				</Notice>
 			) }
-			<div className="ftb-global-setting-modal__buttons">
+			<Spacer
+				as={ HStack }
+				marginBottom={ 0 }
+				paddingX={ 6 }
+				className="ftb-global-setting-modal__buttons"
+			>
 				<Button
 					variant="primary"
 					disabled={ isWaiting }
@@ -770,7 +845,7 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 						</Popover>
 					) }
 				</Button>
-			</div>
+			</Spacer>
 		</Modal>
 	);
 }
diff --git a/src/settings/global-settings/style.scss b/src/settings/global-settings/style.scss
index 443852a..88e233f 100644
--- a/src/settings/global-settings/style.scss
+++ b/src/settings/global-settings/style.scss
@@ -12,46 +12,6 @@
 	@media (min-width: 960px) {
 		height: 75%;
 	}
-
-	h2 {
-		margin-top: 2em;
-		margin-bottom: 1em;
-		font-size: 0.9rem;
-
-		&:first-of-type {
-			margin-top: 0;
-		}
-	}
-
-	hr {
-		margin: 1em 0;
-	}
-
-	.components-modal__content {
-		padding-bottom: 40px;
-		margin-bottom: 60px;
-	}
-
-	.components-toggle-control {
-		margin-bottom: 16px;
-
-		.components-base-control__help {
-			margin-top: 0;
-			margin-left: 48px;
-		}
-	}
-
-	.components-range-control__mark {
-		background-color: #d7dade;
-	}
-
-	.components-range-control__mark-label {
-		color: currentColor;
-	}
-
-	.components-disabled label {
-		opacity: 0.3;
-	}
 }
 
 .ftb-global-setting-modal__tab-panel {
@@ -71,7 +31,6 @@
 	}
 
 	.components-tab-panel__tabs-item {
-		text-align: left;
 
 		&:focus {
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -82,7 +41,6 @@
 		}
 
 		&.is-active {
-			font-weight: 500;
 			background: #f0f0f0;
 
 			&::after {
@@ -102,16 +60,8 @@
 	}
 }
 
-.ftb-global-setting-modal__styles {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	justify-content: space-between;
-}
-
 .ftb-global-setting-modal__styles-item {
 	width: calc(50% - 4px);
-	padding: 8px;
 	border: 1px var(--wp-admin-theme-color) solid;
 
 	@media screen and (max-width: 782px) {
@@ -119,66 +69,30 @@
 	}
 }
 
-.ftb-global-setting-modal__styles-color {
-	position: relative;
-	padding-left: 28px;
-
-	.component-color-indicator {
-		position: absolute;
-		top: 50%;
-		left: 0;
-		margin-top: -8px;
-		margin-left: 0;
-	}
-}
-
 .ftb-global-setting-modal__buttons {
 	position: absolute;
 	bottom: 0;
 	left: 0;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	height: 60px;
-	padding: 0 24px;
+	height: 56px;
 	background: #fff;
+	z-index: 2;
 }
 
-.ftb-global-setting-modal__confirm-popover .components-popover__content {
+.ftb-global-setting-modal__confirm-popover {
 	min-width: 150px;
 }
 
 .ftb-global-setting-modal__notice {
 	position: absolute !important;
 	right: 24px;
-	bottom: 60px;
+	bottom: 56px;
 	left: 24px;
 	z-index: 6;
-	padding-top: 0;
-	padding-bottom: 0;
-	margin: 0;
-
-	&.is-dismissible {
-		padding-right: 8px;
-
-		svg {
-			width: 16px;
-			height: 16px;
-		}
-	}
-
-	.components-button {
-		align-self: center;
-	}
 }
 
 .ftb-global-setting-modal__loading {
 	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	inset: 0;
 	z-index: 5;
 	display: flex;
 	align-items: center;