diff --git a/css/carets.css b/css/carets.css
new file mode 100644
index 0000000..f898e41
--- /dev/null
+++ b/css/carets.css
@@ -0,0 +1,47 @@
+.ul_no_list {
+  list-style-type: none;
+}
+
+.caret {
+  cursor: pointer;
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none;
+}
+
+.caret::before {
+  content: "\25B6";
+  color: black;
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.caret-down::before {
+  -ms-transform: rotate(90deg); /* IE 9 */
+  -webkit-transform: rotate(90deg); /* Safari */'
+  transform: rotate(90deg);
+}
+
+.caret_gris {
+  cursor: pointer;
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none;
+}
+
+.caret_gris::before {
+  content: "\25B6";
+  color: grey;
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.nested {
+  display: none;
+}
+
+.active {
+  display: block;
+}
diff --git a/css/niveaux.css b/css/niveaux.css
new file mode 100644
index 0000000..d7f788c
--- /dev/null
+++ b/css/niveaux.css
@@ -0,0 +1,102 @@
+.niveau_0 {
+  background-color: #c0392b;
+  font-weight: bold;
+  color: white;
+}
+
+.niveau_1 {
+  background-color: #e74c3c ;
+  font-weight: normal;
+  color: white;
+}
+
+.niveau_2 {
+  background-color: #9b59b6;
+  font-weight: normal;
+  color: white;
+}
+
+.niveau_3 {
+  background-color: #8e44ad;
+  font-weight: normal;
+}
+
+.niveau_4 {
+  background-color: #2980b9;
+  font-weight: normal;
+}
+
+.niveau_5 {
+  background-color: #3498DB;
+  font-weight: normal;
+}
+
+.niveau_6 {
+  background-color: #1ABC9C;
+  font-weight: normal;
+}
+
+.niveau_7 {
+  background-color: #16A085;
+  font-weight: normal;
+}
+
+.niveau_8 {
+  background-color: #27AE60;
+  font-weight: normal;
+}
+
+.niveau_9 {
+  background-color: #2ECC71;
+  font-weight: normal;
+}
+
+.niveau_10 {
+  background-color: #F1C40F;
+  font-weight: normal;
+}
+
+.niveau_11 {
+  background-color: #F39C12;
+  font-weight: normal;
+}
+
+.niveau_12 {
+  background-color: #E67E22;
+  font-weight: normal;
+}
+
+.niveau_13 {
+  background-color: #D35400;
+  font-weight: normal;
+}
+
+.niveau_14 {
+  background-color: #ECF0F1;
+  font-weight: normal;
+}
+
+.niveau_15 {
+  background-color: #BDC3C7;
+  font-weight: normal;
+}
+
+.niveau_16 {
+  background-color: #95A5A6;
+  font-weight: normal;
+}
+
+.niveau_20 {
+  background-color: #7F8C8D;
+  font-weight: normal;
+}
+
+.niveau_21 {
+  background-color: #34495E;
+  font-weight: normal;
+}
+
+.niveau_22 {
+  background-color: #2C3E50;
+  font-weight: normal;
+}
diff --git a/scripts/main.js b/scripts/main.js
new file mode 100644
index 0000000..79d209b
--- /dev/null
+++ b/scripts/main.js
@@ -0,0 +1,35 @@
+var styles = [ 'niveau_10', 'niveau_9', 'niveau_5', 'niveau_19'];
+
+$( document ).ready(function() {
+
+  $.getJSON( "api/get.php", function( data ) {
+
+    var div = document.getElementById('TREE');
+    var tbl = document.createElement("table");
+    var tblBody = document.createElement("tbody");
+ 
+    data.forEach(function(element){
+      var tr = document.createElement('tr');
+      var td = null;
+
+      td = document.createElement('td');
+      td.appendChild(document.createTextNode(element.code));
+      tr.appendChild(td);
+
+      td = document.createElement('td');
+      td.appendChild(document.createTextNode(element.name));
+      tr.appendChild(td);
+
+      tr.setAttribute('class',styles[element.level % styles.length]);
+      tblBody.appendChild(tr);
+
+    });
+
+   tbl.appendChild(tblBody);
+
+   div.appendChild(tbl);
+
+  });
+
+});
+