diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js b/src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js
index f5f8e57..7823cac 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js
@@ -85,7 +85,11 @@
                 template: '/App_Plugins/Look/BackOffice/LookTree/Partials/Details.html',
                 show: true
             });
-        };
+      };
+
+      $scope.isActive = function (match) {
+        return match === matchService.selectedMatch;
+      };
 
 
         $scope.reload = function () {
diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Look.css b/src/Our.Umbraco.Look.BackOffice/Client/Look.css
index 0e40c01..631d391 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Look.css
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Look.css
@@ -76,16 +76,19 @@
     margin: 0 0 10px 0;
     clear: both;
     background-color: #f3f3f5;
+    border-left: #f3f3f5 4px solid;
+    padding: 0 3px 0 5px;
 }
 
-.look-match:hover {
-    cursor:pointer;
-    background-color:white;
+.look-match:hover, .look-match:focus, look-match:active {
+    cursor: pointer;
+    background-color: white;
 }
 
 .look-match.active {
-    cursor:default;
-    background-color:white;
+    cursor: default;
+    background-color: #eafffe;
+    border-color: #00aea2;
 }
 
 .look-match.even {
@@ -102,12 +105,15 @@
     font-size: xx-small;
 }
 
-
+.look-match-type, .look-match-details, .look-match-checkboxes {
+    display: inline-block;
+    vertical-align: middle;
+}
 
 .look-match-type {
-    float: left;
-    position:relative;
+    position: relative;
     margin-right: -15px;
+    margin-left: -5px;
 }
 
 .look-match-detached-icon {
@@ -126,17 +132,13 @@
     color: lightgray;
 }
 
-
 .look-match-checkboxes {
-    float: left;
+    margin-right: 18px;
 }
 
 .look-match-details {
-    margin-left:30px;
-    float: left;
-}
-
 
+}
 
 .look-banner {
     border:solid 2px green;
diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html b/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html
index d4e2a45..5419699 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html
@@ -1,4 +1,4 @@
-<div ng-controller="Look.BackOffice.DetailsController" ng-mouseleave="hideDetails()" class="look-details">
+<div ng-controller="Look.BackOffice.DetailsController" class="look-details">
 
     <h3>{{ viewData.match.name }}</h3>
 
@@ -11,12 +11,12 @@ <h3>{{ viewData.match.name }}</h3>
     <div ng-if="viewData.match.culture"><span>Culture: </span> {{ viewData.match.culture }}</div>
 
     <div ng-if="viewData.match.hasTags">
-        <hr/>
+        <hr />
         <div ng-repeat="tagGroup in viewData.match.tagGroups">
             <span class="icon icon-tags">&nbsp;</span>
             <a ng-if="tagGroup.link !== null" href="{{tagGroup.link}}">{{ tagGroup.name ? tagGroup.name : '&lt;Default&gt;' }}</a>
             <span ng-if="tagGroup.link === null">{{ tagGroup.name ? tagGroup.name : '&lt;Default&gt;' }}</span>
-                                                
+
             <ul>
                 <li ng-repeat="tag in tagGroup.tags">
 
@@ -29,10 +29,14 @@ <h3>{{ viewData.match.name }}</h3>
     </div>
 
     <div ng-if="viewData.match.hasLocation">
-        <hr/>
+        <hr />
         <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q={{viewData.match.latitide}},{{viewData.match.longitude}}&amp;ie=UTF8&amp;&amp;output=embed"></iframe><br />
     </div>
 
+    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
+        <input ng-click="hideDetails()" type="button" class="btn btn-primary" value="Close">
+    </div>
+
     <!--<pre>{{ viewData | json}}</pre>-->
 
 </div>
\ No newline at end of file
diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html b/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html
index 9e04d87..4b44df2 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html
@@ -7,8 +7,8 @@
                 <p>{{match.name.charAt(0)}}</p>
             </div>
 
-            <div class="look-match" ng-class-even="'even'" ng-class-odd="'odd'" ng-click="showDetails(match)">
-                
+            <div class="look-match" ng-class="{'active': isActive(match)}" ng-class-even="'even'" ng-class-odd="'odd'" ng-click="showDetails(match)">
+                 
                 <span class="look-match-score">{{match.score}}</span>