diff --git a/MobileApp/src/components/common/card.js b/MobileApp/src/components/common/card.js
index f86a8b8..1a0a4cc 100644
--- a/MobileApp/src/components/common/card.js
+++ b/MobileApp/src/components/common/card.js
@@ -25,7 +25,8 @@ const styles = StyleSheet.create({
         shadowOffset: {
             width: 2, height: 2
         },
-        shadowOpacity: 0.5
+        shadowOpacity: 0.5,
+        elevation: 5
     }
 })
 
diff --git a/MobileApp/src/components/common/confirmation-modal.js b/MobileApp/src/components/common/confirmation-modal.js
new file mode 100644
index 0000000..79b8584
--- /dev/null
+++ b/MobileApp/src/components/common/confirmation-modal.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Modal, View, Text, Button, StyleSheet } from 'react-native'
+
+class ConfirmationModal extends Component {
+    render() {
+        const {visible, children, onConfirm, onCancel} = this.props
+        return (
+            <Modal visible={visible} animationType="fade">
+                <View style={styles.modal}>
+                    <Text>{children}</Text>
+                    <Button title="Ok" onPress={onConfirm} />
+                    <Button title="Cancel" onPress={onCancel} />
+                </View>
+            </Modal>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    modal: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+})
+
+export default ConfirmationModal
\ No newline at end of file
diff --git a/MobileApp/src/components/event-list.js b/MobileApp/src/components/event-list.js
index 7156d55..4b31382 100644
--- a/MobileApp/src/components/event-list.js
+++ b/MobileApp/src/components/event-list.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {ScrollView, StyleSheet, Text} from 'react-native'
+import {SectionList, StyleSheet, Text} from 'react-native'
 import Card from './common/card'
 
 class EventList extends Component {
@@ -8,14 +8,33 @@ class EventList extends Component {
     };
 
     render() {
+        const eventsGroupedByFirstLetter = this.props.events.reduce(
+            (acc, event) => {
+                const firstLetter = event.title.charAt(0).toUpperCase()
+                return {
+                    ...acc,
+                    [firstLetter]: [...(acc[firstLetter] || []), event]
+                }
+            },
+            {}
+        )
+        const sections = Object.entries(eventsGroupedByFirstLetter).map(
+            ([title, data]) => ({ title, data })
+        )
+
         return (
-            <ScrollView>
-                {this.props.events.map(event =>
-                    <Card key = {event.uid}>
-                        <Text>{event.title}</Text>
+            <SectionList
+                renderItem={({ item, index }) => (
+                    <Card key={index}>
+                        <Text>{item.title}</Text>
                     </Card>
                 )}
-            </ScrollView>
+                renderSectionHeader={({ section: { title } }) => (
+                    <Text>{title}</Text>
+                )}
+                sections={sections}
+                keyExtractor={(item, index) => item.uid + index}
+            />
         )
     }
 }
diff --git a/MobileApp/src/components/event.js b/MobileApp/src/components/event.js
new file mode 100644
index 0000000..a863daa
--- /dev/null
+++ b/MobileApp/src/components/event.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import { View, Text, Button } from 'react-native'
+import ConfirmationModal from './common/confirmation-modal'
+
+class Event extends Component {
+    state = {
+        showConfirmationModal: false
+    }
+
+    render() {
+        const { event } = this.props
+
+        return (
+            <View>
+                <Text>{event.title}</Text>
+                <Text>{event.when}</Text>
+                <Text>{event.where}</Text>
+                <Button
+                    title="Delete"
+                    onPress={this.handleToggleConfirmationModal}
+                />
+                <ConfirmationModal
+                    visible = {this.state.showConfirmationModal}
+                    onConfirm = {this.handleToggleConfirmationModal}
+                    onCancel = {this.handleToggleConfirmationModal}
+                >
+                    Delete {event.title}?
+                </ConfirmationModal>
+            </View>
+        )
+    }
+
+    handleToggleConfirmationModal = () =>
+        this.setState({
+            showConfirmationModal: !this.state.showConfirmationModal
+        })
+}
+
+export default Event
\ No newline at end of file
diff --git a/MobileApp/src/components/sign-in.js b/MobileApp/src/components/sign-in.js
index 7a0a54d..f8e2b50 100644
--- a/MobileApp/src/components/sign-in.js
+++ b/MobileApp/src/components/sign-in.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {View, Text, TextInput, Platform} from 'react-native'
+import {View, Text, TextInput, Platform, Button} from 'react-native'
 
 class SignIn extends Component {
     static propTypes = {
@@ -27,10 +27,12 @@ class SignIn extends Component {
                     onChangeText = {this.handlePasswordChange}
                     secureTextEntry
                 />
+                <Button title="Sign In" onPress={handleSubmit} />
             </View>
         )
     }
 
+    handleSubmit = () => {}
     handleEmailChange = email => this.setState({ email })
     handlePasswordChange = password => this.setState({ password })
 }
@@ -43,7 +45,7 @@ const styles = {
                 borderBottomColor: '#000'
             },
             android: {
-                
+
             }
         })
     }