diff --git a/templates/js/app.js b/templates/js/app.js
index 4940008..5f4777f 100644
--- a/templates/js/app.js
+++ b/templates/js/app.js
@@ -48,6 +48,14 @@ app.config(['$routeProvider', '$locationProvider',
 				templateUrl: 'templates/views/newTask.html',
 				controller: 'newTasksController'
 			})
+			.when('/tasks/overview/:taskId/:submitterId', {
+				templateUrl: 'templates/views/task.html',
+				controller: 'taskController'
+			})
+			.when('/tasks/fill/:taskId', {
+				templateUrl: 'templates/views/task.html',
+				controller: 'taskController'
+			})
 			.when('/class/:classId/:className', {
 				templateUrl: 'templates/views/class.html',
 				controller: 'classController'
diff --git a/templates/js/controllers/taskController.js b/templates/js/controllers/taskController.js
new file mode 100644
index 0000000..bf45630
--- /dev/null
+++ b/templates/js/controllers/taskController.js
@@ -0,0 +1,101 @@
+angular.module('SeHub')
+	.controller('taskController', ['$scope', '$rootScope', 'dataService', 'apiService',
+		'$cookies', '$location', '$routeParams',
+		function($scope, $rootScope, dataService, apiService, $cookies, $location, $routeParams) {
+
+			var taskId = $routeParams.taskId;
+			var submitterId = $routeParams.submitterId;
+
+
+			if (submitterId) { //In This Case we Only Want to show The Content of the Submitter
+				$scope.readOnly = true;
+			} else { //In This Case We Need An Empty Task To Be Able To Fill It
+				$scope.readOnly = false;
+			}
+
+			$scope.dateInit = function(date){
+				d = moment(new Date(date.year, date.month - 1, date.day));
+				$scope.task.date = d.format("d MMMM YYYY");
+			}
+
+
+			$scope.dueTime = function() {
+				if (!$scope.task.date || $scope.task.date === '')
+					$scope.dueTimeFromNow = "";
+				var d = new Date($scope.task.date);
+				$scope.dueTimeFromNow = moment(d).fromNow();
+			}
+
+			$scope.initLinkComp = function(component) {
+				var arr = component.label.split("|");
+				for (var i = 0; i < arr.length - 1; i++) {
+					if (i == 0)
+						component.title = arr[i];
+					else
+						component.href = arr[i];
+				};
+			}
+
+			$scope.initRadioButtonsComp = function(component) {
+				var arr = component.label.split("|");
+				component.values = [];
+				for (var i = 0; i < arr.length - 1; i++) {
+					if (i == 0)
+						component.title = arr[i];
+					else
+						component.values.push({
+							text: arr[i],
+							id: i
+						});
+				};
+			}
+
+
+
+			/*=================================
+			=            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.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>');
+			}
+			$scope.descriptionInit($scope.task.description);
+			$scope.dueTimeFromNow = moment(d).fromNow();
+		}
+
+		}
+	]); //End Controller
\ No newline at end of file
diff --git a/templates/views/index.html b/templates/views/index.html
index 0196f52..9c1d9bd 100644
--- a/templates/views/index.html
+++ b/templates/views/index.html
@@ -112,6 +112,7 @@
 <script src="templates/js/controllers/profileController.js"></script>
 <script src="templates/js/controllers/registerController.js"></script>
 <script src="templates/js/controllers/tasksController.js"></script>
+<script src="templates/js/controllers/taskController.js"></script>
 <script src="templates/js/controllers/myClassesController.js"></script>
 <script src="templates/js/controllers/newTasksController.js"></script>
 <script src="templates/js/controllers/classController.js"></script>
diff --git a/templates/views/task.html b/templates/views/task.html
new file mode 100644
index 0000000..d987f25
--- /dev/null
+++ b/templates/views/task.html
@@ -0,0 +1,61 @@
+<div>
+	<div class="spacer"></div>
+	
+	<div layout="coulumn" flex="80">
+		<md-card layout-padding style="width:100%">
+			<h3><i class="fa fa-clipboard"></i> {{task.title}}</h3>
+			<h4>Due At: {{ task.date }}</h4>
+			<p>{{ dueTimeFromNow }}</p>
+			<p ng-bind-html-unsafe="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">
+						<font color="red">
+							<i class="fa fa-certificate"></i>
+						</font>
+					</div>
+					<!-- if text box -->
+					<div ng-if="component.type == 'textbox'">
+						<md-input-container>
+							<label>{{component.label}}</label>
+							<input ng-model="component.value">
+	    				</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>
+	    				</md-input-container>
+					</div>
+					<!-- if Checkbox -->
+					<div ng-if="component.type == 'checkbox'">
+						<md-checkbox ng-model="component.value" aria-label="Checkbox 1">
+				          {{ 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}}
+						</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-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>
+		</md-card>
+	</div>
+	<div class="spacer"></div>
+
+
+</div>
\ No newline at end of file