diff --git a/lib/Alchemy/Phrasea/Controller/Admin/Fields.php b/lib/Alchemy/Phrasea/Controller/Admin/Fields.php
index fc62bd5901..81e2de8af7 100644
--- a/lib/Alchemy/Phrasea/Controller/Admin/Fields.php
+++ b/lib/Alchemy/Phrasea/Controller/Admin/Fields.php
@@ -146,7 +146,7 @@ class Fields implements ControllerProviderInterface
                         continue;
                     }
 
-                    $res[$tagname] = array(
+                    $res[] = array(
                         'id'    => $namespace . '/' . $tagname,
                         'label' => $datas['namespace'] . ' / ' . $datas['tagname'],
                         'value' => $datas['namespace'] . ':' . $datas['tagname'],
@@ -155,8 +155,6 @@ class Fields implements ControllerProviderInterface
             }
         }
 
-        ksort($res);
-
         return $app->json($res);
     }
 
diff --git a/templates/web/admin/fields/index.html.twig b/templates/web/admin/fields/index.html.twig
index f7bbb11eae..a4c3eda609 100644
--- a/templates/web/admin/fields/index.html.twig
+++ b/templates/web/admin/fields/index.html.twig
@@ -1,6 +1,3 @@
-{# empty Twig template #}
-<script type="text/javascript" src="/assets/i18n/i18next-1.6.0.min.js"></script>
-
 {% include 'admin/fields/templates.html.twig' %}
 
 <div id="admin-field-app" class="container-fluid">
@@ -14,14 +11,10 @@
         </div>
     </div>
     <div class="row-fluid">
-         <div class="left-block span4">
-
-        </div>
-        <div class="right-block span8" style="border-left: 1px dashed #000">
-
-        </div>
+         <div class="left-block span4"></div>
+        <div class="right-block span8" style="border-left: 1px dashed #000"></div>
     </div>
 </div>
-
+{# bootstrap admin field application #}
 <script src="/assets/requirejs/require.js"></script>
-<script src="/scripts/apps/admin/fields/main.js"></script>
\ No newline at end of file
+<script src="/scripts/apps/admin/fields/main.js"></script>
diff --git a/templates/web/admin/fields/templates.html.twig b/templates/web/admin/fields/templates.html.twig
index fe6a31cd28..479137c158 100644
--- a/templates/web/admin/fields/templates.html.twig
+++ b/templates/web/admin/fields/templates.html.twig
@@ -14,66 +14,62 @@
 </script>
 
 <script type="text/template" id="item_list_view_template">
-<div class="row-fluid">
-    <div class="span12">
-
-        <div style="margin:20px 0">
-            <button type="button" class="btn btn-success btn-add-field"><i class="icon-plus icon-white"></i>{% trans %}Add new field{% endtrans %}</button>
-        </div>
-
-        <div style="margin:20px 0">
-            <input class="input-block-level" type="text" id="live_search"  placeholder="{% trans %}Live search{% endtrans %}"/>
-        </div>
-
-        <div class="well well-small add-field-block" style="display:none">
-            <h3>{% trans %}Add a new field{% endtrans %}</h3>
-            <form class="form-horizontal">
-                <div class="control-group">
-                    <label class="control-label" for="inputLabel">{% trans %}Label{% endtrans %}</label>
-                    <div class="controls">
-                        <input type="text" id="new-name" class="input-block-level" placeholder="">
-                        <span class="help-block"></span>
+    <div class="row-fluid">
+        <div class="span12">
+            <div class="sidebar-block">
+                <button type="button" class="btn btn-success btn-add-field"><i class="icon-plus icon-white"></i>{% trans %}Add new field{% endtrans %}</button>
+            </div>
+            <div class="sidebar-block">
+                <input class="input-block-level" type="text" id="live_search"  placeholder="{% trans %}Live search{% endtrans %}"/>
+            </div>
+            <div class="well well-small add-field-block" style="display:none">
+                <h3>{% trans %}Add a new field{% endtrans %}</h3>
+                <form class="form-horizontal">
+                    <div class="control-group">
+                        <label class="control-label" for="inputLabel">{% trans %}Label{% endtrans %}</label>
+                        <div class="controls">
+                            <input type="text" id="new-name" class="input-block-level" placeholder="">
+                            <span class="help-block"></span>
+                        </div>
                     </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="inputSource">{% trans %}Source{% endtrans %}</label>
-                    <div class="controls">
-                        <input type="text" id="new-source" class="input-block-level" placeholder="">
+                    <div class="control-group">
+                        <label class="control-label" for="inputSource">{% trans %}Source{% endtrans %}</label>
+                        <div class="controls">
+                            <input type="text" id="new-source" class="input-block-level" placeholder="">
+                        </div>
                     </div>
-                </div>
-                <div class="control-group">
-                    <div class="controls">
-                        <label class="checkbox">
-                            <input id="new-multivalued" type="checkbox">{% trans %}Multivalued{% endtrans %}
-                        </label>
-                        <button type="button" class="btn btn-success btn-submit-field"><i class="icon-ok icon-white"></i>{% trans %}Add{% endtrans %}</button>
-                        <button type="button" class="btn btn-cancel-field">{% trans %}Cancel{% endtrans %}</button>
+                    <div class="control-group">
+                        <div class="controls">
+                            <label class="checkbox">
+                                <input id="new-multivalued" type="checkbox">{% trans %}Multivalued{% endtrans %}
+                            </label>
+                            <button type="button" class="btn btn-success btn-submit-field"><i class="icon-ok icon-white"></i>{% trans %}Add{% endtrans %}</button>
+                            <button type="button" class="btn btn-cancel-field">{% trans %}Cancel{% endtrans %}</button>
+                        </div>
                     </div>
-                </div>
-            </form>
+                </form>
+            </div>
         </div>
     </div>
-</div>
-
-<div class="row-fluid">
-    <div class="span12">
-        <ul id="collection-fields" class="unstyled" style="height:450px;overflow: auto;">
-
-        </ul>
+    <div class="row-fluid">
+        <div class="span12">
+            <ul id="collection-fields" class="unstyled"></ul>
+        </div>
     </div>
-</div>
 </script>
 
 <script type="text/template" id="edit_template">
-    <div style="padding: 5px 20px">
+    <div class="edit-block">
         <table>
-            <tr style="height: 50px;">
+            <tr class="edit-order">
                 <td>{% trans %}Order{% endtrans %}:</td>
                 <td><%= field.sorter %></td>
                 <td><button type="button" class="btn btn-danger delete-field pull-right"><i class="icon-trash icon-white"></i>delete</button></td>
             </tr>
-            <tr style="height: 60px;">
-                <td colspan="2"><input id="name" style="font-size:28px;color:#0080FF;height:42px;line-height:42px; font-weight:bold" value="<%= field.name %>" class="input-block-level"></td>
+            <tr class="edit-name">
+                <td colspan="2">
+                    <input id="name" value="<%= field.name %>" class="input-block-level">
+                </td>
             </tr>
             <tr>
                 <td>{% trans %}Source{% endtrans %} : </td>
@@ -94,16 +90,15 @@
                 </tr>
             <% } %>
         </table>
-
         <div class="edit-form">
-            <h4 style="padding: 10px 0;">{% trans  %}Advanced field parameter{% endtrans %}</h4>
+            <h4>{% trans  %}Advanced field parameter{% endtrans %}</h4>
             <table>
                 <tr>
-                    <td><label for="">{% trans %}Thesaurus branch{% endtrans %}</label></td>
+                    <td><label for="tbranch">{% trans %}Thesaurus branch{% endtrans %}</label></td>
                     <td><input id="tbranch" type="text" value="<%= field.tbranch %>"/></td>
                 </tr>
                 <tr>
-                    <td><label for="">{% trans %}Vocabulary type{% endtrans %}</label></td>
+                    <td><label for="vocabulary-type">{% trans %}Vocabulary type{% endtrans %}</label></td>
                     <td>
                         <select id="vocabulary-type" class="input-block-level">
                             <% _.each(vocabularyTypes, function(vocab) { %>
@@ -113,7 +108,7 @@
                     </td>
                 </tr>
                 <tr>
-                    <td><label for="">{% trans %}Type{% endtrans %}</label></td>
+                    <td><label for="type">{% trans %}Type{% endtrans %}</label></td>
                     <td>
                         <select id="type" class="input-block-level">
                             <option value=""></option>
@@ -125,32 +120,32 @@
                     </td>
                 </tr>
                 <tr>
-                    <td colspan="2"><label for="" class="checkbox"><input id="business" type="checkbox" <%= field.business ? "checked='checked'" : "" %> />{% trans %}Business Fields{% endtrans %}</label></td>
+                    <td colspan="2"><label for="business" class="checkbox"><input id="business" type="checkbox" <%= field.business ? "checked='checked'" : "" %> />{% trans %}Business Fields{% endtrans %}</label></td>
                 </tr>
                 <tr>
-                    <td colspan="2"><label for="" class="checkbox"><input id="vocabulary-restricted" type="checkbox" <%= field["vocavulary-restricted"] ? "checked='checked'" : "" %> />{% trans %}Limited vocabulary{% endtrans %}</label></td>
+                    <td colspan="2"><label for="vocabulary-restricted" class="checkbox"><input id="vocabulary-restricted" type="checkbox" <%= field["vocavulary-restricted"] ? "checked='checked'" : "" %> />{% trans %}Limited vocabulary{% endtrans %}</label></td>
                 </tr>
                 <tr>
-                    <td><label for="">{%  trans %}Separator{% endtrans %}</label></td>
+                    <td><label for="separator">{%  trans %}Separator{% endtrans %}</label></td>
                     <td><input id="separator" type="text" value="<%= field.separator %>" /></td>
                 </tr>
             </table>
-            <h4  style="padding: 10px 0;">{% trans  %}display & action settings{% endtrans %}</h4>
+            <h4>{% trans  %}display & action settings{% endtrans %}</h4>
             <table>
                 <tr>
-                    <td colspan="2"><label for="" class="checkbox"><input id="required" type="checkbox" <%= field.required ? "checked='checked'" : "" %> />{% trans %}Mandatory{% endtrans %}</label></td>
+                    <td colspan="2"><label for="required" class="checkbox"><input id="required" type="checkbox" <%= field.required ? "checked='checked'" : "" %> />{% trans %}Mandatory{% endtrans %}</label></td>
                 </tr>
                 <tr>
-                    <td colspan="2"><label for="" class="checkbox"><input id="indexable" type="checkbox" <%= field.indexable ? "checked='checked'" : "" %> />{% trans %}Indexable{% endtrans %}</label></td>
+                    <td colspan="2"><label for="indexable" class="checkbox"><input id="indexable" type="checkbox" <%= field.indexable ? "checked='checked'" : "" %> />{% trans %}Indexable{% endtrans %}</label></td>
                 </tr>
                 <tr>
-                    <td colspan="2"><label for="" class="checkbox"><input id="readonly" type="checkbox" <%= field.readonly ? "checked='checked'" : "" %> />{% trans  %}Read only{% endtrans %}</label></td>
+                    <td colspan="2"><label for="readonly" class="checkbox"><input id="readonly" type="checkbox" <%= field.readonly ? "checked='checked'" : "" %> />{% trans  %}Read only{% endtrans %}</label></td>
                 </tr>
                 <tr>
-                    <td colspan="2"><label for="" class="checkbox"><input id="report" type="checkbox" <%= field.report ? "checked='checked'" : "" %> />{% trans %}Report{% endtrans %}</label></td>
+                    <td colspan="2"><label for="report" class="checkbox"><input id="report" type="checkbox" <%= field.report ? "checked='checked'" : "" %> />{% trans %}Report{% endtrans %}</label></td>
                 </tr>
                 <tr>
-                    <td><label for="">{% trans %}Display thumbnails{% endtrans %}</label></td>
+                    <td><label for="thumbtitle">{% trans %}Display thumbnails{% endtrans %}</label></td>
                     <td>
                         <select id="thumbtitle" class="input-block-level">
                             <option value="1" <%= field.thumbtitle == "1" ? "selected" : "" %> >{% trans 'Tous' %}</option>
@@ -159,7 +154,7 @@
                             <option value="nl" <%= field.thumbtitle == "nl" ? "selected" : "" %> >{% trans 'Dutch' %}</option>
                             <option value="de" <%= field.thumbtitle == "de" ? "selected" : "" %> >{% trans 'Allemand' %}</option>
                             <option value="en" <%= field.thumbtitle == "en" ? "selected" : "" %> >{% trans 'Anglais' %}</option>
-                            <option value="ar" <%= field.thumbtitle == "    r" ? "selected" : "" %> >{% trans 'Arabe' %}</option>
+                            <option value="ar" <%= field.thumbtitle == "ar" ? "selected" : "" %> >{% trans 'Arabe' %}</option>
                         </select>
                     </td>
                 </tr>
@@ -170,21 +165,21 @@
 
 
 <script type="text/template" id="list_row_template">
-    <table style="table-layout:fixed;width:100%;">
+    <table>
         <tr>
-            <td class="handle" style="width: 10%; vertical-align:middle;text-align:center;cursor: move;">
+            <td class="handle">
                 <i class="icon-move"></i>
             </td>
-            <td rowspan="2" class="trigger-click" style="padding:10px">
+            <td rowspan="2" class="trigger-click">
                 <div class="field-name"><%= name %></div>
                 <div class="field-tag"><%= tag %></div>
             </td>
-            <td rowspan="2" class="trigger-click" style="width: 10%;padding:10px;">
+            <td rowspan="2" class="chip trigger-click">
                 <i class="icon-chevron-right"></i>
             </td>
         </tr>
         <tr>
-            <td class="position" style="width: 10%; vertical-align:bottom;text-align: center">
+            <td class="position">
                 <%= position %>
             </td>
         </tr>
diff --git a/www/scripts/apps/admin/fields/main.js b/www/scripts/apps/admin/fields/main.js
index 748e149adb..732974a5c0 100644
--- a/www/scripts/apps/admin/fields/main.js
+++ b/www/scripts/apps/admin/fields/main.js
@@ -7,7 +7,7 @@ require.config({
         backbone: '../assets/backbone-amd/backbone',
         twig: '../assets/twig/twig',
         i18n: '../assets/i18n/i18next.amd',
-        bootstrap: ['//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min']
+        bootstrap: '../skins/html5/bootstrap/js/bootstrap.min'
     },
     shim: {
         twig: {
diff --git a/www/scripts/apps/admin/fields/views/add.js b/www/scripts/apps/admin/fields/views/add.js
deleted file mode 100644
index 973d2cb754..0000000000
--- a/www/scripts/apps/admin/fields/views/add.js
+++ /dev/null
@@ -1,51 +0,0 @@
-define([
-    'underscore',
-    'backbone',
-    'i18n'
-], function( _, Backbone, i18n, bootstrap) {
-    var AddView = Backbone.View.extend({
-        tagName: "div",
-        className: "add-field-block",
-        style: "display:none;",
-        events: {
-            "click .btn-submit-field": "createAction"
-        },
-        initialize: function() {},
-        render: function() {
-            var template = _.template($("#alert_template").html(), {
-                msg: this.msg
-            });
-
-            this.$el.after(template);
-
-            return this;
-        },
-        createAction: function(event) {
-            var self = this;
-
-            var field = new FieldModel({
-                "name": "AA" + new Date().getUTCMilliseconds(),
-                "tag": "IPTC:ObjectName"
-            }, {
-                sbas_id: AdminFieldApp.sbas_id
-            });
-
-            field.save(null, {
-                success: function(field) {
-                    self.collection.add(field);
-                    _.last(self.itemViews).clickAction().animate();
-                    new AlertView({alert: 'success', message: 'A new field has been created'}).render();
-                },
-                error: function() {
-                    new AlertView({alert: 'error', message: 'Something wrong happened'}).render();
-                }
-            });
-        },
-        destroy: function() {
-            this.remove();
-        }
-    });
-
-   return AddView;
-});
-
diff --git a/www/scripts/apps/admin/fields/views/alert.js b/www/scripts/apps/admin/fields/views/alert.js
index 5b93fdbf85..5e9208c21c 100644
--- a/www/scripts/apps/admin/fields/views/alert.js
+++ b/www/scripts/apps/admin/fields/views/alert.js
@@ -33,4 +33,4 @@ define([
     });
 
     return AlertView;
-});
\ No newline at end of file
+});
diff --git a/www/scripts/apps/admin/fields/views/dcField.js b/www/scripts/apps/admin/fields/views/dcField.js
index 2ad1310099..4b16c49618 100644
--- a/www/scripts/apps/admin/fields/views/dcField.js
+++ b/www/scripts/apps/admin/fields/views/dcField.js
@@ -7,7 +7,7 @@ define([
         tagName: "div",
         className: "input-append",
         events: {
-            "change select": "onChange"
+            "change select": "selectChangedAction"
         },
         render: function() {
             var template = _.template($("#dc_fields_template").html(), {
@@ -18,7 +18,7 @@ define([
 
             return this;
         },
-        onChange: function(e) {
+        selectChangedAction: function(e) {
             var index = $(e.target)[0].selectedIndex;
             this.$el.closest('table').find('.dces-help-block').empty().append(this.collection.at(index).get('definition'));
         }
@@ -26,4 +26,3 @@ define([
 
    return DcFieldsView;
 });
-
diff --git a/www/scripts/apps/admin/fields/views/edit.js b/www/scripts/apps/admin/fields/views/edit.js
index f06b03c963..1597b1406b 100644
--- a/www/scripts/apps/admin/fields/views/edit.js
+++ b/www/scripts/apps/admin/fields/views/edit.js
@@ -11,8 +11,8 @@ define([
         className: "field-edit",
         initialize: function() {
             this.model.on('change', this.render, this);
-            this.model.on('change:name', this.onFieldChange, this);
-            this.model.on('change:tag', this.onFieldChange, this);
+            this.model.on('change:name', this.onModelFieldChange, this);
+            this.model.on('change:tag', this.onModelFieldChange, this);
 
             this.dcFieldsSubView = new DcFieldView({
                 collection: window.AdminFieldApp.dcFieldsCollection
@@ -54,19 +54,18 @@ define([
         },
         events: {
             "click .delete-field": "deleteAction",
-            "focusout input[type=text]": "fieldChanged",
-            "change input[type=checkbox]": "fieldChanged",
-            "change select": "selectionChanged"
+            "focusout input[type=text]": "fieldChangedAction",
+            "change input[type=checkbox]": "fieldChangedAction",
+            "change select": "selectionChangedAction"
         },
-        selectionChanged: function(e) {
+        selectionChangedAction: function(e) {
             var field = $(e.currentTarget);
             var value = $("option:selected", field).val();
             var data = {};
             data[field.attr('id')] = value;
             this.model.set(data);
         },
-        fieldChanged: function(e) {
-    console.log('field change');
+        fieldChangedAction: function(e) {
             var field = $(e.currentTarget);
             var data = {};
             data[field.attr('id')] = field.is(":checkbox") ? field.is(":checked") : field.val();
@@ -108,8 +107,7 @@ define([
 
             return this;
         },
-        onFieldChange: function() {
-            console.log('on field changed');
+        onModelFieldChange: function() {
             AdminFieldApp.fieldListView.collection.remove(this.model, {silent: true});
             AdminFieldApp.fieldListView.collection.add(this.model);
             this.render();
@@ -118,13 +116,11 @@ define([
             var selectors;
             if (_.isObject(selector)) {
                 selectors = selector;
-            }
-            else {
+            } else {
                 selectors = {};
                 selectors[selector] = view;
             }
-            if (!selectors)
-                return;
+            if (!selectors) return;
             _.each(selectors, function(view, selector) {
                 view.setElement(this.$(selector)).render();
             }, this);
diff --git a/www/scripts/apps/admin/fields/views/list.js b/www/scripts/apps/admin/fields/views/list.js
index cc2234e079..031973913f 100644
--- a/www/scripts/apps/admin/fields/views/list.js
+++ b/www/scripts/apps/admin/fields/views/list.js
@@ -13,7 +13,7 @@ define([
             "click .btn-submit-field": "createAction",
             "click .btn-add-field": "toggleCreateFormAction",
             "click .btn-cancel-field": "toggleCreateFormAction",
-            "update-sort": "onUpdateSort"
+            "update-sort": "updateSortAction"
         },
         initialize: function() {
             // Store all single rendered views
@@ -73,9 +73,6 @@ define([
 
             this.$listEl.sortable({
                 handle: ".handle",
-                start: function () {
-                    console.log('start', AdminFieldApp.fieldEditView.model.get('id'));
-                },
                 stop: function(event, ui) {
                     ui.item.trigger('drop', ui.item.index());
                 }
@@ -84,7 +81,7 @@ define([
             this.$listEl.disableSelection();
 
             this.$listEl.find('li:last').addClass('last');
-            
+
             return this;
         },
         searchAction: function(event) {
@@ -126,7 +123,7 @@ define([
         toggleCreateFormAction: function(event) {
             $('.add-field-block', this.$el).toggle();
         },
-        onUpdateSort: function(event, model, position) {
+        updateSortAction: function(event, model, position) {
             this.collection.remove(model, {silent: true});
 
             this.collection.each(function(model, index) {
@@ -139,7 +136,9 @@ define([
             this.collection.add(model, {at: position});
 
             // update edit view
-            AdminFieldApp.fieldEditView.model = this.collection.find(function(el) { return el.get('id') === AdminFieldApp.fieldEditView.model.get('id') });
+            AdminFieldApp.fieldEditView.model = this.collection.find(function(el) {
+                return el.get('id') === AdminFieldApp.fieldEditView.model.get('id');
+            });
         }
     });
 
diff --git a/www/scripts/apps/admin/fields/views/modal.js b/www/scripts/apps/admin/fields/views/modal.js
index 418937676d..5e7c504cb6 100644
--- a/www/scripts/apps/admin/fields/views/modal.js
+++ b/www/scripts/apps/admin/fields/views/modal.js
@@ -41,4 +41,3 @@ define([
 
    return ModalView;
 });
-
diff --git a/www/skins/admin/css/fields.css b/www/skins/admin/css/fields.css
index 2b138563eb..fee0e093cf 100644
--- a/www/skins/admin/css/fields.css
+++ b/www/skins/admin/css/fields.css
@@ -1,3 +1,7 @@
+#admin-field-app h4 {
+    padding: 10px 0;
+}
+
 #admin-field-app li {
     background: #FFF;
     border-top: 1px solid #ccc;
@@ -5,15 +9,41 @@
     border-right: 1px solid #ccc;
 }
 
+#admin-field-app li table {
+    table-layout:fixed;
+    width:100%;
+}
+
 #admin-field-app li .field-name {
     font-weight: bold;
     font-size: 16px;
     color: #666;
 }
 
+#admin-field-app li .handle {
+    width: 10%;
+    vertical-align:middle;
+    text-align:center;
+    cursor: move;
+}
+
+#admin-field-app li .trigger-click {
+    padding:10px;
+}
+
+#admin-field-app li .position {
+    width: 10%;
+    vertical-align:bottom;
+    text-align: center
+}
+
+#admin-field-app li .chip {
+    width:10%;
+}
+
 #admin-field-app li .handle, #admin-field-app li .position {
-   color: #ccc;
-   border-right: 1px solid #ccc;
+    color: #ccc;
+    border-right: 1px solid #ccc;
 }
 
 #admin-field-app li.last {
@@ -51,6 +81,35 @@
     min-width: 220px;
 }
 
+#admin-field-app .sidebar-block {
+    margin: 20px 0;
+}
+
+#admin-field-app #collection-fields {
+    height:450px;
+    overflow: auto;
+}
+
+#admin-field-app .edit-block {
+    padding: 5px 20px
+}
+
+#admin-field-app .edit-block .edit-order {
+    height: 50px;
+}
+
+#admin-field-app .edit-block .edit-name {
+    height: 60px;
+}
+
+#admin-field-app .edit-block input#name {
+    font-size:28px;
+    color:#0080FF;
+    height:42px;
+    line-height:42px;
+    font-weight:bold
+}
+
 .ui-autocomplete-admin-field {
     list-style-type: none;
     overflow-y: scroll;
@@ -69,5 +128,3 @@
 .ui-autocomplete-admin-field li a {
     text-decoration: none;
 }
-
-