diff --git a/templates/js/controllers/taskController.js b/templates/js/controllers/taskController.js
index bf45630..4133f05 100644
--- a/templates/js/controllers/taskController.js
+++ b/templates/js/controllers/taskController.js
@@ -1,7 +1,8 @@
 angular.module('SeHub')
 	.controller('taskController', ['$scope', '$rootScope', 'dataService', 'apiService',
-		'$cookies', '$location', '$routeParams',
-		function($scope, $rootScope, dataService, apiService, $cookies, $location, $routeParams) {
+		'$cookies', '$location', '$routeParams', '$mdDialog',
+
+		function($scope, $rootScope, dataService, apiService, $cookies, $location, $routeParams, $mdDialog) {
 
 			var taskId = $routeParams.taskId;
 			var submitterId = $routeParams.submitterId;
@@ -13,7 +14,7 @@ angular.module('SeHub')
 				$scope.readOnly = false;
 			}
 
-			$scope.dateInit = function(date){
+			$scope.dateInit = function(date) {
 				d = moment(new Date(date.year, date.month - 1, date.day));
 				$scope.task.date = d.format("d MMMM YYYY");
 			}
@@ -50,6 +51,30 @@ angular.module('SeHub')
 				};
 			}
 
+			function validateComponents() {
+				for (var i = 0; i < $scope.task.components.length; i++) {
+					if ($scope.task.components[i].isMandatory && (!$scope.task.components[i].value || $scope.task.components[i].value == ''))
+						return false;
+				}
+				return true;
+			}
+
+			$scope.submitTask = function(event) { //Dialog will pop-up if not all mandatory fields are filled
+				if (validateComponents()) {
+					alert('All Shit Are Filled');
+					return;
+				}
+				$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)
+				);
+
+			}
+
 
 
 			/*=================================
@@ -87,15 +112,15 @@ angular.module('SeHub')
 			$scope.dateInit($scope.task.dueDate);
 
 			$scope.dueTime = function() {
-			if (!$scope.task.date || $scope.task.date === '')
-				$scope.dueTimeFromNow = "";
-			var d = new Date($scope.task.date);
-			$scope.descriptionInit = function(desc){
-				desc.replace('\n', '<br>');
+				if (!$scope.task.date || $scope.task.date === '')
+					$scope.dueTimeFromNow = "";
+				var d = new Date($scope.task.date);
+				$scope.descriptionInit = function(desc) {
+					desc.replace('\n', '<br>');
+				}
+				$scope.descriptionInit($scope.task.description);
+				$scope.dueTimeFromNow = moment(d).fromNow();
 			}
-			$scope.descriptionInit($scope.task.description);
-			$scope.dueTimeFromNow = moment(d).fromNow();
-		}
 
 		}
 	]); //End Controller
\ No newline at end of file
diff --git a/templates/views/newTask.html b/templates/views/newTask.html
index e9ae941..0a7a855 100644
--- a/templates/views/newTask.html
+++ b/templates/views/newTask.html
@@ -87,7 +87,7 @@
 			<h3><i class="fa fa-clipboard"></i> {{task.task.title}}</h3>
 			<h4>Due At: {{ task.date }}</h4>
 			<p>{{ dueTimeFromNow }}</p>
-			<p>{{task.task.description}}</p>
+			<p style="white-space: pre-wrap;">{{task.task.description}}</p>
 			<p>{{(task.isPersonal) ? "Personal" : "Project"}} Task</p>
 
 			<md-divider ng-if="!$last"></md-divider>
diff --git a/templates/views/task.html b/templates/views/task.html
index d987f25..760a2fb 100644
--- a/templates/views/task.html
+++ b/templates/views/task.html
@@ -1,19 +1,18 @@
-<div>
-	<div class="spacer"></div>
-	
-	<div layout="coulumn" flex="80">
+<div layout='row'>
+	<div flex='20'></div>
+	<div layout="coulumn" flex="60">
 		<md-card layout-padding style="width:100%">
-			<h3><i class="fa fa-clipboard"></i> {{task.title}}</h3>
+			<h1><i class="fa fa-clipboard"></i> {{task.title}}</h1>
 			<h4>Due At: {{ task.date }}</h4>
 			<p>{{ dueTimeFromNow }}</p>
-			<p ng-bind-html-unsafe="task.description"></p>
+			<p style="white-space: pre-wrap;">{{task.description}}</p>
 			<p>{{(task.isPersonal) ? "Personal" : "Project"}} Task</p>
 
 			<!-- <md-divider></md-divider> -->
 
 			<div ng-repeat="component in task.components">
 				<md-card layout-padding>
-					<div ng-if="conponent.isMandatory">
+					<div ng-if="component.isMandatory && !(component.value && component.value != '')">
 						<font color="red">
 							<i class="fa fa-certificate"></i>
 						</font>
@@ -22,40 +21,49 @@
 					<div ng-if="component.type == 'textbox'">
 						<md-input-container>
 							<label>{{component.label}}</label>
-							<input ng-model="component.value">
+							<input ng-model="component.value" ng-disabled="readOnly">
 	    				</md-input-container>
 					</div>
 					<!-- if Text Area -->
 					<div ng-if="component.type == 'textarea'">
 						<md-input-container>
 							<label>{{component.label}}</label>
-							<textarea ng-model="component.value"></textarea>
+							<textarea ng-model="component.value" ng-disabled="readOnly"></textarea>
 	    				</md-input-container>
 					</div>
 					<!-- if Checkbox -->
 					<div ng-if="component.type == 'checkbox'">
-						<md-checkbox ng-model="component.value" aria-label="Checkbox 1">
+						<md-checkbox ng-model="component.value" aria-label="Checkbox 1" ng-disabled="readOnly">
 				          {{ component.label}}
 				        </md-checkbox>
 					</div>
 					<!-- if Link -->
 					<div ng-if="component.type == 'link'" layout="column" ng-init="initLinkComp(component)" style="width: 100%" layout-align="center">
 						<md-button ng-href="{{component.href}}" style="width: 100%" target="_blank">
-						<i class="fa fa-link"></i> {{component.title}}
+							<i class="fa fa-link"></i> {{component.title}}
 						</md-button>
 					</div>
 					<!-- if RadioButtons -->
 					<div ng-if="component.type == 'radiobuttons'" ng-init="initRadioButtonsComp(component)">
 						{{component.title}}
-						<md-radio-group ng-model="component.value" ng-change="RB(component)">
+						<md-radio-group ng-model="component.value" ng-change="RB(component)" ng-disabled="readOnly">
 					      <md-radio-button ng-repeat="option in component.values" value="{{option.text}}" class="md-primary">{{option.text}}</md-radio-button>
 	    				</md-radio-group>
 					</div>
 				</md-card>
 			</div>
+			<div layout='row' ng-if='!readOnly'>
+				<div class='spacer'></div>
+				<div style='position:relative;'>
+					<md-button class='md-primary' ng-click='submitTask($event)'>Submit</md-button>	
+				</div>	
+			</div>
 		</md-card>
 	</div>
-	<div class="spacer"></div>
+
+	<div flex='20'></div>
 
 
-</div>
\ No newline at end of file
+</div>
+
+		
\ No newline at end of file