diff --git a/includes/Data/Flows.php b/includes/Data/Flows.php
index e83acfd59..b15b9765b 100644
--- a/includes/Data/Flows.php
+++ b/includes/Data/Flows.php
@@ -90,8 +90,8 @@ final class Flows {
 						'color' => '',
 					),
 					array(
-						'slug'  => 'background',
-						'name'  => 'Background',
+						'slug'  => 'base',
+						'name'  => 'Base',
 						'color' => '',
 					),
 				),
diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php
index af881bc47..2e36e94cf 100644
--- a/includes/Data/Themes/Colors.php
+++ b/includes/Data/Themes/Colors.php
@@ -2,10 +2,11 @@
 
 namespace NewfoldLabs\WP\Module\Onboarding\Data\Themes;
 
+/**
+ * Contains custom color palettes for a given theme.
+ */
 final class Colors {
 
-
-
 	/**
 	 * This contains the different color variations for the theme.
 	 *
@@ -22,7 +23,7 @@ final class Colors {
 				'tertiary'             => '#C7DBFF',
 				'secondary'            => '#344A77',
 				'primary'              => '#1A4733',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'cool'         => array(
 				'header-background'    => '#C7DBFF',
@@ -33,7 +34,7 @@ final class Colors {
 				'tertiary'             => '#C7DBFF',
 				'secondary'            => '#3764B4',
 				'primary'              => '#21447B',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'warm'         => array(
 				'header-background'    => '#FDE5D0',
@@ -44,7 +45,7 @@ final class Colors {
 				'tertiary'             => '#FFEDED',
 				'secondary'            => '#B97040',
 				'primary'              => '#7A3921',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'radiant'      => array(
 				'header-background'    => '#63156A',
@@ -55,7 +56,7 @@ final class Colors {
 				'tertiary'             => '#C7F0FF',
 				'secondary'            => '#64288C',
 				'primary'              => '#63156A',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'bold'         => array(
 				'header-background'    => '#FFD7F1',
@@ -66,7 +67,7 @@ final class Colors {
 				'tertiary'             => '#F2A3D6',
 				'secondary'            => '#076D66',
 				'primary'              => '#09857C',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'retro'        => array(
 				'header-background'    => '#096385',
@@ -77,7 +78,7 @@ final class Colors {
 				'tertiary'             => '#F2E6A2',
 				'secondary'            => '#BE9E00',
 				'primary'              => '#096385',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'professional' => array(
 				'header-background'    => '#6D8258',
@@ -88,7 +89,7 @@ final class Colors {
 				'tertiary'             => '#d6e4f9',
 				'secondary'            => '#405F1C',
 				'primary'              => '#558320',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'crisp'        => array(
 				'header-background'    => '#ccc',
@@ -99,7 +100,7 @@ final class Colors {
 				'tertiary'             => '#777',
 				'secondary'            => '#17222E',
 				'primary'              => '#223344',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'polished'     => array(
 				'header-background'    => '#313131',
@@ -110,7 +111,7 @@ final class Colors {
 				'tertiary'             => '#313131',
 				'secondary'            => '#6B69EA',
 				'primary'              => '#5100FA',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'nightowl'     => array(
 				'header-background'    => '#06080A',
@@ -121,7 +122,7 @@ final class Colors {
 				'tertiary'             => '#FFDFA3',
 				'secondary'            => '#06080A',
 				'primary'              => '#B97900',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 			'subtle'       => array(
 				'header-background'    => '#C7ADBB',
@@ -132,7 +133,7 @@ final class Colors {
 				'tertiary'             => '#D4C9CF',
 				'secondary'            => '#57203c',
 				'primary'              => '#5A3C4B',
-				'background'           => '#FFFFFF',
+				'base'                 => '#FFFFFF',
 			),
 		),
 	);
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index c17edbdd3..c311759ff 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -84,8 +84,8 @@ const DesignColors = () => {
 					case 'primary':
 					case 'secondary':
 					case 'tertiary':
-					case 'background':
-					case 'foreground':
+					case 'base':
+					case 'contrast':
 					/* YITH WONDER */
 					case 'header-background':
 					case 'header-foreground':
@@ -95,19 +95,24 @@ const DesignColors = () => {
 						const slug = selectedThemeColorPalette[ idx ]?.slug;
 						if (
 							isCustomStyle &&
-							selectedColorsLocalTemp?.[slug] != ''
+							selectedColorsLocalTemp?.[ slug ] != ''
 						)
-							selectedThemeColorPalette[ idx ].color = selectedColorsLocalTemp[slug];
+							selectedThemeColorPalette[ idx ].color =
+								selectedColorsLocalTemp[ slug ];
 						/**
 						 * Add Exception for Background.
 						 * (perhaps scope to yith-wonder in future)
-						 */
-						else if ( colorPalettesTemp?.[colorStyle]?.[slug] && 'background' === slug ) {
+						 */ else if (
+							colorPalettesTemp?.[ colorStyle ]?.[ slug ] &&
+							'base' === slug
+						) {
 							selectedThemeColorPalette[ idx ].color = '#FFFFFF';
-						}
-						else if ( ! isCustomStyle  && colorPalettesTemp?.[colorStyle]?.[slug] ) {
+						} else if (
+							! isCustomStyle &&
+							colorPalettesTemp?.[ colorStyle ]?.[ slug ]
+						) {
 							selectedThemeColorPalette[ idx ].color =
-								colorPalettesTemp[ colorStyle ][slug];
+								colorPalettesTemp[ colorStyle ][ slug ];
 						}
 						break;
 				}
@@ -134,13 +139,13 @@ const DesignColors = () => {
 		if ( selectedThemeColorPalette ) {
 			for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) {
 				switch ( selectedThemeColorPalette[ idx ]?.slug ) {
-					case 'background':
+					case 'base':
 						if (
-							colorPickerCalledBy == 'background' &&
-							customColors?.background
+							colorPickerCalledBy == 'base' &&
+							customColors?.base
 						)
 							selectedThemeColorPalette[ idx ].color =
-								customColors?.background;
+								customColors?.base;
 						break;
 					case 'primary':
 						if (
@@ -350,22 +355,20 @@ const DesignColors = () => {
 				>
 					<div
 						className="custom-palette__below-row"
-						onClick={ ( e ) => selectCustomColor( 'background' ) }
+						onClick={ ( e ) => selectCustomColor( 'base' ) }
 					>
 						<div
 							className={ `custom-palette__below-row-icon ${
-								customColors?.background &&
+								customColors?.base &&
 								'custom-palette__below-row-icon_selected_border'
 							}` }
 							style={ {
 								backgroundColor: `${
-									customColors?.background ?? '#FFF'
+									customColors?.base ?? '#FFF'
 								}`,
 							} }
 						>
-							{ customColors?.background ? (
-								<div>&#10003;</div>
-							) : null }
+							{ customColors?.base ? <div>&#10003;</div> : null }
 						</div>
 						<div className="custom-palette__below-row-text">
 							Background
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 97cf5fce7..2317ef254 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -70,6 +70,29 @@ const DesignTypography = () => {
 			fontPalettesCopy[ fontStyle ]?.styles.blocks[
 				'core/heading'
 			].typography.fontFamily;
+		if (
+			globalStylesCopy.styles?.blocks[ 'core/site-title' ]?.typography
+				.fontFamily
+		) {
+			globalStylesCopy.styles.blocks[
+				'core/site-title'
+			].typography.fontFamily =
+				fontPalettesCopy[ fontStyle ]?.styles.blocks[
+					'core/heading'
+				].typography.fontFamily;
+		}
+
+		if (
+			globalStylesCopy.styles?.blocks[ 'core/site-tagline' ]?.typography
+				.fontFamily
+		) {
+			globalStylesCopy.styles.blocks[
+				'core/site-tagline'
+			].typography.fontFamily =
+				fontPalettesCopy[ fontStyle ]?.styles.blocks[
+					'core/heading'
+				].typography.fontFamily;
+		}
 
 		// Saves the data to the Store
 		currentData.data.typography.slug = fontStyle;
@@ -188,7 +211,7 @@ const DesignTypography = () => {
 				</div>
 			} */ }
 				{ fontPalettes && buildPalettes() }
-				{/* { fontPalettes && buildCustomPalette() } */}
+				{ /* { fontPalettes && buildCustomPalette() } */ }
 				<div className="custom-font-palette--hidden">{ rerender }</div>
 			</div>
 		</GlobalStylesProvider>