diff --git a/app/components/Nav/App/__snapshots__/index.test.js.snap b/app/components/Nav/App/__snapshots__/index.test.js.snap
index d7736b66d7f..c02e21eaf28 100644
--- a/app/components/Nav/App/__snapshots__/index.test.js.snap
+++ b/app/components/Nav/App/__snapshots__/index.test.js.snap
@@ -245,12 +245,13 @@ exports[`App should render correctly 1`] = `
             "OnboardingCarousel": null,
             "OnboardingRootNav": Object {
               "childRouters": Object {
-                "Onboarding": Object {
+                "OnboardingNav": Object {
                   "childRouters": Object {
                     "CreateWallet": null,
                     "ImportFromSeed": null,
                     "ImportWallet": null,
                     "Onboarding": null,
+                    "OnboardingCarousel": null,
                     "OptinMetrics": null,
                     "SyncWithExtension": null,
                   },
@@ -399,12 +400,11 @@ exports[`App should render correctly 1`] = `
                   "index": 0,
                   "isTransitioning": false,
                   "key": "id-123-6",
-                  "routeName": "Onboarding",
+                  "routeName": "OnboardingNav",
                   "routes": Array [
                     Object {
                       "key": "id-123-5",
-                      "params": undefined,
-                      "routeName": "Onboarding",
+                      "routeName": "OnboardingCarousel",
                     },
                   ],
                 },
@@ -671,12 +671,13 @@ exports[`App should render correctly 1`] = `
               "OnboardingCarousel": null,
               "OnboardingRootNav": Object {
                 "childRouters": Object {
-                  "Onboarding": Object {
+                  "OnboardingNav": Object {
                     "childRouters": Object {
                       "CreateWallet": null,
                       "ImportFromSeed": null,
                       "ImportWallet": null,
                       "Onboarding": null,
+                      "OnboardingCarousel": null,
                       "OptinMetrics": null,
                       "SyncWithExtension": null,
                     },
@@ -825,12 +826,11 @@ exports[`App should render correctly 1`] = `
                     "index": 0,
                     "isTransitioning": false,
                     "key": "id-123-6",
-                    "routeName": "Onboarding",
+                    "routeName": "OnboardingNav",
                     "routes": Array [
                       Object {
                         "key": "id-123-5",
-                        "params": undefined,
-                        "routeName": "Onboarding",
+                        "routeName": "OnboardingCarousel",
                       },
                     ],
                   },
diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js
index 7df1c7d7b1f..b51cb91cd6d 100644
--- a/app/components/Nav/App/index.js
+++ b/app/components/Nav/App/index.js
@@ -33,6 +33,9 @@ const OnboardingNav = createStackNavigator(
 		Onboarding: {
 			screen: Onboarding
 		},
+		OnboardingCarousel: {
+			screen: OnboardingCarousel
+		},
 		CreateWallet: {
 			screen: CreateWallet
 		},
@@ -50,7 +53,7 @@ const OnboardingNav = createStackNavigator(
 		}
 	},
 	{
-		initialRouteName: 'Onboarding'
+		initialRouteName: 'OnboardingCarousel'
 	}
 );
 
@@ -60,7 +63,7 @@ const OnboardingNav = createStackNavigator(
  */
 const OnboardingRootNav = createStackNavigator(
 	{
-		Onboarding: {
+		OnboardingNav: {
 			screen: OnboardingNav
 		},
 		SyncWithExtensionSuccess: {
diff --git a/app/components/UI/DrawerView/index.js b/app/components/UI/DrawerView/index.js
index 1513b532b86..b32fbc75b96 100644
--- a/app/components/UI/DrawerView/index.js
+++ b/app/components/UI/DrawerView/index.js
@@ -49,6 +49,8 @@ import ANALYTICS_EVENT_OPTS from '../../../util/analytics';
 import URL from 'url-parse';
 import { generateUniversalLinkAddress } from '../../../util/payment-link-generator';
 import EthereumAddress from '../EthereumAddress';
+// eslint-disable-next-line import/named
+import { NavigationActions } from 'react-navigation';
 
 const ANDROID_OFFSET = 30;
 const styles = StyleSheet.create({
@@ -542,7 +544,11 @@ class DrawerView extends PureComponent {
 					onPress: async () => {
 						await SecureKeychain.resetGenericPassword();
 						if (!passwordSet) {
-							this.props.navigation.navigate('Onboarding');
+							this.props.navigation.navigate(
+								'OnboardingRootNav',
+								{},
+								NavigationActions.navigate({ routeName: 'Onboarding' })
+							);
 						} else {
 							this.props.navigation.navigate('Login');
 						}
diff --git a/app/components/Views/Entry/index.js b/app/components/Views/Entry/index.js
index 00c42790913..26d0e0fbf20 100644
--- a/app/components/Views/Entry/index.js
+++ b/app/components/Views/Entry/index.js
@@ -95,7 +95,7 @@ class Entry extends PureComponent {
 			if (existingUser !== null) {
 				await this.unlockKeychain();
 			} else {
-				this.animateAndGoTo('OnboardingCarousel');
+				this.animateAndGoTo('OnboardingRootNav');
 			}
 		}, 100);
 	}
@@ -142,8 +142,14 @@ class Entry extends PureComponent {
 				useNativeDriver: true,
 				isInteraction: false
 			}).start(() => {
-				if (viewToGo !== 'WalletView') {
+				if (viewToGo !== 'WalletView' || viewToGo !== 'Onboarding') {
 					this.props.navigation.navigate(viewToGo);
+				} else if (viewToGo === 'Onboarding') {
+					this.props.navigation.navigate(
+						'OnboardingRootNav',
+						{},
+						NavigationActions.navigate({ routeName: 'Oboarding' })
+					);
 				} else {
 					this.props.navigation.navigate(
 						'HomeNav',
diff --git a/app/components/Views/LockScreen/index.js b/app/components/Views/LockScreen/index.js
index 52a96b9f8cf..cce3346a99f 100644
--- a/app/components/Views/LockScreen/index.js
+++ b/app/components/Views/LockScreen/index.js
@@ -7,6 +7,8 @@ import Engine from '../../../core/Engine';
 import SecureKeychain from '../../../core/SecureKeychain';
 import { baseStyles } from '../../../styles/common';
 import Logger from '../../../util/Logger';
+// eslint-disable-next-line import/named
+import { NavigationActions } from 'react-navigation';
 
 const LOGO_SIZE = 175;
 const styles = StyleSheet.create({
@@ -138,7 +140,11 @@ class LockScreen extends PureComponent {
 			} else if (this.props.passwordSet) {
 				this.props.navigation.navigate('Login');
 			} else {
-				this.props.navigation.navigate('OnboardingRootNav');
+				this.props.navigation.navigate(
+					'OnboardingRootNav',
+					{},
+					NavigationActions.navigate({ routeName: 'Onboarding' })
+				);
 			}
 		} catch (error) {
 			if (this.unlockAttempts <= 3) {
diff --git a/app/components/Views/Login/index.js b/app/components/Views/Login/index.js
index fb889bd76bb..858e8f71c3d 100644
--- a/app/components/Views/Login/index.js
+++ b/app/components/Views/Login/index.js
@@ -236,7 +236,11 @@ class Login extends PureComponent {
 	};
 
 	onPressGoBack = () => {
-		this.props.navigation.navigate('OnboardingRootNav');
+		this.props.navigation.navigate(
+			'OnboardingRootNav',
+			{},
+			NavigationActions.navigate({ routeName: 'Onboarding' })
+		);
 	};
 
 	updateBiometryChoice = async biometryChoice => {
diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js
index ca6bb0882e8..068751904bc 100644
--- a/app/components/Views/Onboarding/index.js
+++ b/app/components/Views/Onboarding/index.js
@@ -15,7 +15,7 @@ import TermsAndConditions from '../TermsAndConditions';
 import Analytics from '../../../core/Analytics';
 import ANALYTICS_EVENT_OPTS from '../../../util/analytics';
 import { saveOnboardingEvent } from '../../../actions/onboarding';
-import { getTransparentOnboardingNavbarOptions } from '../../UI/Navbar';
+import { getTransparentBackOnboardingNavbarOptions } from '../../UI/Navbar';
 
 const styles = StyleSheet.create({
 	scroll: {
@@ -60,6 +60,10 @@ const styles = StyleSheet.create({
 	},
 	createWrapper: {
 		marginVertical: 24
+	},
+	buttonWrapper: {
+		flexGrow: 1,
+		marginHorizontal: 50
 	}
 });
 
@@ -67,7 +71,7 @@ const styles = StyleSheet.create({
  * View that is displayed to first time (new) users
  */
 class Onboarding extends PureComponent {
-	static navigationOptions = ({ navigation }) => getTransparentOnboardingNavbarOptions(navigation);
+	static navigationOptions = ({ navigation }) => getTransparentBackOnboardingNavbarOptions(navigation);
 
 	static propTypes = {
 		/**
@@ -170,7 +174,7 @@ class Onboarding extends PureComponent {
 								<Text style={styles.title}>{strings('onboarding.title')}</Text>
 								<View style={styles.importWrapper}>
 									<Text style={styles.buttonDescription}>{strings('onboarding.sync_desc')}</Text>
-									<View style={styles.flexGrow}>
+									<View style={styles.buttonWrapper}>
 										<StyledButton
 											type={'normal'}
 											onPress={this.onPressImport}
@@ -182,7 +186,7 @@ class Onboarding extends PureComponent {
 								</View>
 								<View style={styles.createWrapper}>
 									<Text style={styles.buttonDescription}>{strings('onboarding.create_desc')}</Text>
-									<View style={styles.flexGrow}>
+									<View style={styles.buttonWrapper}>
 										<StyledButton
 											type={'blue'}
 											onPress={this.onPressCreate}
diff --git a/app/components/Views/OnboardingCarousel/__snapshots__/index.test.js.snap b/app/components/Views/OnboardingCarousel/__snapshots__/index.test.js.snap
index 25753b3fc1b..65beda43ee4 100644
--- a/app/components/Views/OnboardingCarousel/__snapshots__/index.test.js.snap
+++ b/app/components/Views/OnboardingCarousel/__snapshots__/index.test.js.snap
@@ -46,6 +46,11 @@ exports[`OnboardingCarousel should render correctly 1`] = `
         >
           <View
             key="1"
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
           >
             <View
               style={
@@ -91,7 +96,9 @@ exports[`OnboardingCarousel should render correctly 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "marginTop": 25,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "center",
                 }
               }
             >
@@ -106,8 +113,9 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                   Array [
                     Object {},
                     Object {
-                      "height": 285,
-                      "width": 200,
+                      "height": 912.5615763546798,
+                      "marginTop": 30,
+                      "width": 650,
                     },
                   ]
                 }
@@ -116,6 +124,11 @@ exports[`OnboardingCarousel should render correctly 1`] = `
           </View>
           <View
             key="2"
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
           >
             <View
               style={
@@ -161,7 +174,9 @@ exports[`OnboardingCarousel should render correctly 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "marginTop": 25,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "center",
                 }
               }
             >
@@ -176,8 +191,8 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                   Array [
                     Object {},
                     Object {
-                      "height": 222,
-                      "width": 240,
+                      "height": 603.7656903765691,
+                      "width": 650,
                     },
                   ]
                 }
@@ -186,6 +201,11 @@ exports[`OnboardingCarousel should render correctly 1`] = `
           </View>
           <View
             key="3"
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
           >
             <View
               style={
@@ -231,7 +251,9 @@ exports[`OnboardingCarousel should render correctly 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "marginTop": 25,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "center",
                 }
               }
             >
@@ -246,8 +268,8 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                   Array [
                     Object {},
                     Object {
-                      "height": 214,
-                      "width": 276,
+                      "height": 470.95238095238096,
+                      "width": 690,
                     },
                   ]
                 }
@@ -260,6 +282,7 @@ exports[`OnboardingCarousel should render correctly 1`] = `
             Object {
               "alignSelf": "center",
               "flexDirection": "row",
+              "marginVertical": 36,
             }
           }
         >
@@ -317,7 +340,6 @@ exports[`OnboardingCarousel should render correctly 1`] = `
         <View
           style={
             Object {
-              "flex": 1,
               "flexDirection": "column",
               "paddingHorizontal": 40,
             }
@@ -326,38 +348,27 @@ exports[`OnboardingCarousel should render correctly 1`] = `
           <View
             style={
               Object {
-                "flex": 1,
                 "justifyContent": "flex-end",
               }
             }
           >
-            <View
-              style={
+            <StyledButton
+              disabledContainerStyle={
                 Object {
-                  "marginTop": 24,
+                  "opacity": 0.6,
                 }
               }
+              onPress={[Function]}
+              styleDisabled={
+                Object {
+                  "opacity": 0.6,
+                }
+              }
+              testID="onboarding-get-started-button"
+              type="normal"
             >
-              <View>
-                <StyledButton
-                  disabledContainerStyle={
-                    Object {
-                      "opacity": 0.6,
-                    }
-                  }
-                  onPress={[Function]}
-                  styleDisabled={
-                    Object {
-                      "opacity": 0.6,
-                    }
-                  }
-                  testID="onboarding-get-started-button"
-                  type="normal"
-                >
-                  Get started
-                </StyledButton>
-              </View>
-            </View>
+              Get started
+            </StyledButton>
           </View>
         </View>
       </View>
diff --git a/app/components/Views/OnboardingCarousel/index.js b/app/components/Views/OnboardingCarousel/index.js
index 6ff6536fda1..33015792b6c 100644
--- a/app/components/Views/OnboardingCarousel/index.js
+++ b/app/components/Views/OnboardingCarousel/index.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, ScrollView, StyleSheet, Image } from 'react-native';
+import { Text, View, ScrollView, StyleSheet, Image, Dimensions } from 'react-native';
 import StyledButton from '../../UI/StyledButton';
 import { colors, fontStyles, baseStyles } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
@@ -8,6 +8,13 @@ import FadeOutOverlay from '../../UI/FadeOutOverlay';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 import { getTransparentOnboardingNavbarOptions } from '../../UI/Navbar';
 import OnboardingScreenWithBg from '../../UI/OnboardingScreenWithBg';
+// eslint-disable-next-line import/named
+import { NavigationActions } from 'react-navigation';
+
+const IMAGE_3_RATIO = 215 / 315;
+const IMAGE_2_RATIO = 222 / 239;
+const IMAGE_1_RATIO = 285 / 203;
+const DEVICE_WIDTH = Dimensions.get('window').width;
 
 const styles = StyleSheet.create({
 	scroll: {
@@ -36,33 +43,31 @@ const styles = StyleSheet.create({
 		...fontStyles.normal
 	},
 	ctas: {
-		flex: 1,
 		paddingHorizontal: 40,
 		flexDirection: 'column'
 	},
 	ctaWrapper: {
-		flex: 1,
 		justifyContent: 'flex-end'
 	},
-	importWrapper: {
-		marginTop: 24
-	},
 	carouselImage: {},
 	carouselImage1: {
-		width: 200,
-		height: 285
+		marginTop: 30,
+		width: DEVICE_WIDTH - 100,
+		height: (DEVICE_WIDTH - 100) * IMAGE_1_RATIO
 	},
 	carouselImage2: {
-		width: 240,
-		height: 222
+		width: DEVICE_WIDTH - 100,
+		height: (DEVICE_WIDTH - 100) * IMAGE_2_RATIO
 	},
 	carouselImage3: {
-		width: 276,
-		height: 214
+		width: DEVICE_WIDTH - 60,
+		height: (DEVICE_WIDTH - 60) * IMAGE_3_RATIO
 	},
 	carouselImageWrapper: {
+		flex: 1,
+		flexDirection: 'row',
 		alignItems: 'center',
-		marginTop: 25
+		justifyContent: 'center'
 	},
 	circle: {
 		width: 8,
@@ -77,7 +82,8 @@ const styles = StyleSheet.create({
 	},
 	progessContainer: {
 		flexDirection: 'row',
-		alignSelf: 'center'
+		alignSelf: 'center',
+		marginVertical: 36
 	},
 	tab: {
 		marginHorizontal: 30
@@ -107,7 +113,8 @@ export default class OnboardingCarousel extends PureComponent {
 
 	onPresGetStarted = () => {
 		const { navigation } = this.props;
-		navigation && navigation.navigate('OnboardingRootNav');
+		navigation &&
+			navigation.navigate('OnboardingRootNav', {}, NavigationActions.navigate({ routeName: 'Onboarding' }));
 	};
 
 	renderTabBar = () => <View />;
@@ -128,7 +135,7 @@ export default class OnboardingCarousel extends PureComponent {
 								renderTabBar={this.renderTabBar}
 								onChangeTab={this.onChangeTab}
 							>
-								<View key={'1'}>
+								<View key={'1'} style={baseStyles.flexGrow}>
 									<View style={styles.tab}>
 										<Text style={styles.title}>{strings('onboarding_carousel.title1')}</Text>
 										<Text style={styles.subtitle}>{strings('onboarding_carousel.subtitle1')}</Text>
@@ -141,7 +148,7 @@ export default class OnboardingCarousel extends PureComponent {
 										/>
 									</View>
 								</View>
-								<View key={'2'}>
+								<View key={'2'} style={baseStyles.flexGrow}>
 									<View style={styles.tab}>
 										<Text style={styles.title}>{strings('onboarding_carousel.title2')}</Text>
 										<Text style={styles.subtitle}>{strings('onboarding_carousel.subtitle2')}</Text>
@@ -154,7 +161,7 @@ export default class OnboardingCarousel extends PureComponent {
 										/>
 									</View>
 								</View>
-								<View key={'3'}>
+								<View key={'3'} style={baseStyles.flexGrow}>
 									<View style={styles.tab}>
 										<Text style={styles.title}>{strings('onboarding_carousel.title3')}</Text>
 										<Text style={styles.subtitle}>{strings('onboarding_carousel.subtitle3')}</Text>
@@ -177,17 +184,13 @@ export default class OnboardingCarousel extends PureComponent {
 
 							<View style={styles.ctas}>
 								<View style={styles.ctaWrapper}>
-									<View style={styles.importWrapper}>
-										<View style={styles.flexGrow}>
-											<StyledButton
-												type={'normal'}
-												onPress={this.onPresGetStarted}
-												testID={'onboarding-get-started-button'}
-											>
-												{strings('onboarding_carousel.get_started')}
-											</StyledButton>
-										</View>
-									</View>
+									<StyledButton
+										type={'normal'}
+										onPress={this.onPresGetStarted}
+										testID={'onboarding-get-started-button'}
+									>
+										{strings('onboarding_carousel.get_started')}
+									</StyledButton>
 								</View>
 							</View>
 						</View>
diff --git a/app/images/onboarding-carousel-3.png b/app/images/onboarding-carousel-3.png
index 4a3a1b71bd4..7fb7d733475 100755
Binary files a/app/images/onboarding-carousel-3.png and b/app/images/onboarding-carousel-3.png differ