diff --git a/templates/css/theme.css b/templates/css/theme.css
index d0cb499..7653ec7 100644
--- a/templates/css/theme.css
+++ b/templates/css/theme.css
@@ -151,33 +151,6 @@ body.noscroll
   /*width: 100%;*/
 }
 
-/*.hvr-curl-top-left {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
-}*/
-
-/* Grow Rotate */
-/*.campusCard {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}*/
 .campusCard:hover, .campusCard:focus, .campusCard:active {
   -webkit-transform: rotate(4deg);
   transform: rotate(4deg);
@@ -220,186 +193,172 @@ body.noscroll
   -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
 }
 
-/*.dropDown /* TODO *
+.allCampusesShow
 {
-  border-bottom: 2px black solid;
-  border-top: 2px black solid;
-  border-left: 2px black solid;
-  border-right: 2px black solid;
-  border-radius: 1px black solid;
-  }*/
-
-  .allCampusesShow
-  {
-    overflow:hidden;
-    background-size: auto;
-    
-  }
-  .campusCard
-  {
-    /*height:80%;*/
-    /*width:80%;*/
-  }
+  overflow:hidden;
+  background-size: auto;
+  
+}
 
 .gray-font-no-animation
-  {
-    color: #7f7f7f;
-    font-size: 300%;
-    text-shadow:#e0e0e0 1px 1px 0;
-    
-  }
+{
+  color: #7f7f7f;
+  font-size: 300%;
+  text-shadow:#e0e0e0 1px 1px 0;
+  
+}
 
-  .gray-font
-  {
-    color: #7f7f7f;
-    font-size: 300%;
-    text-shadow:#e0e0e0 1px 1px 0;
-    opacity: 0;
-    -webkit-animation-duration: 8s; 
-    animation-duration: 8s; 
-    -webkit-animation-fill-mode: both; 
-    animation-fill-mode: both; 
-    overflow: hidden;
-    height: 100%;
+.gray-font
+{
+  color: #7f7f7f;
+  font-size: 300%;
+  text-shadow:#e0e0e0 1px 1px 0;
+  opacity: 0;
+  -webkit-animation-duration: 8s; 
+  animation-duration: 8s; 
+  -webkit-animation-fill-mode: both; 
+  animation-fill-mode: both; 
+  overflow: hidden;
+  height: 100%;
+} 
+
+@-webkit-keyframes fadeOutUp { 
+  0% { 
+    opacity: 1; 
+    -webkit-transform: translateY(0); 
   } 
-
-  @-webkit-keyframes fadeOutUp { 
-    0% { 
-      opacity: 1; 
-      -webkit-transform: translateY(0); 
-    } 
-    100% { 
-      opacity: 0; 
-      -webkit-transform: translateY(-200px); 
-      /*-webkit-transform: scale(0,0); */
-      height: 0px;
-    } 
+  100% { 
+    opacity: 0; 
+    -webkit-transform: translateY(-200px); 
+    /*-webkit-transform: scale(0,0); */
+    height: 0px;
   } 
-  @keyframes fadeOutUp { 
-    0% { 
-      opacity: 1; 
-      transform: translateY(0); 
-    } 
-    100% { 
-      opacity: 0; 
-      transform: translateY(-200px); 
-      /*transform: scale(0,0); */
-      height: 0px;
-    } 
+} 
+@keyframes fadeOutUp { 
+  0% { 
+    opacity: 1; 
+    transform: translateY(0); 
   } 
-  .fadeOutUp { 
-    -webkit-animation-name: fadeOutUp; 
-    animation-name: fadeOutUp; 
-  }
+  100% { 
+    opacity: 0; 
+    transform: translateY(-200px); 
+    /*transform: scale(0,0); */
+    height: 0px;
+  } 
+} 
+.fadeOutUp { 
+  -webkit-animation-name: fadeOutUp; 
+  animation-name: fadeOutUp; 
+}
 
-  .user-pane-menu{
-    width: 100%;
-    height: 15%;
-    background-color: #3F51B5;
-    -webkit-box-shadow: 0px 13px 34px -14px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 13px 34px -14px rgba(0,0,0,0.75);
-    box-shadow: 0px 13px 34px -14px rgba(0,0,0,0.75);
-    top: 20px;
-    position: relative;
-  }
+.user-pane-menu{
+  width: 100%;
+  height: 15%;
+  background-color: #3F51B5;
+  -webkit-box-shadow: 0px 13px 34px -14px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 13px 34px -14px rgba(0,0,0,0.75);
+  box-shadow: 0px 13px 34px -14px rgba(0,0,0,0.75);
+  top: 20px;
+  position: relative;
+}
 
-  .user-pane-menu img{
-    border: 7px rgb(255, 255, 255) solid;
-    -webkit-border-radius: 100px;
-    -moz-border-radius: 100px;
-    border-radius: 50px;
-    width: 30%;
-    position: relative;
-    z-index: 50;
-  }
+.user-pane-menu img{
+  border: 7px rgb(255, 255, 255) solid;
+  -webkit-border-radius: 100px;
+  -moz-border-radius: 100px;
+  border-radius: 50px;
+  width: 30%;
+  position: relative;
+  z-index: 50;
+}
 
-  .se-menu{
-    /*margin-top: 20%;  */
-  }
+.se-menu{
+  /*margin-top: 20%;  */
+}
 
-  .se-menu ul{
-    list-style: none;
-    padding: 0;
-    padding-left: 0;
-  }
+.se-menu ul{
+  list-style: none;
+  padding: 0;
+  padding-left: 0;
+}
 
-  .se-menu li{
-    width: 100%;
-    padding: 15px 0px 15px 15px;
-    font-size: 150%;
-  }
+.se-menu li{
+  width: 100%;
+  padding: 15px 0px 15px 15px;
+  font-size: 150%;
+}
 
-  .se-menu li:hover{
-    background-color: #E2E2E2;
-    font-weight: bold;
-    cursor: pointer;
-  }
+.se-menu li:hover{
+  background-color: #E2E2E2;
+  font-weight: bold;
+  cursor: pointer;
+}
 
-  .se-menu li:active{
-    background-color: #B2B2B2;
-    text-shadow:#e0e0e0 1px 1px 0;
-    font-weight: bold;
-  }
+.se-menu li:active{
+  background-color: #B2B2B2;
+  text-shadow:#e0e0e0 1px 1px 0;
+  font-weight: bold;
+}
 
-  .se-menu .selected{
-    background-color: #E2E2E2;
-    text-shadow:#e0e0e0 1px 1px 0;
-    font-weight: bold;
-  }
+.se-menu .selected{
+  background-color: #E2E2E2;
+  text-shadow:#e0e0e0 1px 1px 0;
+  font-weight: bold;
+}
 
-  .user-box{
-    width: 100%
-  }
+.user-box{
+  width: 100%
+}
 
-  .user-box img{
-    width: 100%;
-    border: 4px #7f7f7f solid;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-  }
-  .user-data{
-    margin-top: auto;
-  }
+.user-box img{
+  width: 100%;
+  border: 4px #7f7f7f solid;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.user-data{
+  margin-top: auto;
+}
 
-  .se-menu ul a{
-    text-decoration: none !important;
-    color: #7f7f7f;
-  }
+.se-menu ul a{
+  text-decoration: none !important;
+  color: #7f7f7f;
+}
 
-  /*Settings Style*/
+/*Settings Style*/
 
-  .settingList .settingListItem:hover{
-    background-color: #E2E2E2;
-    font-weight: bold;
-  }
+.settingList .settingListItem:hover{
+  background-color: #E2E2E2;
+  font-weight: bold;
+}
 
-  .settingList .settingListItemRoot{
-    list-style: none;
-    padding: 0;
-    padding-left: 0;
-  }
+.settingList .settingListItemRoot{
+  list-style: none;
+  padding: 0;
+  padding-left: 0;
+}
 
-  .settingList .settingListItem{
-    width: 100%;
-    padding: 15px 0px auto 15px;
-  }
+.settingList .settingListItem{
+  width: 100%;
+  padding: 15px 0px auto 15px;
+}
 
 
-  /*End Settings*/
+/*End Settings*/
 
 
-  /*md Effects*/
+/*md Effects*/
 
-  .md-avatar{
-    width: 40px;
-    height: 40px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-    margin-right: 16px;
-    border-radius: 50%;
-    box-sizing: content-box;
-  }
+.md-avatar{
+  width: 40px;
+  height: 40px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-right: 16px;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
 
 
 /* Colors*/
@@ -467,6 +426,11 @@ body.noscroll
   word-break: break-word;
 }
 
+.tabDesign
+{
+  overflow: scroll;
+}
+
 .tasksContent
 {
   padding-left: 4px;
@@ -492,7 +456,7 @@ p.tasksFeed
 {
   padding-left: 4px;
   margin: 5px;
-  width:340;
+  width:99%;
   height: auto;
   background-color: aliceblue;
  
@@ -501,7 +465,7 @@ p.messagesFeed
 {
   padding-left: 4px;
   margin: 5px;
-  width:690;
+  width:99%;
   height: auto;
   background-color: #f5f5f5;
 }
\ No newline at end of file
diff --git a/templates/js/controllers/campusesController.js b/templates/js/controllers/campusesController.js
index 30f804b..d3d5219 100644
--- a/templates/js/controllers/campusesController.js
+++ b/templates/js/controllers/campusesController.js
@@ -1,6 +1,7 @@
 angular.module('SeHub')
 .controller('campusesController', ['$scope', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope', function($scope, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService, $rootScope)
 {
+	$scope.loadingData = true;
 	$scope.campusesEmpty = false;
 	var token = $cookies['com.sehub.www'];
 	
@@ -34,6 +35,7 @@ angular.module('SeHub')
 	{
 		apiService.getCampusesByUser(token).success(function(data) // Get all the campuses
 		{
+			$scope.loadingData = true;
 			$scope.campuses = data;
 			console.log("INSIDE " + $scope.campuses);
 			init(); // Executing the function to initialize campuses display
diff --git a/templates/js/controllers/homeController.js b/templates/js/controllers/homeController.js
index a1c153f..9bcab36 100644
--- a/templates/js/controllers/homeController.js
+++ b/templates/js/controllers/homeController.js
@@ -34,28 +34,16 @@ angular.module('SeHub')
     console.log("Student Mode!");
   }
 
-  // apiService.getCourseByCampusName(token).success(function(data)
-  // {
-  //   console.log("Campus Name is ON! " + token)
-  //   $scope.course = data;
-  // }).error(function(err)
-  // {
-  //   console.log("Error ===> " + err + " ===> getCourseByCampusName")
-  // });
-
-
   $scope.addMessageClicked = function()
   {
     $scope.addMsg = true; // Reveal the "POST" Button
   }
   $scope.postMessageClicked = function() // Posting the message itself
   {  
-    
-
     if($scope.msg.msgToAdd != null)
     {
       jsonNewMsg = {
-      'courseName': 'A', // TODO Should be ===> $scope.course.courseName
+      'courseName': 'Math', // TODO Should be ===> $scope.course.courseName
       'message': $scope.msg.msgToAdd
       };
 
@@ -80,6 +68,37 @@ angular.module('SeHub')
     $scope.msg.msgToAdd = null;
   }
 
+  $scope.displayTasks = function()
+  {
+    // apiService.getAllFutureTasks(token, courseId).success(function(data) // need to check courseId
+    // {
+
+    // }).error(function(err)
+    // {
+
+    // });
+
+
+  }
+
+  $scope.getCourses = function()
+  {
+    // apiService.getAllCoursesByCampus(token, campusId).success(function(data) // Shows all classes from this campus
+    // {
+    //   $scope.loadingData = false;
+    //   $scope.courses = data;
+    //   console.log("success " + $scope.courses);
+    //   init(); // Executing the function to initialize course display
+    //   if($scope.courses && $scope.courses.length > 0)
+    //   {
+    //     $scope.coursesEmpty = false;
+    //   }
+    // }).error(function(err)
+    // {
+    //   console.log("error: " + err);
+    // }); 
+  }
+
   $scope.clearAllClicked = function() // Clear Screen from text
   {
     $scope.messages = []; 
@@ -97,4 +116,6 @@ angular.module('SeHub')
 
   // animation
   $scope.isEnterd = top.setIsEnterd;
+  $scope.getCourses(); // Get all the courses info
+  $scope.displayTasks(); // Display all tasks in task feed
 }]);
\ No newline at end of file
diff --git a/templates/js/controllers/myClassesController.js b/templates/js/controllers/myClassesController.js
index 9aaca3b..2591b3c 100644
--- a/templates/js/controllers/myClassesController.js
+++ b/templates/js/controllers/myClassesController.js
@@ -131,7 +131,6 @@ angular.module('SeHub')
 			init(); // Executing the function to initialize course display
 			if($scope.courses && $scope.courses.length > 0)
 			{
-				// $scope.coursesEmpty = true;
 				$scope.coursesEmpty = false;
 			}
 		}).error(function(err)
diff --git a/templates/js/controllers/projectController.js b/templates/js/controllers/projectController.js
index 70311cf..d3c3ebd 100644
--- a/templates/js/controllers/projectController.js
+++ b/templates/js/controllers/projectController.js
@@ -26,14 +26,13 @@ angular.module('SeHub')
 		// }); // Pop-up alert
 	};
 
-	$scope.getProfileRoute = function(assigneeName)
+	$scope.getProfileRoute = function(userName)
 	{
 		for(var i = 0; i < $scope.project.members.length; i++)
 		{
-			
-			if(assigneeName === $scope.project.members[i].name)
+			if(userName === $scope.project.members[i].name)
 			{
-				console.log(assigneeName);
+				console.log(userName);
 				console.log($scope.project.members[i].name);
 				return '#/profile/' + $scope.project.members[i].id;
 			}
diff --git a/templates/js/controllers/tasksController.js b/templates/js/controllers/tasksController.js
index 33196f4..cd4c459 100644
--- a/templates/js/controllers/tasksController.js
+++ b/templates/js/controllers/tasksController.js
@@ -3,10 +3,8 @@ angular.module('SeHub')
 {
 	console.log("in controller");
 
-	$scope.createTaskClicked = function(name)
+	$scope.createTaskClicked = function()
 	{
-		var taskName = name;
-		console.log("task created! " + taskName);
 		$location.path("/tasks/new"); // Reference to 'newTask' page
 	}
 
diff --git a/templates/js/services/apiService.js b/templates/js/services/apiService.js
index e3352d3..81d9e7a 100644
--- a/templates/js/services/apiService.js
+++ b/templates/js/services/apiService.js
@@ -13,6 +13,14 @@ service.factory('apiService', ['$http', function($http) {
 			};
 			return $http(req);
 		},
+		getUserById: function(token, id){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/users/getUserById/" + token + "/" + id;
+			req = {
+				method : "GET",
+				url : url
+			};
+			return $http(req);
+		},
 		getAllCampuses: function(token){
 			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/campuses/getAll/" + token;
 			req = {
@@ -21,25 +29,11 @@ service.factory('apiService', ['$http', function($http) {
 			};
 			return $http(req);
 		},
-		sendValidationMail: function(token, email){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/validation/sendmail/" + token;
-			payload = {
-				email: email
-			};
+		getCampusesByUser: function(token){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/campuses/getCampusesByUser/" + token;
 			req = {
-				method: "POST",
-				url: url,
-				data: payload
-			};
-			return $http(req);
-		},
-		updateUser: function(token, payLoad){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/users/updateUser/" + token;
-			
-			req = {
-				method: "PUT",
-				url: url,
-				data: payLoad
+				method : "GET",
+				url : url
 			};
 			return $http(req);
 		},
@@ -48,7 +42,6 @@ service.factory('apiService', ['$http', function($http) {
 			req = {
 				method : "GET",
 				url : url
-
 			};
 			return $http(req);
 		},
@@ -57,7 +50,6 @@ service.factory('apiService', ['$http', function($http) {
 			req = {
 				method : "GET",
 				url : url
-
 			};
 			return $http(req);
 		},
@@ -66,17 +58,6 @@ service.factory('apiService', ['$http', function($http) {
 			req = {
 				method : "GET",
 				url : url
-
-			};
-			return $http(req);
-		},
-		createMessage: function(token, payLoad){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/createMessage/" + token;
-			req = {
-				method : "POST",
-				url : url,
-				data: payLoad
-
 			};
 			return $http(req);
 		},
@@ -85,25 +66,6 @@ service.factory('apiService', ['$http', function($http) {
 			req = {
 				method : "GET",
 				url : url
-
-			};
-			return $http(req);
-		},
-		createCourse: function(token, payLoad){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/create/" + token;
-			req = {
-				method : "POST",
-				url : url,
-				data: payLoad
-			};
-			return $http(req);
-		},
-		getCampusesByUser: function(token){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/campuses/getCampusesByUser/" + token;
-			req = {
-				method : "GET",
-				url : url
-
 			};
 			return $http(req);
 		},
@@ -112,7 +74,6 @@ service.factory('apiService', ['$http', function($http) {
 			req = {
 				method : "GET",
 				url : url
-
 			};
 			return $http(req);
 		},
@@ -121,7 +82,6 @@ service.factory('apiService', ['$http', function($http) {
 			req = {
 				method : "GET",
 				url : url
-
 			};
 			return $http(req);
 		},
@@ -135,16 +95,6 @@ service.factory('apiService', ['$http', function($http) {
 		},
 		getProjectsByUser: function(token){
 			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/projects/getProjectsByUser/" + token;
-			req = {
-				method : "GET",
-				url : url
-
-			};
-			return $http(req);
-		},
-
-		getUserById: function(token, id){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/users/getUserById/" + token + "/" + id;
 			req = {
 				method : "GET",
 				url : url
@@ -156,7 +106,70 @@ service.factory('apiService', ['$http', function($http) {
 			req = {
 				method : "GET",
 				url : url
-
+			};
+			return $http(req);
+		},
+		getCoursesByUserID: function(token, userId){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/getCoursesByUser/" + token + "/" + userId;
+			req = {
+				method : "GET",
+				url : url
+			};
+			return $http(req);
+		},
+		getAllFutureTasks: function(token, courseId){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/tasks/getAllFutureTasks/" + token + "/" + courseId;
+			req = {
+				method : "GET",
+				url : url
+			};
+			return $http(req);
+		},
+		createMessage: function(token, payLoad){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/messages/create/" + token;
+			req = {
+				method : "POST",
+				url : url,
+				data: payLoad
+			};
+			return $http(req);
+		},
+		create: function(token, payLoad){ // createProject
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/projects/create/" + token;
+			req = {
+				method : "POST",
+				url : url,
+				data: payLoad
+			};
+			return $http(req);
+		},
+		createMessage: function(token, payLoad){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/createMessage/" + token;
+			req = {
+				method : "POST",
+				url : url,
+				data: payLoad
+			};
+			return $http(req);
+		},
+		sendValidationMail: function(token, email){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/validation/sendmail/" + token;
+			payload = {
+				email: email
+			};
+			req = {
+				method: "POST",
+				url: url,
+				data: payload
+			};
+			return $http(req);
+		},
+		createCourse: function(token, payLoad){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/create/" + token;
+			req = {
+				method : "POST",
+				url : url,
+				data: payLoad
 			};
 			return $http(req);
 		},
@@ -168,31 +181,14 @@ service.factory('apiService', ['$http', function($http) {
 			};
 			return $http(req);
 		},
-		createMessage: function(token, payLoad){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/create/" + token;
+		updateUser: function(token, payLoad){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/users/updateUser/" + token;
 			req = {
-				method : "POST",
-				url : url,
+				method: "PUT",
+				url: url,
 				data: payLoad
 			};
 			return $http(req);
-		},
-		create: function(token, payLoad){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/projects/create/" + token;
-			req = {
-				method : "POST",
-				url : url,
-				data: payLoad
-			};
-			return $http(req);
-		},
-		getCoursesByUserID: function(token, userId){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/getCoursesByUser/" + token + "/" + userId;
-			req = {
-				method : "GET",
-				url : url
-			};
-			return $http(req);
 		}
 	};
 }]);
\ No newline at end of file
diff --git a/templates/views/campuses.html b/templates/views/campuses.html
index b04f311..c3e680b 100644
--- a/templates/views/campuses.html
+++ b/templates/views/campuses.html
@@ -1,7 +1,5 @@
 <div class = "myCampuses">
-	<md-content layout-padding layout-margin>
-		<h1 layout-margin style="margin-left:15px"><i class="fa fa-university"></i> Pick A Campus</h1>
-	</md-content>
+	<h1 layout-margin style="margin-left:15px"><i class="fa fa-university"></i> Pick A Campus</h1>
 	<md-card class="cardAllCampuses">
 		<div ng-if = "!scope.campusesEmpty">
 			<div flex = "99" layout = "row" ng-repeat = "t in threeSizedArray" value = "{{t}}" layout-padding>
diff --git a/templates/views/class.html b/templates/views/class.html
index d11ceed..0a8d051 100644
--- a/templates/views/class.html
+++ b/templates/views/class.html
@@ -55,7 +55,7 @@
 							</md-input-container>
 						</div>
 						<!-- <div>
-							<p>/</p>
+							<br>/</br>
 						</div> -->
 						<div>
 							<md-input-container flex>
@@ -85,4 +85,7 @@
 			</md-card>
 		</div>
 	</div>
+	<div layout-margin>
+		
+	</div>
 </div>
\ No newline at end of file
diff --git a/templates/views/home.html b/templates/views/home.html
index bec06f6..0737ca4 100644
--- a/templates/views/home.html
+++ b/templates/views/home.html
@@ -88,6 +88,54 @@
 					</md-card>
 				</div>
 			</div>
+			<md-card height="70%">
+				<md-content class="md-padding">
+					<md-tabs md-dynamic-height md-border-bottom>
+						<md-tab label="Messages">
+							<md-content class="md-padding">
+								<div class = "messagesContent"> 
+									<md-card ng-repeat = "msg in messages">
+										<div layout="column">
+											<div layout="row" layout-margin layout-padding>
+												<div flex="10" class="md-avatar">
+													<img ng-src="{{user.avatar_url}}" style="width:100%">
+												</div>
+												<div flex>	
+													<div layout = "column">
+														<div>
+															<b>{{user.name}}</b>
+														</div>
+														<div>
+															class_name
+														</div>
+													</div>
+												</div>
+											</div>
+											<div>
+												<div flex="69" class="msgSent" layout-margin layout-padding>
+													{{msg.text}}
+												</div>
+											</div>	
+										</div>
+									</md-card>
+								</div>
+							</md-content>
+						</md-tab>
+						<md-tab label="one">
+							<md-content class="md-padding">
+								<h1 class="md-display-2">Tab One</h1>
+								One
+							</md-content>
+						</md-tab>
+						<md-tab label="two">
+							<md-content class="md-padding">
+								<h1 class="md-display-2">Tab Two</h1>
+								Two
+							</md-content>
+						</md-tab>
+					</md-tabs>
+				</md-content>
+			</md-card>
 			<div class ="addMessage" layout="row" layout-margin layout padding>
 				<div>
 					<md-button ng-click="addMessageClicked()" ng class="md-raised md-primary"><i class="fa fa-comments"></i></md-button>
diff --git a/templates/views/myClasses.html b/templates/views/myClasses.html
index 885731f..d00caf2 100644
--- a/templates/views/myClasses.html
+++ b/templates/views/myClasses.html
@@ -1,7 +1,7 @@
 <div class = "myClasses">
-	<md-content layout-padding layout-margin>
+	<!-- <md-content layout-padding layout-margin> -->
 		<h1 layout-margin style="margin-left:15px"><i class="fa fa-graduation-cap"></i> My Classes</h1>
-	</md-content>
+	<!-- </md-content> -->
 	<div layout-paddig layout-margin class="loader" ng-if="loadingData">
 		<md-progress-circular md-mode="indeterminate"></md-progress-circular>
 	</div>
diff --git a/templates/views/project.html b/templates/views/project.html
index 91ecb2a..5d10acb 100644
--- a/templates/views/project.html
+++ b/templates/views/project.html
@@ -68,32 +68,37 @@
 								</md-tab>
 								<md-tab label="Commits">
 									<md-content class="md-padding">
-										<h1 class="md-display-2">Commits</h1>
-										<table style="width:100%;" border = "1">
+										<table style="width:100%;" border = "1" class = "tabDesign">
 											<tr>
-												<th>Name</th>
-												<th>Title</th>
-												<th>Url</th>
+												<th>Message</th>
+												<th style = "width:20%;">Date</th>
+												<th style = "width:10%;">Committer</th>
 											</tr>
-											<tr ng-repeat = "member in project.members">
+											<tr ng-repeat = "commit in project.info.commits" layout-margin align = "center">
 												<td>
+													<span ng-repeat = "msg in commit">
+														<a target = "_blank"ng-href="{{commit.html_url}}" 
+														style="text-decoration:none; color:black;">
+															{{msg.message}}
+														</a>
+													</span>
+												</td>
+												<td>
+													<span ng-repeat = "date in commit.author">
+														{{date.date}}
+													</span>
+												</td>
+												<td ng-repeat = "member in project.members">
 													<a ng-href="#/profile/{{member.id}}" style="text-decoration:none; color:black;">
 														{{member.name}}
 													</a>
 												</td>
-												<td>
-													<div ng-repeat = "commit in project.info.info">
-														{{commit.commits_url}}
-													</div>
-												</td>
-												<td></td>
 											</tr>
 										</table>
 									</md-content>
 								</md-tab>
 								<md-tab label="Issues">
 									<md-content class="md-padding" style="overflow:scroll;">
-										<h1 class="md-display-2">Issues</h1>
 										<table style="width:100%;" border = "1">
 											<tr>
 												<th>Title</th>
@@ -127,7 +132,6 @@
 												</td>
 											</tr>
 										</table>
-
 									</md-content>
 								</md-tab>
 								<md-tab label="tasks">
diff --git a/templates/views/tasks.html b/templates/views/tasks.html
index d38e8b4..e68dc9a 100644
--- a/templates/views/tasks.html
+++ b/templates/views/tasks.html
@@ -1,17 +1,22 @@
 <div class = "tasks">
 	<md-content layout-padding layout-margin>
 		<h1 style="margin-left:15px"><i class="fa fa-file-text-o"></i> Tasks</h1>
-		<div ng-if="user.isLecturer">
-			<md-button ng-click="createTaskClicked(taskName)" ng class="md-raised md-primary">Create Task</md-button>
-			
 			<div flex>
 				<md-card>
 					<md-content class="md-padding">
 						<md-tabs md-dynamic-height md-border-bottom>
-							<md-tab label="Submitted">
+							<md-tab label="" <i class="fa fa-check"></i>
 								<md-content class="md-padding">
-									<h1 class="md-display-2">Submitted</h1>
-									<p>Submitted...</p>
+									<table style="width:100%;" border = "1" class = "tabDesign">
+										<tr>
+											<th style = "width:20%">Task Name</th>
+											<th style = "width:20%">Date</th>
+											<th style = "width:20%">Grade</th>
+										</tr>
+									
+
+									</table>
+									
 								</md-content>
 							</md-tab>
 							<md-tab label="Delayed">
@@ -26,23 +31,20 @@
 									<p> Not Submitted ..</p>
 								</md-content>
 							</md-tab>
-							<md-tab label="WhatEver">
-								<md-content class="md-padding">
-									<h1 class="md-display-2">WhatEver</h1>
-									<p>Bla Bla Bla..</p>
-								</md-content>
-							</md-tab>
+							<div ng-if = "user.isLecturer">
+								<md-button ng-click="createTaskClicked()" ng class="md-raised md-primary">Create Task</md-button>
+							</div>
 						</md-tabs>
 					</md-content>
 				</md-card>
 			</div>
 
 			<!-- Should Be In Table List -->
-			<div class = "allProjectsShow" flex = "99" layout = "row" ng-repeat = "t in threeSizedArray" value = "{{t}}" layout-padding>
-				<div flex = "32" layout = "column" ng-repeat = "project in t" value = "{{project}}">
-					<md-button ng-click = "goToProject(project.id)" style="width:32%; height:32%;" flex="32" layout-padding class = "md-raised">
+			<div class = "allTasksShow" flex = "99" layout = "row" ng-repeat = "t in threeSizedArray" value = "{{t}}" layout-padding>
+				<div flex = "32" layout = "column" ng-repeat = "task in t" value = "{{task}}">
+					<md-button ng-click = "goToTask(task.id)" style="width:32%; height:32%;" flex="32" layout-padding class = "md-raised">
 						<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
-						{{project.title}}
+						{{task.title}}
 					</md-button>
 				</div>
 			</div>