diff --git a/package-lock.json b/package-lock.json
index c648433..c351407 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13305,6 +13305,14 @@
         }
       }
     },
+    "react-device-detect": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-1.17.0.tgz",
+      "integrity": "sha512-bBblIStwpHmoS281JFIVqeimcN3LhpoP5YKDWzxQdBIUP8S2xPvHDgizLDhUq2ScguLfVPmwfF5y268EEQR60w==",
+      "requires": {
+        "ua-parser-js": "^0.7.24"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -15844,6 +15852,11 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "ua-parser-js": {
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
diff --git a/package.json b/package.json
index 49b3f20..56b3b61 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "js-cookies": "^1.0.4",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
+    "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
diff --git a/src/ScoDoc/ChoixDept.js b/src/ScoDoc/ChoixDept.js
index 1769f07..2c6ef30 100644
--- a/src/ScoDoc/ChoixDept.js
+++ b/src/ScoDoc/ChoixDept.js
@@ -1,7 +1,6 @@
-import {Link} from "react-router-dom";
 import React, {Component} from "react";
+import {Link} from "react-router-dom";
 import './Style.css'
-import SearchStudent from "./SearchStudent";
 
 class ChoixDept extends Component {
     constructor(props) {
@@ -31,7 +30,7 @@ class ChoixDept extends Component {
     render() {
         return (
             <div className="wrapper">
-                <h1>Choix du département</h1>
+                <h1 id="pageTitle">Choix du département</h1>
                 {this.state.depts.map((dept, index) => {
                     return (
                         <div id="wrapDept">
diff --git a/src/ScoDoc/Etudiant.js b/src/ScoDoc/Etudiant.js
index d34aeba..c1a2527 100644
--- a/src/ScoDoc/Etudiant.js
+++ b/src/ScoDoc/Etudiant.js
@@ -77,10 +77,10 @@ class Etudiant extends Component {
                             this.state.etud.email !== "" || this.state.etud.emailperso !== "" ?
                                 <div className="col-sm">
                                     <h4>Contact</h4>
-                                    {this.state.etud.telephone !== "" && "Téléphone: " + this.state.etud.telephone}<br/>
-                                    {this.state.etud.telephonemobile !== "" && "Mobile: " + this.state.etud.telephonemobile}<br/>
-                                    {this.state.etud.email !== "" && "Mail étudiant: " + this.state.etud.email}<br/>
-                                    {this.state.etud.emailperso !== "" && "Mail perso: " + this.state.etud.emailperso}<br/>
+                                    {this.state.etud.telephone !== "" && <a href={'tel:' + this.state.etud.telephone}>Téléphone: {this.state.etud.telephone}</a>}<br/>
+                                    {this.state.etud.telephonemobile !== "" && <a href={'tel:' + this.state.etud.telephonemobile}>Mobile: {this.state.etud.telephonemobile}</a>}<br/>
+                                    {this.state.etud.email !== "" && <a href={'mailto:' + this.state.etud.email}>Mail étudiant: {this.state.etud.email}</a>}<br/>
+                                    {this.state.etud.emailperso !== "" && <a href={'mailto:' + this.state.etud.emailperso}>Mail personnel: {this.state.etud.emailperso}</a>}<br/>
                                 </div>
                             :
                                 <div className="col-sm">Aucun contact disponible</div>
diff --git a/src/ScoDoc/GestionSemestre.js b/src/ScoDoc/GestionSemestre.js
index a4348f3..6dcf3b2 100644
--- a/src/ScoDoc/GestionSemestre.js
+++ b/src/ScoDoc/GestionSemestre.js
@@ -5,22 +5,63 @@ import Absences from "./GestionSemestre/Absences";
 import Eleves from "./GestionSemestre/Eleves";
 import ScoNavBar from "./ScoNavBar";
 import Bulletin from "./GestionSemestre/Bulletin";
+import Select from "react-select";
 
 class GestionSemestre extends Component {
+    constructor(props){
+        super(props)
+        this.state = {
+            selectOptions: [],
+            id: "",
+            name: '',
+        }
+    }
+
+    componentWillMount() {
+        let dept = window.location.href.split('/')[6]
+        let sem = window.location.href.split('/')[8]
+        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})
+                    })
+                })
+            );
+    }
+
+    handleSelectChange(e){
+        this.setState({id:e.value, name:e.label})
+    }
+
     render() {
         return (
             <div>
                 <ScoNavBar/>
+                <div id="wrapDept">
+                    Choix de l'étudiant
+                    <Select className="mySelect" options={this.state.selectOptions} onChange={this.handleSelectChange.bind(this)}/>
+                </div>
                 <div>
                     <Tabs defaultActiveKey="Accueil" id="controlled-tab-example">
-                        <Tab eventKey="Accueil" title="Acceuil">
+                        <Tab eventKey="Accueil" title="Acceuil" >
                             <Accueil />
                         </Tab>
                         <Tab eventKey="Absences" title="Absences">
-                            <Absences />
+                            <Absences id={this.state.id} name={this.state.name}/>
                         </Tab>
                         <Tab eventKey="Bulletin" title="Bulletins">
-                            <Bulletin />
+                            <Bulletin id={this.state.id} name={this.state.name}/>
                         </Tab>
                         <Tab eventKey="Eleves" title="Eleves">
                             <Eleves />
diff --git a/src/ScoDoc/GestionSemestre/Absences.js b/src/ScoDoc/GestionSemestre/Absences.js
index a6796e1..32e5164 100644
--- a/src/ScoDoc/GestionSemestre/Absences.js
+++ b/src/ScoDoc/GestionSemestre/Absences.js
@@ -1,50 +1,29 @@
 import React, {Component} from "react";
 import '../Style.css'
-import Select from 'react-select'
 
 class Absences extends Component {
     constructor(props){
         super(props)
         this.state = {
-            selectOptions: [],
-            id: "",
-            name: '',
             abs: []
         }
     }
 
-    componentWillMount() {
-        let dept = window.location.href.split('/')[6]
-        let sem = window.location.href.split('/')[8]
-        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})
-                    })
-                })
-            );
+    componentDidUpdate(prevProps) {
+        if (prevProps.id !== this.props.id) {
+            this.getData();
+        }
     }
 
-    handleSelectChange(e){
-        this.setState({id:e.value, name:e.label}, () => {this.getData()})
+    componentDidMount() {
+        if (this.props.id !== "") {this.getData()}
     }
 
     getData() {
         let dept = window.location.href.split('/')[6]
         let BASE_URL = window.$api_url
         if (this.state.id !== "") {
-            fetch(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&etudid=" + this.state.id, {
+            fetch(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&etudid=" + this.props.id, {
                 method: 'GET',
                 verify: false,
                 credentials: 'include',
@@ -64,25 +43,26 @@ class Absences extends Component {
         return (
             <div className="wrapper">
                 <h1 id="pageTitle">Gestion des absences</h1>
-                <Select className="mySelect" options={this.state.selectOptions} onChange={this.handleSelectChange.bind(this)}/>
+                {this.props.name !== "" &&
                 <div className="col-sm" id="wrapDept">
-                    {this.state.name !== "" && <h4>Absences de {this.state.name}</h4>}
-                    {(this.state.abs.length === 0 && this.state.name !== "") &&
-                        <h6>Aucune absence de l'élève</h6>
+                    <h4>Absences de {this.props.name}</h4>
+                    {(this.state.abs.length === 0 && this.props.name !== "") &&
+                    <h6>Aucune absence de l'élève</h6>
                     }
                     {this.state.abs.map((abs, index) => {
                         return (
                             <div className="col-sm" id="wrapDept">
                                 <h6>{abs.datedmy} | {abs.matin}</h6>
                                 {abs.motif !== "" &&
-                                    <span>Motif: {abs.motif }</span>
+                                <span>Motif: {abs.motif}</span>
                                 } {abs.exams !== "" &&
-                                    <span>Exam a rattraper: {abs.exams}</span>
-                                }
+                            <span>Exam a rattraper: {abs.exams}</span>
+                            }
                             </div>
                         )
                     })}
                 </div>
+                }
             </div>
         )
     }
diff --git a/src/ScoDoc/GestionSemestre/Bulletin.js b/src/ScoDoc/GestionSemestre/Bulletin.js
index 8eee8c7..a5622be 100644
--- a/src/ScoDoc/GestionSemestre/Bulletin.js
+++ b/src/ScoDoc/GestionSemestre/Bulletin.js
@@ -1,15 +1,12 @@
 import React, {Component} from "react";
 import Select from "react-select";
-import {Table} from "react-bootstrap"
+import {Table, Button, Dropdown} from "react-bootstrap"
 import '../Style.css'
 
 class Bulletin extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            selectOptions: [],
-            id: "",
-            name: '',
             bltn: {},
             datue: {},
             loaded: false
@@ -18,29 +15,6 @@ class Bulletin extends Component {
         this.getJsonData = this.getJsonData.bind(this);
     }
 
-    componentWillMount() {
-        let dept = window.location.href.split('/')[6]
-        let sem = window.location.href.split('/')[8]
-        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 = {}
@@ -60,7 +34,7 @@ class Bulletin extends Component {
         let sem = window.location.href.split('/')[8]
         let BASE_URL = window.$api_url
         fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_bulletinetud?formsemestre_id=' +
-            sem +'&etudid=' + this.state.id +'&format=json', {
+            sem +'&etudid=' + this.props.id +'&format=json', {
             method: 'GET',
             verify: false,
             credentials: 'include',
@@ -85,40 +59,62 @@ class Bulletin extends Component {
             );
     }
 
-    handleSelectChange(e){
-        this.setState({id:e.value, name:e.label}, () => {this.getData()})
+    getPdf() {
+        let BASE_URL = window.$api_url
+        let dept = window.location.href.split('/')[6]
+        let sem = window.location.href.split('/')[8]
+        fetch( BASE_URL + dept + "/Scolarite/Notes/formsemestre_bulletinetud?" +
+            "formsemestre_id=" + sem + "&etudid=" + this.props.id + "&format=pdf&version=selectedevals", {
+            method: 'GET',
+            verify: false,
+            credentials: 'include',
+        })
+            .then( res => res.blob() )
+            .then( blob => {
+                let file = window.URL.createObjectURL(blob);
+                window.location.assign(file);
+            });
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.id !== this.props.id) {
+            this.getData();
+        }
+    }
+
+    componentDidMount() {
+        if (this.props.id !== "") {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)}/>
+                <div style={{"margin-bottom": "20px"}}>
+                    <h1 id="pageTitle">Bulletins de notes</h1>
+                </div>
                 {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/>
+                                <th>
+                                    <Dropdown>
+                                        <Dropdown.Toggle variant="primary" size="sm" id="dropdown-basic">
+                                            {this.state.bltn.note.value}
+                                        </Dropdown.Toggle>
+
+                                        <Dropdown.Menu>
+                                            <Dropdown.Item href="#">Min: {this.state.bltn.note.min}</Dropdown.Item>
+                                            <Dropdown.Item href="#">Max: {this.state.bltn.note.max}</Dropdown.Item>
+                                            <Dropdown.Item href="#">Classement: {this.state.bltn.rang.value}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
+                                        </Dropdown.Menu>
+                                    </Dropdown>
+                                </th>
                             </tr>
                         </thead>
                         {this.state.bltn.ue.map((ue, index) => {
@@ -126,21 +122,38 @@ class Bulletin extends Component {
                                 <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>
+                                        <td>
+                                            <Dropdown>
+                                                <Dropdown.Toggle variant="primary" size="sm" id={ue.acronyme}>
+                                                    {ue.note.value}
+                                                </Dropdown.Toggle>
+
+                                                <Dropdown.Menu>
+                                                    <Dropdown.Item href="#">Min: {ue.note.min}</Dropdown.Item>
+                                                    <Dropdown.Item href="#">Max: {ue.note.max}</Dropdown.Item>
+                                                    <Dropdown.Item href="#">Classement: {ue.rang}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
+                                                </Dropdown.Menu>
+                                            </Dropdown>
+                                        </td>
                                     </tr>
                                     {ue.module.map((mod, index) => {
                                         return (
                                             <tr>
                                                 <td colSpan="3">{mod.titre.replace("&apos;", "'")}</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>
+                                                <td>
+                                                    <Dropdown>
+                                                        <Dropdown.Toggle variant="primary" size="sm" id={mod.code}>
+                                                            {mod.note.value}
+                                                        </Dropdown.Toggle>
+
+                                                        <Dropdown.Menu>
+                                                            <Dropdown.Item href="#">Min: {mod.note.min}</Dropdown.Item>
+                                                            <Dropdown.Item href="#">Max: {mod.note.max}</Dropdown.Item>
+                                                            <Dropdown.Item href="#">Classement: {mod.rang.value}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
+                                                            <Dropdown.Item href="#">Coefficient: {mod.coefficient}</Dropdown.Item>
+                                                        </Dropdown.Menu>
+                                                    </Dropdown>
+                                                </td>
                                             </tr>
                                         )
                                     })}
@@ -148,6 +161,9 @@ class Bulletin extends Component {
                             )
                         })}
                     </Table>
+                    <div>
+                        <Button className="btn-primary" onClick={() => {this.getPdf()}}>Version PDF</Button>
+                    </div>
                 </div>
                 }
             </div>
diff --git a/src/ScoDoc/Login.js b/src/ScoDoc/Login.js
index 2fd5fba..9dee240 100644
--- a/src/ScoDoc/Login.js
+++ b/src/ScoDoc/Login.js
@@ -1,4 +1,6 @@
-import React, {Component} from "react";
+import React, {Component, useState} from "react";
+import { isMobile } from 'react-device-detect';
+import {Modal, Button} from 'react-bootstrap'
 import './Style.css'
 import ChoixDept from "./ChoixDept";
 import ScoNavBar from "./ScoNavBar";
@@ -9,7 +11,7 @@ class Login extends Component {
         this.state = {
             login: "",
             pass: "",
-            status: 0
+            status: 0,
         };
         this.handleChangeLogin = this.handleChangeLogin.bind(this);
         this.handleChangePass = this.handleChangePass.bind(this);
@@ -25,6 +27,8 @@ class Login extends Component {
     }
 
     checkCredentials(e) {
+        e.preventDefault();
+
         let login = this.state.login
         let pass = this.state.pass
 
@@ -41,17 +45,18 @@ class Login extends Component {
         })
             .then(res => {
                 this.setState({ status: res["status"] });
-                console.log("Cookie (get): " + res.headers.get('Set-Cookie'));
-                console.log("Cookie (doc): " + document.cookie);
             })
             .catch(console.log)
-
-        e.preventDefault()
     }
 
+
     render() {
         return (
             <div>
+                {!isMobile &&
+                    // TODO: Redirection mobile/desktop
+                    <span/>
+                }
                 {(this.state.status !== 0 && this.state.status !== 200) &&
                 <div className="wrapper">
                     <div id="errorMsg">
@@ -59,7 +64,7 @@ class Login extends Component {
                     </div>
                 </div>
                 }
-                {this.state.status !== 200 &&
+                {document.cookie === "" &&
                 <div className="wrapper">
                     <div id="formContent">
                         <h2 id="loginTitle">Connexion a ScoDoc</h2>
@@ -73,9 +78,9 @@ class Login extends Component {
                 </div>
                 }
                 <div>
-                    {this.state.status === 200 &&
+                    {document.cookie !== "" &&
                     <ScoNavBar/>
-                    }{this.state.status === 200 &&
+                    }{document.cookie !== "" &&
                     <ChoixDept/>
                     }
                 </div>
diff --git a/src/ScoDoc/ScoNavBar.js b/src/ScoDoc/ScoNavBar.js
index 193c58d..548ab40 100644
--- a/src/ScoDoc/ScoNavBar.js
+++ b/src/ScoDoc/ScoNavBar.js
@@ -1,7 +1,7 @@
 import React, {Component} from "react";
-import {Link, Redirect} from "react-router-dom";
-import './Style.css'
 import {Nav, Navbar, Button, Container} from 'react-bootstrap'
+import { Redirect } from 'react-router-dom';
+import './Style.css'
 
 class ScoNavBar extends Component {
     constructor(props) {
@@ -9,6 +9,7 @@ class ScoNavBar extends Component {
         this.state = {
             login: {},
             semestre: {},
+            logout: false
         };
     }
 
@@ -16,7 +17,7 @@ class ScoNavBar extends Component {
         let BASE_URL = window.$api_url
 
         fetch(BASE_URL + "acl_users/logout")
-            .then(res => {return <Redirect to="/" />})
+            .then(res => {this.setState({logout: true})})
             .catch(console.log)
     }
 
@@ -24,7 +25,7 @@ class ScoNavBar extends Component {
         return (
             <Navbar bg="light" expand="sm">
                 <Container>
-                    <Navbar.Brand>
+                    <Navbar.Brand href={window.$api_url + "static/mobile/"}>
                         <img
                             alt="ScodocLogo"
                             src="/ScoDoc/static/icons/scologo_img.png"
@@ -37,12 +38,14 @@ class ScoNavBar extends Component {
                     <Navbar.Toggle aria-controls="basic-navbar-nav" />
                     <Navbar.Collapse id="basic-navbar-nav">
                         <Nav className="ml-auto">
-                            <Link to="/ScoDoc/static/mobile/">
-                                <Button variant="primary" onClick={() => {this.logout()}}>Déconnexion</Button>
-                            </Link>
+                            <Nav.Link href="/ScoDoc">Version Desktop</Nav.Link>
+                            <Button variant="primary" onClick={() => {this.logout()}}>Déconnexion</Button>
                         </Nav>
                     </Navbar.Collapse>
                 </Container>
+                {this.state.logout === true &&
+                    <Redirect push to={window.$api_url + 'static/mobile/'}/>
+                }
             </Navbar>
         )
     }