diff --git a/templates/css/theme.css b/templates/css/theme.css
index 92d6805..051785b 100644
--- a/templates/css/theme.css
+++ b/templates/css/theme.css
@@ -2,10 +2,10 @@
 
 body{
   font-family: "Alef Hebrew",
-               “Helvetica Neue”,
-               Helvetica,
-               Arial,
-               sans-serif;
+  “Helvetica Neue”,
+  Helvetica,
+  Arial,
+  sans-serif;
 }
 
 .menuBtn {
@@ -144,10 +144,10 @@ body.noscroll
   }
 
 
-.createCampus
-{
-  position:relative;
-}
+  .createCampus
+  {
+    position:relative;
+  }
 
 
 /*div.img campusAvatar
@@ -247,4 +247,63 @@ body.noscroll
   .se-menu ul a{
     text-decoration: none !important;
     color: #7f7f7f;
-  }
\ No newline at end of file
+  }
+
+/*Settings Style*/
+
+  .settingList .settingListItem:hover{
+    background-color: #E2E2E2;
+    font-weight: bold;
+  }
+
+  .settingList .settingListItemRoot{
+    list-style: none;
+    padding: 0;
+    padding-left: 0;
+  }
+
+  .settingList .settingListItem{
+    width: 100%;
+    padding: 15px 0px auto 15px;
+  }
+
+
+/*End Settings*/
+
+
+  /*md Effects*/
+
+.md-avatar{
+    width: 40px;
+    height: 40px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    margin-right: 16px;
+    border-radius: 50%;
+    box-sizing: content-box;
+  }
+
+
+  md-list-item .md-no-style.md-button, md-list-item.md-no-proxy.md-button {
+  font-size: inherit;
+  height: inherit;
+  text-align: left;
+  text-transform: none;
+  width: 100%;
+  white-space: normal;
+}
+
+md-list-item, md-list-item .md-list-item-inner {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 48px;
+}
+
+/*End Effects for MD*/
\ No newline at end of file
diff --git a/templates/js/controllers/settingsController.js b/templates/js/controllers/settingsController.js
index b13edc8..81a4a98 100644
--- a/templates/js/controllers/settingsController.js
+++ b/templates/js/controllers/settingsController.js
@@ -1,57 +1,78 @@
 angular.module('SeHub')
-	.controller('settingsController', ['$scope', '$rootScope', 'dataService','apiService', '$cookies', '$location', 
-		function($scope, $rootScope, dataService ,apiService, $cookies, $location) {
+	.controller('settingsController', ['$scope', '$rootScope', 'dataService', 'apiService', '$cookies', '$location',
+		function($scope, $rootScope, dataService, apiService, $cookies, $location) {
 
-		var token = $cookies['com.sehub.www'];
+			var token = $cookies['com.sehub.www'];
 
-		$scope.loadingData = true;
-		$scope.isInRegisterMode = false;
+			$scope.loadingData = true;
+			$scope.isInRegisterMode = false;
 
-		$scope.title = "Settings"
+			$scope.title = "Settings"
 
-		apiService.getUserByToken(token).success(function(data) {
-			if (data.message == 'No User Found') {
-				console.error("No User Found!");
-			}
-			$scope.loadingData = false;
-			$scope.user = data;
-			console.log(data);
-			if ($scope.user.isFirstLogin) {
-				$scope.menuObj = {};
-				$scope.isInRegisterMode = true;
+			apiService.getUserByToken(token).success(function(data) {
+				if (data.message == 'No User Found') {
+					console.error("No User Found!");
+				}
 				$scope.loadingData = false;
-				$location.path('/register')
+				$scope.user = data;
+				console.log(data);
+				if ($scope.user.isFirstLogin) {
+					$scope.menuObj = {};
+					$scope.isInRegisterMode = true;
+					$scope.loadingData = false;
+					$location.path('/register')
+				}
+
+			});
+
+			$scope.isEditMode = false;
+			$scope.profileMode = "Edit Profile";
+			$scope.profileModeIcon = "fa fa-pencil";
+
+			$scope.changeProfileMode = function() {
+				$scope.isEditMode = !$scope.isEditMode;
+				if ($scope.isEditMode) {
+					$scope.profileMode = "Save Profile";
+					$scope.profileModeIcon = "fa fa-floppy-o";
+				} else {
+					dataService.userBrodcast($scope.user);
+					$scope.profileMode = "Edit Profile";
+					$scope.profileModeIcon = "fa fa-pencil";
+				}
 			}
 
-		});
+			/**
+			 * DEBUG DATA
+			 */
+			$scope.courses = [{
+				"courseName": "Advance Math",
+				"campusName": "JCE",
+				"startDate": {
+					"year": 2015,
+					"month": 4,
+					"day": 3
+				},
+				"endDate": {
+					"year": 2016,
+					"month": 5,
+					"day": 14
+				},
+				"taskFlag": false,
+				"campus_avatar": "https://yt3.ggpht.com/--ZkWxybWGOM/AAAAAAAAAAI/AAAAAAAAAAA/_nAICC_kzzI/s88-c-k-no/photo.jpg"
+			}];
+
+			$scope.campuses = [{
+				'title': 'JCE',
+				'email_ending': '@post.jce.ac.il',
+				'master_user_id': 123453433341,
+				'avatar_url': 'https://yt3.ggpht.com/--ZkWxybWGOM/AAAAAAAAAAI/AAAAAAAAAAA/_nAICC_kzzI/s88-c-k-no/photo.jpg'
+			}, {
+				'title': 'Stanford',
+				'email_ending': '@post.jce.ac.il',
+				'master_user_id': 123453433341,
+				'avatar_url': 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR9M4uQgaJP1zyiCGw-dK31hU8buWqeuOi9vTXBd4Y8hQcFTZqA'
+			}];
 
-		$scope.isEditMode = false;
-		$scope.profileMode = "Edit Profile";
-		$scope.profileModeIcon = "fa fa-pencil";
 
-		$scope.changeProfileMode = function() {
-			$scope.isEditMode = !$scope.isEditMode;
-			if ($scope.isEditMode) {
-				$scope.profileMode = "Save Profile";
-				$scope.profileModeIcon = "fa fa-floppy-o";
-			} else {
-				dataService.userBrodcast($scope.user);
-				$scope.profileMode = "Edit Profile";
-				$scope.profileModeIcon = "fa fa-pencil";
-			}
 		}
-
-		// {
-		// name: ";"
-		// isLecturer: false
-		// email: "sagidayan@gmail.com"
-		// username: "sagidayan"
-		// seToken: "76cd4178-94dd-4cb4-b464-111d2239e567"
-		// isFirstLogin: true
-		// campuses_id_list: [0]
-		// classes_id_list: [0]
-		// avatar_url: "https://avatars.githubusercontent.com/u/2984053?v=3"
-		// }
-
-
-	}]);
\ No newline at end of file
+	]);
\ No newline at end of file
diff --git a/templates/views/settings.html b/templates/views/settings.html
index 70c88f7..7f07403 100644
--- a/templates/views/settings.html
+++ b/templates/views/settings.html
@@ -9,6 +9,7 @@
 			<div>
 				<md-card layout-padding>
 					<div id="profile" layout="column">
+					<!-- User Profile Box -->
 						<div class="user-box" layout="row">
 							<div>
 								<img ng-src="{{user.avatar_url}}" alt="" style="width:20%">
@@ -20,6 +21,7 @@
 							</div>
 						</div>
 					</div>
+					<!-- Start View Profile -->
 					<div layout="column" ng-if="!isEditMode">
 						<div>
 							<h2>{{user.name}}</h2>
@@ -31,7 +33,7 @@
 							I Am a: {{(user.isLecturer) ? "Lecturer" : "Student"}}
 						</div>
 					</div>
-
+					<!-- End View Profile -->
 					<!-- Starting Edit Mode Div -->
 					<div layout="column" ng-if="isEditMode">
 						<div>
@@ -52,8 +54,57 @@
   							</md-switch>
 						</div>
 					</div>
+					<!-- End Edit Div -->
 				</md-card>
 			</div>
+			<!-- Campuses & Classes Div -->
+			<div flex>
+				<md-card layout-padding>
+					<h3><i class="fa fa-graduation-cap"></i> My Classes</h3>
+					<div class="settingList">
+						<div class="settingListRoot">
+	                        <div ng-repeat="course in courses" class="settingListItem" layout="row">
+	                        	<div>
+                            		<img alt="{{ person.name }}" ng-src="{{ course.campus_avatar }}" class="md-avatar" />
+	                        	</div>
+                            	<div class="port_spacer">
+					    			{{ course.courseName }} - <strong>IN</strong> {{course.campusName}}
+                            	</div>
+					    		<div class="spacer"></div>
+					    		<div>
+						    		<md-button class="">
+						    		X
+						    		</md-button>
+					    		</div>
+	                            <md-divider ng-if="!$last"></md-divider>
+	                        </div>
+	                    </div>
+					</div>
+
+					<h3><i class="fa fa-university"></i> My Campuses</h3>
+
+					<div class="settingList">
+						<div class="settingListRoot">
+	                        <div ng-repeat="campus in campuses" class="settingListItem" layout="row">
+	                        	<div>
+                            		<img alt="{{ person.name }}" ng-src="{{ campus.avatar_url }}" class="md-avatar" />
+	                        	</div>
+                            	<div class="port_spacer">
+					    			{{ campus.title }} - 
+                            	</div>
+					    		<div class="spacer"></div>
+					    		<div>
+						    		<md-button class="">
+						    		X
+						    		</md-button>
+					    		</div>
+	                            <md-divider ng-if="!$last"></md-divider>
+	                        </div>
+	                    </div>
+					</div>
+				</md-card>
+			</div>
+			<!-- End Campuses & Classes Div -->
 		</div>
 		</md-card>