diff --git a/templates/js/app.js b/templates/js/app.js
index 3a9b514..4511b58 100644
--- a/templates/js/app.js
+++ b/templates/js/app.js
@@ -45,6 +45,10 @@ app.config(['$routeProvider', '$locationProvider',
 			.when('/tasks', {
 				templateUrl: 'templates/views/tasks.html',
 				controller: 'tasksController'
+			})
+			.when('/tasks/new', {
+				templateUrl: 'templates/views/newTask.html',
+				controller: 'newTasksController'
 			});
 	}
 ]);
diff --git a/templates/js/controllers/newTasksController.js b/templates/js/controllers/newTasksController.js
new file mode 100644
index 0000000..3766a2f
--- /dev/null
+++ b/templates/js/controllers/newTasksController.js
@@ -0,0 +1,23 @@
+angular.module('SeHub').controller('newTasksController', ['$scope',
+	function($scope) {
+
+
+
+		$scope.componentTypes = [{
+			"type": "textbox"
+		}, {
+			"type": "textarea"
+		}, {
+			"type": "checkbox"
+		}];
+
+
+
+		$scope.task = [];
+
+		$scope.addComponent = function(){
+			$scope.task.push($scope.newComp);
+			$scope.newComp = {};
+		}
+	}
+]);
\ No newline at end of file
diff --git a/templates/views/index.html b/templates/views/index.html
index f1fef9e..9599164 100644
--- a/templates/views/index.html
+++ b/templates/views/index.html
@@ -100,6 +100,7 @@
 <script src="templates/js/controllers/homeController.js"></script>
 <script src="templates/js/controllers/settingsController.js"></script>
 <script src="templates/js/controllers/registerController.js"></script>
+<script src="templates/js/controllers/newTasksController.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/views/newTask.html b/templates/views/newTask.html
new file mode 100644
index 0000000..434eeca
--- /dev/null
+++ b/templates/views/newTask.html
@@ -0,0 +1,48 @@
+<div layout-padding>
+	<div layout="row">
+	<div flex="20" layout-padding>
+		<h2>
+			<i class="fa fa-info-circle"></i> Task Info: 
+		</h2>
+	</div>
+
+	<div layout="column" flex="30" layout-padding>
+		
+		<div>
+			<h2>
+				<i class="fa fa-cubes"></i> Add A component: 
+			</h2>
+		</div>
+		<div>
+			Select Type:
+			<md-select placeholder="Component Type" ng-model="newComp.type">
+        		<md-option ng-repeat="component in componentTypes" value="{{component.type}}">{{component.type}}</md-option>
+      		</md-select> 
+		</div>
+		<div>
+			<md-input-container>
+				<label>Label</label>
+				<input ng-model="newComp.label" required>
+    		</md-input-container>
+		</div>
+		<div>
+			<md-switch ng-model="newComp.isMandatory" aria-label="Switch 1">
+    			Mandatory?: {{ newComp.isMandatory}}
+  			</md-switch>
+  		</div>
+  		<div layout="row">
+  			<div flex="70"></div>
+  			<md-button class="md-primary" ng-click="addComponent()">Add Component</md-button>
+  		</div>
+
+	</div flex="50" layout-padding>
+		<!-- <md-card style="background-image: url('http://www.stationeryhq.com/content/images/thumbs/0000324_clipboard_500.png')">
+
+		</md-card> -->
+		<h2>
+			<i class="fa fa-eye"></i> Task Preview:
+		</h2>
+		<p>{{task.toString()}}</p>
+	</div>
+
+</div>
\ No newline at end of file
diff --git a/templates/views/settings.html b/templates/views/settings.html
index 8121fb4..c90b019 100644
--- a/templates/views/settings.html
+++ b/templates/views/settings.html
@@ -55,6 +55,10 @@
 						</div>
 					</div>
 					<!-- End Edit Div -->
+					<!-- Chart -->
+					<h4>
+						<i class="fa fa-bar-chart"></i> Statistics: 
+					</h4>
 					<canvas id="bar" class="chart chart-bar" data="data"
   						labels="labels" series="series"></canvas> 
 				</md-card>