diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..ad8d1fe
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets" : ["es2015", "react"]
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..204a52d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+client/build
diff --git a/client/src/nav/Nav.jsx b/client/src/nav/Nav.jsx
index 2308064..71dbfb0 100644
--- a/client/src/nav/Nav.jsx
+++ b/client/src/nav/Nav.jsx
@@ -1,7 +1,7 @@
 /**
 * @desc Ce component permet d'intégrer facilement une navbar
 */
-
+import "./Nav.scss"
 class Nav extends React.Component {
 
   // Le HTML qui sera incorporé à chaque fois que <Nav /> est appelé
@@ -13,7 +13,7 @@ class Nav extends React.Component {
           <ul id="nav-mobile" className="right hide-on-med-and-down">
             <li><a href="sass.html">Sass</a></li>
             <li><a href="badges.html">Components</a></li>
-            <li><a href="collapsible.html">JavaScript</a></li>
+            <li className="brand-js"><a href="collapsible.html">JavaScript</a></li>
           </ul>
         </div>
       </nav>
diff --git a/client/src/nav/Nav.scss b/client/src/nav/Nav.scss
new file mode 100644
index 0000000..e8912d3
--- /dev/null
+++ b/client/src/nav/Nav.scss
@@ -0,0 +1,6 @@
+nav .brand-logo {
+	padding-left:20px;
+}
+nav .brand-js {
+	padding-right:20px;
+}
\ No newline at end of file
diff --git a/client/src/sidenav/SideNav.jsx b/client/src/sidenav/SideNav.jsx
index 21a8c45..0d5f38b 100644
--- a/client/src/sidenav/SideNav.jsx
+++ b/client/src/sidenav/SideNav.jsx
@@ -1,13 +1,20 @@
 /**
 * @desc Ce component permet d'intégrer facilement le module sidenav de materialize
 */
-
+import "./sideNav.scss"
 class SideNav extends React.Component {
 
   // S'execute quand le HTML du component est entièrement chargé dans la page
   componentDidMount() {
     // Materialize initie la sidenav
-    $('.button-collapse').sideNav();
+
+    $('.button-collapse').sideNav({
+      menuWidth: 300, // Default is 240
+      edge: 'right', // Choose the horizontal origin
+      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
+      draggable: true // Choose whether you can drag to open on touch screens
+    }
+  );
   }
 
   // Le HTML qui sera incorporé à chaque fois que <SideNav /> est appelé
@@ -29,7 +36,7 @@ class SideNav extends React.Component {
           <li><a className="subheader">Subheader</a></li>
           <li><a className="waves-effect" href="#!">Third Link With Waves</a></li>
         </ul>
-        <a href="#" data-activates="slide-out" className="button-collapse"><i className="material-icons">menu</i></a>
+        <a href="#" data-activates="slide-out" className="right button-collapse"><i className="material-icons">menu</i></a>
       </div>
     )
   }
@@ -38,4 +45,4 @@ class SideNav extends React.Component {
 }
 
 // Export sidenav
-export default SideNav;
\ No newline at end of file
+export default SideNav;
diff --git a/client/src/sidenav/sideNav.scss b/client/src/sidenav/sideNav.scss
new file mode 100644
index 0000000..2e36d9d
--- /dev/null
+++ b/client/src/sidenav/sideNav.scss
@@ -0,0 +1,5 @@
+.material-icons {
+  color: blue;
+
+
+}