diff --git a/browser/js/info.js b/browser/js/info.js
index 2df40ed7223a9aab85614da2f606e9b3291b6538..a4650280d9d88dd6b59aa4acdb234de7d5390903 100644
--- a/browser/js/info.js
+++ b/browser/js/info.js
@@ -332,7 +332,7 @@ Info.prototype = {
         var keys = 0;
 
         var key_list = this.m.system_available;
-        key_list.sort();
+        
 
         var last_key = "";
 
diff --git a/browser/js/model_loader.js b/browser/js/model_loader.js
index 3e136b3b84a38c3b349adabc82c02a15e7dc80f4..e9d2d53acafdb1a7bc6a7893d6257bfdd707ed4b 100644
--- a/browser/js/model_loader.js
+++ b/browser/js/model_loader.js
@@ -325,6 +325,8 @@ Model_loader.prototype = {
                 self.system_available.push(system)
             }
         }
+        self.system_available.sort(locus_cmp)
+
         for (var sa in self.system_available){
             system = this.system_available[sa]
             self.system_selected.push(system)
diff --git a/browser/js/tools.js b/browser/js/tools.js
index 08e9b49dcd1efcb1ef8275b518a452ac7fa1b2f5..090671723ec95eaf028a4cda817bd5322ae7d3e4 100644
--- a/browser/js/tools.js
+++ b/browser/js/tools.js
@@ -4,7 +4,7 @@ var INS="insertion";
 var DEL="deletion";
 var END_CODON = "end-codon ";
 var END_CODON_NOT_FIRST = "end-codon-not-first ";
-
+var LOCUS_ORDER = [ "TRA", "TRB", "TRB+", "TRG", "TRD", "TRA+D", "TRD+", "IGH", "IGH+", "IGK", "IGK+", "IGL"]
 /**
  * Get codons from two aligned sequences
  * @pre both sequences are aligned together ref.length == seq.length
@@ -648,3 +648,34 @@ function pearsonCoeff(l1, l2) {
 }
 
 function logadd1(x) { return Math.log(x + 1) ; }
+
+
+
+/**
+ * Compare two locus to sort them.
+ * The list is ordered on a preordered list of locus (LOCUS_ORDER).
+ * By this way, locus that are not in this list will be added at the end of it.
+ * @param  {String} valA One locus value
+ * @param  {String} valB Another locus value to compare
+ * @return {Number}      A number -1 if A before B, else 1
+ */
+function locus_cmp(valA, valB){
+    // Ordered list of all  generic locus 
+    var index_A = LOCUS_ORDER.indexOf(valA)
+    var index_B = LOCUS_ORDER.indexOf(valB)
+
+    if (index_A == -1 && index_B == -1){
+        // Neither A or B are present in LOCUS_ORDER
+        return valA.localeCompare(valB)
+    } else if (index_A != -1 && index_B == -1){
+        // Only A is present in LOCUS_ORDER
+        return -1
+    } else if (index_A == -1 && index_B != -1){
+        // Only B is present in LOCUS_ORDER
+        return 1
+    } else if (index_A != -1 && index_B != -1){
+        // A & B are present in LOCUS_ORDER
+        return index_A - index_B
+    }
+    return 0
+}
diff --git a/browser/test/QUnit/testFiles/info_test.js b/browser/test/QUnit/testFiles/info_test.js
index d2aa2eb75b636ea2c28d226032160e676456b1fc..ac8056ac8b0c8dfcc6ca7ce2bc17d5f081367f32 100644
--- a/browser/test/QUnit/testFiles/info_test.js
+++ b/browser/test/QUnit/testFiles/info_test.js
@@ -49,8 +49,8 @@ QUnit.test("read details", function(assert) {
 
     m.keep_one_active_system('IGH')
     var sbnm = document.getElementsByClassName('systemBoxNameMenu')
-    assert.includes(sbnm[0].outerHTML, '<span class="systemBoxNameMenu IGH">', 'system box IGH is still active')
-    assert.includes(sbnm[1].outerHTML, '<span class="systemBoxNameMenu inactive TRG">', 'system box TRG is inactive')
+    assert.includes(sbnm[0].outerHTML, '<span class="systemBoxNameMenu inactive TRG">', 'system box TRG is inactive')
+    assert.includes(sbnm[1].outerHTML, '<span class="systemBoxNameMenu IGH">', 'system box IGH is still active')
 
     var reads = document.getElementsByClassName('reads_details')[0]
     assert.includes(reads.outerHTML, 'analyzed reads</span><span>200 (100.00%)', 'read details: analyzed reads (same than before)')
diff --git a/browser/test/QUnit/testFiles/tools_test.js b/browser/test/QUnit/testFiles/tools_test.js
index 72979b71bd456cae663151c2abd8fe4768600511..0490034cda925d82542e0d3511dd5d2173e1a552 100644
--- a/browser/test/QUnit/testFiles/tools_test.js
+++ b/browser/test/QUnit/testFiles/tools_test.js
@@ -393,3 +393,19 @@ QUnit.test("Pearson coefficient", function(assert) {
     assert.equal(pearsonCoeff([3, 2, 1], [10, 20, 30]), -1)
     }
 );
+
+
+QUnit.test("Sort list locus", function(assert) {
+
+    list_test_1 = [ "TRA", "TRB", "TRG", "TRD", "testlocus", "IGH", "IGK", "IGL"]
+    wait_test_1 = [ "TRA", "TRB", "TRG", "TRD", "IGH", "IGK", "IGL", "testlocus"]
+    list_test_2 = [ "IGH", "IGH+", "unknow_locus", "IGK+", "IGL", "testlocus", "TRA", "TRB", "TRB+", "TRG", "TRD"]
+    wait_test_2 = [ "TRA", "TRB", "TRB+", "TRG", "TRD", "IGH", "IGH+", "IGK+", "IGL", "testlocus", "unknow_locus"]
+    
+    list_test_1.sort(locus_cmp)
+    list_test_2.sort(locus_cmp)
+
+    assert.deepEqual(list_test_1, wait_test_1, "list2 is correctly sorted")
+    assert.deepEqual(list_test_2, wait_test_2, "list2 is correctly sorted")
+    }
+);
diff --git a/browser/test/functional/test_multilocus.rb b/browser/test/functional/test_multilocus.rb
index d3cd057b0fd60d55c162f053b7b72f19c83407a7..78f597373c59ebb3b2c68e057fce14aa364c5767 100644
--- a/browser/test/functional/test_multilocus.rb
+++ b/browser/test/functional/test_multilocus.rb
@@ -31,7 +31,7 @@ class TestMultilocus < BrowserTest
   end
 
   def test_00_germline
-    assert ($b.div(:id => 'info').span(:class => 'systemBoxNameMenu', :index => 2).text.include? 'TRA'), 'missing system TRA'
+    assert ($b.div(:id => 'info').span(:class => 'systemBoxNameMenu', :index => 0).text.include? 'TRA'), 'missing system TRA'
   end
 
   def test_00_legend_scatterplot