diff --git a/src/components/global/selector/selector.riot b/src/components/global/selector/selector.riot
index b0a3d19..38a6dac 100644
--- a/src/components/global/selector/selector.riot
+++ b/src/components/global/selector/selector.riot
@@ -1,12 +1,14 @@
 <selector>
     <style>
         #selector {
-            width: 300px;
+            width: 500px;
             height: auto;
+            max-height: 700px;
             padding: 20px;
             box-shadow: 0px 0px 9px 1px black;
             background: #7A90A4;
             border-radius: 10px;
+            overflow: auto;
         }
 
         #selector
@@ -50,7 +52,7 @@
 
         #selector
         #selector-list-container
-        #selector-list
+        .selector-list
         .selector-list-inner {
             display: flex;
             flex-direction: row;
@@ -61,7 +63,7 @@
 
         #selector
         #selector-list-container
-        #selector-list
+        .selector-list
         .selector-list-names {
             text-decoration: none;
             color: white;
@@ -71,7 +73,7 @@
 
         #selector
         #selector-list-container
-        #selector-list
+        .selector-list
         .selector-list-names:hover {
             background: #344D59;
             cursor: pointer;
@@ -81,7 +83,7 @@
 
         #selector
         #selector-list-container
-        #selector-list
+        .selector-list
         .selector-list-counts {
             color: white;
             background: green;
@@ -105,12 +107,8 @@
              * */
             state: {
                 page: {
-                    curIndex: 0,
-                    cat: {
-                        option1: null, /* BTS, Licence etc... */
-                        option2: null, /* Service, Production etc... */
-                        option3: null /* Une ecole qui fait un BTS Prod par exemple */
-                    },
+                    curIndex: 0, // section n.0 -> n.2
+                    cat: null,
                     name: [
                         "formation",
                         "filière de formation",
@@ -123,11 +121,20 @@
             /**
              * Retourner a la section n-1
              * */
-            previousPage(){
+            previousPage(event){
                 try {
-                    console.log(this.state.page.cat.option1)
                     if(this.state.page.curIndex-1 >= 0) {
-                        this.update({ curIndex: this.state.page.curIndex-- });
+                        if(this.state.page.curIndex === 0) {
+                            this.debug("finish")
+                        } else if(this.state.page.curIndex === 1) {
+                            this.getDataSection0(this.state.page.cat)
+                        } else if(this.state.page.curIndex === 2) {
+                            this.getDataSection1(this.state.page.cat)
+                        }
+
+                        if(this.state.page.curIndex !== 0) { // Sinon ca va aller trop loin a la section 2
+                            this.update({ curIndex: this.state.page.curIndex-- });
+                        }
                     }
                 } catch(e) {
                     console.error(e)
@@ -136,31 +143,38 @@
 
             /**
              * Aller a la section n+1
-             * @param choice Choix fait par l'utilisateur a la section n
+             * @param event Choix fait par l'utilisateur a la section n
              * todo: Faire en sorte de refaire des calls api en fonction de la section choisit (this.getSpecFor(nom_formation:String) et this.getSpecPlusFor(nom_formation:String)
              * */
-            nextPage(choice) {
+            nextPage(event) {
                 try {
-                    if(this.state.page.curIndex+1 <= 2 ) {
+                    if(this.state.page.curIndex+1 <= 3 ) {
                         if(this.state.page.curIndex === 0) {
-                            this.update({ option1: "fsef", option2: "fefs", option3: "fe"  })
-                            console.log(this.state.page.cat)
-                        } else if(this.state.page.curIndex+1 === 1) {
-                            this.update({ option2: choice })
-                        } else if(this.state.page.curIndex+1 === 2) {
-                            this.update({option3: choice})
+                            this.state.page.cat = `${ event.target.textContent }`
+                            this.getDataSection1(event.target.textContent)
+                        } else if(this.state.page.curIndex === 1) {
+                            this.getDataSection2(this.state.page.cat)
+                        } else if(this.state.page.curIndex === 2) {
+                            this.debug("finish")
+                        }
+
+                        if(this.state.page.curIndex !== 2) { // Sinon ca va aller trop loin a la section 2
+                            this.update({ curIndex: this.state.page.curIndex++ });
                         }
-                        this.update({ curIndex: this.state.page.curIndex++ });
                     }
+
+                    this.debug(this.state.page.cat)
                 } catch(e) {
                     console.error(e)
                 }
             },
 
+            debug(mess) { console.log(mess) },
+
             /**
              * Pour recuperer les données directement depuis l'API avec la facet: "fili"
              * */
-            async getData() {
+            async getDataSection0() {
                 try {
                     const api = "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin";
                     const response = await fetch(api);
@@ -171,8 +185,22 @@
                 }
             },
 
+            async getDataSection1(fili) {
+                const api = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&rows=0&sort=tri&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.fili=${ fili }&timezone=Europe%2FBerlin`
+                const response = await fetch(api);
+                const data = await response.json();
+                this.update({ data: data.facet_groups[1].facets });
+            },
+
+            async getDataSection2(spec) {
+                const api = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&rows=0&sort=tri&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.fili=${ spec }&timezone=Europe%2FBerlin`
+                const response = await fetch(api);
+                const data = await response.json();
+                this.update({ data: data.facet_groups[2].facets });
+            },
+
             onBeforeMount() {
-                this.getData();
+                this.getDataSection0();
             },
         };
     </script>
@@ -190,23 +218,30 @@
 
             <button
                     if={ this.state.page.curIndex > 0 }
-                    onclick={ previousPage }
+                    onclick={ this.previousPage }
                     id="selector-top-btn">
                 &lt;
             </button>
         </div>
 
         <div id="selector-list-container">
-            <ul if={ this.state.page.curIndex === 0 } id="selector-list">
+            <ul if={ this.state.page.curIndex === 0 } class="selector-list">
                 <li each={ item in this.state.data } class="selector-list-inner">
-                    <a onclick={ () => { nextPage(item.name) } } class="selector-list-names">{ item.name }</a>
+                    <a onclick={ nextPage } class="selector-list-names">{ item.name }</a>
                     <span class="selector-list-counts">{ item.count }</span>
                 </li>
             </ul>
 
-            <ul if={ this.state.page.curIndex === 1 }>
+            <ul if={ this.state.page.curIndex === 1 } class="selector-list">
                 <li each={ item in this.state.data } class="selector-list-inner">
-                    <a onclick={ () => { nextPage(item.name) } } class="selector-list-names">{ item.name }</a>
+                    <a onclick={ nextPage } class="selector-list-names">{ item.name }</a>
+                    <span class="selector-list-counts">{ item.count }</span>
+                </li>
+            </ul>
+
+            <ul if={ this.state.page.curIndex === 2 } class="selector-list">
+                <li each={ item in this.state.data } class="selector-list-inner">
+                    <a onclick={ nextPage } class="selector-list-names">{ item.name }</a>
                     <span class="selector-list-counts">{ item.count }</span>
                 </li>
             </ul>