diff --git a/Gemfile b/Gemfile
index e8157d1d..5f560163 100644
--- a/Gemfile
+++ b/Gemfile
@@ -43,6 +43,7 @@ end
 gem 'haml-rails'
 gem 'compass-rails', '1.1.3'
 gem 'modernizr-rails'
+gem 'gritter'
 gem 'activeadmin', github: 'gregbell/active_admin'
 gem 'rails-i18n'
 gem 'devise-i18n'
diff --git a/Gemfile.lock b/Gemfile.lock
index cc21fe0d..86e2e0f1 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -101,6 +101,7 @@ GEM
     formtastic (2.3.0.rc2)
       actionpack (>= 3.0)
     fssm (0.2.10)
+    gritter (1.1.0)
     guard (2.5.1)
       formatador (>= 0.2.4)
       listen (~> 2.6)
@@ -251,6 +252,7 @@ DEPENDENCIES
   compass-rails (= 1.1.3)
   devise-i18n
   font-awesome-rails
+  gritter
   guard-bundler
   guard-livereload
   guard-minitest
diff --git a/app/assets/images/alert.png b/app/assets/images/alert.png
new file mode 100644
index 00000000..ecff8f59
Binary files /dev/null and b/app/assets/images/alert.png differ
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e834774a..9e2fadda 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -15,4 +15,5 @@
 //= require jquery.turbolinks
 //= require turbolinks
 //= require modernizr
+//= require gritter
 //= require_tree .
diff --git a/app/assets/javascripts/events.js.coffee b/app/assets/javascripts/events.js.coffee
index c3e57ba8..721fba75 100644
--- a/app/assets/javascripts/events.js.coffee
+++ b/app/assets/javascripts/events.js.coffee
@@ -1,11 +1,8 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/
-#
 $(document).ready ->
   $('form.region_selector select').change ->
     this.form.submit()
 
-  selector = $('main form.region_selector + h2')
-  year = selector.html().substr selector.html().search(/\d{4}</), 4
-  selector.html selector.html().replace(/\d{4}</, '<a class="year_selector" href="?year='+year+'">'+year+'</a><')
+  $('main form.region_selector + h2').each ->
+    selector = $(this)
+    year = selector.html().substr selector.html().search(/\d{4}</), 4
+    selector.html selector.html().replace(/\d{4}</, '<a class="year_selector" href="?year='+year+'">'+year+'</a><')
diff --git a/app/assets/javascripts/flash.js.coffee b/app/assets/javascripts/flash.js.coffee
new file mode 100644
index 00000000..c5c63c5e
--- /dev/null
+++ b/app/assets/javascripts/flash.js.coffee
@@ -0,0 +1,6 @@
+$(document).ready ->
+  $('#flash_messages .flash').removeClass('flash').each ->
+    jQuery.gritter.add
+      image: "/assets/#{$(this).attr('class')}.png",
+      title: $(this).children('h2').text(),
+      text: $(this).children('p').text()
diff --git a/app/assets/stylesheets/all.css.sass b/app/assets/stylesheets/all.css.sass
index 71c10911..0d9ba95b 100644
--- a/app/assets/stylesheets/all.css.sass
+++ b/app/assets/stylesheets/all.css.sass
@@ -35,6 +35,9 @@ a:link, a:visited
 a:hover, a:active, a:focus
   color: #2E97FF
 
+.js #flash_messages
+  display: none
+
 header.top
   position: relative
   h1
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 3192ec89..a3ea6c2f 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -8,6 +8,7 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
+ *= require gritter
  *= require_self
  *= require_tree .
  */
diff --git a/app/assets/stylesheets/scaffolds.css.scss b/app/assets/stylesheets/scaffolds.css.scss
deleted file mode 100644
index 6ec6a8ff..00000000
--- a/app/assets/stylesheets/scaffolds.css.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-body {
-  background-color: #fff;
-  color: #333;
-  font-family: verdana, arial, helvetica, sans-serif;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-p, ol, ul, td {
-  font-family: verdana, arial, helvetica, sans-serif;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-pre {
-  background-color: #eee;
-  padding: 10px;
-  font-size: 11px;
-}
-
-a {
-  color: #000;
-  &:visited {
-    color: #666;
-  }
-  &:hover {
-    color: #fff;
-    background-color: #000;
-  }
-}
-
-div {
-  &.field, &.actions {
-    margin-bottom: 10px;
-  }
-}
-
-#notice {
-  color: green;
-}
-
-.field_with_errors {
-  padding: 2px;
-  background-color: red;
-  display: table;
-}
-
-#error_explanation {
-  width: 450px;
-  border: 2px solid red;
-  padding: 7px;
-  padding-bottom: 0;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
-  h2 {
-    text-align: left;
-    font-weight: bold;
-    padding: 5px 5px 5px 15px;
-    font-size: 12px;
-    margin: -7px;
-    margin-bottom: 0px;
-    background-color: #c00;
-    color: #fff;
-  }
-  ul li {
-    font-size: 12px;
-    list-style: square;
-  }
-}
diff --git a/app/controllers/notes_controller.rb b/app/controllers/notes_controller.rb
index 06d18139..e6389e53 100644
--- a/app/controllers/notes_controller.rb
+++ b/app/controllers/notes_controller.rb
@@ -5,7 +5,7 @@ class NotesController < InheritedResources::Base
     create! do |format|
       format.html {
         @note.author = current_user
-        create!(notice: 'Dude! Nice job creating that note.') { moderations_url }
+        create!(notice: t(:added, scope: [:notes, :actions])) { moderations_url }
       }
     end
   end
diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml
index b67eec4e..0f9e2786 100644
--- a/app/views/layouts/_flash.html.haml
+++ b/app/views/layouts/_flash.html.haml
@@ -1,3 +1,5 @@
 #flash_messages
   - flash.each do |key, value|
-    .flash(class="#{key}")= value
+    .flash(class="#{key}")
+      %h2=t key, scope: [:gflash, :titles]
+      %p= value
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 6245b4e5..a6ea4b91 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -155,6 +155,8 @@ fr:
     new:
       back: Modération
       title: Ajout d'une note de modération
+    actions:
+      added: La note a bien été ajoutée, merci!
   users:
     sign_in:
       title: Identification
diff --git a/config/locales/gflash.en.yml b/config/locales/gflash.en.yml
new file mode 100644
index 00000000..89ec54f0
--- /dev/null
+++ b/config/locales/gflash.en.yml
@@ -0,0 +1,12 @@
+en:
+  gflash:
+    #
+    # These are the translations for the different titles.
+    #
+    titles:
+      alert: "Your attention"
+      notice: "Notice"
+      success: "Success"
+      warning: "Warning"
+      error: "Error"
+      progress: "Progress"
diff --git a/config/locales/gflash.fr.yml b/config/locales/gflash.fr.yml
new file mode 100644
index 00000000..8ce0c324
--- /dev/null
+++ b/config/locales/gflash.fr.yml
@@ -0,0 +1,12 @@
+fr:
+  gflash:
+    #
+    # These are the translations for the different titles.
+    #
+    titles:
+      alert: "Votre attention"
+      notice: "Information"
+      success: "Succès"
+      warning: "Attention"
+      error: "Erreur"
+      progress: "Progrès"