diff --git a/app/containers/Main/index.js b/app/containers/Main/index.js
index dab15762..3caecde5 100644
--- a/app/containers/Main/index.js
+++ b/app/containers/Main/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Content, Text, Spinner, Item, Input, Header } from 'native-base';
+import { Container, Content, Text, Spinner, Item, Input, Header, Card, CardItem, Left, Thumbnail, Body } from 'native-base';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   Image,
@@ -9,11 +9,14 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   ScrollView,
+  Modal,
+  TouchableHighlight,
   Animated,
   Keyboard
 } from 'react-native';
 import { Actions } from 'react-native-router-flux';
 import AccountKit, { LoginButton } from 'react-native-facebook-account-kit';
+import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
 
 import { createTransition, Fade } from 'react-native-transition';
 import { getProfileEmail } from '../../helpers';
@@ -42,7 +45,7 @@ class Main extends Component {
   }
 
   state = {
-    modalVisible: false
+    modalVisible: true
   };
 
   componentWillMount() {
@@ -136,6 +139,106 @@ class Main extends Component {
         <Image source={background} style={styles.background}>
           <ScrollView>
             <View style={styles.container}>
+            <Modal
+                    animationType="slide"
+                    transparent={false}
+                    visible={this.state.modalVisible}
+                    onRequestClose={() => {this.setModalVisible(!this.state.modalVisible)}}
+                    >
+                    <ScrollView>
+                    <View style={{flex:1}}>
+                    <IndicatorViewPager
+                        style={{height:600}}
+                        indicator={this._renderDotIndicator()}
+                    >
+                        <View style={{
+                          backgroundColor:'black',
+                          flex: 1,
+                          flexDirection: 'column',
+                          justifyContent: 'center',
+                          alignItems: 'center'}}>
+                            <Image source={{uri: 'http://media.nationalgeographic.co.id/daily/300/1:1/201609291242819/b/foto-planet-merkurius-kian-menyusut.jpg'}}
+                               style={{width: 400, height: 400}} />
+                            <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
+                              Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+                            </Text>
+                            <View style={{
+                            flex: 0,
+                            flexDirection: 'row',
+                            justifyContent: 'center',
+                            alignItems: 'flex-end',
+                            }}>
+                              <Button 
+                              full 
+                              bordered 
+                              primary 
+                              style={{width: 350/3, height: 50}}
+                              onPress={() => {
+                                  this.setModalVisible(!this.state.modalVisible)
+                                }}
+                              ><Text style={{textAlign: 'center'}}> SKIP </Text></Button>
+                            </View>
+                        </View>
+                        <View style={{
+                          backgroundColor:'black',
+                          flex: 1,
+                          flexDirection: 'column',
+                          justifyContent: 'center',
+                          alignItems: 'center'}}>
+                            <Image source={{uri: 'https://www.astronomiskungdom.se/wp-content/uploads/2017/01/venus-11022_960_720-300x300.jpg'}}
+                               style={{width: 400, height: 400}} />
+                               <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
+                              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+                            </Text>
+                            <View style={{
+                            flex: 0,
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                            alignItems: 'flex-end',
+                            }}>
+                              <Button 
+                                full 
+                                bordered 
+                                primary 
+                                style={{width: 350/3, height: 50}}
+                                onPress={() => {
+                                  this.setModalVisible(!this.state.modalVisible)
+                                }}
+                              ><Text style={{textAlign: 'center'}}> SKIP </Text></Button>
+                            </View>
+                        </View>
+                        <View style={{
+                          backgroundColor:'black',
+                          flex: 1,
+                          flexDirection: 'column',
+                          justifyContent: 'center',
+                          alignItems: 'center'}}>
+                            <Image source={{uri: 'http://www.commongroundgroup.net/wp-content/uploads/2011/10/earth-from-space-western-400x400.jpg'}}
+                               style={{width: 400, height: 400}} />
+                               <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
+                              Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+                            </Text>
+                            <View style={{
+                            flex: 0,
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                            alignItems: 'flex-end',
+                            }}>
+                              <Button 
+                              full 
+                              bordered 
+                              primary 
+                              style={{width: 350/3, height: 50}}
+                              onPress={() => {
+                                  this.setModalVisible(!this.state.modalVisible)
+                                }}
+                              ><Text style={{color: 'white', textAlign: 'center'}}> SKIP </Text></Button>
+                            </View>
+                        </View>
+                    </IndicatorViewPager>
+                  </View>
+                  </ScrollView>
+                  </Modal>
               <View style={styles.logo}>
                 <Animated.Image
                   source={Logo}
@@ -261,6 +364,11 @@ class Main extends Component {
       </KeyboardAvoidingView>
     );
   }
+
+_renderDotIndicator() {
+    return <PagerDotIndicator pageCount={3} />;
+}
+
 }
 
 Main.propTypes = {
diff --git a/package.json b/package.json
index 78ac1aa1..2f223f1d 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.2.0",
     "reselect": "^3.0.1",
+    "rn-viewpager": "^1.2.4",
     "socket.io-client": "^1.4.8"
   },
   "devDependencies": {