diff --git a/Routinely/app/components/calendar_components/BottomBar.js b/Routinely/app/components/calendar_components/BottomBar.js
new file mode 100644
index 0000000..028c678
--- /dev/null
+++ b/Routinely/app/components/calendar_components/BottomBar.js
@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+import {
+  AppRegistry,
+  View,
+  StyleSheet,
+  TouchableHighlight,
+  Image,
+} from 'react-native';
+
+export default class BottomBar extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={{flexDirection: 'row'}}>
+          <TouchableHighlight
+            onPress={() => this.props.navigation.navigate('Calendar')}>
+            <Image
+              style={styles.contain}
+              source={require('../img/calendar.png')}
+            />
+          </TouchableHighlight>
+          <TouchableHighlight
+            onPress={() => this.props.navigation.navigate('Alarm')}>
+            <Image
+              style={styles.contain}
+              source={require('../img/alarm.png')}
+            />
+          </TouchableHighlight>
+          <TouchableHighlight
+            onPress={() => {
+              this.signOut;
+            }}>
+            <Image
+              style={styles.contain}
+              source={require('../img/logout.png')}
+            />
+          </TouchableHighlight>
+          <TouchableHighlight
+            onPress={() => this.props.navigation.navigate('Event')}>
+            <Image
+              style={styles.contain}
+              source={require('../img/plus.png')}
+            />
+          </TouchableHighlight>
+        </View>
+      </View>
+    );
+  }
+}
+AppRegistry.registerComponent('BottomBar', () => BottomBar);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 10,
+    backgroundColor: 'blue',
+  },
+});
diff --git a/Routinely/app/screens/calendar.js b/Routinely/app/screens/calendar.js
index 658144e..91be8ab 100644
--- a/Routinely/app/screens/calendar.js
+++ b/Routinely/app/screens/calendar.js
@@ -1,43 +1,40 @@
 import React, {Component} from 'react';
-import {Platform,
+import {
   Alert,
+  Button,
+  Image,
+  Platform,
   StyleSheet,
-  View,
   Text,
-  TouchableOpacity,
-  Button,
   TouchableHighlight,
-  Image,
+  TouchableOpacity,
+  View,
 } from 'react-native';
 import {
+  AgendaList,
   CalendarProvider,
   ExpandableCalendar,
-  AgendaList,
 } from 'react-native-calendars';
 import _ from 'lodash';
 import moment from 'moment';
-import * as AddCalendarEvent from 'react-native-add-calendar-event';
-import firebase from '@react-native-firebase/app';
 import firestore from '@react-native-firebase/firestore';
 import '@react-native-firebase/auth';
+import BottomBar from '../components/calendar_components/BottomBar';
 
 const today = new Date().toISOString().split('T')[0];
 const fastDate = getPastDate(3);
 const futureDates = getFutureDates(9);
 const dates = [fastDate, today].concat(futureDates);
-
-var events = getallEvents();
-
+const events = getallEvents();
+/*
 var events = [
   {title: dates[0], data: [{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}]},
   {title: dates[1], data: [{hour: '4pm', duration: '1h', title: 'Pilates ABC'}]}, 
 ];  
-
-
+*/
 const utcDateToString = (momentInUTC: moment): string => {
-  let s = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
   // console.warn(s);
-  return s;
+  return moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
 };
 
 function getallEvents(){
@@ -69,16 +66,15 @@ function getPastDate(days) {
   return new Date(Date.now() - 864e5 * days).toISOString().split('T')[0];
 }
 
-
 class CalendarScreen extends Component {
-  /* constructor(props) {
-    super(props);
-    this.state = {
-      events: [],
-    };
-    events = getallEvents();
-  } */
-
+  /*
+constructor(props) {
+  super(props);
+  this.state = {
+    events: [],
+  };
+  events = getallEvents();
+} */
   onDateChanged = (/* date, updateSource */) => {
     // console.warn('ExpandableCalendarScreen onDateChanged: ', date, updateSource);
     // fetch and set data for date + week ahead
@@ -96,13 +92,17 @@ class CalendarScreen extends Component {
     Alert.alert(id);
   }
 
-  getallEvents(){
-    const eventsRef = firestore().collection('users').doc('skiser').collection('event');
-    const allEvents = eventsRef.get()
+   getallEvents() {
+    const eventsRef = firestore()
+      .collection('users')
+      .doc('skiser')
+      .collection('event');
+    const allEvents = eventsRef
+      .get()
       .then(snapshot => {
         snapshot.forEach(doc => {
-        events.push(doc);
-        console.log(doc.id, '=>', doc.data());
+          events.push(doc);
+          console.log(doc.id, '=>', doc.data());
         });
       })
       .catch(err => {
@@ -110,6 +110,19 @@ class CalendarScreen extends Component {
       });
   }
 
+  componentDidMount() {
+    firestore()
+      .collection('users')
+      .doc('skiser')
+      .collection('event')
+      .get()
+      .then()
+      .then(querySnapshot => {
+        const data = querySnapshot.docs.map(doc => doc.data());
+        console.log(data); // array of objects
+        this.setState({event: data});
+      });
+  }
   renderEmptyItem() {
     return (
       <View style={styles.emptyItem}>
@@ -117,11 +130,11 @@ class CalendarScreen extends Component {
       </View>
     );
   }
-
-  renderItem = (events) => {
+  renderItem = events => {
     if (_.isEmpty(this.events)) {
       return this.renderEmptyItem();
     }
+
     return (
       <TouchableOpacity
         onPress={() => this.itemPressed(item.title)}
@@ -136,18 +149,18 @@ class CalendarScreen extends Component {
         </View>
       </TouchableOpacity>
     );
-  }
+  };
 
   getMarkedDates = () => {
     const marked = {};
-    for (var i = 0; i < events.length; i++){
+    for (var i = 0; i < events.length; i++) {
       // only mark dates with data
       if (item.data && item.data.length > 0 && !_.isEmpty(item.data[0])) {
         marked[item.title] = {marked: true};
       }
-    };
+    }
     return marked;
-  } 
+  };
 
   getTheme = () => {
     const themeColor = '#0059ff';
@@ -193,79 +206,45 @@ class CalendarScreen extends Component {
   };
 
   render() {
+    const {event} = this.state.event;
     return (
-      <CalendarProvider
-        date={today}
-        onDateChanged={this.onDateChanged}
-        onMonthChange={this.onMonthChange}
-        theme={{todayButtonTextColor: '#0059ff'}}
-        showTodayButton
-        disabledOpacity={0.6}
-        // todayBottomMargin={16}
-      >
-        <TouchableHighlight
-            onPress={() => this.props.navigation.navigate('Event')}>
-              <Image
-                style={styles.plus}
-                source={require('../components/img/plus.png')}
-              />
-        </TouchableHighlight>
-
-        <ExpandableCalendar
-          // horizontal={false}
-          // hideArrows
-          // disablePan
-          // hideKnob
-          // initialPosition={ExpandableCalendar.positions.OPEN}
-          firstDay={1}
-          //markedDates={this.getMarkedDates()} // {'2019-06-01': {marked: true}, '2019-06-02': {marked: true}, '2019-06-03': {marked: true}};
-          theme={this.getTheme()}
-          leftArrowImageSource={require('../components/img/previous.png')}
-          rightArrowImageSource={require('../components/img/next.png')}
-          // calendarStyle={styles.calendar}
-          // headerStyle={styles.calendar} // for horizontal only
-        />
-        <AgendaList
-          sections={events}
-          extraData={events.notes}
-          renderItem={this.renderItem}
-          // sectionStyle={styles.section}
-        />
-        <View style={styles.container}>
-          <View style={{flexDirection: 'row'}}>
-            <TouchableHighlight
-              onPress={() => this.props.navigation.navigate('Calendar')}>
-              <Image
-                style={styles.contain}
-                source={require('../components/img/calendar.png')}
-              />
-            </TouchableHighlight>
-            <TouchableHighlight
-              onPress={() => this.props.navigation.navigate('Alarm')}>
-              <Image
-                style={styles.contain}
-                source={require('../components/img/alarm.png')}
-              />
-            </TouchableHighlight>
-            <TouchableHighlight
-              onPress={() => {
-                this.signOut;
-              }}>
-              <Image
-                style={styles.contain}
-                source={require('../components/img/logout.png')}
-              />
-            </TouchableHighlight>
-            <TouchableHighlight
-              onPress={() => this.props.navigation.navigate('Event')}>
-              <Image
-                style={styles.contain}
-                source={require('../components/img/plus.png')}
-              />
-            </TouchableHighlight>
-          </View>
-        </View>
-      </CalendarProvider>
+      <View>
+        <div>
+          event.map(event => (<h5>event.title</h5>
+          );})
+        </div>
+        <CalendarProvider
+          date={today}
+          onDateChanged={this.onDateChanged}
+          onMonthChange={this.onMonthChange}
+          theme={{todayButtonTextColor: '#0059ff'}}
+          showTodayButton
+          disabledOpacity={0.6}
+          // todayBottomMargin={16}
+        >
+          <ExpandableCalendar
+            // horizontal={false}
+            // hideArrows
+            // disablePan
+            // hideKnob
+            // initialPosition={ExpandableCalendar.positions.OPEN}
+            firstDay={1}
+            //markedDates={this.getMarkedDates()} // {'2019-06-01': {marked: true}, '2019-06-02': {marked: true}, '2019-06-03': {marked: true}};
+            theme={this.getTheme()}
+            leftArrowImageSource={require('../components/img/previous.png')}
+            rightArrowImageSource={require('../components/img/next.png')}
+            // calendarStyle={styles.calendar}
+            // headerStyle={styles.calendar} // for horizontal only
+          />
+          <AgendaList
+            sections={events}
+            extraData={events.notes}
+            renderItem={this.renderItem}
+            // sectionStyle={styles.section}
+          />
+          <BottomBar />
+        </CalendarProvider>
+      </View>
     );
   }
 }