diff --git a/templates/js/app.js b/templates/js/app.js
index 87c3eaa..af0d3eb 100644
--- a/templates/js/app.js
+++ b/templates/js/app.js
@@ -68,7 +68,7 @@ app.config(['$routeProvider', '$locationProvider',
 			})
 			.when('/myProjects', {
 				templateUrl: 'templates/views/myProjects.html',
-				controller: 'thisProjectController'
+				controller: 'myProjectsController'
 			});
 	}
 ]);
diff --git a/templates/js/controllers/myProjectsController.js b/templates/js/controllers/myProjectsController.js
index 941ea67..994bf4f 100644
--- a/templates/js/controllers/myProjectsController.js
+++ b/templates/js/controllers/myProjectsController.js
@@ -1,12 +1,11 @@
 angular.module('SeHub')
-.controller('thisProjectController', ['$scope', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope', function ($scope, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService ,$rootScope)
+.controller('myProjectsController', ['$scope', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope', function ($scope, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService ,$rootScope)
 {
 	$scope.isEditPressed = false;
 	$scope.myProjectsEmpty = false;
 	var token = $cookies['com.sehub.www'];
 
-
-
+	$scope.user = $scope.$parent.user;
 
 	$scope.displayMyProjects = function()
 	{
@@ -20,7 +19,7 @@ angular.module('SeHub')
 		});
 		if($scope.myProjects === null)
 		{
-			myProjectsEmpty = true;
+			$scope.myProjectsEmpty = true;
 		}
 	}
 
@@ -32,37 +31,23 @@ angular.module('SeHub')
 
 	var init = function()
 	{
-		var i, j, counter = 0;
-		var newLength = 0;
-		
-		if(($scope.projects.length % 3) === 0)
-		{
-			newLength = ($scope.projects.length / 3);
-		}
-		else
-		{
-			newLength = (Math.ceil($scope.projects.length / 3)); // Rounds number up
-		}
-		
-		console.log("length: " + newLength);
-		$scope.arrayHolder.length = newLength;
-
-		for(j = 0; j < newLength; j++)	
-		{
-			$scope.arrayHolder[j] = [3]; // Creating array in size of 3 in each array cell
-		}
-
-		for(i = 0; i < newLength; i++)		
-		{		
-			for(j = 0; j < newLength; j++)
-			{
-				if($scope.projects[(3*i) + j] != null)
-				{	
-					$scope.arrayHolder[i][j] = $scope.projects[(3*i) + j];
+		$scope.arrayHolder = [];
+		var tempArr = [];
+		var sizeOfSmallArrays = 3;
+		for (var i = 0 ; i < $scope.projects.length ; i++) {
+			if(i % sizeOfSmallArrays !== 0){
+				tempArr.push($scope.projects[i]);
+			}else{
+				if(i !== 0){
+					$scope.arrayHolder.push(tempArr);
+					tempArr = [];
+					tempArr.push($scope.projects[i]);
+				}else{
+					tempArr.push($scope.projects[i]);
 				}
-			}	
-		}
-		console.log($scope.arrayHolder);
+			}
+		};
+		$scope.arrayHolder.push(tempArr);
 	}
 
 	$scope.editPressed = function()
diff --git a/templates/js/controllers/projectsController.js b/templates/js/controllers/projectsController.js
index 5e43593..6e51f77 100644
--- a/templates/js/controllers/projectsController.js
+++ b/templates/js/controllers/projectsController.js
@@ -2,7 +2,7 @@ angular.module('SeHub')
 .controller('projectsController', ['$scope', '$routeParams', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope', function ($scope, $routeParams, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService ,$rootScope)
 {
 	var token = $cookies['com.sehub.www'];
-	var classId = $routeParams.id;
+	var classId = $routeParams.classId;
 	$scope.projectEmpty = false;
 
 	$scope.displayProjects = function()
@@ -22,12 +22,30 @@ angular.module('SeHub')
 			$scope.projectEmpty = true;
 		}
 	}
-
-	$scope.displayProjects(); // Displaying all projects related to user
+	$scope.joinCourse = function()
+	{
+		apiService.joinCourse(token, classId).success(function(data)
+		{
+			console.log("Success!!");
+      		$mdDialog.show($mdDialog.alert().title('Joined Course').content('You have successfully joined course.')
+	        .ariaLabel('Join course alert dialog').ok('Lets Start!').targetEvent())
+			.then(function() {
+							$location.path('/projects/' + classId); // TODO TODO TODO
+						}); // Pop-up alert
+		}).error(function(err)
+		{
+      		$mdDialog.show($mdDialog.alert().title('Error Joining Course').content('You have failed joined the course.')
+	        .ariaLabel('Join course alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
+			// .then(function() {
+			// 				// $location.path('/newCourse'); // TODO TODO TODO
+			// 			}); 
+		});
+	}
 
 	$scope.createProjectClicked = function()
 	{
 		console.log("project created! not rly!! " + classId);
+		
 		// $window.location.href = 'http://localhost:8080/home#/tasks/new'; // Reference to 'newTask' page
 	}
 
@@ -61,13 +79,16 @@ angular.module('SeHub')
 	}
 
 
+	// Running...
+	$scope.displayProjects(); // Displaying all projects related to user
+
 
 	    	
 	    	/*
 	    	var jsonNewCourse =
 	    	{
-	    		'courseName': $scope.course.courseName,
-	    		'campusName': $scope.course.campusName,
+	    		'projectName': $scope.course.courseName,
+	    		'courseId': classId,
 	    		'startDate': {
 	    			'year' : $scope.course.startDate.getFullYear(),
 	    			'day' : $scope.course.startDate.getDate(),
diff --git a/templates/js/services/apiService.js b/templates/js/services/apiService.js
index d94388f..53e676c 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/getProjectByCourse/" + token + "/" + classId;
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/getProjectsByCourse/" + token + "/" + classId;
 			req = {
 				method : "GET",
 				url : url
@@ -126,7 +126,7 @@ service.factory('apiService', ['$http', function($http) {
 			return $http(req);
 		},
 		getProjectsByUser: function(token){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/getProjectByCourse/" + token;
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/projects/getProjectsByUser/" + token;
 			req = {
 				method : "GET",
 				url : url
@@ -153,7 +153,7 @@ service.factory('apiService', ['$http', function($http) {
 			return $http(req);
 		},
 		joinCourse: function(token, courseId){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/users/getUserById/" + token + "/" + courseId;
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/joinCourse/" + token + "/" + courseId;
 			req = {
 				method : "PUT",
 				url : url
@@ -168,6 +168,15 @@ service.factory('apiService', ['$http', function($http) {
 				data: payLoad
 			};
 			return $http(req);
+		},
+		createProject: 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);
 		}
 	};
 }]);
\ No newline at end of file
diff --git a/templates/views/myProjects.html b/templates/views/myProjects.html
index 1632013..806c69c 100644
--- a/templates/views/myProjects.html
+++ b/templates/views/myProjects.html
@@ -1,8 +1,38 @@
 <div class = "myProjects">
 	<md-content layout-padding layout-margin>
-		<h1 layout-margin style="margin-left:15px"><i class="fa fa-graduation-cap"></i> {{user.name}}'s projects</h1>
+		<h1 layout-margin style="margin-left:15px"><i class="fa fa-cube"></i> {{user.name}}'s projects</h1>
 		<md-card class="cardAllProjects">	
-			<div flex ="99" class = "allProjectsShow" layout = "row" ng-repeat = "t in arrayHolder" value = "{{t}}">
+			<div flex = "99" layout = "row" ng-repeat = "t in holdArrays" value = "{{t}}" layout-padding>
+				<div flex = "32" layout = "column" ng-repeat = "project in t" value = "{{project}}" >
+					<div ng-if = "!scope.myProjectsEmpty">
+						<div ng-if="t.length != 1"> 
+							<md-button ng-click = "goToMyProjects(project.id)" style="width:100%; height:32%;" layout-padding class = "md-raised" >
+								<md-card style="width:97%;height:97%">
+									<md-card-content>
+										<h2 class="md-title">{{project.id}}</h2>
+									</md-card-content>
+		    					</md-card>
+							</md-button>
+						</div>
+						<div ng-if="t.length == 1">
+							<md-button ng-click = "goToMyProjects(project.id)" style="width:32%; height:32%;" layout-padding class = "md-raised" >
+								<md-card style="width:97%;height:97%">
+					      			<md-card-content>
+							        	<h2 class="md-title">{{project.id}}</h2>
+					      			</md-card-content>
+		    					</md-card>
+							</md-button>
+						</div>
+					</div>
+					<div class="spacer"></div>
+					<div ng-if = "scope.myProjectsEmpty">
+						You Do Not Have Any Project, You May Create One.
+					</div>
+				</div>
+			</div>
+
+
+<!-- 			<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.myProjectsEmpty">
 						<md-card layout-padding ng-click = "goToMyProject(project.id)" style="width:32%; height:32%;" class = "projectCard">
@@ -13,7 +43,9 @@
 				<div ng-if = "scope.myProjectsEmpty">
 						You Do Not Have Any Project, You May Create One.
 				</div>
-			</div>
+			</div> -->
+
+
 		</md-card>
 	</md-content>
 </div>
diff --git a/templates/views/projects.html b/templates/views/projects.html
index dd163fd..823f80f 100644
--- a/templates/views/projects.html
+++ b/templates/views/projects.html
@@ -1,5 +1,8 @@
 <div class = "projects">
-	<h1 style="margin-left:15px"><i class="fa fa-cube"></i> Projects</h1>
+	<h1 style="margin-left:15px"><i class="fa fa-graduation-cap"></i> Class {{course.courseName}}</h1>
+	<div layout-padding layout-margin>
+		<md-button ng-click = "joinCourse()" ng class = "md-raised"> 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>