diff --git a/library/ui-styles/src/main/res/values-sw600dp/dimens.xml b/library/ui-styles/src/main/res/values-sw600dp/dimens.xml
index 204d663d9c..f399a350b1 100644
--- a/library/ui-styles/src/main/res/values-sw600dp/dimens.xml
+++ b/library/ui-styles/src/main/res/values-sw600dp/dimens.xml
@@ -2,4 +2,8 @@
 <resources>
     <!-- Navigation Drawer -->
     <dimen name="navigation_drawer_max_width">400dp</dimen>
+
+    <!--  Onboarding   -->
+    <item name="ftue_auth_gutter_start_percent" format="float" type="dimen">0.25</item>
+    <item name="ftue_auth_gutter_end_percent" format="float" type="dimen">0.75</item>
 </resources>
\ No newline at end of file
diff --git a/library/ui-styles/src/main/res/values/dimens.xml b/library/ui-styles/src/main/res/values/dimens.xml
index b63a54aeeb..a2a6b34b0f 100644
--- a/library/ui-styles/src/main/res/values/dimens.xml
+++ b/library/ui-styles/src/main/res/values/dimens.xml
@@ -49,5 +49,6 @@
     <dimen name="composer_attachment_margin">1dp</dimen>
 
     <!--  Onboarding   -->
-    <dimen name="ftue_auth_gutter">16dp</dimen>
+    <item name="ftue_auth_gutter_start_percent" format="float" type="dimen">0.05</item>
+    <item name="ftue_auth_gutter_end_percent" format="float" type="dimen">0.95</item>
 </resources>
\ No newline at end of file
diff --git a/vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthSplashCarouselFragment.kt b/vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthSplashCarouselFragment.kt
index f9c8e51f9c..fe20167b1e 100644
--- a/vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthSplashCarouselFragment.kt
+++ b/vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthSplashCarouselFragment.kt
@@ -16,6 +16,7 @@
 
 package im.vector.app.features.onboarding.ftueauth
 
+import android.annotation.SuppressLint
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
@@ -70,22 +71,26 @@ class FtueAuthSplashCarouselFragment : AbstractFtueAuthFragment<FragmentFtueSpla
                         SplashCarouselState.Item(
                                 stringProvider.getString(R.string.ftue_auth_carousel_1_title),
                                 stringProvider.getString(R.string.ftue_auth_carousel_1_body),
-                                R.drawable.onboarding_carousel_conversations
+                                R.drawable.onboarding_carousel_conversations,
+                                R.drawable.bg_carousel_page_1
                         ),
                         SplashCarouselState.Item(
                                 stringProvider.getString(R.string.ftue_auth_carousel_2_title),
                                 stringProvider.getString(R.string.ftue_auth_carousel_2_body),
-                                R.drawable.onboarding_carousel_ems
+                                R.drawable.onboarding_carousel_ems,
+                                R.drawable.bg_carousel_page_2
                         ),
                         SplashCarouselState.Item(
                                 stringProvider.getString(R.string.ftue_auth_carousel_3_title),
                                 stringProvider.getString(R.string.ftue_auth_carousel_3_body),
-                                R.drawable.onboarding_carousel_connect
+                                R.drawable.onboarding_carousel_connect,
+                                R.drawable.bg_carousel_page_3
                         ),
                         SplashCarouselState.Item(
                                 stringProvider.getString(R.string.ftue_auth_carousel_4_title),
                                 stringProvider.getString(R.string.ftue_auth_carousel_4_body),
-                                R.drawable.onboarding_carousel_universal
+                                R.drawable.onboarding_carousel_universal,
+                                R.drawable.bg_carousel_page_4
                         )
                 )
         ))
@@ -97,12 +102,11 @@ class FtueAuthSplashCarouselFragment : AbstractFtueAuthFragment<FragmentFtueSpla
         }
 
         if (BuildConfig.DEBUG || vectorPreferences.developerMode()) {
-//            views.loginSplashVersion.isVisible = true
-//            @SuppressLint("SetTextI18n")
-//            views.loginSplashVersion.text = "Version : ${BuildConfig.VERSION_NAME}\n" +
-//                    "Branch: ${BuildConfig.GIT_BRANCH_NAME}\n" +
-//                    "Build: ${BuildConfig.BUILD_NUMBER}"
-//            views.loginSplashVersion.debouncedClicks { navigator.openDebug(requireContext()) }
+            views.loginSplashVersion.isVisible = true
+            @SuppressLint("SetTextI18n")
+            views.loginSplashVersion.text = "Version : ${BuildConfig.VERSION_NAME}#${BuildConfig.BUILD_NUMBER}\n" +
+                    "Branch: ${BuildConfig.GIT_BRANCH_NAME}"
+            views.loginSplashVersion.debouncedClicks { navigator.openDebug(requireContext()) }
         }
     }
 
@@ -145,7 +149,8 @@ data class SplashCarouselState(
     data class Item(
             val title: String,
             val body: String,
-            @DrawableRes val image: Int
+            @DrawableRes val image: Int,
+            @DrawableRes val pageBackground: Int
     )
 }
 
@@ -167,6 +172,7 @@ abstract class SplashCarouselItem : VectorEpoxyModel<SplashCarouselItem.Holder>(
     lateinit var item: SplashCarouselState.Item
 
     override fun bind(holder: Holder) {
+        holder.view.setBackgroundResource(item.pageBackground)
         holder.image.setImageResource(item.image)
         holder.title.text = item.title
         holder.body.text = item.body
diff --git a/vector/src/main/res/drawable/bg_carousel_page_1.xml b/vector/src/main/res/drawable/bg_carousel_page_1.xml
new file mode 100644
index 0000000000..bff828fb22
--- /dev/null
+++ b/vector/src/main/res/drawable/bg_carousel_page_1.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:endColor="#3372C7DA"
+        android:startColor="#33BBE7CF" />
+</shape>
\ No newline at end of file
diff --git a/vector/src/main/res/drawable/bg_carousel_page_2.xml b/vector/src/main/res/drawable/bg_carousel_page_2.xml
new file mode 100644
index 0000000000..54e5286ded
--- /dev/null
+++ b/vector/src/main/res/drawable/bg_carousel_page_2.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:endColor="#33B972DA"
+        android:startColor="#3372C7DA" />
+</shape>
\ No newline at end of file
diff --git a/vector/src/main/res/drawable/bg_carousel_page_3.xml b/vector/src/main/res/drawable/bg_carousel_page_3.xml
new file mode 100644
index 0000000000..c31c70c078
--- /dev/null
+++ b/vector/src/main/res/drawable/bg_carousel_page_3.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:endColor="#330DBD8B"
+        android:startColor="#33B972DA" />
+</shape>
\ No newline at end of file
diff --git a/vector/src/main/res/drawable/bg_carousel_page_4.xml b/vector/src/main/res/drawable/bg_carousel_page_4.xml
new file mode 100644
index 0000000000..56989688af
--- /dev/null
+++ b/vector/src/main/res/drawable/bg_carousel_page_4.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:endColor="#33BBE7CF"
+        android:startColor="#330DBD8B" />
+</shape>
\ No newline at end of file
diff --git a/vector/src/main/res/layout/fragment_ftue_splash_carousel.xml b/vector/src/main/res/layout/fragment_ftue_splash_carousel.xml
index 0b523f8e33..6791a09130 100644
--- a/vector/src/main/res/layout/fragment_ftue_splash_carousel.xml
+++ b/vector/src/main/res/layout/fragment_ftue_splash_carousel.xml
@@ -4,18 +4,19 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="?android:colorBackground"
-    android:paddingTop="@dimen/layout_vertical_margin"
-    android:paddingBottom="@dimen/layout_vertical_margin">
+    android:background="@null">
 
     <androidx.viewpager2.widget.ViewPager2
         android:id="@+id/splashCarousel"
         android:layout_width="match_parent"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toTopOf="@id/loginSplashSubmit"
-        app:layout_constraintHeight_percent="0.65"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0" />
+        android:layout_height="match_parent" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/splashCarouselFloatingSection"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.65" />
 
     <com.google.android.material.tabs.TabLayout
         android:id="@+id/carouselIndicator"
@@ -23,7 +24,7 @@
         android:layout_height="wrap_content"
         android:background="@null"
         app:layout_constraintBottom_toTopOf="@id/loginSplashButtonsSpace"
-        app:layout_constraintTop_toBottomOf="@id/splashCarousel"
+        app:layout_constraintTop_toBottomOf="@id/splashCarouselFloatingSection"
         app:layout_constraintVertical_chainStyle="spread"
         app:tabBackground="@drawable/indicator_onboarding_carousel_selector"
         app:tabGravity="center"
@@ -36,14 +37,14 @@
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:orientation="vertical"
-        app:layout_constraintGuide_begin="@dimen/ftue_auth_gutter" />
+        app:layout_constraintGuide_percent="@dimen/ftue_auth_gutter_start_percent" />
 
     <androidx.constraintlayout.widget.Guideline
         android:id="@+id/splashCarouselGutterEnd"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:orientation="vertical"
-        app:layout_constraintGuide_end="@dimen/ftue_auth_gutter" />
+        app:layout_constraintGuide_percent="@dimen/ftue_auth_gutter_end_percent" />
 
     <Space
         android:id="@+id/loginSplashButtonsSpace"
@@ -93,7 +94,7 @@
 
     <TextView
         android:id="@+id/loginSplashVersion"
-        style="@style/Widget.Vector.TextView.Caption"
+        style="@style/Widget.Vector.TextView.Micro"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:drawablePadding="12dp"
diff --git a/vector/src/main/res/layout/item_splash_carousel.xml b/vector/src/main/res/layout/item_splash_carousel.xml
index 8ba194aa8b..bb1b9fa0d2 100644
--- a/vector/src/main/res/layout/item_splash_carousel.xml
+++ b/vector/src/main/res/layout/item_splash_carousel.xml
@@ -1,22 +1,41 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<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:orientation="vertical"
-    android:paddingStart="@dimen/ftue_auth_gutter"
-    android:paddingEnd="@dimen/ftue_auth_gutter">
+    android:layout_height="match_parent">
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/splashCarouselGutterStart"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="@dimen/ftue_auth_gutter_start_percent" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/splashCarouselGutterEnd"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="@dimen/ftue_auth_gutter_end_percent" />
 
     <Space
+        android:id="@+id/carousel_item_top_space"
         android:layout_width="match_parent"
         android:layout_height="0dp"
-        android:layout_weight="0.1" />
+        app:layout_constraintBottom_toTopOf="@id/carousel_item_image_container"
+        app:layout_constraintHeight_percent="0.1"
+        app:layout_constraintTop_toTopOf="parent" />
 
     <FrameLayout
-        android:layout_width="match_parent"
+        android:id="@+id/carousel_item_image_container"
+        android:layout_width="0dp"
         android:layout_height="0dp"
-        android:layout_weight="1"
-        android:layout_gravity="center">
+        android:layout_gravity="center"
+        app:layout_constraintBottom_toTopOf="@id/carousel_item_image_bottom_space"
+        app:layout_constraintEnd_toEndOf="@id/splashCarouselGutterEnd"
+        app:layout_constraintStart_toStartOf="@id/splashCarouselGutterStart"
+        app:layout_constraintTop_toBottomOf="@id/carousel_item_top_space">
 
         <ImageView
             android:id="@+id/carousel_item_image"
@@ -29,27 +48,46 @@
     </FrameLayout>
 
     <Space
+        android:id="@+id/carousel_item_image_bottom_space"
         android:layout_width="match_parent"
         android:layout_height="0dp"
-        android:layout_weight="0.05" />
+        android:layout_weight="0.05"
+        app:layout_constraintBottom_toTopOf="@id/carousel_item_title"
+        app:layout_constraintHeight_percent="0.05"
+        app:layout_constraintTop_toBottomOf="@id/carousel_item_image_container" />
 
     <TextView
         android:id="@+id/carousel_item_title"
         style="@style/Widget.Vector.TextView.Title"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:gravity="center"
         android:textColor="?vctr_content_primary"
+        app:layout_constraintBottom_toTopOf="@id/carousel_item_body"
+        app:layout_constraintEnd_toEndOf="@id/splashCarouselGutterEnd"
+        app:layout_constraintStart_toStartOf="@id/splashCarouselGutterStart"
+        app:layout_constraintTop_toBottomOf="@id/carousel_item_image_bottom_space"
         tools:text="Login version" />
 
     <TextView
         android:id="@+id/carousel_item_body"
         style="@style/Widget.Vector.TextView.Subtitle"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginTop="8dp"
         android:gravity="center"
         android:textColor="?vctr_content_secondary"
+        app:layout_constraintBottom_toTopOf="@id/splashCarouselFloatingSection"
+        app:layout_constraintEnd_toEndOf="@id/splashCarouselGutterEnd"
+        app:layout_constraintStart_toStartOf="@id/splashCarouselGutterStart"
+        app:layout_constraintTop_toBottomOf="@id/carousel_item_title"
         tools:text="Login version" />
 
-</LinearLayout>
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/splashCarouselFloatingSection"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.65" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>