diff --git a/App.js b/App.js
index d19757c..57f9f55 100644
--- a/App.js
+++ b/App.js
@@ -10,6 +10,7 @@ export default class App extends React.Component {
       <Provider store={store}>
         <HomeStack />
       </Provider>
+      
     )
   }
 }
diff --git a/actions/index.js b/actions/index.js
index 38170a1..2aa48db 100644
--- a/actions/index.js
+++ b/actions/index.js
@@ -3,6 +3,26 @@ import types from '../lib/actionTypes'
 
 let actions = {
   // GENERAL
+  enrollStudent: (student, courseId) => {
+    return {
+      type: types.ENROLL_STUDENT,
+      student,
+      courseId,
+    }
+  },
+  unenrollStudent: (studentId, courseId) => {
+    return {
+      type: types.UNENROLL_STUDENT,
+      studentId,
+      courseId,
+    }
+  },
+  updateLocale: (locale) => {
+    return {
+      type: types.UPDATE_LOCALE,
+      locale
+    }
+  },
   receiveStandardError: (error) => {
     return {
       type: types.RECEIVE_STANDARD_ERROR,
@@ -71,6 +91,44 @@ let actions = {
       courseId
     }
   },
+  updateStudentAttendanceStats: (attendances, curAttendances, courseId) => {
+    return {
+      type: types.UPDATE_STUDENT_ATTENDANCE_STATS,
+      attendances,
+      curAttendances,
+      courseId
+    }
+  },
+
+  // Sessions
+  requestSessions: (courseId) => {
+    return {
+      type: types.REQUEST_SESSIONS,
+      courseId
+    }
+  },
+  receiveSessionsSuccess: (sessions, courseId) => {
+    return {
+      type: types.RECEIVE_SESSIONS_SUCCESS,
+      sessions,
+      courseId
+    }
+  },
+
+  // Course Teachers
+  requestCourseTeachers: (courseId) => {
+    return {
+      type: types.REQUEST_COURSE_TEACHERS,
+      courseId
+    }
+  },
+  receiveCourseTeachersSuccess: (courseTeachers, courseId) => {
+    return {
+      type: types.RECEIVE_COURSE_TEACHERS_SUCCESS,
+      courseTeachers,
+      courseId
+    }
+  },
 
   // ATTENDANCES
   requestAttendances: (courseId, date) => {
diff --git a/components/AttendanceCard/AttendanceCard.js b/components/AttendanceCard/AttendanceCard.js
index 328d350..207bd8b 100644
--- a/components/AttendanceCard/AttendanceCard.js
+++ b/components/AttendanceCard/AttendanceCard.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Image, View, Text, StyleSheet, Button, TouchableHighlight } from 'react-native';
 import styles from './styles'
 import Dropdown from '../Dropdown'
+import PropTypes from 'prop-types'
 import { textStyles } from '../../styles/textStyles';
 
 class AttendanceCard extends React.Component {
@@ -57,7 +58,7 @@ class AttendanceCard extends React.Component {
           source={require('../../icons/comment_active.png')}
         />
       )
-    } 
+    }
     return (
       <Image
         style={styles.commentButton}
@@ -72,16 +73,17 @@ class AttendanceCard extends React.Component {
         <View style={styles.nameContainer}>
           <Text style={textStyles.body}>{this.props.name}</Text>
         </View>
-        <View style={styles.spaceContainer}>
-        </View>
-        <View style={styles.leftContainer}>
-          {this.renderSelect()}
-          <TouchableHighlight
-            style={styles.commentButtonOuter}
-            onPress={() => this.props.setModal(this.props.index, this.props.attendance.comment)}
-            underlayColor='transparent'>
-            {this.renderCommentButton(this.props.attendance.comment)}
-          </TouchableHighlight>
+        <View style={styles.spaceContainer}/>
+        <View style={styles.leftOuterContainer}>
+          <View style={styles.leftContainer}>
+              {this.renderSelect()}
+            <TouchableHighlight
+              style={styles.commentButtonOuter}
+              onPress={() => this.props.setModal(this.props.attendance.comment)}
+              underlayColor='transparent'>
+              {this.renderCommentButton(this.props.attendance.comment)}
+            </TouchableHighlight>
+          </View>
         </View>
       </View>
     )
@@ -89,11 +91,11 @@ class AttendanceCard extends React.Component {
 }
 
 AttendanceCard.propTypes = {
-  attendance: React.PropTypes.object.isRequired,
-  name: React.PropTypes.string.isRequired,
-  index: React.PropTypes.number.isRequired,
-  setModal: React.PropTypes.func.isRequired,
-  setType: React.PropTypes.func.isRequired,
+  attendance: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  setModal: PropTypes.func.isRequired,
+  setType: PropTypes.func.isRequired,
 };
 
 export default AttendanceCard;
diff --git a/components/AttendanceCard/styles.js b/components/AttendanceCard/styles.js
index dff0ad3..0aa82d7 100644
--- a/components/AttendanceCard/styles.js
+++ b/components/AttendanceCard/styles.js
@@ -3,25 +3,32 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   container: {
     flexDirection: 'row',
+    flex: 1,
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 24,
   },
   nameContainer: {
     flexDirection: 'row',
-    flex: 1,
+    flex: 0.5,
   },
   spaceContainer:{
-    flex: 0.1,
+    flex: 0.01,
+  },
+  leftOuterContainer: {
+    flex: 0.49,
   },
   leftContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     marginRight: 16,
-    flex: 1,
   },
   attendanceButton: {
-    width: 116,
+    width: 100,
+    height: 40,
+  },
+  attendanceContainer: {
+    width: 100,
     height: 40,
   },
   commentButton: {
diff --git a/components/Button/Button.js b/components/Button/Button.js
index 46b46a0..6ca8b94 100644
--- a/components/Button/Button.js
+++ b/components/Button/Button.js
@@ -24,12 +24,12 @@ export default class StyledButton extends React.Component {
 			  	>{this.props.text}</Button>
 			);
 		}
-		if (this.props.noPaddingPrimaryButtonSmall) {
+		if (this.props.editButton) {
 			return (
 				<Button
 				  onPress={this.props.onPress}
-				  style={ buttonStyles.noPaddingPrimaryButtonSmall }
-				  textStyle={ textStyles.buttonTextSmall }
+				  style={ buttonStyles.editButton }
+				  textStyle={ [textStyles.buttonTextDark] }
 			    >{this.props.text}</Button>
 			);
 		}
@@ -38,7 +38,7 @@ export default class StyledButton extends React.Component {
 				<Button
 				  onPress={this.props.onPress}
 				  style={ buttonStyles.enrollSmall }
-				  textStyle={ textStyles.enrollSmall }
+				  textStyle={ textStyles.buttonText }
 			  	>{this.props.text}</Button>
 			);
 		}
@@ -65,7 +65,7 @@ export default class StyledButton extends React.Component {
 				<Button
 				  onPress={this.props.onPress}
 				  style={ buttonStyles.whiteButtonLarge } 
-				  textStyle={ textStyles.buttonTextYellow }
+				  textStyle={ textStyles.buttonTextDark }
 			  	>{this.props.text}</Button>
 			);
 		}
diff --git a/components/Button/styles.js b/components/Button/styles.js
index f845496..8400e5c 100644
--- a/components/Button/styles.js
+++ b/components/Button/styles.js
@@ -22,13 +22,13 @@ const buttonStyles = StyleSheet.create({
     marginBottom: 8,
   },
 
-  noPaddingPrimaryButtonSmall: {
-    backgroundColor: colors.primaryYellow,
-    borderColor: colors.primaryYellow,
+  editButton: {
+    backgroundColor: '#CFD8DC',
+    borderColor: '#CFD8DC',
     width: 85,
-    height: 37,
+    height: 32,
     marginLeft: 10,
-    marginBottom: -10,
+    marginBottom: 0,
   },
 
   clearButtonSmall: {
@@ -74,7 +74,7 @@ const buttonStyles = StyleSheet.create({
   enrollSmall: {
     backgroundColor: colors.courseBlue,
     borderColor: colors.courseBlue,
-    width: 140,
+    width: 120,
     height: 36,
   },
 
diff --git a/components/Collapse/Collapse.js b/components/Collapse/Collapse.js
index 7639ce8..0d9d1ee 100644
--- a/components/Collapse/Collapse.js
+++ b/components/Collapse/Collapse.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { View, TouchableHighlight } from 'react-native';
 import { commonStyles } from '../../styles/styles';
 import styles from './styles';
+import PropTypes from 'prop-types'
 import Collapsible from 'react-native-collapsible';
 
 class Collapse extends React.Component {
@@ -24,10 +25,10 @@ class Collapse extends React.Component {
 
 
 Collapse.propTypes = {
-  setCollapsed: React.PropTypes.func.isRequired,
-  header: React.PropTypes.object.isRequired,
-  isCollapsed: React.PropTypes.bool.isRequired,
-  headerStyle: React.PropTypes.object,
+  setCollapsed: PropTypes.func.isRequired,
+  header: PropTypes.object.isRequired,
+  isCollapsed: PropTypes.bool.isRequired,
+  headerStyle: PropTypes.object,
 };
 
 export default Collapse;
diff --git a/components/CourseCard/CourseCard.js b/components/CourseCard/CourseCard.js
index ff12473..cd4ea0d 100644
--- a/components/CourseCard/CourseCard.js
+++ b/components/CourseCard/CourseCard.js
@@ -6,6 +6,9 @@ import PropTypes from 'prop-types';
 import { cardStyles } from './styles';
 import { textStyles } from '../../styles/textStyles';
 import colors from '../../styles/colors';
+import { FontAwesome } from '@expo/vector-icons';
+import I18n from '../../lib/i18n/i18n';
+
 
 /**
  * @prop course_id - course ID
@@ -29,20 +32,26 @@ class CourseCard extends React.Component {
       4: colors.courseBrown
     }
     const colorKey = this.props.index % 5
-    let syncText = this.props.synced ? "" : "Not Synced"
+    const unsyncedAttendances = (
+      <Text style={[cardStyles.count, textStyles.titleSmallLight]}>
+        <FontAwesome name="exclamation-triangle" size={14} color={colors.iconLight}/> {I18n.t('unsyncedattendances', {locale: this.props.locale})}
+      </Text>
+    )
+    let syncText = this.props.synced ? (I18n.t('lastsynced', {locale: this.props.locale}) + ": " + this.props.last_synced) : unsyncedAttendances
     return (
       <TouchableHighlight onPress={() => this.props.onSelectCourse(this.props.course_id, colorKey)}
       underlayColor='transparent'>
         <View style={[cardStyles.outerContainer, {backgroundColor: colorList[colorKey]}]}>
           <View style={cardStyles.topContainer}>
             <Text style={[cardStyles.title, textStyles.titleMediumLight]}>{this.props.title}</Text>
-            <Text style={[cardStyles.count, textStyles.titleSmallLight]}>{this.props.numStudents} Students</Text>
+            <Text style={[cardStyles.count, textStyles.titleSmallLight]}>5 {I18n.t('students', {locale: this.props.locale})}</Text>
             <Text style={[cardStyles.count, textStyles.titleSmallLight]}>{syncText}</Text>
+            
           </View>
           <View style={cardStyles.bottomContainer}>
             <StyledButton
               onPress={() => this.props.onTakeAttendance(this.props.course_id, this.props.title)}
-              text='Take Attendance'
+              text={I18n.t('takeattendance', {locale: this.props.locale})}
               clearButtonSmall>
             </StyledButton>
           </View>
diff --git a/components/CourseCard/styles.js b/components/CourseCard/styles.js
index 44d454b..0a7e81d 100644
--- a/components/CourseCard/styles.js
+++ b/components/CourseCard/styles.js
@@ -9,7 +9,9 @@ const cardStyles = StyleSheet.create({
   },
   topContainer: {
   	flex: 1,
-  	height: 100,
+  	// height: 100,
+    paddingRight: 8,
+    paddingBottom: 8,
     backgroundColor: 'transparent'
   },
   bottomContainer: {
diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js
index 660fa01..ccb6d52 100644
--- a/components/Dropdown/Dropdown.js
+++ b/components/Dropdown/Dropdown.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { View, Text, StyleSheet, Button, TextInput, Modal, TouchableHighlight } from 'react-native';
 import { Select, Option } from 'react-native-chooser';
 import styles from './styles';
+import PropTypes from 'prop-types'
 import { textStyles } from '../../styles/textStyles';
 
 class Dropdown extends React.Component {
@@ -57,11 +58,11 @@ class Dropdown extends React.Component {
 }
 
 Dropdown.propTypes = {
-  onSelect: React.PropTypes.func.isRequired,
-  value: React.PropTypes.any.isRequired,
-  options: React.PropTypes.object.isRequired,
-  defaultText: React.PropTypes.string.isRequired,
-  styles: React.PropTypes.object,
+  onSelect: PropTypes.func.isRequired,
+  value: PropTypes.any.isRequired,
+  options: PropTypes.object.isRequired,
+  defaultText: PropTypes.string.isRequired,
+  styles: PropTypes.object,
 };
 
 export default Dropdown;
diff --git a/components/SearchResultCard/SearchResultCard.js b/components/SearchResultCard/SearchResultCard.js
index 9984f08..0a42fac 100644
--- a/components/SearchResultCard/SearchResultCard.js
+++ b/components/SearchResultCard/SearchResultCard.js
@@ -19,7 +19,7 @@ class SearchResultCard extends React.Component {
 
   render() {
     return (
-      <TouchableHighlight onPress={() => this.props.onSelectStudent(this.props.student.id)}
+      <TouchableHighlight onPress={() => this.props.onSelectStudent(this.props.student)}
       underlayColor='transparent'>
         <View style={
           { backgroundColor: colors.courseWhite,
diff --git a/components/SimpleModal/SimpleModal.js b/components/SimpleModal/SimpleModal.js
index 9ffa9a3..bcf8ba8 100644
--- a/components/SimpleModal/SimpleModal.js
+++ b/components/SimpleModal/SimpleModal.js
@@ -4,6 +4,7 @@ import { commonStyles } from '../../styles/styles';
 import styles from './styles';
 import StyledButton from '../../components/Button/Button';
 import Modal from 'react-native-modalbox';
+import PropTypes from 'prop-types'
 import { textStyles } from '../../styles/textStyles';
 
 /**
@@ -71,10 +72,10 @@ class SimpleModal extends React.Component {
 
 
 SimpleModal.propTypes = {
-  visible: React.PropTypes.bool.isRequired,
-  title: React.PropTypes.string.isRequired,
-  buttons: React.PropTypes.array.isRequired,
-  onClosed: React.PropTypes.func.isRequired,
+  visible: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  buttons: PropTypes.array.isRequired,
+  onClosed: PropTypes.func.isRequired,
 };
 
 export default SimpleModal;
diff --git a/config/routes.js b/config/routes.js
index b4e23ef..4ff2978 100644
--- a/config/routes.js
+++ b/config/routes.js
@@ -61,19 +61,20 @@ export const HomeStack = StackNavigator({
       headerTitle: 'Courses',
       headerLeft: (
           <TouchableOpacity onPress={() => { navigation.navigate('TeacherProfile') }}>
-            <View style={{marginLeft: 8}}><FontAwesome 
+            <View style={{marginLeft: 8}}><FontAwesome
             name="user-circle-o" size={32} color={colors.iconDark} /></View>
           </TouchableOpacity>
         ),
       headerStyle: {},
       headerTintColor: '',
+      gesturesEnabled: false,
     }),
   },
   TeacherProfile : {
     screen: TeacherProfileScreen,
     navigationOptions: ({navigation}) => ({
       headerTitle: 'Profile',
-      headerRight: (<TouchableOpacity title='Edit' 
+      headerRight: (<TouchableOpacity title='Edit'
         onPress={() => { navigation.navigate('EditTeacherProfile') }}>
           <View style={{marginRight: 8}}><MaterialCommunityIcons name="pencil" size={30} color={'#fff'} /></View>
         </TouchableOpacity>),
@@ -89,6 +90,11 @@ export const HomeStack = StackNavigator({
     screen: EditCourseScreen,
     navigationOptions: {
       headerTitle: 'Edit Course',
+      headerStyle: {
+        backgroundColor: '#f5f5f6',
+        borderBottomColor: 'transparent',
+      },
+      headerTintColor: colors.textDark,
     },
   },
   StudentProfile : {
@@ -112,7 +118,6 @@ export const HomeStack = StackNavigator({
     screen: AttendanceSummaryScreen,
     navigationOptions: ({navigation}) => ({
       headerTitle: 'Attendance Summary',
-      headerRight: (<Button title='Edit' onPress={() => { navigation.goBack() }}/>),
       headerStyle: {
         backgroundColor: '#f5f5f6',
         borderBottomColor: 'transparent',
@@ -139,8 +144,8 @@ export const HomeStack = StackNavigator({
       headerStyle: {
           backgroundColor: colors.primaryYellow,
           borderBottomColor: 'transparent',
-        }, 
-      headerTintColor: colors.textLight, 
+        },
+      headerTintColor: colors.textLight,
     }),
   },
   SearchStudentResults: {
@@ -180,8 +185,8 @@ export const HomeStack = StackNavigator({
     headerStyle: {
         backgroundColor: colors.primaryYellow,
         borderBottomColor: 'transparent',
-      }, 
-    headerTintColor: colors.textLight, 
+      },
+    headerTintColor: colors.textLight,
   }
 }
 );
diff --git a/config/settings.js b/config/settings.js
index bac78eb..86ddcf7 100644
--- a/config/settings.js
+++ b/config/settings.js
@@ -6,21 +6,24 @@ import { Platform } from 'react-native'
  // TODO (Kelsey): test whether if check actually works
 if (process.env.NODE_ENV === 'production') {
   console.log('production');
-  URL = 'https://dream-rails-staging.herokuapp.com';
+  URL = 'https://dream-rails-herokuconnect.herokuapp.com';
   // URL = 'https://dream-rails-production.herokuapp.com';
+  ALT_URL = URL;
 
 } else {
   console.log('staging');
   URL = Platform.select({
-    ios: "http://localhost:3000",
+    ios: "http://074f7bf8.ngrok.io",
     // For Android Emulator
     android: "http://10.0.2.2:3000"
   });
+  ALT_URL = URL + "1";
 }
 
 export const settings = {
   env: process.env.NODE_ENV,
   URL,
+  ALT_URL,
 };
 
 export default settings;
diff --git a/config/store.js b/config/store.js
index 711cb5d..02b6b27 100644
--- a/config/store.js
+++ b/config/store.js
@@ -6,7 +6,7 @@ import reducers from '../reducers';
 import thunk from 'redux-thunk';
 
 const reducer = combineReducers(reducers);
-const initialState = { isLoading: {value: true} };
+const initialState = { config: {isLoading: true, locale: 'en'} };
 
 export const store = createStore(
   reducer,
diff --git a/lib/actionTypes.js b/lib/actionTypes.js
index e751a46..12cbacf 100644
--- a/lib/actionTypes.js
+++ b/lib/actionTypes.js
@@ -7,6 +7,11 @@ export default types = {
   RECEIVE_TEACHER_SUCCESS: 'RECEIVE_TEACHER_SUCCESS',
   REQUEST_STUDENTS: 'REQUEST_STUDENTS',
   RECEIVE_STUDENTS_SUCCESS: 'RECEIVE_STUDENTS_SUCCESS',
+  UPDATE_STUDENT_ATTENDANCE_STATS: "UPDATE_STUDENT_ATTENDANCE_STATS",
+  REQUEST_SESSIONS: 'REQUEST_SESSIONS',
+  RECEIVE_SESSIONS_SUCCESS: 'RECEIVE_SESSIONS_SUCCESS',
+  REQUEST_COURSE_TEACHERS: 'REQUEST_COURSE_TEACHERS',
+  RECEIVE_COURSE_TEACHERS_SUCCESS: 'RECEIVE_COURSE_TEACHERS_SUCCESS',
   REQUEST_ATTENDANCES: 'REQUEST_ATTENDANCES',
   REQUEST_COURSE_ATTENDANCES: 'REQUEST_COURSE_ATTENDANCES',
   RECEIVE_COURSE_ATTENDANCES_SUCCESS: "RECEIVE_COURSE_ATTENDANCES_SUCCESS",
@@ -14,8 +19,11 @@ export default types = {
   REQUEST_UPDATE_ATTENDANCES: 'REQUEST_UPDATE_ATTENDANCES',
   RECEIVE_UPDATE_ATTENDANCES_SUCCESS: 'RECEIVE_UPDATE_ATTENDANCES_SUCCESS',
   RECEIVE_UPDATE_ATTENDANCES_ERROR: 'RECEIVE_UPDATE_ATTENDANCES_ERROR',
+  ENROLL_STUDENT: 'ENROLL_STUDENT',
+  UNENROLL_STUDENT: 'UNENROLL_STUDENT',
   SAVE_LOCAL_CHANGES: "SAVE_LOCAL_CHANGES",
   CLEAR_LOCAL_CHANGES: "CLEAR_LOCAL_CHANGES",
+  UPDATE_LOCALE: "UPDATE_LOCALE",
   LOGOUT: 'LOGOUT',
   OPEN_MODAL: 'OPEN_MODAL',
   CLOSE_MODAL: 'CLOSE_MODAL',
diff --git a/lib/alerts.js b/lib/alerts.js
index 5556060..d77d0db 100644
--- a/lib/alerts.js
+++ b/lib/alerts.js
@@ -12,6 +12,16 @@ function customError(response, buttonActions) {
   )
 }
 
+function alert(title, message) {
+  Alert.alert(
+    title,
+    message,
+    [
+      {text: 'OK', onPress: () => console.log('OK Pressed')},
+    ],
+  )
+}
+
 /**
  * Display error in pop-up dialog with OK button.
  * Error callback for API requests.
@@ -54,4 +64,4 @@ function confirmDelete(message, buttonCallback) {
   )
 }
 
-export { customError, standardError, frontendError, confirmDelete }
+export { customError, standardError, frontendError, confirmDelete, alert }
diff --git a/lib/date.js b/lib/date.js
index 3561071..1bf5782 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -4,6 +4,10 @@ const attendanceDate = (date) => {
   return moment(date).format('YYYY-MM-DD');
 }
 
+const monthDayYearDate = (date) => {
+  return moment(date).format('D MMM, YYYY')
+}
+
 const monthYearDate = (date) => {
   return moment(date).format('MMMM YYYY');
 }
diff --git a/lib/i18n/i18n.js b/lib/i18n/i18n.js
new file mode 100644
index 0000000..bb1f1a4
--- /dev/null
+++ b/lib/i18n/i18n.js
@@ -0,0 +1,12 @@
+import I18n from 'react-native-i18n';
+import en from './locales/en';
+import es from './locales/es';
+
+I18n.fallbacks = true;
+
+I18n.translations = {
+  en,
+  es
+};
+
+export default I18n;
diff --git a/lib/i18n/locales/en.js b/lib/i18n/locales/en.js
new file mode 100644
index 0000000..0562be2
--- /dev/null
+++ b/lib/i18n/locales/en.js
@@ -0,0 +1,26 @@
+export default {
+  login: "Log In",
+  signup: "Sign Up",
+  signout: "Sign Out",
+  dreamid: "Dream ID",
+  email: "Email",
+  password: "Password",
+  phonenumber: "Phone Number",
+  changelanguage: "Change Language",
+  currentlanguage: "Current Language",
+  students: "Students",
+  takeattendance: "Take Attendance",
+  viewpastattendances: "View Past Attendances",
+  enrollstudent: "Enroll",
+  createcourse: "Create Course",
+  lastsynced: "Last Synced",
+  unsyncedattendances: "Unsynced Attendances",
+
+  monday: "Monday",
+  tuesday: "Tuesday",
+  wednesday: "Wednesday",
+  thursday: "Thursday",
+  friday: "Friday",
+  saturday: "Saturday",
+  sunday: "Sunday",
+};
diff --git a/lib/i18n/locales/es.js b/lib/i18n/locales/es.js
new file mode 100644
index 0000000..55a00ca
--- /dev/null
+++ b/lib/i18n/locales/es.js
@@ -0,0 +1,26 @@
+export default {
+  login: 'Iniciar Sesión',
+  signup: "Regístrate",
+  signout: "Desconectar",
+  dreamid: "ID de Dream",
+  email: "Correo Electrónico",
+  password: "Contraseña",
+  phonenumber: "Número de Teléfono",
+  changelanguage: "Cambiar Idioma",
+  currentlanguage: "Idioma Actual",
+  students: "Estudiantes",
+  takeattendance: "Tomar la Asistencia",
+  viewpastattendances: "Ver Asistencias Pasada",
+  enrollstudent: "Inscribir",
+  createcourse: "Crear Curso",
+  lastsynced: "La Última Sincronización",
+  unsyncedattendances: "Asistencia No Sincronizada",
+
+  monday: "Lunes",
+  tuesday: "Martes",
+  wednesday: "Miércoles",
+  thursday: "Jueves",
+  friday: "Viernes",
+  saturday: "Sábado",
+  sunday: "Domingo",
+};
diff --git a/package.json b/package.json
index 3e5382c..e798734 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "react-native-scripts": "1.5.0",
     "react-test-renderer": "16.0.0-alpha.12",
     "redux-devtools-extension": "^2.13.2",
-    "remote-redux-devtools": "^0.5.12"
+    "remote-redux-devtools": "^0.5.13"
   },
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
@@ -27,24 +27,28 @@
     "apsl-react-native-button": "^3.1.0",
     "eslint": "^4.18.1",
     "eslint-plugin-react": "^7.7.0",
+    "ex-react-native-i18n": "0.0.4",
     "expo": "^27.0.1",
+    "i18next": "^11.2.2",
     "moment": "^2.19.1",
     "prop-types": "^15.6.0",
     "query-string": "^5.0.0",
-    "react": "16.0.0-alpha.12",
+    "react": "16.0.0",
+    "react-i18next": "^7.6.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
     "react-native-chooser": "^1.6.3",
     "react-native-collapsible": "^0.9.0",
     "react-native-dropdown": "0.0.6",
     "react-native-elements": "^0.17.0",
     "react-native-fontawesome": "^5.7.0",
-    "react-native-form-generator": "^0.9.9",
+    "react-native-form-generator": "github:MichaelCereda/react-native-form-generator#9ddb69bb1c467f917f5d6409ecc251d84e6a67ab",
+    "react-native-i18n": "^2.0.12",
     "react-native-modal-datetime-picker": "^4.13.0",
     "react-native-modal-picker": "0.0.16",
     "react-native-modalbox": "^1.4.2",
     "react-native-picker-dropdown": "0.0.1",
     "react-native-vector-icons": "^4.4.2",
-    "react-navigation": "^1.0.0-beta.13",
+    "react-navigation": "^1.0.0-beta.21",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2",
     "redux-persist": "^5.4.0",
diff --git a/reducers/isLoading.js b/reducers/config.js
similarity index 61%
rename from reducers/isLoading.js
rename to reducers/config.js
index e36ec1b..187f685 100644
--- a/reducers/isLoading.js
+++ b/reducers/config.js
@@ -1,23 +1,29 @@
 import types from '../lib/actionTypes'
 
-export const isLoading = (state = {}, action) => {
+export const config = (state = {}, action) => {
   switch (action.type) {
     case types.REQUEST_COURSES:
     case types.REQUEST_TEACHER:
     case types.REQUEST_STUDENTS:
+    case types.REQUEST_SESSIONS:
+    case types.REQUEST_COURSE_TEACHERS:
     case types.REQUEST_ATTENDANCES:
     case types.REQUEST_COURSE_ATTENDANCES:
     case types.REQUEST_UPDATE_ATTENDANCES:
-      return { value: true }
+      return Object.assign({}, state, { isLoading: true });
     case types.RECEIVE_TEACHER_SUCCESS:
     case types.RECEIVE_COURSES_SUCCESS:
     case types.RECEIVE_COURSE_ATTENDANCES_SUCCESS:
     case types.RECEIVE_STUDENTS_SUCCESS:
+    case types.RECEIVE_SESSIONS_SUCCESS:
+    case types.RECEIVE_COURSE_TEACHERS_SUCCESS:
     case types.RECEIVE_ATTENDANCES_SUCCESS:
     case types.RECEIVE_UPDATE_ATTENDANCES_SUCCESS:
     case types.RECEIVE_UPDATE_ATTENDANCES_ERROR:
     case types.RECEIVE_STANDARD_ERROR:
-      return { value: false }
+      return Object.assign({}, state, { isLoading: false });
+    case types.UPDATE_LOCALE:
+      return Object.assign({}, state, { locale: action.locale});
     default:
       return state
   }
diff --git a/reducers/course_teachers.js b/reducers/course_teachers.js
new file mode 100644
index 0000000..fd53567
--- /dev/null
+++ b/reducers/course_teachers.js
@@ -0,0 +1,19 @@
+import types from '../lib/actionTypes';
+
+/**
+  * Handles state for course_teachers
+  *
+  * eg: [
+  *   { course_teacher1 },
+  *   { course_teacher2 },
+  *   { course_teacher3 }
+  * ]
+  */
+export const course_teachers = (state = [], action) => {
+  switch (action.type) {
+    case types.RECEIVE_COURSE_TEACHERS_SUCCESS:
+      return action.courseTeachers;
+    default:
+      return state
+  }
+}
diff --git a/reducers/courses.js b/reducers/courses.js
index dbce731..84263e2 100644
--- a/reducers/courses.js
+++ b/reducers/courses.js
@@ -1,6 +1,9 @@
 import types from '../lib/actionTypes'
 import { students } from './students';
+import { sessions } from './sessions';
+import { course_teachers } from './course_teachers';
 import { attendances } from './attendances';
+import { attendanceDate } from '../lib/date';
 
 /**
   * Handles all courses state
@@ -16,12 +19,18 @@ export const courses = (state = {}, action) => {
   switch (action.type) {
     case types.RECEIVE_COURSES_SUCCESS:
       //TODO: Intelligently merge (if still relevant);
-      return action.courses;
+      date = attendanceDate(new Date());
+      return action.courses.map((course) => (Object.assign({}, course, {last_synced: date})));
     case types.RECEIVE_STUDENTS_SUCCESS:
+    case types.RECEIVE_SESSIONS_SUCCESS:
+    case types.RECEIVE_COURSE_TEACHERS_SUCCESS:
     case types.RECEIVE_ATTENDANCES_SUCCESS:
     case types.RECEIVE_COURSE_ATTENDANCES_SUCCESS:
     case types.RECEIVE_UPDATE_ATTENDANCES_SUCCESS:
     case types.RECEIVE_UPDATE_ATTENDANCES_ERROR:
+    case types.UPDATE_STUDENT_ATTENDANCE_STATS:
+    case types.ENROLL_STUDENT:
+    case types.UNENROLL_STUDENT:
       // For specific course
       return state.map((item) => {
         return item.id == action.courseId ? course(item, action) : item;
@@ -44,10 +53,23 @@ export const courses = (state = {}, action) => {
 const course = (state = {}, action) => {
   switch (action.type) {
     case types.RECEIVE_STUDENTS_SUCCESS:
+    case types.UPDATE_STUDENT_ATTENDANCE_STATS:
+    case types.ENROLL_STUDENT:
+    case types.UNENROLL_STUDENT:
       // For course's students
       return Object.assign({}, state, {
         students: students(state.students, action)
       });
+    case types.RECEIVE_SESSIONS_SUCCESS:
+      // For course's sessions
+      return Object.assign({}, state, {
+        sessions: sessions(state.sessions, action)
+      });
+    case types.RECEIVE_COURSE_TEACHERS_SUCCESS:
+      // For course's courseTeachers
+      return Object.assign({}, state, {
+        teachers: course_teachers(state.teachers, action)
+      });
     case types.RECEIVE_ATTENDANCES_SUCCESS:
     case types.RECEIVE_COURSE_ATTENDANCES_SUCCESS:
       return Object.assign({}, state, {
diff --git a/reducers/index.js b/reducers/index.js
index bf3143c..055f815 100644
--- a/reducers/index.js
+++ b/reducers/index.js
@@ -1,5 +1,5 @@
 import { courses } from './courses';
-import { isLoading } from './isLoading';
+import { config } from './config';
 import { teacher } from './teacher';
 import { modal } from './modal';
 import { localChanges } from './localChanges';
@@ -7,9 +7,9 @@ import { localChanges } from './localChanges';
 const reducers = {
   teacher,
   courses,
-  isLoading,
-  modal,
-  localChanges
+  localChanges,
+  config,
+  modal
 };
 
 export default reducers;
diff --git a/reducers/sessions.js b/reducers/sessions.js
new file mode 100644
index 0000000..19c798f
--- /dev/null
+++ b/reducers/sessions.js
@@ -0,0 +1,19 @@
+import types from '../lib/actionTypes';
+
+/**
+  * Handles state for sessions
+  *
+  * eg: [
+  *   { session1 },
+  *   { session2 },
+  *   { session3 }
+  * ]
+  */
+export const sessions = (state = [], action) => {
+  switch (action.type) {
+    case types.RECEIVE_SESSIONS_SUCCESS:
+      return action.sessions;
+    default:
+      return state
+  }
+}
diff --git a/reducers/students.js b/reducers/students.js
index be374c6..8aea90a 100644
--- a/reducers/students.js
+++ b/reducers/students.js
@@ -9,10 +9,43 @@ import types from '../lib/actionTypes';
   *   { student3 }
   * ]
   */
+
+const updateAttendanceStats = (attendanceStats, attendance_type, modifier) => {
+  switch(attendance_type) {
+    case 0:
+      attendanceStats.num_present += modifier;
+      break;
+    case 1:
+    case 2:
+      attendanceStats.num_absent += modifier;
+      break;
+    case 3:
+    case 4:
+      attendanceStats.num_late += modifier;
+      break;
+  }
+  return attendanceStats
+};
+
 export const students = (state = [], action) => {
   switch (action.type) {
     case types.RECEIVE_STUDENTS_SUCCESS:
       return action.students;
+    case types.ENROLL_STUDENT:
+      return state.concat(action.student);
+    case types.UNENROLL_STUDENT:
+      return state.filter((student) => student.id != action.studentId);
+    case types.UPDATE_STUDENT_ATTENDANCE_STATS:
+      return state.map(s => {
+        relevantAttendance = action.attendances.find((a) => a.student_id === s.id);
+        relevantOldAttendance = action.curAttendances.find((a) => a.student_id === s.id);
+        var updatedStats = {...s.attendance_stats};
+        if(relevantOldAttendance) {
+          updateAttendanceStats(updatedStats, relevantOldAttendance.attendance_type, -1);
+        }
+        updateAttendanceStats(updatedStats, relevantAttendance.attendance_type, 1);
+        return { ...s, attendance_stats: updatedStats};
+      });
     default:
       return state
   }
diff --git a/screens/attendances/AttendanceScreen.js b/screens/attendances/AttendanceScreen.js
index 7e14163..e2ab247 100644
--- a/screens/attendances/AttendanceScreen.js
+++ b/screens/attendances/AttendanceScreen.js
@@ -21,7 +21,7 @@ class AttendanceScreen extends React.Component {
       // Keep state for attendances since they shouldn't be updated to store
       // until user has reviewed the AttendanceSummaryScreen and submitted
       attendances: this.props.attendances ? this.props.attendances : [],
-      modalIndex: -1,
+      modalId: -1,
       modalComment: null,
     }
 
@@ -58,12 +58,11 @@ class AttendanceScreen extends React.Component {
     * Updates comment for the attendance at the given index when save button is pressed
     * in comment modal.
     */
-  _saveComment(index, comment) {
+  _saveComment(id, comment) {
     const attendances = this.state.attendances;
-    const attendance = this.state.attendances[index];
+    const attendance = this.state.attendances.find((attendance) => attendance.student_id === id);
     attendance.comment = comment;
     attendance.isChanged = true;
-    attendances[index] = attendance;
     this.setState({ attendances: attendances });
   }
 
@@ -75,7 +74,9 @@ class AttendanceScreen extends React.Component {
     return (value, label) => {
       const attendances = this.state.attendances;
       const attendance = this.state.attendances[index];
-      attendance.attendance_type = value;
+      attendance.attendance_type = parseInt(value);
+      console.log("Set value");
+      console.log(attendance)
       attendance.isChanged = true;
       attendances[index] = attendance;
       this.setState({ attendances: attendances });
@@ -86,9 +87,9 @@ class AttendanceScreen extends React.Component {
     * Sets the comment modal's modalIndex (either to certain attendance's index or -1
     * if modal isn't open) and sets the comment text as the given comment (null if modal isn't open)
     */
-  _setModal(index, comment) {
+  _setModal(id, comment) {
     this.setState({
-      modalIndex: index,
+      modalId: id,
       modalComment: comment
     });
   }
@@ -104,7 +105,7 @@ class AttendanceScreen extends React.Component {
           attendance={attendance}
           index={i}
           name={this._getStudentName(attendance.student_id)}
-          setModal={this._setModal.bind(this)}
+          setModal={(comment) => this._setModal(attendance.student_id, comment)}
           setType={this._setType.bind(this)} />
       );
     });
@@ -123,16 +124,16 @@ class AttendanceScreen extends React.Component {
     }
     const saveCallback = () => {
       this._setModal(-1, null);
-      this._saveComment(this.state.modalIndex, this.state.modalComment);
+      this._saveComment(this.state.modalId, this.state.modalComment);
     };
     const buttons = [{ title: 'Save', callback: saveCallback, type: 'primary'},{title: 'Cancel', callback: cancelCallback, type: 'secondary'}]
-    if (this.state.modalIndex !== -1) {
+    if (this.state.modalId !== -1) {
       return (
         <SimpleModal
           onClosed={cancelCallback}
-          title={this._getStudentName(this.state.modalIndex)}
+          title={this._getStudentName(this.state.modalId)}
           buttons={buttons}
-          visible={this.state.modalIndex !== -1}>
+          visible={this.state.modalId !== -1}>
           <View>
             <TextInput
                 style={{height: 40}}
@@ -208,7 +209,6 @@ const mapStateToProps = (state, props) => {
   // Get course and date associated with this attendance screen
   const course = state.courses.find((course) => course.id === props.navigation.state.params.courseId);
   const date = props.navigation.state.params.date;
-  //TODO: (Aivant) deal with the situation when there's no attendances for today
   const students = course.students ? course.students : []
   var attendances = props.navigation.state.params.attendances
   if (!attendances) {
@@ -217,13 +217,14 @@ const mapStateToProps = (state, props) => {
       attendances = students.map((s) => {return createNewAttendance(s.id, course.id, date)});
     }
   }
+  //BE CAREFUL! Earlier, this directly edited the store!!
   return {
     ...props.navigation.state.params,
     courseTitle: course.title,
     students: students,
-    attendances: attendances,
-    isLoading: state.isLoading.value,
+    attendances: JSON.parse(JSON.stringify(attendances)),
+    isLoading: state.config.isLoading,
   };
 }
 
-export default connect(mapStateToProps, null)(AttendanceScreen);
+export default connect(mapStateToProps, null)(AttendanceScreen);
\ No newline at end of file
diff --git a/screens/attendances/AttendanceSummaryScreen.js b/screens/attendances/AttendanceSummaryScreen.js
index 2596b8d..06a3436 100644
--- a/screens/attendances/AttendanceSummaryScreen.js
+++ b/screens/attendances/AttendanceSummaryScreen.js
@@ -21,11 +21,13 @@ class AttendanceSummaryScreen extends React.Component {
     super(props);
     this.state = {
       isCollapsedList: [true, true, true, true, true],
+      showModal: false
     }
 
     this._toggleCollapsed = this._toggleCollapsed.bind(this)
   }
 
+
   /**
     * Filters for attendances that match the given attendance type and return a list
     * of student names in the form { key: STUDENT_NAME }
@@ -171,8 +173,9 @@ class AttendanceSummaryScreen extends React.Component {
     */
   _renderModal() {
     const callback = () => {
-      this.props.closeModal();
-      this.props.navigation.goBack(this.props.navigation.state.params.parentKey || null);
+      this.setState({showModal: false}, () =>
+                            {this.props.navigation.goBack(this.props.navigation.state.params.parentKey || null)}
+                         )
     }
     const buttons = [{ title: 'Okay', callback: callback, type: 'primary' }];
     // Indicates wheter saved to phone text should be visible
@@ -185,7 +188,7 @@ class AttendanceSummaryScreen extends React.Component {
         onClosed={callback}
         title='Status'
         buttons={buttons}
-        visible={this.props.isModalOpen}>
+        visible={this.state.showModal}>
         <View style={styles.modalContent}>
           <View style={[styles.containerInner, {marginBottom: 8}, savedToPhoneStyle]}>
             <Image
@@ -228,7 +231,7 @@ class AttendanceSummaryScreen extends React.Component {
         </ScrollView>
         <StyledButton
           onPress={() => this.props.syncAttendances(
-            this.props.attendances, this.props.courseId, this.props.date)}
+            this.props.attendances, this.props.curAttendances, this.props.courseId, this.props.date, () => {this.setState({showModal: true})})}
           text='Sync'
           primaryButtonLarge
         >
@@ -292,7 +295,7 @@ const styles = StyleSheet.create({
   * and shows different modal based on whether sync succeeded or failed. Saves attendances
   * to store regardless of success/failiure.
   */
-syncAttendances = (attendances, courseId, date) => {
+syncAttendances = (attendances, curAttendances, courseId, date, openModal) => {
   return (dispatch) => {
     dispatch(actions.requestUpdateAttendances(courseId, date));
     const attendancePromises = attendances.map((attendance, i) => {
@@ -300,15 +303,17 @@ syncAttendances = (attendances, courseId, date) => {
     });
 
     Promise.all(attendancePromises).then((responseData) => {
+      dispatch(actions.updateStudentAttendanceStats(responseData, curAttendances, courseId));
       dispatch(actions.receiveUpdateAttendancesSuccess(responseData, courseId, date));
-      dispatch(actions.openModal());
+      openModal();
     }).catch((error) => {
       // Optimistically updates and marks course as unsynced
       console.log("Attendance Sync Failed: " );
       console.log(error);
+      dispatch(actions.updateStudentAttendanceStats(attendances, curAttendances, courseId));
       dispatch(actions.receiveUpdateAttendancesError(attendances, courseId, date));
       dispatch(actions.saveLocalChanges(attendances, courseId, date));
-      dispatch(actions.openModal());
+      openModal();
     });
   }
 }
@@ -340,16 +345,16 @@ const mapStateToProps = (state, props) => {
   const date = props.navigation.state.params.date;
   return {
     ...props.navigation.state.params,
-    isLoading: state.isLoading.value,
+    isLoading: state.config.isLoading,
     isSynced: course.synced,
     isModalOpen: state.modal.isOpen,
+    curAttendances: course.attendances[date] ? course.attendances[date] : []
   };
 }
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    syncAttendances: (attendances, courseId, date) => dispatch(syncAttendances(attendances, courseId, date)),
-    closeModal: () => dispatch(actions.closeModal()),
+    syncAttendances: (attendances, curAttendances, courseId, date, openModal) => dispatch(syncAttendances(attendances, curAttendances, courseId, date, openModal)),
   }
 }
 
diff --git a/screens/attendances/RecentAttendancesScreen.js b/screens/attendances/RecentAttendancesScreen.js
index b262c8f..321d476 100644
--- a/screens/attendances/RecentAttendancesScreen.js
+++ b/screens/attendances/RecentAttendancesScreen.js
@@ -16,19 +16,46 @@ class RecentAttendancesScreen extends React.Component {
   constructor(props) {
     super(props);
     this._handleSelectDate = this._handleSelectDate.bind(this);
+    this.state = {
+      showModal: false
+    }
   }
 
   /**
     * Method passed to DateCard to open attendance screen for attendance with given date.
     */
-    _handleSelectDate(date) {
-      var courseId = this.props.navigation.state.params.courseId
-      this.props.navigation.navigate('Attendances', {
-        courseId: courseId,
-        date: date,
-      });
+  _handleSelectDate(date) {
+    var courseId = this.props.navigation.state.params.courseId
+    this.props.navigation.navigate('Attendances', {
+      courseId: courseId,
+      date: date,
+    });
+  }
+
+  /**
+    * Renders basic offline modal
+    */
+  _renderModal() {
+    const callback = () => {
+      this.setState({showModal: false})
     }
 
+    const buttons = [{ title: 'Okay', callback: callback, type: 'primary' }];
+
+    return (
+      <SimpleModal
+        onClosed={callback}
+        title='Unavailable Offline'
+        buttons={buttons}
+        visible={this.state.showModal}>
+        <View style={styles.modalContent}>
+          <Text style={textStyles.bodyBold}>This feature is unavailable while offline. Try again later!</Text>
+        </View>
+      </SimpleModal>
+    )
+  }
+
+
   /**
     * Renders AttendanceCard for each attendance object
     */
@@ -58,11 +85,18 @@ class RecentAttendancesScreen extends React.Component {
           { attendances }
         </View>
         <StyledButton
-          onPress={() => navigate('PastAttendances',
-            { courseId: courseId})}
+          onPress={() => {
+              if(this.props.online) {
+                navigate('PastAttendances', { courseId: courseId})
+              } else {
+                this.setState({showModal: true})
+              }
+            }
+          }
           text="View By Month"
           primaryButtonLarge
         />
+        { this._renderModal() }
       </View>
     )
   }
@@ -77,6 +111,9 @@ const styles = StyleSheet.create({
     margin: 24,
     marginTop: 40,
   },
+  modalContent: {
+    marginTop: 16
+  }
 });
 
 const mapStateToProps = (state, props) => {
@@ -89,7 +126,7 @@ const mapStateToProps = (state, props) => {
   lastKeys.forEach((key) => {latestAttendances[key] = attendances[key]});
   return {
     attendances: latestAttendances,
-    //online: offline.online, //TODO: add and implement
+    online: state.offline.online,
   };
 }
 
diff --git a/screens/courses/CoursesScreen.js b/screens/courses/CoursesScreen.js
index c57f3bf..88f83f2 100644
--- a/screens/courses/CoursesScreen.js
+++ b/screens/courses/CoursesScreen.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Image, Button, ScrollView, Text, View, TouchableOpacity, RefreshControl } from 'react-native';
+import { Image, Button, ScrollView, Text, View, TouchableOpacity, RefreshControl, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 import actions from '../../actions';
+import I18n from '../../lib/i18n/i18n';
 import { commonStyles } from '../../styles/styles';
 import { getRequest, postRequestNoCatch } from '../../lib/requests';
 import { APIRoutes } from '../../config/routes';
@@ -11,6 +12,7 @@ import CourseCard from '../../components/CourseCard/CourseCard';
 import StyledButton from '../../components/Button/Button';
 import { FontAwesome, MaterialCommunityIcons } from '@expo/vector-icons';
 import colors from '../../styles/colors';
+import {textStyles} from "../../styles/textStyles";
 
 class CoursesScreen extends React.Component {
 
@@ -39,8 +41,8 @@ class CoursesScreen extends React.Component {
     //TODO: (Aivant) Fix Helen's comment about how we shouldn't clean out current local changes
     //TODO: (Aivant) ensure that a user can't update another teacher's attendances
     // This prioritizes local changes over on-server changes but it makes the code very clean
-    this.props.fetchCourses(this.props.teacher).then((result) => {
-      this.props.syncLocalChanges(this.props.localAttendances);
+    this.props.syncLocalChanges(this.props.localAttendances).then((result) => {
+      this.props.fetchCourses(this.props.teacher);
     });
 
     const _createCourse = () => {
@@ -51,19 +53,33 @@ class CoursesScreen extends React.Component {
     this.props.navigation.setParams({ handleCreate: _createCourse });
   }
 
-  _handleSelectCourse(courseId, colorKey) {
+  componentWillReceiveProps(nextProps) {
+    if(!this.props.online && nextProps.online) {
+      // When we get back online try to sync local changes.
+      console.log("Online Status switching from offline to online");
+      this.props.syncLocalChanges(this.props.localAttendances);
+    } else if (this.props.online && !nextProps.online) {
+      console.log("Online status switching from online to offline");
+      //TODO: Show some sort of notifications
+    }
+  }
 
+  _handleSelectCourse(courseId, colorKey) {
+    const course = this.props.courses.find((course) => course.id === courseId)
+    if(!("students" in course && "attendances" in course && "sessions" in course && "teachers" in course)) {
+      console.log("Not finished downloading course info");
+      return;
+    }
     const colorList = {
       0: colors.courseGreen,
       1: colors.courseBlue,
       2: colors.coursePurple,
       3: colors.coursePink,
       4: colors.courseBrown
-    }; 
+    };
 
     this.props.navigation.navigate('ViewCourse', {
-      refreshCourses: this.props.fetchCourses,
-      course_id: courseId, 
+      courseId: courseId,
       navbarColor: colorList[colorKey]
     });
   }
@@ -99,31 +115,62 @@ class CoursesScreen extends React.Component {
         onSelectCourse={this._handleSelectCourse}
         onTakeAttendance={this._handleTakeAttendance}
         numStudents={course.students ? course.students.length : 0}
-        synced={"synced" in course ? course.synced : true}/>
+        synced={"synced" in course ? course.synced : true}
+        last_synced={"last_synced" in course ? course.last_synced : ""}
+        locale={this.props.locale}/>
       )
     );
-    return (
-      <View style={{marginBottom: 24}}>
-        { courses }
-        <View style={{marginTop: 16}}><StyledButton
-          onPress={() => navigate('EditCourse', {refreshCourses: this.props.fetchCourses, newCourse: true,
-            sessions: [], teacher: this.props.teacher})}
-          text='Create Course'
-          secondaryButtonLarge>
-        </StyledButton></View>
-      </View>
-    );
+
+    if (courses.length === 0) {
+      return (
+        <View style={{backgroundColor: '#fff', paddingBottom: 24}}>
+          <View style={viewStyles.noResults}>
+            <Image
+            style={viewStyles.img}
+            source={require('../../img/no_search.png')}/>
+            <Text style={[textStyles.titleMedium, {
+              marginTop: 16,
+              textAlign: 'center'
+            }]}>
+              No courses yet 
+            </Text>
+          </View>
+          <StyledButton
+            onPress={() => navigate('EditCourse', {refreshCourses: this.props.fetchCourses, newCourse: true,
+              sessions: [], teacher: this.props.teacher})}
+            text={I18n.t('createcourse', {locale: this.props.locale})}
+            secondaryButtonLarge>
+          </StyledButton>
+        </View>
+      );
+    } else {
+      return (
+        <View style={{marginBottom: 24}}>
+          { courses }
+          <View style={{marginTop: 16}}><StyledButton
+            onPress={() => navigate('EditCourse', {refreshCourses: this.props.fetchCourses, newCourse: true,
+              sessions: [], teacher: this.props.teacher})}
+            text={I18n.t('createcourse', {locale: this.props.locale})}
+            secondaryButtonLarge>
+          </StyledButton>
+          </View>
+        </View>
+      );
+    }
   }
 
   render() {
     let courses;
     courses = this._renderCourses();
     return (
-      <ScrollView refreshControl={
+      <ScrollView
+        style={{backgroundColor: '#f5f5f6'}}
+        refreshControl={
         <RefreshControl
           refreshing={this.props.isLoading}
           onRefresh={this._onRefresh.bind(this)}
         />}
+
       >
         <View style={{backgroundColor: '#f5f5f6'}}>
           { courses }
@@ -157,9 +204,13 @@ const fetchCourses = (teacher) => {
       path,
       (responseData) =>  {
         dispatch(actions.receiveCoursesSuccess(responseData))
-        for (const key in responseData) { // Once you have the courses, fetch student and attendance data
-          dispatch(fetchStudents(responseData[key].id));
-          dispatch(fetchRecentCourseAttendances(responseData[key].id));
+        for (const key in responseData) {
+          // Once you have the courses, fetch student and attendance data
+          const courseId = responseData[key].id;
+          dispatch(fetchStudents(courseId));
+          dispatch(fetchCourseTeachers(courseId));
+          dispatch(fetchSessions(courseId));
+          dispatch(fetchRecentCourseAttendances(courseId));
         }
       },
       (error) => {
@@ -173,8 +224,7 @@ const fetchCourses = (teacher) => {
 }
 
 /**
-  * Fetches all students with the given course id and on success
-  * gets attendances for each student
+  * Fetches all students with the given course id
   */
 const fetchStudents = (courseId) => {
   return (dispatch) => {
@@ -194,6 +244,48 @@ const fetchStudents = (courseId) => {
   }
 }
 
+/**
+  * Fetches all teachers with the given course id
+  */
+const fetchCourseTeachers = (courseId) => {
+  return (dispatch) => {
+    dispatch(actions.requestCourseTeachers(courseId));
+    return getRequest(
+      APIRoutes.getTeachersPath(courseId),
+      (responseData) => {
+        dispatch(actions.receiveCourseTeachersSuccess(responseData.teachers, courseId));
+      },
+      (error) => {
+        console.log("Error in fetching course teachers for course: " + courseId);
+        console.log(error);
+        dispatch(actions.receiveStandardError(error));
+        standardError(error);
+      }
+    );
+  }
+}
+
+/**
+  * Fetches all sessions with the given course id
+  */
+const fetchSessions = (courseId) => {
+  return (dispatch) => {
+    dispatch(actions.requestSessions(courseId));
+    return getRequest(
+      APIRoutes.getSessionsPath(courseId),
+      (responseData) => {
+        dispatch(actions.receiveSessionsSuccess(responseData.sessions, courseId));
+      },
+      (error) => {
+        console.log("Error in fetching sessions for course: " + courseId);
+        console.log(error);
+        dispatch(actions.receiveStandardError(error));
+        standardError(error);
+      }
+    );
+  }
+}
+
 /**
   * Attempts to get attendance for each students and waits for each request to succeed
   * before updating state for attendances
@@ -260,12 +352,13 @@ const updateAttendance = (attendance, index) => {
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, props) => {
   return {
     localAttendances: state.localChanges.attendances,
     teacher: state.teacher,
     courses: state.courses,
-    isLoading: state.isLoading.value,
+    isLoading: state.config.isLoading,
+    locale: state.config.locale,
     online: state.offline.online,
   };
 }
@@ -274,9 +367,25 @@ const mapDispatchToProps = (dispatch) => {
   return {
     syncLocalChanges: (attendances) => dispatch(syncLocalChanges(attendances)),
     fetchCourses: (teacher) => dispatch(fetchCourses(teacher)),
-    fetchStudents: (courseId, date) => dispatch(fetchStudents(courseId, date)),
+    fetchStudents: (courseId) => dispatch(fetchStudents(courseId)),
+    fetchCourseTeachers: (courseId) => dispatch(fetchCourseTeachers(courseId)),
+    fetchSessions: (courseId) => dispatch(fetchSessions(courseId)),
     fetchRecentCourseAttendances: (students, courseId, date) => dispatch(fetchRecentCourseAttendances(students, courseId, date)),
   }
 }
 
+const viewStyles = StyleSheet.create({
+  noResults: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  img: {
+    marginTop: 24,
+    width: 160,
+    height: 160
+  }
+})
+
+
 export default connect(mapStateToProps, mapDispatchToProps)(CoursesScreen);
diff --git a/screens/courses/ViewCourseScreen.js b/screens/courses/ViewCourseScreen.js
index 76e4436..4e5d385 100644
--- a/screens/courses/ViewCourseScreen.js
+++ b/screens/courses/ViewCourseScreen.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import actions from '../../actions';
 import { Image, Button, ScrollView, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 import { commonStyles } from '../../styles/styles';
 import { getRequest, deleteRequest } from '../../lib/requests';
@@ -7,14 +9,15 @@ import { timeFormat } from '../../lib/datetime_formats';
 import { standardError, confirmDelete } from '../../lib/alerts';
 import StyledButton from '../../components/Button/Button';
 import StudentCard from '../../components/StudentCard/StudentCard';
+import SimpleModal from '../../components/SimpleModal';
 import { formViewStyles } from '../../styles/formViewStyles';
 import { textStyles } from '../../styles/textStyles';
 import { FontAwesome, Entypo, MaterialCommunityIcons } from '@expo/vector-icons';
 import colors from '../../styles/colors';
 import { attendanceDate } from '../../lib/date';
+import I18n from '../../lib/i18n/i18n';
 
 
-//TODO: (Aivant) Convert this to offline!
 class ViewCourseScreen extends React.Component {
 
   static navigationOptions = ({ navigation }) => {
@@ -23,10 +26,11 @@ class ViewCourseScreen extends React.Component {
         headerStyle: {
           backgroundColor: params.navbarColor,
           borderBottomColor: 'transparent',
-        }, 
-        headerTintColor: '#fff', 
+        },
+        headerTintColor: '#fff',
         headerRight: (
-          <TouchableOpacity onPress={() => params.handleEditCourse()}>
+          // <TouchableOpacity onPress={() => params.handleEditCourse()}>
+          <TouchableOpacity>
             <View style={{marginRight: 8}}><MaterialCommunityIcons name="pencil" size={30} color={'#fff'} /></View>
           </TouchableOpacity>
         )
@@ -35,105 +39,58 @@ class ViewCourseScreen extends React.Component {
 
   constructor(props) {
     super(props);
-    this._fetchCourse = this._fetchCourse.bind(this);
-    this._fetchSessions = this._fetchSessions.bind(this);
-    this._fetchStudents = this._fetchStudents.bind(this);
-    this._fetchTeachers = this._fetchTeachers.bind(this);
     this._handleSelectStudent = this._handleSelectStudent.bind(this);
     this._deleteCourse = this._deleteCourse.bind(this);
     this._renderDeleteCourseButton = this._renderDeleteCourseButton.bind(this);
     this._renderCourseDate = this._renderCourseDate.bind(this);
     this._renderSessions = this._renderSessions.bind(this);
     this._renderTeachers = this._renderTeachers.bind(this);
+    this._fetchStudents = this._fetchStudents.bind(this);
     this.state = {
-      course_id : this.props.navigation.state.params.course_id,
-      sessions: [],
-      course : { },
-      isLoading : true,
-      students: [],
+      showModal: false,
       navbarColor: this.props.navigation.state.params.navbarColor
     }
   }
 
   componentDidMount() {
-    this._fetchCourse();
-
-    // const _enrollStudent = () => {
-    //    this.props.navigation.navigate('StudentPersonalDetails',
-    //     { refreshStudents: this._fetchStudents, 
-    //       course_id: this.state.course_id, 
-    //       navbarColor: this.state.navbarColor, 
-    //       newStudent: true })
-    //  }
+    const _enrollStudent = () => {
+       this.props.navigation.navigate('CreateStudent',
+        {course_id: this.props.course.id, newStudent: true })
+     }
 
      const _editCourse = () => {
-        this.props.navigation.navigate('EditCourse', {
-          refreshCourses: this._fetchCourse,
-          newCourse: false,
-          course_id: this.state.course_id,
-          navbarColor: this.state.navbarColor,
-          is_active: this.state.course.is_active,
-          title: this.state.course.title,
-          teacher1: this.state.course.teacher_id1,
-          teacher2: this.state.course.teacher_id2,
-          start_date: this.state.course.start_date,
-          end_date: this.state.course.end_date,
-          sessions: this.state.sessions,
-        })}
-
-    this.props.navigation.setParams({ navbarColor: this.state.navbarColor, 
-      handleEditCourse: _editCourse });
-  }
-
-  /*
-   * Fetch record for single course.
-   */
-  _fetchCourse() {
-    const successFunc = (responseData) => {
-      this.setState({ course: responseData });
-      this._fetchSessions();
+       if(this.props.online) {
+          this.props.navigation.navigate('EditCourse', {
+            refreshCourses: this._fetchCourse,
+            newCourse: false,
+            course_id: this.props.course.id,
+            is_active: this.props.course.is_active,
+            title: this.props.course.title,
+            teacher1: this.props.course.teacher_id1,
+            teacher2: this.props.course.teacher_id2,
+            start_date: this.props.course.start_date,
+            end_date: this.props.course.end_date,
+            sessions: this.props.course.sessions,
+          })
+      } else {
+        this.setState({showModal: true})
+      }
     }
-    getRequest(APIRoutes.getCoursePath(this.state.course_id), successFunc, standardError);
-  }
 
-  /*
-   * Fetch record for single course.
-   */
-  _fetchSessions() {
-    const successFunc = (responseData) => {
-      this.setState({ sessions: responseData.sessions });
-      this._fetchTeachers();
-    }
-    getRequest(APIRoutes.getSessionsPath(this.state.course_id), successFunc, standardError);
+    this.props.navigation.setParams({ navbarColor: this.state.navbarColor, handleEditCourse: _editCourse });
   }
 
-  /*
-   * Fetch record for the course.
-   */
-  _fetchTeachers() {
-    const successFunc = (responseData) => {
-      this.setState({ teachers: responseData.teachers});
-      this._fetchStudents();
-    }
-    getRequest(APIRoutes.getTeachersPath(this.state.course_id), successFunc, standardError);
-  }
-
-  /*
-   * Fetch students for the course.
-   */
   _fetchStudents() {
     const successFunc = (responseData) => {
       this.setState({ students: responseData, isLoading: false });
     }
-
-    getRequest(APIRoutes.getStudentsInCoursePath(this.state.course_id), successFunc, standardError);
+    getRequest(APIRoutes.getStudentsInCoursePath(this.props.course.id), successFunc, standardError);
   }
 
   _handleSelectStudent(id) {
     this.props.navigation.navigate('StudentProfile', {
-      refreshStudents: this._fetchStudents(),
       studentId: id,
-      courseId: this.state.course_id,
+      courseId: this.props.course.id,
       navbarColor: this.state.navbarColor,
     });
   }
@@ -145,26 +102,56 @@ class ViewCourseScreen extends React.Component {
     const successFunc = (responseData) => {
       this.props.navigation.navigate('Courses');
     }
-
-    deleteRequest(APIRoutes.getCoursePath(this.state.course_id), successFunc, standardError);
+    deleteRequest(APIRoutes.getCoursePath(this.props.course.id), successFunc, standardError);
   }
 
   _renderDeleteCourseButton() {
     return (
       <StyledButton
-        onPress={() => confirmDelete("Are you sure you want to delete this course?", this._deleteCourse)}
+        onPress={() => {
+            if (this.props.online) {
+              confirmDelete("Are you sure you want to delete this course?", this._deleteCourse)
+            } else {
+              this.setState({showModal: true})
+            }
+          }
+        }
         text='Delete Course'
         linkButton>
       </StyledButton>
     );
   }
 
+  /**
+    * Renders basic offline modal
+    */
+
+  //TODO: rendering modal is kind of dumb....it shouldn't be like this.
+  _renderModal() {
+    const callback = () => {
+      this.setState({showModal: false})
+    }
+    const buttons = [{ title: 'Okay', callback: callback, type: 'primary' }];
+
+    return (
+      <SimpleModal
+        onClosed={callback}
+        title='Unavailable Offline'
+        buttons={buttons}
+        visible={this.state.showModal}>
+        <View style={viewStyles.modalContent}>
+          <Text style={textStyles.bodyBold}>This feature is unavailable while offline. Try again later!</Text>
+        </View>
+      </SimpleModal>
+    )
+  }
+
   /*
    * Display course dates.
    */
   _renderCourseDate() {
-    const start_date = new Date(this.state.course.start_date)
-    const end_date = new Date(this.state.course.end_date)
+    const start_date = new Date(this.props.course.start_date)
+    const end_date = new Date(this.props.course.end_date)
     const course_start = start_date.toLocaleDateString()
     const course_end = end_date.toLocaleDateString()
     return (
@@ -176,7 +163,7 @@ class ViewCourseScreen extends React.Component {
    * Display course teachers.
    */
   _renderTeachers() {
-    return this.state.teachers.map((teacher, index) => {
+    return this.props.course.teachers.map((teacher, index) => {
       return (
         `${teacher.first_name} ${teacher.last_name}, `
       );
@@ -187,12 +174,18 @@ class ViewCourseScreen extends React.Component {
    * Display course sessions.
    */
   _renderSessions() {
-    return this.state.sessions.map((session, index) => {
+    if(this.props.course.sessions.length == 0) {
+      return;
+    }
+    return this.props.course.sessions.map((session, index) => {
       const start = timeFormat(new Date(session.start_time))
       const end = timeFormat(new Date(session.end_time))
+      const i18nWeekday = I18n.t(session.weekday.toLowerCase(), {locale: this.props.locale});
       return (
         <View key={index}>
-          <Text style={textStyles.bodySmallLight}>{`${session.weekday}, ${ start } - ${ end }` } </Text>
+          <View style={formViewStyles.div_2}>
+            <Text style={textStyles.bodySmallLight}>{`${i18nWeekday}, ${ start } - ${ end }` } </Text>
+          </View>
         </View>
       );
     });
@@ -203,7 +196,13 @@ class ViewCourseScreen extends React.Component {
    */
   _renderStudents() {
     const { navigate } = this.props.navigation;
-    return this.state.students.map((student, i) =>  (
+    if (this.props.course.students.length == 0) {
+      return (
+        <Text style={textStyles.bodySmall}>No students yet. Enroll a student!</Text>
+        )
+    }
+
+    return this.props.course.students.map((student, i) =>  (
       <StudentCard key={i}
         student={student}
         onSelectStudent={this._handleSelectStudent}
@@ -214,26 +213,15 @@ class ViewCourseScreen extends React.Component {
 
   render() {
     const { navigate } = this.props.navigation;
-    if (this.state.isLoading) {
-      return (
-        <View style={commonStyles.containerStatic}>
-          <Image
-            style={commonStyles.icon}
-            source={require('../../icons/spinner.gif')}
-          />
-      </View>
-      );
-    } else {
       return (
+        <View>
         <ScrollView style={{backgroundColor: this.state.navbarColor, borderBottomWidth: 400, borderBottomColor: '#fff'}}>
           <View style={{backgroundColor: this.state.navbarColor, paddingBottom: 24}}>
             <View style={formViewStyles.div_1}>
               <View style={formViewStyles.div_2}>
-                <Text style={[textStyles.titleLargeLight, {marginBottom: 16}]}>{ this.state.course.title }</Text>
+                <Text style={[textStyles.titleLargeLight, {marginBottom: 16}]}>{ this.props.course.title }</Text>
 
-                <View style={formViewStyles.div_2}>
-                  { this._renderSessions() }
-                </View>
+                { this._renderSessions() }
 
                 <View style={formViewStyles.div_2}>
                   <Text style={textStyles.bodySmallLight}>{ this._renderTeachers() }</Text>
@@ -245,43 +233,47 @@ class ViewCourseScreen extends React.Component {
               </View>
             </View>
           </View>
-
           <View style={{backgroundColor: colors.backgroundWhite}}>
 
             <View style={{marginTop: 16}}>
               <StyledButton
                 onPress={() => navigate('Attendances', {
-                  courseId: this.state.course.id,
+                  courseId: this.props.course.id,
                   date: attendanceDate(new Date()),
                 })}
-                text="Take Attendance"
+                text={I18n.t('takeattendance', {locale: this.props.locale})}
                 // secondaryButtonLarge
                 variableButton={ this.state.navbarColor }
               />
               <StyledButton
                 onPress={() => navigate('RecentAttendances',
-                  { courseId: this.state.course.id})}
-                text="View Past Attendance"
+                  { courseId: this.props.course.id})}
+                text={I18n.t('viewpastattendances', {locale: this.props.locale})}
                 secondaryButtonLarge
               />
-            </View> 
-
+            </View>
             <View style={[commonStyles.divider, {marginTop: 16, marginBottom: 16}]}/>
 
 
             <View style={[formViewStyles.div_1, {marginBottom: 16}]}>
               <View style={{flex: 1, flexDirection: 'row'}}>
                 <View style={{flex: 0.6}}>
-                  <Text style={textStyles.titleMedium}>Students</Text>
+                  <Text style={textStyles.titleMedium}>{I18n.t('students', {locale: this.props.locale})}</Text>
                 </View>
                 <View style={{flex: 0.4, flexDirection: 'row', justifyContent: 'flex-end'}}>
                   <StyledButton
-                    onPress={() => this.props.navigation.navigate('SearchStudent',
-                    { refreshStudents: this._fetchStudents,
-                      course_id: this.state.course_id,
-                      navbarColor: this.state.navbarColor,
-                       })}
-                    text="+ Enroll Student"
+                    onPress={() => {
+                        if(this.props.online) {
+                          navigate('SearchStudent',
+                                  { refreshStudents: this._fetchStudents,
+                                    course_id: this.props.course.id,
+                                    navbarColor: this.state.navbarColor, });
+                        } else {
+                          this.setState({showModal: true})
+                        }
+                      }
+                    }
+                    text={"+ " + I18n.t('enrollstudent', {locale: this.props.locale})}
                     enrollSmall
                   />
                 </View>
@@ -292,8 +284,10 @@ class ViewCourseScreen extends React.Component {
             </View>
           </View>
         </ScrollView>
-      );
-    }
+      { this._renderModal() }
+      </View>
+    );
+
   }
 }
 
@@ -303,6 +297,19 @@ const viewStyles = StyleSheet.create({
     paddingTop: 16,
     paddingLeft: 16,
   },
+  modalContent: {
+    marginTop: 16
+  },
 });
 
-export default ViewCourseScreen;
+const mapStateToProps = (state, props) => {
+  const course = state.courses.find((course) => course.id === props.navigation.state.params.courseId)
+  return {
+    course: course,
+    isLoading: state.config.isLoading,
+    online: state.offline.online,
+    locale: state.config.locale,
+  };
+}
+
+export default connect(mapStateToProps, null)(ViewCourseScreen);
diff --git a/screens/login/LoginScreen.js b/screens/login/LoginScreen.js
index 7c5e145..719fb4d 100644
--- a/screens/login/LoginScreen.js
+++ b/screens/login/LoginScreen.js
@@ -2,7 +2,8 @@ import React from 'react';
 
 import { connect } from 'react-redux';
 import actions from '../../actions';
-
+import I18n from '../../lib/i18n/i18n';
+import colors from '../../styles/colors';
 import StyledButton from '../../components/Button/Button';
 import { Button, ScrollView, Text, TextInput, View, Image, StyleSheet } from 'react-native';
 import { postRequest } from '../../lib/requests';
@@ -22,48 +23,54 @@ class LoginScreen extends React.Component {
     this.state = {
       email: "",
       password: "",
+      isFetching: false,
     }
   }
 
   _attemptLogin() {
+    if (this.state.isFetching) {
+      return;
+    }
+
     const params = {
       teacher: {
         email: this.state.email,
         password: this.state.password,
       }
     }
-    this.props.fetchTeacher(params, this.props.navigation);
+    this.setState({isFetching: true}, ()=>{
+      this.props.fetchTeacher(params, this.props.navigation).then(()=>{
+        this.setState({isFetching: false});
+      });
+    });
     //TODO: Logging in should not push onto the stack. it should replace current
   }
 
   render() {
     return (
-      <View style={{flex: 1, alignItems: 'center'}}>
-        <Image
-        style={styles.bg}
-        source={require('../../img/log_in.png')}>
-          <View style={styles.container}>
-            <Text style={textStyles.titleSmallLight}>Email</Text>
-            <TextInput style={styles.textInput}
-              autoCapitalize='none'
-              onChangeText={(text) => this.setState({email: text})}/>
-            <Text style={textStyles.titleSmallLight}>Password</Text>
-            <TextInput style={styles.textInput}
-              onChangeText={(text) => this.setState({password: text})}
-              secureTextEntry/>
-          </View>
+      <View style={{flex: 1, alignItems: 'center', backgroundColor: colors.primaryYellow}}>
+        <View style={styles.container}>
+          <Text style={textStyles.titleSmallLight}>{I18n.t('email', {locale: this.props.locale})}</Text>
+          <TextInput style={styles.textInput}
+            autoCapitalize='none'
+            onChangeText={(text) => this.setState({email: text})}/>
+          <Text style={textStyles.titleSmallLight}>{I18n.t('password', {locale: this.props.locale})}</Text>
+          <TextInput style={styles.textInput}
+            onChangeText={(text) => this.setState({password: text})}
+            secureTextEntry/>
+        </View>
+        <View style={styles.buttons}>
           <StyledButton
             onPress={this._attemptLogin.bind(this)}
-            text='Login'
+            text={I18n.t('login', {locale: this.props.locale})}
             whiteButtonLarge>
           </StyledButton>
-
           <StyledButton
             onPress={() => this.props.navigation.navigate('SignUp')}
-            text='Sign Up'
+            text={I18n.t('signup', {locale: this.props.locale})}
             whiteButtonOutlineLarge>
           </StyledButton>
-        </Image>
+        </View>
       </View>
 
     );
@@ -76,11 +83,15 @@ const fetchTeacher = (params, navigation) => {
     return postRequest(
       APIRoutes.loginPath(),
       (responseData) => {
+        console.log("logged in successfully")
         dispatch(actions.receiveTeacherSuccess(responseData));
         navigation.navigate('Courses');
       },
       (error) => {
+        console.log("logged in with error")
+        console.log(error)
         //TODO: (Aivant) We shouldn't dispatch actions in case of error here since if the fetch request fails, this error function doesn't get called
+        //TODO: Standard Errors returned from rails won't inherently be localized
         dispatch(actions.receiveStandardError(error));
         standardError(error);
       },
@@ -89,12 +100,26 @@ const fetchTeacher = (params, navigation) => {
   }
 }
 
+const updateLocale = (locale) => {
+  return (dispatch) => {
+    dispatch(actions.updateLocale(locale));
+  }
+}
+
 const mapDispatchToProps = (dispatch) => {
   return {
+    updateLocale: (locale) => dispatch(updateLocale(locale)),
     fetchTeacher: (params, navigation) => dispatch(fetchTeacher(params, navigation)),
   }
 }
 
+const mapStateToProps = (state, props) => {
+    return {
+      locale: state.config.locale
+    }
+}
+
+
 const styles = StyleSheet.create({
   bg: {
     backgroundColor:'transparent',
@@ -111,11 +136,14 @@ const styles = StyleSheet.create({
 
   },
   container: {
-    marginRight: 40,
-    marginLeft: 40,
-    marginTop: 180,
+    marginRight: 32,
+    marginLeft: 32,
+    marginTop: 140,
+    alignSelf: 'stretch'
+  },
+  buttons: {
     alignSelf: 'stretch'
   }
 });
 
-export default connect(null, mapDispatchToProps)(LoginScreen);
+export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);
diff --git a/screens/students/SearchStudentResultScreen.js b/screens/students/SearchStudentResultScreen.js
index 2239a09..2ed00b7 100644
--- a/screens/students/SearchStudentResultScreen.js
+++ b/screens/students/SearchStudentResultScreen.js
@@ -26,12 +26,12 @@ class SearchStudentResultScreen extends React.Component {
     }
   }
 
-  _handleSelectStudent(id) {
+  _handleSelectStudent(student) {
     this.props.navigation.navigate('StudentProfilePreview', {
-      refreshStudents: this.props.navigation.state.params.refreshStudents,
       course_id: this.state.course_id,
       navbarColor: this.state.navbarColor,
-      studentId: id
+      student: student,
+      parentKey: this.props.navigation.state.params.parentKey,
     });
   }
 
@@ -68,8 +68,7 @@ class SearchStudentResultScreen extends React.Component {
           </View>
           <StyledButton
             onPress={() => this.props.navigation.navigate('StudentPersonalDetails',
-              { refreshStudents: this.props.navigation.state.params.refreshStudents,
-                course_id: this.state.course_id,
+              { course_id: this.state.course_id,
                 navbarColor: this.state.navbarColor,
                 newStudent: true })}
             text="+ Create Student"
@@ -88,17 +87,7 @@ class SearchStudentResultScreen extends React.Component {
   }
 
   render() {
-    let results;
-    if (this.props.isLoading) {
-      results = (
-        <Image
-          style={commonStyles.icon}
-          source={require('../../icons/spinner.gif')}
-        />
-      )
-    } else {
-      results = this._renderSearchResults();
-    }
+    results = this._renderSearchResults();
 
     return (
       <ScrollView style={{backgroundColor: '#fff'}}>
diff --git a/screens/students/SearchStudentScreen.js b/screens/students/SearchStudentScreen.js
index 68b939c..ef891b4 100644
--- a/screens/students/SearchStudentScreen.js
+++ b/screens/students/SearchStudentScreen.js
@@ -27,9 +27,9 @@ class SearchStudentScreen extends React.Component {
       this.setState({students: responseData});
       this.props.navigation.navigate('SearchStudentResults', {
         students: responseData,
-        refreshStudents: this.props.navigation.state.params.refreshStudents,
-        course_id: this.state.course_id, 
+        course_id: this.state.course_id,
         navbarColor: this.state.navbarColor,
+        parentKey: this.props.navigation.state.key,
       })
     }
     getRequest(APIRoutes.searchStudentPath(), successFunc, standardError, params=params);
@@ -43,9 +43,10 @@ class SearchStudentScreen extends React.Component {
            <View style={viewStyles.buttonMargin}>
              <StyledButton
                onPress={() => this.props.navigation.navigate('StudentPersonalDetails',
-                 { refreshStudents: this.props.navigation.state.params.refreshStudents,
+                 {
                    course_id: this.state.course_id,
                    navbarColor: this.state.navbarColor,
+                   parentKey: this.props.navigation.state.key,
                    newStudent: true })}
                text="+ Create Student"
                secondaryButtonLarge
diff --git a/screens/students/StudentContactInfoScreen.js b/screens/students/StudentContactInfoScreen.js
index ca43b50..78dec89 100644
--- a/screens/students/StudentContactInfoScreen.js
+++ b/screens/students/StudentContactInfoScreen.js
@@ -15,7 +15,8 @@ class StudentContactInfoScreen extends React.Component {
       course_id: this.props.navigation.state.params.course_id,
       navbarColor: this.props.navigation.state.params.navbarColor,
       newStudent: this.props.navigation.state.params.newStudent,
-      savedFields: this.props.navigation.state.params.savedFields
+      savedFields: this.props.navigation.state.params.savedFields,
+      parentKey: this.props.navigation.state.params.parentKey,
     }
   }
 
@@ -29,7 +30,7 @@ class StudentContactInfoScreen extends React.Component {
         navbarColor: this.state.navbarColor,
       });
     }
-    putRequest(APIRoutes.getStudentPath(studentId), 
+    putRequest(APIRoutes.getStudentPath(studentId),
       successFunc, standardError, params=params);
   }
 
@@ -41,7 +42,7 @@ class StudentContactInfoScreen extends React.Component {
       navbarColor: this.state.navbarColor,
       newStudent: this.state.newStudent,
       savedFields: joined,
-      refreshStudents: this.props.navigation.state.params.refreshStudents,
+      parentKey: this.state.parentKey,
     });
   }
 
@@ -67,7 +68,7 @@ class StudentContactInfoScreen extends React.Component {
             phone_2={navProps.phone_2}
             email={navProps.email}
             newStudent={this.state.newStudent}
-            onSaveStudent={this._handleUpdateStudent} 
+            onSaveStudent={this._handleUpdateStudent}
             />
          </View>
       )
diff --git a/screens/students/StudentExtraInfoScreen.js b/screens/students/StudentExtraInfoScreen.js
index c2f31e4..fbc7814 100644
--- a/screens/students/StudentExtraInfoScreen.js
+++ b/screens/students/StudentExtraInfoScreen.js
@@ -2,9 +2,11 @@ import React from 'react';
 import { View } from 'react-native';
 import { APIRoutes } from '../../config/routes';
 import { postRequest, putRequest } from '../../lib/requests';
-import { standardError } from '../../lib/alerts';
+import { standardError, alert } from '../../lib/alerts';
 import PropTypes from 'prop-types';
 import StudentExtraInfoForm from '../../components/Form/StudentExtraInfoForm';
+import { connect } from 'react-redux';
+import actions from '../../actions';
 
 class StudentExtraInfoScreen extends React.Component {
   constructor(props) {
@@ -15,7 +17,8 @@ class StudentExtraInfoScreen extends React.Component {
       course_id: this.props.navigation.state.params.course_id,
       navbarColor: this.props.navigation.state.params.navbarColor,
       newStudent: this.props.navigation.state.params.newStudent,
-      savedFields: this.props.navigation.state.params.savedFields
+      savedFields: this.props.navigation.state.params.savedFields,
+      parentKey: this.props.navigation.state.params.parentKey,
     }
   }
 
@@ -23,23 +26,23 @@ class StudentExtraInfoScreen extends React.Component {
     const studentId = this.props.navigation.state.params.student.id;
     const successFunc = (responseData) => {
       this.props.navigation.navigate('StudentProfile', {
-        refreshStudents: this.props.navigation.state.params.refreshStudents,
         studentId: studentId,
         courseId: this.state.course_id,
         navbarColor: this.state.navbarColor,
       });
     }
-    putRequest(APIRoutes.getStudentPath(studentId), 
+    putRequest(APIRoutes.getStudentPath(studentId),
       successFunc, standardError, params=params);
   }
 
   _handleEnrollStudent(student) {
     const successFunc = (responseData) => {
-      this.props.navigation.state.params.refreshStudents();
-      this.props.navigation.navigate('ViewCourse', { 
-        course_id: this.state.course_id,
+      this.props.enrollStudent(this.state.student, this.state.course_id)
+      this.props.navigation.navigate('ViewCourse', {
+        courseId: this.state.course_id, 
         navbarColor: this.state.navbarColor,
       });
+      alert("Success!", "Student Successfully Enrolled")
     }
 
     const p = {
@@ -80,7 +83,7 @@ class StudentExtraInfoScreen extends React.Component {
             primary_language={navProps.primary_language}
             past_dream_participant={navProps.past_dream_participant}
             newStudent={this.state.newStudent}
-            onSaveStudent={this._handleUpdateStudent} 
+            onSaveStudent={this._handleUpdateStudent}
             />
          </View>
       )
@@ -88,4 +91,10 @@ class StudentExtraInfoScreen extends React.Component {
   }
 }
 
-export default StudentExtraInfoScreen;
+const mapDispatchToProps = (dispatch) => {
+  return {
+    enrollStudent: (student, courseId) => dispatch(actions.enrollStudent(student, courseId)),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(StudentExtraInfoScreen);
diff --git a/screens/students/StudentPersonalDetailsScreen.js b/screens/students/StudentPersonalDetailsScreen.js
index 3ea7528..fd0bc0d 100644
--- a/screens/students/StudentPersonalDetailsScreen.js
+++ b/screens/students/StudentPersonalDetailsScreen.js
@@ -15,6 +15,7 @@ class StudentPersonalDetailsScreen extends React.Component {
       course_id: this.props.navigation.state.params.course_id,
       newStudent: this.props.navigation.state.params.newStudent,
       navbarColor: this.props.navigation.state.params.navbarColor,
+      parentKey: this.props.navigation.state.params.parentKey,
     }
   }
 
@@ -22,13 +23,12 @@ class StudentPersonalDetailsScreen extends React.Component {
     const studentId = this.props.navigation.state.params.student.id;
     const successFunc = (responseData) => {
       this.props.navigation.navigate('StudentProfile', {
-        refreshStudents: this.props.navigation.state.params.refreshStudents,
         studentId: studentId,
         courseId: this.state.course_id,
         navbarColor: this.state.navbarColor,
       });
     }
-    putRequest(APIRoutes.getStudentPath(studentId), 
+    putRequest(APIRoutes.getStudentPath(studentId),
       successFunc, standardError, params=params);
   }
 
@@ -38,7 +38,7 @@ class StudentPersonalDetailsScreen extends React.Component {
       navbarColor: this.state.navbarColor,
       newStudent: this.state.newStudent,
       savedFields: params,
-      refreshStudents: this.props.navigation.state.params.refreshStudents,
+      parentKey: this.state.parentKey,
     });
   }
 
@@ -63,7 +63,7 @@ class StudentPersonalDetailsScreen extends React.Component {
             is_active={navProps.is_active}
             sex={navProps.sex}
             newStudent={this.state.newStudent}
-            onSaveStudent={this._handleUpdateStudent} 
+            onSaveStudent={this._handleUpdateStudent}
             />
          </View>
       )
diff --git a/screens/students/StudentProfilePreviewScreen.js b/screens/students/StudentProfilePreviewScreen.js
index d6ae32b..2937ddb 100644
--- a/screens/students/StudentProfilePreviewScreen.js
+++ b/screens/students/StudentProfilePreviewScreen.js
@@ -6,56 +6,50 @@ import { colors } from '../../styles/colors';
 import { getRequest, deleteRequest, postRequest } from '../../lib/requests';
 import { APIRoutes } from '../../config/routes';
 import { formViewStyles } from '../../styles/formViewStyles';
-import { standardError } from '../../lib/alerts';
+import { frontendError, alert } from '../../lib/alerts';
 import {formStyles} from "../../components/Form/styles";
 import StyledButton from '../../components/Button/Button';
+import { connect } from 'react-redux';
+import actions from '../../actions';
+
+
 
 class StudentProfilePreviewScreen extends React.Component {
 
   constructor(props) {
     super(props);
     this._renderStudent = this._renderStudent.bind(this);
-    this._fetchStudent = this._fetchStudent.bind(this);
     this._handleEnrollStudent = this._handleEnrollStudent.bind(this);
 
+    //THis state updating is 100% for convenience tbh. bad practice
     this.state = {
-      isLoading : true,
-      studentId: this.props.navigation.state.params.studentId,
+      student: this.props.navigation.state.params.student,
       course_id: this.props.navigation.state.params.course_id,
       navbarColor: this.props.navigation.state.params.navbarColor,
-      student: { }
+      parentKey: this.props.navigation.state.params.parentKey,
     }
   }
 
 
   _handleEnrollStudent() {
+    if(this.props.studentIds.includes(this.state.student.id)) {
+      console.log("Student is already enrolled");
+      frontendError("This student is already enrolled.");
+      this.props.navigation.goBack(this.state.parentKey)
+      return;
+    }
     const successFunc = (responseData) => {
-      this.props.navigation.state.params.refreshStudents();
-      this.props.navigation.navigate('ViewCourse', { 
-        course_id: this.state.course_id, 
-        navbarColor: this.state.navbarColor,
-      });
+      alert("Success!", "Student Successfully Enrolled")
+      this.props.navigation.goBack(this.state.parentKey)
     }
 
     const p = {
-      student_id: this.state.studentId,
+      student_id: this.state.student.id,
       course_id: this.state.course_id
     }
-
-    postRequest(APIRoutes.getCoursesStudentsPath(), successFunc, standardError, params=p);
-  }
-
-  componentDidMount() {
-    this._fetchStudent(this.state.studentId);
-  }
-
-  _fetchStudent(studentId) {
-    const { navigate } = this.props.navigation;
-    const successFunc = (responseData) => {
-      this.setState({ student: responseData, isLoading: false });
-    }
-
-    getRequest(APIRoutes.getStudentPath(studentId), successFunc, standardError);
+    this.props.enrollStudent(this.state.student, this.state.course_id)
+    //TODO: What if this post request fails? Add graceful failing!
+    postRequest(APIRoutes.getCoursesStudentsPath(), successFunc, () => frontendError("Student Enrollment Failed"), params=p);
   }
 
   _renderStudent() {
@@ -122,17 +116,7 @@ class StudentProfilePreviewScreen extends React.Component {
 
   render() {
     const { navigate } = this.props.navigation;
-    let students;
-    if (this.state.isLoading) {
-      student = (
-        <Image
-          style={commonStyles.icon}
-          source={require('../../icons/spinner.gif')}
-        />
-      )
-    } else {
-      student = this._renderStudent()
-    }
+    student = this._renderStudent()
     return (
       <ScrollView style={formViewStyles.base}>
         { student }
@@ -148,4 +132,19 @@ const viewStyles = StyleSheet.create({
   },
 });
 
-export default StudentProfilePreviewScreen;
+const mapStateToProps = (state, props) => {
+  // Get course and date associated with this attendance screen
+  const course = state.courses.find((course) => course.id === props.navigation.state.params.course_id);
+  return {
+    ...props.navigation.state.params,
+    studentIds: course.students.map((student) => {return student.id}),
+  };
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    enrollStudent: (student, courseId) => dispatch(actions.enrollStudent(student, courseId)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudentProfilePreviewScreen);
diff --git a/screens/students/StudentProfileScreen.js b/screens/students/StudentProfileScreen.js
index c3330ba..33428a3 100644
--- a/screens/students/StudentProfileScreen.js
+++ b/screens/students/StudentProfileScreen.js
@@ -1,296 +1,321 @@
 import React from 'react';
-import { Image, Button, Text, View, ScrollView } from 'react-native';
+import { Image, Button, Text, View, ScrollView, StyleSheet} from 'react-native';
 import { textStyles } from '../../styles/textStyles';
 import { commonStyles } from '../../styles/styles';
-import { colors } from '../../styles/colors';
+import colors from '../../styles/colors';
 import { getRequest, deleteRequest, putRequest } from '../../lib/requests';
 import { APIRoutes } from '../../config/routes';
 import { formViewStyles } from '../../styles/formViewStyles';
 import { standardError, confirmDelete } from '../../lib/alerts';
 import StyledButton from '../../components/Button/Button';
+import { connect } from 'react-redux';
+import actions from '../../actions';
+
+
 
 class StudentProfileScreen extends React.Component {
 
   constructor(props) {
     super(props);
     this._renderStudent = this._renderStudent.bind(this);
-    this._fetchStudent = this._fetchStudent.bind(this);
     this._handleUpdateStudent = this._handleUpdateStudent.bind(this);
     this._deleteEnrollment = this._deleteEnrollment.bind(this);
-
-    this.state = {
-      student : { },
-      isLoading : true,
-      studentId: this.props.navigation.state.params.studentId,
-      courseId: this.props.navigation.state.params.courseId,
-      navbarColor: this.props.navigation.state.params.navbarColor
-    }
-  }
-
-  componentDidMount() {
-    this._fetchStudent(this.state.studentId);
   }
 
-  _fetchStudent(studentId) {
-    const { navigate } = this.props.navigation;
-    const successFunc = (responseData) => {
-      this.setState({ student: responseData, isLoading: false });
-    }
-
-    getRequest(APIRoutes.getStudentPath(studentId), successFunc, standardError);
+  calculatePercentages(attendance_stats) {
+    const total = attendance_stats.num_present + attendance_stats.num_late + attendance_stats.num_absent;
+    // var present = (attendance_stats.num_present / total) * 100;
+    // var late = (attendance_stats.num_late / total) * 100;
+    // var absent = (attendance_stats.num_absent / total) * 100;
+    var present = `${attendance_stats.num_present} / ${total}`
+    var late = `${attendance_stats.num_late} / ${total}`
+    var absent = `${attendance_stats.num_absent} / ${total}`
+    // return {present: present.toFixed(1), late: late.toFixed(1), absent: absent.toFixed(1)};
+    return {present: present, late: late, absent: absent};
   }
 
   _deleteEnrollment() {
     var params = {
-        student_id: this.state.studentId,
-        course_id: this.state.courseId
+        student_id: this.props.student.id,
+        course_id: this.props.courseId
     }
     const successFunc = (responseData) => {
-      // this.props.navigation.state.params.refreshStudents();
-      this.props.navigation.navigate('ViewCourse', {
-        course_id: this.state.courseId,
-        navbarColor: this.state.navbarColor
-      });
+      this.props.unenrollStudent(this.props.student.id, this.props.courseId);
+      this.props.navigation.goBack();
     }
+    //TODO: What happens if this function fails. Are we still offline first? HAndle this!!!
     deleteRequest(APIRoutes.getCoursesStudentsPath(), successFunc, standardError, params=params);
   }
 
   _handleUpdateStudent(params) {
     const successFunc = (responseData) => {
-      // this.props.navigation.state.params.refreshStudent();
+      this.props.navigation.state.params.refreshStudent();
       this.props.navigation.navigate('Courses');
     }
-    putRequest(APIRoutes.getStudentPath(this.state.studentId), successFunc, standardError, params=params);
+    putRequest(APIRoutes.getStudentPath(this.props.student.id), successFunc, standardError, params=params);
   }
 
-  _renderStudent() {
-    const { navigate } = this.props.navigation;
-    return(
-      <View>
-        <View style={formViewStyles.div_1}>
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleLarge}>
-            {this.state.student.first_name} {this.state.student.last_name} - {this.state.student.dream_id}
-            </Text>
-          </View>
-
-          <View style={formViewStyles.div_2}>
-            <View style={{flex: 1, flexDirection: 'row', marginTop: 10}}>
-                <View style={{flex: 0.7}}>
-                    <Text style={textStyles.titleMedium}> Personal Information </Text>
-                </View>
-                <View style={{flex: 0.3}}>
-                    <StyledButton
-                      onPress={() => navigate('StudentPersonalDetails', {
-                        refreshStudent: this._fetchStudent(this.state.studentId), 
-                        newStudent: false, 
-                        student: this.state.student, 
-                        navbarColor: this.state.navbarColor
-                      })}
-                      text='Edit'
-                      noPaddingPrimaryButtonSmall
-                    />
-                </View>
-            </View>
-          </View>
-   
-
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Nickname
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.nickname}
-            </Text>
-          </View>
-
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Birthday
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.birthday}
-            </Text>
-          </View>
-
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Active Participant?
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.is_active}
-            </Text>
-          </View>
-
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Sex
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.sex}
-            </Text>
-          </View>
-
-          <View style={formViewStyles.div_2}>
-            <View style={{flex: 1, flexDirection: 'row', marginTop: 10}}>
-                <View style={{flex: 0.7}}>
-                    <Text style={textStyles.titleMedium}> Contact Information </Text>
-                </View>
-                <View style={{flex: 0.3}}>
-                    <StyledButton
-                      onPress={() => navigate('StudentContactInfo', {
-                        refreshStudent: this._fetchStudent(this.state.studentId), 
-                        newStudent: false, 
-                        student: this.state.student,
-                        navbarColor: this.state.navbarColor})}
-                      text='Edit'
-                      noPaddingPrimaryButtonSmall
-                    />
-                </View>
-            </View>
-          </View>
+  _renderAttendanceStats() {
+    if(!this.props.student || !this.props.student.attendance_stats) {
+      return;
+    }
+    const attendanceStats = this.calculatePercentages(this.props.student.attendance_stats)
+    return (
+      <View style={{flex: 1, flexDirection: 'row', marginTop: 16}}>
+        <View style={{flex: 0.08}}/>
+        <View style={{flex: 0.25, backgroundColor: '#E1FCEE', padding: 12, borderRadius: 4}}>
+          <Text style={[textStyles.bodyBold, {textAlign: 'center'}]}>{attendanceStats.present}</Text>
+          <Text style={[textStyles.bodySmallBold, {marginTop: 4, textAlign: 'center', color: colors.successGreen}]}>Present</Text>
+        </View>
+        <View style={{flex: 0.045}}/>
+        <View style={{flex: 0.25, backgroundColor: '#FCEBEB', padding: 12, borderRadius: 4}}>
+          <Text style={[textStyles.bodyBold, {textAlign: 'center'}]}>{attendanceStats.absent}</Text>
+          <Text style={[textStyles.bodySmallBold, {marginTop: 4, textAlign: 'center', color: colors.errorRed}]}>Absent</Text>
+        </View>
+        <View style={{flex: 0.045}}/>
+        <View style={{flex: 0.25, backgroundColor: '#FFF3E5', padding: 12, borderRadius: 4}}>
+          <Text style={[textStyles.bodyBold, {textAlign: 'center'}]}>{attendanceStats.late}</Text>
+          <Text style={[textStyles.bodySmallBold, {marginTop: 4, textAlign: 'center', color: colors.lateOrange}]}>Late</Text>
+        </View>
+        <View style={{flex: 0.08}}/>
+      </View>
+    )
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Address
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.address}
-            </Text>
-          </View>
+  }
 
-          <View style={formViewStyles.div_2}> 
-            <Text style={textStyles.titleSmall}>
-            Phone Numbers
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.phone} {"\n"}
-            {this.state.student.phone_2}
-            </Text>
+  _renderPersonalInfo() {
+    return (
+      <View style={viewStyles.outer}>
+        <View style={formViewStyles.div_2}>
+          <View style={{flex: 1, flexDirection: 'row', marginTop: 10}}>
+              <View style={{flex: 0.7}}>
+                  <Text style={textStyles.titleMedium}>Personal Information </Text>
+              </View>
+              <View style={{flex: 0.3}}>
+                  <StyledButton
+                    text='Edit'
+                    editButton
+                  />
+              </View>
           </View>
+        </View>
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Name on Facebook
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.facebook_name}
-            </Text>
-          </View>
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Birthday
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.birthday}
+          </Text>
+        </View>
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Email Address
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.email}
-            </Text>
-          </View>
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Active Participant?
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.is_active}
+          </Text>
+        </View>
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Primary Contact Name
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.primary_contact}
-            </Text>
-          </View>
-        
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Primary Contact Phone Number
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.primary_contact_phone}
-            </Text>
-          </View>
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Sex
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.sex}
+          </Text>
+        </View>
+      </View>
+      )
+  }
 
-          <View style={formViewStyles.div_2}>
-            <View style={{flex: 1, flexDirection: 'row', marginTop: 10}}>
+  _renderContactInfo() {
+    return(
+      <View style={viewStyles.outer}>
+        <View style={formViewStyles.div_2}>
+          <View style={{flex: 1, flexDirection: 'row', marginTop: 10}}>
               <View style={{flex: 0.7}}>
-                  <Text style={textStyles.titleMedium}> Extra Information </Text>
+                  <Text style={textStyles.titleMedium}>Contact Information </Text>
               </View>
               <View style={{flex: 0.3}}>
                   <StyledButton
-                    onPress={() => navigate('StudentExtraInfo', {
-                      refreshStudent: this._fetchStudent(this.state.studentId), 
-                      newStudent: false, 
-                      student: this.state.student, 
-                      navbarColor: this.state.navbarColor})}
                     text='Edit'
-                    noPaddingPrimaryButtonSmall
+                    editButton
                   />
               </View>
-            </View>
           </View>
+        </View>
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Notes
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.notes}
-            </Text>
-          </View>
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Address
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.address}
+          </Text>
+        </View>
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Level (Montessori Only)
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.level}
-            </Text>
-          </View>
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Phone Numbers
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.phone} {"\n"}
+          {this.props.student.phone_2}
+          </Text>
+        </View>
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Primary Language 
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.primary_language}
-            </Text>
-          </View>
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Name on Facebook
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.facebook_name}
+          </Text>
+        </View>
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Document Type
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.document_type}
-            </Text>
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Email Address
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.email}
+          </Text>
+        </View>
+
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Primary Contact Name
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.primary_contact}
+          </Text>
+        </View>
+
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Primary Contact Phone Number
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.primary_contact_phone}
+          </Text>
+        </View>
+      </View>
+      )
+  }
+
+  _renderExtraInfo() {
+    return(
+      <View style={viewStyles.outer}>
+        <View style={formViewStyles.div_2}>
+          <View style={{flex: 1, flexDirection: 'row', marginTop: 10}}>
+            <View style={{flex: 0.7}}>
+                <Text style={textStyles.titleMedium}>Extra Information </Text>
+            </View>
+            <View style={{flex: 0.3}}>
+                <StyledButton
+                  text='Edit'
+                  editButton
+                />
+            </View>
           </View>
+        </View>
+
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Notes
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.notes}
+          </Text>
+        </View>
+
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Level (Montessori Only)
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.level}
+          </Text>
+        </View>
+
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Primary Language
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.primary_language}
+          </Text>
+        </View>
+
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Document Type
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.document_type}
+          </Text>
+        </View>
+
+        <View style={formViewStyles.div_2}>
+          <Text style={textStyles.titleSmall}>
+          Participated in DREAM before?
+          </Text>
+          <Text style={textStyles.body}>
+          {this.props.student.past_dream_participant}
+          </Text>
+        </View>
+      </View>
+      )
+  }
+
+  _renderStudent() {
+    const { navigate } = this.props.navigation;
+    if (!this.props.student ) {
+      return;
+    }
+    attendance_stats = this._renderAttendanceStats()
+    personal_info = this._renderPersonalInfo()
+    contact_info = this._renderContactInfo()
+    extra_info = this._renderExtraInfo()
 
-          <View style={formViewStyles.div_2}>
-            <Text style={textStyles.titleSmall}>
-            Participated in DREAM before?
-            </Text>
-            <Text style={textStyles.body}>
-            {this.state.student.past_dream_participant}
-            </Text>
+    return(
+        <View style={{backgroundColor: colors.primaryYellow, marginTop: -200}}>
+          <View style={{backgroundColor: colors.primaryYellow, marginTop: 200, paddingBottom: 24}}>
+            <View style={formViewStyles.div_1}>
+              <View style={formViewStyles.div_2}>
+                <Text style={textStyles.titleLargeLight}>
+                {this.props.student.first_name} {this.props.student.last_name}
+                </Text>
+                <View style={formViewStyles.div_2}>
+                  <Text style={textStyles.bodySmallLight}>{this.props.student.nickname}</Text>
+                </View>
+              </View>
+            </View>
           </View>
 
-        <Button
-          onPress={() => confirmDelete("Are you sure you want to remove this student from the course?", this._deleteEnrollment)}
-          title='Unenroll Student'
-        />
+          <View style={{backgroundColor: colors.backgroundWhite}}>
+            { attendance_stats }
+            { personal_info }
+            { contact_info }
+            { extra_info }
+
+            <View style={{marginTop: 40, marginBottom: 40}}>
+              <StyledButton
+                onPress={() => confirmDelete("Are you sure you want to remove this student from the course?", this._deleteEnrollment)}
+                text='Unenroll Student'
+                secondaryButtonLarge
+              />
+            </View>
+          </View>
       </View>
-    </View>
     );
   }
 
   render() {
     const { navigate } = this.props.navigation;
-    let students;
-    if (this.state.isLoading) {
-      student = (
-        <Image
-          style={commonStyles.icon}
-          source={require('../../icons/spinner.gif')}
-        />
-      )
-    } else {
-      student = this._renderStudent()
-    }
+    student = this._renderStudent()
     return (
       <ScrollView style={formViewStyles.base}>
         { student }
@@ -299,4 +324,34 @@ class StudentProfileScreen extends React.Component {
   }
 }
 
-export default StudentProfileScreen;
+const mapStateToProps = (state, props) => {
+  // Get course and date associated with this attendance screen
+  const course = state.courses.find((course) => course.id === props.navigation.state.params.courseId);
+  console.log('state.courses');
+  console.log(state.courses);
+  console.log('courseID');
+  console.log(props.navigation.state.params.courseId);
+  console.log('course.students');
+  console.log(course.students);
+  const student = course.students.find((student) => student.id === props.navigation.state.params.studentId);
+  return {
+    ...props.navigation.state.params,
+    student: student,
+  };
+}
+
+const viewStyles = StyleSheet.create({
+  outer: {
+    margin: 24,
+    marginBottom: 8
+  },
+})
+
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    unenrollStudent: (studentId, courseId) => dispatch(actions.unenrollStudent(studentId, courseId)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudentProfileScreen);
diff --git a/screens/teachers/TeacherProfileScreen.js b/screens/teachers/TeacherProfileScreen.js
index 5f5fafc..4f8d8f2 100644
--- a/screens/teachers/TeacherProfileScreen.js
+++ b/screens/teachers/TeacherProfileScreen.js
@@ -3,6 +3,7 @@ import { Image, Button, Text, View, ScrollView } from 'react-native';
 
 import { connect } from 'react-redux';
 import actions from '../../actions';
+import I18n from '../../lib/i18n/i18n';
 
 import { colors } from '../../styles/colors';
 import { textStyles } from '../../styles/textStyles';
@@ -42,7 +43,7 @@ class TeacherProfileScreen extends React.Component {
 
           <View style={formViewStyles.div_2}>
             <Text style={textStyles.titleSmall}>
-            Dream ID
+            {I18n.t('dreamid', {locale: this.props.locale})}
             </Text>
             <Text style={textStyles.body}>
             {this.props.teacher.dream_id}
@@ -51,7 +52,7 @@ class TeacherProfileScreen extends React.Component {
 
           <View style={formViewStyles.div_2}>
             <Text style={textStyles.titleSmall}>
-            Email
+            {I18n.t('email', {locale: this.props.locale})}
             </Text>
             <Text style={textStyles.body}>
             {this.props.teacher.email}
@@ -60,16 +61,29 @@ class TeacherProfileScreen extends React.Component {
 
           <View style={[formViewStyles.div_2, {marginBottom: 24}]}>
             <Text style={textStyles.titleSmall}>
-            Phone Number
+            {I18n.t('phonenumber', {locale: this.props.locale})}
             </Text>
             <Text style={textStyles.body}>
             {this.props.teacher.phone}
             </Text>
           </View>
-
+          
+          <View style={[formViewStyles.div_2, {marginBottom: 24}]}>
+            <Text style={textStyles.titleSmall}>
+            {I18n.t('currentlanguage', {locale: this.props.locale})}
+            </Text>
+            <Text style={textStyles.body}>
+            {this.props.locale == "en" ? "English" : "Español"}
+            </Text>
+          </View>
+          <StyledButton
+          onPress={() => this.props.updateLocale(this.props.locale == "en" ? "es" : "en")}
+          text={I18n.t('changelanguage', {locale: this.props.locale})}
+          linkButton
+          />
           <StyledButton
           onPress={this._attemptSignOut.bind(this)}
-          text='Sign Out'
+          text={I18n.t('signout', {locale: this.props.locale})}
           linkButton
           />
 
@@ -115,15 +129,23 @@ const fetchTeacher = (teacher) => {
   }
 }
 
+const updateLocale = (locale) => {
+  return (dispatch) => {
+    dispatch(actions.updateLocale(locale));
+  }
+}
+
 const mapStateToProps = (state) => {
   return {
     teacher: state.teacher,
-    isLoading: state.isLoading.value,
+    isLoading: state.config.isLoading,
+    locale: state.config.locale,
   };
 }
 
 const mapDispatchToProps = (dispatch) => {
   return {
+    updateLocale: (locale) => dispatch(updateLocale(locale)),
     fetchTeacher: (teacher) => dispatch(fetchTeacher(teacher)),
     logout: () => dispatch(actions.logout()),
   }
diff --git a/styles/styles.js b/styles/styles.js
index 939a16a..f8807b7 100644
--- a/styles/styles.js
+++ b/styles/styles.js
@@ -24,7 +24,7 @@ const commonStyles = StyleSheet.create({
     alignSelf: 'center',
   },
   divider: {
-    borderBottomWidth: 1, 
+    borderBottomWidth: 1,
     borderBottomColor: '#E6E6E6'
   }
 });