diff --git a/Map.js b/Map.js
index 82c63d2..d78a695 100644
--- a/Map.js
+++ b/Map.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
-import { Platform, StyleSheet, Text, View, Button, Picker, Alert } from 'react-native';
+import { Platform, StyleSheet, Text, View, Button, Picker, Alert,
+         TouchableOpacity } from 'react-native';
 import {Permissions, Location, Font} from 'expo';
 import MapView from 'react-native-maps';
 import PopupDialog from 'react-native-popup-dialog';
@@ -24,6 +25,10 @@ export class Map extends Component {
   constructor(props) {
     super(props);
 
+    console.ignoredYellowBox = [
+        'Setting a timer'
+    ]
+
     this.state = {
       userRegion: {
         latitude: 32.8801,
@@ -117,9 +122,11 @@ export class Map extends Component {
   //calls getLocation method after map is rendered
   async componentDidMount() {
     this._getLocationAsync();
+    console.log("Loading Font Awesome...")
     await Font.loadAsync({
-      fontAwesome: require('./fonts/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf'),
+      FontAwesome: require('./fonts/font-awesome-4.7.0/fonts/FontAwesome.otf')
     });
+    console.log("Font Awesome loaded!")
     this.setState({ fontLoaded: true });
   }
 
@@ -225,70 +232,89 @@ export class Map extends Component {
       <View
         style={styles.container}
       >
-      <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 stylme={{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="Cookie" value="cookie" />   
-              <Picker.Item label="Gluten Free" value="gluten" />
-              <Picker.Item label="Vegetarian" value="veg" />   
-              <Picker.Item label="Other" value="other" />       
-            </Picker>
-          </View>
+        <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>
+
+        <View style={styles.bottomBar}>
+
+          <TouchableOpacity
+              style={styles.filterButton}
+              onPress={this.showFilterModal}
+          >
+            <Text style={{ fontSize: 30 }}>
+              {this.state.fontLoaded ? (
+                <FontAwesome>{Icons.list}</FontAwesome>
+              ) : null}
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+              style={styles.centerButton}
+              onPress={() =>_map.animateToRegion(this.state.userRegion, 499)}
+          >
+            <Text style={{ fontSize: 30 }}>
+              {this.state.fontLoaded ? (
+                <FontAwesome>{Icons.compass}</FontAwesome>
+              ) : null}
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+              style={styles.accountButton}
+              onPress={this.showAccount.bind(this)}
+          >
+            <Text style={{ fontSize: 30 }}>
+              {this.state.fontLoaded ? (
+                <FontAwesome>{Icons.user}</FontAwesome>
+              ) : null}
+            </Text>
+          </TouchableOpacity>
+
+        </View>
+
+        <Modal isVisible={this.state.filterModal}
+           onBackdropPress={this.hideFilterModal}
+           onModalHide={this.getFilteredResults.bind(this)}>
+           <View style={styles.filterModal}>
+             <Text stylme={{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="Cookie" value="cookie" />   
+               <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}>
@@ -297,59 +323,53 @@ export class Map extends Component {
             <Text style={styles.eventDetails}>Tag: {this.state.selectedEvent.tag}</Text>
             <Text style={styles.eventDetails}>Score: {this.state.selectedEvent.score}</Text>
             <View style={styles.buttons}>
-              <View style={{width: 60 }}>
-                <ActionButton
-                style={styles.thumbsUpButton}
-                icon={this.state.fontLoaded ? (
-                  <Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
-                    {Icons.thumbsUp}
+
+              <View style={{width: 80 }}>
+                <TouchableOpacity
+                    style={styles.thumbsUpButton}
+                    onPress={() => this.thumbsUpEvent()}
+                >
+                  <Text style={{ fontSize: 35, color: '#00FF00' }}>
+                    {this.state.fontLoaded ? (
+                      <FontAwesome>{Icons.thumbsUp}</FontAwesome>
+                    ) : null}
                   </Text>
-                ) : null}
-                degrees={Number(0)}
-                buttonColor="#0F0"
-                onPress={() => this.thumbsUpEvent()}>
-                </ActionButton>
+                </TouchableOpacity>
               </View>
-              <View style={{width: 60}}>
-                <ActionButton
-                style={styles.thumbsDownButton}
-                icon={this.state.fontLoaded ? (
-                  <Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
-                    {Icons.thumbsDown}
+
+              <View style={{width: 40}}>
+                <TouchableOpacity
+                    style={styles.thumbsDownButton}
+                    onPress={() => this.thumbsDownEvent()}
+                >
+                  <Text style={{ fontSize: 35, color: '#FF0000' }}>
+                    {this.state.fontLoaded ? (
+                      <FontAwesome>{Icons.thumbsDown}</FontAwesome>
+                    ) : null}
                   </Text>
-                ) : null}
-                buttonColor="#F00"
-                degrees={Number(0)}
-                onPress={() => this.thumbsDownEvent()}>
-                </ActionButton>
+                </TouchableOpacity>
               </View>
-              <View style={{width: 150}}>
-                <ActionButton
-                style={styles.reportButton}
-                icon={this.state.fontLoaded ? (
-                  <Text style={{ fontFamily: 'fontAwesome', fontSize: 30, color: '#fff' }}>
-                    {Icons.exclamation}
-                  </Text>                 
-                ) : null}
-                buttonColor="gray"
-                degrees={Number(0)}
-                onPress={() => this.report()}>
-                </ActionButton>
-              </View>            
+
+            </View>
+
+            <View style={{top: '3%', right: '4%', position: 'absolute'}}>
+              <TouchableOpacity
+                  style={styles.reportButton}
+                  onPress={() => this.report()}
+              >
+                <Text style={{ fontSize: 35, color: '#404040' }}>
+                  {this.state.fontLoaded ? (
+                    <FontAwesome>{Icons.exclamation}</FontAwesome>
+                  ) : null}
+                </Text>
+              </TouchableOpacity>
             </View>
+
           </View>
         </Modal>
+
       <Popup ref={(popup) => {this._popup = popup;}} db={firebase}/>
-      <ActionButton buttonColor="rgba(231,76,60,1)" 
-        style={styles.accountButton}
-        icon={this.state.fontLoaded ? (
-          <Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
-            {Icons.user}
-          </Text>
-        ) : null}
-        degrees={Number(0)}
-        onPress= {this.showAccount.bind(this)}>
-      </ActionButton>
+
       </View>
     );
   }
@@ -359,6 +379,7 @@ export class Map extends Component {
 
 const styles = StyleSheet.create({
   container: {
+    position: 'absolute',
     flex: 1,
     backgroundColor: '#fff',
     alignItems: 'center',
@@ -366,19 +387,22 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
   },
-  centerButton: {
+  bottomBar: {
     position: 'absolute',
-    width: 20,
-    height: 20,
-    top: '80%',
-    left: '80%',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    bottom: '2%'
+  },
+  centerButton: {
+    position: 'relative',
+    borderRadius: 20,
+    margin: 5
   },
   filterButton: {
-    position: 'absolute',
-    width: 20,
-    height: 20,
-    top: 10,
-    left: '80%',
+    position: 'relative',
+    borderRadius: 20,
+    margin: 5
   },
   thumbsUpButton: {
     width: 20,
@@ -406,11 +430,8 @@ const styles = StyleSheet.create({
      backgroundColor: '#fff',
   },
   accountButton: {
-    position: 'absolute',
-    width: 20,
-    height: 20,
-    top: 10,
-    left: '10%',
+    borderRadius:20,
+    margin: 5
   },
   eventName: {
     fontSize: 30,
@@ -419,7 +440,6 @@ const styles = StyleSheet.create({
     marginTop: 15,    
   },
   eventDetails: {
-    fontFamily: 'Helvetica',
     fontSize: 20,
     color: '#616a77',
     fontWeight: '300',
diff --git a/package.json b/package.json
index 40fd44a..4355125 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "react-native-modal": "^4.1.1",
     "react-native-modal-datetime-picker": "^4.13.0",
     "react-native-popup-dialog": "^0.9.39",
+    "react-native-router-flux": "^4.0.0-beta.24",
     "react-native-web": "^0.1.13",
     "watchman": "^0.1.8"
   }