diff --git a/ios/kitsu_mobile.xcodeproj/project.pbxproj b/ios/kitsu_mobile.xcodeproj/project.pbxproj
index 76d8ecca5..5ec6024fd 100644
--- a/ios/kitsu_mobile.xcodeproj/project.pbxproj
+++ b/ios/kitsu_mobile.xcodeproj/project.pbxproj
@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
diff --git a/src/assets/img/onboarding/index.js b/src/assets/img/onboarding/index.js
index 62567bc3b..c32b15fd3 100644
--- a/src/assets/img/onboarding/index.js
+++ b/src/assets/img/onboarding/index.js
@@ -2,10 +2,12 @@ import intro1 from './intro1.png';
 import intro2 from './intro2.png';
 import intro3 from './intro3.png';
 import intro4 from './intro4.png';
+import placeholderImage from './placeholderImage.png';
 
 export {
   intro1,
   intro2,
   intro3,
   intro4,
+  placeholderImage,
 };
diff --git a/src/assets/img/onboarding/placeholderImage.png b/src/assets/img/onboarding/placeholderImage.png
new file mode 100644
index 000000000..162551565
Binary files /dev/null and b/src/assets/img/onboarding/placeholderImage.png differ
diff --git a/src/components/Button/component.js b/src/components/Button/component.js
new file mode 100644
index 000000000..81d07d7a5
--- /dev/null
+++ b/src/components/Button/component.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, ActivityIndicator, ViewPropTypes } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { PropTypes } from 'prop-types';
+import { styles } from './styles';
+
+const LoadingComponent = () => (
+  <View style={styles.contentWrapper}>
+    <ActivityIndicator color={'rgba(255,255,255,0.6)'} />
+  </View>
+);
+
+export const Button = ({
+  style,
+  title,
+  titleStyle,
+  icon,
+  iconStyle,
+  onPress,
+  loading,
+  disabled,
+}) => (
+  <TouchableOpacity
+    disabled={disabled || loading}
+    onPress={onPress}
+    style={[styles.button, disabled ? styles.buttonDisabled : null, style]}
+  >
+    {loading ? <LoadingComponent />
+      : <View style={styles.contentWrapper}>
+        {icon ? <Icon name={icon} style={[styles.icon, iconStyle]} /> : null}
+        <Text style={[styles.title, titleStyle]}>
+          {title}
+        </Text>
+      </View>
+    }
+  </TouchableOpacity>
+);
+
+Button.propTypes = {
+  ...TouchableOpacity.propTypes,
+  style: ViewPropTypes.style,
+  title: PropTypes.string.isRequired,
+  titleStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  icon: PropTypes.string,
+  iconStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  onPress: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+Button.defaultProps = {
+  style: null,
+  title: 'Save',
+  titleStyle: null,
+  icon: null,
+  iconStyle: null,
+  loading: false,
+  disabled: false,
+};
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
new file mode 100644
index 000000000..bb824842c
--- /dev/null
+++ b/src/components/Button/index.js
@@ -0,0 +1 @@
+export * from './component';
diff --git a/src/components/Button/styles.js b/src/components/Button/styles.js
new file mode 100644
index 000000000..d56fcfc0c
--- /dev/null
+++ b/src/components/Button/styles.js
@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+import * as colors from 'kitsu/constants/colors';
+
+export const styles = StyleSheet.create({
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 16,
+    backgroundColor: colors.green,
+    height: 47,
+    borderRadius: 4,
+  },
+  buttonDisabled: {
+    backgroundColor: colors.buttonDisabledColor,
+  },
+  contentWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    color: colors.white,
+    fontFamily: 'OpenSans',
+    lineHeight: 25,
+    fontSize: 15,
+  },
+  icon: {
+    fontSize: 20,
+    color: colors.white,
+    paddingRight: 8,
+    paddingLeft: 8,
+  },
+});
diff --git a/src/constants/colors.js b/src/constants/colors.js
index b5ca35cc2..06206e756 100644
--- a/src/constants/colors.js
+++ b/src/constants/colors.js
@@ -37,6 +37,7 @@ export const offBlack = '#2B212B';
 export const softBlack = '#333';
 
 /* misc */
+export const transparent = 'transparent';
 export const buttonDisabledColor = '#878787';
 export const imageBackColor = 'rgb(153, 130, 153)';
 export const listSeparatorColor = '#261C25';
diff --git a/src/screens/Onboarding/OnboardingScreen.js b/src/screens/Onboarding/OnboardingScreen.js
index 76b6f2ccd..056fc5b26 100644
--- a/src/screens/Onboarding/OnboardingScreen.js
+++ b/src/screens/Onboarding/OnboardingScreen.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
+import { View, ScrollView, Dimensions } from 'react-native';
 import { intro1, intro2, intro3, intro4 } from 'kitsu/assets/img/onboarding/';
+import { Button } from 'kitsu/components/Button';
 import { OnboardingHeader } from './common/';
 import styles from './styles';
 import Step from './Step';
@@ -66,31 +67,32 @@ export default class OnboardingScreen extends React.Component {
 
     return (
       <View style={styles.container}>
-        <View style={styles.contentWrapper}>
-          <OnboardingHeader />
-          <View style={styles.pageWrapper}>
-            <View style={styles.page}>
-              <ScrollView
-                pagingEnabled
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                alwaysBounceHorizontal={false}
-                onScroll={this.handleScroll}
-                scrollEventThrottle={300} // decrease for precision, lower values trigger onScroll more.
-              >
-                {this.renderStep()}
-              </ScrollView>
-            </View>
+        <OnboardingHeader style={styles.header} />
+        <View style={{ flex: 8 }}>
+          <View style={styles.page}>
+            <ScrollView
+              pagingEnabled
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              alwaysBounceHorizontal={false}
+              onScroll={this.handleScroll}
+              scrollEventThrottle={300} // decrease for precision, lower values trigger onScroll more.
+            >
+              {this.renderStep()}
+            </ScrollView>
+          </View>
+          <View style={{ flex: 1, justifyContent: 'center' }}>
             <View style={styles.dotContainer}>
               {this.renderDots()}
             </View>
+            <Button
+              style={styles.getStartedButton}
+              title={'Get Started'}
+              titleStyle={styles.getStartedText}
+              onPress={() => navigate('Registration')}
+            />
           </View>
         </View>
-        <TouchableOpacity onPress={() => navigate('Registration')} style={styles.button}>
-          <Text style={styles.getStartedText}>
-            Get Started
-          </Text>
-        </TouchableOpacity>
       </View>
     );
   }
diff --git a/src/screens/Onboarding/RegistrationScreen.js b/src/screens/Onboarding/RegistrationScreen.js
index ad019b585..d1c1142d3 100644
--- a/src/screens/Onboarding/RegistrationScreen.js
+++ b/src/screens/Onboarding/RegistrationScreen.js
@@ -1,99 +1,147 @@
 import React from 'react';
-import { View, Text, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import { View, Image, FlatList } from 'react-native';
 import { LoginManager } from 'react-native-fbsdk';
+import { connect } from 'react-redux';
+import { Button } from 'kitsu/components/Button';
+import { loginUser } from 'kitsu/store/auth/actions';
 import * as colors from 'kitsu/constants/colors';
+import { placeholderImage } from 'kitsu/assets/img/onboarding';
 import { OnboardingHeader } from './common/';
 import styles from './styles';
 
-const TEMP_IMG_URL = 'https://goo.gl/7XKV53';
-
-const GalleryRow = () => (
-  <View style={{ marginVertical: 8, flexDirection: 'row', justifyContent: 'center' }}>
-    <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} />
-    <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} />
-    <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} />
-    <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} />
-  </View>
-);
-
-export default class RegistrationScreen extends React.Component {
+class RegistrationScreen extends React.Component {
   static navigationOptions = {
     header: null,
   };
 
   state = {
+    loggingUser: false,
+    topAnime: Array(10).fill({}),
+    topManga: Array(10).fill({}),
   };
 
-  onSucess = () => {
-    // TODO: implement this function.
+  componentDidMount() {
+    this.fetchTopMedia();
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.animation);
+  }
+
+  animation = 0;
+
+  fetchTopMedia = async () => {
+    // TODO: handle network error.
+    try {
+      const topAnime = await fetch('https://kitsu.io/api/edge/trending/anime?limit=10').then(res => res.json());
+      const topManga = await fetch('https://kitsu.io/api/edge/trending/manga?limit=10').then(res => res.json());
+      this.setState({
+        topAnime: topAnime.data,
+        topManga: topManga.data,
+      }, this.animateLists);
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  animateLists = () => {
+    let offset = 4;
+    this.animation = setInterval(() => {
+      this.animeList.scrollToOffset({ offset, animated: true });
+      this.mangaList.scrollToOffset({ offset, animated: true });
+      offset += 4;
+    }, 120);
   }
 
   loginFacebook = () => {
+    this.setState({ loggingUser: true });
     LoginManager.logInWithReadPermissions(['public_profile']).then(
       (result) => {
         if (!result.isCancelled) {
-          onSuccess(true);
+          this.props.loginUser(null, navigation, 'signup');
+        } else {
+          this.setState({ loggingUser: false });
         }
       },
       (error) => {
+        this.setState({ loggingUser: false });
         console.log(`Login fail with error: ${error}`);
       },
     );
   };
 
+  populateList = (topList) => {
+    const list = this.state[topList];
+    this.setState({
+      [topList]: list.concat(list),
+    });
+  }
+
+  renderItem = ({ item }) => (
+    <Image source={(item.attributes && { uri: item.attributes.posterImage.large }) || placeholderImage} style={styles.squareImage} />
+  );
+
   render() {
     const { navigate } = this.props.navigation;
+    const { loggingUser, topAnime, topManga } = this.state;
     // TODO: make this screen responsive.
     return (
-      <ScrollView style={styles.container}>
-        <OnboardingHeader />
-        <View style={{ marginVertical: 24, justifyContent: 'center', }}>
-          <GalleryRow />
-          <GalleryRow />
-        </View>
-        <View style={{ height: 200, justifyContent: 'center' }}>
-          <TouchableOpacity
-            onPress={this.loginFacebook}
-            style={[styles.button, {
-              backgroundColor: colors.fbBlueDark,
-            }]}
-            disabled={false}
-          >
-            <Icon
-              size={20}
-              name="facebook-official"
-              style={styles.fbIcon}
+      <View style={styles.container}>
+        <OnboardingHeader style={styles.header} />
+        <View style={{ flex: 8 }}>
+          <View>
+            <FlatList
+              ref={ref => this.animeList = ref}
+              style={{ marginBottom: 8 }}
+              horizontal
+              inverted
+              scrollEnabled={false}
+              data={topAnime}
+              renderItem={this.renderItem}
+              onEndReached={() => this.populateList('topAnime')}
+              onEndReachedThreshold={0.5}
+              showsHorizontalScrollIndicator={false}
+            />
+            <FlatList
+              ref={ref => this.mangaList = ref}
+              horizontal
+              scrollEnabled={false}
+              style={{ marginTop: 8 }}
+              data={topManga}
+              renderItem={this.renderItem}
+              onEndReached={() => this.populateList('topManga')}
+              onEndReachedThreshold={0.5}
+              showsHorizontalScrollIndicator={false}
             />
-            <Text style={styles.buttonText}>
-              Sign up with Facebook
-            </Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => navigate('Signup')}
-            style={[styles.button, {
-              backgroundColor: 'transparent',
-              borderWidth: 1.5,
-              borderColor: colors.darkGrey,
-            }]}
-          >
-            <Text style={styles.buttonText}>Create an Account</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => navigate('Login')}
-            style={[styles.button, {
-              backgroundColor: 'transparent',
-            }]}
-          >
-            <Text style={[styles.buttonText, {
-              color: colors.lightGrey,
-            }]}
-            >
-              Already have an account?
-            </Text>
-          </TouchableOpacity>
+          </View>
+          <View style={styles.buttonsWrapper}>
+            <Button
+              style={{ backgroundColor: colors.fbBlueDark }}
+              title={'Sign up with Facebook'}
+              icon={'facebook-official'}
+              loading={loggingUser}
+              onPress={this.loginFacebook}
+            />
+            <Button
+              style={{
+                backgroundColor: colors.transparent,
+                borderWidth: 1.5,
+                borderColor: colors.darkGrey,
+              }}
+              title={'Create an Account'}
+              onPress={() => navigate('Signup')}
+            />
+            <Button
+              style={{ backgroundColor: colors.transparent }}
+              title={'Already have an account?'}
+              titleStyle={{ fontSize: 12, color: colors.lightGrey }}
+              onPress={() => navigate('Login')}
+            />
+          </View>
         </View>
-      </ScrollView>
+      </View>
     );
   }
 }
+
+export default connect(null, { loginUser })(RegistrationScreen);
diff --git a/src/screens/Onboarding/common/OnboardingHeader.js b/src/screens/Onboarding/common/OnboardingHeader.js
index 003d34b18..e45540d59 100644
--- a/src/screens/Onboarding/common/OnboardingHeader.js
+++ b/src/screens/Onboarding/common/OnboardingHeader.js
@@ -1,17 +1,21 @@
 import React from 'react';
-import { View, Text, Image } from 'react-native';
+import { View, Text, Image, ViewPropTypes } from 'react-native';
 import logo from 'kitsu/assets/img/kitsu-logo.png';
 import styles from './styles';
 
-const OnboardingHeader = () => (
-  <View style={styles.logoWrapper}>
+const OnboardingHeader = ({ style }) => (
+  <View style={[styles.logoWrapper, style]}>
     <Image style={styles.logo} source={logo} />
     <Text style={styles.logoText}>KITSU</Text>
   </View>
 );
 
-OnboardingHeader.propTypes = {};
+OnboardingHeader.propTypes = {
+  style: ViewPropTypes.style,
+};
 
-OnboardingHeader.defaultProps = {};
+OnboardingHeader.defaultProps = {
+  style: null,
+};
 
 export default OnboardingHeader;
diff --git a/src/screens/Onboarding/common/styles.js b/src/screens/Onboarding/common/styles.js
index e59bc4e87..a03ffc3cd 100644
--- a/src/screens/Onboarding/common/styles.js
+++ b/src/screens/Onboarding/common/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 import * as colors from 'kitsu/constants/colors';
 
 export default StyleSheet.create({
@@ -6,11 +6,12 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    marginTop: '16%', // TODO: lacks symmetry
+    marginTop: Platform.select({ ios: 20, android: 24 }),
   },
   logo: {
-    width: 50,
-    height: 50,
+    marginTop: 4,
+    width: 44,
+    height: 44,
     resizeMode: 'contain',
   },
   logoText: {
diff --git a/src/screens/Onboarding/styles.js b/src/screens/Onboarding/styles.js
index ad0405015..42bb6666f 100644
--- a/src/screens/Onboarding/styles.js
+++ b/src/screens/Onboarding/styles.js
@@ -9,12 +9,12 @@ export default StyleSheet.create({
   contentWrapper: {
     flex: 1,
   },
-  pageWrapper: {
-    flex: 1,
-    justifyContent: 'center',
+  header: {
+    flex: 2,
   },
   page: {
-    height: 360,
+    justifyContent: 'center',
+    height: 320,
   },
   slide: {
     alignItems: 'center',
@@ -47,30 +47,17 @@ export default StyleSheet.create({
     height: 240,
     resizeMode: 'contain',
   },
-  button: {
-    flexDirection: 'row',
-    marginHorizontal: 16,
+  getStartedButton: {
     marginBottom: 16,
     backgroundColor: colors.white,
-    borderRadius: 4,
-    height: 47,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  buttonText: {
-    fontFamily: 'OpenSans',
-    fontSize: 15,
-    lineHeight: 25,
-    color: colors.white,
   },
   getStartedText: {
     color: colors.darkPurple,
-    textAlign: 'center',
     fontSize: 17,
-    fontFamily: 'OpenSans',
     fontWeight: 'bold',
   },
   dotContainer: {
+    top: -10,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -89,12 +76,21 @@ export default StyleSheet.create({
     borderRadius: 5,
     backgroundColor: colors.white,
   },
+  galleryRow: {
+    marginVertical: 8,
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
   squareImage: {
     marginHorizontal: 8,
     width: 130,
     height: 130,
     borderRadius: 8,
   },
+  buttonsWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+  },
   fbIcon: {
     color: colors.white,
     paddingRight: 8,