diff --git a/templates/metadata-converter.twig b/templates/metadata-converter.twig
index 00b08e0a6b327bf3d4bcf1ee1a9888fb771471bc..41fc9315f7ac1a87421307b3fc15c2bb84cff8c4 100644
--- a/templates/metadata-converter.twig
+++ b/templates/metadata-converter.twig
@@ -1,31 +1,32 @@
 {% set pagetitle = 'Metadata parser'|trans %}
 {% extends "base.twig" %}
 
-    {%  set i=1 %}
+{%  set i=1 %}
 {% block content %}
     <h2>{{ pagetitle }}</h2>
-    <form method="post" enctype="multipart/form-data">
+    <form method="post" class="pure-form" enctype="multipart/form-data">
         <p> {% trans 'XML metadata' %}</p>
-        <p>
-         <textarea name="xmldata" rows="20" style="width:100%">{{ xmldata }}</textarea>
-        </p>
-        <p>
-            {{ 'or select a file:'|trans }}
-
-            <input type="file" name="xmlfile" />
-        </p>
-        <p>
-            <button type="submit" class="btn">{% trans %}Parse{% endtrans %}</button>
-        </p>
+        <div class="pure-control-group">
+            <textarea name="xmldata" rows="20" class="textarea">{{ xmldata }}</textarea>
+        </div>
+        <br>
+        <div class="center">
+            <div class="pure-button-group" role="group">
+                <label class="pure-button"><i class="fa fa-folder-open"> </i> Select a file...
+                    <input type="file" name="xmlfile" class="hidden" multiple>
+                </label>
+                <label id="show-file" class="pure-button show-files" disabled>No file selected.</label>
+            </div>
+            <br>
+            <button class="pure-button pure-input-1-3">{{ 'Parse'|trans }}</button>
+        </div>
     </form>
 
-    {% if output %}
-
+    {% if output -%}
+    <br>
     <h2>{{ 'Converted metadata'|trans }}</h2>
-
-
-        {% for type, text in output if text %}
-
+        {% for type, text in output if text -%}
+    <div class="inline"></div>
     <h3> {{ type }}</h3>
     <div class="metadatabox">
         <button data-clipboard-target="#metadata{{ loop.index }}" id="btn{{loop.index }}" class="btn topright clipboard-btn" onclick="metadata({{ loop.index }})" >
@@ -39,4 +40,3 @@
     {% endif -%}
 {% endblock content -%}
 
-
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index 2910c540f82d9cd82af3980fb4d7e81cadbaa8ae..ab9d80844f170683cd69add8e137732a4f25fa1f 100644
--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -149,6 +149,23 @@ input[type="file"]{
 .pure-select{
     float: right;
 }
+.pure-button-group .pure-button:first-child {
+    border: solid 1px #E6E6E6;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+ }
+.pure-button-group .pure-button:last-child {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+.pure-button-group .pure-button.show-files{
+    background-color: transparent;
+    border: solid 1px #ADADAD;
+    border-right: solid 1px #ADADAD;
+}
+
 /* SELECTIZE */
 .selectize-input, .selectize-dropdown, .selectize-input.dropdown-active{
     -webkit-border-radius: 0;
diff --git a/www/assets/js/src/script.js b/www/assets/js/src/script.js
index 5ce615887caf67df3ae5d6a325e24d75599421cf..19aac25406df76a6412dd475a7259f34e5c1a036 100644
--- a/www/assets/js/src/script.js
+++ b/www/assets/js/src/script.js
@@ -45,7 +45,31 @@ function metadata(index) {
     console.log();
 }
 
+// Attach the `fileselect` event to all file inputs on the page
+$(document).on('change', ':file', function() {
+    var input = $(this),
+        numFiles = input.get(0).files ? input.get(0).files.length : 1,
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+    input.trigger('fileselect', [numFiles, label]);
+});
+
 $(document).ready(function() {
     $('.language-menu').selectize();
     $('#organization').selectize();
+
+    // Watch for custom `fileselect` event
+    $(':file').on('fileselect', function(event, numFiles, label) {
+
+        var input = $(this).parents('.pure-button-group').find(':text'),
+            log = numFiles > 1 ? numFiles + ' files selected' : label;
+
+        if( input.length ) {
+            input.val(log);
+        } else {
+            if( log ) {
+                document.getElementById('show-file').innerHTML = log;
+            }
+        };
+    });
+
 });