diff --git a/.eslintignore b/.eslintignore
index c742b08c00540c1f31a99d296d17214a9e2e9bbb..1605e483e9e6387642a27955fd97013226f23212 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,3 +7,4 @@
 /vendor/
 karma.config.js
 webpack.config.js
+/app/assets/javascripts/locale/**/*.js
diff --git a/Gemfile b/Gemfile
index 6c1f63460715440111130ac27ad0345e905edc81..736e3e3b5784937ef3c974034269550f7a6e41f3 100644
--- a/Gemfile
+++ b/Gemfile
@@ -256,6 +256,7 @@ gem 'premailer-rails', '~> 1.9.0'
 
 # I18n
 gem 'gettext_i18n_rails', '~> 1.8.0'
+gem 'gettext_i18n_rails_js', '~> 1.2.0'
 gem 'gettext', '~> 3.2.2', require: false, group: :development
 
 # Metrics
diff --git a/Gemfile.lock b/Gemfile.lock
index ca4084e18a232e01931624d5859f8e9376a9bb51..94727810ac9e2ffd8e82a258be73d7b8028d1728 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -259,6 +259,11 @@ GEM
       text (>= 1.3.0)
     gettext_i18n_rails (1.8.0)
       fast_gettext (>= 0.9.0)
+    gettext_i18n_rails_js (1.2.0)
+      gettext (>= 3.0.2)
+      gettext_i18n_rails (>= 0.7.1)
+      po_to_json (>= 1.0.0)
+      rails (>= 3.2.0)
     gherkin-ruby (0.3.2)
     gitaly (0.5.0)
       google-protobuf (~> 3.1)
@@ -534,6 +539,8 @@ GEM
       ast (~> 2.2)
     path_expander (1.0.1)
     pg (0.18.4)
+    po_to_json (1.0.1)
+      json (>= 1.6.0)
     poltergeist (1.9.0)
       capybara (~> 2.1)
       cliver (~> 0.3.1)
@@ -914,6 +921,7 @@ DEPENDENCIES
   gemojione (~> 3.0)
   gettext (~> 3.2.2)
   gettext_i18n_rails (~> 1.8.0)
+  gettext_i18n_rails_js (~> 1.2.0)
   gitaly (~> 0.5.0)
   github-linguist (~> 4.7.0)
   gitlab-flowdock-git-hook (~> 1.0.1)
diff --git a/app/assets/javascripts/locale/de/app.js b/app/assets/javascripts/locale/de/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..643e82a90a073d2e2af0799a9b7e0be7004fb6c0
--- /dev/null
+++ b/app/assets/javascripts/locale/de/app.js
@@ -0,0 +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
diff --git a/app/assets/javascripts/locale/en/app.js b/app/assets/javascripts/locale/en/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..9070b519ff330853edbe8d721974d5861bcf996c
--- /dev/null
+++ b/app/assets/javascripts/locale/en/app.js
@@ -0,0 +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":[""]}}};
diff --git a/app/assets/javascripts/locale/es/app.js b/app/assets/javascripts/locale/es/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..41f6ddef5b868dadad790f3545eda577896c2182
--- /dev/null
+++ b/app/assets/javascripts/locale/es/app.js
@@ -0,0 +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"]}}};
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0feb9eb5d43a9efa4592315003a8d54eb85afaed
--- /dev/null
+++ b/app/assets/javascripts/locale/index.js
@@ -0,0 +1,15 @@
+import Jed from 'jed';
+import de from './de/app';
+import es from './es/app';
+import en from './en/app';
+
+const locales = {
+  de,
+  es,
+  en,
+};
+
+const lang = document.querySelector('html').getAttribute('lang');
+
+export { lang };
+export default new Jed(locales[lang]);
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 19473b6ab276ddad03f0ae36d0d47ca9bf413829..7e1986794893f18284773ba0320f00c9729e7455 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -31,6 +31,7 @@
   = webpack_bundle_tag "runtime"
   = webpack_bundle_tag "common"
   = webpack_bundle_tag "main"
+  = webpack_bundle_tag "locale"
 
   - if content_for?(:page_specific_javascripts)
     = yield :page_specific_javascripts
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 36543edc040f91e562494ecea3a5a441a7279b2d..dc926a615c76b213ca03c37765e7a6785b0ddbd0 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,5 +1,5 @@
 !!! 5
-%html{ lang: "en", class: "#{page_class}" }
+%html{ lang: I18n.locale, class: "#{page_class}" }
   = render "layouts/head"
   %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}" } }
     = Gon::Base.render_data
diff --git a/config/webpack.config.js b/config/webpack.config.js
index ffb161900933d5d1b1dc616c3020c9e2b5a69a40..df7b43cf053e9efb580b2bea941920ae98bc3f92 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -52,6 +52,7 @@ var config = {
     vue_pipelines:        './vue_pipelines_index/index.js',
     issue_show:           './issue_show/index.js',
     group:                './group.js',
+    locale:               './locale/index.js',
   },
 
   output: {
@@ -82,6 +83,10 @@ var config = {
         exclude: /node_modules/,
         loader: 'file-loader',
       },
+      {
+        test: /locale\/[a-z]+\/(.*)\.js$/,
+        loader: 'exports-loader?locales',
+      },
     ]
   },
 
diff --git a/package.json b/package.json
index a17399ddb8f614b897e3d2af9a2e97849ccb97b3..5cb07ddc3b75c9787b93aca109c4d929438fa116 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,9 @@
     "dropzone": "^4.2.0",
     "emoji-unicode-version": "^0.2.1",
     "eslint-plugin-html": "^2.0.1",
+    "exports-loader": "^0.6.4",
     "file-loader": "^0.11.1",
+    "jed": "^1.1.1",
     "jquery": "^2.2.1",
     "jquery-ujs": "^1.2.1",
     "js-cookie": "^2.1.3",
diff --git a/yarn.lock b/yarn.lock
index e16cd9c36730167a9ef8534fd0e2a393be13c11d..b95df2d23838f4b16ee25f5308cbe3112e4edc24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2143,6 +2143,13 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
+exports-loader@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-0.6.4.tgz#d70fc6121975b35fc12830cf52754be2740fc886"
+  dependencies:
+    loader-utils "^1.0.2"
+    source-map "0.5.x"
+
 express@^4.13.3, express@^4.14.1:
   version "4.14.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.14.1.tgz#646c237f766f148c2120aff073817b9e4d7e0d33"
@@ -3080,6 +3087,10 @@ jasmine-jquery@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/jasmine-jquery/-/jasmine-jquery-2.1.1.tgz#d4095e646944a26763235769ab018d9f30f0d47b"
 
+jed@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"
+
 jodid25519@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
@@ -5071,6 +5082,10 @@ source-map-support@^0.4.2:
   dependencies:
     source-map "^0.5.3"
 
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
 source-map@^0.1.41:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
@@ -5083,10 +5098,6 @@ source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-
 source-map@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"