diff --git a/components/line-graph.riot b/components/line-graph.riot
index 36a953c..f8abce8 100644
--- a/components/line-graph.riot
+++ b/components/line-graph.riot
@@ -1,6 +1,6 @@
 <line-graph>
 
-    <div style="height: inherit;">
+    <div style="height: inherit; width: inherit; padding: inherit; margin: inherit;">
         <canvas style="height: 100%; width: 100%;">
         </canvas>
     </div>
diff --git a/components/school-info.riot b/components/school-info.riot
index ceb82ad..db6a66b 100644
--- a/components/school-info.riot
+++ b/components/school-info.riot
@@ -1,16 +1,24 @@
-<school-info style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;">
-    <div style="position: absolute; top: 10%; left: 25%; width: 50%; height: 80%; background: #FFFFFF">
-        <button onclick={closeWindow}></button>
+<school-info>
+    <div if={state.enabled} style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;">
+        <div style="position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #FFFFFF">
+            <button onclick={closeWindow}>X</button>
+            <p>
+                <h2></h2>
+            </p>
+            <line-graph style="height: 90px; margin: 10px;"></line-graph>
+        </div>
     </div>
 
     <script>
         export default {
             onMounted() {
-                console.log("Test!")
+                this.state.enabled = true
+                this.update()
             },
 
             closeWindow() {
-                
+                this.state.enabled = false
+                this.update()
             }
         }
     </script>
diff --git a/components/search.riot b/components/search.riot
index 026efdf..f97a355 100644
--- a/components/search.riot
+++ b/components/search.riot
@@ -1,16 +1,21 @@
 <search>
-    <label>
-	    <input onkeydown={searchF} type="input" placeholder= {state.placeholder}>
-        <button onclick={back}><</button>
+    <div class="box p-1 m-2">
+	    <div class="columns m-1">
+            <input onkeydown={searchF} class="input" type="input" placeholder={state.placeholder}>
+            <button class="button ml-1" onclick={back}>&lt;</button>
+        </div>
 		<div id="list-formations">
             <ul>
-	            <li each={item in this.state.items}>
-		           <span onclick={()=>filter(item.name)}>{item.name}</span>
-                   <span>{item.count}</span>
+	            <li class="m-1" each={item in this.state.items}>
+		            <button class="button is-fullwidth" onclick={()=>filter(item.name)}>
+                        <span><strong>{item.name}</strong></span>
+                        <div style="margin-left: auto;"></div>
+                        <span class="tag is-primary">{item.count}</span>
+                    </button>
 	            </li>
             </ul>
 		</div>
-    </label>
+    </div>
     <script>
         import PAPI from '../javascript/parcoursup-link.js'
 
diff --git a/index.html b/index.html
index 5812cd9..eac8e68 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,16 @@
 	</head>
 
 	<body>
-		<search></search>
-		<line-graph style="height: 90px;"></line-graph>
-		<school></school>
+		<div class="columns">
+			<div class="column is-one-third">
+				<search></search>
+			</div>
+
+			<div class="column">
+				<school></school>
+			</div>
+		</div>
+
+		<!--<school-info></school-info>-->
 	</body>
 </html>
diff --git a/javascript/components/school.js b/javascript/components/school.js
deleted file mode 100644
index 96b6c8e..0000000
--- a/javascript/components/school.js
+++ /dev/null
@@ -1,12 +0,0 @@
-var school = {
-  css: null,
-  exports: {
-    onMounted() {
-      console.log("Test!");
-    }
-  },
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<main class="container"><div class="block control has-icons-left is-inline-block is-pulled-right"><input class="input" type="search" placeholder="Établissement"/><span class="icon is-small is-left"><i class="fas fa-search"></i></span></div><table class="table is-fullwidth is-hoverable"><thead><tr><th><abbr title="name">Nom</abbr></th><th><abbr title="city">Ville</abbr></th><th><abbr title="dept">Dpt</abbr></th><th><abbr title="moyenne">Moyenne</abbr></th><th><abbr title="selectivite">Sélectivité</abbr></th></tr></thead></table></main>', []),
-  name: 'school'
-};
-
-export { school as default };
diff --git a/javascript/line-graph.js b/javascript/line-graph.js
index 3dba91b..b0ec07e 100644
--- a/javascript/line-graph.js
+++ b/javascript/line-graph.js
@@ -38,19 +38,19 @@ var lineGraph = {
       this.colors = ["#003F5C", "#2F4B7C", "#665191", "#A05195", "#D45087"];
       this.state.data = [{
         name: "P",
-        value: 100
+        value: 52
       }, {
         name: "AB",
-        value: 200
+        value: 43
       }, {
         name: "B",
-        value: 150
+        value: 2
       }, {
         name: "TB",
-        value: 50
+        value: 1
       }, {
         name: "TBF",
-        value: 50
+        value: 0
       }];
       let canvas = this.$("canvas");
       canvas.width = canvas.clientWidth;
@@ -58,7 +58,7 @@ var lineGraph = {
       this.updateCanvas();
     }
   },
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div style="height: inherit;"><canvas style="height: 100%; width: 100%;"></canvas></div>', []),
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div style="height: inherit; width: inherit; padding: inherit; margin: inherit;"><canvas style="height: 100%; width: 100%;"></canvas></div>', []),
   name: 'line-graph'
 };
 
diff --git a/javascript/school-info.js b/javascript/school-info.js
index f024830..16ab736 100644
--- a/javascript/school-info.js
+++ b/javascript/school-info.js
@@ -2,10 +2,37 @@ var schoolInfo = {
   css: null,
   exports: {
     onMounted() {
-      console.log("Test!");
+      this.state.enabled = true;
+      this.update();
+    },
+    closeWindow() {
+      this.state.enabled = false;
+      this.update();
     }
   },
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div><div></div></div>', []),
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div expr33="expr33" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;"></div>', [{
+    type: bindingTypes.IF,
+    evaluate: _scope => _scope.state.enabled,
+    redundantAttribute: 'expr33',
+    selector: '[expr33]',
+    template: template('<div style="position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #FFFFFF"><button expr34="expr34">X</button><p><h2></h2></p><line-graph expr35="expr35" style="height: 90px; margin: 10px;"></line-graph></div>', [{
+      redundantAttribute: 'expr34',
+      selector: '[expr34]',
+      expressions: [{
+        type: expressionTypes.EVENT,
+        name: 'onclick',
+        evaluate: _scope => _scope.closeWindow
+      }]
+    }, {
+      type: bindingTypes.TAG,
+      getComponent: getComponent,
+      evaluate: _scope => 'line-graph',
+      slots: [],
+      attributes: [],
+      redundantAttribute: 'expr35',
+      selector: '[expr35]'
+    }])
+  }]),
   name: 'school-info'
 };
 
diff --git a/javascript/search.js b/javascript/search.js
index ca1e7a1..4a31128 100644
--- a/javascript/search.js
+++ b/javascript/search.js
@@ -114,9 +114,9 @@ var search = {
       }
     };
   },
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<label><input expr0="expr0" type="input"/><button expr1="expr1"><</button><div id="list-formations"><ul><li expr2="expr2"></li></ul></div></label>', [{
-    redundantAttribute: 'expr0',
-    selector: '[expr0]',
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div class="box p-1 m-2"><div class="columns m-1"><input expr674="expr674" class="input" type="input"/><button expr675="expr675" class="button ml-1">&lt;</button></div><div id="list-formations"><ul><li expr676="expr676" class="m-1"></li></ul></div></div>', [{
+    redundantAttribute: 'expr674',
+    selector: '[expr674]',
     expressions: [{
       type: expressionTypes.EVENT,
       name: 'onkeydown',
@@ -127,8 +127,8 @@ var search = {
       evaluate: _scope => _scope.state.placeholder
     }]
   }, {
-    redundantAttribute: 'expr1',
-    selector: '[expr1]',
+    redundantAttribute: 'expr675',
+    selector: '[expr675]',
     expressions: [{
       type: expressionTypes.EVENT,
       name: 'onclick',
@@ -138,29 +138,33 @@ var search = {
     type: bindingTypes.EACH,
     getKey: null,
     condition: null,
-    template: template('<span expr3="expr3"> </span><span expr4="expr4"> </span>', [{
-      redundantAttribute: 'expr3',
-      selector: '[expr3]',
+    template: template('<button expr677="expr677" class="button is-fullwidth"><span><strong expr678="expr678"> </strong></span><div style="margin-left: auto;"></div><span expr679="expr679" class="tag is-primary"> </span></button>', [{
+      redundantAttribute: 'expr677',
+      selector: '[expr677]',
       expressions: [{
-        type: expressionTypes.TEXT,
-        childNodeIndex: 0,
-        evaluate: _scope => _scope.item.name
-      }, {
         type: expressionTypes.EVENT,
         name: 'onclick',
         evaluate: _scope => () => _scope.filter(_scope.item.name)
       }]
     }, {
-      redundantAttribute: 'expr4',
-      selector: '[expr4]',
+      redundantAttribute: 'expr678',
+      selector: '[expr678]',
+      expressions: [{
+        type: expressionTypes.TEXT,
+        childNodeIndex: 0,
+        evaluate: _scope => _scope.item.name
+      }]
+    }, {
+      redundantAttribute: 'expr679',
+      selector: '[expr679]',
       expressions: [{
         type: expressionTypes.TEXT,
         childNodeIndex: 0,
         evaluate: _scope => _scope.item.count
       }]
     }]),
-    redundantAttribute: 'expr2',
-    selector: '[expr2]',
+    redundantAttribute: 'expr676',
+    selector: '[expr676]',
     itemName: 'item',
     indexName: null,
     evaluate: _scope => _scope.state.items
diff --git a/style/parcoursup.css b/style/parcoursup.css
index e69de29..1bdae61 100644
--- a/style/parcoursup.css
+++ b/style/parcoursup.css
@@ -0,0 +1,7 @@
+body, html {
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    background-color: #EFEFEF;
+}
\ No newline at end of file
