diff.patch

diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx
index 090a9eab53..8284ad01c6 100644
--- a/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx
+++ b/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx
@@ -141,9 +141,13 @@ const FontSelect: React.FunctionComponent = () => {
 
 							return (
 								<Button
-									className={ classnames( 'style-preview__font-option', {
-										'is-selected': isSelected,
-									} ) }
+									className={ classnames(
+										'style-preview__font-option',
+										'style-preview__mobile-font-option',
+										{
+											'is-selected': isSelected,
+										}
+									) }
 									onClick={ () => setFonts( fontPair ) }
 									key={ headings + base }
 								>
diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/style.scss b/client/landing/gutenboarding/onboarding-block/style-preview/style.scss
index 2309cacc99..21d2806c09 100644
--- a/client/landing/gutenboarding/onboarding-block/style-preview/style.scss
+++ b/client/landing/gutenboarding/onboarding-block/style-preview/style.scss
@@ -183,9 +183,10 @@
 
 .style-preview__font-options-mobile-options {
 	display: none;
+	border: 1px solid var( --studio-gray-10 );
+	border-top: none;
 
 	&.is-open {
-		margin-top: 8px;
 		display: block;
 	}
 }
@@ -233,6 +234,10 @@
 	// for IE, see https://github.com/Automattic/wp-calypso/pull/40881#issuecomment-610836378
 	vertical-align: top;
 
+	&.style-preview__mobile-font-option {
+		box-shadow: none;
+	}
+
 	+ .style-preview__font-option {
 		margin-top: 8px;