diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 01ce5027a..db2cb1c60 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -1,3 +1,21 @@
+// Layout transitions
+.layout-enter-active, .layout-leave-active {
+  transition: opacity 0.5s;
+}
+
+.layout-enter, .layout-leave-active {
+  opacity: 0;
+}
+
+// Page transitions
+.page-enter-active, .page-leave-active {
+  transition: opacity 0.5s;
+}
+
+.page-enter, .page-leave-to {
+  opacity: 0;
+}
+
 $responsiveWidth: 768px;
 
 html {
diff --git a/lang/fa-IR.js b/lang/fa-IR.js
new file mode 100644
index 000000000..6cbb72dd3
--- /dev/null
+++ b/lang/fa-IR.js
@@ -0,0 +1,3 @@
+export default {
+  send: 'ارسال'
+}
diff --git a/lang/fr-FR.js b/lang/fr-FR.js
new file mode 100644
index 000000000..d99c3ac55
--- /dev/null
+++ b/lang/fr-FR.js
@@ -0,0 +1,3 @@
+export default {
+  send: 'Envoyer'
+}
diff --git a/lang/pt-BR.js b/lang/pt-BR.js
new file mode 100644
index 000000000..4422672c8
--- /dev/null
+++ b/lang/pt-BR.js
@@ -0,0 +1,3 @@
+export default {
+  send: 'Enviar'
+}
diff --git a/lang/zh-CN.js b/lang/zh-CN.js
new file mode 100644
index 000000000..5a4e86976
--- /dev/null
+++ b/lang/zh-CN.js
@@ -0,0 +1,3 @@
+export default {
+  send: '发送'
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 3494dc364..535454be5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,7 +3,7 @@
     <header class="header">
       <div class="flex-wrap">
         <div class="slide-in">
-          <nuxt-link to="/">
+          <nuxt-link :to="localePath('index')">
             <h1 class="logo">Postwoman</h1>
           </nuxt-link>
         </div>
@@ -93,7 +93,7 @@
               seems to mess up the nuxt-link active class.
             -->
             <nuxt-link
-              to="/"
+              :to="localePath('index')"
               :class="linkActive('/')"
               v-tooltip.right="'Home'"
               aria-label="Home"
@@ -101,21 +101,21 @@
               <logo alt style="height: 24px;"></logo>
             </nuxt-link>
             <nuxt-link
-              to="/realtime"
+              :to="localePath('realtime')"
               :class="linkActive('/realtime')"
               v-tooltip.right="'Realtime'"
             >
               <i class="material-icons">settings_input_hdmi</i>
             </nuxt-link>
             <nuxt-link
-              to="/graphql"
+              :to="localePath('graphql')"
               :class="linkActive('/graphql')"
               v-tooltip.right="'GraphQL'"
             >
               <i class="material-icons">cloud</i>
             </nuxt-link>
             <nuxt-link
-              to="/settings"
+              :to="localePath('settings')"
               :class="linkActive('/settings')"
               v-tooltip.right="'Settings'"
               aria-label="Settings"
@@ -123,7 +123,7 @@
               <i class="material-icons">settings</i>
             </nuxt-link>
           </nav>
-          <div v-if="['/'].includes($route.path)">
+          <div v-if="$route.path === '/'">
             <nav class="secondary-nav">
               <ul>
                 <li>
@@ -144,7 +144,7 @@
               </ul>
             </nav>
           </div>
-          <div v-else-if="['/realtime'].includes($route.path)">
+          <div v-else-if="$route.path === '/realtime'">
             <nav class="secondary-nav">
               <ul>
                 <li>
@@ -160,7 +160,7 @@
               </ul>
             </nav>
           </div>
-          <div v-else-if="['/graphql'].includes($route.path)">
+          <div v-else-if="$route.path === '/graphql'">
             <nav class="secondary-nav">
               <ul>
                 <li>
@@ -176,7 +176,7 @@
               </ul>
             </nav>
           </div>
-          <div v-else-if="['/settings'].includes($route.path)">
+          <div v-else-if="$route.path === '/settings'">
             <nav class="secondary-nav">
               <ul>
                 <li>
@@ -193,7 +193,9 @@
             </nav>
           </div>
         </aside>
-        <nuxt id="main" class="main" />
+        <transition name="layout" appear>
+          <nuxt id="main" class="main" />
+        </transition>
         <aside class="nav-second"></aside>
       </div>
     </div>
@@ -246,17 +248,16 @@
               <i class="material-icons">translate</i>
             </button>
             <template slot="popover">
+              <div v-for="locale in availableLocales"
+              :key="locale.code">
               <nuxt-link
-                v-for="locale in availableLocales"
-                :key="locale.code"
                 :to="switchLocalePath(locale.code)"
               >
-                <div>
-                  <button class="icon" v-close-popover>
-                    {{ locale.name }}
-                  </button>
-                </div>
+                <button class="icon" v-close-popover>
+                  {{ locale.name }}
+                </button>
               </nuxt-link>
+            </div>
             </template>
           </v-popover>
         </div>
diff --git a/nuxt.config.js b/nuxt.config.js
index f6b525b1b..f7579ec35 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -197,9 +197,9 @@ export default {
    ** Global CSS
    */
   css: [
-    '@/assets/css/themes.scss',
-    '@/assets/css/fonts.scss',
-    '@/assets/css/styles.scss'
+    '~/assets/css/styles.scss',
+    '~/assets/css/themes.scss',
+    '~/assets/css/fonts.scss'
   ],
   /*
    ** Plugins to load before mounting the App
@@ -290,6 +290,30 @@ export default {
         name: 'Español',
         iso: 'es-ES',
         file: 'es-ES.js'
+      },
+      {
+        code: 'fr',
+        name: 'Français',
+        iso: 'fr-FR',
+        file: 'fr-FR.js'
+      },
+      {
+        code: 'fa',
+        name: 'Farsi',
+        iso: 'fa-IR',
+        file: 'fa-IR.js'
+      },
+      {
+        code: 'pt',
+        name: 'Português Brasileiro',
+        iso: 'pt-BR',
+        file: 'pt-BR.js'
+      },
+      {
+        code: 'cn',
+        name: '简体中文',
+        iso: 'zh-CN',
+        file: 'zh-CN.js'
       }
     ],
     defaultLocale: 'en',