diff --git a/public/javascripts/marks.js b/public/javascripts/marks.js
new file mode 100644
index 0000000..0cd6cae
--- /dev/null
+++ b/public/javascripts/marks.js
@@ -0,0 +1,11 @@
+function setVisible(targetId) {
+	document.getElementById("notvisible").id = "visible";
+}
+
+function setNotVisible(targetId) {
+	document.getElementById(targetId).id = "notvisible";
+}
+
+function marksformChange(targetId) {
+	document.getElementById("marksform").style.display = "block";
+}
diff --git a/sass/style.sass b/sass/style.sass
index c0593fc..f3a230b 100644
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -487,4 +487,9 @@ div#visible + div
     border-radius: 2px
     display: block
     margin: auto
-    cursor: pointer
\ No newline at end of file
+    cursor: pointer
+#notvisible
+  display: none
+
+#marksform
+  display: none
diff --git a/views/pages/marks.pug b/views/pages/marks.pug
index d6cc47a..9066d95 100644
--- a/views/pages/marks.pug
+++ b/views/pages/marks.pug
@@ -2,7 +2,7 @@ extends ../template/navbar
 
 block content
     if student === true
-        div(class="marksdetails" id="visibl")
+        div(class="marksdetails" id="notvisible" onclick="setNotVisible(this.getAttribute('id'))")
             table
                 tr
                     th(colspan="2") Details
@@ -22,24 +22,24 @@ block content
                             th(colspan="2") Maths
                     tbody
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
 
@@ -50,17 +50,17 @@ block content
                             th(colspan="2") TP SE
                     tbody
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
 
@@ -71,17 +71,17 @@ block content
                             th(colspan="2") PHP
                     tbody
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
 
@@ -92,17 +92,17 @@ block content
                             th(colspan="2") Anglais
                     tbody
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
                         tr
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 1
                                 p 18/20
-                            td
+                            td(onclick="setVisible(this.getAttribute('id'))")
                                 p DS 2
                                 p 16/20
 
@@ -111,11 +111,11 @@ block content
             div(class="col s12 m10 offset-m1 marksgroup")
                 h3 Select a group
                 div(id="flexgroup")
-                    p G1S1
-                    p G2S2
-                    p G3S3
+                    p(onclick="marksformChange(this.getAttribute('id'))") G1S1
+                    p(onclick="marksformChange(this.getAttribute('id'))") G2S2
+                    p(onclick="marksformChange(this.getAttribute('id'))") G3S3
 
-        form
+        form(id="marksform")
             table(id="markstable")
                 thead
                     tr
diff --git a/views/template/layout.pug b/views/template/layout.pug
index 5fa9957..7abe3e1 100644
--- a/views/template/layout.pug
+++ b/views/template/layout.pug
@@ -16,4 +16,5 @@ html
       div(class="col s10" id="main")
         block content
   script(src="/javascripts/main.js")
+  script(src="/javascripts/marks.js")
   script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")