diff --git a/static/js/base.js b/static/js/base.js
index f708585..61372c7 100644
--- a/static/js/base.js
+++ b/static/js/base.js
@@ -48,10 +48,27 @@ function getMatchedNotes(pattern, fun) {
 /**
  * Generate a <li> entry with a given id and text
  */
-function li(id, text) {
-    return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\"" +
+function li(id, text,extra_css) {
+    return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center " + extra_css + "\"" +
                 " id=\"" + id + "\">" + text + "</li>\n";
 }
+/**
+ * Return style to apply according to the balance of the note
+ * @param balance The balance of the note.
+ */
+function displayStyle(balance){
+    if (balance < -5000){
+        return " text-danger bg-dark"
+    }
+    else if(balance <-1000){
+        return " text-danger"
+    }
+    else if(balance < 0){
+        return "text-warning"
+    }
+    return ""
+}
+
 
 /**
  * Render note name and picture
@@ -62,24 +79,28 @@ function li(id, text) {
  */
 function displayNote(note, alias, user_note_field=null, profile_pic_field=null) {
     if (!note.display_image) {
-        note.display_image = 'https://nk20.ynerant.fr/media/pic/default.png';
-        $.getJSON("/api/note/note/" + note.id + "/?format=json", function(new_note) {
-            note.display_image = new_note.display_image.replace("http:", "https:");
-            note.name = new_note.name;
-            note.balance = new_note.balance;
-
-            displayNote(note, alias, user_note_field, profile_pic_field);
-        });
-        return;
+        note.display_image = '/media/pic/default.png';
     }
 
     let img = note.display_image;
     if (alias !== note.name)
         alias += " (aka. " + note.name + ")";
     if (user_note_field !== null)
+        
+        $("#" + user_note_field).addClass(displayStyle(note.balance));
         $("#" + user_note_field).text(alias + (note.balance == null ? "" : (" : " + pretty_money(note.balance))));
-    if (profile_pic_field != null)
+    if (profile_pic_field != null){
         $("#" + profile_pic_field).attr('src', img);
+        $("#" + profile_pic_field).click(function(){
+            console.log(note);
+            if(note.resourcetype == "NoteUser"){
+                document.location.href = "/accounts/user/" + note.user;
+            }
+            else if(note.resourcetype == "NoteClub"){
+                document.location.href = "/accounts/club/" + note.club;
+            }
+        });
+    }
 }
 
 /**
@@ -153,8 +174,11 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
 
     // When the user type "Enter", the first alias is clicked
     field.keypress(function(event) {
-        if (event.originalEvent.charCode === 13)
-            $("#" + alias_matched_id + " li").first().trigger("click");
+        if (event.originalEvent.charCode === 13 && notes.length > 0) {
+            let li_obj = $("#" + alias_matched_id + " li").first();
+            displayNote(notes[0], li_obj.text(), user_note_field, profile_pic_field);
+            li_obj.trigger("click");
+        }
     });
 
     // When the user type something, the matched aliases are refreshed
@@ -164,51 +188,46 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
 
         let pattern = field.val();
         // If the pattern is not modified, we don't query the API
-        if (pattern === old_pattern || pattern === "")
+        if (pattern === old_pattern)
             return;
-
         old_pattern = pattern;
-
-        // Clear old matched notes
         notes.length = 0;
 
         let aliases_matched_obj = $("#" + alias_matched_id);
         let aliases_matched_html = "";
-
-        // Get matched notes with the given pattern
-        getMatchedNotes(pattern, function(aliases) {
+        // get matched Alias with note associated
+        if(pattern == ""){
+            aliases_matched_obj = $("#" + alias_matched_id);
+            aliases_matched_html = "";
+            aliases_matched_obj.html("")
+            notes.length = 0;
+            return;
+        }
+        
+        $.getJSON("/api/note/consumer/?format=json&alias="
+                  + pattern
+                  + "&search=user|club&ordering=normalized_name",
+        function(consumers){
             // The response arrived too late, we stop the request
             if (pattern !== $("#" + field_id).val())
                 return;
-
-            aliases.results.forEach(function (alias) {
-                let note = alias.note;
-                note = {
-                    id: note,
-                    name: alias.name,
-                    alias: alias,
-                    balance: null
-                };
-                aliases_matched_html += li(alias_prefix + "_" + alias.id, alias.name);
+            consumers.results.forEach(function (consumer){
+                let note = consumer.note;
+                extra_css = displayStyle(note.balance);
+                aliases_matched_html += li(alias_prefix + '_' + consumer.id,
+                                         consumer.name,
+                                         extra_css);
                 notes.push(note);
             });
-
-            // Display the list of matched aliases
             aliases_matched_obj.html(aliases_matched_html);
-
-            notes.forEach(function (note) {
-                let alias = note.alias;
-                let alias_obj = $("#" + alias_prefix + "_" + alias.id);
-                // When an alias is hovered, the profile picture and the balance are displayed at the right place
-                alias_obj.hover(function () {
-                    displayNote(note, alias.name, user_note_field, profile_pic_field);
+            consumers.results.forEach(function(consumer){
+                let note = consumer.note;
+                let consumer_obj = $("#" + alias_prefix+ "_" + consumer.id);
+                consumer_obj.hover(function(){
+                    displayNote(consumer.note, consumer.name, user_note_field,profile_pic_field)
                 });
-
-                // When the user click on an alias, the associated note is added to the emitters
-                alias_obj.click(function () {
-                    field.val("");
-                    old_pattern = "";
-                    // If the note is already an emitter, we increase the quantity
+                consumer_obj.click(function(){
+                    field.val(""); old_pattern = ""; // reset input field
                     var disp = null;
                     notes_display.forEach(function (d) {
                         // We compare the note ids
@@ -220,8 +239,8 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
                     // In the other case, we add a new emitter
                     if (disp == null) {
                         disp = {
-                            name: alias.name,
-                            id: note.id,
+                            name: consumer.name,
+                            id: consumer.id,
                             note: note,
                             quantity: 1
                         };
@@ -236,8 +255,11 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
                     let note_list = $("#" + note_list_id);
                     let html = "";
                     notes_display.forEach(function (disp) {
-                        html += li(note_prefix + "_" + disp.id, disp.name
-                            + "<span class=\"badge badge-dark badge-pill\">" + disp.quantity + "</span>");
+                        html += li(note_prefix + "_" + disp.id,
+                                   disp.name
+                                   + "<span class=\"badge badge-dark badge-pill\">"
+                                   + disp.quantity + "</span>",
+                                   displayStyle(disp.note.balance));
                     });
 
                     // Emitters are displayed
@@ -254,11 +276,12 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
                         line_obj.click(removeNote(disp, note_prefix, notes_display, note_list_id, user_note_field,
                             profile_pic_field));
                     });
-                });
+                })
             });
-        });
-    });
-}
+            
+        });// end getJSON alias
+    }); 
+}// end function autocomplete
 
 // When a validate button is clicked, we switch the validation status
 function de_validate(id, validated) {
diff --git a/templates/note/conso_form.html b/templates/note/conso_form.html
index b108a96..3665984 100644
--- a/templates/note/conso_form.html
+++ b/templates/note/conso_form.html
@@ -11,9 +11,10 @@
             <div class="row">
                 {# User details column #}
                 <div class="col-xl-5" id="note_infos_div">
-                    <div class="card border-success shadow mb-4">
+                    <div class="card border-success shadow mb-4 text-center">
                         <img src="/media/pic/default.png"
-                            id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block">
+                             id="profile_pic" alt=""
+                             class="img-thumbnail">
                         <div class="card-body text-center">
                             <span id="user_note"></span>
                         </div>
@@ -25,14 +26,17 @@
                     <div class="card border-success shadow mb-4">
                         <div class="card-header">
                             <p class="card-text font-weight-bold">
-                                {% trans "Select emitters" %}
+                                {% trans "Consum" %}
                             </p>
                         </div>
+                        <div class="card-body px-0 py-0" style="min-height:125px;">
                         <ul class="list-group list-group-flush" id="note_list">
                         </ul>
-                        <div class="card-body">
-                            <input class="form-control mx-auto d-block" type="text" id="note" />
-                            <ul class="list-group list-group-flush" id="alias_matched">
+                        </div>
+                        <div class="card-footer bg-white">
+                        <input class="form-control mx-auto d-block" type="text" id="note" />
+                        <ul class="list-group list-group-flush"
+                            id="alias_matched">
                             </ul>
                         </div>
                     </div>