diff --git a/src/ScoDoc/GestionSemestre.js b/src/ScoDoc/GestionSemestre.js
index 6292ece..c48336a 100644
--- a/src/ScoDoc/GestionSemestre.js
+++ b/src/ScoDoc/GestionSemestre.js
@@ -5,6 +5,7 @@ import Absences from "./GestionSemestre/Absences";
 import Eleves from "./GestionSemestre/Eleves";
 import ScoNavBar from "./ScoNavBar";
 import {Link} from "react-router-dom";
+import Bulletin from "./GestionSemestre/Bulletin";
 
 class GestionSemestre extends Component {
     render() {
@@ -19,12 +20,15 @@ class GestionSemestre extends Component {
                         <Tab eventKey="Absences" title="Absences">
                             <Absences />
                         </Tab>
+                        <Tab eventKey="Bulletin" title="Bulletins">
+                            <Bulletin />
+                        </Tab>
                         <Tab eventKey="Eleves" title="Eleves">
                             <Eleves />
                         </Tab>
                     </Tabs>
                 </div>
-                <footer className="fixed-bottom">
+                <footer>
                     <div style={{background: "#cccccc", padding: "5px"}}>
                         <Link to={`/${window.location.href.split('/')[3]}/Scolarite`}>
                             <Button type="button" className="btn waves-effect waves-light btn-primary">Retour au choix de semestre</Button>
diff --git a/src/ScoDoc/GestionSemestre/Bulletin.js b/src/ScoDoc/GestionSemestre/Bulletin.js
new file mode 100644
index 0000000..e4746ed
--- /dev/null
+++ b/src/ScoDoc/GestionSemestre/Bulletin.js
@@ -0,0 +1,158 @@
+import React, {Component} from "react";
+import Select from "react-select";
+import {Table} from "react-bootstrap"
+import '../Style.css'
+
+class Bulletin extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectOptions: [],
+            id: "",
+            name: '',
+            bltn: {},
+            datue: {},
+            loaded: false
+        };
+        this.getData = this.getData.bind(this);
+        this.getJsonData = this.getJsonData.bind(this);
+    }
+
+    componentWillMount() {
+        let dept = window.location.href.split('/')[3]
+        let sem = window.location.href.split('/')[5]
+        let BASE_URL = window.$api_url
+        fetch(BASE_URL + dept +
+            '/Scolarite/Notes/groups_view?with_codes=1&format=json&formsemestre_id=' + sem, {
+            method: 'GET',
+            verify: false,
+            credentials: 'include',
+        })
+            .then(response =>
+                response.json().then(data => ({
+                        data: data,
+                    })
+                ).then(res => {
+                    res.data.map((student, index) => {
+                        let joined = this.state.selectOptions.concat({label: student.nom_disp + " " + student.prenom, value: student.etudid});
+                        this.setState({selectOptions: joined})
+                    })
+                })
+            );
+    }
+
+    getJsonData () {
+        this.setState({bltn: require('..\\..\\json\\bltn.json')}, () => {
+            let ls = {}
+            for (let elm in this.state.bltn.decision_ue) {
+                elm = this.state.bltn.decision_ue[elm]
+                ls[elm.acronyme] = elm.titre
+            }
+            this.setState({datue: ls}, () => {
+                this.setState({loaded: true})
+            })
+        })
+
+    }
+
+    getData() {
+        let dept = window.location.href.split('/')[3]
+        let sem = window.location.href.split('/')[5]
+        let BASE_URL = window.$api_url
+        fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_bulletinetud?formsemestre_id=' +
+            sem +'&etudid=' + this.state.id +'&format=json', {
+            method: 'GET',
+            verify: false,
+            credentials: 'include',
+        })
+            .then(response =>
+                response.json().then(data => ({
+                        data: data,
+                        status: response.status
+                    })
+                ).then(res => {
+                    this.setState({ bltn: res.data }, () => {
+                        let ls = {}
+                        for (let elm in this.state.bltn.decision_ue) {
+                            elm = this.state.bltn.decision_ue[elm]
+                            ls[elm.acronyme] = elm.titre
+                        }
+                        this.setState({datue: ls}, () => {
+                            this.setState({loaded: true})
+                        })
+                    })
+                })
+            );
+    }
+
+    handleSelectChange(e){
+        this.setState({id:e.value, name:e.label}, () => {this.getData()})
+    }
+
+    render() {
+        return (
+            <div className="wrapper">
+                <h1 id="pageTitle">Bulletins de notes</h1>
+                <Select className="mySelect" options={this.state.selectOptions} onChange={this.handleSelectChange.bind(this)}/>
+                {this.state.loaded === true &&
+                <div>
+                    <h2>Bulletin de {this.state.name}</h2>
+                    <Table responsive="sm">
+                        <thead>
+                            <tr>
+                                <th colSpan="3"/>
+                                <th>Rang</th>
+                                <th colSpan="2">Promotion</th>
+                                <th>Note/20</th>
+                                <th>Coef.</th>
+                            </tr>
+                            <tr className="smallRow">
+                                <th colSpan="4"/>
+                                <th>Mini</th>
+                                <th>Maxi</th>
+                                <th colSpan="2"/>
+                            </tr>
+                            <tr className="bigRow">
+                                <th colSpan="3">Moyenne générale</th>
+                                <th>{this.state.bltn.rang.value}/{this.state.bltn.rang.ninscrits}</th>
+                                <th>{this.state.bltn.note.min}</th>
+                                <th>{this.state.bltn.note.max}</th>
+                                <th>{this.state.bltn.note.value}</th>
+                                <th/>
+                            </tr>
+                        </thead>
+                        {this.state.bltn.ue.map((ue, index) => {
+                            return (
+                                <tbody>
+                                    <tr className="ueRow">
+                                        <td colSpan="3">{ue.acronyme} - {this.state.datue[ue.acronyme]}</td>
+                                        <td>{ue.rang}/{this.state.bltn.rang.ninscrits}</td>
+                                        <td>{ue.note.min}</td>
+                                        <td>{ue.note.max}</td>
+                                        <td>{ue.note.value}</td>
+                                        <td>{/*Coef*/}</td>
+                                    </tr>
+                                    {ue.module.map((mod, index) => {
+                                        return (
+                                            <tr>
+                                                <td colSpan="3">{mod.titre}</td>
+                                                <td>{mod.rang.value}/{this.state.bltn.rang.ninscrits}</td>
+                                                <td>{mod.note.min}</td>
+                                                <td>{mod.note.max}</td>
+                                                <td>{mod.note.value}</td>
+                                                <td>{mod.coefficient}</td>
+                                            </tr>
+                                        )
+                                    })}
+                                </tbody>
+                            )
+                        })}
+                    </Table>
+                </div>
+                }
+            </div>
+        )
+    }
+}
+
+export default Bulletin
\ No newline at end of file
diff --git a/src/ScoDoc/Style.css b/src/ScoDoc/Style.css
index 2beba8e..404e023 100644
--- a/src/ScoDoc/Style.css
+++ b/src/ScoDoc/Style.css
@@ -1,9 +1,5 @@
 /* BASIC */
 
-html {
-    background-color: #56baed;
-}
-
 body {
     font-family: "Poppins", sans-serif;
     height: 100vh;
@@ -96,13 +92,6 @@ a {
     border-radius: 0 0 10px 10px;
 }
 
-body {
-    /* Margin bottom by footer height */
-    margin-bottom: 100px;
-}
-
-/* FORM TYPOGRAPHY*/
-
 input[type=button], button[type=submit], input[type=reset]  {
     background-color: #56baed;
     border: none;
@@ -174,10 +163,6 @@ input[type=text]::placeholder, input[type=password]::placeholder {
     width: 100%;
 }
 
-
-
-/* OTHERS */
-
 *:focus {
     outline: none;
 }
@@ -188,4 +173,19 @@ input[type=text]::placeholder, input[type=password]::placeholder {
 
 .mySelect {
     min-width: 200px;
+}
+
+.smallRow {
+    line-height: 60%;
+    font-size: 70%;
+}
+
+.ueRow {
+    background: #5bc0de ;
+    color: white;
+    font-weight: bold;
+}
+
+thead {
+    background: lightgray;
 }
\ No newline at end of file