diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
index f6f459d408af..d7f93d3f66f1 100644
--- a/RELEASE-NOTES.txt
+++ b/RELEASE-NOTES.txt
@@ -2,6 +2,7 @@
 
 20.5
 -----
+* [*] Use larger thumbnail previews for recommended themes during site creation [https://github.com/wordpress-mobile/WordPress-Android/pull/16848]
 
 
 20.4
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/SiteDesignRecommendedDimensionProvider.kt b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/SiteDesignRecommendedDimensionProvider.kt
index db5ddbcc73a5..735293153538 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/SiteDesignRecommendedDimensionProvider.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/SiteDesignRecommendedDimensionProvider.kt
@@ -15,4 +15,9 @@ class SiteDesignRecommendedDimensionProvider @Inject constructor(private val con
 
     override val rowHeight: Int
         get() = contextProvider.getContext().resources.getDimensionPixelSize(dimen.hpp_recommended_row_height)
+
+    // For larger images, we must provide a scale of 2.0 to the API due to a limitation in MShots and our endpoint
+    // integration (currently, MShots only supports a scale value of 1 or 2).
+    override val scale: Double
+        get() = if (1f < contextProvider.getContext().resources.displayMetrics.density) 2.0 else 1.0
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt
index d7e0547dffe4..578edc11ec95 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt
@@ -7,7 +7,7 @@ import org.wordpress.android.fluxc.generated.ThemeActionBuilder
 import org.wordpress.android.fluxc.store.ThemeStore
 import org.wordpress.android.fluxc.store.ThemeStore.FetchStarterDesignsPayload
 import org.wordpress.android.fluxc.store.ThemeStore.OnStarterDesignsFetched
-import org.wordpress.android.ui.sitecreation.theme.SiteDesignPickerDimensionProvider
+import org.wordpress.android.ui.sitecreation.theme.SiteDesignRecommendedDimensionProvider
 import org.wordpress.android.util.config.BetaSiteDesignsFeatureConfig
 import javax.inject.Inject
 import kotlin.coroutines.Continuation
@@ -17,7 +17,7 @@ import kotlin.coroutines.suspendCoroutine
 class FetchHomePageLayoutsUseCase @Inject constructor(
     val dispatcher: Dispatcher,
     @Suppress("unused") val themeStore: ThemeStore,
-    private val thumbDimensionProvider: SiteDesignPickerDimensionProvider,
+    private val thumbDimensionProvider: SiteDesignRecommendedDimensionProvider,
     private val betaSiteDesigns: BetaSiteDesignsFeatureConfig
 ) {
     enum class GROUP(val key: String) {
@@ -31,16 +31,18 @@ class FetchHomePageLayoutsUseCase @Inject constructor(
         if (continuation != null) {
             throw IllegalStateException("Fetch already in progress.")
         }
-        val payload = if (betaSiteDesigns.isEnabled()) FetchStarterDesignsPayload(
-                thumbDimensionProvider.previewWidth.toFloat(),
-                thumbDimensionProvider.previewHeight.toFloat(),
-                thumbDimensionProvider.scale.toFloat(),
-                GROUP.STABLE.key, GROUP.BETA.key
-        ) else FetchStarterDesignsPayload(
-                thumbDimensionProvider.previewWidth.toFloat(),
-                thumbDimensionProvider.previewHeight.toFloat(),
-                thumbDimensionProvider.scale.toFloat()
-        )
+
+        val previewScale = thumbDimensionProvider.scale.toFloat()
+        // Since dimensions are scaled in the WPCOM endpoint for MShots, we divide by the scale factor here to avoid
+        // having the dimensions scaled twice.
+        @Suppress("ForbiddenComment")
+        // TODO: revisit this after the endpoint is modified to scale on the client instead.
+        val previewWidth = thumbDimensionProvider.previewWidth.toFloat() / previewScale
+        val previewHeight = thumbDimensionProvider.previewHeight.toFloat() / previewScale
+        val groups = if (betaSiteDesigns.isEnabled()) arrayOf(GROUP.STABLE.key, GROUP.BETA.key) else emptyArray()
+        @Suppress("SpreadOperator")
+        val payload = FetchStarterDesignsPayload(previewWidth, previewHeight, previewScale, *groups)
+
         return suspendCoroutine { cont ->
             continuation = cont
             dispatcher.dispatch(ThemeActionBuilder.newFetchStarterDesignsAction(payload))
diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml
index cda0c8e6e854..77f75d853b7c 100644
--- a/WordPress/src/main/res/values/dimens.xml
+++ b/WordPress/src/main/res/values/dimens.xml
@@ -663,9 +663,9 @@
     <dimen name="hpp_layout_card_height">260dp</dimen>
     <dimen name="hpp_layout_card_width">200dp</dimen>
     <dimen name="hpp_layouts_row_height">330dp</dimen>
-    <dimen name="hpp_recommended_card_height">260dp</dimen>
-    <dimen name="hpp_recommended_card_width">200dp</dimen>
-    <dimen name="hpp_recommended_row_height">350dp</dimen>
+    <dimen name="hpp_recommended_card_height">416dp</dimen>
+    <dimen name="hpp_recommended_card_width">320dp</dimen>
+    <dimen name="hpp_recommended_row_height">500dp</dimen>
     <dimen name="hpp_recommended_subtitle_margin">5dp</dimen>
 
     <!-- Site Intent Question -->
diff --git a/WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt b/WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt
index 047bb466319d..c6c5f13d965f 100644
--- a/WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt
+++ b/WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt
@@ -32,7 +32,7 @@ class FetchHomePageLayoutsUseCaseTest {
 
     @Mock lateinit var dispatcher: Dispatcher
     @Mock lateinit var store: ThemeStore
-    @Mock lateinit var thumbDimensionProvider: SiteDesignPickerDimensionProvider
+    @Mock lateinit var thumbDimensionProvider: SiteDesignRecommendedDimensionProvider
     @Mock lateinit var betaSiteDesigns: BetaSiteDesignsFeatureConfig
 
     private lateinit var useCase: FetchHomePageLayoutsUseCase