diff --git a/README.md b/README.md
index faf1e99..af8ce43 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,11 @@ Export and import can also be used for the update of flox itself. Export your mo
 
 ### Translation
 
-All movie titles are in english by default. You can change your language by setting `TRANSLATION` in `backend/.env`. The most commons are `DE`, `IT`, `FR`, `ES` and `RU`. You can try to use your language code. If there isn't a translation for your language, the english title will be used.
+All movie titles are in english by default. You can change your language by setting `TRANSLATION` in `backend/.env`. The most commons are `DE`, `IT`, `FR`, `ES` and `RU`. You can try to use your language code.
+
+This will also affect the language of you website. See in `client/resources/languages` if your language is supported. Pull requests are welcome :) 
+
+If there isn't a translation for your language, english will be used.
 
 ### Better Search
 
diff --git a/backend/app/Http/Controllers/HomeController.php b/backend/app/Http/Controllers/HomeController.php
new file mode 100644
index 0000000..4ac3feb
--- /dev/null
+++ b/backend/app/Http/Controllers/HomeController.php
@@ -0,0 +1,16 @@
+<?php
+
+  namespace App\Http\Controllers;
+
+  use App\Services\Storage;
+
+  class HomeController {
+
+    public function app($uri = null, Storage $storage)
+    {
+      $language = $storage->parseLanguage();
+
+      return view('app')
+        ->withLang($language);
+    }
+  }
\ No newline at end of file
diff --git a/backend/app/Services/Storage.php b/backend/app/Services/Storage.php
index 6f3a177..d997d7e 100644
--- a/backend/app/Services/Storage.php
+++ b/backend/app/Services/Storage.php
@@ -38,4 +38,22 @@
     {
       LaravelStorage::delete($poster);
     }
+
+    /**
+     * Parse language file.
+     *
+     * @return mixed
+     */
+    public function parseLanguage()
+    {
+      $alternative = config('app.TRANSLATION') ?: 'EN';
+      $filename = strtolower($alternative) . '.json';
+
+      // Get english fallback
+      if( ! LaravelStorage::disk('languages')->exists($filename)) {
+        $filename = 'en.json';
+      }
+
+      return LaravelStorage::disk('languages')->get($filename);
+    }
   }
\ No newline at end of file
diff --git a/backend/config/filesystems.php b/backend/config/filesystems.php
index 0e8fe77..c102013 100644
--- a/backend/config/filesystems.php
+++ b/backend/config/filesystems.php
@@ -53,6 +53,11 @@
         'root' => base_path('../public/exports'),
       ],
 
+      'languages' => [
+        'driver' => 'local',
+        'root' => base_path('../client/resources/languages'),
+      ],
+
       'public' => [
         'driver' => 'local',
         'root' => storage_path('app/public'),
diff --git a/backend/routes/web.php b/backend/routes/web.php
index 41f4f1a..e555e89 100644
--- a/backend/routes/web.php
+++ b/backend/routes/web.php
@@ -30,6 +30,4 @@
     });
   });
 
-  Route::get('/{uri?}', function($uri = null) {
-    return view('app');
-  })->where('uri', '(.*)');
+  Route::get('/{uri?}', 'HomeController@app')->where('uri', '(.*)');
diff --git a/client/app/components/Content/Content.vue b/client/app/components/Content/Content.vue
index 855d05e..db98f23 100644
--- a/client/app/components/Content/Content.vue
+++ b/client/app/components/Content/Content.vue
@@ -7,10 +7,10 @@
             :date="displayDate"
       ></Item>
 
-      <span class="nothing-found" v-if=" ! items.length">No Movies Found</span>
+      <span class="nothing-found" v-if=" ! items.length">{{ lang('nothing found') }}</span>
 
       <div class="load-more-wrap">
-        <span class="load-more" v-if=" ! clickedMoreLoading && paginator" @click="loadMore()">Load More</span>
+        <span class="load-more" v-if=" ! clickedMoreLoading && paginator" @click="loadMore()">{{ lang('load more') }}</span>
         <span class="loader" v-if="clickedMoreLoading"><i></i></span>
       </div>
     </div>
@@ -22,10 +22,13 @@
 <script>
   import Item from './Item.vue';
   import { mapActions, mapState } from 'vuex'
+  import Helper from '../../helper';
 
   import http from 'axios';
 
   export default {
+    mixins: [Helper],
+
     created() {
       this.fetchData();
       this.fetchSettings();
diff --git a/client/app/components/Content/Item.vue b/client/app/components/Content/Item.vue
index aa9b596..c85e418 100644
--- a/client/app/components/Content/Item.vue
+++ b/client/app/components/Content/Item.vue
@@ -9,8 +9,8 @@
           <span class="loader smallsize-loader" v-if="rated"><i></i></span>
           <i class="icon-add" v-if=" ! rated"></i>
         </span>
-        <router-link :to="'/suggestions?for=' + localItem.tmdb_id" class="recommend-item">Suggestions</router-link>
-        <span class="remove-item" v-if="localItem.rating && auth" @click="removeItem()">Delete Movie</span>
+        <router-link :to="'/suggestions?for=' + localItem.tmdb_id" class="recommend-item">{{ lang('suggestions') }}</router-link>
+        <span class="remove-item" v-if="localItem.rating && auth" @click="removeItem()">{{ lang('delete movie') }}</span>
         <img v-if="localItem.poster" :src="poster" class="item-image" width="185" height="278">
         <img v-if=" ! localItem.poster" :src="noImage" class="item-image" width="185" height="278">
       </div>
@@ -26,8 +26,11 @@
 
 <script>
   import http from 'axios';
+  import Helper from '../../helper';
 
   export default {
+    mixins: [Helper],
+
     props: ['item', 'genre', 'date'],
 
     data() {
@@ -111,7 +114,7 @@
 
       removeItem() {
         if(this.auth) {
-          const confirm = window.confirm('Are you sure?');
+          const confirm = window.confirm(this.lang('confirm delete'));
 
           if(confirm) {
             http.delete(`${config.api}/remove/${this.localItem.id}`).then(value => {
diff --git a/client/app/components/Content/SearchContent.vue b/client/app/components/Content/SearchContent.vue
index 361a50a..c959845 100644
--- a/client/app/components/Content/SearchContent.vue
+++ b/client/app/components/Content/SearchContent.vue
@@ -14,7 +14,7 @@
             :date="true"
       ></Item>
 
-      <span class="nothing-found" v-if=" ! floxItems.length && ! tmdbItems.length">Nothing Found</span>
+      <span class="nothing-found" v-if=" ! floxItems.length && ! tmdbItems.length">{{ lang('nothing found') }}</span>
     </div>
 
     <span class="loader fullsize-loader" v-if="loading"><i></i></span>
diff --git a/client/app/components/Content/Settings.vue b/client/app/components/Content/Settings.vue
index e7df9d6..4510202 100644
--- a/client/app/components/Content/Settings.vue
+++ b/client/app/components/Content/Settings.vue
@@ -2,36 +2,36 @@
   <main>
     <div class="wrap-content" v-if=" ! loading">
       <div class="settings-box">
-        <span class="nothing-found">User</span>
+        <span class="nothing-found">{{ lang('headline user') }}</span>
         <form class="login-form" @submit.prevent="editUser()">
-          <input type="text" placeholder="Username" v-model="username">
-          <input type="password" placeholder="Password" v-model="password" autocomplete="off">
-          <span class="userdata-info">Leave the password field blank if you don't want to change it</span>
-          <span class="userdata-changed"><span v-if="success">Successful changed</span></span>
-          <input type="submit" value="Save">
+          <input type="text" :placeholder="lang('username')" v-model="username">
+          <input type="password" :placeholder="lang('password')" v-model="password" autocomplete="off">
+          <span class="userdata-info">{{ lang('password message') }}</span>
+          <span class="userdata-changed"><span v-if="success">{{ lang('success message') }}</span></span>
+          <input type="submit" :value="lang('save button')">
         </form>
       </div>
       <div class="settings-box">
-        <span class="nothing-found">Export / Import</span>
-        <a :href="exportLink" class="export-btn">Export Movies</a>
+        <span class="nothing-found">{{ lang('headline export import') }}</span>
+        <a :href="exportLink" class="export-btn">{{ lang('export button') }}</a>
         <form class="login-form" @submit.prevent="importMovies()">
-          <span class="import-info">OR</span>
+          <span class="import-info">{{ lang('or divider') }}</span>
           <input type="file" @change="upload" class="file-btn" required>
-          <span class="userdata-changed"><span v-if="uploadSuccess">Movies successful imported</span></span>
-          <input type="submit" value="Import movies">
+          <span class="userdata-changed"><span v-if="uploadSuccess">{{ lang('success import') }}</span></span>
+          <input type="submit" :value="lang('import button')">
         </form>
       </div>
       <div class="settings-box">
-        <span class="nothing-found">Misc</span>
-        <button @click="updateGenre()" class="export-btn">Update Genre</button>
-        <span class="import-info">OR</span>
-        <button @click="syncScout()" class="export-btn">Sync Laravel Scout</button>
-        <span class="import-info">OR</span>
+        <span class="nothing-found">{{ lang('headline misc') }}</span>
+        <button @click="updateGenre()" class="export-btn">{{ lang('update genre') }}</button>
+        <span class="import-info">{{ lang('or divider') }}</span>
+        <button @click="syncScout()" class="export-btn">{{ lang('sync scout') }}</button>
+        <span class="import-info">{{ lang('or divider') }}</span>
         <div class="checkbox">
-          <input type="checkbox" value="genre" v-model="displayGenre" id="genre" @change="updateSettings"><label for="genre">Display Genre</label>
+          <input type="checkbox" value="genre" v-model="displayGenre" id="genre" @change="updateSettings"><label for="genre">{{ lang('display genre') }}</label>
         </div>
         <div class="checkbox">
-          <input type="checkbox" value="date" v-model="displayDate" id="date" @change="updateSettings"><label for="date">Display Date</label>
+          <input type="checkbox" value="date" v-model="displayDate" id="date" @change="updateSettings"><label for="date">{{ lang('display date') }}</label>
         </div>
       </div>
     </div>
@@ -42,10 +42,13 @@
 
 <script>
   import { mapState, mapMutations } from 'vuex';
+  import Helper from '../../helper';
 
   import http from 'axios';
 
   export default {
+    mixins: [Helper],
+
     created() {
       this.fetchSettings();
     },
@@ -93,7 +96,7 @@
 
       importMovies() {
         if(this.uploadedFile) {
-          const confirm = window.confirm('All movies will be replaced. Be sure you have made an backup!');
+          const confirm = window.confirm(this.lang('import warn'));
 
           if(confirm) {
             this.SET_LOADING(true);
diff --git a/client/app/components/Footer.vue b/client/app/components/Footer.vue
index 540c56f..52fea5b 100644
--- a/client/app/components/Footer.vue
+++ b/client/app/components/Footer.vue
@@ -11,8 +11,8 @@
       <a class="icon-github" href="https://github.com/devfake/flox" target="_blank"></a>
 
       <div class="sub-links">
-        <a v-if="auth" :href="settings" class="login-btn">Settings</a>
-        <a v-if="auth" :href="logout" class="login-btn">Logout</a>
+        <a v-if="auth" :href="settings" class="login-btn">{{ lang('settings') }}</a>
+        <a v-if="auth" :href="logout" class="login-btn">{{ lang('logout') }}</a>
         <a v-if=" ! auth" :href="login" class="login-btn">Login</a>
       </div>
     </div>
@@ -21,8 +21,11 @@
 
 <script>
   import { mapState } from 'vuex';
+  import Helper from '../helper';
 
   export default {
+    mixins: [Helper],
+
     data() {
       return {
         auth: config.auth,
diff --git a/client/app/components/Header.vue b/client/app/components/Header.vue
index ad270d3..f1a6b41 100644
--- a/client/app/components/Header.vue
+++ b/client/app/components/Header.vue
@@ -6,15 +6,15 @@
       </router-link>
 
       <span class="sort-wrap">
-        <i title="Last Seen" class="icon-sort-time" :class="{active: userFilter == 'created_at'}" @click="setUserFilter('created_at')"></i>
-        <i title="Best Rated" class="icon-sort-star" :class="{active: userFilter == 'rating'}" @click="setUserFilter('rating')"></i>
-        <span title="Toggle Color" class="icon-constrast"  @click="toggleColorScheme()"><i></i></span>
+        <i :title="lang('last seen')" class="icon-sort-time" :class="{active: userFilter == 'created_at'}" @click="setUserFilter('created_at')"></i>
+        <i :title="lang('best rated')" class="icon-sort-star" :class="{active: userFilter == 'rating'}" @click="setUserFilter('rating')"></i>
+        <span :title="lang('change color')" class="icon-constrast"  @click="toggleColorScheme()"><i></i></span>
       </span>
 
       <nav class="site-nav">
         <ul>
-          <li><router-link to="/trending">Trending</router-link></li>
-          <li><router-link to="/upcoming">Upcoming</router-link></li>
+          <li><router-link to="/trending">{{ lang('trending') }}</router-link></li>
+          <li><router-link to="/upcoming">{{ lang('upcoming') }}</router-link></li>
         </ul>
       </nav>
 
@@ -23,10 +23,13 @@
 </template>
 
 <script>
+  import Helper from '../helper';
   import store from '../store/index';
   import { mapActions, mapMutations, mapState } from 'vuex'
 
   export default {
+    mixins: [Helper],
+
     created() {
       this.checkForUserFilter();
     },
diff --git a/client/app/components/Login.vue b/client/app/components/Login.vue
index 3e940c6..004fdff 100644
--- a/client/app/components/Login.vue
+++ b/client/app/components/Login.vue
@@ -6,12 +6,12 @@
       <img src="../../../public/assets/img/logo-login.png" class="logo-login" alt="Flox" width="108" height="32">
 
       <form class="login-form" @submit.prevent="login()">
-        <input type="text" placeholder="Username" v-model="username" autofocus>
-        <input type="password" placeholder="Password" v-model="password">
+        <input type="text" :placeholder="lang('username')" v-model="username" autofocus>
+        <input type="password" :placeholder="lang('password')" v-model="password">
 
-        <span class="login-error"><span v-if="error">Wrong username or password</span></span>
+        <span class="login-error"><span v-if="error">{{ lang('login error') }}</span></span>
 
-        <input type="submit" :class="errorShake ? 'shake-horizontal shake-constant' : ''" value="Sign In">
+        <input type="submit" :class="errorShake ? 'shake-horizontal shake-constant' : ''" :value="lang('login button')">
       </form>
 
     </div>
@@ -20,8 +20,11 @@
 
 <script>
   import http from 'axios';
+  import Helper from '../helper';
 
   export default {
+    mixins: [Helper],
+
     created() {
       document.body.className += ' dark';
     },
diff --git a/client/app/components/Search.vue b/client/app/components/Search.vue
index 20f1401..849927c 100644
--- a/client/app/components/Search.vue
+++ b/client/app/components/Search.vue
@@ -45,7 +45,8 @@
       },
 
       placeholder() {
-        return config.auth ? 'Search or add movie' : 'Search movie';
+        //return config.auth ? 'Search or add movie' : 'Search movie';
+        return config.auth ? this.lang('search or add') : this.lang('search');
       }
     },
 
diff --git a/client/app/config.js b/client/app/config.js
index 7dbf282..1bfb645 100644
--- a/client/app/config.js
+++ b/client/app/config.js
@@ -1,12 +1,13 @@
 import http from 'axios';
 http.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');
 
-const {url, uri, auth, scoutDriver} = document.body.dataset;
+const {url, uri, auth, scoutDriver, language} = document.body.dataset;
 
 const config = {
   uri,
   url,
   auth,
+  language,
   scoutDriver,
   poster: url + '/assets/poster',
   posterTMDB: 'http://image.tmdb.org/t/p/w185',
diff --git a/client/app/helper.js b/client/app/helper.js
index a76803e..85da953 100644
--- a/client/app/helper.js
+++ b/client/app/helper.js
@@ -18,6 +18,13 @@ export default {
       }
 
       window.requestAnimationFrame(step);
+    },
+
+    // Language helper
+    lang(text) {
+      const language = JSON.parse(config.language);
+
+      return language[text];
     }
   }
 }
\ No newline at end of file
diff --git a/client/resources/app.blade.php b/client/resources/app.blade.php
index 295b413..4d622d2 100644
--- a/client/resources/app.blade.php
+++ b/client/resources/app.blade.php
@@ -16,6 +16,7 @@
   data-uri="{{ config('app.CLIENT_URI') }}"
   data-scout-driver="{{ config('scout.driver') }}"
   data-auth="{{ Auth::check() }}"
+  data-language="{{ $lang }}"
   class="{{ Auth::check() ? 'logged' : 'guest' }}"
 >
 
diff --git a/client/resources/languages/de.json b/client/resources/languages/de.json
new file mode 100644
index 0000000..e48d5d7
--- /dev/null
+++ b/client/resources/languages/de.json
@@ -0,0 +1,38 @@
+{
+  "username": "Benutzer",
+  "password": "Passwort",
+  "login button": "Einloggen",
+  "login error": "Benutzer oder Passwort ist falsch",
+
+  "suggestions": "Vorschläge",
+  "delete movie": "Film löschen",
+  "confirm delete": "Wirklich löschen?",
+  "search": "Film suchen",
+  "search or add": "Film suchen oder hinzufügen",
+  "load more": "Mehr anzeigen",
+  "nothing found": "Nichts gefunden",
+
+  "trending": "Beliebt",
+  "upcoming": "Kommend",
+  "last seen": "Zuletzt gesehen",
+  "best rated": "Am besten bewertet",
+  "change color": "Farbmodus wechseln",
+
+  "settings": "Einstellungen",
+  "logout": "Ausloggen",
+  "headline user": "Benutzer",
+  "headline export import": "Exportieren / Importieren",
+  "headline misc": "Sonstiges",
+  "save button": "Speichern",
+  "password message": "Lasse das Passwort-Feld leer, wenn du es nicht ändern willst",
+  "success message": "Erfolgreich gespeichert",
+  "export button": "Exportieren",
+  "import button": "Importieren",
+  "or divider": "ODER",
+  "update genre": "Genre updaten",
+  "sync scout": "Sync Laravel Scout",
+  "display genre": "Genre anzeigen",
+  "display date": "Datum anzeigen",
+  "success import": "Filme wurden erfolgreich importiert",
+  "import warn": "Durch den Import werden alle Filme ersetzt. Erstelle vorher ein Backup!"
+}
\ No newline at end of file
diff --git a/client/resources/languages/en.json b/client/resources/languages/en.json
new file mode 100644
index 0000000..81a70f6
--- /dev/null
+++ b/client/resources/languages/en.json
@@ -0,0 +1,38 @@
+{
+  "username": "Username",
+  "password": "Password",
+  "login button": "Login",
+  "login error": "Wrong username or password",
+
+  "suggestions": "Suggestions",
+  "delete movie": "Delete Movie",
+  "confirm delete": "Are you sure?",
+  "search": "Search movie",
+  "search or add": "Search or add movie",
+  "load more": "Load More",
+  "nothing found": "Nothing found",
+
+  "trending": "Trending",
+  "upcoming": "Upcoming",
+  "last seen": "Last seen",
+  "best rated": "Best rated",
+  "change color": "Change colors",
+
+  "settings": "Settings",
+  "logout": "Logout",
+  "headline user": "User",
+  "headline export import": "Export / Import",
+  "headline misc": "Misc",
+  "save button": "Save",
+  "password message": "Leave the password field blank if you don't want to change it",
+  "success message": "Successful changed",
+  "export button": "Export movies",
+  "import button": "Import movies",
+  "or divider": "OR",
+  "update genre": "Update genre",
+  "sync scout": "Sync Laravel Scout",
+  "display genre": "Display genre",
+  "display date": "Display date",
+  "success import": "Movies successful imported",
+  "import warn": "All movies will be replaced. Be sure you have made an backup!"
+}
\ No newline at end of file
diff --git a/client/yarn.lock b/client/yarn.lock
index 1fe2135..dad6213 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3398,10 +3398,6 @@ vue-loader@^9.5.1:
     vue-template-compiler "^2.0.5"
     vue-template-es2015-compiler "^1.2.2"
 
-vue-resource@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/vue-resource/-/vue-resource-1.0.3.tgz#8d52d0d8a9ed5f2ae704c68d530c84ceaf97be14"
-
 vue-router@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.0.3.tgz#444e246fd42d65a34dea6c3be8fde3315c4ba6f7"