diff -r 97536386b397 -r 57d63a248f0d client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Navbar.js	Fri Aug 31 15:14:18 2018 +0200
@@ -12,14 +12,15 @@
 import { groupSetCurrent } from '../actions/groupActions';
 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
+import CreateSession from './CreateSession';
 import NavbarLogin from './NavbarLogin';
 import NavbarGroup from './NavbarGroup';
 
 const Online = ({ online }) => {
   return (
-    <li>
-      <a>
-        <span  className="material-icons navs" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
+    <li className="nav-item">
+      <a className="nav-link">
+        <span  className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
       </a>
     </li>
   )
@@ -40,8 +41,8 @@
 
   if (isAuthenticated) {
     return (
-      <li>
-        <a title={title} onClick={clickCb} id={id || null}>
+      <li className="nav-item">
+        <a className="nav-link" title={title} onClick={clickCb} id={id || null}>
         <span className={classnames}>&#xE627;</span> </a>
       </li>
     );
@@ -62,6 +63,10 @@
     this.state = { modalIsOpen: false };
   }
 
+  componentWillMount() {
+    Modal.setAppElement('body');
+}
+
   openModal = () => {
     this.setState({modalIsOpen: true});
   }
@@ -129,24 +134,29 @@
 
   render() {
     return (
-      <nav className="navbar navbar-inverse navbar-fixed-top">
+      <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
         <div className="container-fluid">
-          <div className="navbar-header">
-            <a id="brand" 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>
+        <div className="navbar-header">
+        <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+        <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span className="navbar-toggler-icon"></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 className="navs" onClick={this.onClickSessions} href="/sessions">Accueil</a>
+          <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
+            <ul className="navbar-nav mr-auto">
+              <li className="nav-item">
+                <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Accueil</a>
               </li>
             </ul>
-            <ul className="nav navbar-nav navbar-right">
+            <ul className="navbar-nav navbar-center">
+                <li className="nav-item text-secondary">
+                  {/* <CreateSession history={this.props.history}/> */}
+                </li>
+            </ul>
+            <ul className="nav navbar-nav ml-auto">
               <NavbarGroup 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} />
@@ -161,7 +171,7 @@
           >
             <div id="logout-modal" className="modal-content text-center">
               {/* <div className="modal-body"> */}
-              <button type="button" id="logout-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+              <button type="button" id="logout-close-modal-button" className="btn btn-default float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
               <span className="material-icons modal-warning">warning</span>
                 <p className="modal-text">
                   Certaines données n'ont pas encore été sauvegardées.
@@ -169,7 +179,7 @@
                   Si vous continuez, elles seront perdues.
                 </p>
               <div className="modal-footer">
-              <button type="button" className="btn btn-primary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
+              <button type="button" className="btn btn-primary text-secondary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
               </div>
             </div>
           </Modal>