diff --git a/MobileApp/package.json b/MobileApp/package.json
index cf64248..ba560c3 100644
--- a/MobileApp/package.json
+++ b/MobileApp/package.json
@@ -27,6 +27,6 @@
     "react": "16.3.1",
     "react-native": "~0.55.2",
     "react-native-communications": "^2.2.1",
-    "react-navigation": "^2.2.5"
+    "react-navigation": "^2.3.1"
   }
 }
diff --git a/MobileApp/src/components/app-navigator.js b/MobileApp/src/components/app-navigator.js
index 976330b..fec4e8f 100644
--- a/MobileApp/src/components/app-navigator.js
+++ b/MobileApp/src/components/app-navigator.js
@@ -2,33 +2,45 @@ import {createStackNavigator, createBottomTabNavigator} from 'react-navigation'
 import AuthScreen from './screens/auth'
 import EventList from './screens/event-list'
 import PeopleList from './screens/people-list'
+import PersonScreen from './screens/person'
 import EventScreen from './screens/event'
 import EventMapScreen from './screens/event-map'
+import CameraScreen from "./screens/camera";
 
 const ListsNavigator = createBottomTabNavigator({
-    events: {
-        screen: EventList
-    },
-    people: {
-        screen: PeopleList
-    }
+  events: {
+    screen: EventList
+  },
+  people: {
+    screen: PeopleList
+  },
+/*  camera: {
+    screen: CameraScreen,
+  }*/
 })
 
 
 export default createStackNavigator({
-    auth: {
-        screen: AuthScreen,
-        navigationOptions: {
-            title: 'Auth'
-        }
-    },
-    lists: {
-        screen: ListsNavigator,
-        navigationOptions: {
-            title: 'Lists'
-        }
-    },
-    event: {
-        screen: EventMapScreen
+  auth: {
+    screen: AuthScreen,
+    navigationOptions: {
+      title: 'Auth'
+    }
+  },
+  lists: {
+    screen: ListsNavigator,
+    navigationOptions: {
+      title: 'Lists'
     }
+  },
+  event: {
+    screen: EventMapScreen
+  },
+  person: {
+    screen: PersonScreen
+  },
+  camera: {
+    screen: CameraScreen,
+
+  },
 })
\ No newline at end of file
diff --git a/MobileApp/src/components/people/people-list.js b/MobileApp/src/components/people/people-list.js
index e90c07a..08da6e5 100644
--- a/MobileApp/src/components/people/people-list.js
+++ b/MobileApp/src/components/people/people-list.js
@@ -7,7 +7,7 @@ import PersonCard from './person-card'
 @observer
 class PeopleList extends Component {
     static defaultProps = {
-        onPersonPress: () => {}
+      onPersonPress: () => {}
     };
 
     componentDidMount() {
@@ -22,7 +22,8 @@ class PeopleList extends Component {
         return <SectionList
             sections = {people.sections}
             renderSectionHeader = {({section}) => <Text style={styles.header}>{section.title}</Text>}
-            renderItem = {({item}) => <TouchableOpacity onPress = {onPersonPress.bind(null, item.key)}>
+            renderItem = {({item}) =>
+              <TouchableOpacity onPress = {() => onPersonPress(item.person)}>
                 <PersonCard person = {item.person} />
             </TouchableOpacity>}
         />
diff --git a/MobileApp/src/components/people/person-card.js b/MobileApp/src/components/people/person-card.js
index 1c6bac7..1103815 100644
--- a/MobileApp/src/components/people/person-card.js
+++ b/MobileApp/src/components/people/person-card.js
@@ -1,43 +1,83 @@
-import React, { Component } from 'react'
-import {View, Text, Image, StyleSheet} from 'react-native'
+import React, {Component} from 'react'
+import {View, Text, Image, StyleSheet, ActivityIndicator} from 'react-native'
 import Card from '../common/card'
+import firebase from 'firebase/app'
+import {config} from '../../config'
+import {observable, action} from 'mobx'
+import { observer, inject } from 'mobx-react'
 
+@inject('people')
+@observer
 class PersonCard extends Component {
-    static propTypes = {
-
-    };
-
-    render() {
-        const { email, firstName, lastName } = this.props.person
-        return (
-            <Card style = {styles.container}>
-                <Image source={{uri: 'http://lorempixel.com/200/100/people/'}} style = {styles.avatar}/>
-                <View style = {styles.content}>
-                    <Text style = {styles.email}>{email}</Text>
-                    <Text>{firstName} {lastName}</Text>
-                </View>
-            </Card>
-        )
+  static propTypes = {};
+
+  @observable loading = false
+  @observable loaded = false
+  @observable avatarURL = null
+
+  async componentDidMount() {
+    this.setLoading(true)
+    await this.getAvatar(this.props.person)
+  }
+
+  @action setAvatar = (url) => this.avatarURL = url
+  @action setLoading = loading => this.loading = loading
+  @action setLoaded = loaded => this.loaded = loaded
+
+  render() {
+    const {email, firstName, lastName} = this.props.person
+    const avatar = <Image source={{uri: this.avatarURL}} style={styles.avatar}/>
+    const loader = <View style={styles.avatar}><ActivityIndicator size="large"/></View>
+    return (
+      <Card style={styles.container}>
+          {this.loading || !this.loaded || !this.avatarURL ? loader : avatar}
+        <View style={styles.content}>
+          <Text style={styles.email}>{email}</Text>
+          <Text>{firstName} {lastName}</Text>
+        </View>
+      </Card>
+    )
+  }
+  async getAvatar({uid, avatar}) {
+
+    if (!avatar) {
+      await this.setAvatar('https://picsum.photos/200/100/?random')
+    } else {
+      await firebase.storage()
+        .refFromURL(`gs://${config.storageBucket}/avatars/${uid}/${avatar}`)
+        .getDownloadURL()
+        .then(url => this.setAvatar(url))
     }
+
+    this.setLoading(false)
+    this.setLoaded(true)
+
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row'
-    },
-    avatar: {
-        width: 200,
-        height: 100,
-        margin: 5
-    },
-    content: {
-        flexDirection: 'column',
-        justifyContent: 'space-around',
-        alignItems: 'center'
-    },
-    email: {
-        fontWeight: 'bold'
-    }
+  container: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'space-around',
+  },
+  avatar: {
+    width: 200,
+    height: 100,
+    margin: 5,
+    justifyContent: 'center',
+
+  },
+  content: {
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+
+  },
+  email: {
+    fontWeight: 'bold'
+  }
 })
 
+
 export default PersonCard
\ No newline at end of file
diff --git a/MobileApp/src/components/people/person.js b/MobileApp/src/components/people/person.js
new file mode 100644
index 0000000..6034e1d
--- /dev/null
+++ b/MobileApp/src/components/people/person.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import {View, Text, Image, StyleSheet, Button, TouchableOpacity} from 'react-native'
+import ConfirmModal from '../common/confirm-modal'
+import {web} from 'react-native-communications'
+import {observer, inject} from 'mobx-react'
+
+
+class Person extends Component {
+    static propTypes = {
+
+    };
+
+    state = {
+        confirmModal: false
+    }
+
+    render() {
+        const {makePhoto, person} = this.props
+          // console.log(this.props.navigation)
+        return (
+            <View style = {styles.container}>
+                <Text style = {[styles.text, styles.header]}>{person.email}</Text>
+                <Button title = 'Make photo' onPress = {() => makePhoto(person)}/>
+            </View>
+        )
+    }
+
+
+    openPage = () => {
+        web(this.props.person.url)
+    }
+
+    handleDelete = () => {
+        this.setState({
+            confirmModal: true
+        })
+    }
+
+    confirmDelete = () => this.setState({ confirmModal: false })
+    cancelDelete = () => this.setState({ confirmModal: false })
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'space-around',
+        alignItems: 'center',
+    },
+    header: {
+        backgroundColor: '#F2F2F2',
+        shadowColor: '#000',
+        shadowOpacity: 0.8,
+        shadowOffset: {
+            height: 2,
+            width: 0
+        },
+        elevation: 5
+    },
+    text: {
+        width: '100%',
+        height: 100,
+        marginBottom: 20,
+        textAlign: 'center'
+    },
+    image: {
+        width: 200,
+        height: 100
+    },
+    button: {
+        width: '100%',
+        height: 100,
+        marginBottom: 30
+    }
+})
+
+
+export default Person
\ No newline at end of file
diff --git a/MobileApp/src/components/screens/camera.js b/MobileApp/src/components/screens/camera.js
new file mode 100644
index 0000000..7e22e42
--- /dev/null
+++ b/MobileApp/src/components/screens/camera.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import {Text, View, TouchableOpacity, StatusBar} from 'react-native';
+import {Camera, Permissions} from 'expo';
+import firebase from 'firebase/app'
+import { observable, action } from 'mobx'
+import { observer, inject } from 'mobx-react'
+
+
+@inject('people')
+@observer
+export default class CameraScreen extends React.Component {
+  state = {
+    hasCameraPermission: null,
+    type: Camera.Constants.Type.front,
+  };
+
+  static navigationOptions = {
+    tabBarVisible: false,
+    header: null,
+    title: null
+  }
+
+  async componentWillMount() {
+    const {status} = await Permissions.askAsync(Permissions.CAMERA);
+    this.setState({hasCameraPermission: status === 'granted'});
+  }
+
+  render() {
+    const {hasCameraPermission} = this.state;
+    if (hasCameraPermission === null) {
+      return <View/>;
+    } else if (hasCameraPermission === false) {
+      return <Text>No access to camera</Text>;
+    } else {
+      return (
+        <View style={{flex: 1}}>
+          <StatusBar
+            hidden
+          />
+          <Camera style={{flex: 1}} type={this.state.type}
+                  ref={ref => {
+                    this.camera = ref;
+                  }}>
+            <View
+              style={{
+                flex: 1,
+                backgroundColor: 'transparent',
+                flexDirection: 'row',
+              }}>
+              <TouchableOpacity
+                onPress={() => this.props.navigation.goBack()}
+                style={{
+                  flex: 1,
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                }}>
+                <Text
+                  style={{fontSize: 18, marginBottom: 10, color: 'white'}}>
+                  {' '}Cancel{' '}
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                onPress={this.snap}
+                style={{
+                  flex: 1,
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                }}>
+                <Text
+                  style={{fontSize: 18, marginBottom: 10, color: 'white'}}>
+                  {' '}Snapshot{' '}
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={{
+                  flex: 1,
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                }}
+                onPress={() => {
+                  this.setState({
+                    type: this.state.type === Camera.Constants.Type.back
+                      ? Camera.Constants.Type.front
+                      : Camera.Constants.Type.back,
+                  });
+                }}>
+                <Text
+                  style={{fontSize: 18, marginBottom: 10, color: 'white'}}>
+                  {' '}Flip{' '}
+                </Text>
+              </TouchableOpacity>
+
+{/*              <Text
+                style={{
+                  flex: 1,
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                  fontSize: 18, marginBottom: 10, color: 'white'
+                }}>
+                {this.text}
+              </Text>*/}
+            </View>
+          </Camera>
+        </View>
+      );
+
+    }
+  }
+
+  snap = async () => {
+    if (this.camera) {
+      const photo = await this.camera.takePictureAsync();
+      const { uid } = this.props.navigation.state.params
+      this.props.people.saveAvatar(uid, photo)
+      this.props.navigation.goBack()
+    }
+  };
+}
\ No newline at end of file
diff --git a/MobileApp/src/components/screens/people-list.js b/MobileApp/src/components/screens/people-list.js
index cea8fa0..2e302c4 100644
--- a/MobileApp/src/components/screens/people-list.js
+++ b/MobileApp/src/components/screens/people-list.js
@@ -22,12 +22,16 @@ class PeopleListScreen extends Component {
     render() {
         const {people} = this.props
         if (people.loading) return this.getLoader()
-        return <PeopleList />
+        return <PeopleList onPersonPress = {this.handlePersonPress}/>
     }
 
     getLoader() {
         return <View><ActivityIndicator size='large'/></View>
     }
+
+  handlePersonPress = ({ uid }) => {
+    this.props.navigation.navigate('person', { uid })
+  }
 }
 
 const styles = StyleSheet.create({
diff --git a/MobileApp/src/components/screens/person.js b/MobileApp/src/components/screens/person.js
new file mode 100644
index 0000000..77a48ee
--- /dev/null
+++ b/MobileApp/src/components/screens/person.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import {inject, observer} from 'mobx-react'
+import Person from '../people/person'
+
+@inject('people') @observer
+class PersonScreen extends Component {
+  static propTypes = {
+
+  };
+
+  static navigationOptions = {
+    title: 'person'
+  }
+
+  render() {
+    return <Person person = {this.props.people.entities[this.props.navigation.state.params.uid]} makePhoto = {this.makePhoto}/>
+  }
+
+  makePhoto = ({uid}) => {
+    this.props.navigation.navigate('camera', { uid })
+  }
+}
+
+export default PersonScreen
\ No newline at end of file
diff --git a/MobileApp/src/config.js b/MobileApp/src/config.js
index aa22b3b..3dc0964 100644
--- a/MobileApp/src/config.js
+++ b/MobileApp/src/config.js
@@ -1,16 +1,17 @@
 import firebase from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
+import 'firebase/storage'
 
-export const appName = 'advreact-10-05'
+export const appName = 'advancedreactcourse'
 
 export const config = {
-  apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U',
+  apiKey: 'AIzaSyCCtMGA9FTNVds_QTkB1oRTlqF2u07MHuk',
   authDomain: `${appName}.firebaseapp.com`,
   databaseURL: `https://${appName}.firebaseio.com`,
   projectId: appName,
-  storageBucket: '',
-  messagingSenderId: '1094825197832'
+  storageBucket: `${appName}.appspot.com`,
+  messagingSenderId: '649150663252'
 }
 
 firebase.initializeApp(config)
diff --git a/MobileApp/src/stores/entities-store.js b/MobileApp/src/stores/entities-store.js
index c7d100d..4aed3b7 100644
--- a/MobileApp/src/stores/entities-store.js
+++ b/MobileApp/src/stores/entities-store.js
@@ -4,31 +4,55 @@ import firebase from 'firebase/app'
 import {entitiesFromFB} from './utils'
 
 class EntitiesStore extends BasicStore {
-    @observable loading = false
-    @observable loaded = false
+  @observable loading = false
+  @observable loaded = false
 
-    @observable entities = {}
+  @observable entities = {}
 
-    @computed get list() {
-        return Object.values(this.entities)
-    }
+  @computed
+  get list() {
+    return Object.values(this.entities)
+  }
 
-    @computed get size() {
-        return Object.keys(this.entities).length
-    }
+  @computed
+  get size() {
+    return Object.keys(this.entities).length
+  }
 }
 
 export function loadAllHelper(refName) {
-    return action(function () {
-        this.loading = true
-
-        firebase.database().ref(refName)
-            .once('value', action(data => {
-                this.entities = entitiesFromFB(data.val())
-                this.loading = false
-                this.loaded = true
-            }))
+  return action(function() {
+    this.loading = true
+    firebase.database().ref(refName)
+      .once('value', action(data => {
+        this.entities = entitiesFromFB(data.val())
+        this.loading = false
+        this.loaded = true
+      }))
+  })
+}
+
+export function subscribe(refName) {
+  return action(() => {
+    this.loading = true
+
+    const callback = action(data => {
+      this.entities = entitiesFromFB(data.val())
+      this.loading = false
+      this.loaded = true
     })
+
+    firebase
+      .database()
+      .ref(refName)
+      .on('value', callback)
+
+    return () =>
+      firebase
+        .database()
+        .ref(refName)
+        .off('value', callback)
+  })
 }
 
 export default EntitiesStore
\ No newline at end of file
diff --git a/MobileApp/src/stores/navigation.js b/MobileApp/src/stores/navigation.js
index e85a376..21d0cdb 100644
--- a/MobileApp/src/stores/navigation.js
+++ b/MobileApp/src/stores/navigation.js
@@ -8,7 +8,6 @@ export default class NavigationStore extends BasicStore {
             const {user} = this.getStore('auth')
 
             this.reset(user ? 'lists' : 'auth')
-            console.log('---', 'user: ', user)
         })
     }
 
diff --git a/MobileApp/src/stores/people.js b/MobileApp/src/stores/people.js
index c1877f6..2e9599c 100644
--- a/MobileApp/src/stores/people.js
+++ b/MobileApp/src/stores/people.js
@@ -1,18 +1,48 @@
-import EntitiesStore, {loadAllHelper}  from './entities-store'
-import {computed, action} from 'mobx'
+import EntitiesStore, {subscribe} from './entities-store'
+import {computed, action, observable} from 'mobx'
 import groupBy from 'lodash/groupBy'
+import firebase from 'firebase/app'
+import {config} from '../config'
 
 class PeopleStore extends EntitiesStore {
-    @computed get sections() {
-        const grouped = groupBy(this.list, person => person.firstName.charAt(0))
+  @computed
+  get sections() {
+    const grouped = groupBy(this.list, person => person.firstName.charAt(0))
 
-        return Object.entries(grouped).map(([letter, list]) => ({
-            title: `${letter}, ${list.length} people`,
-            data: list.map(person => ({key: person.uid, person}))
-        }))
-    }
+    return Object.entries(grouped).map(([letter, list]) => ({
+      title: `${letter}, ${list.length} people`,
+      data: list.map(person => ({key: person.uid, person}))
+    }))
+  }
+
+  @action loadAll = subscribe('people')
+
+  async saveAvatar(uid, {uri}) {
+
+    const avatar = uri.replace(/.*\//ig, '')
+    const ref = firebase
+      .storage()
+      .ref(`/avatars/${uid}`)
+      .child(avatar);
+
+    const file = await fetch(uri)
+      .then(res => res.blob())
+
+    await ref.put(file).then(function (snapshot) {
+      console.log('Uploaded a blob or file!');
+    });
+
+    this.updatePerson(uid, {avatar})
+  }
+
+  @action
+  updatePerson = (uid, data) =>
+    firebase
+      .database()
+      .ref(`people/${uid}`)
+      .update(data)
 
-    @action loadAll = loadAllHelper('people')
 }
 
+
 export default PeopleStore
\ No newline at end of file