diff --git a/package.json b/package.json
index af4b1b4..34354d7 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.23.0",
+    "gravatar": "^1.6.0",
     "vue": "^2.2.6",
     "vue-material": "^0.7.1",
     "vue-meta": "^0.5.5",
diff --git a/src/components/layout/AppShell.vue b/src/components/layout/AppShell.vue
index 5f72d21..3d554c6 100644
--- a/src/components/layout/AppShell.vue
+++ b/src/components/layout/AppShell.vue
@@ -1,18 +1,20 @@
 <template>
   <main>
     <sidebar ref="sidebar" />
-    <md-toolbar>
-      <md-button class="md-icon-button hamburger" @click.native="toggleSidebar">
-        <md-icon>menu</md-icon>
-      </md-button>
-      <h1 class="md-title">{{ $route.meta.title || "Sympa" }}</h1>
-      <md-button class="md-icon-button">
-        <md-icon>more_vert</md-icon>
-      </md-button>
-    </md-toolbar>
-    <section class="page-content">
-      <router-view></router-view>
-    </section>
+    <div class="main-container">
+      <md-toolbar>
+        <md-button class="md-icon-button hamburger" @click.native="toggleSidebar">
+          <md-icon>menu</md-icon>
+        </md-button>
+        <h1 class="md-title">{{ $route.meta.title || "Sympa" }}</h1>
+        <md-button class="md-icon-button">
+          <md-icon>more_vert</md-icon>
+        </md-button>
+      </md-toolbar>
+      <section class="page-content">
+        <router-view></router-view>
+      </section>
+    </div>
   </main>
 </template>
 
@@ -36,12 +38,19 @@ export default {
 .md-toolbar > .md-title {
   flex: 1;
 }
+
+.main-container {
+  height: 100vh;
+  background-color: #F5F5F5;
+}
+
 .page-content {
   padding: 25px;
 }
+
 @media screen and (min-width: 1281px) {
-  #app {
-    padding-left: 280px;
+  .main-container {
+    margin-left: 280px;
   }
   .page-content {
     padding: 18px 48px;
diff --git a/src/components/layout/LoginForm.vue b/src/components/layout/LoginForm.vue
index de58274..97f5c35 100644
--- a/src/components/layout/LoginForm.vue
+++ b/src/components/layout/LoginForm.vue
@@ -12,9 +12,11 @@
           <md-input v-model="username" :disabled="pending" />
         </md-input-container>
 
-        <md-input-container md-has-password>
+        <md-input-container md-has-password :class="{ 'md-input-invalid': errored }">
           <label>Password</label>
           <md-input type="password" v-model="password" :disabled="pending" />
+
+          <span v-if="errored" class="md-error">{{ errorMessage }}</span>
         </md-input-container>
       </md-card-content>
 
diff --git a/src/components/layout/Sidebar.vue b/src/components/layout/Sidebar.vue
index e0364fd..ad06cd4 100644
--- a/src/components/layout/Sidebar.vue
+++ b/src/components/layout/Sidebar.vue
@@ -5,62 +5,73 @@
       <h2>SYMPA</h2>
     </md-toolbar>
     <md-divider></md-divider>
-    <md-list-item class="md-double-line">
-      <md-avatar>
-        <img src="//placehold.it/40x40" alt="avatar">
-      </md-avatar>
-      <div class="md-list-text-container">
-        <b>{{ fullname }}</b>
-        <span>{{ email }}</span>
-      </div>
-      <md-button class="md-icon-button md-list-action">
-        <md-icon>keyboard_arrow_down</md-icon>
-      </md-button>
-    </md-list-item>
-    <md-divider></md-divider>
-    <md-list-item>
-      <router-link :to="{name: 'home'}">
-        <md-icon>dashboard</md-icon>
-        <span>Dashboard</span>
-      </router-link>
-    </md-list-item>
-    <md-list-item>
-      <router-link :to="{name: 'discussions'}">
-        <md-icon>forum</md-icon>
-        <span>Discussions</span>
-      </router-link>
-    </md-list-item>
-    <md-divider></md-divider>
-    <md-list-item>
-      <router-link :to="{name: 'admin'}">
-        <md-icon>work</md-icon>
-        <span>Administration</span>
-      </router-link>
-    </md-list-item>
-    <md-list-item>
-      <router-link :to="{name: 'listmaster'}">
-        <md-icon>list</md-icon>
-        <span>Listmaster Admin</span>
-      </router-link>
-    </md-list-item>
-    <md-list-item>
-      <router-link :to="{name: 'profile'}">
-        <md-icon>person</md-icon>
-        <span>Profile</span>
-      </router-link>
-    </md-list-item>
-    <md-list-item>
-      <router-link :to="{name: 'settings'}">
-        <md-icon>settings</md-icon>
-        <span>Settings</span>
-      </router-link>
-    </md-list-item>
-    <md-list-item>
-      <router-link :to="{name: 'about'}">
-        <md-icon>help</md-icon>
-        <span>About/Help</span>
-      </router-link>
-    </md-list-item>
+    <md-list class="sidebar-user">
+      <md-list-item class="md-double-line">
+        <md-avatar>
+          <img :src="picture" alt="avatar">
+        </md-avatar>
+        <div class="sidebar-user-meta">
+          <div class="sidebar-user-fullname">{{ fullname }}</div>
+          <div class="sidebar-user-email">{{ email }}</div>
+        </div>
+
+        <md-list-expand>
+          <md-list>
+            <md-list-item @click.native="logout">
+              Logout
+            </md-list-item>
+          </md-list>
+        </md-list-expand>
+      </md-list-item>
+    </md-list>
+    <md-divider />
+    <md-list>
+      <md-list-item>
+        <router-link exact :to="{name: 'home'}">
+          <md-icon>dashboard</md-icon>
+          <span>Dashboard</span>
+        </router-link>
+      </md-list-item>
+      <md-list-item>
+        <router-link :to="{name: 'discussions'}">
+          <md-icon>forum</md-icon>
+          <span>Discussions</span>
+        </router-link>
+      </md-list-item>
+    </md-list>
+    <md-divider />
+    <md-list>
+      <md-list-item>
+        <router-link :to="{name: 'admin'}">
+          <md-icon>work</md-icon>
+          <span>Administration</span>
+        </router-link>
+      </md-list-item>
+      <md-list-item>
+        <router-link :to="{name: 'listmaster'}">
+          <md-icon>list</md-icon>
+          <span>Listmaster Admin</span>
+        </router-link>
+      </md-list-item>
+      <md-list-item>
+        <router-link :to="{name: 'profile'}">
+          <md-icon>person</md-icon>
+          <span>Profile</span>
+        </router-link>
+      </md-list-item>
+      <md-list-item>
+        <router-link :to="{name: 'settings'}">
+          <md-icon>settings</md-icon>
+          <span>Settings</span>
+        </router-link>
+      </md-list-item>
+      <md-list-item>
+        <router-link :to="{name: 'about'}">
+          <md-icon>help</md-icon>
+          <span>About/Help</span>
+        </router-link>
+      </md-list-item>
+    </md-list>
   </md-sidenav>
 </template>
 
@@ -73,12 +84,19 @@ export default {
     toggle() {
       this.$refs.sidebar.toggle();
     },
+    logout() {
+      this.$store.dispatch('auth/logout');
+    },
   },
-  computed: mapGetters('auth', ['fullname', 'email']),
+  computed: mapGetters('auth', ['fullname', 'email', 'picture']),
 };
 </script>
 
 <style>
+.md-list.md-no-padding {
+  padding: 0;
+}
+
 .md-list-item .md-list-item-container {
   font-weight: 500;
   color: #4F4F4F;
@@ -86,34 +104,49 @@ export default {
   line-height: 48px;
 }
 
-.md-divider {
-  margin: 8px 0;
-}
-
 .md-sidenav .md-sidenav-content {
-  list-style-type: none;
   width: 280px;
 }
 
+.md-sidenav-content, .md-list {
+  /* @TODO: move this in the vue-material theme */
+  background-color: #FAFAFA!important;
+}
+
 .md-sidenav-content .md-toolbar img {
   height: 32px;
   width: 32px;
   margin: 16px;
 }
 
-.md-sidenav-content .md-toolbar + .md-divider {
-  margin-top: 0;
+.md-sidenav-content .md-toolbar h2 {
+  font-weight: 300;
+  font-size: 18px;
 }
 
-.md-sidenav-content .md-toolbar h2 {
-  font-weight: 100;
+.sidebar-user {
+  padding: 0;
+}
+
+.sidebar-user > .md-list-item {
+  min-height: 64px;
+}
+
+.sidebar-user-meta {
+  line-height: 18px;
+  margin: 14px 0;
+  font-size: 14px;
+}
+
+.sidebar-user-email {
+  font-weight: 400;
 }
 
 @media screen and (min-width: 1281px) {
   .md-sidenav-content {
     transform: translate3d(0,0,0) !important;
     pointer-events: auto !important;
-    box-shadow: 0 1px 5px rgba(0,0,0,.25) !important;
+    box-shadow: 0 9px 18px 0 rgba(0,0,0,0.18), 0 5px 5px 0 rgba(0,0,0,0.24)!important;
   }
   .md-sidenav-backdrop {
     display: none;
diff --git a/src/store/auth/getters.js b/src/store/auth/getters.js
index 8bae4e0..a475e09 100644
--- a/src/store/auth/getters.js
+++ b/src/store/auth/getters.js
@@ -1,6 +1,9 @@
+import gravatar from 'gravatar';
+
 export const errored = state => state.error !== null;
 export const errorMessage = state => state.error && state.error.message;
 export const pending = state => state.pending;
 export const logged = state => state.user !== null;
 export const fullname = state => (state.user ? `${state.user.name.first} ${state.user.name.last}` : '');
 export const email = state => state.user && state.user.email;
+export const picture = state => state.user && gravatar.url(state.user.email, { s: 128 });
diff --git a/yarn.lock b/yarn.lock
index d791a34..d613278 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -944,6 +944,10 @@ bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.4.7:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
+blueimp-md5@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.7.0.tgz#7f518e0dd70467fefe28ecba398916092f2a02a9"
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.6"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.6.tgz#53344adb14617a13f6e8dd2ce28905d1c0ba3215"
@@ -1698,6 +1702,10 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+email-validator@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-1.0.7.tgz#4621ca32fc741eb833ac98d5fb55670b7e056c95"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -2312,6 +2320,15 @@ graceful-fs@^4.1.2:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
+gravatar@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/gravatar/-/gravatar-1.6.0.tgz#8bdc9b786ca725a8e7076416d1731f8d3331c976"
+  dependencies:
+    blueimp-md5 "^2.3.0"
+    email-validator "^1.0.7"
+    querystring "0.2.0"
+    yargs "^6.0.0"
+
 handle-thing@^1.2.4:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"