diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Navbar.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,16 +1,16 @@
+import './Navbar.css';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 // import logo from './logo.svg';
-import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';
+import { NavDropdown, MenuItem, Modal} from 'react-bootstrap';
 import * as authActions from '../actions/authActions';
 import { forceSync } from '../actions/networkActions';
 import { groupSetCurrent } from '../actions/groupActions';
 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
-import './Navbar.css';
 
 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
 
@@ -26,26 +26,34 @@
 
   if (isAuthenticated) {
     return (
-      <NavDropdown title={ currentUser.get('username') } id="user-dropdown">
-        <MenuItem onClick={onClickSettings}>Settings</MenuItem>
-        <MenuItem onClick={onLogout}>Logout</MenuItem>
-      </NavDropdown>
+          <NavDropdown title={ currentUser.get('username') }>
+              <li>
+                <a  href="#settings" onClick={onClickSettings}>Paramètres</a>
+              </li>
+              <li>
+                <a  href="#logout" onClick={onLogout}>Se déconnecter</a>
+              </li>
+          </NavDropdown>
     );
   }
   return (
-    <NavItem onClick={onClickLogin} href="/login">Login</NavItem>
+      <li>
+      <a onClick={onClickLogin} href="/login">Se connecter</a>
+      </li>
   );
 }
 
 const Online = ({ online }) => {
   return (
-    <NavItem>
-      <span className="material-icons" style={{ color: online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span>
-    </NavItem>
+    <li>
+      <a>
+        <span className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
+      </a>
+    </li>
   )
 }
 
-const SyncButton = ({ onSyncClick, isSynchronizing, isSynchronized, id }) => {
+const SyncButton = ({ isAuthenticated, onSyncClick, isSynchronizing, isSynchronized, id }) => {
   const classnames = "material-icons"
     + ((!isSynchronized)?" sync-button-not-synchronized":"")
     + ((isSynchronizing)?" sync-button-synchronizing":"");
@@ -58,23 +66,34 @@
     title += ": not synchronized";
   }
 
+  if (isAuthenticated) {
+    return (
+      <li>
+        <a title={title} onClick={clickCb} id={id || null}>
+        <span className={classnames}>&#xE627;</span> </a>
+      </li>
+    );
+  }
   return (
-    <NavItem title={title} onClick={clickCb} id={id || null}>
-      <span className={classnames}>&#xE627;</span>
-    </NavItem>
-  )
+      <li>
+        <a>
+          <span></span>
+        </a>
+    </li>
+  );
 }
 
+
 const GroupStatus = ({currentGroup, groups, onSelect}) => {
 
   if(currentGroup) {
     const currentGroupName = currentGroup.get('name');
     return (
-      <NavDropdown title={currentGroupName} id="group-dropdown" onSelect={onSelect}>
+      <NavDropdown title={currentGroupName} onSelect={onSelect}>
         { groups && groups.map((group, key) => {
             const groupName = group.get('name');
             const className = (groupName === currentGroupName)?'active':null;
-            return <MenuItem className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
+          return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
           }
         )}
         <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem>
@@ -149,38 +168,46 @@
 
   render() {
     return (
-      <Navbar fluid inverse fixedTop>
-        <Navbar.Header>
-          <Navbar.Brand>
-            <a onClick={this.onClickHome} href="/">IRI Notes</a>
-          </Navbar.Brand>
-          <Navbar.Toggle />
-        </Navbar.Header>
-        <Navbar.Collapse>
-          <Nav>
-            <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
-          </Nav>
-          <Nav pullRight>
-            <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
-            <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
-            <Online {...this.props} />
-            <LoginNav {...this.props} onLogout={this.onClickLogout} />
-          </Nav>
-        </Navbar.Collapse>
-        <Modal show={this.state.showModal} onHide={this.closeModal}>
-          <Modal.Body>
-            <p className="text-center">
-              Some data is not synchronized with server.
-              <br />
-              If you continue, it will be lost.
-            </p>
-          </Modal.Body>
-          <Modal.Footer>
-            <Button bsStyle="primary" onClick={this.confirmLogout}>Confirm</Button>
-            <Button onClick={this.closeModal}>Close</Button>
-          </Modal.Footer>
-        </Modal>
-      </Navbar>
+      <nav className="navbar navbar-inverse navbar-fixed-top">
+        <div className="container-fluid">
+          <div className="navbar-header">
+            <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+              <span className="sr-only">Toggle navigation</span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+            </button>
+          </div>
+          <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <ul className="nav navbar-nav">
+              <li>
+                <a onClick={this.onClickSessions} href="/sessions">Accueil</a>
+              </li>
+            </ul>
+            <ul className="nav navbar-nav navbar-right">
+              <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
+              <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
+              <Online {...this.props} />
+              <LoginNav {...this.props} onLogout={this.onClickLogout} />
+            </ul>
+          </div>
+          <Modal show={this.state.showModal} onHide={this.closeModal}>
+            <Modal.Body>
+              <p className="text-center">
+                Certaines données n'ont pas encore été sauvegardées.
+                <br />
+                Si vous continuez, elles seront perdues.
+              </p>
+            </Modal.Body>
+            <Modal.Footer>
+              <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
+              <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      </nav>
+
     );
   }
 }