diff --git a/swh/web/ui/templates/search.html b/swh/web/ui/templates/search.html
index f5be3acd0..334b5e3d6 100644
--- a/swh/web/ui/templates/search.html
+++ b/swh/web/ui/templates/search.html
@@ -1,104 +1,117 @@
 {% extends "layout.html" %}
 {% block title %}Search SWH{% endblock %}
 {% block content %}
 
-<!-- CryptoJS assumed to be installed as a debian package -->
 <script src="{{ url_for('static', filename='lib/core.js') }}"></script>
 <script src="{{ url_for('static', filename='lib/lib-typedarrays.js') }}"></script>
 <script src="{{ url_for('static', filename='lib/sha1.js') }}"></script>
 <script src="{{ url_for('static', filename='lib/sha256.js') }}"></script>
-<script src="{{ url_for('static', filename='js/filedrop.js') }}"></script>
+<script src="{{ url_for('static', filename='js/search.js') }}"></script>
+
 <div class="container">
-  <form id="searchForm"
+  <!-- The text-based SHA1 or SHA256 search -->
+  <h1 class="label label-default">Search with SHA-1 or SHA-256:</h1>
+  <form id="text-hash-form"
 	action="{{ url_for('search') }}"
 	class="form"
+        method="get">
+    <br/>
+    <div class="input-group">
+      <input id="text-hash-input"
+	     type="text" class="form-control"
+	     name="q"
+	     placeholder="SHA-1 or SHA-256 checksum" />
+      <span class="input-group-btn">
+        <button id="text-hash-submit"
+		class="btn btn-primary"
+		type="submit">
+	  Text search
+	</button>
+      </span>
+    </div>
+  </form>
+
+  <!-- The file-based drag&drop UI-->
+  <h1 class="label label-default">Search with files</h1>
+  <form id="file-hash-form"
+	action="{{ url_for('search') }}"
+	class="text-center form"
         method="post"
         enctype="multipart/form-data">
-    <div class="form-group">
-      <label for="sha1_textinput">Search with SHA-1 or SHA-256:</label>
-      <br/>
-      <div id="textinput" class="input-group">
-	<input id="sha1_textinput"
-	       type="text" class="form-control"
-	       name="q"
-	       placeholder="SHA-1 or SHA-256 checksum" />
-      </div>
-    </div>
-    <div id="filesinput" class="input-group">
-      <label for="fileElem">Search with files</label>
-      <div id="fileinput" class="container text-center" style="border: 1px dashed black">
-	Drag and drop or click here to hash files and search for them.
-	Your files will NOT be uploaded, hashing is done locally.
-	Filesizes over 20Mb may be slow to process, use with care.
-	<div id="filelist" class="row">
-	</div>
-      </div>
+
+    <!--Form input -->
+    <input type="file"
+	   id="file-hash-input"
+	   class="form-control"
+	   multiple
+	   name="filename"
+           value=""
+	   style="display:none"
+           placeholder="File(s) to hash and search" />
+    <div id="file-drop" class="container text-center" style="border: 1px dashed black">
+      Drag and drop or click here to hash files and search for them.
+      Your files will NOT be uploaded, hashing is done locally.
+      Filesizes over 20Mb may be slow to process, use with care.
+      <div id="filelist" class="row"></div>
     </div>
-    <div class="text-center" style="margin-top: 10px">
-      <button id="submitall" type="submit" class="btn btn-primary">
-	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+    
+    <!-- Form buttons -->
+    <div class="btn-group" style="margin-top: 10px">
+      <button id="file-hash-submission" type="submit" class="btn btn-primary">
+	<span class="glyphicon glyphicon-search" type="submit" aria-hidden="true"></span>
 	Search
       </button>
+      <button id="file-hash-clear" class="btn btn-primary">
+	Clear
+	<span class="glyphicon glyphicon-erase" aria-hidden="true"></span>
+      </button>
     </div>
   </form>
-  <input type="file"
-	 id="fileElem"
-	 class="form-control"
-	 multiple
-	 name="filename"
-         value=""
-	 style="display:none"
-         placeholder="File(s) to upload, hash and search for SHA-1 or SHA-256 checksum" />
-  <div id="swh-search-message" class="message">
-  </div>
+
+  <div id="search-message" class="message"></div>
+  
+  <!-- Search forms setup -->
+  <script>
+    var sfc = new SearchFormController($('#text-hash-form'), $('#file-hash-form'), $('#search-message'));
+    sfc.setupTextForm($('#text-hash-input'));
+    sfc.setupFileForm($('#file-drop'),$('#filelist'),$('#file-hash-input'),$('#file-hash-clear'));
+  </script>
+
   {% if search_res is not none %}
+  <!-- Search result display -->
       {% if search_stats is not none %}
-      <label id="stats">
+      <label class="search-stats">
          Files available in SWH: {{ '%.2f' | format(search_stats['pct']) }}% of
          {{ search_stats['nbfiles'] }} files.
       </label>
       {% endif %}
-  <table id="results" class="table table-striped">
+  <table class="table table-striped search-res">
     <thead class="thead-default">
       <th>File name</th>
-      <th>SHA1 checksum</th>
+      <th>SHA256 checksum</th>
       <th>Result</th>
     </thead>
     {% for res in search_res %}
     <tr>
       {% if res['filename'] is not none %}
       <td>{{ res['filename'] }}</td>
       {% else %}
       <td>From text input</td>
       {% endif %}
       {% if res['found'] %}
       <td><a href="{{ url_for('browse_content') }}sha1:{{ res['sha1'] }}">{{ res['sha1'] }}</a></td>
       <td><span class="glyphicon glyphicon-ok file-found"></span></td>
       {% else %}
       <td>{{ res['sha1'] }}</td>
       <td><span class="glyphicon glyphicon-remove file-notfound"></span></td>
       {% endif %}
     </tr>
     {% endfor %}
   </table>
   {% endif %}
-  {% if message is not none %}
+  {% if message is not none and message != '' %}
     <div class="span8">{{ message | safe }}</div>
   </div>
   {% endif %}
-  <!-- jQuery setup -->
-  <div id="test"></div>
-  <script>
-    var form = $('#searchForm');
-    var filelist = $('#filelist');
-    // Delegate dropbox click
-    $('#fileinput').inputclick($('#fileElem'));
-    // Make the dropbox available for drag & drop
-    $('#fileElem').filedialog(filelist, form);
-    // Make the submission button receptive to files
-    $('#fileinput').filedrop(filelist, form);
-    // Check the text input before submission
-    form.checkSubmission($('#sha1_textinput'), $('#swh-search-message'));
-  </script>
 </div>
 {% endblock %}