diff --git a/templates/js/controllers/campusesController.js b/templates/js/controllers/campusesController.js
index ead0ef2..9c251a2 100644
--- a/templates/js/controllers/campusesController.js
+++ b/templates/js/controllers/campusesController.js
@@ -7,36 +7,24 @@ angular.module('SeHub')
 
 	var init = function()
 	{
-		var i, j, counter = 0;
-		var newLength = 0;
-		
-		if(($scope.campuses.length % 3) === 0)
-		{
-			newLength = ($scope.campuses.length / 3);
-		}
-		else
-		{
-			newLength = (Math.ceil($scope.campuses.length / 3)); // Rounds number up
-		}
-		
-		console.log("length: " + newLength);
-		$scope.threeSizedArray.length = newLength;
-
-		for(j = 0; j < newLength; j++)	
-		{
-			$scope.threeSizedArray[j] = [3]; // Creating array in size of 3 in each array cell
-		}
-
-		for(i = 0; i < newLength; i++)		
-		{		
-			for(j = 0; j < newLength; j++)
-			{
-				if($scope.campuses[(3*i) + j] != null)
-				{	
-					$scope.threeSizedArray[i][j] = $scope.campuses[(3*i) + j];
+		$scope.threeSizedArray = [];
+		var tempArr = [];
+		var sizeOfSmallArrays = 3;
+		for (var i = 0 ; i < $scope.campuses.length ; i++) {
+			if(i % sizeOfSmallArrays !== 0){
+				tempArr.push($scope.campuses[i]);
+			}else{
+				if(i !== 0){
+					$scope.threeSizedArray.push(tempArr);
+					tempArr = [];
+					tempArr.push($scope.campuses[i]);
+				}else{
+					tempArr.push($scope.campuses[i]);
 				}
-			}	
-		}
+			}
+		};
+
+		$scope.threeSizedArray.push(tempArr);
 		console.log($scope.threeSizedArray); // TODO REMOVE
 	}
 
diff --git a/templates/views/campuses.html b/templates/views/campuses.html
index 66d3654..edb7911 100644
--- a/templates/views/campuses.html
+++ b/templates/views/campuses.html
@@ -5,11 +5,31 @@
 	<md-card class="cardAllCampuses">
 		<div ng-if = "!scope.campusesEmpty">
 			<div class = "allCampusesShow" flex = "99" layout = "row" ng-repeat = "t in threeSizedArray" value = "{{t}}" layout-padding>
-				<div flex = "32" layout = "column" ng-repeat = "campus in t" value = "{{campus}}">
-					<md-button ng-click = "goToCampus(campus.id)" style="width:32%; height:32%;" flex="32" layout-padding class = "md-raised">
-						<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
-						{{campus.title}}
-					</md-button>
+				<div flex = "32" layout = "column" ng-repeat = "campus in t" value = "{{campus}}" >
+					<div ng-if="t.length != 1"> 
+						<md-button ng-click = "goToCampus(campus.id)" style="width:100%; height:32%;" layout-padding class = "md-raised" >
+							<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
+							<md-card style="width:97%;height:97%">
+						      <img ng-src="{{campus.avatar_url}}" class="md-card-image" alt="Washed Out">
+						      <md-card-content>
+						        <h2 class="md-title">{{campus.title}}</h2>
+						      </md-card-content>
+	    					</md-card>
+						</md-button>
+					</div>
+				
+					<div ng-if="t.length == 1">
+						<md-button ng-click = "goToCampus(campus.id)" style="width:32%; height:32%;" layout-padding class = "md-raised" >
+							<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
+							<md-card style="width:97%;height:97%">
+						      <img ng-src="{{campus.avatar_url}}" class="md-card-image" alt="Washed Out">
+						      <md-card-content>
+						        <h2 class="md-title">{{campus.title}}</h2>
+						      </md-card-content>
+	    					</md-card>
+						</md-button>
+					</div>
+					<div class="spacer"></div>
 				</div>
 			</div>
 		</div>