diff --git a/app/app.js b/app/app.js
index 47eeeec..7d55173 100644
--- a/app/app.js
+++ b/app/app.js
@@ -2,7 +2,7 @@
 
 // Defining Angular app model with all other dependent modules
 var flo = angular.module('flo',['ngRoute', 'datePicker',
-	'flo.home','flo.about','flo.login', 'config']);
+	'flo.home','flo.about','flo.login', 'flo.events', 'config']);
 
 flo.config(function($routeProvider, $locationProvider, $httpProvider) {
 
diff --git a/app/components/controllers/EventsController.js b/app/components/controllers/EventsController.js
new file mode 100644
index 0000000..b4c3b56
--- /dev/null
+++ b/app/components/controllers/EventsController.js
@@ -0,0 +1,75 @@
+'use strict';
+
+angular.module('flo.events', ['ngRoute', 'datePicker'])
+
+// Routing configuration for this module
+.config(['$routeProvider',function($routeprovider){
+	$routeprovider.when('/events', {
+		controller: 'EventsController',
+		templateUrl: 'components/views/eventsView.html'
+	});
+}])
+
+// Controller definition for this module
+.controller('EventsController',['$scope', '$log', 'clientId', function($scope, $log, clientId) {
+
+//do we want to replicate the code in the LoginController for creating events
+//or do we want to put it in the same controller with a different condition?
+
+
+	$scope.dates = {
+		minDate: moment.tz().hour(12).startOf('h'), //12:00 User Timezone, today.
+		maxDate: moment.tz().add(5, 'd').hour(12).startOf('h'), //12:00 User Timezone, in five days.
+	};
+	$scope.options = {
+		view: 'date',
+		format: 'lll',
+		maxView: false
+		// ,
+		// minView: 'hours',
+	};
+
+	$scope.formats = [
+		 "MMMM YYYY",
+		 "DD MMM YYYY",
+		 "ddd MMM DD YYYY",
+		 // "D MMM YYYY HH:mm",
+		 "lll",
+	];
+
+	$scope.views = ['year', 'month', 'date'
+	// , 
+	// 'hours', 'minutes'
+	];
+	
+	$scope.callbackState = 'Callback: Not fired';
+
+	$scope.changeDate = function (modelName, newDate) {
+		console.log(modelName + ' has had a date change. New value is ' + newDate.format());
+		$scope.callbackState = 'Callback: Fired';
+	}
+
+	$scope.changeData = function (type) {
+		var values = {},
+				pickersToUpdate = ['pickerRange'];
+		switch (type) {
+			case 'view':
+				values.view = $scope.options.view;
+				break;
+			case 'minView':
+				values.minView = $scope.options.minView;
+				break;
+			case 'maxView':
+				values.maxView = $scope.options.maxView;
+				break;
+			case 'format':
+				values.format = $scope.options.format;
+				break;
+		}
+		if (values) {
+			$scope.$broadcast('pickerUpdate', pickersToUpdate, values);
+		}
+	}
+
+
+}]);
\ No newline at end of file
diff --git a/app/components/controllers/LoginController.js b/app/components/controllers/LoginController.js
index bfad113..41bb55f 100644
--- a/app/components/controllers/LoginController.js
+++ b/app/components/controllers/LoginController.js
@@ -46,14 +46,12 @@ angular.module('flo.login', ['ngRoute', 'datePicker'])
               $.each( resp.items, function( key, value ) {
                   // console.log(resp.items[key].id);
               });
+					request.execute(function(resp) {
+						var flo = resp.items.filter(function(item) {
+							return item.summary === 'Flo';
+						})
 
-
-							request.execute(function(resp) {
-									var flo = resp.items.filter(function(item) {
-										return item.summary === 'Flo';
-									})
-
-									console.log('flo', flo);
+						console.log('flo', flo);
 	            });
           });
           var request1 = gapi.client.calendar.events.list({
@@ -150,6 +148,7 @@ angular.module('flo.login', ['ngRoute', 'datePicker'])
 	];
 
 	$scope.views = ['year', 'month', 'date', 'hours', 'minutes'];
+	
 	$scope.callbackState = 'Callback: Not fired';
 
 	$scope.changeDate = function (modelName, newDate) {
diff --git a/app/components/views/eventsView.html b/app/components/views/eventsView.html
new file mode 100644
index 0000000..fd52faf
--- /dev/null
+++ b/app/components/views/eventsView.html
@@ -0,0 +1,18 @@
+<div ng-controller="EventsController">
+	<div class="container">
+
+	<form role="form" class="form-signin" style="padding-bottom: 40px;">
+		<h4 class="text-center">What's the average length of your period (days)?</h4>
+		<input type="text" class="form-control" placeholder="Ex: 5">
+	</form>
+
+	<br />
+
+	<form class="text-center"> 
+		<h4>What was the first day of your last period?</h4>
+		<div date-picker></div>
+	</form>
+
+
+	</div>
+</div>
\ No newline at end of file
diff --git a/app/components/views/loginView.html b/app/components/views/loginView.html
index acdf654..c8866f8 100644
--- a/app/components/views/loginView.html
+++ b/app/components/views/loginView.html
@@ -5,7 +5,6 @@
 		<form class="form-signin" role="form">
 			<h2 class="text-center">Login</h2>
 			<br/>
-
 			<button id="authorize-button" class="btn btn-lg btn-block" style="background-color: #00CD00; color: white; border-color: #00CD00; margin-bottom: 20px;" ng-click="handleAuthClick()">
 				Authorize
 			</button>
@@ -15,12 +14,17 @@ <h2 class="text-center">Login</h2>
 			<button id="event-button" class="btn btn-lg btn-block"
 					style="background-color: #00CD00; color: white; border-color: #00CD00; margin-top: 20px;"
 					ng-click="createEvent()">
-			CREATE EVENT
+			Add Flo
 			</button>
 
-<!-- 			<div class="event"></div>
- -->		</form>
+			<a id="reminder-button" 
+					class="btn btn-lg btn-block"
+					style="background-color: #00CD00; color: white; border-color: #00CD00; margin-top: 20px;"
+					href="#events">
+			Add Reminders
+			</a>
 
+		</form>
 	</div>
 
 </div>
diff --git a/app/index.html b/app/index.html
index 3125d6a..06c002d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -45,6 +45,7 @@
   <script src="components/controllers/AboutController.js"></script>
   <script src="components/controllers/HomeController.js"></script>
   <script src="components/controllers/LoginController.js"></script>
+  <script src="components/controllers/EventsController.js"></script>
   <!-- endbuild -->
 </head>
 
@@ -66,9 +67,11 @@
     </div>
     <div class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
-        <li class="active"><a href="#/" style="color: white;">Home<span class="sr-only">(current)</span></a></li>
-        <li><a href="#/aboutView" style="color: white;">About</a></li>
-        <li><a href="#/loginView" style="color: white;">Login</a></li>
+        <li class="active"><a href="#/" style="color: white;">Home<span class="sr-only">(current)</span></a>
+        </li>
+        <li><a href="#/about" style="color: white;">About</a></li>
+        <li><a href="#/login" style="color: white;">Login</a></li>
+        <li><a href="#/events" style="color: white;">Reminders</a></li>
       </ul>
     </div>
   </nav>
diff --git a/app/resources/css/app.css b/app/resources/css/app.css
index e7ab03d..000b8ca 100644
--- a/app/resources/css/app.css
+++ b/app/resources/css/app.css
@@ -49,3 +49,4 @@ input{
   float: right;
   height: 10px;
 }
+