diff --git a/Gemfile b/Gemfile
index 4cb6171e..b1c5764f 100644
--- a/Gemfile
+++ b/Gemfile
@@ -178,6 +178,9 @@ gem 'cloudinary'
 # for setting app configuration in the environment
 gem 'dotenv-rails'
 
+# For countable.js 
+gem "countable-rails", "~> 0.0.1"
+
 # Both are not in a group as we use it also for rake data:demo
 # for fake data
 gem 'faker'
diff --git a/Gemfile.lock b/Gemfile.lock
index 979b7f78..a42c6523 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -125,6 +125,8 @@ GEM
       execjs
     coffee-script-source (1.10.0)
     columnize (0.8.9)
+    countable-rails (0.0.1)
+      railties (>= 3.1)
     countries (1.2.5)
       currencies (~> 0.4.2)
       i18n_data (~> 0.7.0)
@@ -555,6 +557,7 @@ DEPENDENCIES
   chart-js-rails
   cloudinary
   cocoon
+  countable-rails (~> 0.0.1)
   country_select
   coveralls
   daemons
@@ -634,4 +637,4 @@ DEPENDENCIES
   whenever
 
 BUNDLED WITH
-   1.12.5
+   1.14.3
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 8853d6e6..01cb83ee 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -45,6 +45,7 @@
 //= require osem-commercials
 //= require unobtrusive_flash
 //= require unobtrusive_flash_bootstrap
+//= require countable
 
 $(document).ready(function() {
     $('a[disabled=disabled]').click(function(event){
diff --git a/app/assets/javascripts/osem.js b/app/assets/javascripts/osem.js
index eae08d41..15995933 100644
--- a/app/assets/javascripts/osem.js
+++ b/app/assets/javascripts/osem.js
@@ -148,19 +148,15 @@ function get_color() {
 }
 
 function word_count(text, divId, maxcount) {
-    var r = 0;
-    var input = text.value.replace(/\s/g,' ');
-    var word_array = input.split(' ');
-    for (var i=0; i < word_array.length; i++) {
-        if (word_array[i].length > 0) r++;
-    }
+    var area = document.getElementById(text.id)
 
-    $('#' + divId).text(r);
-    if (r > maxcount) {
-        $('#' + divId).css('color', 'red');
-    } else {
-        $('#' + divId).css('color', '#333');
-    }
+    Countable.live(area, function(counter) {
+        $('#' + divId).text(counter.words);
+        if (counter.words > maxcount)
+            $('#' + divId).css('color', 'red');
+        else
+            $('#' + divId).css('color', 'black');
+    });
 };
 
 /* Wait for the DOM to be ready before attaching events to the elements */
diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml
index 825cd9f1..f4569255 100644
--- a/app/views/users/edit.html.haml
+++ b/app/views/users/edit.html.haml
@@ -14,7 +14,7 @@
         = link_to 'Change your avatar here', 'https://gravatar.com'
         = f.input :affiliation, as: :string,
           hint: 'This could be a company, a user group, or nothing at all.'
-        = f.input :biography, input_html: { rows: 5, data: { provide: 'markdown-editable' }, 'onkeyup' => "word_count(this, 'biography-count', 150)" },
+        = f.input :biography, input_html: { rows: 5, data: { provide: 'markdown-editable' } },
           hint: markdown_hint
         You have used
         %span#bio_length