diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json b/plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json
index cd703f2e..0c0a9676 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json
@@ -1,4 +1,7 @@
 {
+    "Upload Images": "Upload Images",
+    "Images Sent": "Images Sent",
+    "Click to Upload Images": "Click to Upload Images",
     "Face Name": "Face Name",
     "faceManager": "Face Manager",
     "deleteImage": "Delete Image",
diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
index 9d2a69b1..61cca93c 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
@@ -1,7 +1,7 @@
 #faceManagerImages .face-image {
     transition: 0s;
 }
-#faceManagerImages h3:first-child {
+#faceManagerImages .face-title:first-child {
     margin-top: 0!important;
 }
 #faceManagerImages > .row {
@@ -45,3 +45,45 @@
 #faceManagerImages .face-image:hover .controls-bottom .badge{
     opacity: 0.1
 }
+/* ===================== FILE INPUT ===================== */
+.file-area {
+	 width: 100%;
+	 position: relative;
+}
+ .file-area input[type=file] {
+	 position: absolute;
+	 width: 100%;
+	 height: 100%;
+	 top: 0;
+	 left: 0;
+	 right: 0;
+	 bottom: 0;
+	 opacity: 0;
+	 cursor: pointer;
+}
+ .file-area .file-dummy {
+	 width: 100%;
+	 padding: 30px;
+	 background: rgba(255, 255, 255, 0.2);
+	 border: 2px dashed rgba(200, 200, 200, 0.2);
+	 text-align: center;
+	 transition: background 0.3s ease-in-out;
+     border-radius: 5px;
+     background-color: #f2f9ff;
+}
+ .file-area .file-dummy .success {
+	 display: none;
+}
+ .file-area input[type=file]:focus + .file-dummy {
+	 outline: 0;
+ }
+ .file-area input[type=file]:valid + .file-dummy {
+	 border-color: rgba(0, 255, 0, 0.4);
+	 background-color: rgba(0, 255, 0, 0.2);
+}
+ .file-area input[type=file]:valid + .file-dummy .success {
+	 display: inline-block;
+}
+ .file-area input[type=file]:valid + .file-dummy .default {
+	 display: none;
+}
diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
index 17db98e3..f810183f 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
@@ -36,7 +36,7 @@ $(document).ready(function(){
        </div>`
     }
     var createFaceHeader = function(name){
-        return `<span class="mt-4 mb-2 badge bg-dark badge-lg">${name}</span>`
+        return `<span class="mt-4 mb-2 badge bg-dark badge-lg face-title">${name}</span>`
     }
     var drawFaceImages = function(){
         getFaceImages(function(faces){
diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs b/plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs
index cdbdea0d..3e7f6a8f 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs
@@ -10,10 +10,18 @@
       <div class="modal-body overflow-hidden">
           <div class="row">
               <form id="faceManagerUploadForm" class="col-4">
-                  <div class="form-group">
-                      <input value="myFace" placeholder="<%- lang['Face Name'] %>" class="form-control form-control-lg" name="faceName" id="faceNameField">
+                  <div class="form-group mb-3">
+                      <div class="text-left mb-2"><span class="badge badge-default"><%- lang['Face Name'] %></span></div>
+                      <input value="myFace" placeholder="<%- lang['Face Name'] %>" class="form-control form-control-lg" name="faceName" id="faceNameField" style="border-radius: .3rem;">
+                  </div>
+                  <div class="form-group file-area">
+                      <div class="text-left mb-2"><span class="badge badge-default"><%- lang['Upload Images'] %></span></div>
+                      <input type="file" id="fileinput" name="files" required multiple="multiple" accept="image/jpeg" />
+                      <div class="file-dummy">
+                        <div class="success"><span class="badge bg-light badge-success"><%- lang['Images Sent'] %></span></div>
+                        <div class="default"><span class="badge bg-light badge-info"><%- lang['Click to Upload Images'] %> (JPG/JPEG)</span></div>
+                      </div>
                   </div>
-                  <input type="file" id="fileinput" name="files" multiple="multiple" />
               </form>
               <div class="col-8" id="faceManagerImages">