diff --git a/app/containers/Connect/actions.js b/app/containers/Connect/actions.js
new file mode 100644
index 00000000..c8c06ef8
--- /dev/null
+++ b/app/containers/Connect/actions.js
@@ -0,0 +1,79 @@
+import {
+  DevSummitAxios,
+  getAccessToken
+} from '../../helpers';
+
+import local from '../../../config/local';
+import {
+  FETCH_MATERIAL_LIST,
+  UPDATE_SINGLE_INPUT_FIELD,
+  UPDATE_MODAL_STATUS
+} from './constants';
+
+export function updateInputFields(field, value) {
+  return {
+    type: UPDATE_SINGLE_INPUT_FIELD,
+    field,
+    value
+  };
+}
+
+export function updateModalStatus(status) {
+  return {
+    type: UPDATE_MODAL_STATUS,
+    status
+  };
+}
+
+export function fetchMaterialList() {
+  return (dispatch) => {
+    getAccessToken()
+      .then((token) => {
+        const headers = { Authorization: token };
+        DevSummitAxios.get('api/v1/documents', { headers })
+          .then((response) => {
+            dispatch({
+              type: FETCH_MATERIAL_LIST,
+              payloads: response.data.data
+            });
+          });
+      });
+  };
+}
+
+export function saveMaterialList(image) {
+  return (dispatch, getState) => {
+    const { fields } = getState().get('materialList').toJS();
+    const {
+      title,
+      summary,
+      file
+    } = fields || null;
+    getAccessToken()
+      .then((token) => {
+        // @TODO We need to change into dev-summit url
+        const url = local.API_BASE_URL.concat('api/v1/documents');
+        const form = new FormData();
+
+        form.append('title', title);
+        form.append('summary', summary);
+        form.append('document_data', {
+          uri: file.uri,
+          type: file.type,
+          name: file.fileName
+        });
+
+        fetch(url, {
+          method: 'POST',
+          headers: {
+            Authorization: token
+          },
+          body: form
+        })
+          .then(resp => resp.json())
+          .then((resp) => {
+            dispatch(updateModalStatus(false));
+          }).catch(err => console.log(err));
+      });
+  };
+}
diff --git a/app/containers/Connect/constants.js b/app/containers/Connect/constants.js
new file mode 100644
index 00000000..8d5bf727
--- /dev/null
+++ b/app/containers/Connect/constants.js
@@ -0,0 +1,3 @@
+export const FETCH_MATERIAL_LIST = 'app/containers/Speaker/FETCH_MATERIAL_LIST';
+export const UPDATE_SINGLE_INPUT_FIELD = 'app/containers/MaterialList/UPDATE_SINGLE_INPUT_FIELD';
+export const UPDATE_MODAL_STATUS = 'app/containers/MaterialList/UPDATE_MODAL_STATUS';
diff --git a/app/containers/Connect/index.js b/app/containers/Connect/index.js
new file mode 100644
index 00000000..3e77e051
--- /dev/null
+++ b/app/containers/Connect/index.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import {
+  Container,
+  Content,
+  Header,
+  Button,
+  Item,
+  Input,
+  Text,
+  Label,
+  Card,
+  CardItem,
+  Body,
+  Fab
+} from 'native-base';
+import { Alert, View, Image, KeyboardAvoidingView, TouchableOpacity,TouchableHighlight,  Modal } from 'react-native';
+import Icon from 'react-native-vector-icons';
+import { Actions } from 'react-native-router-flux';
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import HeaderPoint from '../../components/Header';
+import ModalComponent from '../../components/ModalComponent';
+import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker';
+import Toast from 'react-native-simple-toast';
+import styles from './styles';
+import * as selectors from './selectors';
+import * as actions from './actions';
+import { SocialIcon } from 'react-native-elements'
+
+class ConnectSosmed extends Component {
+
+  render() {
+    return (
+      <Container>
+        <HeaderPoint title="CONNECT" />
+        <Content>
+          <View style={styles.buttonSocialSection}>
+            <SocialIcon
+              title="Connect To Facebook"
+              button
+              type="facebook"
+            />
+            <SocialIcon
+              title="Connect To Instagram"
+              button
+              type="instagram"
+            />
+            <SocialIcon
+              title="Connect To Twitter"
+              button
+              type="twitter"
+            />
+          </View>
+        </Content>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = createStructuredSelector({
+
+});
+export default connect(mapStateToProps, actions)(ConnectSosmed);
diff --git a/app/containers/Connect/reducer.js b/app/containers/Connect/reducer.js
new file mode 100644
index 00000000..de395f49
--- /dev/null
+++ b/app/containers/Connect/reducer.js
@@ -0,0 +1,32 @@
+import { fromJS } from 'immutable';
+
+import {
+  FETCH_MATERIAL_LIST,
+  UPDATE_SINGLE_INPUT_FIELD,
+  UPDATE_MODAL_STATUS
+} from './constants';
+
+const initialState = fromJS({
+  material: [],
+  visible: false,
+  fields: {
+    title: '',
+    summary: '',
+    file: null
+  }
+});
+
+function materialListReducer(state = initialState, action) {
+  switch (action.type) {
+    case FETCH_MATERIAL_LIST:
+      return state.set('material', action.payloads);
+    case UPDATE_MODAL_STATUS:
+      return state.set('visible', action.status);
+    case UPDATE_SINGLE_INPUT_FIELD:
+      return state.setIn([ 'fields', action.field ], action.value);
+    default:
+      return state;
+  }
+}
+
+export default materialListReducer;
diff --git a/app/containers/Connect/selectors.js b/app/containers/Connect/selectors.js
new file mode 100644
index 00000000..e17c57ab
--- /dev/null
+++ b/app/containers/Connect/selectors.js
@@ -0,0 +1,18 @@
+import { createSelector } from 'reselect';
+
+const selectListMaterialReducer = () => state => state.get('materialList');
+
+export const getListMaterial = () => createSelector(
+  selectListMaterialReducer(),
+  state => state.get('material')
+);
+
+export const getInputFields = () => createSelector(
+  selectListMaterialReducer(),
+  state => state.get('inputFields').toJS()
+);
+
+export const getModalStatus = () => createSelector(
+  selectListMaterialReducer(),
+  state => state.get('visible')                                                                   
+);
diff --git a/app/containers/Connect/styles.js b/app/containers/Connect/styles.js
new file mode 100644
index 00000000..607b9dd0
--- /dev/null
+++ b/app/containers/Connect/styles.js
@@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'rgb(255,255,255)'
+  },
+  content: {
+    marginTop: -40,
+    paddingLeft: 5,
+    paddingRight: 5
+  },
+  bodySection: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: 5
+  },
+  profileSection: {
+    flex: 2
+  },
+  nameSection: {
+    marginLeft: 15,
+    flex: 8
+  },
+  name: {
+    color: '#333',
+    fontSize: 18,
+    fontWeight: 'bold'
+  },
+  summary: {
+    color: '#333',
+    paddingTop: 10
+  },
+  footerSection: {
+    flex: 1,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end'
+  },
+  footerButton: {
+    borderRadius: 50,
+    height: 35,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    textAlign: 'center',
+    flex: 1,
+    fontSize: 18,
+    alignSelf: 'center'
+  },
+  buttonSocialSection: {
+    flex: 1,
+    flexDirection: 'column',
+    marginLeft: 12,
+    marginRight: 12,
+    marginTop: 5,
+    marginBottom: 5
+  },
+  buttonSocial: {
+    justifyContent: 'center',
+    marginLeft: 5,
+    borderColor: 'transparent',
+    borderWidth: 1,
+    borderRadius: 30,
+    marginRight: 5,
+    flexDirection: 'row',
+    elevation: 0,
+    flex: 0.3,
+    marginTop: 5,
+  },
+  buttonText: {
+    textAlign: 'center',
+    alignSelf: 'center'
+  }
+});
+
+export default styles;
diff --git a/app/containers/Settings/index.js b/app/containers/Settings/index.js
index 8aa46117..636fae3d 100644
--- a/app/containers/Settings/index.js
+++ b/app/containers/Settings/index.js
@@ -59,7 +59,7 @@ class Settings extends Component {
                 block
                 rounded
                 style={styles.button}
-                onPress={() => Actions.profile()}
+                onPress={() => Actions.connectSosmed()}
               >
                 <Text>Connect To Social Media</Text>
               </Button>
diff --git a/app/index.js b/app/index.js
index 3efa235a..c2eb53be 100644
--- a/app/index.js
+++ b/app/index.js
@@ -34,6 +34,7 @@ import PaymentDetail from './containers/PaymentDetail';
 import BoothList from './containers/BoothList';
 import BoothInfo from './containers/BoothInfo';
 import Profile from './containers/Profile';
+import ConnectSosmed from './containers/Connect';
 
 const RouterWithRedux = connect()(Router);
 const BackButtonImg = require('../assets/images/back.png');
@@ -91,6 +92,7 @@ export default class App extends Component {
             <Scene key="boothList" component={BoothList} title="Booth List" />
             <Scene key="boothInfo" component={BoothInfo} title="Booth Info" />
             <Scene key="profile" component={Profile} title="Profile" />
+            <Scene key="connectSosmed" component={ConnectSosmed} title="Connect To Social Media" />
           </Scene>
         </RouterWithRedux>
       </Provider>
diff --git a/package.json b/package.json
index 5952f39f..e1ecff22 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "react-native": "0.46.4",
     "react-native-code-push": "^5.1.0-beta",
     "react-native-document-picker": "^2.0.0",
+    "react-native-elements": "^0.17.0",
     "react-native-facebook-account-kit": "^0.7.0",
     "react-native-file-upload": "^1.0.4",
     "react-native-form-validator": "^0.1.3",