diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json b/plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json
index 7ddb7da3..fefe609e 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json
@@ -1,3 +1,5 @@
 {
-    "faceManager": "Face Manager"
+    "faceManager": "Face Manager",
+    "deleteImage": "Delete Image",
+    "deleteImageText": "Are you sure you want to delete this image? it will not be recoverable.",
 }
diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
new file mode 100644
index 00000000..a9e372c2
--- /dev/null
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
@@ -0,0 +1,8 @@
+#faceManagerImages .face-image img {width:100%}
+#faceManagerImages .face-image .controls {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    padding: 5px;
+}
diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
index 790fa3e4..6746d8e9 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
@@ -1,5 +1,74 @@
 $(document).ready(function(){
+    var faceManagerModal = $('#faceManager')
+    var faceManagerImages = $('#faceManagerImages')
+    var getFaceImages = function(callback){
+        $.get(superApiPrefix + $user.sessionKey + '/faceManager/images',function(faces){
+            callback(faces)
+        })
+    }
+    var deleteFaceImage = function(name,image,callback){
+        $.get(superApiPrefix + $user.sessionKey + '/faceManager/image/' + name + '/' + image,function(response){
+            callback(response)
+        })
+    }
+    var getFaceImageHtml = function(name,image){
+        return `<div class="col-3 face-image" face="${name}" image="${image}">
+           <div class="controls">
+               <a class="btn btn-sm btn-default delete"><i class="fa fa-trash-o"></i></a>
+           </div>
+           <img src="${superApiPrefix}/faceManager/image/${name}/${image}">
+       </div>`
+    }
+    var drawFaceImages = function(){
+        var html = ''
+        getFaceImages(function(faces){
+            $.each(faces,function(name,images){
+                html += `<div class="row" face="${name}">`
+                $.each(images,function(n,image){
+                    html += getFaceImageHtml(name,image)
+                })
+                html += `</div>`
+            })
+        })
+        faceManagerImages.html(html)
+    }
+    var prettySizeFaceImages = function(){
+        var faceImagesRendered = faceManagerImages.find('.face-image')
+        var faceHeight = faceImagesRendered.first().width()
+        faceImagesRendered.css('height',faceHeight)
+    }
+    faceManagerModal.on('shown.bs.modal',function(){
+        drawFaceImages()
+    })
+    faceManagerImages.on('click','.delete',function(){
+        var el = $(this).parents('.face-image')
+        var faceName = el.attr('face')
+        var faceImage = el.attr('image')
+        $.confirm.create({
+            title: lang['Delete Image'],
+            body: lang.deleteImageText,
+            clickOptions: {
+                class: 'btn-danger',
+                title: lang.Delete,
+            },
+            clickCallback: function(){
+                deleteFaceImage(faceName,faceImage,function(response){
+                    console.log(response)
+                })
+            }
+        })
+    })
     $('#tablist').append('<li class="nav-item">\
         <a class="nav-link" data-toggle="modal" data-target="#faceManager">' + lang.faceManager + '</a>\
     </li>')
+    $.ccio.ws.on('f',function(d){
+        switch(d.f){
+            case'faceManagerImageUploaded':
+                faceManagerImages.append(getFaceImageHtml(d.faceName,d.fileName))
+            break;
+            case'faceManagerImageDeleted':
+                $(`.face-image[face="${d.faceName}"][image="${d.fileName}"]`).remove()
+            break;
+        }
+    })
 })
diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs b/plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs
index 89d5ccdc..decbcf83 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs
@@ -9,8 +9,10 @@
       </div>
       <div class="modal-body overflow-hidden">
           <div class="row">
-              <div class="col-8"></div>
               <div class="col-4"></div>
+              <div class="col-8" id="faceManagerImages">
+                  
+              </div>
           </div>
       </div>
     </div>