diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/DynamicEdgeToEdgeActivity.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/DynamicEdgeToEdgeActivity.kt
new file mode 100644
index 00000000000..6d24de48c26
--- /dev/null
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/DynamicEdgeToEdgeActivity.kt
@@ -0,0 +1,8 @@
+package com.woocommerce.android.ui.login
+
+// The prologue screen requires an edge-to-edge layout, whereas the login screens do not. This interface allows
+// LoginActivity to enable edge-edge layout needed and disable it when the login screens are displayed.
+interface DynamicEdgeToEdgeActivity {
+    fun enableDynamicEdgeToEdge(forceDarkStatusBar: Boolean = false)
+    fun disableDynamicEdgeToEdge()
+}
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginActivity.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginActivity.kt
index 852ad21ba2f..cec35684441 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginActivity.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginActivity.kt
@@ -7,6 +7,7 @@ import android.os.Bundle
 import android.os.Parcelable
 import android.view.MenuItem
 import androidx.activity.OnBackPressedCallback
+import androidx.activity.SystemBarStyle
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import androidx.core.view.ViewCompat
@@ -97,11 +98,12 @@ import kotlin.text.RegexOption.IGNORE_CASE
 @AndroidEntryPoint
 class LoginActivity :
     AppCompatActivity(),
+    HasAndroidInjector,
+    DynamicEdgeToEdgeActivity,
     LoginListener,
     GoogleListener,
     PrologueListener,
     PrologueCarouselListener,
-    HasAndroidInjector,
     LoginNoJetpackListener,
     LoginEmailHelpDialogFragment.Listener,
     WooLoginEmailFragment.Listener,
@@ -158,10 +160,6 @@ class LoginActivity :
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        // The Prologue screen requires an edge-to-edge layout, but the login screens do not. Since both the prologue
-        // and login screens are part of this activity, insets are manually managed based on the current fragment using
-        // the addWindowInsets() and removeWindowInsets() functions.
-        enableEdgeToEdge()
 
         ChromeCustomTabUtils.registerForPartialTabUsage(this)
         onBackPressedDispatcher.addCallback(
@@ -331,17 +329,32 @@ class LoginActivity :
 
     override fun onPrimaryButtonClicked() {
         unifiedLoginTracker.trackClick(Click.LOGIN_WITH_SITE_ADDRESS)
-        addWindowInsets()
+        disableDynamicEdgeToEdge()
         loginViaSiteAddress()
     }
 
     override fun onSecondaryButtonClicked() {
         unifiedLoginTracker.trackClick(Click.CONTINUE_WITH_WORDPRESS_COM)
-        addWindowInsets()
+        disableDynamicEdgeToEdge()
         startLoginViaWPCom()
     }
 
-    private fun addWindowInsets() {
+    override fun enableDynamicEdgeToEdge(forceDarkStatusBar: Boolean) {
+        if (forceDarkStatusBar) {
+            enableEdgeToEdge(statusBarStyle = SystemBarStyle.dark(android.graphics.Color.TRANSPARENT))
+        } else {
+            enableEdgeToEdge()
+        }
+
+        // Remove system bar insets from the fragment's root
+        ViewCompat.setOnApplyWindowInsetsListener(binding.snackRoot, null)
+        binding.snackRoot.updatePadding(0, 0, 0, 0)
+    }
+
+    override fun disableDynamicEdgeToEdge() {
+        enableEdgeToEdge()
+
+        // Add system bar insets to the fragment's root
         ViewCompat.setOnApplyWindowInsetsListener(binding.snackRoot) { v, windowInsets ->
             val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
             v.updatePadding(insets.left, insets.top, insets.right, insets.bottom)
@@ -349,19 +362,10 @@ class LoginActivity :
         }
     }
 
-    private fun removeWindowInsets() {
-        ViewCompat.setOnApplyWindowInsetsListener(binding.snackRoot, null)
-        binding.snackRoot.updatePadding(0, 0, 0, 0)
-    }
-
     override fun onNewToWooButtonClicked() {
         ChromeCustomTabUtils.launchUrl(this, AppUrls.HOSTING_OPTIONS_DOC)
     }
 
-    override fun onEdgeToEdgeLayoutForPrologue() = removeWindowInsets()
-
-    override fun onEdgeToEdgeLayoutForCarousel() = removeWindowInsets()
-
     private fun showMainActivityAndFinish() {
         experimentTracker.log(ExperimentTracker.LOGIN_SUCCESSFUL_EVENT)
 
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueCarouselFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueCarouselFragment.kt
index 5a2378a343d..e0b9598a0de 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueCarouselFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueCarouselFragment.kt
@@ -35,7 +35,6 @@ class LoginPrologueCarouselFragment : Fragment(R.layout.fragment_login_prologue_
 
     interface PrologueCarouselListener {
         fun onCarouselFinished()
-        fun onEdgeToEdgeLayoutForCarousel()
     }
 
     @Inject
@@ -50,9 +49,9 @@ class LoginPrologueCarouselFragment : Fragment(R.layout.fragment_login_prologue_
     private var prologueCarouselListener: PrologueCarouselListener? = null
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        val binding = FragmentLoginPrologueCarouselBinding.bind(view)
+        (activity as? DynamicEdgeToEdgeActivity)?.enableDynamicEdgeToEdge()
 
-        prologueCarouselListener?.onEdgeToEdgeLayoutForCarousel()
+        val binding = FragmentLoginPrologueCarouselBinding.bind(view)
 
         val isTablet = DisplayUtils.isTablet(context) || DisplayUtils.isXLargeTablet(context)
         ViewCompat.setOnApplyWindowInsetsListener(binding.buttonSkip) { v, windowInsets ->
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueFragment.kt
index 69e0f87fc9c..2c9e45bcf4c 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueFragment.kt
@@ -3,6 +3,10 @@ package com.woocommerce.android.ui.login
 import android.content.Context
 import android.os.Bundle
 import android.view.View
+import android.view.ViewGroup.MarginLayoutParams
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.updateLayoutParams
 import androidx.fragment.app.Fragment
 import com.woocommerce.android.AppPrefsWrapper
 import com.woocommerce.android.R
@@ -24,7 +28,6 @@ class LoginPrologueFragment : Fragment(R.layout.fragment_login_prologue) {
         fun onPrimaryButtonClicked()
         fun onSecondaryButtonClicked()
         fun onNewToWooButtonClicked()
-        fun onEdgeToEdgeLayoutForPrologue()
     }
 
     @Inject
@@ -36,9 +39,15 @@ class LoginPrologueFragment : Fragment(R.layout.fragment_login_prologue) {
     private var prologueListener: PrologueListener? = null
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        prologueListener?.onEdgeToEdgeLayoutForPrologue()
+        (activity as? DynamicEdgeToEdgeActivity)?.enableDynamicEdgeToEdge(forceDarkStatusBar = true)
 
         with(FragmentLoginPrologueBinding.bind(view)) {
+            ViewCompat.setOnApplyWindowInsetsListener(loginButtons) { v, windowInsets ->
+                val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
+                v.updateLayoutParams<MarginLayoutParams> { bottomMargin = insets.bottom }
+                WindowInsetsCompat.CONSUMED
+            }
+
             buttonLoginStore.setOnClickListener {
                 // Login with site address
                 prologueListener?.onPrimaryButtonClicked()
diff --git a/WooCommerce/src/main/res/drawable-hdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-hdpi/img_prologue.webp
index c8b90afe965..8d98b64e29c 100644
Binary files a/WooCommerce/src/main/res/drawable-hdpi/img_prologue.webp and b/WooCommerce/src/main/res/drawable-hdpi/img_prologue.webp differ
diff --git a/WooCommerce/src/main/res/drawable-ldpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-ldpi/img_prologue.webp
deleted file mode 100644
index f619f8a2f4f..00000000000
Binary files a/WooCommerce/src/main/res/drawable-ldpi/img_prologue.webp and /dev/null differ
diff --git a/WooCommerce/src/main/res/drawable-mdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-mdpi/img_prologue.webp
index 61b8cec3d8a..d1d6336c223 100644
Binary files a/WooCommerce/src/main/res/drawable-mdpi/img_prologue.webp and b/WooCommerce/src/main/res/drawable-mdpi/img_prologue.webp differ
diff --git a/WooCommerce/src/main/res/drawable-night-hdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-night-hdpi/img_prologue.webp
deleted file mode 100644
index 11aae21bc33..00000000000
Binary files a/WooCommerce/src/main/res/drawable-night-hdpi/img_prologue.webp and /dev/null differ
diff --git a/WooCommerce/src/main/res/drawable-night-ldpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-night-ldpi/img_prologue.webp
deleted file mode 100644
index db7a7da3766..00000000000
Binary files a/WooCommerce/src/main/res/drawable-night-ldpi/img_prologue.webp and /dev/null differ
diff --git a/WooCommerce/src/main/res/drawable-night-mdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-night-mdpi/img_prologue.webp
deleted file mode 100644
index dc77a070a27..00000000000
Binary files a/WooCommerce/src/main/res/drawable-night-mdpi/img_prologue.webp and /dev/null differ
diff --git a/WooCommerce/src/main/res/drawable-night-xhdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-night-xhdpi/img_prologue.webp
deleted file mode 100644
index 8cbbda2cc7a..00000000000
Binary files a/WooCommerce/src/main/res/drawable-night-xhdpi/img_prologue.webp and /dev/null differ
diff --git a/WooCommerce/src/main/res/drawable-night-xxhdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-night-xxhdpi/img_prologue.webp
deleted file mode 100644
index 11ae77b984e..00000000000
Binary files a/WooCommerce/src/main/res/drawable-night-xxhdpi/img_prologue.webp and /dev/null differ
diff --git a/WooCommerce/src/main/res/drawable-night-xxxhdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-night-xxxhdpi/img_prologue.webp
deleted file mode 100644
index f0d1b281b3b..00000000000
Binary files a/WooCommerce/src/main/res/drawable-night-xxxhdpi/img_prologue.webp and /dev/null differ
diff --git a/WooCommerce/src/main/res/drawable-xhdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-xhdpi/img_prologue.webp
index 500c70eaad8..71d7569db33 100644
Binary files a/WooCommerce/src/main/res/drawable-xhdpi/img_prologue.webp and b/WooCommerce/src/main/res/drawable-xhdpi/img_prologue.webp differ
diff --git a/WooCommerce/src/main/res/drawable-xxhdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-xxhdpi/img_prologue.webp
index 8cb1a623419..c0413592bf4 100644
Binary files a/WooCommerce/src/main/res/drawable-xxhdpi/img_prologue.webp and b/WooCommerce/src/main/res/drawable-xxhdpi/img_prologue.webp differ
diff --git a/WooCommerce/src/main/res/drawable-xxxhdpi/img_prologue.webp b/WooCommerce/src/main/res/drawable-xxxhdpi/img_prologue.webp
index f9f0f0a6516..f600e4c80d4 100644
Binary files a/WooCommerce/src/main/res/drawable-xxxhdpi/img_prologue.webp and b/WooCommerce/src/main/res/drawable-xxxhdpi/img_prologue.webp differ
diff --git a/WooCommerce/src/main/res/drawable/img_prologue_bg.xml b/WooCommerce/src/main/res/drawable/img_prologue_bg.xml
deleted file mode 100644
index 54411bc4b29..00000000000
--- a/WooCommerce/src/main/res/drawable/img_prologue_bg.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="663dp"
-    android:height="807dp"
-    android:viewportWidth="663"
-    android:viewportHeight="807">
-    <path
-        android:fillColor="#F6F7F7"
-        android:fillType="evenOdd"
-        android:pathData="M162.77,-98.62c58.75,-73.21 213.32,-44.72 336.75,34.02 123.43,78.74 201.48,175.95 142.73,249.16 -39.9,49.72 -123.14,65.64 -211.11,46.06a557.94,557.94 0,0 1,26.47 15.88c160.29,102.25 229.18,261.23 153.86,355.09 -23.06,28.73 -56.95,48.03 -97.49,58.04 92.62,72.22 140.07,156.36 83.95,226.3 -65.39,81.48 -223.91,88.67 -347.34,9.93S51.72,685.92 117.1,604.44c11.82,-14.73 26.69,-26.04 43.85,-34.21C17.9,468 -40.45,320.34 31.01,231.29c52.89,-65.91 162.83,-82.18 279.13,-50.61a418.86,418.86 0,0 1,-2.74 -1.73C183.96,100.21 104.03,-25.41 162.77,-98.62Z" />
-</vector>
diff --git a/WooCommerce/src/main/res/drawable-night/img_prologue_bg.xml b/WooCommerce/src/main/res/drawable/img_prologue_bg_white.xml
similarity index 95%
rename from WooCommerce/src/main/res/drawable-night/img_prologue_bg.xml
rename to WooCommerce/src/main/res/drawable/img_prologue_bg_white.xml
index 732f293adfe..5762514a387 100644
--- a/WooCommerce/src/main/res/drawable-night/img_prologue_bg.xml
+++ b/WooCommerce/src/main/res/drawable/img_prologue_bg_white.xml
@@ -4,7 +4,7 @@
     android:viewportWidth="663"
     android:viewportHeight="807">
     <path
-        android:fillColor="#2C3338"
+        android:fillColor="@color/white"
         android:fillType="evenOdd"
         android:pathData="M162.77,-98.62c58.75,-73.21 213.32,-44.72 336.75,34.02 123.43,78.74 201.48,175.95 142.73,249.16 -39.9,49.72 -123.14,65.64 -211.11,46.06a557.94,557.94 0,0 1,26.47 15.88c160.29,102.25 229.18,261.23 153.86,355.09 -23.06,28.73 -56.95,48.03 -97.49,58.04 92.62,72.22 140.07,156.36 83.95,226.3 -65.39,81.48 -223.91,88.67 -347.34,9.93S51.72,685.92 117.1,604.44c11.82,-14.73 26.69,-26.04 43.85,-34.21C17.9,468 -40.45,320.34 31.01,231.29c52.89,-65.91 162.83,-82.18 279.13,-50.61a418.86,418.86 0,0 1,-2.74 -1.73C183.96,100.21 104.03,-25.41 162.77,-98.62Z" />
 </vector>
diff --git a/WooCommerce/src/main/res/layout-land/fragment_login_prologue.xml b/WooCommerce/src/main/res/layout-land/fragment_login_prologue.xml
index d7dbc803b05..35199433d81 100644
--- a/WooCommerce/src/main/res/layout-land/fragment_login_prologue.xml
+++ b/WooCommerce/src/main/res/layout-land/fragment_login_prologue.xml
@@ -1,110 +1,106 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_surface">
+    android:background="@color/prologue_login_background_color">
+
+    <ImageView
+        android:id="@+id/image_prologue_bg"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:adjustViewBounds="true"
+        android:importantForAccessibility="no"
+        android:scaleType="fitCenter"
+        android:src="@drawable/img_prologue_bg_white"
+        app:tint="@color/prologue_login_shape_color" />
 
     <ImageView
         android:id="@+id/image_prologue"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
-        android:layout_marginTop="@dimen/major_200"
+        android:layout_marginTop="96dp"
         android:importantForAccessibility="no"
         android:src="@drawable/ic_woo_logo_white_99dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <ImageView
-        android:id="@+id/image_prologue_bg"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/major_350"
-        android:adjustViewBounds="true"
-        android:importantForAccessibility="no"
-        android:scaleType="fitXY"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/image_prologue"
-        app:srcCompat="@drawable/img_prologue_bg" />
-
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/prologueIntro"
         style="@style/Woo.TextView.Headline6"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/major_200"
+        android:layout_marginVertical="0dp"
         android:gravity="center_horizontal"
         android:text="@string/simplified_login_prologue_intro"
+        android:textColor="@color/white"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@id/prologueTitle"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/image_prologue" />
+        app:layout_constraintTop_toBottomOf="@id/image_prologue"
+        app:layout_constraintVertical_chainStyle="packed"
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent" />
 
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/prologueTitle"
         style="@style/Woo.TextView.Subtitle1"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="0dp"
         android:gravity="center"
         android:text="@string/simplified_login_prologue_title"
+        android:textColor="@color/white"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@+id/loginButtons"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/prologueIntro" />
+        app:layout_constraintTop_toBottomOf="@id/prologueIntro"
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent" />
 
     <LinearLayout
         android:id="@+id/loginButtons"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toTopOf="@id/button_start_new_store"
+        android:orientation="vertical"
+        android:paddingHorizontal="16dp"
+        android:paddingBottom="@dimen/prologue_button_skip_bottom_margin"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent">
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent">
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_login_wpcom"
             style="@style/Woo.Button.Colored"
-            android:layout_width="0dp"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginEnd="@dimen/minor_100"
-            android:layout_weight="1"
             android:text="@string/login_wpcom"
             android:textAllCaps="false"
             android:visibility="gone" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_login_store"
-            style="@style/Woo.Button.Colored.Circle"
-            android:layout_width="0dp"
+            style="@style/Woo.Button.Colored.White"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginEnd="@dimen/major_100"
-            android:layout_weight="1"
+            android:backgroundTint="@color/prologue_login_button_color"
             android:text="@string/login_store_address"
             android:textAllCaps="false"
-            tools:visibility="visible" />
-    </LinearLayout>
+            android:textColor="@color/color_on_surface" />
 
-    <com.google.android.material.button.MaterialButton
-        android:id="@+id/button_start_new_store"
-        style="@style/Woo.Button.TextButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/minor_100"
-        android:layout_marginEnd="@dimen/major_100"
-        android:layout_marginBottom="@dimen/minor_100"
-        android:text="@string/login_prologue_start_new_store"
-        android:textAllCaps="false"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_start_new_store"
+            style="@style/Woo.Button.TextButton"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/minor_50"
+            android:text="@string/login_prologue_start_new_store"
+            android:textAllCaps="false"
+            android:textColor="@color/white" />
+    </LinearLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/WooCommerce/src/main/res/layout-land/fragment_login_prologue_carousel.xml b/WooCommerce/src/main/res/layout-land/fragment_login_prologue_carousel.xml
index a99ebc8f197..886e7c46a8b 100644
--- a/WooCommerce/src/main/res/layout-land/fragment_login_prologue_carousel.xml
+++ b/WooCommerce/src/main/res/layout-land/fragment_login_prologue_carousel.xml
@@ -12,7 +12,8 @@
         android:layout_height="match_parent"
         android:importantForAccessibility="no"
         android:scaleType="fitCenter"
-        android:src="@drawable/img_prologue_bg" />
+        android:src="@drawable/img_prologue_bg_white"
+        app:tint="@color/prologue_carousel_shape_color" />
 
     <ImageView
         android:id="@+id/image_prologue"
diff --git a/WooCommerce/src/main/res/layout-sw600dp/fragment_login_prologue.xml b/WooCommerce/src/main/res/layout-sw600dp/fragment_login_prologue.xml
index 9c4853b22c2..985e1f3ce8d 100644
--- a/WooCommerce/src/main/res/layout-sw600dp/fragment_login_prologue.xml
+++ b/WooCommerce/src/main/res/layout-sw600dp/fragment_login_prologue.xml
@@ -4,124 +4,120 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_surface">
+    android:background="@color/prologue_login_background_color">
 
     <ImageView
-        android:id="@+id/image_prologue"
+        android:id="@+id/image_prologue_bg"
         android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_centerHorizontal="true"
-        android:layout_marginTop="@dimen/image_major_64"
-        android:layout_marginBottom="@dimen/image_major_72"
+        android:layout_height="match_parent"
+        android:adjustViewBounds="true"
         android:importantForAccessibility="no"
-        android:src="@drawable/ic_woo_logo_white_99dp"
+        android:scaleType="centerCrop"
+        android:src="@drawable/img_prologue_bg_white"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:tint="@color/prologue_login_shape_color" />
 
     <ImageView
-        android:id="@+id/image_prologue_bg"
-        android:layout_width="match_parent"
+        android:id="@+id/image_prologue"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/major_350"
-        android:adjustViewBounds="true"
+        android:layout_marginTop="96dp"
         android:importantForAccessibility="no"
-        android:scaleType="fitXY"
-        app:layout_constraintBottom_toBottomOf="parent"
+        android:src="@drawable/ic_woo_logo_white_99dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/image_prologue"
-        app:srcCompat="@drawable/img_prologue_bg" />
+        app:layout_constraintTop_toTopOf="parent" />
 
     <ImageView
         android:id="@+id/imageView"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_marginTop="@dimen/major_400"
-        android:adjustViewBounds="true"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
         android:importantForAccessibility="no"
         android:src="@drawable/img_prologue"
         app:layout_constraintBottom_toTopOf="@id/prologueIntro"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/image_prologue"
-        app:layout_constraintWidth_percent="0.6" />
+        app:layout_constraintVertical_chainStyle="packed" />
 
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/prologueIntro"
         style="@style/Woo.TextView.Headline6"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:layout_marginTop="55dp"
+        android:layout_marginBottom="0dp"
         android:gravity="center_horizontal"
         android:text="@string/simplified_login_prologue_intro"
+        android:textColor="@color/white"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@id/prologueTitle"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/imageView" />
+        app:layout_constraintTop_toBottomOf="@id/imageView"
+        app:layout_constraintVertical_chainStyle="packed"
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent" />
 
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/prologueTitle"
         style="@style/Woo.TextView.Subtitle1"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="0dp"
         android:gravity="center_horizontal"
         android:text="@string/simplified_login_prologue_title"
         android:textAlignment="gravity"
+        android:textColor="@color/white"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@id/loginButtons"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/prologueIntro"
-        app:layout_constraintWidth_percent="0.55" />
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent" />
 
     <LinearLayout
         android:id="@+id/loginButtons"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/major_400"
         android:orientation="vertical"
+        android:paddingBottom="@dimen/prologue_button_skip_bottom_margin"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/prologueTitle">
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent">
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_login_wpcom"
             style="@style/Woo.Button.Colored"
-            android:layout_width="@dimen/prologue_button_wide"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="center_horizontal"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginEnd="@dimen/major_100"
             android:text="@string/login_wpcom"
             android:textAllCaps="false"
             android:visibility="gone" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_login_store"
-            style="@style/Woo.Button.Colored.Circle"
-            android:layout_width="@dimen/prologue_button_wide"
+            style="@style/Woo.Button.Colored.White"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="center_horizontal"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginTop="@dimen/minor_25"
-            android:layout_marginEnd="@dimen/major_100"
-            android:layout_marginBottom="@dimen/major_100"
+            android:backgroundTint="@color/prologue_login_button_color"
             android:text="@string/login_store_address"
             android:textAllCaps="false"
-            tools:visibility="visible" />
+            android:textColor="@color/color_on_surface" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_start_new_store"
             style="@style/Woo.Button.TextButton"
-            android:layout_width="@dimen/prologue_button_wide"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="center_horizontal"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginEnd="@dimen/major_100"
-            android:layout_marginBottom="@dimen/major_150"
+            android:layout_marginTop="4dp"
             android:text="@string/login_prologue_start_new_store"
-            android:textAllCaps="false" />
+            android:textAllCaps="false"
+            android:textColor="@color/white" />
     </LinearLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/WooCommerce/src/main/res/layout-sw600dp/fragment_login_prologue_carousel.xml b/WooCommerce/src/main/res/layout-sw600dp/fragment_login_prologue_carousel.xml
index 3929e96275b..ea7a2892c37 100644
--- a/WooCommerce/src/main/res/layout-sw600dp/fragment_login_prologue_carousel.xml
+++ b/WooCommerce/src/main/res/layout-sw600dp/fragment_login_prologue_carousel.xml
@@ -13,9 +13,10 @@
         android:adjustViewBounds="true"
         android:importantForAccessibility="no"
         android:scaleType="centerCrop"
-        android:src="@drawable/img_prologue_bg"
+        android:src="@drawable/img_prologue_bg_white"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintStart_toStartOf="parent"
+        app:tint="@color/prologue_carousel_shape_color" />
 
     <ImageView
         android:id="@+id/image_prologue"
diff --git a/WooCommerce/src/main/res/layout/fragment_login_prologue.xml b/WooCommerce/src/main/res/layout/fragment_login_prologue.xml
index d69248a2183..6200eccbce6 100644
--- a/WooCommerce/src/main/res/layout/fragment_login_prologue.xml
+++ b/WooCommerce/src/main/res/layout/fragment_login_prologue.xml
@@ -1,30 +1,25 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_surface">
+    android:background="@color/prologue_login_background_color">
 
     <ImageView
         android:id="@+id/image_prologue_bg"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_marginTop="100dp"
         android:adjustViewBounds="true"
         android:importantForAccessibility="no"
-        android:scaleType="fitXY"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:srcCompat="@drawable/img_prologue_bg" />
+        android:scaleType="centerCrop"
+        android:src="@drawable/img_prologue_bg_white"
+        app:tint="@color/prologue_login_shape_color" />
 
     <ImageView
         android:id="@+id/image_prologue"
         android:layout_width="wrap_content"
-        android:layout_height="@dimen/prologue_logo_height"
-        android:layout_centerHorizontal="true"
-        android:layout_marginTop="@dimen/major_300"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="96dp"
         android:importantForAccessibility="no"
         android:src="@drawable/ic_woo_logo_white_99dp"
         app:layout_constraintEnd_toEndOf="parent"
@@ -33,42 +28,45 @@
 
     <ImageView
         android:id="@+id/imageView"
-        android:layout_width="0dp"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/major_400"
-        android:adjustViewBounds="true"
         android:importantForAccessibility="no"
         android:src="@drawable/img_prologue"
         app:layout_constraintBottom_toTopOf="@id/prologueIntro"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintWidth_percent="0.8" />
+        app:layout_constraintTop_toBottomOf="@id/image_prologue"
+        app:layout_constraintVertical_chainStyle="packed" />
 
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/prologueIntro"
         style="@style/Woo.TextView.Headline6"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:layout_marginTop="55dp"
+        android:layout_marginBottom="0dp"
         android:gravity="center_horizontal"
-        android:paddingStart="@dimen/major_350"
-        android:paddingEnd="@dimen/major_350"
         android:text="@string/simplified_login_prologue_intro"
+        android:textColor="@color/white"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@id/prologueTitle"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@id/prologueTitle" />
+        app:layout_constraintTop_toBottomOf="@id/imageView"
+        app:layout_constraintVertical_chainStyle="packed" />
 
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/prologueTitle"
         style="@style/Woo.TextView.Subtitle1"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:gravity="center"
-        android:paddingStart="@dimen/major_350"
-        android:paddingEnd="@dimen/major_350"
+        android:layout_marginHorizontal="16dp"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="0dp"
+        android:gravity="center_horizontal"
         android:text="@string/simplified_login_prologue_title"
         android:textAlignment="gravity"
+        android:textColor="@color/white"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@id/loginButtons"
         app:layout_constraintEnd_toEndOf="parent"
@@ -79,43 +77,38 @@
         android:id="@+id/loginButtons"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/major_150"
         android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/prologueTitle">
+        android:paddingHorizontal="16dp"
+        android:paddingBottom="@dimen/prologue_button_skip_bottom_margin"
+        app:layout_constraintBottom_toBottomOf="parent">
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_login_wpcom"
             style="@style/Woo.Button.Colored"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginEnd="@dimen/major_100"
             android:text="@string/login_wpcom"
             android:textAllCaps="false"
             android:visibility="gone" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_login_store"
-            style="@style/Woo.Button.Colored.Circle"
+            style="@style/Woo.Button.Colored.White"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginEnd="@dimen/major_100"
+            android:backgroundTint="@color/prologue_login_button_color"
             android:text="@string/login_store_address"
             android:textAllCaps="false"
-            tools:visibility="visible" />
+            android:textColor="@color/color_on_surface" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_start_new_store"
             style="@style/Woo.Button.TextButton"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/major_100"
             android:layout_marginTop="@dimen/minor_50"
-            android:layout_marginEnd="@dimen/major_100"
-            android:layout_marginBottom="@dimen/major_150"
             android:text="@string/login_prologue_start_new_store"
-            android:textAllCaps="false" />
+            android:textAllCaps="false"
+            android:textColor="@color/white" />
     </LinearLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/WooCommerce/src/main/res/layout/fragment_login_prologue_carousel.xml b/WooCommerce/src/main/res/layout/fragment_login_prologue_carousel.xml
index d4bcd264577..b73249bf9ae 100644
--- a/WooCommerce/src/main/res/layout/fragment_login_prologue_carousel.xml
+++ b/WooCommerce/src/main/res/layout/fragment_login_prologue_carousel.xml
@@ -12,7 +12,8 @@
         android:layout_height="match_parent"
         android:importantForAccessibility="no"
         android:scaleType="centerCrop"
-        android:src="@drawable/img_prologue_bg" />
+        android:src="@drawable/img_prologue_bg_white"
+        app:tint="@color/prologue_carousel_shape_color" />
 
     <ImageView
         android:id="@+id/image_prologue"
diff --git a/WooCommerce/src/main/res/values-night/colors_base.xml b/WooCommerce/src/main/res/values-night/colors_base.xml
index 774105f959c..f715702c20a 100644
--- a/WooCommerce/src/main/res/values-night/colors_base.xml
+++ b/WooCommerce/src/main/res/values-night/colors_base.xml
@@ -65,6 +65,12 @@
     <color name="graph_grid_color">@color/woo_white_alpha_012</color>
     <color name="graph_highlight_color">@color/woo_white</color>
 
+    <!-- Prologue colors-->
+    <color name="prologue_carousel_shape_color">@color/woo_gray_80</color>
+    <color name="prologue_login_background_color">@color/color_surface</color>
+    <color name="prologue_login_shape_color">@color/woo_gray_80</color>
+    <color name="prologue_login_button_color">@color/color_primary</color>
+
     <!--
         Rating widget colors
     -->
diff --git a/WooCommerce/src/main/res/values/colors_base.xml b/WooCommerce/src/main/res/values/colors_base.xml
index e7435f3b823..5b4768e29db 100644
--- a/WooCommerce/src/main/res/values/colors_base.xml
+++ b/WooCommerce/src/main/res/values/colors_base.xml
@@ -105,6 +105,12 @@
     <color name="graph_no_data_text_color">@color/color_on_surface</color>
     <color name="graph_label_color">@color/color_on_surface_medium</color>
 
+    <!-- Prologue colors-->
+    <color name="prologue_carousel_shape_color">@color/woo_gray_0</color>
+    <color name="prologue_login_background_color">@color/woo_purple_70</color>
+    <color name="prologue_login_shape_color">@color/woo_purple_40</color>
+    <color name="prologue_login_button_color">@color/white</color>
+
     <!--
         Rating widget colors
     -->
diff --git a/WooCommerce/src/main/res/values/colors_login.xml b/WooCommerce/src/main/res/values/colors_login.xml
index edc3f8d0720..51f9799fe13 100644
--- a/WooCommerce/src/main/res/values/colors_login.xml
+++ b/WooCommerce/src/main/res/values/colors_login.xml
@@ -3,6 +3,5 @@
     Override colors in the WordPressLoginFlow library in this file.
 -->
 <resources>
-<!--    <color name="login_input_label_static_text_color">@color/color_on_surface_disabled</color>-->
     <color name="login_secondary_button_icon_tint_color">@color/color_on_surface_disabled</color>
 </resources>
diff --git a/WooCommerce/src/main/res/values/dimens_base.xml b/WooCommerce/src/main/res/values/dimens_base.xml
index de2b0732fda..a50c4f5fb7b 100644
--- a/WooCommerce/src/main/res/values/dimens_base.xml
+++ b/WooCommerce/src/main/res/values/dimens_base.xml
@@ -138,8 +138,6 @@ so that's the baseline as defined in `major_100`.
     <dimen name="progress_bar_large">91dp</dimen>
     <dimen name="whats_new_dialog_heading_top_margin">64dp</dimen>
     <dimen name="card_reader_manuals_divider">105dp</dimen>
-    <dimen name="prologue_logo_height">36dp</dimen>
-    <dimen name="prologue_button_wide">300dp</dimen>
     <dimen name="support_request_message_height">400dp</dimen>
     <dimen name="multiline_textfield_height">155dp</dimen>
     <dimen name="edit_percentage_max_width">180dp</dimen>
diff --git a/WooCommerce/src/main/res/values/wc_colors_base.xml b/WooCommerce/src/main/res/values/wc_colors_base.xml
index dc9c0c6006d..f213a0e95b6 100644
--- a/WooCommerce/src/main/res/values/wc_colors_base.xml
+++ b/WooCommerce/src/main/res/values/wc_colors_base.xml
@@ -7,6 +7,7 @@
     <color name="woo_purple_40">#873EFF</color>
     <color name="woo_purple_50">#720EEC</color>
     <color name="woo_purple_60">#6108CE</color>
+    <color name="woo_purple_70">#5007AA</color>
     <color name="woo_purple_80">#3C087E</color>
     <color name="woo_purple_90">#2C045D</color>
     <color name="woo_purple_dark_secondary">#99EBEBF5</color>