diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.js b/app/assets/javascripts/cycle_analytics/components/total_time_component.js
index a0d735f159ce01ded646fcc88e0062aa5aa3be54..47d82bdda90d5330eb050d7aed978ae2fe03d58c 100644
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.js
@@ -13,7 +13,7 @@ global.cycleAnalytics.TotalTimeComponent = Vue.extend({
     <span class="total-time">
       <template v-if="Object.keys(time).length">
         <template v-if="time.days">{{ time.days }} <span>{{ 'day' | translate-plural('days', time.days) }}</span></template>
-        <template v-if="time.hours">{{ time.hours }} <span v-translate>hr</span></template>
+        <template v-if="time.hours">{{ time.hours }} <span>{{ 'hr' | translate }}</span></template>
         <template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ 'min' | translate-plural('mins', time.mins) }}</span></template>
         <template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template>
       </template>
diff --git a/app/assets/javascripts/locale/de/app.js b/app/assets/javascripts/locale/de/app.js
index 643e82a90a073d2e2af0799a9b7e0be7004fb6c0..036572c5568e1d0d69b6635a54eb7967e3299657 100644
--- a/app/assets/javascripts/locale/de/app.js
+++ b/app/assets/javascripts/locale/de/app.js
@@ -1 +1 @@
-var locales = locales || {}; locales['de'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-04-12 22:37-0500","Last-Translator":"FULL NAME <EMAIL@ADDRESS>","Language-Team":"German","Language":"de","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","lang":"de","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"Deutsch":[""],"English":[""],"Spanish":[""]}}};
\ No newline at end of file
+var locales = locales || {}; locales['de'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-04-12 22:37-0500","Last-Translator":"FULL NAME <EMAIL@ADDRESS>","Language-Team":"German","Language":"de","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","lang":"de","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":[""],"Deutsch":[""],"English":[""],"Introducing Cycle Analytics":[""],"Last 30 days":[""],"Last 90 days":[""],"Median":[""],"Not available":[""],"Not enough data":[""],"Pipeline Health":[""],"Read more":[""],"Spanish":[""],"Stage":[""],"Total Time":[""],"Want to see the data? Please ask administrator for access.":[""]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/en/app.js b/app/assets/javascripts/locale/en/app.js
index 9070b519ff330853edbe8d721974d5861bcf996c..dfab3c8f0ded316d339bfa2da8c2e619f2f6f5ff 100644
--- a/app/assets/javascripts/locale/en/app.js
+++ b/app/assets/javascripts/locale/en/app.js
@@ -1 +1 @@
-var locales = locales || {}; locales['en'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-04-12 22:36-0500","Last-Translator":"FULL NAME <EMAIL@ADDRESS>","Language-Team":"English","Language":"en","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","lang":"en","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"Deutsch":[""],"English":[""],"Spanish":[""]}}};
+var locales = locales || {}; locales['en'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-04-12 22:36-0500","Last-Translator":"FULL NAME <EMAIL@ADDRESS>","Language-Team":"English","Language":"en","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","lang":"en","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":[""],"Deutsch":[""],"English":[""],"Introducing Cycle Analytics":[""],"Last 30 days":[""],"Last 90 days":[""],"Median":[""],"Not available":[""],"Not enough data":[""],"Pipeline Health":[""],"Read more":[""],"Spanish":[""],"Stage":[""],"Total Time":[""],"Want to see the data? Please ask administrator for access.":[""]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/es/app.js b/app/assets/javascripts/locale/es/app.js
index 41f6ddef5b868dadad790f3545eda577896c2182..a12129bef135626aa5b5ccc08cdb8366a43949e4 100644
--- a/app/assets/javascripts/locale/es/app.js
+++ b/app/assets/javascripts/locale/es/app.js
@@ -1 +1 @@
-var locales = locales || {}; locales['es'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-04-13 00:07-0500","Language-Team":"Spanish","Language":"es","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"","X-Generator":"Poedit 2.0.1","lang":"es","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"Deutsch":["Alemán"],"English":["Inglés"],"Spanish":["Español"]}}};
+var locales = locales || {}; locales['es'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-04-13 00:07-0500","Language-Team":"Spanish","Language":"es","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"","X-Generator":"Poedit 2.0.1","lang":"es","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":[""],"Deutsch":["Alemán"],"English":["Inglés"],"Introducing Cycle Analytics":[""],"Last 30 days":[""],"Last 90 days":[""],"Median":[""],"Not available":[""],"Not enough data":[""],"Pipeline Health":[""],"Read more":[""],"Spanish":["Español"],"Stage":[""],"Total Time":[""],"Want to see the data? Please ask administrator for access.":[""]}}};
\ No newline at end of file
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index 56791968e537563f8acaf45fc3025c5c047bc494..9f81024ff68c21474e3f01f014703a576b7c46b2 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -1,7 +1,7 @@
 import Jed from 'jed';
-import de from './de/app';
-import es from './es/app';
-import en from './en/app';
+import { de } from './de/app';
+import { es } from './es/app';
+import { en } from './en/app';
 
 const locales = {
   de,
diff --git a/app/assets/javascripts/vue_shared/translate.js b/app/assets/javascripts/vue_shared/translate.js
index 072828b310ece4f132a1206e7d452b5501960ba8..7fc6f1ce38af5c2fd3787a9f8aaa40919e831c9c 100644
--- a/app/assets/javascripts/vue_shared/translate.js
+++ b/app/assets/javascripts/vue_shared/translate.js
@@ -5,13 +5,4 @@ export default (Vue) => {
 
   Vue.filter('translate-plural', (text, pluralText, count) =>
     locale.ngettext(text, pluralText, count).replace(/%d/g, count));
-
-  Vue.directive('translate', {
-    bind(el) {
-      const $el = el;
-      const text = $el.textContent.trim();
-
-      $el.textContent = locale.gettext(text);
-    },
-  });
 };
diff --git a/app/controllers/projects/cycle_analytics_controller.rb b/app/controllers/projects/cycle_analytics_controller.rb
index 88ac3ad046b57f223c930fd20b45147543d68abb..7ef8872a90b5b714cfa0e3dfa629fa5ca27a5412 100644
--- a/app/controllers/projects/cycle_analytics_controller.rb
+++ b/app/controllers/projects/cycle_analytics_controller.rb
@@ -4,6 +4,7 @@ class Projects::CycleAnalyticsController < Projects::ApplicationController
   include CycleAnalyticsParams
 
   before_action :authorize_read_cycle_analytics!
+  before_action :set_locale, only: :show
 
   def show
     @cycle_analytics = ::CycleAnalytics.new(@project, options(cycle_analytics_params))
diff --git a/config/initializers/fast_gettext.rb b/config/initializers/fast_gettext.rb
index 54b0049033b7e7fda8346e66bce675d067998542..10a3ee02b8510ab4101bbf67b80571e15f736fd2 100644
--- a/config/initializers/fast_gettext.rb
+++ b/config/initializers/fast_gettext.rb
@@ -1,3 +1,3 @@
 FastGettext.add_text_domain 'gitlab', path: 'locale', type: :po
-FastGettext.default_available_locales = Gitlab::I18n::AVAILABLE_LANGUAGES.keys
 FastGettext.default_text_domain = 'gitlab'
+FastGettext.default_available_locales = Gitlab::I18n::AVAILABLE_LANGUAGES.keys
diff --git a/config/initializers/gettext_rails_i18n_patch.rb b/config/initializers/gettext_rails_i18n_patch.rb
new file mode 100644
index 0000000000000000000000000000000000000000..744e983a094a71d09d51c7d79ba4f2a8a2529e8f
--- /dev/null
+++ b/config/initializers/gettext_rails_i18n_patch.rb
@@ -0,0 +1,16 @@
+module GettextI18nRails
+  class HamlParser
+    # singleton_class.send(:alias_method, :old_convert_to_code, :convert_to_code)
+    #
+    # # We need to convert text in Mustache format
+    # # to a format that can be parsed by Gettext scripts.
+    # # If we found a content like "{{ 'Stage' | translate }}"
+    # # in a HAML file we convert it to "= _('Stage')", that way
+    # # it can be processed by the "rake gettext:find" script.
+    # def self.convert_to_code(text)
+    #   text.gsub!(/{{ (.*)( \| translate) }}/, "= _(\\1)")
+    #
+    #   old_convert_to_code(text)
+    # end
+  end
+end
diff --git a/config/webpack.config.js b/config/webpack.config.js
index dc9c7786475ba89601b304779b332610e1975420..10df465faf6379ae1f779be8cf9176321f9563d5 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -36,6 +36,7 @@ var config = {
     issuable:             './issuable/issuable_bundle.js',
     locale:               './locale/index.js',
     issue_show:           './issue_show/index.js',
+    locale:               './locale/index.js',
     main:                 './main.js',
     merge_conflicts:      './merge_conflicts/merge_conflicts_bundle.js',
     merge_request_widget: './merge_request_widget/ci_bundle.js',
diff --git a/lib/gitlab/i18n.rb b/lib/gitlab/i18n.rb
index 0459def651727a344def796bf7c22347ea77da29..64a86b55c7f5f38dcbacc6caad5720fd1efbe3e8 100644
--- a/lib/gitlab/i18n.rb
+++ b/lib/gitlab/i18n.rb
@@ -1,9 +1,9 @@
 module Gitlab
   module I18n
     AVAILABLE_LANGUAGES = {
-      'en' => 'English',
-      'es' => 'Spanish',
-      'de' => 'Deutsch'
+      'en' => N_('English'),
+      'es' => N_('Spanish'),
+      'de' => N_('Deutsch')
     }.freeze
   end
 end
diff --git a/locale/de/gitlab.po b/locale/de/gitlab.po
index 7f32771b80f749cd349d555b3b4962ea0cb2299b..f3b6cb6e905905eb32d14e36c75bc93178c81c9e 100644
--- a/locale/de/gitlab.po
+++ b/locale/de/gitlab.po
@@ -17,11 +17,47 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=n != 1;\n"
 "\n"
 
+msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
+msgstr ""
+
 msgid "Deutsch"
 msgstr ""
 
 msgid "English"
 msgstr ""
 
+msgid "Introducing Cycle Analytics"
+msgstr ""
+
+msgid "Last 30 days"
+msgstr ""
+
+msgid "Last 90 days"
+msgstr ""
+
+msgid "Median"
+msgstr ""
+
+msgid "Not available"
+msgstr ""
+
+msgid "Not enough data"
+msgstr ""
+
+msgid "Pipeline Health"
+msgstr ""
+
+msgid "Read more"
+msgstr ""
+
 msgid "Spanish"
 msgstr ""
+
+msgid "Stage"
+msgstr ""
+
+msgid "Total Time"
+msgstr ""
+
+msgid "Want to see the data? Please ask administrator for access."
+msgstr ""
diff --git a/locale/en/gitlab.po b/locale/en/gitlab.po
index f93f438b4241678d3ffef49d1392ee88a27a1d20..930298684869529bfb2358805f6ed0d25fcbf8ea 100644
--- a/locale/en/gitlab.po
+++ b/locale/en/gitlab.po
@@ -17,11 +17,47 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=n != 1;\n"
 "\n"
 
+msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
+msgstr ""
+
 msgid "Deutsch"
 msgstr ""
 
 msgid "English"
 msgstr ""
 
+msgid "Introducing Cycle Analytics"
+msgstr ""
+
+msgid "Last 30 days"
+msgstr ""
+
+msgid "Last 90 days"
+msgstr ""
+
+msgid "Median"
+msgstr ""
+
+msgid "Not available"
+msgstr ""
+
+msgid "Not enough data"
+msgstr ""
+
+msgid "Pipeline Health"
+msgstr ""
+
+msgid "Read more"
+msgstr ""
+
 msgid "Spanish"
 msgstr ""
+
+msgid "Stage"
+msgstr ""
+
+msgid "Total Time"
+msgstr ""
+
+msgid "Want to see the data? Please ask administrator for access."
+msgstr ""
diff --git a/locale/es/gitlab.po b/locale/es/gitlab.po
index e2d03d8834774f427c1dd65aa4c9c40497b3af2c..23863cbdb92e7133e0ea05ceb5fe3fe3cadf6cf5 100644
--- a/locale/es/gitlab.po
+++ b/locale/es/gitlab.po
@@ -17,11 +17,47 @@ msgstr ""
 "Last-Translator: \n"
 "X-Generator: Poedit 2.0.1\n"
 
+msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
+msgstr ""
+
 msgid "Deutsch"
 msgstr "Alemán"
 
 msgid "English"
 msgstr "Inglés"
 
+msgid "Introducing Cycle Analytics"
+msgstr ""
+
+msgid "Last 30 days"
+msgstr ""
+
+msgid "Last 90 days"
+msgstr ""
+
+msgid "Median"
+msgstr ""
+
+msgid "Not available"
+msgstr ""
+
+msgid "Not enough data"
+msgstr ""
+
+msgid "Pipeline Health"
+msgstr ""
+
+msgid "Read more"
+msgstr ""
+
 msgid "Spanish"
 msgstr "Español"
+
+msgid "Stage"
+msgstr ""
+
+msgid "Total Time"
+msgstr ""
+
+msgid "Want to see the data? Please ask administrator for access."
+msgstr ""
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a90fc69d94bf09895816c078d878c066e9db4eba..ada103157d9870be9853272bcd9bd7c7fa6255f4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-04-13 00:01-0500\n"
-"PO-Revision-Date: 2017-04-13 00:01-0500\n"
+"POT-Creation-Date: 2017-04-21 09:01+0100\n"
+"PO-Revision-Date: 2017-04-21 09:01+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -18,11 +18,47 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
 
+msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
+msgstr ""
+
 msgid "Deutsch"
 msgstr ""
 
 msgid "English"
 msgstr ""
 
+msgid "Introducing Cycle Analytics"
+msgstr ""
+
+msgid "Last 30 days"
+msgstr ""
+
+msgid "Last 90 days"
+msgstr ""
+
+msgid "Median"
+msgstr ""
+
+msgid "Not available"
+msgstr ""
+
+msgid "Not enough data"
+msgstr ""
+
+msgid "Pipeline Health"
+msgstr ""
+
+msgid "Read more"
+msgstr ""
+
 msgid "Spanish"
 msgstr ""
+
+msgid "Stage"
+msgstr ""
+
+msgid "Total Time"
+msgstr ""
+
+msgid "Want to see the data? Please ask administrator for access."
+msgstr ""