diff --git a/templates/js/controllers/tasksController.js b/templates/js/controllers/tasksController.js
index 1642c3b..c40af18 100644
--- a/templates/js/controllers/tasksController.js
+++ b/templates/js/controllers/tasksController.js
@@ -1,32 +1,30 @@
 angular.module('SeHub')
-.controller('tasksController', ['$scope', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope', function ($scope, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService ,$rootScope)
-{
-	$scope.lecturerTasks = [];
-	$rootScope.seToken = $cookies['com.sehub.www'];
-  	var token = $rootScope.seToken;
+	.controller('tasksController', ['$scope', '$cookies', '$cookieStore', '$window', '$location', '$mdToast',
+		'$mdDialog', 'apiService', '$rootScope',
+		function($scope, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService, $rootScope) {
+			$scope.lecturerTasks = [];
+			$rootScope.seToken = $cookies['com.sehub.www'];
+			var token = $rootScope.seToken;
 
-	$scope.createTaskClicked = function()
-	{
-		$location.path("/tasks/new"); // Reference to 'newTask' page
-	}
+			$scope.createTaskClicked = function() {
+				$location.path("/tasks/new"); // Reference to 'newTask' page
+			}
 
-	$scope.displayTasks = function()
-	{
-	    apiService.getAllFutureTasks(token).success(function(data) // Get all Tasks // TODO change to closest TASK
-	    {
-	      $scope.lecturerTasks = data;
-	      console.log(data);
-	    }).error(function(err)
-	    {
-	      console.log(err.message);
-	    });
-	}
-	$scope.gotoTask = function(taskId)
-	{
-		$location.path('/tasks/fill/' + taskId);
-	}
+			$scope.displayTasks = function() {
+				apiService.getAllFutureTasks(token).success(function(data) // Get all Tasks // TODO change to closest TASK
+					{
+						$scope.lecturerTasks = data;
+						console.log(data);
+					}).error(function(err) {
+					console.log(err.message);
+				});
+			}
+			$scope.gotoTask = function(taskId) {
+				$location.path('/tasks/fill/' + taskId);
+			}
 
-	$scope.displayTasks(); // Calling tasks with task id
+			$scope.displayTasks(); // Calling tasks with task id
 
 
-}]);
\ No newline at end of file
+		}
+	]);
\ No newline at end of file
diff --git a/templates/views/tasks.html b/templates/views/tasks.html
index a405511..cac0a73 100644
--- a/templates/views/tasks.html
+++ b/templates/views/tasks.html
@@ -1,56 +1,97 @@
-<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 flex>
-				<md-card>
-					<md-content class="md-padding">
-						<md-tabs md-dynamic-height md-border-bottom>
-							<md-tab label="" <i class="fa fa-check"></i>
-								<md-content class = "tabDesign">
-									<table style="width:100%;" border = "1">
-										<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">
-								<md-content class="md-padding">
-									<h1 class="md-display-2">Delayed</h1>
-									<p>Delayed...</p>
-								</md-content>
-							</md-tab>
-							<md-tab label="Not Submitted">
-								<md-content class="md-padding">
-									<md-card ng-repeat = "task in lecturerTasks"> 
-										<md-button ng-click="gotoTask(task.id)">
-											{{task.title}}
-										</md-button>
+<md-content layout-padding>
+	<h1>
+		<i class="fa fa-clipboard"></i> Tasks
+	</h1>
+	<div ng-if='loading'>
+		
+	</div>
 
-									</md-card>
-									
-								</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 ng-if='!loading'>
+		<md-content layout-padding>
+			<md-tabs md-dynamic-height md-border-bottom>
+		      <md-tab label="Class Name">
+		        <md-content class="md-padding">
+		          <h1 class="md-display-2">Class Name Tasks</h1>
+		          
+		          <div>
+						<div layout='row' layout-align="center center">
+							<div class="spacer"></div>
+							<div>
+								<h2>Personal</h2>
 							</div>
-						</md-tabs>
-					</md-content>
-				</md-card>
-			</div>
+							<div class="spacer"></div>
+							<div>
+								<h2>Project</h2>
+							</div>
+							<div class="spacer"></div>
+						</div>
 
-			<!-- Should Be In Table List -->
-			<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;"> -->
-						{{task.title}}
-					</md-button>
-				</div>
-			</div>
-			<!-- Should Be In Table List -->
-		</div>
-	</md-content>
-</div>
\ No newline at end of file
+
+			          	<div layout='row' style="width: 100%">
+			          		<div layout='row' style="width: 100%">
+			          			<div class='Personal' layout='row' flex='50'>
+			          				<div>
+										<h3>Task Name</h3>
+									</div>
+									<div class='spacer'></div>
+									<div>
+										 <h3>
+										 	Submitters
+										 </h3>
+									 </div>
+			          			</div>
+			          			<div style='padding: 0px 5px 0px 5px; margin-top: auto; margin-bottom: auto'>
+			          				|
+			          			</div>
+			          			<div class='Project' layout='row' flex='50'>
+			          				<div>
+										<h3>Task Name</h3>
+									</div>
+									<div class='spacer'></div>
+									<div>
+										 <h3>
+										 	Submitters
+										 </h3>
+									 </div>
+			          			</div>
+			          		</div>
+		          		
+			          	</div>
+
+			          	<div layout='row' style='width:100%'>
+							<div layout='row' style='width:100%'>
+								<div class="Personal" style='width:100%'>
+									<md-button style='width: 100%' layout='row'>
+											<div>
+												Personal Task name
+											</div>
+											<div class='spacer'></div>
+											<div> 3 / 70 </div>
+										</div>
+									</md-button>
+								</div>
+								<div style='padding: 0px 5px 0px 5px; margin-top: auto; margin-bottom: auto'>
+			          				|
+			          			</div>
+								<div class="Project" style='width:100%' >
+									<md-button style='width: 100%' layout='row'>
+											<div>
+												Project Task name
+											</div>
+											<div class='spacer'></div>
+											<div> 3 / 70 </div>
+										</div>
+									</md-button>
+								</div>
+							</div>
+						</div>
+					
+		          	
+		          </div>
+
+		        </md-content>
+		      </md-tab>
+	      </md-tabs>
+		</md-content>
+	</div>
+</md-content>
\ No newline at end of file