diff --git a/html/export_yaml_to_html.py b/html/export_yaml_to_html.py
index 104081e..b87cca7 100644
--- a/html/export_yaml_to_html.py
+++ b/html/export_yaml_to_html.py
@@ -207,7 +207,6 @@ def defineSearchTerm(dictio, url, documents):
     documents[document["code"]] = document
     return
 
-
 # Créer un fichier contenant la liste des saes
 datas = {"data" : saes, "title": "SAEs"} # "data" contient un tableau des saes
 template_List.stream(datas).dump(REPERTOIRE_HTML + "/SAE.html")
@@ -248,14 +247,13 @@ for indexSem, sem in enumerate(ressources):
         defineSearchTerm(data, url, documents)
         template.stream(datas).dump(REPERTOIRE_HTML + "/" + url)
 
-        relations["nodes"].append({"id": data["code"], "type": "Ressource"})
+        relations["nodes"].append({"id": data["code"], "sem": sem, "type": "Ressource"})
         for sae in data["sae"]:
-            if not any(sae in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": sae, "type": "SAE"})
-            relations["links"].append({"source": data["code"], "target": sae, "type": "RessourceToSAE"})
+            relations["links"].append({"source": data["code"], "target": sae, "sem": sem, "type": "RessourceToSAE"})
         for rt in data["acs"]:
             for ac in data["acs"][rt]:
-                if not any(ac in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": ac, "type": "AC"})
-                relations["links"].append({"source": data["code"], "target": ac, "type": "RessourceToAC"})
+                if not any(ac in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": ac, "sem": 0, "type": "AC"})
+                relations["links"].append({"source": data["code"], "target": ac, "sem": sem, "type": "RessourceToAC"})
     
     #Créer un fichier contenant la liste des ressources du semestre
     data = {"data" : ressources[sem],"sem" : sem} # "data" contient un tableau des ressources du semestre
@@ -289,8 +287,8 @@ for indexSem, sem in enumerate(ressources):
             relations["nodes"].append({"id": data["code"], "type": "SAE"})
         for rt in data["acs"]:
             for ac in data["acs"][rt]:
-                if not any(ac in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": ac, "type": "AC"})
-                relations["links"].append({"source": data["code"], "target": ac, "type": "SAEToAC"})
+                if not any(ac in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": ac, "sem": 0, "type": "AC"})
+                relations["links"].append({"source": data["code"], "target": ac, "sem": sem, "type": "SAEToAC"})
 
     for sae in exemples[sem]:
         i = 1 # Nommage des fichiers exemple sae peut être modifier
diff --git a/html/graphTemplate.html b/html/graphTemplate.html
index bd3852f..b1b6ccc 100644
--- a/html/graphTemplate.html
+++ b/html/graphTemplate.html
@@ -4,6 +4,18 @@
 <script src="https://d3js.org/d3.v5.js"></script>
 {% endblock %}
 {% block content %}
+<div class="field is-horizontal">
+    <div class="control">
+        <label class="checkbox">
+            <input id="Semestre1" class="semestre" value="S1" type="checkbox" checked>
+            Semestre 1
+        </label>
+        <label class="checkbox">
+            <input id="Semestre2" class="semestre" value="S2" type="checkbox" checked>
+            Semestre 2
+        </label>
+    </div>
+</div>
 <div class="field is-horizontal">
     <div class="control">
         <label class="checkbox">
diff --git a/html/graphTemplate.js b/html/graphTemplate.js
index a51d31e..8f7697c 100644
--- a/html/graphTemplate.js
+++ b/html/graphTemplate.js
@@ -56,18 +56,38 @@ var node = svg.append("g")
 redraw();
 
 $("document").ready(function() {
-  $(".categorie").click(function() {
-    nodes = []
-    links = []
-    if($("#Ressources").prop("checked")) {graph["nodes"].map(node => {if(node.type == "Ressource"){nodes.push(node);}})}
-    if($("#SAEs").prop("checked")) {
-      if (nodes.length != 0) {graph["links"].map(link => {if(link.type == "RessourceToSAE"){links.push(link);}})}
-      nodes.concat(graph["nodes"].map(node => {if(node.type == "SAE"){nodes.push(node);}}));
+  $("input").click(function() {
+
+    var sem = ["default"];
+    $(".semestre:checked").each(function() { sem.push($(this).val()) });
+
+    var RessourceChecked = $("#Ressources").prop("checked");
+    var SAEChecked = $("#SAEs").prop("checked");
+    var ACChecked = $("#ACs").prop("checked");
+
+    nodes = [];
+    links = [];
+
+    if(RessourceChecked) {
+      graph["nodes"].forEach(node => {
+        if(node.type == "Ressource" && sem.includes(node.sem)) { nodes.push(node); }
+      });
     }
-    if($("#ACs").prop("checked")) {
-      if($("#Ressources").prop("checked")) {graph["links"].map(link => {if(link.type == "RessourceToAC"){links.push(link);}})}
-      if($("#SAEs").prop("checked")) {graph["links"].map(link => {if(link.type == "SAEToAC"){links.push(link);}})}
-      nodes.concat(graph["nodes"].map(node => {if(node.type == "AC"){nodes.push(node);}}));
+
+    if(SAEChecked) {
+      graph["nodes"].forEach(node => {
+        if(node.type == "SAE") { nodes.push(node); }
+      });
+      if (RessourceChecked) {
+        graph["links"].forEach(link => { if(link.type == "RessourceToSAE" && sem.includes(link.sem)) {links.push(link);} })
+      }
+    }
+
+    if(ACChecked) {
+      graph["nodes"].forEach(node => {if(node.type == "AC"){nodes.push(node);}});
+      if(RessourceChecked) {graph["links"].forEach(link => {if(link.type == "RessourceToAC" && sem.includes(link.sem)){links.push(link);}})}
+      if(SAEChecked) {graph["links"].forEach(link => {if(link.type == "SAEToAC" && sem.includes(link.sem)){links.push(link);}})}
+      
     }
     redraw();
   });
@@ -88,19 +108,21 @@ function redraw() {
       .call(drag(simulation))
 
   node.append("rect")
-        .attr("width", 20)
-        .attr("height", 10)
-        .attr("x", -10)
-        .attr("y", -5)
-        .attr("rx", 5)
-        .attr("ry", 5)
-        .attr("fill", function(d) { return color(d.type); })
+    .attr("width", 20)
+    .attr("height", 10)
+    .attr("x", -10)
+    .attr("y", -5)
+    .attr("rx", 5)
+    .attr("ry", 5)
+    .attr("fill", function(d) { return color(d.type); })
 
   node.append("text")
-        .attr("style", "user-select: none")
-        .text(d => d.id)
-        .attr("dx", 7)
-        .attr("dy", 12)
+    .attr("style", "user-select: none")
+    .attr("dx", 7)
+    .attr("dy", 12)
+    .append("a")
+      .attr("href", d => d.id.replace("É", "E") + ".html")
+      .text(d => d.id)
 
   simulation.nodes(nodes);
   simulation.force("links", d3.forceLink(links).id(node => node.id).distance(100));