diff --git a/web/js/app.js b/web/js/app.js
index c0a190150..a7b98c758 100644
--- a/web/js/app.js
+++ b/web/js/app.js
@@ -83,6 +83,38 @@ ZoneMinder.config(function($stateProvider, $urlRouterProvider) {
 			templateUrl: '/views/monitor.detail.misc.html'
 		})
 
+		///////////////////////////
+		// Zones - Edit and List //
+		///////////////////////////
+		.state('zones', {
+			url: '/zones/{mid:[0-9]{1,4}}',
+			templateUrl: '/views/zones.html',
+			resolve: {
+				mid: function($stateParams) {
+					return {  value: $stateParams.mid };
+				},
+				zones: function(Zones, $stateParams) {
+					return Zones.getZones($stateParams.mid);
+				}
+			},
+			controller: function($scope, mid, zones) {
+				$scope.mid = mid.value;
+				$scope.zones = zones.data.zones;
+			}
+		})
+		.state('zones.edit', {
+			url: '/edit/{zid:[0-9]{1,4}}',
+			templateUrl: '/views/zones.edit.html',
+			resolve: {
+				zone: function(Zones, $stateParams) {
+					return Zones.getZone($stateParams.zid);
+				}
+			},
+			controller: function($scope, zone) {
+				$scope.zone = zone.data.zone.Zone;
+			}
+		})
+
 
 		.state('events', {
 			url: '/events',
@@ -242,6 +274,20 @@ ZoneMinder.factory('Config', function($http) {
 	};
 });
 
+ZoneMinder.factory('Zones', function($http) {
+	return {
+		getZones: function(mid) {
+			return $http.get('/api/zones/forMonitor/'+mid+'.json')
+		},
+		getZone: function(zid) {
+			return $http.get('/api/zones/'+zid+'.json')
+		},
+		createZoneImage: function(mid) {
+			return $http.post('/api/zones/createZoneImage/'+mid+'.json');
+		}
+	};
+});
+
 ZoneMinder.directive('angularHtmlBind', function($compile) {
     return function(scope, elm, attrs) {
         scope.$watch(attrs.angularHtmlBind, function(newValue, oldValue) {
diff --git a/web/js/controllers.js b/web/js/controllers.js
index 8f0b07bf8..41d45f71a 100644
--- a/web/js/controllers.js
+++ b/web/js/controllers.js
@@ -426,3 +426,6 @@ ZoneMinder.controller('HostController', function($scope, Host) {
 	});
 
 });
+
+ZoneMinder.controller('ZonesController', function($scope, Zones) {
+});
diff --git a/web/views/monitor.list.html b/web/views/monitor.list.html
index 0ad6be0d4..aa60e8702 100644
--- a/web/views/monitor.list.html
+++ b/web/views/monitor.list.html
@@ -50,7 +50,8 @@
 
 	<div class="row" ng-hide="grid">
 		<div class="col-md-12">
-			<table class="table table-striped">
+			<div class="table-responsive">
+			<table class="table table-striped table-condensed">
 				<tr>
 					<th>Id</th>
 					<th>Name</th>
@@ -77,7 +78,9 @@
 					</td>
 					<td ng-bind="monitor.Type"></td>
 					<td ng-bind="monitor.Enabled"></td>
-					<td ng-bind="monitor.Zones"></td>
+					<td>
+						<a ui-sref="zones({mid:monitor.Id})">Edit</a>
+					</td>
 					<td><button type="button" class="btn btn-danger btn-sm" ng-click="delete($index)">{{ monitor.deleteText }}</button></td>
 				</tr>
 				<tfoot>
@@ -86,7 +89,7 @@
 					</tr>
 				</tfoot>
 			</table>
-
+			</div>
 		</div>
 	</div>
 </div> <!-- end ng-hide fresh -->
diff --git a/web/views/zones.edit.html b/web/views/zones.edit.html
new file mode 100644
index 000000000..e6a97fe07
--- /dev/null
+++ b/web/views/zones.edit.html
@@ -0,0 +1,127 @@
+<div class="container-fluid">
+<div class="row">
+
+<div class="col-md-5">
+<form class="form-horizontal">
+	<div class="form-group">
+		<label class="col-sm-3 control-label" for="Name">Name</label>
+		<div class="col-sm-8"> <input class="form-control" ng-model="zone.Name" id="Name" type="text" required> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label" for="Type">Type</label>
+		<div class="col-sm-8">
+			<select class="form-control" ng-model="zone.Type" id="Type">
+				<option value="Active">Active</option>
+				<option value="Inclusive">Inclusive</option>
+				<option value="Exclusive">Exclusive</option>
+				<option value="Preclusive">Preclusive</option>
+				<option value="Inactive">Inactive</option>
+			</select>
+		</div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label" for="presetSelector">Preset</label>
+		<div class="col-sm-8">
+			<select class="form-control" ng-model="zone.presetSelector" id="presetSelector">
+				<option value="1">Default</option>
+				<option value="2">Fast, low sensitivity</option>
+				<option value="3">Fast, medium sensitivity</option>
+				<option value="4">Fast, high sensitivity</option>
+				<option value="5">Best, low sensitivity</option>
+				<option value="6">Best, medium sensitivity</option>
+				<option value="7">Best, high sensitivity</option>
+			</select>
+		</div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label" for="Units">Units</label>
+		<div class="col-sm-8">
+			<select class="form-control" ng-model="zone.Units" id="Units">
+				<option value="Pixels">Pixels</option>
+				<option value="Percent">Percent</option>
+			</select>
+		</div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Alarm Colour (Red/Green/Blue)</label>
+		<div class="col-sm-2"> <input class="form-control" ng-model="zone.newAlarmRgbR" type="text"> </div>
+		<div class="col-sm-2"> <input class="form-control" ng-model="zone.newAlarmRgbG" type="text"> </div>
+		<div class="col-sm-2"> <input class="form-control" ng-model="zone.newAlarmRgbB" type="text"> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label" for="CheckMethod">Alarm Check Method</label>
+		<div class="col-sm-8">
+			<select class="form-control" ng-model="zone.CheckMethod" id="CheckMethod">
+				<option value="AlarmedPixels">AlarmedPixels</option>
+				<option value="FilteredPixels">FilteredPixels</option>
+				<option value="Blobs">Blobs</option>
+			</select>
+		</div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Min/Max Pixel Threshold (0-255)</label>
+		<div class="col-sm-2"> <input class="form-control" ng-model="zone.MinPixelThreshold" type="text"> </div>
+		<div class="col-sm-2"> <input class="form-control" ng-model="zone.MaxPixelThreshold" type="text"> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Filter Width/Height (pixels)</label>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.FilterX" type="text"> </div>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.FilterY" type="text"> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Zone Area</label>
+		<div class="col-sm-2"> <input class="form-control" ng-model="zone.TempArea" type="text" disabled> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Min/Max Alarmed Area</label>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.MinAlarmPixels" type="text"> </div>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.MaxAlarmPixels" type="text"> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Min/Max Filtered Area</label>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.MinFilterPixels" type="text"> </div>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.MaxFilterPixels" type="text"> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Min/Max Blob Area</label>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.MinBlobPixels" type="text"> </div>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.MaxBlobPixels" type="text"> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Min/Max Blobs</label>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.MinBlobs" type="text"> </div>
+		<div class="col-sm-2"><input class="form-control" ng-model="zone.MaxBlobs" type="text"> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Overload Frame Ignore Count</label>
+		<div class="col-sm-2"> <input class="form-control" ng-model="zone.OverloadFrames" type="text"> </div>
+	</div>
+	
+	<div class="form-group">
+		<label class="col-sm-3 control-label">Extend Alarm Frame Count</label>
+		<div class="col-sm-2"> <input class="form-control" disabled="" ng-model="zone.ExtendAlarmFrames" type="text"> </div>
+	</div>
+</form>
+</div> <!-- End .col-md-5 -->
+
+<div class="col-md-7">
+<div class="well center-block">
+	<img class="img-responsive" ng-src="/images/Zones{{ zone.MonitorId }}.jpg" alt="Zone Image" />
+</div>
+</div> <!-- End .col-md-6 -->
+
+</div> <!-- End .row -->
+</div> <!-- End .container-fluid -->
diff --git a/web/views/zones.html b/web/views/zones.html
new file mode 100644
index 000000000..9c3fd8f70
--- /dev/null
+++ b/web/views/zones.html
@@ -0,0 +1,19 @@
+<table class="table-responsive">
+<table class="table table-striped table-condensed">
+	<tr>
+		<th>Name</th>
+		<th>Type</th>
+		<th>Area</th>
+		<th>Delete</th>
+	</tr>
+	<tr ng-repeat="zone in zones">
+		<td><a ui-sref="zones.edit({zid:zone.Zone.Id})">{{ zone.Zone.Name }}</a></td>
+		<td>{{ zone.Zone.Type }}</td>
+		<td>{{ zone.Zone.Area }}</td>
+		<td><button type="button" class="btn btn-sm btn-danger">Delete</button></td>
+	</tr>
+
+</table>
+</div>
+
+<div ui-view></div>