diff --git a/web/skins/bootstrap/js/app.js b/web/skins/bootstrap/js/app.js
index f01f943e7..dac90f048 100644
--- a/web/skins/bootstrap/js/app.js
+++ b/web/skins/bootstrap/js/app.js
@@ -78,6 +78,9 @@ ZoneMinder.factory('Event', function($http) {
 	return {
 		getEvent: function(eventId) {
 			return $http.get('/api/events/'+ eventId +'.json');
+		},
+		delete: function(eventId) {
+			return $http.delete('/api/events/'+ eventId + '.json');
 		}
 	};
 });
diff --git a/web/skins/bootstrap/js/controllers.js b/web/skins/bootstrap/js/controllers.js
index a629e0618..4e5b046e1 100644
--- a/web/skins/bootstrap/js/controllers.js
+++ b/web/skins/bootstrap/js/controllers.js
@@ -23,13 +23,19 @@ ZoneMinder.controller('LogController', function($scope, Log) {
 	});
 });
 
-ZoneMinder.controller('EventsController', function($scope, Events) {
+ZoneMinder.controller('EventsController', function($scope, Events, $modal) {
+	// First thing, get page 1 of the events.
 	getEventsPage(1);
 
+	// If the page is changed, get the new page of events
 	$scope.pageChanged = function(newPage) {
 		getEventsPage(newPage);
 	};
 
+	// Call Events.get and pass it the page number
+	// Set the appropriate scope values with the results.
+	// The events.php file takes over and iterates over events
+	// and the painator uses totalEvents and eventPerPage
 	function getEventsPage(pageNumber) {
 		Events.get(pageNumber).then(function(results) {
 			$scope.events = results.data.events;
@@ -37,11 +43,28 @@ ZoneMinder.controller('EventsController', function($scope, Events) {
 			$scope.eventsPerPage = results.data.pagination.limit;
 		});
 	}
+
+	// This is called when a user clicks on an event.
+	// It fires up a modal and passes it the EventId of the clicked event
+	// EventController takes over from there.
+	$scope.displayEvent = function (eventId) {
+		$scope.eventId = eventId;
+
+		var modalInstance = $modal.open({
+			templateUrl: '/?view=event&skin=bootstrap',
+			controller: 'EventController',
+			resolve: { eventId: function () { return $scope.eventId; } }
+		});
+
+		modalInstance.result.then(function (selectedItem) {
+			}, function () {
+				console.log('Modal dismissed at: ' + new Date());
+			}
+		);
+	};
 });
 
-ZoneMinder.controller('EventController', function($scope, $location, Event) {
-
-	var eventId = $location.search().eid;
+ZoneMinder.controller('EventController', function($scope, Event, $modalInstance, eventId) {
 
 	Event.getEvent(eventId).then(function(results) {
 		$scope.eventId			= eventId;
@@ -57,9 +80,17 @@ ZoneMinder.controller('EventController', function($scope, $location, Event) {
 		$scope.avgScore				= results.data.event.Event.AvgScore;
 		$scope.maxScore				= results.data.event.Event.MaxScore;
 		$scope.notes				= results.data.event.Event.Notes;
-
-
 	});
+
+	$scope.cancel = function () {
+		$modalInstance.dismiss('cancel');
+	};
+
+	$scope.deleteEvent = function() {
+		Event.delete(eventId).then(function(results) {
+			console.log(results);
+		});
+	};
 });
 
 ZoneMinder.controller('MonitorController', function($scope, $http, $location, Monitor) {
diff --git a/web/skins/bootstrap/views/event.php b/web/skins/bootstrap/views/event.php
index bb9d1f1ed..73e5a5fc4 100644
--- a/web/skins/bootstrap/views/event.php
+++ b/web/skins/bootstrap/views/event.php
@@ -1,224 +1,26 @@
-<?php
-//
-// ZoneMinder web event view file, $Date$, $Revision$
-// Copyright (C) 2001-2008 Philip Coombes
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
-//
+<div class="modal-header">
+	<button type="button" class="close" data-dismiss="modal" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+	<span class="modal-title">Event {{eventId}}</span>
+</div>
 
-if ( !canView( 'Events' ) )
-{
-    $view = "error";
-    return;
-}
+<div class="modal-body">
 
-$eid = validInt( $_REQUEST['eid'] );
-$fid = !empty($_REQUEST['fid'])?validInt($_REQUEST['fid']):1;
+	<div id="eventStream">
+		<img class="img-responsive" ng-src="/cgi-bin/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&scale=100&rate=100&maxfps=30&replay=single&connkey=736818&rand=1419877749" />
 
-if ( $user['MonitorIds'] )
-    $midSql = " and MonitorId in (".join( ",", preg_split( '/["\'\s]*,["\'\s]*/', dbEscape($user['MonitorIds']) ) ).")";
-else
-    $midSql = '';
+		<div>
+			<span class="pull-right">{{ startTime | DateDiff:endTime:'pretty' }}</span>
+			<span class="pull-left" ng-bind="startTime"></span>
+			<div id="controls" class="text-center">
+				Start || Pause
+			</div>
+		</div>
+	</div>
+</div>
 
-$sql = 'SELECT E.*,M.Name AS MonitorName,M.DefaultRate,M.DefaultScale FROM Events AS E INNER JOIN Monitors AS M ON E.MonitorId = M.Id WHERE E.Id = ?'.$midSql;
-$event = dbFetchOne( $sql, NULL, array($eid) );
-
-if ( isset( $_REQUEST['rate'] ) )
-    $rate = validInt($_REQUEST['rate']);
-else
-    $rate = reScale( RATE_BASE, $event['DefaultRate'], ZM_WEB_DEFAULT_RATE );
-if ( isset( $_REQUEST['scale'] ) )
-    $scale = validInt($_REQUEST['scale']);
-else
-    $scale = reScale( SCALE_BASE, $event['DefaultScale'], ZM_WEB_DEFAULT_SCALE );
-
-$replayModes = array(
-    'single' => $SLANG['ReplaySingle'],
-    'all' => $SLANG['ReplayAll'],
-    'gapless' => $SLANG['ReplayGapless'],
-);
-
-if ( isset( $_REQUEST['streamMode'] ) )
-    $streamMode = validHtmlStr($_REQUEST['streamMode']);
-else
-    $streamMode = canStream()?'stream':'stills';
-
-if ( isset( $_REQUEST['replayMode'] ) )
-    $replayMode = validHtmlStr($_REQUEST['replayMode']);
-if ( isset( $_COOKIE['replayMode']) && preg_match('#^[a-z]+$#', $_COOKIE['replayMode']) )
-    $replayMode = validHtmlStr($_COOKIE['replayMode']);
-else {
-	$keys = array_keys( $replayModes );
-	$replayMode = array_shift( $keys );
-}
-
-parseSort();
-parseFilter( $_REQUEST['filter'] );
-$filterQuery = $_REQUEST['filter']['query'];
-
-$panelSections = 40;
-$panelSectionWidth = (int)ceil(reScale($event['Width'],$scale)/$panelSections);
-$panelWidth = ($panelSections*$panelSectionWidth-1);
-
-$connkey = generateConnKey();
-
-$focusWindow = true;
-
-xhtmlHeaders(__FILE__, $SLANG['Event'] );
-?>
-<body>
-  <div id="page">
-    <div id="content" ng-controller="EventController">
-      <div id="dataBar">
-        <table id="dataTable" class="major" cellspacing="0">
-          <tr>
-            <td><span ng-bind="eventId"></span></td>
-            <td><span ng-bind="cause"></span></td>
-            <td><span ng-bind="startTime"></span></td>
-            <td><span ng-bind="length"></span>s</td>
-            <td><span>{{ frames }} / {{ alarmFrames }}</span></td>
-            <td><span>{{ totScore }} / {{ avgScore }} / {{ maxScore }}</span></td>
-          </tr>
-        </table>
-      </div>
-      <div id="menuBar1">
-        <div id="scaleControl"><label for="scale"><?= $SLANG['Scale'] ?></label><?= buildSelect( "scale", $scales, "changeScale();" ); ?></div>
-        <div id="replayControl"><label for="replayMode"><?= $SLANG['Replay'] ?></label><?= buildSelect( "replayMode", $replayModes, "changeReplayMode();" ); ?></div>
-        <div id="nameControl"><input type="text" id="eventName" name="eventName" ng-value="name" size="16"/><input type="button" value="<?= $SLANG['Rename'] ?>" onclick="renameEvent()"<?php if ( !canEdit( 'Events' ) ) { ?> disabled="disabled"<?php } ?>/></div>
-      </div>
-      <div id="menuBar2">
-        <div id="closeWindow"><a href="#" onclick="closeWindow();"><?= $SLANG['Close'] ?></a></div>
-<?php
-if ( canEdit( 'Events' ) )
-{
-?>
-        <div id="deleteEvent"><a href="#" onclick="deleteEvent()"><?= $SLANG['Delete'] ?></a></div>
-        <div id="editEvent"><a href="#" onclick="editEvent()"><?= $SLANG['Edit'] ?></a></div>
-<?php
-}
-if ( canView( 'Events' ) )
-{
-?>
-        <div id="exportEvent"><a href="#" onclick="exportEvent()"><?= $SLANG['Export'] ?></a></div>
-<?php
-}
-if ( canEdit( 'Events' ) )
-{
-?>
-        <div id="archiveEvent" class="hidden"><a href="#" onclick="archiveEvent()"><?= $SLANG['Archive'] ?></a></div>
-        <div id="unarchiveEvent" class="hidden"><a href="#" onclick="unarchiveEvent()"><?= $SLANG['Unarchive'] ?></a></div>
-<?php
-}
-?>
-        <div id="framesEvent"><a href="#" onclick="showEventFrames()"><?= $SLANG['Frames'] ?></a></div>
-        <div id="streamEvent"<?php if ( $streamMode == 'stream' ) { ?> class="hidden"<?php } ?>><a href="#" onclick="showStream()"><?= $SLANG['Stream'] ?></a></div>
-        <div id="stillsEvent"<?php if ( $streamMode == 'still' ) { ?> class="hidden"<?php } ?>><a href="#" onclick="showStills()"><?= $SLANG['Stills'] ?></a></div>
-<?php
-if ( ZM_OPT_FFMPEG )
-{
-?>
-        <div id="videoEvent"><a href="#" onclick="videoEvent()"><?= $SLANG['Video'] ?></a></div>
-<?php
-}
-?>
-      </div>
-      <div id="eventStream">
-        <div id="imageFeed">
-<?php
-if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT )
-{
-    $streamSrc = getStreamSrc( array( "source=event", "mode=mpeg", "event={{eventId}}", "frame=".$fid, "scale=".$scale, "rate=".$rate, "bitrate=".ZM_WEB_VIDEO_BITRATE, "maxfps=".ZM_WEB_VIDEO_MAXFPS, "format=".ZM_MPEG_REPLAY_FORMAT, "replay=".$replayMode ) );
-    outputVideoStream( "evtStream", $streamSrc, reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ), ZM_MPEG_LIVE_FORMAT );
-}
-else
-{
-    $streamSrc = getStreamSrc( array( "source=event", "mode=jpeg", "event={{eventId}}", "frame=".$fid, "scale=".$scale, "rate=".$rate, "maxfps=".ZM_WEB_VIDEO_MAXFPS, "replay=".$replayMode) );
-    if ( canStreamNative() )
-    {
-        outputImageStream( "evtStream", $streamSrc, reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ), validHtmlStr($event['Name']) );
-    }
-    else
-    {
-        outputHelperStream( "evtStream", $streamSrc, reScale( $event['Width'], $scale ), reScale( $event['Height'], $scale ) );
-    }
-}
-?>
-        </div>
-        <p id="dvrControls">
-          <input type="button" value="&lt;+" id="prevBtn" title="<?= $SLANG['Prev'] ?>" class="inactive" onclick="streamPrev( true )"/>
-          <input type="button" value="&lt;&lt;" id="fastRevBtn" title="<?= $SLANG['Rewind'] ?>" class="inactive" disabled="disabled" onclick="streamFastRev( true )"/>
-          <input type="button" value="&lt;" id="slowRevBtn" title="<?= $SLANG['StepBack'] ?>" class="unavail" disabled="disabled" onclick="streamSlowRev( true )"/>
-          <input type="button" value="||" id="pauseBtn" title="<?= $SLANG['Pause'] ?>" class="inactive" onclick="streamPause( true )"/>
-          <input type="button" value="|>" id="playBtn" title="<?= $SLANG['Play'] ?>" class="active" disabled="disabled" onclick="streamPlay( true )"/>
-          <input type="button" value="&gt;" id="slowFwdBtn" title="<?= $SLANG['StepForward'] ?>" class="unavail" disabled="disabled" onclick="streamSlowFwd( true )"/>
-          <input type="button" value="&gt;&gt;" id="fastFwdBtn" title="<?= $SLANG['FastForward'] ?>" class="inactive" disabled="disabled" onclick="streamFastFwd( true )"/>
-          <input type="button" value="&ndash;" id="zoomOutBtn" title="<?= $SLANG['ZoomOut'] ?>" class="avail" onclick="streamZoomOut()"/>
-          <input type="button" value="+&gt;" id="nextBtn" title="<?= $SLANG['Next'] ?>" class="inactive" onclick="streamNext( true )"/>
-        </p>
-        <div id="replayStatus">
-          <span id="mode">Mode: <span id="modeValue">&nbsp;</span></span>
-          <span id="rate">Rate: <span id="rateValue"></span>x</span>
-          <span id="progress">Progress: <span id="progressValue"></span>s</span>
-          <span id="zoom">Zoom: <span id="zoomValue"></span>x</span>
-        </div>
-        <div id="progressBar" class="invisible">
-<?php
-        for ( $i = 0; $i < $panelSections; $i++ )
-        {
-?>
-           <div class="progressBox" id="progressBox<?= $i ?>" title=""></div>
-<?php
-        }
-?>
-        </div>
-      </div>
-      <div id="eventStills" class="hidden">
-        <div id="eventThumbsPanel">
-          <div id="eventThumbs">
-          </div>
-        </div>
-        <div id="eventImagePanel" class="hidden">
-          <div id="eventImageFrame">
-            <img id="eventImage" src="graphics/transparent.gif" alt=""/>
-            <div id="eventImageBar">
-              <div id="eventImageClose"><input type="button" value="<?= $SLANG['Close'] ?>" onclick="hideEventImage()"/></div>
-              <div id="eventImageStats" class="hidden"><input type="button" value="<?= $SLANG['Stats'] ?>" onclick="showFrameStats()"/></div>
-              <div id="eventImageData">Frame <span id="eventImageNo"></span></div>
-            </div>
-          </div>
-        </div>
-        <div id="eventImageNav">
-          <div id="eventImageButtons">
-            <div id="prevButtonsPanel">
-              <input id="prevEventBtn" type="button" value="&lt;E" onclick="prevEvent()" disabled="disabled"/>
-              <input id="prevThumbsBtn" type="button" value="&lt;&lt;" onclick="prevThumbs()" disabled="disabled"/>
-              <input id="prevImageBtn" type="button" value="&lt;" onclick="prevImage()" disabled="disabled"/>
-              <input id="nextImageBtn" type="button" value="&gt;" onclick="nextImage()" disabled="disabled"/>
-              <input id="nextThumbsBtn" type="button" value="&gt;&gt;" onclick="nextThumbs()" disabled="disabled"/>
-              <input id="nextEventBtn" type="button" value="E&gt;" onclick="nextEvent()" disabled="disabled"/>
-            </div>
-          </div>
-          <div id="thumbsSliderPanel">
-            <div id="thumbsSlider">
-              <div id="thumbsKnob">
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
+<div class="modal-footer">
+	<span class="pull-right glyphicon glyphicon-chevron-right"><span class="sr-only">Next</span></span>
+	<button type="button" class="btn btn-danger" ng-click="deleteEvent()">Delete</button>
+	<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
+	<span class="pull-left glyphicon glyphicon-chevron-left"><span class="sr-only">Previous</span></span>
+</div>
diff --git a/web/skins/bootstrap/views/events.php b/web/skins/bootstrap/views/events.php
index 50b072db1..915376e9e 100644
--- a/web/skins/bootstrap/views/events.php
+++ b/web/skins/bootstrap/views/events.php
@@ -18,25 +18,23 @@
 				<?php } ?>
 			</div> <!-- End sidebar .col-md-2 -->
 
-				<div class="clearfix">
-					<div class="event" dir-paginate="event in events | itemsPerPage: eventsPerPage" total-items="totalEvents">
-						<a href="/?view=event&amp;eid={{event.Event.Id}}">
-							<img ng-src="/events/{{ event.thumbData.Path }}" class="img-thumbnail" alt="..." />
-							<div class="over">
-								<div class="info">
-									<span>Monitor {{event.Event.MonitorId}}</span>
-									<span>{{ event.Event.StartTime | DateDiff:event.Event.EndTime:'pretty' }}</span>
-									<span>Event {{event.Event.Id}}</span>
-								</div> <!-- End .info -->
-							</div> <!-- End .over -->
-						</a>
 			<div class="col-md-10">
+				<div class="clearfix events">
+					<div class="event" dir-paginate="event in events | itemsPerPage: eventsPerPage" total-items="totalEvents" ng-click="displayEvent(event.Event.Id)">
+						<img ng-src="/events/{{ event.thumbData.Path }}" class="img-thumbnail" alt="..."/>
+						<div class="over">
+							<div class="info">
+								<span>Monitor {{event.Event.MonitorId}}</span>
+								<span>{{ event.Event.StartTime | DateDiff:event.Event.EndTime:'pretty' }}</span>
+								<span>Event {{event.Event.Id}}</span>
+							</div> <!-- End .info -->
+						</div> <!-- End .over -->
 					</div> <!-- End .event -->
 				</div> <!-- End .clearfix -->
 				<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
 			</div> <!-- End main .col-md-10 -->
-		</div>
-	</div>
+		</div> <!-- End .row -->
+	</div> <!-- End .container-fluid -->
 	<?php include("footer.php"); ?>
 </body>
 </html>