diff --git a/templates/js/controllers/taskController.js b/templates/js/controllers/taskController.js
index 04f8e80..3619d56 100644
--- a/templates/js/controllers/taskController.js
+++ b/templates/js/controllers/taskController.js
@@ -8,11 +8,27 @@ angular.module('SeHub')
 			var submitterId = $routeParams.submitterId;
 			var token = $cookies['com.sehub.www'];
 			var groupId = $routeParams.gId;
+			var user = $scope.$parent.user;
 			$scope.loading = true;
+			$scope.isMaster = false;
 
 			apiService.getTaskById(token, taskId, groupId).success(function(data) {
+				if(!data.grade.grade)
+					data.grade.grade = 0;
 				$scope.task = data;
 				$scope.dateInit($scope.task.dueDate);
+				apiService.getCourseById(token, data.courseId).success(function(data) {
+					$scope.isMaster = (user.id === data.master_id);
+				});
+				if (!data.isPersonal) {
+					apiService.getProjectsById(token, groupId).sucsess(function(data) {
+						$scope.group = data;
+					});
+				} else {
+					apiService.getUserById(token, groupId).success(function(data) {
+						$scope.group = data;
+					});
+				}
 				$scope.loading = false;
 			}).error(function(err) {
 				$location.path('/tasks');
@@ -23,7 +39,6 @@ angular.module('SeHub')
 
 			} else { //In This Case We Need An Empty Task To Be Able To Fill It
 				$scope.readOnly = false;
-				apiService.getTaskById(token, taskId, groupId);
 			}
 
 			$scope.dateInit = function(date) {
@@ -82,63 +97,52 @@ angular.module('SeHub')
 							.ok('GoTo My Submitted Task')
 							.targetEvent(event)
 
-						).then(function(){
-								if($scope.task.isPersonal)
-									$location.path('/tasks/overview/'+taskId+'/'+groupId+'/'+groupId);
-								else
-									$location.path('/tasks/overview/'+taskId+'/'+groupId+'/'+groupId);
+						).then(function() {
+							$location.path('/tasks/overview/' + taskId + '/' + groupId + '/' + groupId);
 						});
-						return;
+
 					})
 
+				} else {
+
+					$mdDialog.show(
+						$mdDialog.alert()
+						.title('Hey There...')
+						.content('You Must Fill All Mandatory Fields In Order To Submit The Task')
+						.ariaLabel('Not All Mandatory Are Filled')
+						.ok('Got it!')
+						.targetEvent(event)
+					);
 				}
-				$mdDialog.show(
-					$mdDialog.alert()
-					.title('Hey There...')
-					.content('You Must Fill All Mandatory Fields In Order To Submit The Task')
-					.ariaLabel('Not All Mandatory Are Filled')
-					.ok('Got it!')
-					.targetEvent(event)
-				);
 
+			};
+
+			$scope.submitGrade = function(event){
+				apiService.submitGrade(token, taskId, groupId, $scope.task.garde.grade).success(function(data){
+					$mdDialog.show(
+						$mdDialog.alert()
+						.title('Thanks For Grading')
+						.content('The Grade was successfully posted. you can change the grade later if you want')
+						.ariaLabel('Not All Mandatory Are Filled')
+						.ok('Go Back To Tasks')
+						.targetEvent(event)
+					).then(function(){
+						$location.path('/tasks');
+					});
+				}).error(function(err){
+					$mdDialog.show(
+						$mdDialog.alert()
+						.title('Something Happened')
+						.content('something went wrong... Try Again Later')
+						.ariaLabel('Not All Mandatory Are Filled')
+						.ok('No Problem!')
+						.targetEvent(event)
+					);
+				})
 			}
 
 
 
-			/*=================================
-			=            Mock Data            =
-			=================================*/
-
-			// $scope.task = {
-			// 	"title": "task1",
-			// 	"courseId": 1234567890,
-			// 	"description": "one line\nsecondline\nthirdline",
-			// 	"dueDate": {
-			// 		"year": 2010,
-			// 		"month": 2,
-			// 		"day": 4
-			// 	},
-			// 	"isPersonal": true,
-			// 	"components": [{
-			// 		"type": "radiobuttons",
-			// 		"label": "pick One|this|orthis|MaybeThis",
-			// 		"isMandatory": true,
-			// 		"order": 1
-			// 	}, {
-			// 		"type": "checkbox",
-			// 		"label": "tick Me",
-			// 		"isMandatory": true,
-			// 		"order": 2
-			// 	}, {
-			// 		"type": "textarea",
-			// 		"label": "fill shit",
-			// 		"isMandatory": false,
-			// 		"order": 3
-			// 	}]
-			// };
-
-
-
 			$scope.dueTime = function() {
 				if (!$scope.task.date || $scope.task.date === '')
 					$scope.dueTimeFromNow = "";
diff --git a/templates/js/services/apiService.js b/templates/js/services/apiService.js
index 2460da0..c82d25a 100644
--- a/templates/js/services/apiService.js
+++ b/templates/js/services/apiService.js
@@ -271,6 +271,14 @@ service.factory('apiService', ['$http', function($http) {
 				url: url
 			};
 			return $http(req);
+		},
+		submitGrade: function(token, taskId, ownerId, grade){
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/tasks/submitGrade/" + token + '/' + taskId + '/' + ownerId + '/' + grade;
+			req = {
+				method: 'POST',
+				url: url
+			};
+			return $http(req);
 		}
 	};
 }]);
\ No newline at end of file
diff --git a/templates/views/task.html b/templates/views/task.html
index b682860..eccf7af 100644
--- a/templates/views/task.html
+++ b/templates/views/task.html
@@ -1,8 +1,45 @@
 <div ng-if='loading' class='center_all'>
 	<md-progress-circular md-mode="indeterminate"></md-progress-circular>
 </div>
+
+
+<div ng-if="readOnly && !loading">
+	<md-card style='position:fixed;top:11%;right:15px;width:20%'  layout-padding>
+		<h1>Submitter</h1>
+		<div layout="row">
+			<div flex="30"> <!-- Avatar -->
+	            <img ng-src="{{group.avatar_url}}" alt="" style="max-width:auto;padding:5px" ng-if='task.isPersonal'>
+	            <img ng-src="{{group.logo_url}}" alt="" style="max-width:auto;padding:5px" ng-if='!task.isPersonal'>
+	        </div>
+	        <div class="user-data" layout="column" flex>
+	            <div ng-if='task.isPersonal'>
+	                Student Name: {{group.name}}
+	            </div>
+	            <div ng-if='!task.isPersonal'>
+	                Project Name: {{group.projectName}}
+	            </div>
+	            <div>
+	            	Grade : {{task.garde.grade}}
+	            </div>
+	            <div>
+	            	<md-slider flex class="md-primary" md-discrete ng-model="task.garde.grade" step="1" min="1" max="100" aria-label="rating" ng-disabled="!isMaster">
+	      			</md-slider>
+	            </div>
+	            <div layout="row" ng-if='isMaster'>
+	            	<div class="spacer"></div>
+	            	<div>
+	            		<md-button ng-click='submitGrade($event)'>Submit</md-button>
+	            	</div>
+	            </div>
+	        </div>
+		</div>
+        
+
+    </md-card>
+</div>
+
 <div layout='row' ng-if='!loading'>
-	<div flex='20'></div>
+	<div flex='10'></div>
 	<div layout="coulumn" flex="60">
 		<md-card layout-padding style="width:100%">
 			<h1><i class="fa fa-clipboard"></i> {{task.title}}</h1>