diff --git a/App-login.js b/App-login.js
new file mode 100644
index 0000000..eac31d0
--- /dev/null
+++ b/App-login.js
@@ -0,0 +1,72 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ * @flow
+ */
+
+import React, { Component } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+import firebase from 'firebase';
+
+import { Login } from './Login';
+import { Signup } from './Signup';
+import { Routes } from './Routes';
+
+
+/*
+var config = {
+  apiKey: "AIzaSyBPgko3WSh-2rgjK1a7kSz9w8kClYwVvgo",
+  authDomain: "mijmffl.firebaseapp.com",
+  databaseURL: "https://mijmffl.firebaseio.com",
+  projectId: "mijmffl",
+  storageBucket: "mijmffl.appspot.com",
+  messagingSenderId: "485467070702"
+};
+if(!firebase.apps.length) {
+  const app = firebase.initializeApp(config);
+}
+*/
+
+var config = {
+  apiKey: "AIzaSyA7jvpayAPe8W7mnUSY2utM9puTkScziZc",
+  authDomain: "mijmfsl.firebaseapp.com",
+  databaseURL: "https://mijmfsl.firebaseio.com",
+  projectId: "mijmfsl",
+  storageBucket: "",
+  messagingSenderId: "57827792969"
+};
+if(!firebase.apps.length) {
+  const app = firebase.initializeApp(config);
+}
+
+export default class App extends Component<{}> {
+  
+  componentWillUnmount() {
+    firebase.off();
+  }
+  
+  render() {
+    return (
+      <Routes />
+    );
+  }
+
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+  },
+  callout: {
+    height: 20,
+    width: 20,
+    backgroundColor: 'white',
+  }
+});
diff --git a/Map.js b/Map.js
index 6f8c4fb..7911640 100644
--- a/Map.js
+++ b/Map.js
@@ -1,45 +1,51 @@
-import React, { Component } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity
-} from 'react-native';
-import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
-import {Permissions, Location} from 'expo';
+import React, {Component} from 'react';
+import { Platform, StyleSheet, Text, View, Button, Picker, TouchableOpacity } from 'react-native';
+import {Permissions, Location, Font} from 'expo';
+import MapView from 'react-native-maps';
+import PopupDialog from 'react-native-popup-dialog';
+import DateTimePicker from 'react-native-modal-datetime-picker';
+import Popup from './Popup.js';
+import firebase from 'firebase';
+import ActionButton from 'react-native-action-button';
+import Modal from 'react-native-modal';
+import { Icons } from 'react-native-fontawesome';
 
+//import image files for markers
+import veg from './images/veg.png';
+import food from './images/food.png';
+import gluten from './images/gluten.png';
+import other from './images/other.png';
 import { Actions } from 'react-native-router-flux';
-import * as firebase from 'firebase';
-import Popup from './Popup';
-
-let id = 0;
 
 
 export class Map extends Component {
+  // Initialize Firebase
+  constructor(props) {
+    super(props);
 
-  logout() {
-    firebase.auth().signOut().then(function() {
-      alert('Signed Out');
-      Actions.pop();
-    }, function(error) {
-      alert('Sign Out Error', error);
-    });
+    this.state = {
+      userRegion: {
+        latitude: 32.8801,
+        longitude: -117.2340,
+        latitudeDelta: 0.0922,
+        longitudeDelta: 0.0421
+      },
+      mapRegion: {
+        latitude: 32.8801,
+        longitude: -117.2340,
+        latitudeDelta: 0.0922,
+        longitudeDelta: 0.0421
+      },
+     markers: [],
+     filteredMarkers: [],
+     renderedMarkers: [],
+     showModal: false,
+     eventModal: false,
+     tag: 'none',
+     selectedEvent: 'null'
+    }
   }
 
-  state = {
-    locationResultlat: null,
-    text: '',
-    locationResultlong: null,
-    mapRegion: {
-      latitude: 32.8801,
-      longitude: -117.2340,
-      latitudeDelta: 0.0922,
-      longitudeDelta: 0.0421
-    },
-   markers: [],
-  };
-
 
     //Gets user location and updates mapRegion in state
   _getLocationAsync = async () => {
@@ -47,26 +53,66 @@ export class Map extends Component {
     let { status } = await Permissions.askAsync(Permissions.LOCATION);
     let location = await Location.getCurrentPositionAsync({});
     this.setState({
-      locationResultlat: JSON.stringify(location.coords.latitude),
-      locationResultlong: JSON.stringify(location.coords.longitude)
+      userRegion: {
+        latitude:  Number(JSON.stringify(location.coords.latitude)),
+        longitude: Number(JSON.stringify(location.coords.longitude)),
+        latitudeDelta: 0.0922,
+        longitudeDelta: 0.0421
+      }
     });
 
     //update mapRegion with user location
-    let prevState = this.state;
     this.setState({
-      mapRegion: {
-        latitude: Number(prevState.locationResultlat),
-        longitude: Number(prevState.locationResultlong),
-        latitudeDelta: 0.0922,
-        longitudeDelta: 0.0421
-
-      },
+      mapRegion: this.state.userRegion
     });
   };
 
-    //calls getLocation method after map is rendered
-  componentDidMount() {
+  //toggle Filter Modal
+  showFilterModal = () => this.setState({ filterModal: true })
+
+  hideFilterModal = () => this.setState({ filterModal: false })
+
+  //toggle Event Modal
+  showEventModal = (marker) => this.setState({ eventModal: true, selectedEvent: marker })
+
+  hideEventModal = () => this.setState({ eventModal: false })
+
+  //update selected event's score in database
+  updateScore () {
+    var updates = {};
+    updates['/score'] = this.state.selectedEvent.score;
+    firebase.database().ref('events').child(this.state.selectedEvent.key).update(updates);
+    console.log(this.state.selectedEvent.score);
+    console.log(this.state.renderedMarkers);
+  }
+
+  //function when user thumbs up event
+  thumbsUpEvent () {
+    this.setState(prevState => ({
+      selectedEvent: {
+        ...prevState.selectedEvent,
+        score: prevState.selectedEvent.score + 1
+      }
+    }), this.updateScore);
+  }
+
+  //function when user thumbs down event
+  thumbsDownEvent () {
+    this.setState(prevState => ({
+      selectedEvent: {
+        ...prevState.selectedEvent,
+        score: prevState.selectedEvent.score - 1
+      }
+    }), this.updateScore);
+  }
+
+  //calls getLocation method after map is rendered
+  async componentDidMount() {
     this._getLocationAsync();
+    await Font.loadAsync({
+      fontAwesome: require('./fonts/font-awesome-4.7.0/fonts/FontAwesome.otf'),
+    });
+    this.setState({ fontLoaded: true });
   }
 
 
@@ -76,102 +122,257 @@ export class Map extends Component {
   };
 
   //creates a marker on the map
-  _createMarker(lat, long, desc, currId) {
-
+  _createMarker(lat, long, desc) {
     this._popup.show(lat, long);
+  };
 
-    let dbRef = firebase.database().ref('events');
-    dbRef.push({
-      coordinate: {latitude: lat, longitude: long},
-      description: desc,
-      key: id,
-      title: desc
-    });
+  //sets image for MapMarker depending on event's tag
+  _setMarkerImg(tag){
+    switch(tag) {
+      case 'veg':
+        return veg;
+        break;
 
-    id++;
-  };
+      case 'gluten':
+        return gluten;
+        break;
 
+      case 'food':
+        return food;
+        break;
+
+      case 'other':
+        return other;
+        break;
+        
+      default:
+        return null;
+    }
+  }
+
+  //after component is rendered
   componentWillMount() {
+    //pull events from database
     let eventsRef = firebase.database().ref('events');
     eventsRef.on('value', function(data) {
       var items = [];
       data.forEach(function(dbevent) {
         var item = dbevent.val()
-        item['.key'] = dbevent.key;
-        items.push(item);
+        // check if now is within event start and end dates
+        let now = new Date();
+        if (new Date(item.date.start) <= now &&
+            now <= new Date(item.date.end)) {
+          item['key'] = dbevent.key;
+          items.push(item);
+        }
       }.bind(this));
+      //set markers in state and renderedmarkers if not currently filtered
       this.setState({markers: items});
+      if(this.state.tag == 'none'){
+        this.setState({renderedMarkers: items});
+      }
     }.bind(this));
   }
 
-  componentWillUnmount() {
-    firebase.off();
+  //get events that have a certain tag and sets them to renderedMarkers
+  getFilteredResults() {
+    if(this.state.tag == 'none'){
+      this.setState({renderedMarkers: this.state.markers});
+    }else{
+      var items = [];
+      this.state.markers.map(function (marker) {
+        if(marker.tag == this.state.tag){
+          items.push(marker);
+        }
+      }, this);
+      this.setState({filteredMarkers: items});
+      this.setState({renderedMarkers: items});
+    }
+  }
+
+
+  // use log out
+  logout() {
+    firebase.auth().signOut().then(function() {
+      alert('Signed Out');
+      Actions.pop();
+    }, function(error) {
+      alert('Sign Out Error', error);
+    });
   }
 
-  render() {
+  render() {    
     return (
       <View
         style={styles.container}
       >
-        <MapView
-          style={styles.container}
-          onRegionChange={this._handleMapRegionChange}
-          region={this.state.mapRegion}
-          showUserLocation={true}
-          initialRegion = {{
-            latitude: 32.8801,
-            longitude: -117.2340,
-            latitudeDelta: 0.0422,
-            longitudeDelta: 0.0221
-          }}
-          showsUserLocation={true}
-          showsMyLocationButton={true}
-          onLongPress={e => this._createMarker(e.nativeEvent.coordinate.latitude, e.nativeEvent.coordinate.longitude, 'marker', id)
-        }
-        >
-          {this.state.markers.map(marker => (
-                <MapView.Marker
-                  key = {marker.key}
-                  title={marker.description}
-                  coordinate={marker.coordinate}
-                  description={marker.description}
-                  onPress={() => {
-                   this._popup.show();
-                  }}
-                />
-            ))}
-        </MapView>
-        <Popup ref={(popup) => {this._popup = popup;}}/>
-        <TouchableOpacity 
-          style={styles.logoutButton}
-          onPress={this.logout}
-          >
-          <Text style={styles.logoutText}>Log out</Text>
-        </TouchableOpacity>
+      <MapView
+        ref = {(mapView) => { _map = mapView; }}
+        style={styles.container}
+        onRegionChange={this._handleMapRegionChange}
+        region={this.state.mapRegion}
+        showUserLocation={true}
+        initialRegion = {{
+          latitude: 32.8801,
+          longitude: -117.2340,
+          latitudeDelta: 0.0422,
+          longitudeDelta: 0.0221
+        }}
+        showsUserLocation={true}
+        onLongPress={e => this._createMarker(e.nativeEvent.coordinate.latitude, e.nativeEvent.coordinate.longitude, 'marker')
+      }
+      >
+        {this.state.renderedMarkers.map(marker => (
+            <MapView.Marker
+              ref={marker => (this.marker = marker)}
+              key={marker.key}
+              image={this._setMarkerImg(marker.tag)}
+              coordinate={marker.coordinate}
+              onPress={() => {
+               this.showEventModal(marker);
+              }} />
+        ))}      
+      </MapView>
+      <ActionButton buttonColor="rgba(231,76,60,1)" 
+        style={styles.filterButton}
+        icon={this.state.fontLoaded ? (
+          <Text style={{ fontFamily: 'fontAwesome', fontSize: 25, color: '#fff' }}>
+            {Icons.list}
+          </Text>
+        ) : null}
+        degrees={Number(0)}
+        onPress= {this.showFilterModal}>
+      </ActionButton>
+      <ActionButton buttonColor="rgba(231,76,60,1)" 
+        style={styles.centerButton}
+        icon={this.state.fontLoaded ? (
+          <Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
+            {Icons.compass}
+          </Text>
+        ) : null}
+        degrees={Number(0)}
+        onPress= {() =>_map.animateToRegion(this.state.userRegion, 500)}>>
+      </ActionButton>
+       <Modal isVisible={this.state.filterModal}
+          onBackdropPress={this.hideFilterModal}
+          onModalHide={this.getFilteredResults.bind(this)}>
+          <View style={styles.filterModal}>
+            <Text style={{textAlign:'center'}}>Choose Filter</Text>
+            <Picker
+              selectedValue={this.state.tag.toString()}
+              onValueChange={(itemValue, itemIndex) => this.setState({tag: itemValue})}>
+              <Picker.Item label="None" value="none" />
+              <Picker.Item label="Food" value="food" />
+              <Picker.Item label="Gluten Free" value="gluten" />
+              <Picker.Item label="Vegetarian" value="veg" />   
+              <Picker.Item label="Other" value="other" />       
+            </Picker>
+          </View>
+        </Modal>
+        <Modal isVisible={this.state.eventModal}
+        onBackdropPress={this.hideEventModal}>
+          <View style={styles.eventModal}>
+            <Text>Event Name: {this.state.selectedEvent.title}</Text>
+            <Text>Event Details: {this.state.selectedEvent.description}</Text>
+            <Text>Score: {this.state.selectedEvent.score}</Text>
+            <View style={styles.buttons}>
+              <View style={{width: 80 }}>
+                <ActionButton
+                style={styles.thumbsUpButton}
+                icon={this.state.fontLoaded ? (
+                  <Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
+                    {Icons.thumbsUp}
+                  </Text>
+                ) : null}
+                degrees={Number(0)}
+                buttonColor="#0F0"
+                onPress={() => this.thumbsUpEvent()}>
+                </ActionButton>
+              </View>
+              <View style={{width: 40}}>
+                <ActionButton
+                style={styles.thumbsDownButton}
+                icon={this.state.fontLoaded ? (
+                  <Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
+                    {Icons.thumbsDown}
+                  </Text>
+                ) : null}
+                buttonColor="#F00"
+                degrees={Number(0)}
+                onPress={() => this.thumbsDownEvent()}>
+                </ActionButton>
+              </View>
+            </View>
+          </View>
+        </Modal>
+      <Popup ref={(popup) => {this._popup = popup;}} db={firebase}/>
+      <ActionButton buttonColor="rgba(231,76,60,1)" 
+        style={styles.logoutButton}
+        icon={this.state.fontLoaded ? (
+          <Text style={{ fontFamily: 'fontAwesome', fontSize: 15, color: '#fff' }}>
+            Logout
+          </Text>
+        ) : null}
+        degrees={Number(0)}
+        onPress= {this.logout}>
+      </ActionButton>
       </View>
     );
   }
-
 }
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
     height: '100%',
-    width: '100%',    
+    width: '100%',
   },
-  map: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    zIndex: 1,
+  centerButton: {
+    position: 'absolute',
+    width: 20,
+    height: 20,
+    top: '80%',
+    left: '80%',
+  },
+  filterButton: {
+    position: 'absolute',
+    width: 20,
+    height: 20,
+    top: 10,
+    left: '80%',
+  },
+  thumbsUpButton: {
+    width: 20,
+    height: 20,
+  },
+  thumbsDownButton: {
+    width: 20,
+    height: 20,
+  },
+  buttons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  filterModal: {
+    flex: .5,
+    backgroundColor: '#fff',
+  },
+  eventModal: {
+     flex: .5, 
+     flexDirection: 'column',
+     alignItems: 'center',
+     backgroundColor: '#fff',
   },
   logoutButton: {
-    padding: 10,
-    backgroundColor: '#202646',
-    borderRadius: 10,
-    zIndex: 10,
+    position: 'absolute',
+    width: 20,
+    height: 20,
+    top: '88%',
+    left: '80%',
   },
-
   logoutText: {
     textAlign: 'center',
     color: 'black',