diff --git a/CustomScreen.js b/CustomScreen.js
index e773f93..cff1769 100644
--- a/CustomScreen.js
+++ b/CustomScreen.js
@@ -1,12 +1,37 @@
 import React, { Component } from 'react';
 import NavigationBar from 'react-native-navbar';
+import styles from  './style';
 import {
   Text,
-  View
+  View,
+  AsyncStorage,
+  Button
 } from 'react-native';
 
 
 export default class CustomScreen extends Component {
+  constructor(props) {
+        super(props);
+        console.log("CustomScreen contructor ", this.props.feedId);
+        this.state = {
+          favouriteList: []
+        }
+    }
+
+  _saveDataLocal = async (feed) => {
+    console.log('Function add to my favourite list ...');
+    var myFavourite = await AsyncStorage.getItem("favouriteList");
+    if(myFavourite === null) {
+      await AsyncStorage.setItem("favouriteList", JSON.stringify(feed));
+      var afterAdded = await AsyncStorage.getItem("favouriteList");
+      console.log("Add first feed to my favourite: ", afterAdded);
+    } else {
+      await AsyncStorage.mergeItem("favouriteList", JSON.stringify(feed));
+      var afterAdded = await AsyncStorage.getItem("favouriteList");
+      console.log("Add one more feed to my favourite: ", afterAdded);
+    }
+  }
+
   render() {
     const leftButtonConfig = {
       title: 'Back',
@@ -18,6 +43,14 @@ export default class CustomScreen extends Component {
         <NavigationBar
           title={{ title: 'Custom screen', }}
           leftButton={leftButtonConfig} />
+        <Text>{this.props.name.title}</Text>
+        <View style={styles.initview.button}>
+          <Button
+            onPress={() => {this._saveDataLocal(this.props.name)}}
+            title="Add to Favourite"
+          />
+        </View>
+
       </View>
     );
   }
diff --git a/IntialScreen.js b/IntialScreen.js
index 5768601..a10356b 100644
--- a/IntialScreen.js
+++ b/IntialScreen.js
@@ -1,25 +1,191 @@
 import React, { Component } from 'react';
 import NavigationBar from 'react-native-navbar';
 import CustomScreen from './CustomScreen';
-
+import styles from  './style';
 import {
-  View
+  View,
+  ListView,
+  Text,
+  Image,
+  TouchableHighlight,
+  ActivityIndicator,
+  AsyncStorage
 } from 'react-native';
 
+import InfiniteScrollView from 'react-native-infinite-scroll-view';
+import Spinner from 'react-native-loading-spinner-overlay';
+import TimerMixin from 'react-timer-mixin';
+
 export default class InitialScreen extends Component {
+
+  constructor(props) {
+    super(props);
+    console.log("contructor is called");
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    let feeds =[];
+    this.state = {
+      isLoading : true,
+      dataSource: ds.cloneWithRows(feeds),
+      canLoadMoreContent : true,
+      feeds : feeds,
+      feedPage : 0,
+      visible: false
+    }
+
+  };
+
+  componentWillMount() {
+    console.log("component will mount ...");
+
+  }
+
+  componentDidMount() {
+    console.log("component did mount ...");
+    this.loadFeedsFirstTime();
+  }
+
+  componentWillUnmount() {
+    console.log("component un mount ...");
+  }
+
+  loadFeedsFirstTime() {
+    const API_URL = 'http://espm-service.espm-supermedia.com/feed/find';
+    var data = {
+      method : 'POST',
+      headers: {
+         'Accept': 'application/json',
+         'Content-Type': 'application/json',
+         'Origin': '',
+         'Host': 'espm-service.espm-supermedia.com'
+       },
+       body: JSON.stringify({
+         "where":{"status":0,"type":1},"limit":7,"sort":"points DESC"
+       })
+    };
+
+    fetch(API_URL,data)
+    .then((response) => response.json())
+    .then((responseData) => {
+        let feeds = responseData.filter((feed) => {
+            return feed;
+         })
+         console.log("first time data :",feeds);
+         this.setState({
+           isLoading : false,
+           dataSource: this.state.dataSource.cloneWithRows(feeds),
+           feeds : feeds,
+           feedPage : 1
+         });
+    })
+    .done();
+
+  }
+
+  loadMoreContentAsync () {
+    console.log("load more ...");
+    /*TimerMixin.setTimeout(
+      () => {
+        this.setState({
+          isLoading : true
+        });
+       },
+      1000
+    );*/
+
+     const API_URL = 'http://espm-service.espm-supermedia.com/feed/find';
+     let data = {
+       method : 'POST',
+       headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'Origin': '',
+          'Host': 'espm-service.espm-supermedia.com'
+        },
+        body: JSON.stringify({
+          "where":{"type":1},"limit":7,"skip":this.state.feedPage*7,"sort":"points DESC"
+        })
+     };
+
+     fetch(API_URL,data)
+     .then((response) => response.json())
+     .then((responseData) => {
+       console.log("get feeds load more ...")
+         let newfeeds = responseData.filter((feed) => {
+             return feed;
+          })
+          let totalFeed = this.state.feeds.concat(newfeeds);
+          /*this.setState({
+            isLoading : false,
+            dataSource: this.state.dataSource.cloneWithRows(totalFeed),
+            feeds : totalFeed,
+            feedPage : this.state.feedPage + 1
+          });*/
+          this.setState({
+            dataSource: this.state.dataSource.cloneWithRows(totalFeed),
+            feeds : totalFeed,
+          });
+     })
+     .done();
+
+  }
+
+  renderRow(feed, sectionID: number, rowID: number, highlightRow : (sectionID: number, rowID: number) => void) {
+    return (
+      <TouchableHighlight onPress={() => {
+          highlightRow(sectionID, rowID);
+          this.props.navigator.push({
+                name: 'CustomScreen', // Matches route.name
+                passProps: {
+                    name: feed
+                }
+            })
+        }}>
+        <View>
+          <View style={styles.initview.row}>
+            <Image style={styles.initview.thumb} source={{uri: feed.thumb}} />
+            <View style={styles.initview.text}>
+              <Text style={styles.initview.description}>{feed.title}</Text>
+            </View>
+          </View>
+        </View>
+
+
+      </TouchableHighlight>
+    );
+  }
+  renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
+    return (
+      <View
+        style={styles.initview.sperator}
+      />
+    );
+  };
+
+  renderLoadingView() {
+    return (
+      <View style={styles.initview.loading}>
+        <ActivityIndicator size='large'></ActivityIndicator>
+        <Text>Loading...</Text>
+      </View>
+    )
+  };
+
   render() {
-    const rightButtonConfig = {
-      title: 'Forward',
-      handler: () => this.props.navigator.push({
-        component: CustomScreen,
-      }),
+
+    if(this.state.isLoading) {
+      return this.renderLoadingView();
     };
 
     return (
-      <View style={{ flex: 1, backgroundColor: '#ff9900', }}>
-        <NavigationBar
-          title={{ title: 'Title', }}
-          rightButton={rightButtonConfig} />
+
+      <View>
+          <ListView
+             renderScrollComponent={props => <InfiniteScrollView {...props} />}
+             dataSource={this.state.dataSource}
+             renderRow={(this.renderRow.bind(this))}
+             canLoadMore={this.state.canLoadMoreContent}
+             onLoadMoreAsync={this.loadMoreContentAsync.bind(this)}
+           />
 
       </View>
     );
diff --git a/index.android.js b/index.android.js
index 6bd0731..df6d3f7 100755
--- a/index.android.js
+++ b/index.android.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import styles from  './style';
 import NavigationBar from 'react-native-navbar';
-import IntialScreen from './IntialScreen'
+import IntialScreen from './IntialScreen';
+import CustomScreen from './CustomScreen';
 import {
   AppRegistry,
   Text,
@@ -11,19 +12,26 @@ import {
 } from 'react-native';
 
 
-function renderScene(route, navigator) {
-  return <route.component route={route} navigator={navigator} />;
-}
+
 
 export default class AwesomeProject extends Component {
 
+  renderScene(route, navigator) {
+     if(route.name == 'IntialScreen') {
+       return <IntialScreen navigator={navigator} {...route.passProps} />
+     }
+     if(route.name == 'CustomScreen') {
+       return <CustomScreen navigator={navigator} {...route.passProps} />
+     }
+  }
+
   render() {
         const initialRoute = {
           component : IntialScreen
         }
         return (
             <View style={{ flex: 1, backgroundColor: '#ff9900', }}>
-              <Navigator initialRoute={initialRoute} renderScene={renderScene}/>
+              <Navigator initialRoute={{name:'IntialScreen'}} renderScene={this.renderScene} />
 
             </View>
         );
diff --git a/package.json b/package.json
index 9e52786..8c6d2c8 100755
--- a/package.json
+++ b/package.json
@@ -7,8 +7,11 @@
     "test": "jest"
   },
   "dependencies": {
+    "@remobile/react-native-refresh-infinite-listview": "^1.0.6",
     "react": "15.4.2",
     "react-native": "0.40.0",
+    "react-native-infinite-scroll-view": "^0.4.2",
+    "react-native-loading-spinner-overlay": "^0.4.1",
     "react-native-navbar": "^1.6.0"
   },
   "devDependencies": {
diff --git a/style.js b/style.js
index 05c4b7d..57c74ea 100644
--- a/style.js
+++ b/style.js
@@ -1,5 +1,9 @@
 'use strict';
+import global from './styles/global';
+import navbar from './styles/navbar';
+import initview from './styles/initview';
 export default {
-  global: require('./styles/global'),
-  navbar: require('./styles/navbar')
+  global,
+  navbar,
+  initview
 };
diff --git a/styles/initview.js b/styles/initview.js
new file mode 100644
index 0000000..c004acf
--- /dev/null
+++ b/styles/initview.js
@@ -0,0 +1,48 @@
+'use strict';
+
+import React, { Component } from 'react';
+import {
+  StyleSheet
+} from 'react-native';
+
+export default StyleSheet.create({
+
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 10,
+    backgroundColor: '#F6F6F6',
+  },
+
+  thumb: {
+    width: 64,
+    height: 64
+  },
+
+  text: {
+    flex: 1,
+    padding: 10
+  },
+
+  sperator: {
+    height: 1,
+    flex: 1,
+    backgroundColor: '#CCCCCC',
+  },
+
+  title: {
+    fontSize: 10,
+    fontWeight: 'bold'
+  },
+
+  description: {
+    fontFamily: 'Cochin',
+    fontSize: 8
+  },
+  button: {
+    minHeight: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 30
+  }
+});