diff --git a/MobileApp/App.js b/MobileApp/App.js
index 4857ffc..55989c2 100644
--- a/MobileApp/App.js
+++ b/MobileApp/App.js
@@ -1,41 +1,44 @@
-import {configure} from 'mobx'
-import {Provider} from 'mobx-react'
+import { configure } from 'mobx'
+import { Provider } from 'mobx-react'
 
-configure({enforceActions: true})
+configure({ enforceActions: true })
 
-import React from 'react';
-import {StyleSheet} from 'react-native';
+import React from 'react'
+import { StyleSheet } from 'react-native'
 import fixtures from './fixtures.json'
 import AppNavigator from './src/components/app-navigator'
 import stores from './src/stores'
 
-
-const events = Object.entries(fixtures.events).map(([uid, event]) => ({...event, uid}))
+const events = Object.entries(fixtures.events).map(([uid, event]) => ({
+  ...event,
+  uid
+}))
 
 export default class App extends React.Component {
-    render() {
-        return <Provider {...stores}>
-            <AppNavigator ref={this.setNavRef}/>
-        </Provider>
-    }
-
-    setNavRef = (ref) => {
-        stores.navigation.setRef(ref)
-    }
+  render() {
+    return (
+      <Provider {...stores}>
+        <AppNavigator ref={this.setNavRef} />
+      </Provider>
+    )
+  }
+
+  setNavRef = (ref) => {
+    stores.navigation.setRef(ref)
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingTop: 30,
-        paddingBottom: 30,
-    },
-    image: {
-        width: '100%',
-        height: 100
-    }
-});
-
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 30,
+    paddingBottom: 30
+  },
+  image: {
+    width: '100%',
+    height: 100
+  }
+})
diff --git a/MobileApp/package.json b/MobileApp/package.json
index cf64248..23b7d2d 100644
--- a/MobileApp/package.json
+++ b/MobileApp/package.json
@@ -19,6 +19,7 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "base64-arraybuffer": "^0.1.5",
     "expo": "^27.0.1",
     "firebase": "^5.0.4",
     "lodash": "^4.17.10",
diff --git a/MobileApp/src/components/app-navigator.js b/MobileApp/src/components/app-navigator.js
index 976330b..96e0654 100644
--- a/MobileApp/src/components/app-navigator.js
+++ b/MobileApp/src/components/app-navigator.js
@@ -1,34 +1,40 @@
-import {createStackNavigator, createBottomTabNavigator} from 'react-navigation'
+import {
+  createStackNavigator,
+  createBottomTabNavigator
+} from 'react-navigation'
 import AuthScreen from './screens/auth'
 import EventList from './screens/event-list'
 import PeopleList from './screens/people-list'
 import EventScreen from './screens/event'
 import EventMapScreen from './screens/event-map'
+import PersonCamScreen from './screens/person-cam'
 
 const ListsNavigator = createBottomTabNavigator({
-    events: {
-        screen: EventList
-    },
-    people: {
-        screen: PeopleList
-    }
+  events: {
+    screen: EventList
+  },
+  people: {
+    screen: PeopleList
+  }
 })
 
-
 export default createStackNavigator({
-    auth: {
-        screen: AuthScreen,
-        navigationOptions: {
-            title: 'Auth'
-        }
-    },
-    lists: {
-        screen: ListsNavigator,
-        navigationOptions: {
-            title: 'Lists'
-        }
-    },
-    event: {
-        screen: EventMapScreen
+  auth: {
+    screen: AuthScreen,
+    navigationOptions: {
+      title: 'Auth'
     }
-})
\ No newline at end of file
+  },
+  lists: {
+    screen: ListsNavigator,
+    navigationOptions: {
+      title: 'Lists'
+    }
+  },
+  event: {
+    screen: EventMapScreen
+  },
+  person: {
+    screen: PersonCamScreen
+  }
+})
diff --git a/MobileApp/src/components/people/people-list.js b/MobileApp/src/components/people/people-list.js
index e90c07a..d0cb4bd 100644
--- a/MobileApp/src/components/people/people-list.js
+++ b/MobileApp/src/components/people/people-list.js
@@ -1,46 +1,55 @@
 import React, { Component } from 'react'
-import {inject, observer} from 'mobx-react'
-import {TouchableOpacity, Text, SectionList, ActivityIndicator, StyleSheet} from 'react-native'
+import { inject, observer } from 'mobx-react'
+import {
+  TouchableOpacity,
+  Text,
+  SectionList,
+  ActivityIndicator,
+  StyleSheet
+} from 'react-native'
 import PersonCard from './person-card'
 
 @inject('people')
 @observer
 class PeopleList extends Component {
-    static defaultProps = {
-        onPersonPress: () => {}
-    };
+  componentDidMount() {
+    const { people } = this.props
+    if (!people.loaded) people.loadAll()
+  }
 
-    componentDidMount() {
-        const {people} = this.props
-        if (!people.loaded) people.loadAll()
-    }
+  render() {
+    const { onPersonPress, people } = this.props
+    if (people.loading) return <ActivityIndicator size="large" />
 
-    render() {
-        const {onPersonPress, people} = this.props
-        if (people.loading) return <ActivityIndicator size='large'/>
-
-        return <SectionList
-            sections = {people.sections}
-            renderSectionHeader = {({section}) => <Text style={styles.header}>{section.title}</Text>}
-            renderItem = {({item}) => <TouchableOpacity onPress = {onPersonPress.bind(null, item.key)}>
-                <PersonCard person = {item.person} />
-            </TouchableOpacity>}
-        />
-    }
+    return (
+      <SectionList
+        sections={people.sections}
+        renderSectionHeader={({ section }) => (
+          <Text style={styles.header}>{section.title}</Text>
+        )}
+        renderItem={({ item }) => (
+          <TouchableOpacity onPress={() => onPersonPress(item.person)}>
+            <PersonCard person={item.person} />
+          </TouchableOpacity>
+        )}
+      />
+    )
+  }
 }
 
 const styles = StyleSheet.create({
-    header: {
-        backgroundColor: '#F0F0F0',
-        height: 40,
-        lineHeight: 40,
-        marginBottom: 5,
-        shadowOffset: {
-            height: 2, width: 0
-        },
-        shadowOpacity: 0.3,
-        elevation: 3
-    }
+  header: {
+    backgroundColor: '#F0F0F0',
+    height: 40,
+    lineHeight: 40,
+    marginBottom: 5,
+    shadowOffset: {
+      height: 2,
+      width: 0
+    },
+    shadowOpacity: 0.3,
+    elevation: 3
+  }
 })
 
-export default PeopleList
\ No newline at end of file
+export default PeopleList
diff --git a/MobileApp/src/components/screens/event-map.js b/MobileApp/src/components/screens/event-map.js
index 7179cb1..1c4a732 100644
--- a/MobileApp/src/components/screens/event-map.js
+++ b/MobileApp/src/components/screens/event-map.js
@@ -1,56 +1,57 @@
 import React, { Component } from 'react'
-import {Text, StyleSheet} from 'react-native'
-import {MapView, Permissions, Location} from 'expo'
-import {observable, action} from 'mobx'
-import {observer} from 'mobx-react'
+import { Text, StyleSheet } from 'react-native'
+import { MapView, Permissions, Location } from 'expo'
+import { observable, action } from 'mobx'
+import { observer } from 'mobx-react'
 
 @observer
 class EventMap extends Component {
-    static navigationOptions = {
-        title: 'map'
-    }
-
-    @observable permissionAsked = false
-    @observable permissionGranted = false
-    @observable coords = null
-
-    async componentDidMount() {
-        this.setPermissionAsked(true)
-        const {status} = await Permissions.askAsync(Permissions.LOCATION)
-        this.setPermissionGranted(status === 'granted')
-        this.setCoords(await Location.getCurrentPositionAsync())
-    }
-
-
-    @action setPermissionAsked = asked => this.permissionAsked = asked
-    @action setPermissionGranted = granted => this.permissionGranted = granted
-    @action setCoords = ({coords}) => this.coords = coords
-
-    render() {
-        if (!this.permissionAsked) return <Text>Not Asked</Text>
-        if (!this.permissionGranted) return <Text>Not Granted</Text>
-        if (!this.coords) return null
-        console.log('---', this.coords)
-
-        return (
-            <MapView
-                style = {styles.container}
-                initialRegion = {{
-                    ...this.coords,
-                    latitudeDelta: 0.0922,
-                    longitudeDelta: 0.0421,
-                }}
-            >
-                <MapView.Marker coordinate = {{...this.coords}}/>
-            </MapView>
-        )
-    }
+  static navigationOptions = {
+    title: 'map'
+  }
+
+  @observable permissionAsked = false
+  @observable permissionGranted = false
+  @observable coords = null
+
+  async componentDidMount() {
+    this.setPermissionAsked(true)
+    const { status } = await Permissions.askAsync(Permissions.LOCATION)
+    this.setPermissionGranted(status === 'granted')
+    Location.getCurrentPositionAsync({ enableHighAccuracy: true }).then(
+      (position) => this.setCoords(position)
+    )
+  }
+
+  @action setPermissionAsked = (asked) => (this.permissionAsked = asked)
+  @action setPermissionGranted = (granted) => (this.permissionGranted = granted)
+  @action setCoords = ({ coords }) => (this.coords = coords)
+
+  render() {
+    if (!this.permissionAsked) return <Text>Not Asked</Text>
+    if (!this.permissionGranted) return <Text>Not Granted</Text>
+    if (!this.coords) return null
+    console.log('---', this.coords)
+
+    return (
+      <MapView
+        style={styles.container}
+        initialRegion={{
+          ...this.coords,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421
+        }}
+      >
+        <MapView.Marker coordinate={{ ...this.coords }} />
+      </MapView>
+    )
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1
-    }
+  container: {
+    flex: 1
+  }
 })
 
-export default EventMap
\ No newline at end of file
+export default EventMap
diff --git a/MobileApp/src/components/screens/people-list.js b/MobileApp/src/components/screens/people-list.js
index cea8fa0..69794e9 100644
--- a/MobileApp/src/components/screens/people-list.js
+++ b/MobileApp/src/components/screens/people-list.js
@@ -1,36 +1,41 @@
 import React, { Component } from 'react'
-import {observer, inject} from 'mobx-react'
-import {View, StyleSheet, ActivityIndicator} from 'react-native'
+import { observer, inject } from 'mobx-react'
+import { View, StyleSheet, ActivityIndicator } from 'react-native'
 import PeopleList from '../people/people-list'
 
 @inject('people')
 @observer
 class PeopleListScreen extends Component {
-    static propTypes = {
-
-    };
-
-    static navigationOptions = {
-        title: 'People List'
-    }
-
-    componentDidMount() {
-        const {people} = this.props
-        if (!people.loaded && !people.loading) people.loadAll()
-    }
-
-    render() {
-        const {people} = this.props
-        if (people.loading) return this.getLoader()
-        return <PeopleList />
-    }
-
-    getLoader() {
-        return <View><ActivityIndicator size='large'/></View>
-    }
+  static propTypes = {}
+
+  static navigationOptions = {
+    title: 'People List'
+  }
+
+  componentDidMount() {
+    const { people } = this.props
+    if (!people.loaded && !people.loading) people.loadAll()
+  }
+
+  render() {
+    const { people } = this.props
+    if (people.loading) return this.getLoader()
+    return <PeopleList onPersonPress={this.handlePersonPress} />
+  }
+
+  getLoader() {
+    return (
+      <View>
+        <ActivityIndicator size="large" />
+      </View>
+    )
+  }
+
+  handlePersonPress = ({ uid }) => {
+    this.props.navigation.navigate('person', { uid })
+  }
 }
 
-const styles = StyleSheet.create({
-})
+const styles = StyleSheet.create({})
 
-export default PeopleListScreen
\ No newline at end of file
+export default PeopleListScreen
diff --git a/MobileApp/src/components/screens/person-cam.js b/MobileApp/src/components/screens/person-cam.js
new file mode 100644
index 0000000..fb6674d
--- /dev/null
+++ b/MobileApp/src/components/screens/person-cam.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react'
+import { Text, StyleSheet, View, TouchableOpacity } from 'react-native'
+import { Permissions, Camera } from 'expo'
+import { observable, action } from 'mobx'
+import { observer } from 'mobx-react'
+import firebase from 'firebase/app'
+import { decode } from 'base64-arraybuffer'
+
+@observer
+class PersonCam extends Component {
+  static navigationOptions = {
+    title: 'camera'
+  }
+
+  camera = null
+
+  @observable permissionAsked = false
+  @observable permissionGranted = false
+  @observable type = Camera.Constants.Type.back
+
+  async componentDidMount() {
+    this.setPermissionAsked(true)
+    const { status } = await Permissions.askAsync(Permissions.CAMERA)
+    this.setPermissionGranted(status === 'granted')
+  }
+
+  @action setPermissionAsked = (asked) => (this.permissionAsked = asked)
+  @action setPermissionGranted = (granted) => (this.permissionGranted = granted)
+
+  @action
+  setType = (type) => {
+    this.type === Camera.Constants.Type.back
+      ? (this.type = Camera.Constants.Type.front)
+      : (this.type = Camera.Constants.Type.back)
+  }
+
+  render() {
+    if (!this.permissionAsked) return <Text>Not Asked</Text>
+    if (!this.permissionGranted) return <Text>Not Granted</Text>
+
+    return (
+      <Camera
+        style={{ flex: 1 }}
+        ratio="16:9"
+        autoFocus={false}
+        type={this.type}
+        ref={(ref) => {
+          this.camera = ref
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            backgroundColor: 'transparent',
+            flexDirection: 'row'
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              // flex: 0.1,
+              alignSelf: 'flex-end',
+              alignItems: 'center'
+            }}
+            onPress={() => this.setType()}
+          >
+            <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
+              {' '}
+              Flip{' '}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={{
+              // flex: 0.1,
+              alignSelf: 'flex-end',
+              alignItems: 'center'
+            }}
+            onPress={this.takePicture}
+          >
+            <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
+              {' '}
+              Photo{' '}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </Camera>
+    )
+  }
+
+  getUrl = async ({ base64, uri }) => {
+    const name = uri.match(/[ \w-]+?(?=\.).jpg/gm)
+    console.log(name[0])
+    const storageRef = firebase
+      .storage()
+      .refFromURL('gs://advreact-10-05-ee9f5.appspot.com')
+      .child(name[0])
+
+    await storageRef.put(decode(base64))
+    const avatar = await storageRef.getDownloadURL()
+  }
+
+  takePicture = async () => {
+    if (this.camera) {
+      const photo = await this.camera.takePictureAsync({ base64: true })
+      this.getUrl(photo)
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
+export default PersonCam
diff --git a/MobileApp/src/config.js b/MobileApp/src/config.js
index aa22b3b..9e23e29 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 = 'advreact-10-05-ee9f5'
 
 export const config = {
-  apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U',
+  apiKey: 'AIzaSyA9z4Xmknc0zIAIfvWCfe4XWwhwqiTO9h0',
   authDomain: `${appName}.firebaseapp.com`,
   databaseURL: `https://${appName}.firebaseio.com`,
   projectId: appName,
   storageBucket: '',
-  messagingSenderId: '1094825197832'
+  messagingSenderId: '963790431937'
 }
 
 firebase.initializeApp(config)
diff --git a/MobileApp/yarn.lock b/MobileApp/yarn.lock
index 00d582a..02f5e65 100644
--- a/MobileApp/yarn.lock
+++ b/MobileApp/yarn.lock
@@ -1750,6 +1750,10 @@ balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
 
+base64-arraybuffer@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+
 base64-js@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"