diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
index b1ba38652..2a4d255d8 100644
--- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
@@ -13,13 +13,20 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 			max-width: 320px;
 			max-height: 320px;
 		}
-		
+
 		&-large {
 			width: 70%;
-			height: 70%;
+			min-height: 90vh;
 			overflow: hidden;
-			max-width: 925px;
-			max-height: 925px;
+			position: relative;
+			align-items: center;
+			border: 1px solid #e3dfdf;
+			border-top: 0;
+			margin-bottom: 30px;
+
+			&:hover {
+				cursor: not-allowed;
+			}
 		}
 
 		&--is-skeleton {
@@ -60,13 +67,8 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 				width: 100%;
 				height: 100%;
 				position: absolute;
-				background-image: linear-gradient(90deg,
-						rgba($main-color-light-rgb, 0) 0,
-						rgba($main-color-light-rgb, 0.4) 20%,
-						rgba($main-color-light-rgb, 0.6) 60%,
-						rgba($main-color-light-rgb, 0.4) 90%,
-						rgba($main-color-light-rgb, 0.02) 100%,
-						$main-color-grey);
+				background-image:
+ linear-gradient(90deg, rgba($main-color-light-rgb, 0) 0, rgba($main-color-light-rgb, 0.4) 20%, rgba($main-color-light-rgb, 0.6) 60%, rgba($main-color-light-rgb, 0.4) 90%, rgba($main-color-light-rgb, 0.02) 100%, $main-color-grey);
 			}
 		}
 	}
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
index 52bcbd34d..5598d7c32 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -61,22 +61,20 @@ const StepDesignColors = () => {
 							<span className="theme-colors-preview__title-bar__browser__dot"></span>
 						</div>
 					</div>
-					<div className="theme-colors-preview__live-preview-container">
-						{ ! pattern && (
-							<LivePreview
-								blockGrammer={ '' }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-						{ pattern && (
-							<LivePreview
-								blockGrammer={ pattern }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-					</div>
+					{ ! pattern && (
+						<LivePreview
+							blockGrammer={ '' }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
+					{ pattern && (
+						<LivePreview
+							blockGrammer={ pattern }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
 				</CommonLayout>
 			</GlobalStylesProvider>
 		</DesignStateHandler>
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
index c73a28055..fbf135cca 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
@@ -1,10 +1,12 @@
 .theme-colors-preview {
 	flex: 1;
-	margin: 16px;
+	width: 100%;
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
+	background-color: var(--nfd-onboarding-light-gray-5);
+	padding-top: 20px;
 
 	&__title-bar {
 		width: 70%;
@@ -30,29 +32,4 @@
 			}
 		}
 	}
-
-	&__live-preview-container {
-		width: 70%;
-		min-height: 90vh;
-		overflow: hidden;
-		position: relative;
-		align-items: center;
-		border: 1px solid #e3dfdf;
-		margin-bottom: 30px;
-
-
-		&:hover {
-			cursor: not-allowed;
-		}
-
-		.live-preview {
-
-			&__container {
-
-				&-custom {
-					width: 100%;
-				}
-			}
-		}
-	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js
index ef43f9c33..ecad84ed0 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js
@@ -46,15 +46,20 @@ const StepDesignHeaderMenu = () => {
 							<span className="theme-header-menu-preview__title-bar__browser__dot"></span>
 						</div>
 					</div>
-					<div className="theme-header-menu-preview__live-preview-container">
-						{ pattern && (
-							<LivePreview
-								blockGrammer={ pattern }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-					</div>
+					{ ! pattern && (
+						<LivePreview
+							blockGrammer={ '' }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
+					{ pattern && (
+						<LivePreview
+							blockGrammer={ pattern }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
 				</CommonLayout>
 			</GlobalStylesProvider>
 		</DesignStateHandler>
diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss
index 75ad2a5fe..4b15fe650 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss
@@ -5,58 +5,8 @@
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
-	background-color: #eee;
-
-	&__checkbox {
-		margin: 20px 0;
-		width: 70%;
-		display: inline;
-
-		.components-checkbox-control {
-
-			&__checked {
-				height: 32px;
-				width: 32px;
-				left: 0;
-				top: 0;
-			}
-
-			&__input-container {
-				height: 32px;
-				width: 32px;
-			}
-
-			&__input[type="checkbox"] {
-				height: 32px;
-				width: 32px;
-
-				&:focus {
-					box-shadow: none;
-				}
-			}
-		}
-
-		.components-base-control {
-
-			&__field {
-				display: flex;
-				flex-direction: row;
-			}
-		}
-
-		&__label {
-
-			margin-left: 15px;
-
-			&__hint {
-				color: #757575;
-				display: block;
-				font-style: italic;
-				margin-top: 5px;
-			}
-		}
-
-	}
+	background-color: var(--nfd-onboarding-light-gray-5);
+	padding-top: 20px;
 
 	&__title-bar {
 		width: 70%;
@@ -66,7 +16,6 @@
 		background-color: #ccc;
 		justify-content: space-between;
 		border: 1px solid transparent;
-		margin-top: 20px;
 
 		&__browser {
 			display: flex;
@@ -83,29 +32,4 @@
 			}
 		}
 	}
-
-	&__live-preview-container {
-		width: 70%;
-		min-height: 80vh;
-		overflow: hidden;
-		position: relative;
-		align-items: center;
-		border: 1px solid #e3dfdf;
-		margin-bottom: 30px;
-
-
-		&:hover {
-			cursor: not-allowed;
-		}
-
-		.live-preview {
-
-			&__container {
-
-				&-custom {
-					width: 100%;
-				}
-			}
-		}
-	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
index 6c5bc0ff1..fba1ff6e7 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
@@ -194,22 +194,20 @@ const StepDesignThemeStylesPreview = () => {
 							<span className="theme-styles-preview__title-bar__browser__dot"></span>
 						</div>
 					</div>
-					<div className="theme-styles-preview__live-preview-container">
-						{ ! pattern && (
-							<LivePreview
-								blockGrammer={ '' }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-						{ pattern && (
-							<LivePreview
-								blockGrammer={ pattern }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-					</div>
+					{ ! pattern && (
+						<LivePreview
+							blockGrammer={ '' }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
+					{ pattern && (
+						<LivePreview
+							blockGrammer={ pattern }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
 				</CommonLayout>
 			</GlobalStylesProvider>
 		</DesignStateHandler>
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
index 7e1f1a4d2..d9d13f198 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
-	background-color: #eee;
+	background-color: var(--nfd-onboarding-light-gray-5);
 
 	&__checkbox {
 		margin: 20px 0;
@@ -82,28 +82,4 @@
 			}
 		}
 	}
-
-	&__live-preview-container {
-		width: 70%;
-		min-height: 80vh;
-		overflow: hidden;
-		position: relative;
-		align-items: center;
-		border: 1px solid #e3dfdf;
-		margin-bottom: 30px;
-
-		&:hover {
-			cursor: not-allowed;
-		}
-
-		.live-preview {
-
-			&__container {
-
-				&-custom {
-					width: 100%;
-				}
-			}
-		}
-	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index 6d0bc3a5a..3eb6e727e 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -64,22 +64,20 @@ const StepDesignTypography = () => {
 							<span className="theme-fonts-preview__title-bar__browser__dot"></span>
 						</div>
 					</div>
-					<div className="theme-fonts-preview__live-preview-container">
-						{ ! pattern && (
-							<LivePreview
-								blockGrammer={ '' }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-						{ pattern && (
-							<LivePreview
-								blockGrammer={ pattern }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-					</div>
+					{ ! pattern && (
+						<LivePreview
+							blockGrammer={ '' }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
+					{ pattern && (
+						<LivePreview
+							blockGrammer={ pattern }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
 				</CommonLayout>
 			</GlobalStylesProvider>
 		</DesignStateHandler>
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
index 55d2017eb..2117eb11f 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
@@ -1,10 +1,12 @@
 .theme-fonts-preview {
 	flex: 1;
-	margin: 16px;
+	width: 100%;
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
+	background-color: var(--nfd-onboarding-light-gray-5);
+	padding-top: 20px;
 
 	&__title-bar {
 		width: 70%;
@@ -31,29 +33,4 @@
 		}
 	}
 
-	&__live-preview-container {
-		width: 70%;
-		min-height: 90vh;
-		overflow: hidden;
-		position: relative;
-		align-items: center;
-		border: 1px solid #e3dfdf;
-		margin-bottom: 30px;
-
-
-		&:hover {
-			cursor: not-allowed;
-		}
-
-		.live-preview {
-
-			&__container {
-
-				&-custom {
-					width: 100%;
-				}
-			}
-		}
-	}
-
 }
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index b420b3766..fd3ec319a 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -22,6 +22,7 @@ body {
 		--nfd-onboarding-light-gray-2: #efefef;
 		--nfd-onboarding-light-gray-3: #f2f2f2;
 		--nfd-onboarding-light-gray-4: #a7a7a7;
+		--nfd-onboarding-light-gray-5: #eee;
 		--nfd-onboarding-light-gray-highlighted: #e2e9f4;
 		--nfd-onboarding-dark: #1d2a3b;
 		--nfd-onboarding-border: 219, 219, 219;
@@ -55,6 +56,7 @@ body {
 		--nfd-onboarding-light-gray-2: #efefef;
 		--nfd-onboarding-light-gray-3: #f2f2f2;
 		--nfd-onboarding-light-gray-4: #a7a7a7;
+		--nfd-onboarding-light-gray-5: #eee;
 		--nfd-onboarding-dark: #1e2044;
 		--nfd-onboarding-border: 245, 246, 248;
 		--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary);
@@ -85,6 +87,7 @@ body {
 		--nfd-onboarding-light-gray-2: #efefef;
 		--nfd-onboarding-light-gray-3: #f2f2f2;
 		--nfd-onboarding-light-gray-4: #a7a7a7;
+		--nfd-onboarding-light-gray-5: #eee;
 		--nfd-onboarding-dark: #000;
 		--nfd-onboarding-border: 219, 219, 219;
 		--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary-alt);
diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss
index 91823446f..122527109 100644
--- a/src/OnboardingSPA/styles/_interface.scss
+++ b/src/OnboardingSPA/styles/_interface.scss
@@ -36,4 +36,5 @@ body {
     --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light);
     --nfd-onboarding-footer-fg: var(--nfd-onboarding-dark);
     --nfd-onboarding-footer-bg: var(--nfd-onboarding-light);
+    --nfd-onboarding-light-gray-5: #eee;
 }
\ No newline at end of file