diff --git a/src/components/global/etablanalytics/etablanalytics.riot b/src/components/global/etablanalytics/etablanalytics.riot
index 7575321..e94d037 100644
--- a/src/components/global/etablanalytics/etablanalytics.riot
+++ b/src/components/global/etablanalytics/etablanalytics.riot
@@ -1,3 +1,13 @@
 <etablanalytics>
+    <style>
+        etablanalytics {
+            width: 65vw;
+            height: 33vh;
+            max-height: 35vh;
+            font-weight: bold;
+            padding: 15px;
+        }
+    </style>
+
     <p>eta</p>
 </etablanalytics>
\ No newline at end of file
diff --git a/src/components/global/generalytics/generalytics.riot b/src/components/global/generalytics/generalytics.riot
index 94b6494..cf8581e 100644
--- a/src/components/global/generalytics/generalytics.riot
+++ b/src/components/global/generalytics/generalytics.riot
@@ -1,16 +1,16 @@
 <generalytics>
     <style>
         #generalytics {
-            width: 60vw;
-            height: auto;
-            overflow: auto;
+            width: 65vw;
+            height: 57vh;
+            max-height: 57vh;
+            font-weight: bold;
+            padding: 1vw;
         }
 
         #generalytics
         #generalytics-stat-container
         #generalytics-stat-glob {
-            padding: 20px;
-            background: red;
             color: white;
             display: flex;
             flex-direction: column;
@@ -35,32 +35,237 @@
 
         #generalytics
         #generalytics-stat-container
-        #generalytics-stat-gender {
+        #generalytics-stat-gender, #generalytics-stat-bac, #generalytics-stat-mention {
             text-align: center;
-            background: blue;
             color: white;
         }
 
         #generalytics
         #generalytics-stat-container
-        #generalytics-stat-gender
-        .generalytics-gender-progress {
-
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-gender-m, #generalytics-stat-gender-f {
-            padding: 20px;
+        #generalytics-stat-gender-progressbar-container, #generalytics-stat-bac-progressbar-container, #generalytics-stat-mention-progressbar-container {
+            padding: 10px;
             display: flex;
-            justify-content: space-between;
+            width: 100%;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender-legend, #generalytics-stat-bac-legend, #generalytics-stat-mention-legend {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            gap: 3%;
+            align-items: center;
+        }
+
+        /*
+        * A PARTIR DE LA FAUT AUTOMATISER (C'est juste pour chopper le model)
+        */
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender
+        #generalytics-stat-gender-progressbar-container
+        .generalytics-stat-gender-progressbar-h {
+            border-top-right-radius: 1vw;
+            border-bottom-right-radius: 1vw;
+            background: royalblue;
         }
 
         #generalytics
         #generalytics-stat-container
         #generalytics-stat-gender
-        .generalytics-gender-progress {
-            background-color: #000;
+        #generalytics-stat-gender-progressbar-container
+        .generalytics-stat-gender-progressbar-f {
+            border-top-left-radius: 1vw;
+            border-bottom-left-radius: 1vw;
+            background: purple;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-bac
+        #generalytics-stat-bac-progressbar-container
+        .generalytics-stat-bac-progressbar-gen {
+            border-top-left-radius: 1vw;
+            border-bottom-left-radius: 1vw;
+            background: purple;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-bac
+        #generalytics-stat-bac-progressbar-container
+        .generalytics-stat-bac-progressbar-tech {
+            background: royalblue;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-bac
+        #generalytics-stat-bac-progressbar-container
+        .generalytics-stat-bac-progressbar-pro {
+            background: green;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-bac
+        #generalytics-stat-bac-progressbar-container
+        .generalytics-stat-bac-progressbar-aut {
+            border-top-right-radius: 1vw;
+            border-bottom-right-radius: 1vw;
+            background: saddlebrown;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-progressbar-container
+        .generalytics-stat-mention-progressbar-r {
+            border-top-left-radius: 1vw;
+            border-bottom-left-radius: 1vw;
+            background: purple;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-progressbar-container
+        .generalytics-stat-mention-progressbar-ab {
+            background: royalblue;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-progressbar-container
+        .generalytics-stat-mention-progressbar-b {
+            background: green;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-progressbar-container
+        .generalytics-stat-mention-progressbar-tb {
+            background: saddlebrown;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-progressbar-container
+        .generalytics-stat-mention-progressbar-tbf {
+            border-top-right-radius: 1vw;
+            border-bottom-right-radius: 1vw;
+            background: darkred;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        .generalytics-stat-legend-square {
+            width: 2vw;
+            height: 2vw;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender
+        #generalytics-stat-gender-legend
+        #generalytics-stat-gender-legend-h
+        .generalytics-stat-legend-square {
+            background: royalblue;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender
+        #generalytics-stat-gender-legend
+        #generalytics-stat-gender-legend-f
+        .generalytics-stat-legend-square {
+            background: purple;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-bac
+        #generalytics-stat-bac-legend
+        #generalytics-stat-bac-legend-gen
+        .generalytics-stat-legend-square {
+            background: purple;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-bac
+        #generalytics-stat-bac-legend
+        #generalytics-stat-bac-legend-tech
+        .generalytics-stat-legend-square {
+            background: royalblue;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-bac
+        #generalytics-stat-bac-legend
+        #generalytics-stat-bac-legend-pro
+        .generalytics-stat-legend-square {
+            background: green;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-bac
+        #generalytics-stat-bac-legend
+        #generalytics-stat-bac-legend-autre
+        .generalytics-stat-legend-square {
+            background: saddlebrown;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-legend
+        #generalytics-stat-mention-legend-r
+        .generalytics-stat-legend-square {
+            background: purple;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-legend
+        #generalytics-stat-mention-legend-ab
+        .generalytics-stat-legend-square {
+            background: royalblue;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-legend
+        #generalytics-stat-mention-legend-b
+        .generalytics-stat-legend-square {
+            background: green;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-legend
+        #generalytics-stat-mention-legend-tb
+        .generalytics-stat-legend-square {
+            background: saddlebrown;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-mention
+        #generalytics-stat-mention-legend
+        #generalytics-stat-mention-legend-tbf
+        .generalytics-stat-legend-square {
+            background: darkred;
         }
     </style>
 
@@ -91,14 +296,93 @@
             <div id="generalytics-stat-gender">
                 <span>Repartition par genre</span>
 
-                <div id="generalytics-stat-gender-m">
-                    <span>Homme</span>
-                    <progress class="generalytics-gender-progress" max="100" min="40" value="80"/>
+                <div id="generalytics-stat-gender-progressbar-container">
+                    <span class="generalytics-stat-gender-progressbar-f" style="width: 15%;">15% (F)</span>
+                    <span class="generalytics-stat-gender-progressbar-h" style="width: 85%;">85% (H)</span>
                 </div>
 
-                <div id="generalytics-stat-gender-f">
-                    <span>Femme</span>
-                    <progress class="generalytics-gender-progress" max="100" min="40" value="20"/>
+                <div id="generalytics-stat-gender-legend">
+                    <div id="generalytics-stat-gender-legend-f">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>F</span>
+                    </div>
+
+                    <div id="generalytics-stat-gender-legend-h">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>H</span>
+                    </div>
+                </div>
+            </div>
+
+            <div id="generalytics-stat-bac">
+                <span>Repartition par bac</span>
+
+                <div id="generalytics-stat-bac-progressbar-container">
+                    <span class="generalytics-stat-bac-progressbar-gen" style="width: 20%;">20% (Gen.)</span>
+                    <span class="generalytics-stat-bac-progressbar-tech" style="width: 30%;">30% (Tech.)</span>
+                    <span class="generalytics-stat-bac-progressbar-pro" style="width: 25%;">25% (Pro.)</span>
+                    <span class="generalytics-stat-bac-progressbar-aut" style="width: 25%;">25% (Aut.)</span>
+                </div>
+
+                <div id="generalytics-stat-bac-legend">
+                    <div id="generalytics-stat-bac-legend-gen">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>Gen</span>
+                    </div>
+
+                    <div id="generalytics-stat-bac-legend-tech">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>Techno</span>
+                    </div>
+
+                    <div id="generalytics-stat-bac-legend-pro">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>Pro</span>
+                    </div>
+
+                    <div id="generalytics-stat-bac-legend-autre">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>Aut</span>
+                    </div>
+                </div>
+            </div>
+
+            <div id="generalytics-stat-mention">
+                <span>Repartition par mention au bac</span>
+
+                <div id="generalytics-stat-mention-progressbar-container">
+                    <span class="generalytics-stat-mention-progressbar-r" style="width: 10%;">10% (R)</span>
+                    <span class="generalytics-stat-mention-progressbar-ab" style="width: 10%;">10% (AB)</span>
+                    <span class="generalytics-stat-mention-progressbar-b" style="width: 40%;">40% (B)</span>
+                    <span class="generalytics-stat-mention-progressbar-tb" style="width: 29%;">29% (TB)</span>
+                    <span class="generalytics-stat-mention-progressbar-tbf" style="width: 10%;">10% (TBF)</span>
+                </div>
+
+                <div id="generalytics-stat-mention-legend">
+                    <div id="generalytics-stat-mention-legend-r">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>R</span>
+                    </div>
+
+                    <div id="generalytics-stat-mention-legend-ab">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>AB</span>
+                    </div>
+
+                    <div id="generalytics-stat-mention-legend-b">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>B</span>
+                    </div>
+
+                    <div id="generalytics-stat-mention-legend-tb">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>TB</span>
+                    </div>
+
+                    <div id="generalytics-stat-mention-legend-tbf">
+                        <div class="generalytics-stat-legend-square"></div>
+                        <span>TBF</span>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/components/global/selector/selector.riot b/src/components/global/selector/selector.riot
index b1e2bc8..0fdbd0b 100644
--- a/src/components/global/selector/selector.riot
+++ b/src/components/global/selector/selector.riot
@@ -1,10 +1,10 @@
 <selector>
     <style>
         #selector {
-            width: 20vw;
-            height: auto;
-            max-height: 700px;
+            width: 26vw;
+            height: 93.5vh;
             overflow: auto;
+            padding: 2vw;
         }
 
         #selector
@@ -47,6 +47,12 @@
             color: white;
         }
 
+        #selector
+        #selector-list-container {
+            display: flex;
+            flex-direction: column;
+        }
+
         #selector
         #selector-list-container
         .selector-list
diff --git a/src/pages/home.riot b/src/pages/home.riot
index 5b3c63a..bf4027d 100644
--- a/src/pages/home.riot
+++ b/src/pages/home.riot
@@ -9,15 +9,14 @@
 
 		#main-container
 		#right, #left generalytics, #left etablanalytics {
-			padding: 20px;
 			box-shadow: 0px 0px 9px 1px black;
 			background: #7A90A4;
-			border-radius: 10px;
 		}
 
 		#main-container
 		#right {
 			align-self: flex-start;
+			margin-right: 3vw;
 		}
 
 		#main-container
@@ -28,8 +27,21 @@
 			align-self: center;
 		}
 
+		#main-container
+		#left
+		generalytics {
+			margin-bottom: 1.5vw;
+		}
 	</style>
 
+	<script>
+		import * as riot from "riot";
+
+		riot.mount("selector", document.getElementById("right"))
+		riot.mount("generalytics", document.getElementById("left"))
+		riot.mount("etablanalytics", document.getElementById("left"))
+	</script>
+
 	<div id="main-container">
 		<div id="right">
 			<selector />