diff --git a/frontend/face-explorer.html b/frontend/face-explorer.html
index 7d4f54a..bd17c4b 100644
--- a/frontend/face-explorer.html
+++ b/frontend/face-explorer.html
@@ -8,19 +8,29 @@ body {
 }
 
 #bar {
-  height: 200px;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   overflow-x: scroll;
+  overflow-y: hidden;
   box-sizing: content-box;
+  white-space: nowrap;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .view {
   display: inline-block;
   width: 200px;
   height: 200px;
+  cursor: pointer;
+  box-sizing: border-box;
+  margin: 0 1em;
+  color: white;
+  font-weight: bold;
+  vertical-align: bottom;
+  text-align: center;
 }
 
 .face {
@@ -161,9 +171,15 @@ function makeFaceBoxes() {
           url = base + "face-data/" + (id % 100) + "/" + id + "-original.png"
         view.classList.add("view");
         view.style.backgroundImage = "url(" + url + ")";
+        view.textContent = photo.distance.toFixed(2);
         view.addEventListener("click", (event) => {
-          window.location.query = photo.id;
+          window.location.search = photo.id;
+          event.preventDefault = true;
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+          return false;
         });
+        bar.appendChild(view);
       });
 
       event.preventDefault = true;
diff --git a/server/routes/photos.js b/server/routes/photos.js
index a8f8cda..815b49c 100755
--- a/server/routes/photos.js
+++ b/server/routes/photos.js
@@ -791,9 +791,9 @@ function getFacesForPhoto(id) {
   }).then((faces) => {
     return Promise.map(faces, (face) => {
       return photoDB.sequelize.query(
-        "SELECT face1ID,face2ID " +
+        "SELECT face1Id,face2Id " +
         "FROM facedistances " +
-        "WHERE distance<0.5 AND (face1ID=:id OR face2ID=:id) " +
+        "WHERE distance<0.5 AND (face1Id=:id OR face2Id=:id) " +
         "ORDER BY distance ASC", {
         replacements: {
           id: face.id
@@ -801,23 +801,36 @@ function getFacesForPhoto(id) {
         type: photoDB.Sequelize.QueryTypes.SELECT,
         raw: true
       }).then((faceIds) => {
+        let ids = faceIds.map((face) => {
+          return (face.face1Id == face.id) ? face.face2Id : face.face1Id;
+        });
+
         return photoDB.sequelize.query(
-          "SELECT photos.id,albums.path,photos.filename " +
+          "SELECT photos.id,faces.id AS faceId,fd.distance,albums.path,photos.filename " +
           "FROM faces " +
-          "LEFT JOIN photos ON photos.id=faces.photoId " +
-          "LEFT JOIN albums ON albums.id=photos.albumId " +
+          "INNER JOIN photos ON photos.id=faces.photoId " +
+          "INNER JOIN albums ON albums.id=photos.albumId " +
+          "INNER JOIN facedistances AS fd ON " +
+          "( " +
+          "   (fd.face1Id=faces.id AND fd.face2Id=:faceId) " +
+          "OR (fd.face2Id=faces.id AND fd.face1Id=:faceId) " +
+          ") " +
           "WHERE faces.id IN (:ids)", {
           replacements: {
-            ids: faceIds.map((face) => {
-              return (face.face1Id == face.id) ? face.face2Id : face.face1Id;
-            })
+            ids: ids,
+            faceId: face.id
           },
           type: photoDB.Sequelize.QueryTypes.SELECT,
           raw: true
         });
       }).then((photos) => {
         face.relatedPhotos = photos.filter((photo) => { return photo.id != id }).map((photo) => {
-          return { id: photo.id, path: photo.path + photo.filename };
+          return {
+            id: photo.id,
+            distance: photo.distance,
+            faceId: photo.faceId,
+            path: photo.path + photo.filename
+          };
         });
       });
     }).then(() => {