diff --git a/build/1.11.8/images/image.3c656cfe.jpg b/build/1.11.8/images/image.3c656cfe.jpg
new file mode 100644
index 000000000..454d35009
Binary files /dev/null and b/build/1.11.8/images/image.3c656cfe.jpg differ
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
index acf664890..37ea3f213 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
+++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
@@ -14,9 +14,12 @@ import { forwardRef, useEffect, useContext } from '@wordpress/element';
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
-import AIImg from '../../static/images/sitegen/ai_bg.png';
-import { ThemeContext } from '../ThemeContextProvider';
 import { THEME_DARK } from '../../../constants';
+import { ThemeContext } from '../ThemeContextProvider';
+/* For this to be dynamically added to build
+* and to be rendered in bg with React JS
+*/
+import AIImg from '../../static/images/sitegen/ai_bg.png';
 
 function useHTMLClass( className, isDarkMode ) {
 	useEffect( () => {
@@ -26,7 +29,7 @@ function useHTMLClass( className, isDarkMode ) {
 		mainImage.onload = () => {
 			document.querySelector(
 				'.nfd-onboarding-skeleton--sitegen'
-			).style.background = isDarkMode ? `url('${ AIImg }')` : '#ededed';
+			).style.background = isDarkMode ? `url('${ AIImg }')` : 'var(--sitegen-background)';
 		};
 
 		const element =
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index c84245ecf..603510b00 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -303,6 +303,7 @@ body {
 
 	.nfd-onboarding-sitegen-light {
 
+		--sitegen-background: #ededed;
 		--sitegen-background-low: #ededed;
 		--nfd-onboarding-primary: #000;
 		--nfd-onboarding-primary-rgb: 0, 0, 0;