diff --git a/MobileApp/App.js b/MobileApp/App.js
index bd99b36..17d49ff 100644
--- a/MobileApp/App.js
+++ b/MobileApp/App.js
@@ -12,10 +12,11 @@ export default class App extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-          <Image style = {styles.image}
-                 source = {require('./assets/logo.png')}
-                 resizeMode = {Image.resizeMode.contain}/>
-          <Event event = {events[0]}/>
+          {/*<Image style = {styles.image}*/}
+                 {/*source = {require('./assets/logo.png')}*/}
+                 {/*resizeMode = {Image.resizeMode.contain}/>*/}
+          {/*<Event event = {events[0]}/>*/}
+          <Event event={events[0]}/>
       </View>
     );
   }
diff --git a/MobileApp/src/components/common/card.js b/MobileApp/src/components/common/card.js
index 0f8b65f..1ba3788 100644
--- a/MobileApp/src/components/common/card.js
+++ b/MobileApp/src/components/common/card.js
@@ -1,31 +1,36 @@
-import React, { Component } from 'react'
-import {View, StyleSheet} from 'react-native'
+import React, {Component} from 'react'
+import {View, StyleSheet, Platform} from 'react-native'
 
 class Card extends Component {
-    static propTypes = {
+  static propTypes = {};
 
-    };
-
-    render() {
-        return (
-            <View style = {styles.container}>
-                {this.props.children}
-            </View>
-        )
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        {this.props.children}
+      </View>
+    )
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        padding: 5,
-        margin: 10,
-        backgroundColor: '#ddd',
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 3, height: 3
-        },
-        shadowOpacity: 0.7
-    }
+  container: {
+    // ...Platform.select({
+    //   ios: {
+    //     shadowColor: '#000',
+    //     shadowOffset: {
+    //       width: 3, height: 3
+    //     },
+    //     shadowOpacity: 0.7
+    //   },
+    //   android: {
+    //    // elevation: 5,
+    //   }
+    // }),
+    margin: 10,
+    borderColor: '#ddd',
+    borderWidth:1,
+  }
 })
 
-export default Card
\ No newline at end of file
+export default Card
diff --git a/MobileApp/src/components/event-list.js b/MobileApp/src/components/event-list.js
index b15eaa1..671b931 100644
--- a/MobileApp/src/components/event-list.js
+++ b/MobileApp/src/components/event-list.js
@@ -1,26 +1,97 @@
-import React, { Component } from 'react'
-import {Text, ScrollView, StyleSheet} from 'react-native'
+import React, {PureComponent} from 'react'
+import {Text, StyleSheet, SectionList, Platform, View} from 'react-native'
 import Card from './common/card'
 
-class EventList extends Component {
-    static propTypes = {
+function reduceEvents(events) {
+    return events.reduce(function (sections, event) {
+        const symbol = event.title.charAt(0).toUpperCase()
+        const section = sections.find(function (item) {
+            return item.title === symbol
+        })
+        if (section) {
+            section.data.push(event)
+            return sections;
+        }
 
-    };
+        sections.push({
+            title: symbol,
+            data: [event]
+        })
+
+        return sections
+    }, []).sort((a, b) => {
+        if (a.title === b.title) {
+            return 0;
+        }
+
+        return a.title > b.title ? 1 : -1
+    })
+}
+
+class EventList extends PureComponent {
+    static propTypes = {};
 
     render() {
+        const eventSections = reduceEvents(this.props.events)
+        return (
+            <SectionList
+                renderItem={this.renderItem}
+                renderSectionHeader={this.renderSectionHeader}
+                sections={eventSections}
+                keyExtractor={(item, index) => item + index}
+            />
+        )
+    }
+
+    renderItem = ({item, index, section}) => {
         return (
-            <ScrollView>
-                {this.props.events.map(event =>
-                    <Card key = {event.uid}>
-                        <Text>{event.title}</Text>
-                    </Card>
-                )}
-            </ScrollView>
+            <Card key={item.uid}>
+                <View style={styles.eventTitle}><Text>{item.title}</Text></View>
+                <View style={styles.eventBody}>
+                    <Text>{item.when} </Text>
+                    <Text>{item.where}</Text>
+                </View>
+            </Card>
         )
     }
+
+    renderSectionHeader = ({section: {title}}) => (
+        <Text style={styles.section}>{title}</Text>
+    )
 }
 
 const styles = StyleSheet.create({
+    section: {
+        fontWeight: 'bold',
+        padding: 5,
+        margin: 10,
+        backgroundColor: '#1F0772',
+        color: '#fff',
+        textAlign: 'center',
+        ...Platform.select({
+            ios: {
+                shadowColor: '#000',
+                shadowOffset: {
+                    width: 3, height: 3
+                },
+                shadowOpacity: 0.7
+            },
+            android: {
+                elevation: 5,
+            }
+        }),
+    },
+    eventTitle: {
+        backgroundColor: '#ddd',
+        padding: 5,
+    },
+    eventBody: {
+        padding: 5,
+        // borderColor: '#ddd',
+        // borderBottomWidth: 1,
+        // borderLeftWidth: 1,
+        // borderRightWidth: 1,
+    }
 })
 
-export default EventList
\ No newline at end of file
+export default EventList
diff --git a/MobileApp/src/components/event.js b/MobileApp/src/components/event.js
index ace1ea9..624f5fc 100644
--- a/MobileApp/src/components/event.js
+++ b/MobileApp/src/components/event.js
@@ -1,17 +1,34 @@
-import React, { Component } from 'react'
-import {View, Text, Image, StyleSheet} from 'react-native'
+import React, {Component} from 'react'
+import {View, Text, Image, StyleSheet, Button, Alert} from 'react-native'
 
 class Event extends Component {
-    static propTypes = {
+    static propTypes = {};
 
-    };
+    deleteHandler = () => {
+        console.log('deleting event')
+    }
+
+    showAlertDeleting = () => Alert.alert(
+        'Deleting event',
+        'Are you sure?',
+        [
+            {text: 'Cancel', onPress: () => console.log('cancel deleting event')},
+            {text: 'OK', onPress: this.deleteHandler},
+        ],
+        {cancelable: false}
+    )
 
     render() {
-        const { event } = this.props
+        const {event} = this.props
         return (
-            <View style = {styles.container}>
-                <Image source = {{uri: 'http://lorempixel.com/400/200'}} style = {styles.image}/>
-                <Text style = {styles.title}>{event.title}</Text>
+            <View style={styles.container}>
+                <Image source={{uri: 'http://lorempixel.com/400/200'}} style={styles.image}/>
+                <Button
+                    color="red"
+                    title="Delete"
+                    onPress={this.showAlertDeleting}
+                />
+                <Text style={styles.title}>{event.title}</Text>
                 <Text>{event.url}</Text>
                 <Text>{event.where}</Text>
                 <Text>{event.when}</Text>
@@ -22,7 +39,7 @@ class Event extends Component {
 
 const styles = StyleSheet.create({
     image: {
-        width: 400,
+        width: '100%',
         height: 200
     },
     title: {
@@ -34,4 +51,4 @@ const styles = StyleSheet.create({
     }
 })
 
-export default Event
\ No newline at end of file
+export default Event