diff --git a/templates/js/controllers/projectsController.js b/templates/js/controllers/projectsController.js
index 79171d6..ca55cdc 100644
--- a/templates/js/controllers/projectsController.js
+++ b/templates/js/controllers/projectsController.js
@@ -3,32 +3,37 @@ angular.module('SeHub')
 {
 	var token = $cookies['com.sehub.www'];
 	var classId = $routeParams.classId;
-	$scope.projectEmpty = false;
+	$scope.projectsEmpty = true;
 	$scope.isCreateProjectClicked = false;
 	$scope.submitNewCourseClicked = false;
+	$scope.project = {};
+	$scope.loadingData = true;
+	$scope.isInCourse = false;
 
 	$scope.displayProjects = function()
 	{
 		console.log("in displayProjecs!!! ");
 		apiService.getProjectsByCourse(token, classId).success(function(data) // Get all the campuses
 		{
+			$scope.loadingData = false;
 			$scope.projects = data;
+			if($scope.projects != null && $scope.projects.length > 0)
+			{
+				$scope.projectsEmpty = false;
+			}
 			init(); // Executing the function to initialize projects display
 			console.log("project created! not rly!! " + classId);
 		}).error(function(err)
 		{
 			console.log("Error: " + err);
 		});
-		if($scope.projects = null)
-		{
-			$scope.projectEmpty = true;
-		}
+
 	}
 	$scope.joinCourse = function()
 	{
 		apiService.joinCourse(token, classId).success(function(data)
 		{
-			console.log("Success!!");
+			$scope.isInCourse = true;
       		$mdDialog.show($mdDialog.alert().title('Joined Course').content('You have successfully joined course.')
 	        .ariaLabel('Join course alert dialog').ok('Lets Start!').targetEvent())
 			.then(function() {
@@ -36,7 +41,7 @@ angular.module('SeHub')
 						}); // Pop-up alert
 		}).error(function(err)
 		{
-      		$mdDialog.show($mdDialog.alert().title('Error Joining Course').content('You have failed joined the course.')
+      		$mdDialog.show($mdDialog.alert().title('Error Joining Course').content(err.message + '.')
 	        .ariaLabel('Join course alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
 			// .then(function() {
 			// 				// $location.path('/newCourse'); // TODO TODO TODO
@@ -46,43 +51,43 @@ angular.module('SeHub')
 
 	$scope.createProjectClicked = function()
 	{
-		console.log("project created! is it ?!???! " + classId);
+		// console.log("project created! is it ?!???! " + classId);
 		$scope.isCreateProjectClicked = !$scope.isCreateProjectClicked;
-
-    	var jsonNewProj =
-    	{
-    		'projectName': $scope.project.name,
-    		'courseId': $scope.project.repoOwner,
-    		'gitRepository': $scope.project.gitRepoOwner + '/' + $scope.project.gitRepoName
-    	};
-
-    	if($scope.project.logoUrl)
-    		jsonNewProj.logo_url = $scope.project.logoUrl;
-
-    	if($scope.submitNewCourseClicked)
-	    {
-	    	apiService.create(token, jsonNewProj).success(function(data)
-	    	{
-	      		$mdDialog.show($mdDialog.alert().title('Project Created').content('You have successfully created project.')
-		        .ariaLabel('Project created alert dialog').ok('Great!').targetEvent());
-				// .then(function() {
-				// 				$location.path('/projects/' + classId); // TODO TODO TODO
-				// 			}); // Pop-up alert
-
-	    	}).error(function(err)
-	    	{
-	      		$mdDialog.show($mdDialog.alert().title('Error Creating Project').content('You have failed Creating the project.')
-		        .ariaLabel('Create project alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
-	    	});
-	    }
 	}
 
 	$scope.submitNewProject = function()
 	{
-		$scope.submitNewCourseClicked = true;
-	}
+		// debugger;
+		var intClassId = parseInt(classId);
+		// console.log($scope);
+    	var jsonNewProj =
+		{
+			'projectName': $scope.project.projectName,
+			'courseId': intClassId,
+			'gitRepository': $scope.project.repoOwner + '/' + $scope.project.gitRepoName
+		};
+		console.log(jsonNewProj);
 
-	// $scope.projects = ['AMI', 'LULU', 'XIN Zhau', 'LUMI lu', 'Shimi', 'Azligi zligi', 'Drugs'];
+		if($scope.project.logoUrl)
+    		jsonNewProj.logo_url = $scope.project.logoUrl;
+
+
+    	apiService.create(token, jsonNewProj).success(function(data)
+    	{
+      		$mdDialog.show($mdDialog.alert().title('Project Created').content('You have successfully created project.')
+	        .ariaLabel('Project created alert dialog').ok('Great!').targetEvent());
+			// .then(function() {
+			// 				$location.path('/projects/' + classId); // TODO TODO TODO
+			// 			}); // Pop-up alert
+
+    	}).error(function(err)
+    	{
+    		console.log("Error: " + err.message);
+      		$mdDialog.show($mdDialog.alert().title('Error Creating Project').content('You have failed Creating the project.')
+	        .ariaLabel('Create project alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
+    	});
+    
+	}
 
 	$scope.goToProject = function()
 	{
@@ -95,16 +100,16 @@ angular.module('SeHub')
 		$scope.arrayHolder = [];
 		var tempArr = [];
 		var sizeOfSmallArrays = 3;
-		for (var i = 0 ; i < $scope.courses.length ; i++) {
+		for (var i = 0 ; i < $scope.projects.length ; i++) {
 			if(i % sizeOfSmallArrays !== 0){
-				tempArr.push($scope.courses[i]);
+				tempArr.push($scope.projects[i]);
 			}else{
 				if(i !== 0){
 					$scope.arrayHolder.push(tempArr);
 					tempArr = [];
-					tempArr.push($scope.courses[i]);
+					tempArr.push($scope.projects[i]);
 				}else{
-					tempArr.push($scope.courses[i]);
+					tempArr.push($scope.projects[i]);
 				}
 			}
 		};
@@ -116,31 +121,4 @@ angular.module('SeHub')
 	$scope.displayProjects(); // Displaying all projects related to user
 
 
-	    	
-	    	/*
-	    	var jsonNewCourse =
-	    	{
-	    		'projectName': $scope.course.courseName,
-	    		'courseId': classId,
-	    		'logo_url':
-	    		'gitRepository': 
-	    	};*/
-
-	    		/*
-			{
-		'projectName': 'Advance Math',
-		'courseName': 'JCE',
-		'grade': 98,
-		'logo_url': 'http://location.domain.com/image.jpg',
-		'gitRepository': 'http://location.git.com/somthing',
-		'membersId': ['bob', 'dylan', 'quentin', 'terentino'],
-		'id' : 1234567890
-		} 
-	*/
-
-
-
-
-
-
 }]);
\ No newline at end of file
diff --git a/templates/js/services/apiService.js b/templates/js/services/apiService.js
index 2599f72..6420e60 100644
--- a/templates/js/services/apiService.js
+++ b/templates/js/services/apiService.js
@@ -117,7 +117,7 @@ service.factory('apiService', ['$http', function($http) {
 			return $http(req);
 		},
 		getProjectsByCourse: function(token, classId){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/getProjectsByCourse/" + token + "/" + classId;
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/projects/getProjectsByCourse/" + token + "/" + classId;
 			req = {
 				method : "GET",
 				url : url
diff --git a/templates/views/projects.html b/templates/views/projects.html
index 98323c2..9faa6b1 100644
--- a/templates/views/projects.html
+++ b/templates/views/projects.html
@@ -1,22 +1,28 @@
 <div class = "projects">
-	<h1 style="margin-left:15px"><i class="fa fa-graduation-cap"></i> Class {{course.courseName}}</h1>
-	<div layout-padding layout-margin>
+	<h1 style="margin-left:15px"><i class="fa fa-graduation-cap"></i> Class {{project.title}}</h1>
+	<div layout-paddig layout-margin class="loader" ng-if="loadingData">
+		<md-progress-circular md-mode="indeterminate"></md-progress-circular>
+	</div>
+	<div ng-if = "projectsEmpty && !loadingData" layout-padding layout-margin>
+		You Are Not Related To Any Project.
+	</div>
+	<div ng-if = "!projectsEmpty">
+			<md-card class="cardAllProjects">						
+				<div flex ="99" class = "allProjectsShow" layout = "row" ng-repeat = "t in arrayHolder" value = "{{t}}">
+					<div flex = "32" layout = "column" ng-repeat = "project in t" value = "{{project}}" layout-padding>
+						<md-card layout-padding ng-click = "goToProject(project.id)" style="width:32%; height:32%;" class = "projectCard">
+							{{project.projectName}}
+							<canvas layout-padding layout-margin id="project.projectName" class="chart chart-bar" data="project.info.stats.macro.data"
+							labels="project.info.stats.macro.labels"></canvas> 
+						</md-card>
+					</div>
+				</div>
+			</md-card>
+		</div>
+	</div>
+	<div ng-if="!isInCourse" layout-padding layout-margin>
 		<md-button ng-click = "joinCourse()" ng class = "md-raised md-primary"> Join Course</md-button>
 	</div>
-	<md-card class="cardAllProjects">	
-		<div flex ="99" class = "allProjectsShow" layout = "row" ng-repeat = "t in arrayHolder" value = "{{t}}">
-			<div flex = "32" layout = "column" ng-repeat = "project in t" value = "{{project}}" layout-padding>
-				<div ng-if = "!scope.projectEmpty">
-					<md-card layout-padding ng-click = "goToProject(project.id)" style="width:32%; height:32%;" class = "projectCard">
-						{{project.id}}
-					</md-card>
-				</div>
-			</div>
-			<div ng-if = "projectEmpty">
-					You Are Not Related To Any Course, You May Join Any Course You Wish.
-			</div>
-		</div>
-	</md-card>
 	<md-content layout-padding layout-margin>
 		<md-button ng-click="createProjectClicked()" ng class="md-raised md-primary">Create Project</md-button>
 	</md-content>
@@ -26,7 +32,7 @@
 				<div>
 					<md-input-container>
 						<label flex>Project Name</label>
-						<input  type = "text" ng-model="project.name" min-length="1" required>
+						<input  type = "text" ng-model="project.projectName" required>
 					</md-input-container>
 				</div>
 				<div layout = "row">
@@ -37,7 +43,7 @@
 						</md-input-container>
 					</div>
 					<!-- <div>
-						/
+						<p>/</p>
 					</div> -->
 					<div>
 						<md-input-container flex>